[ 理解CSS | 青训营笔记]

Definite
139 阅读8分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第一天

课程内容

CSS概述

1、CSS是什么？

  • Cascading Style Sheets
  • 定义页面元素的样式
     -设置字体和颜色
     -设置位置和大小
     -添加动画效果

2、基本组成

  • 多条声明用分号隔开
  • 一个选择器加上一个大括号称为一条规则，CSS就是由多条样式规则组成

3、在页面中使用CSS的方法

3.1 外链

将css定义放在单独的文件中，再用link标签进行引入到页面

<link rel="stylesheet" href="/assets/style.css">

3.2 嵌入

直接将样式代码嵌到html标签中

<style>
    li { margin: 0; list-style: none;}
    p{ margin: lem 0; }
</style>

3.3 内联

将不同html标签的样式直接写在style属性里面

<p style="margin:lem 0">Example Content</p>

一般来说推荐使用第一种方法，也就是外链的写法，这样可以实现功能的分工；
不太推荐使用内联的样式

4、CSS是如何工作的

CSS选择器Selector

1、作用以及使用方法

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
     - 按照标签名、类名或 id
     - 按照属性
     - 按照 DOM 树中的位置

2、选择器分类

2.1 基础选择器

2.1.1 通配选择器

使用*号匹配页面里面所有标签的格式

2.1.2 标签选择器
  • 选中HTML中的某一种类的标签，直接使用HTML中的标签名作为选择器的名称
2.1.3 id选择器
  • 给标签设置了id之后可以直接用 #id 的形式作为选择器设置对应标签的样式
  • 不同的id只能出现一次
2.1.4 class选择器
  • 给标签设置了class之后可以直接用 .class 的形式作为选择器设置对应标签的样式
  • 可以用class设置同一类型的标签样式
  • 不同的class可以出现多次，相对id选择器比较常用
2.1.5 属性选择器
  • 通过DOM的属性来选择DOM节点，属性选择器用 [] 包裹
  • 有几种不同的形式：
      - [属性] 来选择有该属性的对应所有标签进行样式设置
      - 可以使用 标签[属性=属性的值] 来选择有该属性的指定对应标签进行样式设置
     - 可以对属性的值做匹配来指定对应标签进行样式设置

2.2 伪类

不基于标签和属性定位元素

2.2.1 状态伪类

当元素处于某一种状态之下才会被选中，可以设置不同状态下的标签样式

<!--定义一个链接-->
<a href="http://example.com">
  example.com
</a>
<label>
  用户名：
  <!--定义一个输入框-->
  <input type="text">
</label>

<style>
<!--默认状态下的链接-->
a:link {
  color: black;
}

<!--访问链接之后的状态-->
a:visited {
  color: gray;
}

<!--鼠标移到链接上的状态-->
a:hover {
  color: orange;
}

<!--鼠标按了链接后的状态-->
a:active {
  color: red;
}

<!--输入框输入文字的状态-->
:focus {
  outline: 2px solid orange;
}
</style>
2.2.2 结构性伪类

根据DOM节点在DOM树中出现的相对位置设置样式

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

<!--设置li标签的第一个孩子的样式-->
li:first-child {
  color: coral
}

<!--设置li标签的最后一个孩子的样式-->
li:last-child {
  border-bottom: none;
}
</style>

2.3 组合选择器

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
<!--选中article标签下的所有p标签-->
  article p {
    color: black;
  }

<!--选中artical标签下的直接的p标签，只有第一个p标签被选中-->
  article > p {
    color: blue;
  }

<!--选中h2标签下紧跟的p标签，只有第二个p标签被选中-->
  h2 + p {
    color: red; 
  }
</style>

2.4 选择器组

同时给多个选择器设置相同的样式

设置文本样式

1、颜色

1.1 RGB

1.2 HSL



1.3 指定颜色

image.png

1.4 alpha透明度

2、字体样式设置

可以直接用font属性设置字体样式

image.png

2.1 通用字体族

image.png

2.2 font-family 使用建议

字体列表最后写上通用字体族
英文字体放在中文字体前

2.3 Web Fonts

2.4 字体属性

2.4.1 font-size（字体大小）

属性值：

  • 关键字：small、medium、large
  • 长度：px、em
  • 百分数：相对于父元素字体大小
2.4.2 font-weight（字重：字体粗细）

数值：100-900

并不是所有字体都设置了所有的字重

2.4.3 line-height

推荐使用1.6

2.4.4 text-align(对齐)

属性值：

  • left：左对齐
  • right ：右对齐
  • center：居中对齐
  • justify：分散对齐
5、spacing(文字间距)

属性：

  • letter-spacing:字符间距
  • word-spacing:单词间距
6、text-indent（段落首行缩进）
7、text-decoration（文本装饰）

调试CSS

  • 右键点击页面，选择[检查]
  • 使用快捷键
     -Ctrl+Shift+I (windows)
     -Cmd+Opt+I (Mac)

CSS 工作原理

1、选择器的特异度

选择特异度高的对应的属性值

image.png

2、继承

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

结果：

  • 某些属性会自动继承其父元素的计算值，除非显式指定一个值
  • 与盒模型相关的属性是不可以继承的，比如说宽度

2.1 显式继承

通过inherit属性值让原本不可以继承的属性变得可以继承

2.2 初始值

  • CSS 中，每个属性都有一个初始值
     - background-color 的初始值为 transparent
     - margin-left 的初始值为0
  • 可以使用initial 关键字显式重置为初始值
     - background-color: initial

2.3 CSS求值过程

image.png

CSS 布局

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

1、盒模型

image.png

1.1 width

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

1.2 height

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

1.3 padding



  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

1.4 border

  • 指定容器边框样式、粗细和颜色
  • 三种属性
     - border-width
     - border-style
     - border-color
  • 四个方向
     - border-top
     - boder-righ
     - tborder-bottom
     - border-left
border: 1px solid #ccc;

border-left: lpx solid #ccc;
border-right: 2px dotted red;

border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: green blue;

border-left-width: 3px;
border-top-color: #f00;

1.5 margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度\color{fuchsia}{百分数相对于容器宽度}
  • 使用margin:auto 水平居中

1.6 box-sizing: border-box

  • 包含了border以及padding在内进行设置，不单单针对内容

1.7 overflow

  • visible
  • hidden
  • scroll

1.8 摆放规则 ：块级 vs. 行级

image.png

image.png

1.8.1 display属性
  • block：块级盒子
  • inline：行级盒子
  • inline-block：本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
  • none：排版时完全被忽略
1.8.2 常规流 NormalFlow
  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内 (in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC 内的排版规则
    -盒子在一行内水平摆放
    -一行放不下时，换行显示
    -text-align 决定一行内盒子的水平对齐
    -vertica-align 决定一个盒子在行内的垂直对齐
    -避开浮动(float)元素

块级排版上下文

  • Block Formatting Context (BFC)
  • 某些容器会创建一个BFC
    -根元素
    -浮动、绝对定位、inline-block
    -Flex子项和Grid子项
    -overflow 值不是 visible 的块盒
    -display: flow-root;
  • BFC内的排版规则
    -盒子从上到下摆放
    -垂直 margin 合并
    -BFC 内盒子的 margin 不会与外面的合并
    -BFC 不会和浮动元素重叠

2、Flex 布局

Flex 排版上下文

  • 一种新的排版上下文
  • 它可以控制子级盒子的:
    -摆放的流向(一-个l)
    -摆放顺序
    -盒子宽度和高度
    -水平和垂直方向的对齐 -是否允许折行

3、Grid

Grid 排版上下文

  • display: grid 使元素生成一个块级的 Grid 容器
  • 使用grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

Table 排版上下文

4、定位

4.1 position属性

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

4.2 position: relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用 top、left、bottom、right 设置偏移长度
  • 流内其它元素当它没有偏移一样布局

4.3 position: absolute

  • 脱离常规流
  • 相对于最近的非 static 祖先定位
  • 不会对流内元素布局造成影响

个人思考与总结

个人思考

学习CSS对于前端而言是一个非常重要并且基础的内容，通过今天的学习我发现CSS的内容涵盖很广，其中有很多知识需要掌握，一天的学习肯定是不够，以后还需多翻阅笔记，有的常用的东西比如说各种选择器的表示是需要熟记于心的。另外，还有很多不太常用的规则语法等等也要学会查阅相关的手册争取在编写代码的时候实现效率的最大化。

总结

对于CSS的学习以后还需要多查漏补缺，不熟悉或者还没学懂的知识点再记到该笔记中突出进行学习，目前学习到的知识虽然进行了一个大致的梳理，但后期对于笔记逻辑和重要知识点还需要多多整理争取得到一个最适合自己温习也能为大家提供一些便利的CSS笔记。未来学习CSS一定要听从老师给的建议：充分利用 MDN 和 W3C CSS 规范；保持好奇心，善用浏览器的开发者工具；持续学习，CSS 新特性还在不断出现。

avatar
文章
阅读
粉丝