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

CSS简介

CSS是什么

层叠样式表（Cascading Style Sheets, CSS） 用来定义页面元素的样式。

在页面中使用CSS的三种方式

外链

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

嵌入

<style>
    li { margin: 0; }
</style>

内联

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

CSS工作机制

选择器Selector

单个选择器

通配选择器 *
标签选择器 h1
id选择器 #logo
类选择器 .done
属性选择器 [disabled], [type="password"], a[href^="#"], a[href$=".jpg"]
伪类选择器
- 状态性伪类，a:link, a:visited, a:hover, a:active, input:focus
- 结构伪类，li:first-child, li:last-child

组合选择器

名称	语法	说明	示例
直接组合	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

常见CSS属性

color 颜色

三种表示形式：

rgb(red, green, blue)，红绿蓝三个参数，简写#000000
hsl(hue, saturation, lightness)，色相、饱和度、亮度，hsl(18, 50%, 50%)
颜色名字如black、white

可在最后加上透明度。

font-family 字体

font-family: 一般后面跟多个字体，如果设备上没有前面的字体，则匹配之后的字体。

使用Web Fonts

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

h1 {
    font-family: Megrim, Cursive
}

font-size 字体大小

关键字：small、medium、large
长度：px、em
百分数：相当于父元素字体大小

font-style 字体效果

font-style 默认值是normal，斜体是italic

font-weight 字重/粗细

用100、200 …… 900表示，400等同normal，700等同bold，不同字体支持的字重不同

line-height 行高

两行文字的base_line之间的距离

white-space 空白符处理

normal 默认情况下，多个连续的空格或换行会被合并成一个

nowrap 不换行

pre 保留所有空格和换行

pre-wrap 保留空格，一行内自动换行
pre-line 合并空格，保留换行

调试CSS

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

了解CSS | 青训营笔记