一.三种方法

1.内联：

<p>慕课网，<p style="color:blue">超酷的互联网</p>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>

</body>

2.嵌入式：

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
color:blue;
}
</style>
</head>
<body>
<p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>

</body>

3.外部式：

4.优先级：

内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）

二.css选择器：

1.类选择器：

.stress{color:red;}/*类前面要加入一个英文圆点*/

<span class="stress">胆小如鼠</span>

2.ID选择器：

#setGreen{
   color:green;}

<span id="setGreen">公开课</span>

3.类和ID选择器的异同：

相同点：可以应用于任何元素
不同点：1、ID选择器只能在文档中使用一次，类选择器可以使用多次

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。

4.子选择器：

.food>li{border:1px solid red;}

5.包含(后代)选择器：

.first  span{color:red;}   >作用于元素的第一代后代，空格作用于元素的所有后代。

6.通用选择器：

* {color:red;} 匹配html中所有标签元素

7.伪类选择符:

a:hover{color:red;}

8.分组选择符：

h1,span{color:red;}

三.css的继承、层叠和特殊性

1.继承：

p{color:red;} 可以继承
p{border:1px solid red;} border不可以继承

2.特殊性：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

权值越高，就使用哪种css样式

前端学习：css