一、CSS:级联样式表/层叠样式表
优势:
(1)内容与样式分离(html/css)
(2)样式统一,代码复用,便于维护
(3)减少未见大小,提高用户访问速度
二、语法
选择器{
样式属性:属性值;
样式属性:属性值;
}
三、引入方式
1.内联样式
<a style=""></a>
2.内部样式
<style type="text/css"></style>
3.外部样式
<link href="路径" rel="stylesheet" type="text/css"/>
4.导入样式(不推荐,有兼容问题)
@import(url)
四、样式的层叠原则
1.就近原则
2.内联样式>内部样式>=内部样式
五、基本选择器
通用选择器 < 标签选择器 < class选择器 < id选择器
优先级别:
1.样式的层叠,和选择器的优先级别有关系,与引入方式和顺序无关
2.样式大于属性
六、高级选择器(标签/元素/节点)
E:基本选择器/高级选择器
1.层次选择器
E F 后代选择器 E后的F元素被选中
E>F 子选择器 E后的直接子元素F被选中
E+F 相邻兄弟选择器 F在E的(同级)后面第一个
E~F 通用兄弟选择器 F在E的后面(所有的兄弟)
2.复合选择器
E,F 并集选择器 符合E和F都被选中
EF 交集选择器 符合E和F两个才会被选中
3.结构选择器
E F:nth-child(n) E下的第n个位置的F元素
E F:nth-of-type(n) E下的F的第n个位置
E F:first-child E下的第一个子元素
E F:last-child E下的最后一个子元素
4.属性选择器
E[class] 具有该属性的E标签
E[class=""] 属性等于多少的标签
E[class^=""] 属性以什么开头的标签
E[class$=""] 属性以什么结束的标签
E[class*=""] 属性的值包含某个字符的标签
5.状态伪类选择器
E::checked 单选或多选被选中时
E::selection 鼠标选中状态(文本选中)
E::hover 鼠标悬停状态
E::disabled 禁用状态的标签被选中
6.伪类对象选择器
E:before 在E前面添加一个元素
E:after 在E后面添加一个元素
七、常用样式
1.字体样式
大小 font-size px/em(其他文字的倍数) cm mm
类型 font-family 字体风格(自定义字体/“宋体”/“微软雅黑”)
粗细 font-weight 100~900(默认400,700=boder)
风格 font-style 斜体/正常
2.文本样式
颜色 color rgba(11,22,33,0~1)透明度
text-indent 段落缩进 2em;
text-align 水平方向left\right\center
text-decoration 文本修饰 上划线\下划线\管穿线 none(无修饰)
line-height 行高(底部对齐)
word-break break-all(英文单词一行写不下,强制换行)
word-spacing 单个单词(文字)的距离
text-transfonm:lowercase 大小字母转换
direction:rtl 文本方向(左右方向)
3.超链接样式
a:link 未访问连接时
a:visited 访问过连接时
a:hover 鼠标悬停时
a:active 点击中,鼠标左键未释放
建议顺序:link > visited > hover > active
4.列表样式
list-style-type none/实心圆/圆心/数字
list-style-image 自定义符号图片
配合样式:
width/height 整体高宽
padding/margin 间距
list-style 符号风格
text-algin/line-height 左右上下对齐
5.背景样式
background 背景
background-color 背景颜色 red/rgb()/rgba()/transparent
background-image 背景图片(默认x/y平铺)
background-repeat 背景图片平铺
repeat x,y都可以平铺
repeat-x 只允许x方向平铺
repeat-y 只允许y方向平铺
no-repeat 不允许平铺
background-position 图片位置定位(100px 100px 设置图片的其实位置偏移右下角)
center\right\left\top\bottom
background-size 设置背景图片的高宽
50px 100px 宽度 高度
20% 30% 百分比
cover 宽度设置为背景的100%,高度自适应
contain 高度设置为背景的100%,宽度自适应
background-origin 图片的起始位置
border-box 以border的左上角为原点
padding-box 以padding的左上角为原点
content-box 以content的左上角为原点
background-clip 超过取余的部分被裁剪
border-box 以border的部分被裁剪
padding-box 以padding的部分被裁剪
content-box 以content的部分被裁剪