CSS回顾

CSS3概述

1.什么是CSS
Cascading style sheets 层叠样式表、级联样式表.简称样式表
2.CSS的作用
设置HTML网页中元素的样式
3.HTML与CSS的关系
HTML：负责网页的搭建，内容展示-----一个页面骨架
CSS：负责网页的修饰，样式的构建-----给网页化妆
4.HTML属性与CSS的使用原则
W3C建议我们尽量使用css的方式来取代HTML属性
CSS样式：
a.样式代码高度重用
b.方便后期的维护，提高了可维护性

CSS的语法规范

使用CSS的方式

1.行内样式/内联样式
将css样式定义在html标签中

样式声明： 样式属性:值; 样式属性:值 color:red;
内联样式开发中基本不用，只在学习和测试的使用
内联样式无法重用，内联样式优先级最高

常用的样式：
1.设置文本颜色
color:合法的颜色值(颜色的单词)
2.设置字体的大小
font-size:以px为单位的数字
3.背景颜色
background:合法的颜色值

内部样式

在网页head标签中创建style标签，在style标签内部定义样式

<style>
  样式规则1;
  样式规则2;
</style>

样式规则：由选择器和样式声明组成
div{color:purple;}
元素选择器，由元素名称作为选择器
页面上匹配这个元素的名称元素，都可以使用该样式
特点：
只能在本页面重用，其它页面无法重用，重用效果有限
开发中少用，学习和测试中使用较多

外部样式

独立于任何网页，声明一个样式文件(*.css)
在.css中保存样式规则
使用步骤
1.创建样式表文件.css
2.在css文件中编写样式规则
3.在网页的头部引入css文件

<link href="css的url"  rel="stylesheet">

CSS特性

继承性

大部分的css效果是可以直接被继承的。
必须父子结构(有层级嵌套)，子继承父

层叠性

可以为一个元素定义多个样式规则
规则中属性不冲突(不重复)时，多个样式可以同时应用到当前元素上

优先级

如果多个样式声明冲突，按照样式规则的优先级应用样式。
最高：内联样式
内部样式和外部样式，就近原则
最低：浏览器默认样式

调整样式优先级

!important规则
放在属性值之后，与值之间用空格隔开
作用:调整优先级，使用之后优先级提升

基础选择器（重点**********）

选择器的作用

规范了页面中哪些元素能够使用定义好的样式，的条件
为了匹配元素

选择器详解

1.通用选择器
匹配页面上所有的元素

*{样式声明}
效率极低，项目中少用，
唯一使用的方式
*{margin:0;padding:0}所有元素内外边距清0

2.元素选择器，标签选择器
设置页面中某种元素的默认样式

div{}
p{font-size:12px;}

3.id选择器
设置指定id元素的样式(专属的定制)

#d1{color:red;}
<div id="d1"></div>

4.类选择器
定义页面上某个或者某类元素的样式（公共样式，谁想用都可以）

.类名{样式声明}
<any class="类名"></any>

注意:类名
1.点不能省略
2.不能以数字开头
3.不能包含特殊字符(除了- _)
多类选择器
让一个元素引用多个类选择器，多个类名之间使用空格隔开

分类选择器 将元素选择器和类选择结合的一种使用方式 元素选择器.类选择器{样式声明}

<h4 class="my_font">
h4.my_font{background:pink;}

特点:
1.指向更精准
2.优先级更高

5.群组选择器
将多个选择器放到一起定义公共的样式
选择器1，选择器2，选择器3,…{样式声明}

div,p,#s1,p.my_font{
  color:#006699;
  background:#990066;
}

6.后代选择器
通过元素的后代关系匹配元素
后代：一级或者多于一级的嵌套关系
语法:选择器1 选择器2 选择器3…{样式的声明}

7.子代选择器
通过元素的子代(一级嵌套)关系匹配元素
选择器1>选择器2>选择器3…{样式声明}

8.伪类选择器
匹配元素的不同状态的选择器
选择器:伪类选择器{} 在这个标签的某一个状态下，才应用此样式
      8.1链接伪类
a:link{color:red;}没有被访问过的状态
a:visited{color:pink;}被访问之后的状态
      8.2动态伪类
a:active{font-style:italic;}元素被激活状态
input:focus{background:black;color:white;}匹配元素获取焦点时
img:hover{width:100px;}匹配元素被鼠标悬停时

9.选择器的权值
权值，表示当前选择器的重要程度，权值越大优先级越高
!important >1000
内联样式 1000
id选择器 100
类和伪类 10
元素选择器 1
*通用选择器 0
继承的样式 无

1.当一个选择器含有多个选择器时，需要将所有的选择器的权值进行相加
然后再比较，权值高的优先级高
2.分组选择器权值不相加，单独计算
3.权值的计算不会超过其最大数量（100个1加在一起，不会大于一个10）
4.样式后面添加！important,该样式直接获得最高优先级
内联样式不能添加!important
5.权值相同，按照就近原则

尺寸和边框

尺寸属性

width
最大宽度max-width
最小宽度min-width
height
max-height
min-height
取值：
1.以px为单位的数字
2.%，相对单位，占据父元素尺寸的百分比
总结：页面中允许设置尺寸的元素
1.所有的块级元素都可以设置
2.行内块都可以设置
input(单选框和复选框不能设置)
3.本身具有width和height属性的元素，可以设置
table,img
大部分的行内元素都不允许设置尺寸

附加知识点 单位
1.px 像素
2.in 英寸 1in=2.54cm
3.pt 磅值，一般修饰字体大小 1pt=1/72in
4.cm
5.mm
6.em 相对于父级设置的尺寸乘以的倍数(1.5em)
7.rem相对于根元素设置的尺寸乘以的倍数(1.5rem)
8.%

附加知识点 合法颜色值
1.颜色的英文单词 red blue yellow gray …
2.#rrggbb 取值 16进制 r:0~ff g:0~ff b:0~ff
3.#aabbcc 简写成#abc
4.rgb(0_255,0255,0~255);
5.rgb(r%,g%,b%);
6.rgba(r,g,b,a)
a:alpha 透明度（0-1） 1：不透明 0：透明

尺寸和属性

尺寸属性

溢出处理

当内容多，元素区域小的时候，就会产生溢出效果
默认都是纵向溢出的
属性 overflow/overflow-x/overflow-y
取值：
      1.visible 默认值，溢出可见
      2.hidden 溢出部分隐藏
      3.scroll 显示滚动条，不管是否溢出都显示滚动条
只有在溢出时，滚动条可用
      4.auto 自动，溢出方向有滚动条，没溢出的方向没有滚动条
如果想显示成横向溢出
需要在内容和容器之前再套一层容器
内部容器宽度要比外部容器宽

边框

1.border:width style color;
width:边框的宽度
style:边框的样式
      取值：solid 实线
            dotted 虚线(圆点)
            dashed虚线(线)
            double 双实线
color:边框颜色，合法的颜色值，支持透明色(transparent)
border直接设置上右下左4个方向的边框
取消边框 border:none/0;

2.单边定义
只设置某一条边的3个属性
border-top/right/bottom/left:width style color;

3.单属性定义
border-color:#00f;
border-style:dashed;
border-width:10px;

4.单边单属性定义(12个)
border-top/right/bottom/left-width/style/color:

5.边框的倒角
把直角变成圆角
border-radius:
取值：
      1.以px为单位的数字
      2.% 50%设置圆形

单角设