一.三种方法
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.外部式:
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
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选择器只能在文档中使用一次,类选择器可以使用多次
4.子选择器:
.food>li{border:1px solid red;}<ul class="food">
<li>水果
<ul>
<li>香蕉 </li>
<li>苹果</li>
5.包含(后代)选择器:
.first span{color:red;} >作用于元素的第一代后代,空格作用于元素的所有后代。
6.通用选择器:
* {color:red;} 匹配html中所有标签元素
7.伪类选择符:
a:hover{color:red;}<a href="http://www.imooc.com">胆小如鼠</a>
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样式