CSS3的概念：
Cascading Style Sheet 级联样式表表现HTML或XHTML文件样式的计算机语言
CSS3的作用：
作用：包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS3的样式：
行内样式，内联样式，外部样式
优先级：行内样式>内部样式表>外部样式表就近原则，要遵从就近原则
CSS基本选择器
标签选择器，类选择器，ID选择器
基本选择器的优先级：ID选择器>类选择器>标签选择器
CSS的高级选择器
层次选择器，结构伪类选择器，属性选择器，E[attr]属性选择器，E[attr=val]属性选择器
层次选择器分为:后代选择器,子选择器,相邻兄弟选择器,通用兄弟选择器
案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择器</title>
<link rel="stylesheet" href="css/style.css"/>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择器</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h2>花千骨</h2>
<h2>花千骨</h2>
<p id="text">《花千骨》是由 <a href="#" class="font1">慈文传媒集团</a>制作并发行，<span class="font2">林玉芬、高林豹、梁胜权联合执导，霍建华、赵丽颖</span>领衔主演，<span
class="font3">蒋欣、杨烁</span>特别出演，<span class="font4">张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</span>等主演的古装玄幻仙侠剧。
该剧改编自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋[1] 。该剧于2014年5月6日开机，9月15日杀青，8月12日发布中文及英文版的预告片[2] 。
该剧于2015年6月9日起每周二、周三晚10点在 <span class="font5">湖南卫视</span>的钻石独播剧场播出。[3]
2015年7月5日起，该剧播放时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4] </p>
<img class="img1" src="img/1.jpg" alt=""/>
class="font3">蒋欣、杨烁</span>特别出演，<span class="font4">张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</span>等主演的古装玄幻仙侠剧。
该剧改编自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋[1] 。该剧于2014年5月6日开机，9月15日杀青，8月12日发布中文及英文版的预告片[2] 。
该剧于2015年6月9日起每周二、周三晚10点在 <span class="font5">湖南卫视</span>的钻石独播剧场播出。[3]
2015年7月5日起，该剧播放时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4] </p>
<img class="img1" src="img/1.jpg" alt=""/>
<h2>主要演员</h2>
<p>
<img class="img2" src="img/2.jpg" alt=""/>
<img class="img2" src="img/3.jpg" alt=""/>
</p>
</body>
</html>
<img class="img2" src="img/2.jpg" alt=""/>
<img class="img2" src="img/3.jpg" alt=""/>
</p>
</body>
</html>
引用外部样式的CSS文件
h2 {
color: #003580;
}
color: #003580;
}
#text {
font-size: 14px;
color: #000033;
}
font-size: 14px;
color: #000033;
}
.font1 {
color: #f00;
}
color: #f00;
}
.font2 {
color: #1f87cc;
}
color: #1f87cc;
}
.font3, .font5 {
color: #faa53b;
}
color: #faa53b;
}
.font4 {
color: #0d7114;
}
color: #0d7114;
}
.img1 {
100px;
height: 160px;
}
100px;
height: 160px;
}
.img2 {
200px;
height: 130px;
}
200px;
height: 130px;
}
效果图
