css :层叠样式表 (Cascading Style Sheets)（级联样式表）------作用：美化html标签。
1、基础选择器
（1）标签选择器-----标签{属性：值；} （总结：一打一大片）
特点：定义之后，会将页面所有元素都执行这个标签样式
了解一些简单的属性
宽：Width:20px;
高：height:30px;
背景颜色：Background-color:red;
文字大小：font-size:24px;
内容的水平对齐方式：text-align:left | center| right
首行缩进：text-indent:2em;注意1em就相当于一个汉字的大小
文字颜色：Color:red;
颜色的表示方法：
【1】直接写颜色的名称
red、green、yellow......
【2】十六进制显示颜色
0-9 a-f 表示的颜色越来越浅；
值相同则可简写，比如 #888888 可写成#888
【3】rgb 表示方法，括号里填写色值
color: rgb(100,120,90)
【4】rgba a代表alpha 不透明度， 值0--1； 0表示完全不透明；0.5表示半透明
color: rgba(120,120,120,0.5)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
/*样式表写到head中*/
<style type="text/css">
/*标签选择器*/
div{
font-size:30px;
width:200px;
height:300px;
color:red;
backgroud-color:green;
}
p{
font-size:20px;
color:yellow;
}
</style>
</head>
<body>
<div>也许遗憾和年轻总绑在一起；</div>
<div>我若不勇敢，谁来替我坚强；</div>
<p>每个人都有属于自己的过去，我们所要做的是别再往伤口上撒盐。</p>
<p>所谓的了解，就是知道对方心灵最深处的地方的痛处，痛在哪里。</p>
</body>
</html>
2、类选择器 （总结：谁调用谁生效，指谁打谁）
写法： .自定义类名{属性:值; 属性:值;......}
特点： 谁调用，谁生效；
一个标签可以调用多个类选择器；（一般最多调用两个）
多个标签可以调用同一个类选择器。
自定义类名命名的规则：
◎不能用纯数字或者数字开头来定义类名；
◎不能使用特殊符号或者特殊符号开头（_）来定义类名；（一般用链接符命名：miss_you这样就可以）
◎不建议使用汉字来定义类名；
◎不推荐使用属性或者属性的值来定义类名。
掌握一些常用的命名
头：header 内容：content/container
尾：footer 导航：nav
侧栏：sidebar 栏目：column
页面外围控制整体布局宽度：wrapper 左右中：left right center
登录条：loginbar 标志：logo
广告：banner 页面主体：main
热点：hot 新闻：news
下载：download 子导航：subnav
菜单：menu 子菜单：submenu
搜索：search 友情链接：friendlink
页脚：footer 版权：copyright
滚动：scroll 内容：content
举个例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
/*样式表写到head中*/
<style type="text/css">
/*类选择器（.box/.test）*/
.box{
font-size: 40px;
width: 100px;
height: 200px;
color: red;
backgroud-color: green;
}
.test{
text-indent: 2em;
text-align: right;
}
</style>
</head>
<body>
/*一个标签可以调用多个类选择器*/
<div class="box miss">也许遗憾和年轻总绑在一起；</div>
<div>别再忘记我也别记不清我，你要像我记住你那样记住我。</div>
/*多个标签可以调用同一个类选择器*/
<p class="test">是不是每一段感情破裂过后，都会觉得一些事情特别现实。</p>
<p class="test">未了，重生，时间能否会让这一切重来，慢慢等着，等着。</p>
</body>
</html>
（3）ID选择器 （总结：只能打一个）
写法： #自定义名称{属性:值;}
特点：一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题；
一个标签只能调用一个ID选择器；
一个标签可以同时调用类选择器和ID选择器。
<style type="text/css">
/*ID选择器*/
#box{
font-size: 40px;
color: red;
backgroud-color: rgb(250,234,12);
}
.test{
text-indent: 1em;
text-align: center;
}
</style>
</head>
<body>
/*一个标签可以同时调用类选择器和ID选择器。*/
<div id="box" class="test">你走吧，我总要习惯一个人。</div>
<div>戴上面具我就失去了自己，可是摘下面具我便失去了世界。</div>
</body>
（4）通配选择器 （总结：全打）不推荐使用，会增加浏览器和服务器负担。
写法： *{属性:值;}
特点：给所有的标签都使用相同的样式。
2、复合选择器：两个或者两个以上的基础选择器通过不同的方式连接在一起。
（1）交集选择器
写法：标签+类（ID）选择器{属性:值;} 注意：中间没有空格
特点：既要满足使用了某种标签，同时还要满足使用了类（ID）选择器。
比如
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
/*样式表写到head中*/
<style type="text/css">
/*标签+类选择器*/
div.box{
font-size: 40px;
height: 200px;
backgroud-color: green;
}
/*标签+ID选择器*/
p#test{
text-indent: 2em;
text-align: right;
}
</style>
</head>
<body>
/*既满足使用了div标签，又满足使用了.box类选择器，这行代码样式才生效*/
<div class="box">也许遗憾和年轻总绑在一起；</div>
/*缺少.box类选择器，所以样式不会在这里生效*/
<div>别再忘记我也别记不清我，你要像我记住你那样记住我。</div>
/*既满足使用了p标签，又满足使用了#test（id）选择器，这行代码样式才生效*/
<p id="test">是不是每一段感情破裂过后，都会觉得一些事情特别现实。</p>
</body>
</html>
（2）后代选择器（重点） 为了选择某一标签
写法： 选择器+空格+选择器+空格+......+选择器{属性:值;}
区别下面的例子
<style type="text/css">
/*后代选择器*/
div p span{
font-size: 40px;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
/*调用样式成功*/
<div><p><span>几场梅雨，几卷荷风，江南已是烟水迷离。小院里湿润的青苔在雨中纯净生长。</span></p></div>
/*调用样式失败，因为缺少p标签*/
<div><span>目击众神死亡的草原上野花一片，远在远方的远比远方更远，我们琴声呜咽，泪水全无，我把远方的远归还草原。</span></div>
</body>
如果上面的后代选择器改成
div span{
font-size: 40px;
width: 100px;
height: 200px;
}
则都会调用样式成功。
总结：只写div span （既开始第一个与最里面一个）中间可以无限次隔代。
只要能代表标签：标签、类选择器、ID选择器可以自由组合
.box span{
font-size: 40px;
width: 100px;
height: 200px;
}
.box .miss{
font-size: 40px;
width: 100px;
height: 200px;
}
（3）子代选择器（了解）
写法：选择器 > 选择器{属性:值;}
特点：只能选中直接的下一代，不可以隔代。
<style type="text/css">
/*子代选择器*/
div>span{
font-size: 40px;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
/*调用样式失败成功，因为不是直接的下一代，要正确显示子代选择器应为：div>p>span*/
<div><p><span>文学是一艘小船， 装载着作家的精神和灵魂，驶进读者的心灵</span></p></div>
/*调用样式成功*/
<span>珍惜黄昏的村庄，珍惜雨水的村庄，万里无云，如同我永恒的悲伤。</span>
</body>
（4）并集选择器：样式全部相同或部分相同可以写在一起，可使用逗号把任意标签、选择器连接在一起。
写法：选择器+，+选择器+,+...+选择器{属性:值;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
/*样式表写到head中*/
<style type="text/css">
/*并集选择器*/
div,p,span,.box{
font-size: 40px;
width: 100px;
backgroud-color: green;
}
</style>
</head>
<body>
<div>也许遗憾和年轻总绑在一起；</div>
<h1 class="box">别再忘记我也别记不清我，你要像我记住你那样记住我。</h1>
<p>是不是每一段感情破裂过后，都会觉得一些事情特别现实。</p>
<span>未了，重生，时间能否会让这一切重来，慢慢等着，等着。</span>
</body>
</html>
选择器的综合练习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
/*样式表写到head中*/
<style type="text/css">
div.box ul.miss li,div.box1 span{
font-size: 40px;
width: 100px;
backgroud-color: green;
}
</style>
</head>
<body>
<div class="box">
<ul class="miss">
<li>车窗外的云彩暗了，时已薄暮，淅淅沥沥，好像下起雨来了。</li>
</ul>
</div>
<div class="box1">
<span>你是谁朝思暮想的笔尖少年，在绝望的荒途里辗转成歌。</span>
</div>
</body>
</html>
了解文本元素属性及连写方法
div{
font-size: 40px;/*文字大小*/
font-weight: 700;/*文字粗细，值从100-700，从700（bold）开始加粗*/
font-family: 微软雅黑;/*字体，常用宋体和微软雅黑*/
font-style:normal;/*文字风格 normal默认值，italic 斜体*/
line-height:40px/*行高*/
}
连写方法: font: font-style font-weight font-size/line-height font-family;
注意：文字大小和字体为必写项
div{
font:italic 700 14px/30px 微软雅黑;
}
文字表达方式
（1）直接写中文名称
div{
font-family: 微软雅黑;
}
（2）书写字体的英文名称：性能比直接写中文稍好
div{
font-family: microsoft yahei;
}
（3）使用unicode编码方式
字体名称 英文名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 microsoft yahei \5FAE\8F6F\96C5\9ED1
楷体 _GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼圆 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
操作步骤：
【1】打开浏览器，按F12调出解释器；
【2】选中Cosole；
【3】输入escape("宋体"）按回车，括号中可输入任意字体；
【4】得出结果：%u5B8B%u4F53 将百分号（%）改成斜杆（/）即变成unicode编码。