css系列

最新推荐文章于 2025-11-25 09:44:12 发布

原创最新推荐文章于 2025-11-25 09:44:12 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

html、css 专栏收录该内容

1 篇文章

订阅专栏

系列文章目录

这篇文章是css系列的一个基础归纳总结

文章目录

系列文章目录
css的三种引入方式
css选择器part
css的样式继承
box-sizing:border-box
制作圆形图片
padding（子元素想动？）

css的三种引入方式

内嵌、外链、行内

内嵌式：

style标签里面写的样式

外链式：

link引入

行内式：

直接写在标签里面的

级别

行内式最高、外链式最低。
内嵌和外链还有一个就近原则，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!---
        测试style   和  link的就近原则
    
    -->
    <style>
        div{
            background-color: black;
        }
    </style>
    <link rel="stylesheet" href="./css.css">
    <!--
        虽然style的级别比link的高，但是link离标签近，所以最后元素展示的依旧是link的样式
        如果想展示style里面的样式，那就把style放在link标签下面即可
    
    -->
</head>
<body>
    <div>

    </div>
</body>
</html>

css选择器part

常见的选择器

标签选择器、id选择器（唯一的）#、class类选择器 .
后代选择器div p、nth-child()第几个本元素
群组选择器 a1,a2{}
子集选择器p>span，只能选择p标签下的第一层的span
菜鸟教程之css选择器

css选择器的权重

id的权重最大
id>class>标签
（越精准、权重越高）

注意：：：

如果同时给标签的class两个样式的话，如果是以下这种写法会优先选择第一个。例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .liu{
            height: 100px; width: 100px; background-color: blue;
        }
        .he{
            background-color: brown;
        }
    </style>
</head>
<body>
	<!--先来后到--->
    <div class="liu" class="he"></div>
    <div></div>
    <p></p>
</body>
</html>

效果图片

如果是这种写法的话，后面的会覆盖掉前面的

<div class="liu he" ></div>

效果图
如果想给已经存在的元素添加样式的话，直接选这种方式就可以。

后代选择器的玩法

像有些商品下面的文字都是红色的，就需要去选中，但往往标签不是同一种标签，就可以这么玩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top .top2 .top3 *{
            color: red;
        }

        /* .top{
            color: red;
        } */
        
        /* .top .top2{
            color: red;
        } */
    </style>
</head>
<body>
    <div class="top">
        <div class="top2">
            <div class="top3">
                <p>1111</p>
                <span>222</span>
            </div>
        </div>
    </div>
</body>
</html>

子代选择器

不支持ie6
只能选择子集元素的直系标签（只要是直系的就可以。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*这个表示选择的是one  第一层下面的   two   下面的所有的thr*/
        .one>.two>.thr{
            color: royalblue;
        }
    </style>
</head>
<body>
    <!---
        子级选择器可以更加精准的选择元素
        子集选择器不支持ie6
        子集选择器只能选择    第一层    元素下面所有的（子集元素选择器就是选择自己直系后代）
    -->
    <div class="one">
        <div class="two">
            <p class="thr">1111</p>
            <p class="thr">222</p>
            <div class="two">
                <p class="thr">1111</p>
                <p class="thr">222</p>
    
            </div>
        </div>
    
    </div>
</body>
</html>

但是像这样写的话是可以选中的，所有的11、22都会变色的
这是因为two都是one的直系子元素

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one>.two>.thr{
            color: royalblue;
        }
    </style>
</head>
<body>
    <!---
        选择器可以更加精准的选择元素
    -->
    <div class="one">
        <div class="two">
            <p class="thr">1111</p>
            <p class="thr">222</p>
        </div>
        <div class="two">
            <p class="thr">1111</p>
            <p class="thr">222</p>
        </div>
    </div>
</body>
</html>

外边距

margin不占据元素本身的宽高，决定元素的位置
上下左右都可以分别设置

    <style>
        div{
            background-color: blueviolet;
            /*四个值：上 右 下  左*/
            margin: 10px 20px 10px 50px;
            /*四个值的时候：上   左右   下*/
            margin:10px 20px 40px;
             /*margin两个值：上下    左右*/
            margin: 10px 20px;
        }
    </style>

内边距

padding用法和margin相似
padding与margin 不同的是：padding会影响元素的宽和高

border 边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            border-left-width: 3px;
            border-left-color: deeppink;
            border-left-style: solid;
            background-color: antiquewhite;
            border-right-width: 3px;
            border-right-color: rgb(20, 24, 255);
            border-right-style: dashed;
            
        }
    </style>
</head>
<body>
    <!--
        边框样式border
        1、他是由宽度  颜色  样式组成的
        2、本质是四个倒立的三角形
        3、缩写的顺序可以自由设定
        
        
        ---->
    <div>

    </div>
</body>
</html>