了解CSS

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

一、什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)，它的作用：

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

其结构如下：

二、如何在页面中使用CSS

有三种方式。

第一种是链接外部CSS文件来更改当前页面的内容的样式，简称外链。推荐使用

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

第二种是嵌入式写法，在<head></head>内添加<style></style>来选择控制相应的内容

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

第三种是内联，直接在标签内添加style属性来控制该标签内容，不建议使用

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

三、CSS是如何工作的

选择器 Selector

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

下面介绍常见的选择器类型：

通配选择器

作用：匹配所有的HTML元素。

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

id选择器

作用：匹配对应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>

<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[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

伪类选择器(pseudo-classes)

不基于标签和属性定位元素
几种用于定义元素的特殊状态伪类
- 状态伪类
- 结构性伪类

状态类伪类：元素在特定的状态下被选中

链接：link、visited、hover、active；（也存在focus，但是时间比较短，因此忽略不计）
输入框：checked、disabled、enabled、focus、invalid（输入内容无效）；

结构类伪类：元素在DOM树中的位置相关，如：first-child、last-child等。

选择器组合方式(Combinators)

| 名称 | 语法 | 说明 | 标题 | | :---: | :-: | :-------------: | --- | | | 直接组合 | 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 |

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

选择器组

将相同样式的选择器组合在一起，利用逗号分隔。

h1,h2,h3,h4,h5,h6{
  color: red;
}

颜色

在CSS中颜色使用三种方式：RGB模型、HSL模型、关键字。

RGB模型：#000000或rgb(0,0,0)

HSL模型：hsl(200,30%,50%)

Hue -- 色相(H)是色彩的基本属性，如红色、黄色等，取值范围是0-360；

Saturation -- 饱和度(S)指色彩的鲜艳程度，取值范围为0-100%，越高越鲜艳；

Lightness -- 亮度(L)指颜色的明亮程度，取值为0-100%，越高越亮；

关键字：red

透明度alpha：取值为0-1，越高越不透明。

使用方式：#ff006e、rgba(255,0,0,0.43)、hsla(0,100%,50%,0.43)

字体与段落格式

字体 font-family

使用建议
- 字体列表最后加上通用字体族
- 英文字体放在中文字体前面

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

使用Web Fonts

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

通用字体族

字体大小：font-size，其取值有三种方式，分别为

关键字
- small、medium、large
长度单位
- px
- em
百分比
- 相对于父元素字体大小

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {
    font-size: 20px;
  }

  section h1 {
    font-size: 2em;
  }

  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

字体样式：font-style，取值分为三种，分别为

normal（默认）
italic（斜体）
oblique（倾斜体，若当前字体不存在倾斜体就会用斜体代替）

字体粗细：font-weight，可以取数字值（100-900），也可以使用关键字 normal（400）、bold（700）。需要注意的是，不是所有的字体粗细都存在数字表示的。

行高：line-height，表示两行文字之间baseline的距离，取值为四种，分别为 normal（默认）、不带单位的数字（与当前设置的字体尺寸相乘得到行高）、带单位的数字（固定行间距）、百分数（基于当前字体尺寸得到行高）。

调试CSS

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

了解CSS | 青训营笔记