CSS的介绍：
css：层叠样式表
一、CSS的作用
1、以统一的方式实现样式的定义
2、提高页面样式的可重用性和可维护性
3、实现了内容（HTML）和表示（CSS）的分离
HTML和CSS之间的关系：
HTML：构建网页的结构
CSS ： 构建HTML元素的样式
样式汇总：
color： 字体颜色
font-size 字体大小
font-family:字体样式
background-color 背景颜色
width：宽度
height： 高度
字体使用实例（样式）
1.font-family： 字体的种类
2.font-size： 字号
3.color： 字体的颜色
4.font-weight（100-900）： 字体的粗细
{normal：普通；lighter：细；bold：宽（粗）}
5.字符间距：letter-spacing
6.字体划线：text-decoration
{overline：上划线；line-through：中划线；underline：下划线}
7.字体形状：font-style：italic（斜体）
8.行高：line-height
9.水平位置：text-align
10.首行缩进：text-indent
二、CSS的使用
1.内联样式
将样式声明在元素的style属性中
<p style="color;red（样式声明）">1</p>
样式声明 表示一个具体的显示效果，可以多个同时存在的，多个样式之间用 ； 进行隔开
每个样式声明都有两部分组成
color： 样式属性
red ： 属性值
2.内部样式表
1.在head里面加上一个 style标签
<style type="text/css"></style>
2.在style中添加任意多的样式
p{
样式声明；
}
选择器：规范了页面中哪些元素能够使用定义好的样式
3.外部样式表：
创建一个单独的样式表文件保存样式规则
在css文件夹下新建一个CSS文件 并在里面添加好样式
在需要使用得页面上添加 link 标签 进行引入
<link rel="stylesheet" type="text/css" href="css文件位置">
4.引入方式的优先级：
就近原则 谁离这个标签进 最后就是谁的样式
三、CSS样式表的特征
1、继承性:(没有被其他样式影响的情况下使用)
子级标签可以直接使用父级元素声明好的样式
（大部分的CSS样式是可以被继承）
2.层叠性:
可以同时写多个样式
3.优先级:
低： 浏览器的缺省值
中： 就近原则
高： 内联样式
4.！improtant规则:
作用： 强制调整优先级 （一定是最后显示的）
打破了优先级规则
四、CSS基础选择器
作用： 规范了页面中哪些元素能够使用定义好的样式
目的： 匹配页面元素（找到页面的元素）
1.通用选择器：（通配符选择器）
作用：匹配页面中的所有元素
用法：*{ }
2.标签选择器
作用：匹配当前所有这一类的标签
用法： 标签名{}
如：p{}
3.类选择器（类名可有多个）
作用：由css定义好，可以被任意标记的class属性值进行引用的选择器
语法：
1.在标签内 加上class属性
2.在样式表中 .类名{} 进行引入
4.ID选择器（id名称有且只有一个）
作用：针对指定ID值的元素去定义样式
语法：
在标签内加上ID属性
在样式表中 使用 #ID名{} 进行引入
注意： 类名或者ID名 不能以数字开头
除了 “_”、“ -” 以外不能有其他的特殊字符
优先级： id > class > 标签 > *
权值;
标签选择器： 0,0,0,1
类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
五、复杂的选择器
1.群组选择器
作用：选择器声明是以 “，” 分隔的选择器列表
2.后代选择器
后代： 只要是具备层级关系的元素
使用空格 隔开
3.子代选择器
子代：只具备一级层级的关系的元素
使用 “>” 隔开
六、尺寸属性
1、作用：用户设置元素的宽度和高度 单位为px 百分比
2.宽度属性和高度属性
width 设置元素的宽
height 设置元素的高
max-width ： 最大的宽度
max-height ： 最大的高度
min-width ： 最小的宽度
min-height： 最小的高度
3.允许被修改高度和宽度的元素
块级元素允许被设置宽高
行内块大部分允许被设置宽高的 例如 表单控件 单选和复选 是不能修改尺寸
存在width和height属性的元素 可以设置宽高的样式 img table
4.溢出
使用尺寸属性限制元素大小的时候，如果内容所需要的空间太小大于元素本身，会导致溢出效果
属性：
overflow
visible：默认的效果 溢出可见
hidden： 隐藏 溢出的时候隐藏
scroll 滚动 当元素溢出的时候会出现滚动条 溢出时滚动条可用
auto 自动 内容溢出的时候会出现但是没有溢出的时候不出现
七、边框阴影
属性： box-shadow
h-shadow ：水平位置
v-shadow ：垂直位置
blur ：模糊距离
spread ：阴影尺寸
color ：颜色
inset ：将外阴影变成内阴影
习题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css的使用</title>
<!--引入的优先级
就近原则：谁离这个body里的标签近，最后就是谁的样式
比如外部样式表在内部样式表下面，最后显示的是外部样式表
内部样式表在外部样式表下面，最后显示的是内部样式表
内联样式表在body标签里，所以内联样式最优先显示。
-->
<!--外部样式表
1.创建一个单独的样式表文件保存样式规则
在css文件夹下新建一个css文件。并在里面添加好样式 。
2.在需要使用的页面上添加link标签进行引入
-->
<link rel="stylesheet" type="text/css" href="css/dome1.css"/>
<!--内部样式表
在head里加上style标签
在style中加任意多的样式
选择器：规范了页面中哪些元素能够使用定义好的样式
如下方的P
-->
<style type="text/css">
p{
color: blueviolet;
}
</style>
</head>
<body>
<!--内联样式（行内样式）
将样式声明在元素的style属性中
<p style="color: chartreuse; font-size: 51px;">1</p>
样式声明：color：red;font-size:51px;
（表示一个具体的显示效果，可以多个同时存在的，多个样式之间用“ ; ” 进行隔开）
每个样式声明有两个部分组成：
如
color：样式属性
red：属性值
-->
<p style="color: chartreuse; font-size: 51px;" >1</p>
<!--CSS样式表的特征：
1.继承性：（没有被其他样式影响的情况下使用）
子级标签可以直接使用父级元素声明好的样式
（大部分的css样式是可以被继承的）
2.层叠性：
可以同时写多个样式
3.优先级：
低：浏览器的缺省值
中：就近原则
高：内联样式
4.！improtant规则
强制调整优先级
-->
<div style="color: darkgray; font-size: 79px;">
<p>2</p>
</div>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的选择器</title>
<style type="text/css">
/*优先级：
id>class>标签>通配符
权值：
标签选择器：0，0，0，1
类选择器： 0，0，1，0
id选择器： 0，1，0，0
内联样式： 1，0，0，0
选择器的权值加到一起，大的优先
如果权值相同，后定义的优先。*/
/* 通配符选择器
*{}
匹配页面中所有的元素
*/
*{
color: cornflowerblue;
font-family: 华文行楷;
font-size: 50px;
}
/*标签选择器
标签名{}
匹配当前所有这一类的标签
*/
div{
color: chartreuse;
font-family: 微软雅黑;
font-size: 79px;
}
/*类选择器（类名可多个） 类名或者id名不能以数字开头
由css定义好，可以被任意标记的class属性值进行应用的选择器 （除了“_”、“-”以外不能有其他特殊字符）
1.在标签内加上class属性
2.在样式表中
.类名{}
进行引入
* */
.s1{
color: brown;
}
.s2{
font-size: 15px;
}
/*id选择器 id名称有且只有一个
针对指定id值得元素去定义样式
1.在标签内加上id属性
2.在样式表中使用
#id名{}
进行引用*/
#c1{
color: blueviolet;
}
/*群组选择器
选择器声明以“ , ”分隔的选择器列表*/
#c1,div,p{font-family:楷体;}
/*后代选择器
后代：只要是具备层级关系的元素 使用空格隔开
*/
table td{color: deeppink;}
/*子代选择器
子代：只具备一级层级的关系的元素
使用“ > ”隔开*/
table>tbody>tr>td{color:pink;}
</style>
</head>
<body>
<div>
源氏
</div>
<p class="s1 s2" >12345</p>
<p id="c1">上山打老虎</p>
<p>假面骑士01</p>
<table >
<tr>
<td>拉拉阿拉啦啦啦啦啦啦是的是的是的</td>
</tr>
</table>
<table class="s3" >
<tr>
<td>有基佬开我裤链</td>
</tr>
</table>
</body>
</html>
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>溢出</title>
<style type="text/css">
.div1{
height: 500px;width: 500px;background-color: red;color: gold;font-family: 华文行楷;
/*属性：
overflow
1.hidden：隐藏（溢出隐藏）
2.visible：溢出可见
3.scroll：滚动（溢出出现滚动条）
4.auto：自动（溢出自动出现滚动条，没有溢出不出现）
*/
overflow: hidden;
overflow: visible;
overflow: auto;
overflow: scroll;
}
</style>
</head>
<body>
<div class="div1">
<p>
内容
</p>
</div>
</body>
</html>
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阴影边框</title>
<style type="text/css">
div{
background-color: darkgray; width: 500px;height: 500px; margin: 0 auto;
/*边框阴影：box-shadow */
box-shadow: 7px /*阴影的水平位置：h-shadow*/ 5px /*阴影的垂直位置：v-shadow*/5px /*阴影的模糊距离：blur*/10px/*阴影的尺寸：spread*/ black/*阴影的颜色：color*/;
}
</style>
</head>
<body>
<div >
</div>
</body>
</html>
```
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1{
margin: 0 auto; width: 600px;height: 950px;
}
.div2 a{
font-size:10px; font-family:黑体;
}
.div2 img{
width:60px ; height: 20px; margin-top: 10px; margin-left: 10px;
}
.div4{
font-size: 10px; margin-right: 10px;
}
.div5 img{
margin: 0 auto; width: 350px;height: 200px;
}
.div6 img{
margin: 0 auto; width: 350px;height: 200px;
}
.div7 a{
margin-left: 20px; font-size: 10px;
}
hr{
size: 1; color: darkgrey;
}
h1{
font-size: 20px;
}
.a1{
margin-left: 50px;
}
.a2{
margin-left: 10px;
}
.p1{
font-size: 10px; margin-left: 10px; margin-right: 10px; text-indent: 2em;
text-spacing:20px; line-height: 20px;
}
.p2{
font-size: 10px; text-indent: 2em;text-spacing:20px; line-height: 20px;
margin-left: 10px; margin-right: 10px;
}
.p3{
font-size: 10px; text-indent: 2em;text-spacing:20px; line-height: 20px;
margin-left: 10px; margin-right: 10px;
}
.p4{
font-size: 10px; text-indent: 2em;text-spacing:20px; line-height: 20px;
margin-left: 10px; margin-right: 10px;
}
.p5{
text-align: right;font-size: 10px; margin-right: 10px;
}
.p6{
color: darkgrey;font-size: 10px; margin-left: 10px;
}
.p7 span{
color: red; font-family:楷体; font-size:25px;margin-right: 10px;
}
.m1{
font-size: 10px;
}
.s1{
font-weight: bold;}
.s2{
font-style: italic;
}
.s3{
text-decoration: line-through;
}
.s4{
background-color: yellow;
}
.s5{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"><img src="img/baidulogo.png"/><a href="http:www.baidu.com" class="a1">百度首页</a>
<a href="#" class="a2">登录</a>
</div>
<hr />
<div class="div3">
<h1 align="center">如果没有出演美国队长，这将是克里斯·埃文斯最大的错误</h1>
<div align="right" class="div4">
<img src="img/03.jpeg" width="20px" height="20px" align="center"/>
<a href="http://www.manwei.wang/ " target="_blank">漫威</a>
</div>
<p class="p1">
<span class="s1">美国队长克里斯·埃文斯</span>
是最初曾两次婉拒出演美国队长，但最后还是参演了，
“在扮演一个对我来说意义重大的角色之后继续向前迈进，我认为任何一个演员
即使我一开始就扮演这个角色，好吧，我可能会被这个角色定义了？”CE在参加
ACE漫展时说道。“但在某种程度上来说，在过去十年间，你不禁会接受这样一个
事实：当你走在街上时，每个人都喜欢，队长！”
</p>
<marquee scrollamount="5" behavior="alternate" style="color: red;" class="m1">
欢迎进入百度百科新闻网
</marquee>
<div align="center" class="div5">
<img src="img/02.jpeg" />
</div>
<p class="p2">
<span class="s2">尽管漫威这样的长期合约曾让CE有些焦虑，</span>
因为这样很可能会将一个演员
<span class="s3">局限</span>
在这个角色中，“但实际情况是，漫威制作了一系列电影，
如果我不是这些电影的一部分，如果我对这些电影
最终说了不，那将是我生命中最大的错误”，他说道。
</p>
<p class="p3">
<span class="s4">“我认为这些电影对我来说非常特别。</span>
这是令人难以置信的珍藏，而这些也永远不会再发生，
我觉得很幸运雨特别的演员，以及导演编剧一起工作，这对我来说太特别了。”
</p>
<div class="div6" align="center">
<img src="img/01.jpeg" >
</div>
<p class="p4">
“在我生命中的某个时刻，我真的很担心[出演美国队长]，但想起来，我可以完全肯定地说，
这是我做过最好的决定。”CE还表示，即使这些电影糟透了，他的职业生涯也因此而陷入困境，
但和这些白痴[一同出席了漫展的还有“鹰眼”杰瑞米·富纳和“战争机器”唐·钱德尔]成为了朋友，
<span class="s5">也超值了!</span>
</p>
<p class="p5">2019-7-11</p>
<hr/>
<p class="p6">相关搜索</p>
<div align="center" class="div7">
<a href="https://baike.baidu.com/item/%E5%A4%8D%E4%BB%87%E8%80%85%E8%81%94%E7%9B%9F/17609141?fr=aladdin"
target="_blank">复仇者联盟演员表</a>
<a href="https://baike.baidu.com/item/%E9%92%A2%E9%93%81%E4%BE%A0/303?fr=aladdin"
target="_blank">钢铁侠</a>
<a href="https://baike.baidu.com/item/%E8%9C%98%E8%9B%9B%E4%BE%A0%EF%BC%9A%E8%8B%B1%E9%9B%84%E5%BD%92%E6%9D%A5/20270901?fr=aladdin"
target="_blank">蜘蛛侠之英雄归来</a>
</div>
<p class="p7" align="right">
<a href="#top"><span >
回到顶部</span>
</a>
</p>
</div>
</div>
</body>
</html>
