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

CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

在页面中使用CSS

外链

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

嵌入

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

内联

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

CSS如何工作

首先打开页面，浏览器进行页面的HTML加载，并且解析HTML，创建出DOM数。对于CSS的加载，用内联或者外链等等方式，进行解析，对每个DOM节点进行计算渲染成真正的页面。

选择器Selector

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

<style>
  { 
      color: red;
      font-size: 20px;
  }
</style>

标签选择器

<style>
  h1{ 
      color: red;
      font-size: 20px;
  }
  p{ 
      color: gray;
      font-size: 20px;
  }
</style>

ID选择器（将H1的id="logo"，然后通过#把logo选中）（注意：ID的值在页面中必须是唯一的）

<h1 id="logo">
<img src="https: //assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width=""48"/>
HTML5 文档ID选择器CSS
<h1>

<style>
  #logo{ 
      font-size:60px;
      font-weight: 200;
  }
</style>

类选择器（对于同一类型的标签进行设置样式时，可以使用class，与ID不一样，class可以多次出现）

<h2>Todo List</h2><ul>
<li class="done">Learn HTML</li>
<li class="done">Learn css</li>
<li>Learn JavaScript</li>
</ul>

<style>
  .done{ 
      color: red;
      font-size: 20px;
  }
</style>

属性择器（通过元素的属性或者属性值选中元素）

<label>用户名:</label>
<input value="zhao" disabled />

<label>密码:</label>
<input value="123456" type="password"/>

<style>
[disabled] {
    background: #eee;
    color: #999;
    }
</style>

（以下写法只会选中特定的值如password对其进行样式设计）

<p>
<label>密码:</label>
<input type="password" value="123456”/>
</ p>

<style>
input [type="password"] {
border-color: red;
color: red;
}
</style>

（也可以对属性值进行匹配，如下表示href值有#才会被匹配）

<p><a href="#top">回到顶部</ a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
a[href^=""#"] {
color:#f54767;
background: 0 center/1emurl(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
padding-left: 1.1em;
}
</style>

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。
类选择器以标志符（句点）开头，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语，标志符表示“带有类名的元素”。
ID属性的操作类似于CLASS属性，但有一点重要的不同之处：ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。需要注意的是，ID选择器的标志符是散列符号（ # ）。标志符用来提醒浏览器接下来出现的是ID值。
小结：CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。只要修改保存着网站格式的CSs样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。

了解CSS（1） | 青训营笔记

CSS

在页面中使用CSS

CSS如何工作

选择器Selector