定义
CSS：层叠样式表（Cascading Style Sheet）
用于美化网页
语法
人 {
身高:175cm;
体重:70kg;
肤色:黄色;
}
选择器{
属性名:属性值;
key:value;
......;
}
引入方式（三种）
内部样式
在<head></head>写<style></style>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#first{
color: aqua;
}
</style>
</head>
外部样式
css写法
@charset "utf-8";
#second{
color: red;
}
html页引用方式
<link rel="stylesheet" href="css/common.css" type="text/css">
行内样式
<p style="color: blue;font-size: 20px">我是行内样式表</p>
选择器
id值
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#first{
color: aqua;
}
</style>
</head>
<body>
<span id="first">我是第一个测试用例</span>
</body>
常用选择器
id #
class .
标签 标签名
第一种 按id选 #id名称 可以认为是唯一标识，类似主键，一个页面里不允许有重复的ID 1
第二种 按类class选 .类名 类似于类别 可以是一个元素一类，也可以是多个元素一类 1---n
第三种 按标签选择 标签名 span input p img 1---n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test01{
color: blue;
}
.test02{
color: chartreuse;
}
p{
color:red;
}
</style>
</head>
<body>
id选择器<br>
<span id="test01">one</span><br>
类选择器<br>
<span class="test02">two</span><br>
<span class="test02">two</span><br>
标签选择器<br>
<p>three</p>
</body>
</html>
优先级
就近优先的原则 行内>内部>外部 就近优先
补充 id>class>标签 范围取小优先（最精确的优先）
其他选择器
后代 (包含)：parent空格child
学生练习
第2章课后选做作业最后一题
答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul ul ul li{
color:red;
}
ul ol li{
color:green;
}
</style>
</head>
<body>
<h1>东软睿道学习平台</h1>
欢迎来到东软睿道学习平台，这里将为您提供丰富的学习内容。
<ul>
<li>网页制作</li>
<ul>
<li>使用Dreamweaver制作网页</li>
<li>使用CSS布局和美化网页</li>
<ul>
<li>CSS初级</li>
<li>CSS中级</li>
<li>CSS高级</li>
</ul>
<li>使用JavaScript制作网页特效</li>
</ul>
<li>平面设计</li>
<ol>
<li>美术基础</li>
<li>使用Photoshop处理图形图像</li>
<li>使用Illustrator设计图形</li>
<li>制作Flash动画</li>
</ol>
</ul>
</body>
</html>
交集（and两个条件同时满足）：如p.txt p#txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p.txt{
color: red;
}
</style>
</head>
<body>
<p>第一行</p>
<p class="txt">第二行，计划变色</p>
<span class="txt">第三行</span>
</body>
</html>
并集（or满足其中一个即可）：如p1,p2,p3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,.txt,#txtid{
color: red;
}
</style>
</head>
<body>
<p>第0行</p>
<p>第1行</p>
<div class="txt">第二行，计划变色</div>
<span id="txtid">第三行</span>
</body>
</html>
