CSS的基础知识

1.CSS基础知识

在前一章节中我们大概了解了什么是HTML文档，那么在小节中我们讲解一下CSS规则，怎么为HTML添加样式。每个HTML元素都有一组样式性，可以通过CSS来设定。这些属性涉及元素显示的不同方面，例如文本内容的字体、字号和颜色，元素显示的位置等等。CSS就是一种先选择HTML元素，然后设定选中元素CSS属性的机制。CSS选择符和要应用的样式构成了一条CSS规则。

2.解析CSS规则

下面我们举例说明：将段落标签的文本内容设置为红色

HTML代码：

1. <p id="txtp">this is a paragraph</p><!--段落标签-->  

CSS代码：

1. p{  
2.     color: red;  
3. }  

1. 在浏览器中查看代码的方式：

在浏览器中点击右键，然后选择检查，即可在浏览器中查看HTML结构和CSS样式。 

完整代码如下图：

1. CSS是一门编程语言，既然是语言那么就一定有它的语法规则。那么接下来我们就来学习CSS的基础语法规则。

CSS规则由两部分组成：选择符 和声明两部分组成，其中选择符是指你所要改变样式的元素，声明是指你需要设置的样式部分。声明由两部分组成：属性和属性值。如下图：

6.重要说明：CSS和HTML中的符号都是英文状态下的符号，例如规则中的":"冒号和";"分号。

7、多个声明包含在一条规则里面

1. p {   
2.     color:red;/*字体颜色样式*/  
3.     font-size: 26px;/*字体大小样式*/  
4. }  

8、多个选择符结合在一起 

例如：同时给标题标签h1 h2 h3设置同样的样式属性

1. <h1>hello world</h1>  
2. <h2>hello world</h2>  
3. <h3>hello world</h3>  

9.CSS规则：

1. h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/  
2.     color: #900; /*字体颜色样式*/  
3.     font-size: 20px;/*字体大小样式*/  
4. }  

10.多条规则应用给一个选择符

简单来说就是，多条CSS规则去改变一个元素的样式.

1. h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/  
2.     color: #900; /*字体颜色样式*/  
3.     font-size: 20px;/*字体大小样式*/  
4. }  
5. h1{  
6.     text-align: center;/*文本内容居中显示*/  

}