使用W3C标准制作网页还有一个非常重要的作用，那就是可以实现网页内容和样式的分离，其中HTML负责组织内容结构，CSS负责表现样式。
CSS全称层叠样式表，又称风格样式表
CSS规则由两部分组成：选择器和声明
HTML引入CSS样式的方法有三种：
行内样式
注意：每条声明由一个属性和一个值组成，属性和值用冒号分开，每条语句以英文分号结尾。
<h1 style="color: red;">style属性的应用</h1>
<p style="font-size: 14px; color: green;">直接在html标签中设置的样式</p>
内部样式
使用<style>标签引入CSS样式，把<style>标签放进<head>标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表</title>
<style type="text/css">
h2 {
color: #003580;
}
#first {
font-size: 14px;
color: #000033;
}
.name1 {
color: #F00;
}
.name2 {
color: #1F87cc;
}
.name3 {
color: #FAA53B;
}
.name4 {
color: #0D7114;
}
.img {
height: 160px;
width: 100px
}
.imgs {
height: 130px;
width: 200px;
}
</style>
</head>
<body>
<header>
<h2>花千骨</h2>
</header>
<section>
<p id="first">《花千骨》是由 <a href="#">慈文传媒集团</a>制作并发行，<span class="name1">林玉芬、高林豹、梁胜权联合执导，<br />
霍建华、赵丽颖</span>领衔主演，<span class="name2">蒋欣、杨烁</span>特别出演，<span class="name3">张丹峰、李纯、马可、鲍天琦、安悦溪、<br />
徐海乔</span>等主演的古装玄幻仙侠剧。 该剧改编自fresh果果同名小说，<br />
讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋[1] 。<br />
该剧于2014年5月6日开机，9月15日杀青，8月12日发布中文及英文版的预告片[2] 。<br />
该剧于2015年6月9日起每周二、周三晚10点在<span class="name4"> 湖南卫视</span>的钻石独播剧场播出。[3] 2015年7月5日起，<br />
该剧播放时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4]<br />
</p>
<p><img src="1.jpg" class="img" /></p>
</section>
<footer>
<h2>主要演员</h2>
<p><img src="2.jpg" class="imgs" /><img src="3.jpg" class="imgs" /></p>
</footer>
</body>
</html>
外部样式表
外部样式表是把css代码保存为一个单独的样式文件，扩展名为.css，在页面中引用外部样式表即可。
引用外部样式表有两种方式：链接外部样式表，导入外部样式表。
1. 链接外部样式表
链接外部样式使用<link/>标签链接外部CSS文件
rel="stylesheet" 是指在页面中使用这个外部样式表
type="text/css" 是指文件的类型是样式表文本
href="index.css" 是指文件所在的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接外部样式表</title>
<link href="index.css" rel="stylesheet"type="text/css">
</head>
<body>
</body>
</html>
2. 导入外部样式表
导入外部样式就是在HTML网页中使用@import 导入样式表。语句必须放在<style>标签中，而<style>标签必须放在页面的<head>标签中
url ：指的是css文件所在的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导入外部样式表</title>
<style>
@import url("css/index.css");
</style>
</head>
<body>
</body>
</html>
链接外部样式和导入外部样式的区别：
链接外部样式：客户端浏览网页时，先加载外部css文件，再进行编译显示
导入外部样式：客户端浏览网页时，先将html结构呈现出来，再去加载外部css文件
ps：当网速较慢的时候导入外部样式的方法会先显示没有css布局的html网页，这样会给用户很不好的感觉，推荐使用链接外部样式， 这也是目前大多数网站采用链接外部样式表的主要原因。
三种引入样式的优先级：行内样式>内部样式>外部样式 依据就近原则
CSS的基本选择器有三种
标签选择器 <标签名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
h2 {
color: #003580;
}
p{
color: red;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h2>花千骨</h2>
<p></p>
<p><img src="1.jpg" class="" /></p>
</body>
</html>
类选择器 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.h2 {
color: #003580;
}
.p{
color: red;
}
.img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h2 class="h2">花千骨</h2>
<p class="p"></p>
<img src="1.jpg" class="img" />
</body>
</html>
ID选择器 #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
#h2 {
color: #003580;
}
#p{
color: red;
}
#img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h2 id="h2">花千骨</h2>
<p id="p"></p>
<img src="1.jpg" id="img" />
</body>
</html>
三种选择器的优先级：ID选择器>类选择器>标签选择器
CSS的高级选择器有：
（一）层次选择器
1.后代选择器的作用就是可以选择某元素的后代元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器的应用</title>
<style type="text/css">
body p{
background-color: red;
}
</style>
</head>
<body>
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</body>
</html>p标签是body标签的后代，所以全部背景色为红色
2. 子选择器只能选择某元素的子元素，把body 和 p 之间的间隔换成 >
body>p{
background-color: red;
}
ps：这时会发现只有前面3个p标签变了红色背景，是因为body标签下只有p标签和ul标签是它的子元素，li是ul的子元素，p4~p6 是li的子元素，（后代元素包括所有子元素，子元素不一定包括后代元素）
3. 相邻兄弟选择器可以选择紧接在另一个元素后面的元素
.active+p{
background-color: red;
}
ps： 类名为active的相邻兄弟p元素，也就是类active后面的一个p元素被选中
4.通用兄弟选择器用于选择某元素后面的所有兄弟元素，一个或者多个
.active~p{
background-color: red;
}
（二）结构伪类选择器
1. first-child ul 的第一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器的应用</title>
<style type="text/css">
/* ul 的第一个子元素*/
ul li:first-child{
background-color: red;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
2.last-child ul 的最后一个子元素
ul li:last-child{
background-color: red;
}
3.nth-child(1) 选择到父级里的第一个子元素p
p:nth-child(1){
background-color: red;
}
4.nth-of-type(2) 选择父元素里第2个类型为p的元素
p:nth-of-type(2){
background-color: red;
}
nth-child(n) 和 nth-of-type(n) 的区别：
nth-child 在父级里从一个元素开始查找，不分类型
nth-of-type 在父级里面先看类型，再看位置
5. 选择父元素内具有指定类型的第一子个元素
p:first-of-type{
background-color: red;
}
6. 选择父元素内具有指定类型的最后一子个元素
p:last-of-type{
background-color: red;
}
（三）属性选择器
1. a[id] 选择具有id属性的a元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器的应用</title>
<style type="text/css">
a{
float:left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background-color: #AAC;
color: blue;
font:bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
a[id]{
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" id="first">1</a>
<a class="links">2</a>
<a href="index.html" id="index" target="_blank">3</a>
<a class="links">4</a>
<a class="links">5</a>
</body>
</html>
也可以同时设置多个属性
a[id] [target] {
background-color: coral;
}
2. a[id=first] 选择具有id属性的a元素，并且属性值为first
a[id=first] {
background-color: red;
}
3. a[class*=links] 选择所有含有class属性的并且属性值中包含links
a[class*=links]{
background-color: coral;
}
4. a[href^=http] 选择含有href属性的并且属性值以http开头的所有a元素
a[href^=http] {
background-color: red;
}
5. a[href$=html] 选择含有href属性的并且属性值以http结尾的所有a元素
a[href$=html] {
background-color: red;
}
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
