理解CSS | 青训营笔记

Xh1Xxhg
77 阅读5分钟

理解CSS | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天，学习了掘金视频课《前端入门——基础语言篇》第二节课程 “走进前端技术栈 - CSS” ，第三节课程 “深入CSS（上）” ，第四节课程 “深入CSS（下）” ，以下为本次的学习笔记：

走进前端技术栈

CSS是什么

  • Cascading Style Sheets（层叠样式表）

  • 用来定义页面元素的样式

    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
<style>
    /* 选择器 */
    h1 {
        /* 声明 */
        /*属性名*//*属性值*/
        color: red;
        font-size: 14px;
    }
</style>

在页面中使用CSS

<!-- 外链（常用） -->
<link rel=" " href=" ">
<!-- 嵌入（练习使用） -->
<style>
    li { }
    p { }
</style>
<!-- 内联（修改个别样式） -->
<p style=" ">666</p>

CSS是如何工作的

image.png

选择器

  • 找出页面中的元素，以便给他们设置样式

  • 使用多种方式选择元素

    • 按照标签名、类名或者id
    • 按照属性
    • 按照DOM树中的位置
通配选择器（*）
*{
    color:red;
    font-size:12px
 }
id选择器（#key——id="key"）
/*id 属性只能在每个 HTML 文档中出现一次*/
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
​
<style>
#red {color:red;}
#green {color:green;}
</style>
class类选择器（.key——class="key"）
<h1 class="important">
This heading is very important.
</h1>
<p class="important warning">/*多类选择器*/
This paragraph is very important.
</p>
​
<style>
.important {color:red;}
.warning {font-style:italic;}
</style>
标签选择器（标签名{ }）
p{
    color:blue
 }
属性选择器（标签名[属性名]{ }）
<!-- 这里是属性标签的三个进阶写法 -->
<input type="text"><br>
<input type="password"><br>
<input type="number"><br>
​
/* 第一种：* 表示对含有该字符的有效 */
/*标签名[属性名："字符"]*/
input[type*="a"]{
  color: red;
}
/* 第二种：^表示对以该字母开头的有效 */
input[type^="t"]{
  background-color: rgb(108, 236, 236);
}
/* 第三种：$表示对以该字母结尾的有效 */
input[type$="r"]{
  background-color: rgb(132, 237, 84);
}
伪类选择器
  • 单冒号代表伪类
以a链接标签为例
a：link(未访问链接)
a：visited(已访问链接)
a：hover（鼠标悬浮）
a：active（获得焦点）

  • 双冒号代表伪元素（用于区分伪类）

    一般配合content属性为元素添加装饰内容

    /* 伪元素 */
/* :：first-letter第一个字母
:: first-line,第一行
:: before,元素开始位置
:: after,元素结束位置 */
p::first-letter{
  font-size: 25px;
}
p::first-line{
  color:rgb(34, 235, 231)
}
span::before{
  content: "-->";
  color:red
}
span::after{
  content: "<--";
  color:red
}
<p>111<br>
   222</p>
<span>333</span>
选择器组合

相邻兄弟选择器可选择紧接在另一元素后面的元素（不止一个），且二者有相同父元素，若选择的兄弟元素有很多，可以不停递归选择下去

image.png

选择器组

body, h1, h2, h3, h4 {
​
}
[typr="checkbox"], [type="radio"] {
​
}
特异度

高优先级可以覆盖低优先级的样式

image.png

可以看出优先级id>类>标签

颜色RGBA —— HSLA

Hue色相(H)：色彩的基本属性，如红色、黄色，取值0~360

Sayuration饱和度(S)：鲜艳度，越高越鲜艳，取值0~100%

Lightness亮度(L)：明亮度，越高颜色越亮，取值0~100%

Alpha透明度(A)：透明的，越低越透明，取值0~100%

文本样式

  • font-size字体大小

  • font-family字体本身长啥样

    • 无论前面设置多少字体，最后面一个一定要写一个通用字体族
    • 通用字体有五种分别是Serif 衬线体，Sans-Serif 无衬线体，Cursive 手写体，Fantasy ，Monospace 等宽字体

深入CSS（上）（下）

选择器的特异度

image.png

实现复用

.btn{
color="#333";   
background="#e6e6e6";
}
.btn.primary{
color="#fff";   
background="#218de6";
}
/*上面优先级更大，覆盖.primary的选择器设置*/

继承

某些属性会自动继承父元素的计算值，除非显式指定一个值

和文字相关的属性一般可以继承，和模型相关的属性一般不能继承

<p>这是一个<em>继承</em>的 <strong>测试</strong></p>
<style>
    body {
        font-size: 20px;
    }
    p {
        color: blue;
    }
    em {
        color: red;
    }
</style>
显示继承
/*利用通配选择器设置inherit表示可继承*/
<style>
    * {
        box-sizing: inherit;
    }
    html {
        box-sizing: border-box;
    }
    .note {
        box-sizing: content-box;
    }
</style>
初始值

  • CSS中，每个属性都有一个初始值

    • background - color 的初始值为transparent
    • margin - left的初始值为0

  • 可以使用initial关键字重置为初始值

    • background - color：initial
CSS求值过程

image.png

image.png

image.png

布局（Layout）

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

  • 相关技术

    • 常规流：行级、块级、表格布局、FlexBox、Grid布局
    • 浮动
    • 绝对定位

  • 盒模型

image.png

  • width

    • 指定content box宽度 - 取值为长度、百分数、auto - auto由浏览器根据其他属性确定 - 百分数相对于容器的content box宽度

      • height

        • 指定content box高度
        • 取值为长度、百分数、auto
        • auto由内容计算得来
        • 百分数相对于容器的content box高度
        • 容器由指定的高度时，百分数才生效

      • padding

        • 指定元素四个方向的内边距

        • 百分数相对于容器宽度

        • 一个值：上下左右；两个值：上下和左右；四个值：上和下和左和右

image.png

  • border

    • 当宽高设置为0，只剩下边框，因为粗细和颜色不一样可以得到几个三角形，可以把其中几个设置为透明，得到三角形，得到不同的形状（小技巧）

    • 指定容器边框样式、粗细和颜色

image.png

  • margin

    • 指定元素四个方向的外边距
    • 取值可以是长度、百分数、auto
    • 百分数相对于容器宽度

image.png

  • box-sizing：border-box包含border和padding在内，限定在一个更小的盒子中

image.png

  • overflow溢出部分的展示

    • visible直接展示溢出（默认）
    • hidden截掉溢出
    • scroll超出显示滚动条

  • 块级元素 vs 行级元素

image.png

image.png

image-20230116222245420.png

position属性

  • static：默认值，非定位元素
  • relative：相对自身原本位置偏移，不脱离文档流
  • absolute：绝对定位，相对于非static祖先元素定位
  • fixed：相对于视口绝对定位

学习CSS的建议

  • 充分利用MDN 和 W3C CSS规范
  • 保持好奇心，善用浏览器的开发者工具
  • 持续学习，CSS新特性不断出现
avatar
文章
阅读
粉丝