CSS

一.css3概述

Cascading style sheets 层叠样式表，级联样式表，简称样式表。

1.作用

对html标签进行装饰，让页面变的好看

2.html与css的关系

HTML：负责网页的结构，和内容的搭建
CSS：负责网页的修饰，样式的处理

3.css与html属性的使用规则

W3C建议我们尽量的使用css的方法来取代html属性；
css可以是样式代码重用(有限)
方便后期维护，提高可维护性

二.css语法规范

1.使用css样式的方法

（1）行内样式(内联样式)

1）不能重用，优先级最高
2）将css样式定义在标签的style属性中
3）样式声明：样式属性:值; 多个样式声明之间使用;隔开
4）常用样式：color:颜色单词 设置字体颜色
background-color:颜色单词 设置背景颜色
font-size:以px为单位的数字，设置字号大小

<any style=“样式属性:值;样式属性:值;”></any>

（2）内部样式

1）优先级与外部样式属于同一级别，两者遵循就近原则
2）样式的重用只在当前页面有效
3）在head标签中添加<style></style>标签，在style标签中定义该网页的样式

<style>
    选择器{
    css属性:值;}
</style>

（3）外部样式

1）优先级与内部样式属于同一级别，两者遵循就近原则
2）单独创建一个css文件编写样式
3）在html文件的head标签中使用link标签引入

<link rel="stylesheet" href="my.css">

2.CSS样式的特性

（1）继承性

大部分的样式可以直接被子元素继承

（2）层叠性

可以为一个元素定义多个样式规则；规则中属性不冲突，多个值都起作用

（3）优先级

1）如果样式声明发生属性冲突，按照样式的优先级规则来应用
2）优先级规则：内联样式 > 内部和外部样式，遵循就近原则 > 浏览器默认样式

（4）调整优先级

!important规则
1）写在值和;之间，使用空格和值分开
2）添加了!important的css属性直接获得最高优先级，比内联都高
3）内联样式不能添加

<style>
    选择器{
    css属性:值 !important;css属性:值;} 
</style>

三.基础选择器

1.作用

规范了页面中哪些元素能够使用定义好的样式；选择器就是为了匹配元素(符合选择器这个条件的元素，就能应用定义的样式)

2.通用选择器 *{}

（1）页面中所有元素，都使用这个样式
（2）由于*号效率低下，不建议使用；如果使用，只在一个地方使用，所有元素内外边距清0

<style>
    *{
    样式声明}
    *{
    margin:0;padding:0}
</style>

3.id选择器(专属定制) #id{}

<any id="id值"></any>
<style>
    #id值{
    css属性:值;}
</style>

4.类选择器 .类名{}

（1）多类选择器

通过class属性引用定义的类选择器；一个元素可以调用多个类名

（2）分类选择器

1）元素选择器.类选择器{} h3.text_red{background-color:green;}
引用了这个类选择器的这个元素，应用这个样式，更精确的匹配到元素
2）.类选择器.类选择器{} .text_red.c1{background-color:orange;}
同时引用了这两个类选择器的元素，应用此样式

<any class="类名"></any>
//一个元素调用多个类名，多类选择器
<any class="c1 c2 c3">多类选择器</any>
<style>
    .类名{
    样式声明}
</style>

5.元素选择器(标签选择器)

定义页面中，此标签应用的公用样式 any{}

<style>
    body{
    margin:0;}
    a{
    text-decoration:none;}
    input{
    border:0;margin:0;}
    dl,dt,dd{
    margin:0;}
    ul{
    margin:0;padding:0;}
    li{
    list-style:none;}
</style>

6.群组选择器

定义多个选择器的公共样式，选择器之间用逗号隔开 选择器1,选择器2,选择器3{}

<style>
    选择器1,选择器2,选择器3...{
    样式声明}
    #d1,.c1,div{
    color:red;}
</style>

7.后代选择器

通过元素后代关系来匹配元素，一层或多层嵌套 选择器1 选择器2 选择器3{}

<style>
    选择器1 选择器2 选择器3...{
    样式声明}
</style>

8.子代选择器

通过元素子代关系匹配元素，一层嵌套结构 选择器1>选择器2{}

<style>
    选择器1>选择器2...{
    样式声明}
    //后代选择器与子代选择器混写
    选择器1>选择器2 选择器3{
    样式声明}
    选择器1 选择器2>选择器3{
    样式声明}
</style>

9.伪类选择器

匹配元素不同状态下的样式 选择器:状态{}

<style>
    选择器:link{
    } 链接未被访问的状态
    选择器:visited{
    } 链接已被访问过的状态
    选择器:hover{
    } 鼠标悬停在元素上的状态
    选择器:active{
    } 元素被激活时的状态
    选择器:focus{
    } 元素获取焦点时的状态
    a:link{
    color:pink;text-decoration:none;}
    a:visited{
    color:orange;}
    a:hover{
    color:red;}
   a:active{
    color:blue;}
   input:focus{
    color: yellow;}
</style>

10.选择器的权值

（1）标识当前选择器的重要程度，权值越大，优先级越高

!important >1000
内联样式 1000
id选择器 100
类选择和伪类 10
元素选择器 1
*通用 0
继承的样式 无

（2）权值的特点

1）当一个选择器中含有多个选择器时，需要将所有选择器的权值相加，权值大的优先显示
2）权值相同，就近原则
3）!important直接获取最高权值，不能用在内联样式中
4）群组选择器的权值，单独计算，不能相加
5）选择器权值的计算，不会超过自己的最大数量级
（100个1，加一起也小于10）

四.尺寸和颜色

1.尺寸

（1）尺寸属性

改变元素的宽高；如果块级元素没设置宽度，默认宽度是父元素宽度100%
width: 以px为单位的数字或以%相当于父元素的百分比
height: 以px为单位的数字
max-width/height: 宽/高度可变的前提下，设置最大宽/高度；100%图片可以缩放，但最大不能超过本身默认尺寸
min-width/height: 宽/高度可变的前提下，设置最小宽/高度

（2）尺寸单位

px 像素
in 英寸 1in=2.54cm
pt 磅值 1pt=1/72in,多用于字号大小
cm
mm
% 相对单位
em 相对于父元素的值乘以的倍数，1em=父元素的取值
rem 相对于html中设置值乘以的倍数。1rem=html的取值

（3）页面中允许设置宽高的元素

块级
设置宽高有效
不设置宽，默认宽为父元素100%；不设置高，默认高靠内容撑开，没有内容就没有高

行内
设置宽高无效
宽高靠内容撑起，没有内容就没有宽高
自带宽高属性的元素，可以设置宽高

行内块
设置宽高有效
默认自带一个宽高，但是根据浏览器不同，这个宽高的值也不同

2.颜色取值

color:red green blue yellow black pink... 颜色单词
#rrggbb 十六进制6个数
#abc 简写
rgb(0~255,0~255,0~255) 色段取值范围
rgba(0~255,0~255,0~255,0~1) 取值范围；alpha透明度0~1；transparent纯透明

<style>
    元素{
    color:英文单词;}
    元素{
    color:#十六进制六个数;}
    元素{
    color:rgba(0~255,0~255,0~255,0~1);}
</style>

3.溢出

当内容较大，元素区域较小，会发生溢出效果，默认纵向溢出
overflow:visible 默认，溢出部分可见
overflow:hidden 溢出部分隐藏
overflow:scroll 不管是否溢出，都有滚动条
overflow:auto 溢出时有滚动条，不溢出没有
overflow-x: 设置水平滚动条
overflow-y: 设置垂直滚动条

<style>
    父级元素{
    width: 300px;height: 500px;overflow: visible;}
</style>

五.框模型(盒子模型)

1.框模型(盒子模型)概念

（1）元素在页面上实际占地空间的计算方式

1）一切元素皆为框，所有元素都有占地空间
2）浏览器默认的元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右
边框+右外边距；
3）浏览器默认的元素实际占地高度=上外边距+上边框+上内边距+内容区域高度+下内边距+下
边框+下外边距；

（2）改变框模型计算方式(多用于，当width取值为%)

1）box-sizing:content-box是标准盒模型(左右内外边距+左右边框+内容)默认
设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话
盒子的实际宽度会增大。
2）box-sizing:border-box是怪异盒模型(左外边距+width+右外边距)
设置width的值为border+padding+内容区域的宽度,width设置为%时使用;
媒体查询布局，经常要定义

2.边框border

（1）基础属性

简写border:width style color;
边框宽度width: 以px为单位的数字，默认1.5px
边框颜色color: 以颜色值，transparent，默认#000
边框样式style:solid实线; dotted点点虚线; dashed断线虚线; double双实线

单边定义
border-top:
border-right:
border-bottom:
border-left:

单属性定义
border-color:
border-width:
border-style:

单边单属性定义
border-top/right/bottom/left-width/style/color:

（2）边框倒角(把直角倒成圆角)border-radius:

1）border-radius:以px为单位的数字或以%百分比；50%就是圆
2）单角设置，先写上下，再写左右：border-top-right-radius:
border-bottom-left-radius:
border-top-left-radius:
border-bottom-right-radius:

（3）边框阴影box-shadow:

box-shadow:h-shadow v-shadow blur spread color;
h-shadow 阴影水平偏移
v-shadow 阴影垂直偏移
blur 阴影模糊距离
spread 阴影大小
color 阴影颜色
inset 将默认的外部阴影变为内部阴影

（4）轮廓：边框外面的一圈线

outline:width style color;
outline:0/none;清除轮廓
border:0/none;清除边框

<style>
    any{
    
      width: 300px;
      height: 300px;
      /* 简写 */
      border: 2px solid red;
      /* 单边定义 */
      border-top: 3px dotted orange;
      /* 单属性定义 */
      border-style: double;
      /* 单边单属性定义 */
      border-bottom-width: 10px;
      /* 倒角 */
      border-radius: 20%;
      /* 单角设置 */
      border-top-right-radius: 10%;
      border-top-left-radius: 20%;
      border-bottom-right-radius: 12%;
      border-bottom-left-radius: 30%;
      /* 阴影 */
      box-shadow: 20px 40px 10px 5px black inset;
      /* 轮廓 */
      outline: 6px dashed blue;
    }
  </style>

3.外边距margin(元素与元素之间距离；改变外边距，元素有位移效果)

（1）语法

css属性
margin:设置4个方向外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
当左右外边距，或者上下外边距冲突时，优先应用左和上

取值
1）以px为单位的数字；
2）% 父元素宽度百分比；
3）auto 让元素水平居中，对上下外边距无效，只对设置了宽度的元素有效；

简写
margin:v1;
margin:v1 v2;
margin:v1 v2 v3;
margin:v1 v2 v3 v4; 上右下左

（2）外边距特殊效果

合并：两个垂直外边距相遇时，他们会合并成一个，值以大的为准；
解决方案：单独写某一个元素的上或者下外边距，在设置的时候就要规避；

（3）关于块级元素，行内元素，行内块的总结

块级
p h1~h6 pre hr div
独占一行
设置宽高有效
默认宽：父元素100%默认高：内容撑开
4个方向外边距都有效

行内
span i em b strong u s del sup
与其他行内或者行内块共用一行
设置宽高无效，靠内容撑开
默认宽高：内容撑开
上下外边距无效

行内块
sub input
与其他行内块或者行内共用一行
设置宽高有效
自带一个默认宽高，不同浏览器宽高不同
4个方向外边距有效；改变垂直外边距，同行其他元素跟着一起动

（4）自带外边距元素(css重置)

不同浏览器，对这些元素的默认外边距的解析可能不同，所以开发之前，经常会把这些默认样式清空 *{margin:0;padding:0}

（5）外边距溢出

特殊情况下,为子元素设置上外边距会作用到父元素上；在第一个子元素位置添加空的<table>
特殊情况
1）父元素不能有上边框
2）子元素的内容区域上边沿与父元素内容区域上边沿重合(为第一个子元素设置上外边距时，会溢出，不严谨)

解决方案
1）给父元素设置上边框;弊端：父元素实际占地高度增加了
2）父元素添加上内边距;弊端：父元素实际占地高度增加了
3）父元素添加overflow:outo/hidden;弊端：父元素不能在溢出显示了
4）在父元素的第一个子元素的位置，添加一个空的table(让父元素内容区域上边沿和子元素内容区域上边沿分离)

<div id="d1"></div>
<div id="d2">
  <table></table>