CSS常见样式和选择器

保持图片不变形 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、终极规则：以上规则适用大部分场景，特殊场景不适用自行测试