一分钟复习完CSS基础知识

最新推荐文章于 2024-08-25 21:15:04 发布

Wei_Hss

最新推荐文章于 2024-08-25 21:15:04 发布

阅读量130

点赞数

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/H215919719/article/details/127332798

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、css的三大特性

/* 继承性 */
div{
    /* 子承父业 */
    /* 常见属性：
    color 
    font
    text-indent\text-align
    line-height
    ...*/
    color: aliceblue;

    /* 继承应用场景 */
        /* 1.ul设置去圆点
        2.body设置字体 */

    /* 继承失效 */
        /* 1.a color失效
        2.h font-size失效
        3.div高度不能继承，但是宽度有类似继承的效果 */
}

/* 层叠性 */
div{
    /* 特性 */
        /* 1.给同一个标签设置不同的样式，此时样式会层叠叠加，共同作用在标签上
        2.给同一个标签设置相同的样式，样式覆盖，写在最后的样式生效 */
        /* 注意：样式冲突时，选择器优先级相同时，通过层叠性判断结果 */
    color: aliceblue;
}

二、css引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外联式 (项目中)-->
    <link rel="stylesheet" href="">
    <!-- 内嵌式 -->
    <style>
        
    </style>
</head>
<body>
    <!-- 行内式 -->
    <div style="width: 10px;"></div>
</body>
</html>

三、选择器

1.基础选择器

/* 标签选择器 */
        div{
            width: 20px;
        }

        /* 类选择器 :类名：数字、字母、下划线、中划线组成，不能以数字、中划线开头*/
        .a{
            width: 20px;
        }

        /* id选择器：id只能有一个 ,配合js使用*/
        #id{
            width: 20px;
        }

        /* 通配符选择器 */
        *{
            margin: 0px;
            padding: 0px;
        }

2.伪元素

/* 伪元素 :一般页面中非主体内容可以使用伪元素*/
div::before{
    /* 在父元素内容的最前添加一个伪元素 */
    content: '';
}

div::after{
    /* 在父元素的最后添加一个伪元素 */
    content: '';
}

/* 
    1.必须设置Content属性才能生效
    2.伪元素默认是行内元素
*/

/* 
    区别:
    元素:html设置的标签
    伪元素:由css模拟出的标签效果
*/

3.结构伪类选择器

/* 查找单个 */
div:first-child{
    font-size: 12px;
}

div:last-child{
    font-size: 12px;
}

div:nth-child(2){
    font-size: 12px;
}

/* 从后数 */
div:nth-last-child(1){
    font-size: 12px;
}

/* 查找多个 */
/* 偶数 */
div:nth-child(2n){
    font-size: 12px;
}

div:nth-child(even){
    font-size: 12px;
}

/* 奇数 */
/* 2n+1 2n-1 odd */

/* 找到前五个 */
/* -n+5 */

/* 找到从第5个往后 */
/* n+5 */

/* 先通过该类型找到符合的一堆子元素,然后在这一堆子元素中数个数 */
div:nth-of-type(3){
    font-size: large;
}

/* 区别 */
    /* 
        nth-of-type 一定是前面的类型的
        nth-child 从前面那个类型数第几个,不一定是同类型*/

4.选择器进阶

/* 复合选择器 */
    /* 后代选择器 */
    div p{
        font-size: small;
    }

    /* 
     子代选择器 
     只包含儿子
    */
    div>p{
        font-size: small;
    }

/* 并集选择器 */
    /* 通常一行写一个，提高代码可读性 */
    div,p{
        font-size: small;
    }

/* 交集选择器 */
    /* 又是1又是2，标签选择器写在最前面 */
    p.red{
        font-size: larger;
    }

/* Emmet语法 （html）*/
    /* 
    1. 标签
    2. .类名(div+类名)
    3. #id名（div+id）
    4. p .red#one (指定标签 类加id)
    5. ul>li
    6. ul>li{li内容}
    7. ul>li*3
    */

/* hover伪类选择器 */
    a:hover{
        color: #000;
    }

四、字体

div {
            /* 默认字号16px */
            font-size: 12px;
            /* 正常400，加粗700 */
            font-weight: normal;
            font-weight: bold;
            /* 倾斜 */
            font-style: italic;
            /* 字体：具体字体1，具体字体2，具体字体3.。。从左到右查，未安装就显示下一个，都不支持就是默认字体，多个单词推荐引号包裹 */
            font-family: 'Courier New', Courier, monospace;
            /* 无衬线字体 :网页*/
            /* 衬线字体 :报刊书籍*/
            /* 等宽字体 :编码*/

            /* 只能省略前两个,如果省略了相当于设置了默认值 */
            font:style weight size family;
        }

五、文本样式

            /* 文本缩进 */
            text-indent: 2em;
            /* 两个字的大小 */

            /* 水平对齐方式 */
            text-align: center;
            /* span a input img都可以居中*/
            margin: 0 auto;
            /* 一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度 */
            /* div p h(大盒子)水平居中 */

            /* 行高 */
            line-height: 23px;
            /* 
            取值：1.数字+px 2.倍数（font-size的倍数）
            应用：
            1.让单行文本垂直居中，可以设置line-hight：文字父元素高度
            2.网页精准布局时，会设置line-height：1 取消上下间距
            设置了行高和font连写注意！
            行高=文本高度加上下间距
             */
            font: italic 700 20px/400px 楷体;

            /* 文本修饰 */
            /* 下划线 */
            text-decoration: underline;
            /* 删除线 */
            text-decoration: line-through;
            /* 上划线 */
            text-decoration: overline;
            /* 无修饰 */
            text-decoration: none;

六、颜色取值

颜色取值：关键字、rgb、rgba、十六进制

默认：rgba(0,0,0,0),transparent

一般先设置背景色，看清盒子的位置

背景图可以省略引号

背景图迷人是在水平和垂直方向平铺的

不能撑开图片

七、背景

.color{
            width: 400px;
            height: 400px;
            /* background-color: aliceblue; */
            /* 背景透明 */
            background-color: rgba(0, 0, 0, 0);
            background-color: transparent;
        }

        .image{
            background-image: url('');
        }

        .repeat{
            background-repeat: no-repeat;
            /* background-repeat:repeat;
            background-repeat:repeat-x;
            background-repeat:repeat-y */
        }

        .position{
            background-position: 1px 1px;
            /* 水平方向(left center right top) 垂直方向(top center bottom) 
            像数值 (0,0)左上角 */
        }

        .write{
            background: color image repeat position;
        }

img和背景图的区别

img有默认宽高

背景图是装饰css样式，不能撑开div

八、优先级

/* 优先级 */
/* 继承<通配符选择器<标签选择器<类选择器id选择器 <行内样式<!important*/
/* !important
    1.写在属性后面，分号前面
    2.不能提升继承优先级，只要是继承优先级最低！
    3.实际开发中不建议使用
*/

/* 权重叠加计算 */
/* （第一级（行内样式的个数），第二级（id选择器的个数），第三级（类选择器的个数），第四级（标签选择器的个数）） */
/* 如果所有数字都相同，则优先级相同，比较层叠性（谁在下面谁说得算） */

九、盒子模型

/* 盒子模型 */
    /* 盒子模型的介绍
        盒子模型由：内容区域、内边距区域、边框区域、外边距区域构成
    */


    /* 内容区域的宽度和高度
    */
    div{
        width: 10px;
        height: 10px;
        /* 设置的是内容区域的宽高 */

        /* 边框 */
        border-width: 1px;
        /* 实现 */
        border-style: solid;
        /* 虚线 */
        border-style: dashed;
        /* 点线 */
        border-style: dotted;
        border-color: aliceblue;
        border: 10px solid black;
    }

    /* 盒子实际大小初级计算公式 */
        /* 宽=左边框+内容宽度+右边框 */

    /* padding介绍 */
    div{
        /* 上下左右 */
        padding: 10px;
        /* 上下 左右 */
        padding: 10px 20px;
        /* 上 左右 下 */
        padding: 10px 20px 30px;
        /* 上 右 下 左 */
        padding: 10px 20px 30px 40px;
    }

    /* 盒子实际大小中级计算公式 */
        /* 宽=左边框+内容宽度+右边框    +左padding+右padding*/

    /* 不会撑大盒子的特殊情况 （块元素）*/
        /* 
            1.如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度 
            2.此时给子盒子设置左右padding或者左右border，此时不会撑大子盒子
        */

    /* 盒模型（自动内减）：怎么取消盒子被撑大 */
        /* 1.手动内内减（不推荐）
            自己计算好

           2.自动内减
           box-sizing:border-box;
           浏览器会自动计算多余大小，自动在内容中减去
         */



    /* margin介绍 */
    div{
        /* 上右下左 */
        margin: 10px;
        /* 上下 左右 */
        margin: 10px 20px;
        /* 上 左右 下 */
        margin: 10px 20px 30px;
        /* 上 右 下 左 */
       margin: 10px 20px 30px 40px;
    }

    /* 清除默认内外边距 */
    *{
        margin: 0;
        padding: 0;
    }

    /* 外边距正常情况 */
        /* 
        场景：水平布局的盒子，左右的margin正常，互不影响
        结果：最终两者距离为左右margin的和
         */

    /* 外边距折叠现象 */
        /* 1.合并现象
            场景:垂直布局和块级元素，上下的margin会合并 
            结果：最终两则距离为margin的最大值
            解决方法：避免就好
                只给其中一个盒子设置margin即可
        
            2.塌陷现象
            场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
            结果：导致父元素一起往下移动
            解决方法：
                1.给父元素设置border-top 或者 padding-top (分隔父子元素的margin-top)
                2.给父元素设置overflow:hidden
                3.转换成行内块元素
                4.设置浮动
            */

    /* 行内元素的margin和padding无效情况 */
        /* 场景：给行内元素设置margin和padding时
            结果：
                1.水平方向的margin和padding布局中有效！
                2.垂直方向的margin和padding布局中无效！ */

Wei_Hss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一分钟复习完CSS基础知识

默认：rgba(0,0,0,0),transparent。背景图是装饰css样式，不能撑开div。背景图迷人是在水平和垂直方向平铺的。一般先设置背景色，看清盒子的位置。颜色取值：关键字、rgb、rgba、十六进制。
复制链接

扫一扫

专栏目录