前端基础--02CSS入门本文主要介绍了css的基本概念，一些常用的css选择器，还有一些基本的css样式，具体还要在实

CSS是什么？

Cascading Style Sheets层叠样式表，可以添加动画效果

在页面中使用CSS方法

外链，事先写好css文件，然后通过链接引用

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

嵌入，直接把css代码放到html文件中

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

3. 内联，直接作为属性写进标签中<p style="margin: lem 0">balabala</p>

CSS是如何工作的

选择器

标签选择器直接用标签选择 p {}
id选择器，一般id是唯一的，使用#选择
通配选择器*
类选择器使用.选择
属性选择器使用[]选择
- [disable] {} 则会选择到所用使用这个属性的地方
- a[disable] 则是只选中含有这个属性的所有a标签

伪类选择器（pseudo-classes)

伪类选择器指不基于标签和属性定位元素

状态伪类

指选中它的时候它是处于某种状态

a:link {
    color: gray;
} # 默认状态下
a:visited {
    color: black;
} # 链接被访问过了
a:hover {
    color: orange;
} # 鼠标悬浮时
a:active {
    color: red
} # 点击时

结构性伪类

指含有层级结构的，通过指出其在父级节点的相对位置来进行选中

li:first-child {
    ...
}
li:last-child {
    ...
}

组合

这里A B是子孙就行，A > B必须是父子， A + B必须是直接兄弟

还有就是通过","连接的，他们就是一个单充的批量处理

颜色

RGB(xxx, xxx, xxx)

HSL(Hue, Saturation, Lightness)

色相(0-360)、饱和度(0-100%)、亮度(0-100%) hsl(18, 91%, 84%)

透明度alpha

alpha实际代表不透明度，1为全部透明，0为全透明 rgba(xxx, xxx, xxx, 0.8) hsla(xxx, xxx, xxx, 0.8)

字体

通过配置font-family属性配置，先写英文字体再写中文字体，最后加上通用字体族

配置web font：将字体文件放到服务器上，使用时先从给定的url上下载再渲染。如果字体资源包太大会带来性能上的影响，因此对于中文字体可以先进行一些裁切，去除不怎么用到的字符以缩小字体文件大小。

@font-face {
    font-family: f1;
    src:url(https://....) format("woff2")
}

字体样式

font-style: normal,italic

字体重量

font-weight: normal, bold

行高

line-height: 1.6 指字体的多少倍

有关字体可统一写： font: style weight size/line-height family 对应：斜体、粗细、大小/行高、字体族

对齐

text-align: left center right justify(两端对齐）

换行和空白符

white-space: normal, nowrap, pre, pre-wrap, pre-line

值	合并空白符	保留换行符	自动换行
`normal`	是	否	是
`nowrap`	是	否	否
`pre`	否	是	否
`pre-wrap`	否	是	是
`pre-line`	是	是	是

wrap本意是包装，这里有wrap就代表是否会自动换行 pre就会把所有的空格、换行全都保留出来，包括每行开头的缩进。

前端基础--02CSS入门