保持图片不变形 object - fit : cover ;
阴影 box - shadow 水平垂点模糊度颜色
边框: border - radius 图角边框
列表相关: list - style : none ;列表样式去掉
背景相关样式 background 复合属性
1、 background - color 设置背景颜色
2、 background - image 设置背景图片 url 函数指定图片地址绝对地址,相对地址
repeat - y y 轴平铺
3、 background - repeat 设置景图片是否平铺 no - repeat 不平铺 repeat 平铺 repeat - x x 轴平铺
4、 background - size 设置背景图片大小 cover 把所在的 器铺满
5、 background - position :设置背景图片位置 center 居中
6、 background - attachment : fixed ;
字体相关样式
1、字体颜色 color
2、 font 复合属性
font - size :设置字体大小
font - weight :设置字体祖细
font - style :设置字体风格 normal 正常 italic 斜体
line - through 中划线 overline l :划线;
3、 text - decoration :设置文字是否有修饰线 none 无修饰 underline 卜划线
4、 text - align :规定文本的水平对齐方式 right 右边 left 左边 center 居中
5、 line - height :设置行高
颜色的表示方式
1.颜色名表示 red pink yellow
2.六位十六进制的数值表示颜色0~ f
红光绿光蓝光
00~ ff
3.rgb ( red , green , blue )0~255
4.rgba ( red , green , blue , alpha ) a 表示透明度0~1指针对背景颜色设置透明度
5.透明度 opacity 对于整个元素的透明度设置
6.颜色渐变 linear - gradient (方向,颜色,颜色…)
7.透明色 transparent定位 position 用于设置定位模式,其值如下
static 代表静态模式常态模式对 left , right , bottom , top , z - index 不识别
fixed 代表固定模式不随浏览器的滚动而滚动,释放自己原来的空间,参考物是整个浏览器
relative 代表相对模式随浏览器的滚动而滚动,保留自己原来的空间,参考物是自己原来的位置
absolute 代表绝对模式随浏览器的滚动而滚动,释放自己原来的空间,参考物是整个浏览器
结合模式:(父级使用 relative ,子集元素使用 absolute )子集元素随浏览器的滚动而滚动,释放自己原来的空间,参考物是父
99级元设置定位层级 z - index 值越大越靠上
选择器
一.基本选择器
1.元素选择器
所有元素
*{ color: blueviolet; background: green; }
div{ color: blueviolet; background: green; }
2.属性选择器
div[id] 有id属性的div元素
div[id=xx] 有id属性,且id属性为xx的div元素
div[id*=xx] 有id属性,且id属性包含xx的div元素
div[id^=xx] 有id属性,且id属性以xx开头的div元素
div[id$=xx] 有id属性,且id属性以xx结尾的div元素
div[id=xx] { color: blueviolet; background: green; }
3.id选择器
#xx { color: blueviolet; background: green; }
4.class选择器
.xx{ color: blueviolet; background: green; }
p.xx{ color: blueviolet; background: green; }
元素和class结合
5.包含选择器
div p { color: blueviolet; background: green; }
强调包含关系
6.子选择器
div>p{ color: blueviolet; background: green; }
只套一层
7.兄弟选择器
只找弟弟
.cc~.xx{ color: blueviolet; background: green; }
所有弟弟
.xx~*{ color: blueviolet; background: green; }
8.组合选择器
.xx, div a, span{ color: blueviolet; background: green; }
二.伪元素选择器
1.首字母
div::first-letter{ color: blueviolet; background: green; font-size:20px; }
2.首行
div::first-line{ color: blueviolet; background: green; font-size:20px; }
3.前面插入
div::before{ content:"aaa"; color: blueviolet; background: green; font-size:20px; }
4.后面插入
div::after{ content:"qqq"; color: blueviolet; background: green; font-size:20px; }
三.伪类选择器
1.结构性伪类选择器
: nth - child ()
括号里可以是数字 n n 从1开始
可以是英文单词 odd 奇数 even 偶数
括号里可以是表达式5n+2 n 从1开始
找第一个: nth - child (1)= first - child
找最后一个: last - child = nth - last - child (1)
倒着数: nth - last - child ()
只认数字,如果类型刚好符合,则被选中
: nth - of - type ()
括号里可以是数字 n n 从1开始
可以是英文单词 odd 奇数 even 偶数
括号里可以是表达式5n+2 n 从1开始
找第一个 first - of - type = nth - of - type (1)
找最后一个 last - of - type = nth - last - of - type (1)
倒着数: nth - last - of - type ()
既认数字也认类型,找同类型下的第 n 个元素ul li:nth-last-of-type(3n+2){ color: blueviolet; background: green; }
2.ui状态类选择器
:hover鼠标悬停
:focus焦点状态
:checked选中状态
input:checked{ color: blueviolet; background: green; }
3. 其他类选择器
ul il:not(.java):not(.php){ color: blueviolet; background: green; }
选择器的优先级规则
1、选择器写的越长(越准确),优先级越高
2、优先级高低 id 选择器> class 选择器>元素选择器
3、同级别长度下, css 代码按照顺序执行,后边的效果会把前边的覆盖掉。4、终极规则:以上规则适用大部分场景,特殊场景不适用自行测试