CSS样式
1.内联式CSS样式表：把CSS代码直接写在现有HTML标签中
(1)<p style="color:red">这里是红色的字</p>
(2)<p> 这里是红色的字</p style="color:red">
注：CSS样式代码要写在style=""双引号中,如果右多条CSS样式代码设置可以写在一起，中间用分号隔开
<p style="color:red" ; font-size:12px>这里是红色的12像素的字</p>
2.嵌入式CSS样式表：把CSS代码写在<style type="text/css"></style>标签中间
<style type="text/css">
span{
color:red;
}
</style>
<body>
<span>这里是红色的字</span>
</body>
3.外部式CSS样式:把CSS写在单独的一个文件中
在index.html文件中：
<link href="style.css" rel="stylesheet" type="text/css" />
<body>
<span>这里是红色的字</span>
</body>
在style.css文件中
span{
color:red;
}
注：
1.CSS样式文件名称以有意义的英文字母命名,如main.css
2.rel="stylesheet" type="text/css"是固定写法不可修改
3.<link>标签位置一般写在<head>标签之内
三种方法的优先级：离修饰的内容距离越近越优先，就近原则
选择器
选择器{
样式
}
在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象，也就是"样式"作用于网页中的哪些元素
标签选择器：html代码中的标签
p{pont-size:12px; line-height:1.6em;}
上面的p，就是一个p标签
类选择器
语法： .类选择器名称{CSS样式代码;}
英文圆点开头
名称可以随意起
例：
<style type="text/css">
.stress{
color:red;
}
</style>
<body>
<span clss="stress"> 要修饰的文字</span>
</body>
ID选择器
ID选择器类似类选择器,区别在于
1.为标签设置id="ID名称",而不是class="类名称"
2.ID选择符的前面是#，而不是.
例：
<style type="text/css">
#stress{
color:red;
}
</style>
<body>
<span id="stress"> 要修饰的文字</span>
</body>
注：ID选择器在文档中只能使用一次
可以用类选择器词列表方法为一个元素同时设置多个样式，ID选择器却不可以
例：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
子选择器
即大于符号（>）,用于选择指定标签元素的第一代子元素
例子：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>子选择符</title> 6 <style type="text/css"> 7 .food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ 8 9 </style> 10 </head> 11 <body> 12 <p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 13 <h1>食物</h1> 14 <ul class="food"> 15 <li>水果 16 <ul> 17 <li>香蕉</li> 18 <li>苹果</li> 19 <li>梨</li> 20 </ul> 21 </li> 22 <li>蔬菜 23 <ul> 24 <li>白菜</li> 25 <li>油菜</li> 26 <li>卷心菜</li> 27 </ul> 28 </li> 29 </ul> 30 </body> 31 </html>
包含(后代)选择器
即加入空格，用于选择指定标签元素下的后辈元素
注：与子选择器的区别：子选择器仅是指它的直接后代，或者可以理解为作用于子元素的第一代后代
而后代选择器是作用于所有子后代元素。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>后代选择器</title> 6 <style type="text/css"> 7 .first span{color:red;} 8 9 .food li{ 10 border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ 11 } 12 </style> 13 </head> 14 <body> 15 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 16 <!--下面是本小节任务代码--> 17 <ul class="food"> 18 <li>水果 19 <ul> 20 <li>香蕉</li> 21 <li>苹果</li> 22 <li>梨</li> 23 </ul> 24 </li> 25 <li>蔬菜 26 <ul> 27 <li>白菜</li> 28 <li>油菜</li> 29 <li>卷心菜</li> 30 </ul> 31 </li> 32 </ul> 33 34 </body> 35 </html>
通用选择器
匹配html中所有标签元素
例子：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>* 选择符</title> 6 <style type="text/css"> 7 * {color:red;} 8 9 10 </style> 11 </head> 12 <body> 13 <h1>勇气</h1> 14 <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 15 <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> 16 <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > 17 </body> 18 </html>
分组选择符
在html中多个标签元素设置同一个样式时，可以用分组选择符(,)
如：
h1,span{color:red;}
相当于：
h1{color；red;}
span{color:red;}