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 渐变颜色