1.在上一章我们大概了解了什么是html文档,那么在这一章我们将讲解一下css规则,这么为html里添加样式,每个html都有一个样式表,可以用css来设定这些属性涉及到元素显示不同方面,比如文字内容的字体、子号和颜色,元素属性的位置等等。CSS就是一种先选择HTML元素,然后设定选中元素CSS属性的机制。CSS选择符和要应用的样式构成了一条CSS规则。
2.CSS规则是什么呢?
下面我们列表说明,我们举列说明我们把段落标签设为蓝色
HTML代码
- <p>这是段落标签</p>
CSS代码
- 1.p{
- 2. color: blue;
- 3.}
浏览器效果图
3.在浏览器打开样式表按F12就可以在浏览器查看HTML结构和CSS样式。
4.完整代码
- <!doctype html><!--它是html5标准网页声明-->
- <html><!--根元素-->
- <head><!--头部-->
- <meta charset="utf-8"><!--字符集为uft-8-->
- <title>无标题文档</title><!--标题-->
- <link rel="stylesheet" href="Untitled-3.css">
- </head>
- <body>
- <!-- 这是网页内容-->
- <p>这是段落标签</p>
- </body>
- </html>
5.CSS基础语法
CSS是一门编程语言,既然是语言那么就一定有它的语法规则。那么接下来我们就来学习CSS的基础语法规则。
CSS规则由两部分组成:选择符 和声明两部分组成,其中选择符是指你所要改变样式的元素,声明是指你需要设置的样式部分。声明由两部分组成:属性和属性值。
重要说明:CSS和HTML中的符号都是英文状态下的符号,例如规则中的":"冒号和";"分号。
对于上面的基本结构,我们可以做出以下扩展:
6.多个声明包含在一条规则里面
- p {
- color:blue;/*字体颜色样式*/
- font-size: 18px;/*字体大小样式*/
}
7.多个选择符结合在一起
例如:同时给标题标签h1 h2 h3设置同样的样式属性
- <h1>hello world</h1>
- <h2>hello world</h2>
- <h3>hello world</h3>
8.CSS规则:
- h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/
- color: blue; /*字体颜色样式*/
- font-size: 20px;/*字体大小样式*/
- }
9.多条规则应用给一个选择符
简单来说就是,多条CSS规则去改变一个元素的样式.
- h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/
- color: blue; /*字体颜色样式*/
- font-size: 20px;/*字体大小样式*/
- }
- h1{
- text-align: center;/*文本内容居中显示*/
- }
10.对于上面的2条规则,H1标签最后的样式为,字体颜色为蓝色,字体大小为20像素,文本内容居中显示。