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

CSS是一种标准的样式表语言，用于描述网页的表现形式。CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式。

CSS 是什么

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

在页面中使用CSS

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

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

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

CSS是如何工作的

CSS 选择器

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

标签选择器

h1 {
  color: orange;
}

p {
  color: gray;
  font-size: 20px;
}

id选择器

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

类选择器

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

属性选择器

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

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

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</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;
}

:focus {
  outline: 2px solid orange;
}
</style>

CSS颜色

颜色-HSL

• Hue：色相(H)是色彩的基本属性,如红色、黄色等;取值范围是0-360。
• Saturation：饱和度(S)是指色彩的鲜艳程度，越高越鲜艳;取值范围0-100%。
• Lightness：亮度(L)指颜色的明亮程度;越高颜色越亮;取值范围是0-100%。

CSS字体

通用字体族

h1 {
    font-family: Optima, Georgia, serif;
}
body {
    font-family: Helvetica, sans-serif;
}

调试CSS

• 右键点击页面，选择「检查」
• 使用快捷键
  • Ctrl+Shift+I(Windows )
  • Cmd+Opt+I(Mac)