CSS知识点

CSS知识点_css3

​​​1.层次选择器​​​

/*后代选择器*/
        body p{
            background-color: rebeccapurple;
        }
/*子选择器*/
        body>p{
            background-color: rebeccapurple;
        }
/*相邻兄弟选择器*/
       .action +p{
          background-color: #dddddd;
       }
/*通用兄弟选择器 当前选中元素的向下的所有元素*/
       .action~{
          background-color: #dddddd;
       }

​​​2.结构伪类选择器​​​

ul li:first-child{
           background-color: #a9c1ed;
       }
        ul li:last-child{
            background-color: #fac0e7;
        }
        
        /*选中当前元素的父级元素下的元素，是顺序*/
           p:nth-child(1){
            background-color: #fac0e7;
        }
        /*选中父元素下的p的第二个，是类型*/
        P:nth-of-type(2){
            background-color: rebeccapurple;
        }

​​​3.属性选择器​​​

==绝对等于
*=包含等于
^=以这个开头
$=以这个结尾
/*存在id*/
        a[id=first]{
            background-color: rebeccapurple;
        }
        /*class元素的定位*/
        a[class*="circle"]{
           background-color: #fac0e7;
        }
         /*a标签中href中以http开头的元素*/
        a[href^=http]{
           background-color: rgba(134,179,220,0.16); 
        }
           /*a标签中href中以abc开头的元素*/
        a[href$=abc]{
            background-color: rgba(134,179,220,0.16);
        }

​​​4.文本样式​​​


1.rgb是16进制的表示颜色方式
rgba是在16进制的表示颜色方式的基础上添加了透明度
透明度的值是1~0，值越小说明透明度越高
2.首行缩进
text-indent:2em //em 表示一个字的大小
3.ul li{
list-style: none; //去掉前面的点
list-style:circle;
list-style: decimal;
}



​​​5.背景图片​​ background-image: url("/static/12.png");
background-repeat:no-repeat; //设置是否平铺
​​背景渐变网站​​



​​​6.display 的属性​​ block 块级元素
inline行内元素
inline-block 是块但是可以内敛。
none 不显示



​​​7.父级边框塌问题(浮动)​​ clean 的属性
clean用于清除浮动
clean：both 清除两侧的浮动
​解决方案 1.添加空的div，清除浮动
2.在父级元素增加overflow：hidden属性
3.在父级中添加伪类（父级元素father）
fatehr:after{
content: ‘’;
display: block;
clear: both;
}


​​​5.定位​​​


​​​1.相对定位relative​​ 相对于原来的位置进行偏移，在任意文档流中，原来的位置​会​保留。
position: relative;
top: -10px;
left: 10px;
bottom: 10px;
right: 10px;



​​​2.绝对定位absolute​​ 相对于父级的位置进行偏移，在任意文档流中，原来的位置​不会​保留。
一般是父级元素存在定位时，相对父级元素进行偏移。
但是不会超出父级元素的范围。
position: absolute;



​​​3.固定定位fixed​​ 固定在摸一个设定的位置就不会随网页的滑动而改变位置。
position: fixed;



​​​4.z-index​​CSS知识点_css_02
z-index 默认是0 最高无限
​opacity: 0.5;一帮用于网页背景的透明度​


​​6.浏览器的的私有前缀​​


火狐 ：-moz-
谷歌：-webkit-
IE: -ms-
opera:-o-


​​7.圆角边框​​


border-radius:10px 20px 30px 40px /10px 20px 30px 40px
前面四个值是水平半径，后面四个值是垂直半径。
border-radius：10px 30px;
一个参数两个值 ，10px代表左上和右下的水平和垂直，30px代表右上和左下的水平和垂直。


​​8.阴影​​


CSS知识点_选择器_03
​text-shadow（文字） 第一个值是水平偏移量，第二值是垂直偏移量，第三个值是模糊度。
​box-shadow(盒子) box-shadow: 1px 2px 3px 6 red;
6px是外延值


​​9.2D转化​​


​1.transform: translate(5px,10px)​;
第一个值是水平方向的移动，第二值值是垂直方向的移动
​2.transform: rotate(30deg)​;
30是旋转的角度
​3.transform:scale(1.5 0.4)​;
第一个水平的缩放，第二值是垂直的缩放。
​4. transform: skew(50deg,20deg)​;
第一个水平的倾斜，第二值是垂直的倾斜


​​10.过渡属性（transition）​​


CSS知识点_css_04
/​过渡属性​/
​1. transition-property:all​ ;
/​过渡完成时间​/
​2.transition-duration:4s​;
/​过渡函数​/
​3.transition-timing-function:linear​ ;
/​延时执行时间​/
​4.transition-delay: 1s;​


​​11.动画​​


@keyframes myName {
50%{
margin-left: 20px;
}
100%{
margin-left: 40px;
}
}
myname为动画的名称，50%为关键帧。
transition: myName 5s 1s; 用于执行过渡


记得点赞哦

CSS知识点_css3_05