跟着pink老师学前端CSS-D3

最新推荐文章于 2023-04-03 10:17:21 发布

外面有点冷的时候

最新推荐文章于 2023-04-03 10:17:21 发布

阅读量221

点赞数

分类专栏：前端基础学习文章标签： css

本文链接：https://blog.csdn.net/weixin_46548238/article/details/117919580

版权

本文详细介绍了CSS的三大特性：层叠性、继承性和优先级，特别讲解了行高的继承性。接着深入探讨了CSS盒子模型，包括边框、内容、内边距和外边距，并通过实例解析了如何实现盒子的水平居中、外边距合并及清除内外边距。还提到了圆角边框、盒子阴影和文字阴影的应用。

摘要由CSDN通过智能技术生成

1. CSS三大特性

CSS三大特性：层叠性、继承性和优先级。

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖掉另一个样式。

样式冲突：遵循就近原则
样式不冲突：不会层叠

<style>
    div {
   
        /* color会被覆盖掉 */
        color: lawngreen;
        /* background-color不会被覆盖 */
        background-color: lawngreen;
    }

    div {
   
        color: hotpink;
    }
</style>

1.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。text-，font-，line-这些元素开头的可以继承，以及color属性。

<style>
    /* 虽然没有给p标签设置样式，但是给p标签的父标签div设置了样式，此时p标签中的内容就会继承父标签的样式 */
    div {
     
        color: lawngreen;
        font-size: 50px;
    }
</style>

<body>
    <div>
        <p>rikirikiriki</p>
    </div>
</body>

行高的继承性

body {
	font:12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位。
如果子元素没有设置行高，则会继承父元素的行高。
此时子元素的行高是：当前子元素的文字的大小font-size*1.5。
body行高1.5这样的写法最大的优点是：子元素可以根据自己文字的大小自动调整行高。

1.3 优先级

优先级从左到右比较。比如：1，0，0，0>0，0，0，3。

选择器	选择器权重
继承或者✳	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important 重要的	无穷大

权重的叠加

权重虽然有叠加，但是永远不会有进位。

<style>
    /* li中的文字是绿色 */
    /* ul li的权重为0，0，0，1+0，0，0，1=0，0，0，2 */
    ul li {
     
        color: lawngreen;
    }
    /* li的权重为0，0，0，1 */
    li {
     
        color: lightcoral;
    }
</style>
<ul>
    <li>riki</li>
    <li>rikirikiriki</li>
    <li>riki</li>
</ul>

2. CSS盒子模型

2.1 盒子模型

1. border边框

border边框：border-width || border-style || border-color

<style>
    div {
   
        width: 300px;
        height: 300px;
        border-width: 5px;
        border-color: hotpink;
        /* solid实线边框 */
        /* border-style: solid; */
        /* dashed虚线边框 */
        /* border-style: dashed; */
        /* dotted点线边框 */
        border-style: dotted;
    }
</style>

边框的复合写法：没有顺序

border: 1px solid hotpink;

边框四边还可以分别设置：

/* 上边框为红色，其余边为蓝色 */
div {
   
    width: 200px

最低0.47元/天解锁文章

外面有点冷的时候

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
跟着pink老师学前端CSS-D3

1. CSS三大特性CSS三大特性：层叠性、继承性和优先级。1.1 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖掉另一个样式。样式冲突：遵循就近原则样式不冲突：不会层叠<style> div { /* color会被覆盖掉 */ color: lawngreen; /* background-color不会被覆盖 */ background-color: lawngreen; }
复制链接

扫一扫

专栏目录