CSS
一、概述
1、简介
css全称是Cascading Sheets ，层叠样式表，级联样式表，简称样式表。
2、作用
设置HTML网页中的元素样式。
3、CSS和HTML的关系
HTML：负责网页结构的搭建，内容的展示；
CSS：负责网页的修饰；
4、CSS与HTML的属性使用原则
w3c建议我们尽量使用css的方式来取代html的属性
css样式：
1）样式代码高度的重用；
2）提高可维护性；
二、语法规范
1、使用CSS的方法
1.1 内联样式
将CSS的样式定义在HTML标签的style属性中
<any style="样式声明"></any>
样式声明 样式属性：值 组成
多个样式声明之间用分号分隔
注意：
1、内联样式使用的非常少（禁止使用）；
2、样式冲突的时候内联样式优先级最高；
3、内联样式不能重用；
4、项目中一般很少用，只在学习和测试时用；
【例子】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color:red;font-size:10px">小白兔</p>
<p style="color:pink;font-size:20px">白又白</p>
<p style="color:blue;">两只耳朵竖起来</p>
<p style="color:red;background:blue">爱吃萝卜和青菜</p>
</body>
</html>
【常用的CSS属性】
color:设置文本的颜色
取值：合法的颜色值（颜色的英文，#a~f*3 #abc）
font-size:设置字体大小
background:设置背景颜色
1.2 内部样式
在<head></head>标签中，添加<style></style>标签，在其内部定义样式规则
<style>
样式规则
</style>
样式规则：由选择器和样式声明组成
注意：
1、内部样式在本页面可以重用，但是其他页面不能重用；
2、项目中使用不多，但是学习和测试中大量使用；
【例子】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: #aaf;
background: #faf;
}
</style>
</head>
<body>
<p>小白兔</p>
<p>白又白</p>
<p>两只耳朵竖起来</p>
<p>爱吃萝卜和青菜</p>
</body>
</html>
1.3 外部样式
可在任何网页中引用
<head>
<link rel="stylesheet" hred="css文件的url">
</head>
外部样式是项目中必须使用的样式写法
【1120.css】
p{
color:pink;
background: #ff0;
font-size: 50px;
}
【1120.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="1120.css">
</head>
<body>
<p>小白兔</p>
<p>白又白</p>
<p>两只耳朵竖起来</p>
<p>爱吃萝卜和青菜</p>
</body>
</html>
【1121.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="1120.css">
</head>
<body>
<p>小白兔</p>
</body>
</html>
2、css样式的特性
1）继承性（子标签继承父标签）
大部分的CSS效果是可以直接被子元素继承的
必须是层级结构
2）层叠性
可以为一个元素定义多个样式规则
规则中属性不冲突（不重复），可以同时作用当当前元素上
3）优先级
如果样式声明冲突时，按照样式规则优先级应用；
默认的优先级，从高到低：
1、内联样式（行内样式）优先级最高；
2、内部样式、外部样式, 遵循就近原则 ；
3、浏览器默认样式最低；
4、调整优先级
!important规则------放在属性值后，与值之间用空格隔开，作用是调整优先级，让没有important属性不能覆盖他；
3、选择器
【基础选择器】
1） 选择器的作用
规范了页面中哪些元素能够使用定义好的样式
为了匹配元素
2）基础选择器的详解
1> 通用选择器
*{样式} *{color: #faf}
*效率极低，尽量少用
*{margin:0;padding:0}
【元素选择器（标签选择器）】
设置页面中一类元素的默认样式
语法：标签名称{样式申明}
p{
color: red;
}
【类选择器】
定义页面上某类元素的公共样式，谁想要用，就引用我的class名
元素通过class属性来引用该样式
语法：.类名{样式申明} 注意：“.”不可以省略 类名不能以数字开头 ，不可以包含特殊字符(可以有-_)
<any class="类名">
【例子】：
<style type="text/css"> .font_blue{color: blue;} </style> <body> <p class="font_blue">土豆丝</p> </body>
类选择器的特殊用法：
1、多类选择器(一个元素引用多个类选择器)，中间用空格分开
<style type="text/css"> .font_blue{color: blue;} .font_size{font-size: 30px;} </style> <body> <p class="font_blue font_size">土豆丝</p> </body>
2、分类选择器（将元素选择器和类型选择器联合使用）
语法：元素选择器.类选择器{}
可以匹配到，指向了某个类的具体的某个元素
<style type="text/css">
span.font_pink{color: pink;}
</style>
<body>
<span class="font_pink">hello</span>
</body>
作用：
1、指向更精确
2、优先级变高
3、id选择器（设置指定元素的样式，专属定制）
<style type="text/css">
#d1{color: yellow;}
</style>
<body>
<div id="d1">盐水鸭</div>
</body>
4、群组选择器（将多个选择器放在一起，一块定义某公共样式）
语法：选择器1，选择器2，选择器3......
#d1,#d2,span,*{color: blue},.font_size{font-size: 50px;}
5、后代选择器（通过元素的后代关系匹配元素，后代指的是一层或多层的嵌套关系）
语法：选择器1 选择器2 选择器3{样式申明}
去掉a标签的下划线：text-decoration:none
<style type="text/css"> div span{color: red;} </style> <body> <div> <span>hello</span> </div> </body>
6、子代选择器(通过元素的子代关系匹配元素【一层嵌套】)
选择器1>选择器2>选择器3{样式申明}
子代和后代可以混用
<style type="text/css"> div>span{color: yellow;} </style> <body> <div><span>hello</span></div> </body>
7、伪类选择器（匹配元素的不同状态下样式）
1）链接伪类
:link 元素尚未访问时的状态样式
:visited 元素访问过后的状态样式
【例子】
<style type="text/css"> #a1:link{color: red;} #a1:visited{color: yellow;} </style> <body> <a id="a1" href="http://www.baidu.com">百度</a> </body>
2）动态伪类
:active 匹配元素被激活时的状态 鼠标点击的一瞬间
<style type="text/css"> #a1:active{color: pink;} </style> <body> <a id="a1" href="http://www.baidu.com">百度</a> </body>
:focus 匹配元素获取焦点时的状态
<style type="text/css"> #cs:focus{background:yellow;} </style> <body> <input id="cs" type="button" name="你会"> </body>
:hover 鼠标悬停在元素时的状态
<style type="text/css"> .img:hover{width: 200px;} </style> <body> <img class="img" src="C:/Users/Desktop/739.png" alt=""> </body>
8、选择器的权值
权值：标识当前选择器的重要程度，权值越大优先级越高；
!important > 1000
内联样式 = 1000
id选择器 = 100
类和伪类选择器 10
元素选择器 1
*选择器 0
继承的样式无权值 无
4、边框尺寸
1）尺寸属性（改变元素的宽高）
width
最大宽度 max-width
最小宽度 min-width
height
最大高度 max-height
最小高度 min-height
<head> <title></title> <style type="text/css"> .d1{ background: pink; width: 200px; height: 200px; max-width: 300px; min-width: 200px; } </style> </head> <body> <div class="d1"></div> </body>
总结：页面中可以设置尺寸的元素
1、所有的块级元素都允许设置尺寸
2、所有的行内块元素都允许设置 表单元素（除了单选按钮和复选框）
3、本身具备width height 属性的元素
大部分行内元素不允许修改尺寸
2、颜色单位
1、颜色的英文单词
2、#rrggbb
3、#aabbcc
4、rgba(r,g,b,alpha) alpha 透明度
一、尺寸和边框
1、尺寸属性
2、溢出处理
当内容多，元素区域小的时候，就会产生溢出效果，默认是纵向溢出
overflow overflow-x overflow-y
取值：
visible 可见的 默认值 溢出可见
hidden 隐藏的 溢出的内容不可见
scroll 显示滚动条，不管是否溢出，都添加横向和纵向滚动条
auto 溢出的部分，显示滚动条，并可用
3、边框属性
border:width style color border-top border-right boder-bottom boder-left
边框的宽度
style:边框的样式
取值 solid 实线
dotted 虚线（点点）
dashed 虚线（短线）
double 双实线
color:边框的颜色，合法的颜色值 （transparent 透明色）
这种写法，同时设置4个边框，是一种简写方式
取消边框 border:none/0;
单属性设置：
border-color:#f00;
border-style:dotted;
border-10px;
单边单属性：
border-方向-属性（12个）
border-top-style:double;
border-top-color:#44f;
【例子】向下的三角箭头
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .d1{ width: 0; height: 0; border: 30px solid transparent; border-top-color: #aaa; </style> </head> <body> <div class="d1"></div> </body> </html>