CSS基础知识
在前一章节中我们大概了解了什么是HTML文档，那么在小节中我们讲解一下CSS规则，怎么为HTML添加样式。每个HTML元素都有一组样式性，可以通过CSS来设定。这些属性涉及元素显示的不同方面，例如文本内容的字体、字号和颜色，元素显示的位置等等。CSS就是一种先选择HTML元素，然后设定选中元素CSS属性的机制。CSS选择符和要应用的样式构成了一条CSS规则。
2.1 解析CSS规则
下面我们举例说明：将段落标签的文本内容设置为红色
HTML代码：
1.
this is a paragraph
CSS代码：
1.p{
2. color: red;
3.}
浏览器中显示效果如图4.3.2.1-1所示
图4.3.2.1-1
在浏览器中查看代码的方式：在浏览器中点击右键，然后选择检查，即可在浏览器中查看HTML结构和CSS样式。
完整代码：
1.<!doctype html>
2.
4.
5.
6.
7.
8.
14.
15.
16.
17.
18.
hello world
19.
this is a paragraph
20.
21.
22.
2.2 CSS基础语法
CSS是一门编程语言，既然是语言那么就一定有它的语法规则。那么接下来我们就来学习CSS的基础语法规则。
CSS规则由两部分组成：选择符 和声明两部分组成，其中选择符是指你所要改变样式的元素，声明是指你需要设置的样式部分。声明由两部分组成：属性和属性值。如图4.3.2.2-1所示
图4.3.2.2-1
重要说明：CSS和HTML中的符号都是英文状态下的符号，例如规则中的":“冒号和”;"分号。
对于上面的基本结构，我们可以做出以下扩展：
1、多个声明包含在一条规则里面
1.p {
2. color:red;/字体颜色样式/
3. font-size: 26px;/字体大小样式/
4.}
2、多个选择符结合在一起
例如：同时给标题标签h1 h2 h3设置同样的样式属性
1.
hello world
2.
hello world
3.
hello world
CSS规则：
1.h1,h2,h3{ / 选择器之间用,英文状态的逗号隔开/
2. color: #900; / 字体颜色样式/
3. font-size: 20px;/ 字体大小样式/
4.}
3.多条规则应用给一个选择符
简单来说就是，多条CSS规则去改变一个元素的样式.
1.h1,h2,h3{ /选择器之间用,英文状态的逗号隔开/
2. color: #900; /字体颜色样式/
3. font-size: 20px;/字体大小样式/
4.}
5.h1{
6. text-align: center;/文本内容居中显示/
7.}
对于上面的2条规则，H1标签最后的样式为，字体颜色为红色，字体大小为20像素，文本内容居中显示。
2.3为文档添加样式(程序)
在CSS中为文档添加样式的4个方式：
内联样式
内部样式
链接样式|外部样式（link标签引入外部样式）
@import指令导入外部样式文件
1.使用内联样式：直接将样式定义到HTML元素中(写在标签里)。这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。
1.
2. 使用内部样式：写在
20.
21.
22.
23.
this is a head
24.
25.
26.
2.4用户代理样式表(浏览器)
User agent stylesheet用户代理样式表;浏览器默认的样式表
在写HTML+CSS的页面的CSS样式表时，需要进行标签重置，原因在于浏览器都拥有一套自己的默认CSS样式表，不重置的话，会降低页面浏览器的兼容性，导致页面在不同的浏览器内显示的效果不同。
【问】那浏览器为什么还要存在一套默认的CSS样式表？不存在的话多好，也不用重置，还会增强页面的兼容性，为什么不这么做？
【答】每个浏览器之所以要存在一套自己的默认CSS样式表，目的在于保证没有样式表的页面能够正常显示。浏览器在加载一个页面的时候会判断这个页面是不是存在对应的CSS样式表，如果没有，就加载浏览器默认的CSS样式表，以保证页面信息能够被正常读取。
2.5浏览器用户自定义样式(浏览器)
用户代理样式（浏览器默认样式）
浏览器用户自定义样式
开发人员样式
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
