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

CSS（Cascading Style Sheets）层叠样式表

CSS的作用

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

CSS的引入方式

外链：采用外部链接CSS文件的方式，推荐使用，因为这样能更好得与HTML分离
嵌入：以<style>标签的形式嵌入HTML文件中
内联：几乎每个HTNL标签都有style属性，可在style属性中设置CSS样式，尽量少用

CSS的大概工作流程

CSS的组成

CSS由一条条样式规则组成，如下是一条样式规则

CSS样式选择方法

选择器
伪类

CSS选择器

选择器（Selector）的作用:找出页面中的元素，以便给他们设置样式

通配选择器*

以*开头，为所有标签添加样式

<h1>This is heading</h1>
<p>this is some paragraph.</p>

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

标签选择器

以标签名开头，为指定类型的标签添加样式

<h1>This is heading</h1>
<p>this is some paragraph.</p>

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

类选择器

以.类名开头，为指定的类名的标签选择样式

<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: gray;
  text-decoration: line-through;
}
</style>

id选择器#

以#id开头,id在单个HTML文件中应该是唯一的

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

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

属性选择器

为指定了某个属性的标签添加样式，以[属性]开头。只有具有该属性并指定了该属性的标签才能被设置样式

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

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

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

如果想要在某个标签的某个属性设置了某个值的情况下才为该标签设置样式，CSS规则可以以标签名[属性=属性值]的形式开头

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

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

标签名[属性=属性值]中的属性值不一定要是一个具体的值，可以是一类值，通过对属性进行匹配来实现

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

<style>
  /*当<a></a>标签中的herf值以"#"开头时会被匹配*/
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 /*当<a></a>标签中的herf值以".jpg"结尾时会被匹配 -->*/
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

组合选择

例如

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

<style>
  .error {
    color: red;
  }
  /*只有<input>标签且class="error"时会被选择*/
  input.error {
    border-color: red;
  }
</style>

例

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

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

注意同级的样式后面的会覆盖前面的

选择器组

如果不同的选择器有相同的样式，就可以将选择器名称以,隔开，通过选择器组的形式写在一起，减少代码的重复形式如下

伪类

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

状态伪类

具体的元素在具体的状态下才应用样式

<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;
}
//有聚焦状态的元素在被聚焦时会有2px的实线橙色边框
:focus {
  outline: 2px solid orange;
}
</style>

如果一个元素满足多条样式，那优先级高的样式会应用到该元素，若优先级相同，则<style>标签中后面的样式会覆盖前面的样式。所以这里需注意a:hover 必须在 a:link 和 a:visited 之后,a:active 必须在a:hover 之后,需要严格按顺序才能看到效果

结构性伪类

根据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
}
/*设置无序列表的第1项的颜色*/
li:first-child {
  color: coral
}
/*设置无序列表的最后一项没有底框线*/
li:last-child {
  border-bottom: none;
}
</style>

CSS颜色

CSS中的颜色模型有

理解CSS | 青训营笔记