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

作用：

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

基本结构：

CSS工作方式：

一、引入方式

外链： <link rel="stylesheet" href="style.css">

嵌入：

<style>
    h {
        color: red;
    }
</style>

内联：<h1 style="color: red;"></h1>

二、选择器

找出页面中的元素，以便给他们设置样式

标签选择器：

直接使用标签的名字

h1 { color: orange;}

1、通配选择器

使用通配符可以直接选择全部元素

* {
  color: red;
  font-size: 20px;
}

2、id选择器

给标签加id值，在引用的名字前需要加#

#logo {
  font-size: 60px;
  font-weight: 200;
}

3、class选择器

在需要加属性的前加点号

.done {
  color: gray;
}

4、属性选择器

可以选择某个标签拥有的特定的属性值来达到精确选择，属性外加[]中括号

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

5、伪类选择器

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

【1】状态伪类

取决于当前标签的状态或用户的操作来决定

例如a链接标签的几种状态伪类

默认链接形式
a:link {
  color: black;
}
用户访问过后的形式
a:visited {
  color: gray;
}
鼠标移动到上面的形式
a:hover {
  color: orange;
}
鼠标点击后的形式
a:active {
  color: red;
}

【2】结构伪类

实现精确选择

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}

6、选择器组合方式

三、属性

1、font-family字体

font-family: Optima, Georgia, serif;

可指定多个，中文字体尽量写前面

通用字体族，所有的浏览器都可以使用，至少加一个通用字体族；

【1】web font

可以在浏览器实时获取字体，影响渲染

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

2、font-size字体大小

关键字：small、medium、large

长度：.px、em

百分数：相对于父元素字体大小

3、line-height行高

line-height: 45px; 直接设置

line-height: 1.6; 相对于文字

4、text-align文字对齐

text-align：left | center | right | justify

5、spacing间距

letter-spacing:0px 全部间距

word-spacing:0px 整个单词间距

6、text-indent首行缩进

text-indent:0px

7、text-decoration文字描述

属性值：

none 无
underline 下划线
line-through 删除线
overline 上划线

8、white-space空白处理

white-space: normal;	连续空白符合并
white-space: nowrap;	连续空白符合并，且换行无效
white-space: pre;			连续空白符保留
white-space: pre-wrap;	连续空白符保留，盒子内换行
white-space: pre-line;	连续空白符合并，盒子内换行
white-space: break-spaces;

四、其他概念

1、颜色

定义颜色的方式：

使用关键词，blue、red等

RGB值 rgb(0, 0, 0)

HSL值 hsl(0, 100%, 50%)

2、alpha透明度

rgba(255, 0, 0, 0.36)

hsla(0, 100%, 50%, 0.36)

不写后面的a也可以

CSS层叠样式表（上）| 青训营笔记