理解CSS | 青训营笔记

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

课堂笔记

一、本堂课重点内容

CSS 代码构成
CSS 使用方法
CSS 流程之选择器组、文本渲染
调试 CSS

二、详细知识点介绍

CSS（Cascading Style Sheets）是用来定义页面元素的样式，包含设置字体和颜色、设置位置和大小以及添加动画效果。

CSS有三种使用方式：外链、嵌入和内联。

外链：在CSS文件中定义样式，通过超链接的方式被html文件解析使用（即在html文件外的css文件中定义样式，html文件通过超链接的方式引用，从而在html文件中使用样式）。

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

嵌入：在html文件中通过在style标签内定义CSS样式，供后续使用。

<!-- 嵌入 -->
<style>
    li { margin: 0; list-style: none; }
    p { magin: 1em 0; }
</style>

内联：在需要使用样式的标签内通过style属性进行样式定义。

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

CSS的工作流程

选择器Selector可以通过多种方式选择元素：标签名、类名、id、属性、在DOM树中的位置。

通配选择器：*{}，对所有标签都有效果。
标签选择器：标签名{}，如h1{}，p{}，以html中的标签名为开头，对html文件中的对应标签会产生对应效果。
id选择器：#id名{}，如#logo{}，以#开头，对html中id名为logo（其中logo是自己定义的，可以换成其他名字）的标签有效。注意：id名最好设置成不同的。
类选择器：.类名{}，如.done{}，以.开头，对html中类名为done（其中done是自己定义的，可以替换成其他内容）的标签有效。注意：类名可以相同。
属性选择器：[属性名]，如[disabled]{}，通过[]括住属性名，对html中属性名相同的标签有效。input[type="password"]{}对input标签中类型为密码的标签有效。a[href^="#"]{}意为对于a标签中href开头为#的标签有效，^指定开头内容。a[href$=".jpg"]{}意为对于a标签中href结尾为.jpg的标签有效，$指定结尾内容。

伪类（pseudo-classes）：不给予标签和属性定位元素

状态伪类

<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>

<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:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

结构性伪类

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }

  input.error {
    border-color: red;
  }
</style>

类选择器之间的组合

名称	语法	说明	示例
直接组合	AB	说明A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

选择器组是指样式一致，通过“，”隔开的选择器（相当于把原来需要分开定义的选择器放在一起定义，并用逗号隔开，其前提条件是样式要一致）。

body,h1,h2{}

[type="checkbox"],[type="radio"]{}

三、课后个人总结

通过本堂课程，扩展了选择器的相关知识，在学校只讲了关于id选择器、类选择器、标签选择器的相关知识，但并未对属性选择器和伪类进行讲解。同时在课堂上了解了关于选择器的组合对于样式的影响，不同的选择器组合对于样式产生的效果是不同的。

走进前端技术栈-CSS | 青训营笔记