一文秒懂CSS知识点

简介: 这是一个关于CSS知识的梳理,包括层次选择器(后代、子、相邻兄弟、通用兄弟选择器)、结构伪类选择器、属性选择器的介绍,并展示了各种选择器的使用示例。此外,还涵盖了文本样式(RGB、RGBA、首行缩进、列表样式)、背景图片、display属性、清除浮动方法、定位(相对、绝对、固定定位及z-index)、浏览器私有前缀、圆角边框、阴影、2D转换、过渡属性和动画的@keyframes。文章最后提到了点赞的提示。

@[toc]

CSS 知识梳理图

image.png
image.png
image.png
image.png

一、层次选择器

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

二、结构伪类选择器

     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;
        }

三、属性选择器

==绝对等于
*=包含等于
^=以这个开头
$=以这个结尾
   /*存在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,值越小说明透明度越高

4.2 首行缩进

text-indent:2em //em 表示一个字的大小

4.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;

5.2绝对定位absolute

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

5.3固定定位fixed

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

5.4 z-index

image.png

六、浏览器的的私有前缀

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

七、圆角边框

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

八、阴影

image.png

==text-shadow(文字)==
第一个值是水平偏移量,第二值是垂直偏移量,第三个值是模糊度。
==box-shadow(盒子)==
box-shadow: 1px 2px 3px 6 red;
6px是外延值

九、2D转化

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

十、过渡属性(transition)

在这里插入图片描述
/过渡属性/
==1. transition-property:all== ;
/过渡完成时间/
==2.transition-duration:4s==;
/过渡函数/
==3.transition-timing-function:linear== ;
/延时执行时间/
==4.transition-delay: 1s;==

十一、动画

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

记得点赞哦
在这里插入图片描述

目录
相关文章
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
|
25天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
30 1
[HTML、CSS]知识点
|
6月前
|
缓存 前端开发
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
|
2月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
2月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
2月前
|
前端开发 容器
CSS弹性盒子知识点
CSS弹性盒子知识点
|
3月前
|
Web App开发 前端开发 JavaScript
「offer来了」1张思维导图,6大知识板块,带你梳理面试中CSS的知识点!
该文章通过一张思维导图和六大知识板块系统梳理了前端面试中涉及的CSS核心知识点,包括CSS框架、基础样式问题、布局技巧、动画处理、浏览器兼容性及性能优化等方面的内容。
|
6月前
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
|
6月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
6月前
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)