CSS常用代码（上）

CSS

CSS版本3.0
CSS层叠样式表
两部分组成：选择器，属性
HTML引入css3种方式，就近原则
三种引入方式：行内样式>内部样式>外联样式表
语法：
<标签名 style="属性1:属性值1;属性2:属性值2;">
    内容
</标签名>

1.selector选择器

选择器：
标签选择器
类选择器 可以有多个 以#开头
ID选择器 唯一   以.开头
ID选择器>类选择器>标签选择器
不遵循就近原则

1.1 标签选择器

标签选择器语法：
标签{
  属性名:属性值1;
  属性名:属性值2;
}

1.2 ID选择器

类选择器语法：
#ID{
  属性名:属性值1;
  属性名:属性值2;
}

1.3 类选择器

.类{
  属性名:属性值1;
  属性名:属性值2;
}

2.内部样式表

写在页面 标签的 中

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

优点:

1.同一页面，一处定义，多处使用

2.代码整洁，便于修改

3.外部样式表

将css代码保存在扩展名为css的文件中
链接式 导入式
 
链接式:
<link rel="stylesheet" href="css文件路径" type="文件类型">
导入名:
<style>
  @import url("style.css");//文件路径，在style第一行
</style>
 
链接式与导入式的区别：
链接式常用
语法          <link>        @import
提供者          HTML          CSS
样式权重         高             低
加载顺序    与页面同时加载    页面加载完后加载
从上至下执行顺序称为标准文档流

4.高级选择器(层次选择器)

4.1后代选择器

body p{color:red}
body元素下所有的P元素内的内容为红色
空格链接，匹配body元素内所有的p元素

4.2子选择器

body>p{color:red}
body元素下面的子元素p中的内容为红色
使用>链接，匹配body中第一代p元素

4.3相邻同胞选择器

.active+li{
  background:yellow;
}
与类选择器相邻(类选择器下一个)的标签背景颜色为黄色
注意：
使用+链接，紧与active后的li元素

4.4通用兄弟选择器

.active~li{
  background:yellow;
}
类选择器下面的li元素内的内容背景色全为黄色
注意：
使用~链接 匹配active元素后的所有li元素

5.结构伪类选择器

:first-child 用于父元素的第一个子元素设置样式
:last-child 用于父元素的最后一个子元素设置样式
:nth-child(n) 用于父元素的第n个子元素设置样式
:first-of-type 用于选择父元素下相同类型子元素的第一个
:last-of-type 用于选择父元素下相同类型子元素的最后一个
:nth-of-type(n)选择器：用于选择父元素下相同类型子元素的第n个

6.属性选择器

E[attr]:选择匹配具有属性的attr的E元素
E[attr=val]:选择匹配具有属性的attr的E元素，并且属性值为val(val区分大小写)
E[attr^=val]:选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]:选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]:选择匹配元素E，且E元素定义了属性attr，其属性值包含了val

6.字体样式

font-family:设置字体类型
font-size:设置字体大小
font-style:设置字体风格
font-weight:设置字体粗细
font:用于字体综合设置
 
可以同时指定多个字体
p{font-family:Arial,"Times New Roman","微软雅黑","黑体","宋体"}
1.多个字符之间用英文字符隔开
2.英文字体位于中文字体之前
3.中文字体需要添加英文符号
4.英文字体中包含空格，#，￥等符号，须添加英文引号
5.当浏览器不支持第一个字体时，会尝试下一个，知道匹配到支持的字体为止。如果都不支持，则使用默认的字体

7.文本样式

color 设置字体颜色
text-align 设置字体文本水平对齐的方式
text-indent 设置文本首行缩进
line-height 设置文本行高
text-decoration 设置文本装饰
vertival-align 设置文本垂直对齐方式
text-shadow 设置文本阴影效果

8.列表样式

list-style-type:列表项标记的类型
list-style-image:使用图片替换列表项的标记
list-style-position:设置在何处放置列表项的标记
list-style:设置所有的列表属性
 
list-style-type常用来去除无序列表的小圆点
list-style-type:none;

9.背景属性

background-color 背景颜色
background-image 背景图片
background-repeat 规定如何重复图片
background-position 背景位置
background-size 背景尺寸
background-image:linear-gradient(方向，颜色，颜色)

9.1 background-repeat

background-repeat 规定如何重复图片
repeat 默认
repeat-x 背景图像在水平方向重复
repeat-y 背景图像在垂直方向重复
no-repeat 背景图像仅显示一次

9.2 background

background 复合属性，可以将背景相关的样式都定义在符合属性中
background:背景图像 背景定位 背景重复方式

9.3 渐变

语法：
background-image:linear-gradient(direction,color-stopl,color-stop2,......);
direction 渐变方向
color-stopl,color-stop2 渐变颜色