理解CSS|青训营笔记-阿里云开发者社区

理解CSS|青训营笔记

2023-08-20 49

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 理解CSS|青训营笔记

一、什么是CSS

作为前端三剑客之一的CSS是每个前端开发工程师必须掌握的技术，那么什么是CSS呢？

CSS全称 Cascading Style Sheets,是用来定义页面元素的技术。我们把HTML比作雏鸟身体的话，那么CSS就是我们的羽毛，是用来装饰我们的。

二、CSS如何使用

在我们的页面中如何使用CSS呢？

1.外链

<!-- 外链 -->
    <link rel="stylesheet" href="./style1.css">

在我们的title标签后面利用link标签引入即可

2.嵌入

<!-- 嵌入 -->
    <style>
            div {
                color: hsl(250,60%,60%);
            } 
    </style>

利用style的标签直接在HTML结构里面书写

3.内联

<body>               
                    <!-- 内联 -->
                    <div style="color: skyblue">青训我来啦</div>
</body>

在html元素标签内写入

三、如何学习CSS

对于CSS学习，大致分为以下几点

1.CSS选择器

2.元素属性

3.布局方式

（一）CSS选择器

1.选择器的种类

2.CSS与选择器挂钩的三大属性

（1）选择器种类

1.通配符选择器

<style>
            * {
                list-style: none;
                font-size: 50px;
            }
    </style>

选中页面所有元素

2.id选择器

<style>
        #root {
            font-size: 25px;
            background-color: #ff1;
        }
    </style>

选中id名为root的标签

3.类选择器

<style>
        .container {
            width: 100px;
            height: 100px;
        }
    </style>

选择class属性为container的标签

4.伪类选择器

<style>
        .container:first-child {
            width: 50px;
            height: 50px;
        }
        .container:last-child {
            font-size: large;
        }
        .container:nth(2)-child {
            background-color: #ff3;
        }
    </style>

通过代码展示易知选择类名为container下的第几个子元素

类似的还有first-of-type伪类，大家下去参考文档便可

5.属性选择器

<style>
        [type='text']{
            background-color: #ff8;
            border: 1px solid #333
        }
    </style>

选择type属性为text的标签

6.标签选择器

<style>
            div {
                width: 1314px;
                height: 520px;
            }
    </style>

表示选择所有div标签

7.选择器的组合

使用组合选择器可以方便定位到我们要使用的标签上。

更多的选择器属性请大家参考(MDN Web Docs (mozilla.org))

(2)CSS与选择器挂钩的三大属性

1.CSS的层叠性

指多种CSS样式的叠加。

是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

原则：

1、样式冲突，遵循的原则是就近原则，即越靠近body标签，越会选择此属性

2、样式不冲突，不会层叠

<style>
            div {
                width: 1314px;
                height: 520px;
                font-size: 12px;
            } 
            div {
                font-size: 28px;
                background-color: #dd5;
            }
    </style>

这里font-size会执行19px的覆盖了上面的，但是不冲突的属性不会层叠

2.CSS继承性

写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。

注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。

子元素可以继承父元素的样式（text-,font-，line-这些元素开头的都可以继承，以及color属性）

对于无法继承的属性我们可以通过为该属性添加Inherit，让它能够被继承。

<style>
            html {
                box-sizing: inherit;
            } 
    </style>

3.CSS的优先级

选择器类型及权重：

选择器权重

标签选择器 0001

class类选择器 0010

属性选择器 0010

伪类选择器 0010

伪元素选择器 0010

id选择器 00100

行内样式 1000

多个选择器选择器权重之和

当元素用组合选择器时无可避免的会遇到优先级问题

前面的就近原则就是一种，通过对权重的计算，可以让我们避免遇到权重问题导致的样式被层叠或者无法显示

（二）元素属性

常见的元素属性

1.颜色属性

2.字体属性

(1)颜色属性

1.表示颜色的方式

RGB 十六进制  HSL  颜色名称

对于十六进制和RGB，可以参考CodePen 加深对颜色属性的理解，找到适合的颜色值。

HSL的表示方法

HSL的三个数值也是据此定义的

<style>
            div {
                color: hsl(250,60%,60%);
            } 
    </style>

2.alpha透明度

对于透明度的理解，请大家参考CodePen，自行尝试

（2）字体属性

1.font-family

对于字体选择有原则:

(1).字体列表最后写上通用列表

(2).英文字体放在中文字体前面

2.sapce-white

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。