CSS入门
CSS学习笔记
参考资料:CSS指南 - MDN CSS教程 - W3school
CSS基础
派生选择器:
1 | /* 列表中的strong */ |
id选择器
1 | #red {color:red;} |
1 | <p id="red">这个段落是红色。</p> |
类选择器
1 | .center {text-align: center} |
1 | <h1 class="center"> |
类名的第一个字符不能使用数字!
属性选择器:
1 | [title] |
1 | [title=W3School] |
1 | [title~=hello] { color:red; }/* 包含给定值的title属性,属性值由空格分隔 */ |
1 | [lang|=en] { color:red; }/* 开头为给定值的title属性,属性值由连字符分隔 */ |
CSS样式
背景
背景颜色:background-color
不能继承,其默认值是transparent
。
背景图像:background-image
属性的默认值是none
,表示背景上没有放置任何图像。background-image
也不能继承。
背景重复/平铺:background-repeat
,属性值repeat
导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x
和repeat-y
分别导致图像只在水平或垂直方向上重复,no-repeat
则不允许图像在任何方向上平铺。
背景大小:background-size
,设置长宽大小/百分比,或者cover
保持长宽比并且覆盖整个盒子,contain
保持长宽比并在盒子内尽量大
背景定位:background-position
,属性值:关键字center
top
bottom
right
left
;百分数值,分别是水平和竖直;长度值,相对于左上角,水平和竖直。
背景关联:background-attachment
,属性值:默认scroll
随文档滚动,fixed
不动
多个背景:用逗号分隔,属性也用逗号分隔。
文本
缩进:text-indent
,属性值:给定长度(正值/负值),百分比;可以继承
水平对齐:text-align
,属性值:left
right
center
justify
(两端对齐)
单词间隔:word-spacing
,属性值:正/负长度值,默认normal
字母间隔:letter-spacing
,属性值:正/负长度值,默认normal
字符转换:text-transform
,属性值:none
uppercase
lowercase
capitalize
文本装饰:text-decoration
,属性值:none
underline
overline
line-through
blink
,高优先级的值会替换低优先级的值
文字阴影:text-shadow
,四个值:水平偏移、垂直偏移、模糊半径、颜色;用逗号分隔多个阴影
行高:line-height
,可以用长度值,或者无单位值,表示font-size
的倍数
处理空白符:white-space
值 | 空白符 | 换行符 | 自动换行 |
---|---|---|---|
pre-line | 合并 | 保留 | 允许 |
normal | 合并 | 忽略 | 允许 |
nowrap | 合并 | 忽略 | 不允许 |
pre | 保留 | 保留 | 不允许 |
pre-wrap | 保留 | 保留 | 允许 |
文本方向:direction
影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。大多数情况下,默认值是ltr
,显示从左到右的文本。如果显示从右到左的文本,应使用值rtl
。
字体
指定字体系列:font-family
,指定一系列值时,按优先级排列,用逗号隔开
通用字体:
名称 | 定义 |
---|---|
serif |
有衬线的字体 (衬线一词是指字体笔画尾端的小装饰,存在于某些印刷体字体中) |
sans-serif |
没有衬线的字体。 |
monospace |
每个字符具有相同宽度的字体,通常用于代码列表。 |
cursive |
用于模拟笔迹的字体,具有流动的连接笔画。 |
fantasy |
用来装饰的字体 |
字体风格:font-style
,属性值:normal
italic
oblique
font-variant
,属性值:normal
small-caps
小型大写字母
字体粗细:font-weight
,属性值:normal
bold
bolder
lighter
,100~900,400对应normal
,700对应bold
字体大小;font-size
,属性值:px
;1em
为父元素的大小,根元素大小默认为为16px;百分比
font
简写:font-style
font-variant
font-weight
font-stretch
font-size
line-height
font-family
,font-size
和line-height
之间有一个/
Web字体:@font-face
font-family
:字体名称src
:url
和format
font-weight
font-style
等
链接
链接的四种状态:
a:link
- 普通的、未被访问的链接a:visited
- 用户已访问的链接a:focus
- 链接被通过键盘TAB
选中a:hover
- 鼠标指针位于链接的上方a:active
- 链接被点击的时刻
a:hover
必须位于a:link
和a:visited
之后;a:active
必须位于a:hover
之后
为外部链接插入按钮
1 | a[href*="http"] { |
列表
list-style-type
列表标志类型;list-style-image
列表标志图像;list-style-position
列表标志位置,inside
outside
合起来,list-style
使用background-image
做项目标志
1 | ul { |
start
属性使列表从特定的数字开始计数<ol start="4"><\ol>
reversed
属性使列表倒计数<ol start="4" reversed><\ol>
value
属性给列表项目指定特定的值<li value="2">
注意:纵然你使用非数字的 list-style-type
,你仍需要使用与数值同等意义的值作为value的属性。
列表实现导航栏:
1 | <ul> |
1 | body,html { |
表格
边框:border
折叠为单一边框:border-collapse
,属性值collapse
separate
高度、宽度:height
width
文本对齐:text-align
和vertical-align
属性设置表格中文本的对齐方式。
内边距:padding
table-layout
,auto
表格和单元格的宽度取决于内容,fixed
某一列的宽度仅由该列首行的单元格决定
通过:nth-child(an+b)
伪类,选择特定的行/列,也有关键字odd
even
caption-side
属性把标题放到指定的位置,top
bottom
轮廓
outline-color
outline-style
outline-width
outline
书写模式
writing-mode
:设定块级元素的显示方向
horizontal-tb
:块流向从上至下。对应的文本方向是横向的。vertical-rl
:块流向从右向左。对应的文本方向是纵向的。vertical-lr
:块流向从左向右。对应的文本方向是纵向的。
逻辑属性和逻辑值
内联纬度:沿每一行方向的维度
块级维度:垂直每一行方向的维度
inline-size
:内联尺寸,即沿每一行方向的尺寸
block-size
:块级尺寸,即垂直每一行方向的尺寸
其他-top
-bottom
-left
-right
属性,映射到-block-start
-block-end
-inline-start
-inline-end
类似,top
bottom
left
right
映射到逻辑值block-start
block-end
inline-start
inline-end
CSS盒模型
概述
块级盒子:
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
- width和height属性可以发挥作用
- 内边距(padding),外边距(margin)和边框(border) 会将其他元素从当前盒子周围“推开”
内联盒子:
- 盒子不会产生换行。
- width和height属性将不起作用。
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline
状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于
inline
状态的盒子推开。

由内向外:
- content : 内容。
- padding : 内边距。
- border : 边框。
- margin : 外边距。
weight
和height
是content部分的大小。
box-sizing: border-box;
:替代盒模型,weight
和height
是content+padding+border的大小。
内边框
内边框宽度:padding
可以一个值设定一圈宽度,也可以四个值依次上、右、下、左
1 | h1 {padding: 10px 0.25em 2ex 20%;} |
单边的四个属性:
1 | h1 { |
百分比值是相对于父元素宽度,上下内边框也是
边框
border
边框绘制在“元素的背景之上”
border-style
定义边框样式,可以一个值,也可以四个值依次上、右、下、左
分别定义:border-top-style
border-right-style
border-bottom-style
border-left-style
border-width
,可以指定长度值,或者thin
medium
thick
接受一个值或者四个值,与上面类似;也有单边的四个属性,与上面类似
border-style
为none
时,边框宽度设置无效
border-color
,边框颜色,接受一个值或者四个值,与上面类似;也有单边的四个属性,与上面类似
border-color
为transparent
时,为一个给定宽度的透明边框
border-radius
:添加圆角边框,两个属性值分别为水平半径和垂直半径
外边框
外边框宽度:margin
值复制:
- 如果缺少左外边距的值,则使用右外边距的值。
- 如果缺少下外边距的值,则使用上外边距的值。
- 如果缺少右外边距的值,则使用上外边距的值。

单边的四个属性:
1 | h2 { |
外边框合并:当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
inline-block
一个元素使用 display: inline-block
,实现我们需要的块级的部分效果:
- 设置
width
和height
属性会生效。 padding
,margin
, 以及border
会推开其他元素。
但是不会换行。
CSS排版
由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
弹性盒子
给父元素设置display:flex
flex模型:
设置display
的父元素即flex容器
flex-direction
属性:主轴的方向,默认row
,column
row-reverse
column-reverse
flex-wrap
属性:超出容器的盒子换行
flex-flow
属性:上述两个属性的缩写
盒子的flex
属性:
- 第一个是
flex-grow
属性,无单位的比例值,表示每个flex项沿主轴的可用空间比例。 - 第二个是
flex-shrink
属性 - 第三个是
flex-basis
属性,表示盒子沿主轴方向可用空间的最小值
align-items
属性:控制盒子在交叉轴上的位置,默认stretch
,拉伸到交叉轴长度,center
保持原有宽度在交叉轴居中
盒子的align-self
属性,覆盖align-items
属性
justify-content
属性:控制盒子在主轴上的位置,默认flex-start
,主轴开始的位置,flex-end
center
space-around
沿主轴均匀分布,两边留有空间 space-between
沿主轴均匀分布,两边没有空间
盒子的order
属性,排列顺序,默认为0,大的排在小的后面,相同的按照源顺序排列
网格
简单网格
1 | <!DOCTYPE html> |
CSS网格
1 | <!DOCTYPE html> |
跨越第二列到第七列,第三行到第四行:
1 | .content { |
浮动
float
:定义元素在哪个方向浮动,值为left
right
none
源代码中在前面的元素先浮动
clear
:这个元素和源码中后面的元素将不浮动,值为left
right
both
none
浮动元素在父元素中所占的面积的有效高度为0,在父容器的底部清除浮动来修复
非浮动元素的外边距不能用于它们和浮动元素之间来创建空间,可以在非浮动元素上面创建一个清除浮动的空元素来修复
定位
position
属性
static
,默认值,元素框正常生成。relative
,元素框偏移某个距离,它原本所占的空间仍保留。abosolute
,元素框从文档流完全删除,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。fixed
,与absolute
类似,但是包含块是视窗。sticky
,被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点为止,此后它就变得固定了。
相对定位和绝对定位的元素可能会覆盖其他框。
left
right
top
bottom
定义偏移长度或者百分比
overflow
:内容超出元素框后
visible
,默认值,内容不会被修剪,溢出元素框hidden
,内容被修剪,溢出部分不可见scoll
,内容被修剪,显示滚动条auto
,如果溢出,则scoll
z-index
:元素堆叠顺序,可以为负值,值更大的元素显示在值更小的元素之前
cilp
:剪裁,值为rect (top, right, bottom, left)
多列
通过column-count
或者column-width
属性开启多列
column-gap
列间距
column-rule
是column-rule-color
和column-rule-style
的缩写,表示列间分割线的形式
分割线不占用列间的宽度
使用break-inside: void
或page-break-inside: void
防止在多列中盒子被拆开
媒体查询
1 | @media media-type and (media-feature-rule) { |
媒体类型:all
print
screen
speech
媒体特征规则:
width
height
min-
max-
- 朝向:
orientation
,portrait
竖放landscape
横放 - 悬浮:
hover
,hover
能悬浮(在用鼠标指针) pointer
,none
没有指点设备fine
鼠标指针coarse
触摸屏
与逻辑:and
;或逻辑:逗号;非逻辑:not
CSS选择器
通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。
1 | p.important {color:red;} |
选择器现在会匹配class属性包含important的所有p元素
类选择器
多类选择器:
1 | <p class="important warning"> |
1 | .important {font-weight:bold;} |
通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。
如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。
ID选择器
在一个HTML文档中,ID选择器会使用一次,而且仅一次。ID选择器不能结合使用,因为ID属性不允许有以空格分隔的词列表。
属性选择器
[abc^="def"]
:选择 abc 属性值以 "def" 开头的所有元素 [abc$="def"]
:选择 abc 属性值以 "def" 结尾的所有元素 [abc*="def"]
:选择 abc 属性值中包含子串 "def" 的所有元素
1 | li[class^="a" i] { |
使用i
,表示匹配时大小写不敏感
后代选择器
后代选择器中两个元素之间的层次间隔可以是无限的。
例如,如果写作ul em,这个语法就会选择从ul元素继承的所有em元素,而不论em的嵌套层次多深。
子元素选择器
子元素选择器:不选择任意的后代元素,而只选择某个元素的子元素
1 | h1 > strong {color:red;} |
相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。
1 | h1 + p {margin-top:50px;} |
选择紧接在h1元素后出现的段落,h1和p元素拥有共同的父元素
通用兄弟关系选择器
选中某一个元素的兄弟元素,即使他们不相邻
1 | h1 ~ p {font-weight: bold;} |
伪类
1 | p:first-child {font-weight: bold;} |
将作为某元素第一个子元素的所有p元素设置为粗体。
注意:不是p元素的第一个子元素!
1 | p > i:first-child |
匹配所有<p>
元素的第一个<i>
子元素
1 | p:first-child i |
匹配所有作为某元素的第一个子元素的<p>
元素,的所有<i>
后代元素
伪元素
1 | selector::pseudo-element {property:value;} |
first-line
伪元素用于向文本的首行设置特殊样式
first-letter
伪元素用于向文本的首字母设置特殊样式,只能用于块级元素
before
伪元素可以在元素的内容前面插入新内容
after
伪元素可以在元素的内容之后插入新内容
1 | .box::before { |
1 | <p class="box">Content in the box in my HTML page.</p> |
层叠、继承、优先级
层叠:当应用两条同级别的规则到一个元素的时候,写在后面的就是实际使用的规则。
控制继承:
inherit
设置该属性会使子元素属性和父元素相同。实际上,就是 "开启继承".
initial
设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的,那么会设置为 inherit
。
unset
将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit
,否则和 initial
一样
CSS 的shorthand属性 all
可以用于同时将这些继承值中的一个应用于(几乎)所有属性。
层叠优先级(由高到低):
- 声明在
style
的属性(内联样式)。 - 选择器中包含ID选择器
- 选择器中包含类选择器、属性选择器或者伪类
- 选择器中包含元素、伪元素选择器
CSS的值与单位
长度
绝对长度单位
单位 | 名称 | 等价换算 |
---|---|---|
cm |
厘米 | 1cm = 96px/2.54 |
mm |
毫米 | 1mm = 1/10th of 1cm |
Q |
四分之一毫米 | 1Q = 1/40th of 1cm |
in |
英寸 | 1in = 2.54cm = 96px |
pc |
十二点活字 | 1pc = 1/16th of 1in |
pt |
点 | 1pt = 1/72th of 1in |
px |
像素 | 1px = 1/96th of 1in |
相对长度单位
单位 | 相对于 |
---|---|
em |
在font-size中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如width |
ex |
字符“x”的高度 |
ch |
数字“0”的宽度 |
rem |
根元素的字体大小 |
lh |
元素的line-height |
vw |
视窗宽度的1% |
vh |
视窗高度的1% |
vmin |
视窗较小尺寸的1% |
vmax |
视图大尺寸的1% |
当在CSS中使用数字作为值时,它不应该用引号括起来。
颜色
十六进制RGB:#02798b
RGB:rgb(2, 121, 139)
RGBA,第四个值表示颜色的不透明度:rgba(2, 121, 139, .3)
hsl()
函数接受色调、饱和度和亮度值作为参数
- 色调: 颜色的底色。这个值在0和360之间,表示色轮周围的角度。
- 饱和度: 颜色有多饱和? 它的值为0 - 100%,其中0为无颜色(它将显示为灰色阴影),100%为全色饱和度
- 亮度:颜色有多亮? 它从0 - 100%中获取一个值,其中0表示没有光(它将完全显示为黑色),100%表示完全亮(它将完全显示为白色)
图片
url(star.png)
位置
关键字top
left
bottom
right
center
两个值——距左上角的水平位置和垂直位置
函数
calc(20% + 100px)
CSS中调整大小
min-width
max-width
设置宽度的最小/最大值
object-fit
属性,属性值cover
保持长宽比并且填满盒子,contain
保持长宽比并且在盒子内尽量大,fill
无视长宽比充满盒子
重置表单
1 | button, |