HTML+CSS学习笔记(6)

php中文网
发布: 2016-06-24 11:24:35
原创
1096人浏览过

认识css样式

css全称为“层叠样式表 (cascading style sheets)”,它主要是用于定义html内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

如下列代码:

p{   font-size:12px;   color:red;   font-weight:bold;}
登录后复制

使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

CSS样式的优势

大丈夫当如此!是英雄,分我杯羹!年少轻狂,只记得眉心一点。举手与天竞自由,豪情纵,胸怀敞。
登录后复制

为什么使用css样式来设置网页的外观样式呢?上面一段文字,我们想把“是英雄”、“豪情纵”、“年少轻狂”这三个短语的文本颜色设置为红色,这时就 可以通过设置样式来设置,而且只需要编写一条css样式语句。

第一步:把这三个短语用括起来。

立即学习前端免费学习笔记(深入)”;

第二步:写入下列代码:

span{    color:red;}
登录后复制

代码如下:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS样式的优势</title><style type="text/css">span{   color:red;}</style></head><body>    <p>大丈夫当如此!<span>是英雄</span>,分我杯羹!<span>年少轻狂</span>,只记得眉心一点。举手与天竞自由,<span>豪情纵</span>,胸怀敞。</p></body></html>
登录后复制

CSS代码语法

css 样式由选择符声明组成,而声明又由属性组成,如下图所示:

Get笔记
Get笔记

Get笔记,一款AI驱动的知识管理产品

Get笔记 125
查看详情 Get笔记

选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:

p{font-size:12px;color:red;}
登录后复制

注意:

1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。

2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:

p{   font-size:12px;   color:red;}
登录后复制

CSS注释代码

就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用)。就像下面代码:


HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号