CSS3

css的优势

1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用S0,容易被搜索引擎收录！

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

1.标签选择器（选择一类标签）

标签{ }

2.类选择器class（选择所有class属性一致的标签，跨标签）

.类名{ }

3.Id选择器（必须保证全局唯一）

[[id名]]{ }

id选择器>cLass选择器>标签选择器

层次选择器

1、后代选择器：在某个元素的后面

EX:body下面所有p
body p{ }

2、子选择器：一代

EX：body子代
body>p{ }

3、相邻兄弟选择器：同辈（只有一个【向下】）

EX:类active下面一个p
.active+p{  }

4、通用选择器：通用兄弟选择器（当前选中元素的向下的所有兄弟元素）

EX:类active下面所有p
.active~p{  }

结构伪类选择器

1.第一个子元素

EX：选中ul的第一个子元素
ul li:first-child{  }

2.最后一个子元素

EX：选中ul的最后一个子元素
ul li:last-child{ }

3.定位到父元素，选择当前的第n个元素(选择当前元素的父级元素，选中父级元素的第n个，并且是当前元素才生效！【顺序】)

EX：选中p元素
p:nth-child(n){ }

4.选择第n个所选标签元素(【类型判断】)

p:nth-of-type(n){ }

属性选择器（常用）

存在对应属性的元素【属性名，属性名=属性值（正则）】

= 绝对等于

*= 包含这个元素的

^= 以这个元素开头的

$= 以这个结尾

EX:选择带有id属性=first的a标签
a[id=first]{    }

美化网页元素

为什么要美化网页

1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验

span标签

重点要突出的字，使用span套起来

字体样式

更换字体

font-family

字体大小

font-size

字体粗细

font-weight

字体颜色

color   

一键设置

font:[样式] 粗细 大小/行高 字体；

文本样式

颜色

color:rgba(红,绿,蓝,[透明度])

文本排版

text-align

文本缩进

text-indent

行高(和块高度一至垂直居中)

line-height

装饰线

text-decoration
EX：(underline:下划线)(line-through:中划线)(overline:上划线)

超链接去下划线

a{text-decoration:none}

文本图片水平对齐（需要参照物）

img,span{
    vertical-align:middle;  
}

文本阴影

text-shaddow:颜色 水平偏移 垂直偏移 阴影半径

超链接伪类

鼠标悬停

a:hover{    }

鼠标按住未释放

a:active{   }

未访问

a:link{ }

访问后

a:visited{  }

列表样式

列表序号样式

list-style
EX:(none去除)（circle空心圆）（decimal数字）(square正方形)

背景

背景颜色

background-color

背景图片(默认是全部平铺的)

background-image:url();

布局方式

background-repeat
EX：（repeat-x水平平铺）（repeat-y垂直平铺）（no-repeat不平铺）

定位

background-position:水平位置 垂直位置

一键设置

background:颜色 url(图片) 水平位置 垂直位置 平铽方式;

渐变

www.grabient.com

径向渐变

background-image:linear-gradient(角度,颜色，颜色)

透明

opacity:数值

盒子模型

边距

• margin：外边距
• padding：内边距

• border：边框

• (四个参数上右下左，顺时针旋转)
• (margin+border+padding+内容宽度)

边框

• 边框粗细
• 边框颜色
• 边框样式：solid(实线)，dashed(虚线)，dotted(点线)、

圆角边框

border-radius:参数

两个参数：左上右下，右上左下

四个参数：左上，右上，右下，左下（顺时针方向）

圆角=半径

阴影

box-shadow:x轴   y轴  模糊半径    颜色

浮动

dispaly:更改元素

block：块元素

inline-block：行内块元素（保持元素具有行内元素特性，在一行）

inline：行内元素

float:浮动

left：左浮动

right：右浮动

clear:both 清除浮动(right:清楚右侧浮动，left:清楚左侧浮动)

父级边框塌陷问题

1. 增加父级元素高度
2. 增加一个空的div标签，清除浮动
3. overflow(scrool:超出存在滚动条，hidden:超出隐藏)
4. 父类添加一个伪类：after

[[father]]:after{
    content:
    display:block;
    clear:both;
}

小结：

1. 浮动元素后面增加空d

   简单，代码中尽量避免空dV

2. 设置父元素的高度

   简单，元素假设有了固定的高度，就会被限制

3. overflow

   简单，下拉的一些场景避免使用

4. 父类添加一个伪类：after(推荐)

   写法稍微复杂一点，但是没有副作用，推荐使用

定位

position:定位

• 相对定位（relative）

  距离 top,right,left,bottom

  相对于原来的位置进行偏移，它任然在标准文档流中，原来的位置会被保留

• 绝对定位（absolute）

  定位：基于xxx定位，上下左右~

  1、没有父级元素定位的前提下，相对于浏览器定位
  2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
  3、在父级元素范围内移动
  相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

• 固定定位（fixed）

  无论浏览器怎么滑动，固定定位都不变

• z-index

  图层

​ 给定层级