基础知识
最后更新于
引入 CSS 样式的方法
外部样式表 - <link rel="stylesheet" href="style.css">
内部样式表 - <style>样式</style>
内联样式 - <h1 style="样式"></h1>
导入方式 - <style> @import url('main.css') <style>
长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；
无单位整数，用于指定例如相对线宽或运行动画的次数。
长度值：
绝对单位：
px：像素（pixels ）
1 in=2.54cm=25.4mm=72pt=6pc
in：英寸Inches (1 英寸 = 2.54 厘米)
cm：厘米Centimeters
mm：毫米Millimeters
pt：点Points，或者叫英镑 (1点 = 1/72英寸)
pc：皮卡Picas (1 皮卡 = 12 点)
相对单位：
em:1em与当前元素的字体大小相同（注意em会继承父元素的字体大小）
rem: 等于默认基础字体大小的尺寸，且继承的字体大小将不起作用，区别于em
vw, vh: 分别是视口宽度的1/100和视口高度的1/100
无单位整数：
0就是0，无关单位，如margin: 0;则去除了内外边框
设置行高，line-height，如line-height: 1.5;
运行动画的次数等，如animation-iteration-count: 5;
百分比的关键是看参照是什么？
width/height：相对于父元素的width/height；
margin/padding：相对于父元素的width（无论什么方向）；
transform: translate：自身border-box的尺寸；
定位bottom/left/right/top：left/right是参照包含块宽度，bottom/top是参照包含块高度；
border-radius：水平半轴相对于盒模型的宽度，垂直半轴相对于盒模型的高度；
background-position：图片移动结果是(父元素-背景图片)*百分比；
line-height：自身的font-size；
vertical-align：自身的line-height；
对于 width/height 的百分比来说，如果父元素（定位元素）没有明确的高度定义，则百分比都视为 auto。
用于指定背景颜色，字体颜色等
关键词，如“red”
十六进制，如“#000000”
RGB，如“rgb(255,0,0)”
RGBA，如“rgba(255,0,0,0.5)” - 多了透明度通道
不透明度，如“opacity: 0.5”
解决问题：当多个选择器匹配到同一个元素时，哪个选择器的规则最终会应用到元素上？
行级样式 > 内嵌样式表 > 外部样式表（就近原则）
ID选择器 > 类选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器
外部样式表的ID选择器 > 内嵌样式表的标签选择器
相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：
在用户代理样式表的声明（如浏览器在没有其他声明的默认样式）
用户样式表中的普通声明（由用户设置的自定义样式）
作者样式表中的普通声明（这是我们Web开发人员设置的样式）
作者样式表中的重要声明
用户样式表中的重要声明
如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
解决问题：应用于某个元素的一些属性值将由该元素的哪些子元素继承，而哪些则不会？
控制继承
inherit：该值将应用到选定元素的属性值设置为与其父元素一样
initial：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置值一样
unset：该值将属性重置为其自然值，即自然继承的则表现得像 inherit，否则像 initial
revert：如果当前的节点没有应用任何样式，则该属性恢复到它所拥有的值，即属性值被设置成自定义样式所定义的属性（如果被设置），否则属性值被设置成用户代理默认样式
CSS 可继承属性
只有颜色 color、文字 text-*、字体间距 font-*、行高 line-*、对齐方式和列表的样式可以继承**，**关于盒子、定位、布局的属性，都不能继承。
所有元素可继承：visibility、cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
终端块状元素可继承：text-indent、text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
当前主要以标准盒子模型为准（如上图所示），但盒模型主要分为标准盒子和IE盒：
标准盒子模型中，width 和 height 指的是内容区域的宽度和高度
IE 盒子模型中，width 和 height 指的是内容区域 + border + padding 的宽度和高度
我们可以通过 CSS 规则 box-sizing: border-box 来转化为 IE 盒子模型。
通过 max-height，max-width，min-height，min-width 属性进行宽高约束：
颜色：color
字体种类：font-family
字体样式：font-style
normal: 将文本设置为普通字体 (将存在的斜体关闭)
italic: 若有斜体版本则用斜体版本，否则利用 oblique 状态来模拟
oblique: 将文本设置为斜体字体的模拟版本，即应用普通文本倾斜的样式
字体粗细：font-weight
normal, bold: 普通或者加粗的字体粗细
lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步
文本转换：font-transform
none: 防止任何转型
uppercase: 将所有文本转为大写
lowercase: 将所有文本转为小写
capitalize: 转换所有单词让其首字母大写
full-width: 将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐
文本装饰：font-decoration
none: 取消已经存在的任何文本装饰。
underline: 文本下划线
overline: 文本上划线- 上下划线可以同时存在
line-through: 穿过文本的线 strikethrough over the text.
文字阴影：text-shadow
含四个属性值：阴影与原始文本的水平偏移，阴影与原始文本的垂直偏移，模糊半径，阴影的基础颜色，例如text-shadow: 4px 4px 5px red;
font-weight 填写数值只能填写 100 至 900 的整百数字，normal 即 400，bold 即 700
文本对齐：text-align
left: 左对齐文本
right: 右对齐文本
center: 居中文字
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同
行高：line-height
若为无单位的数值，则为该数无单位的值乘以 font-size 获得 line-height
行高可以用百分比，表示字号的百分之多少，一般都是大于 100% 的值
字母与字母的间距：letter-spacing
单词和单词的间距：word-spacing
超出部分的处理方式：overflow
visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来
hidden：不显示超过对象尺寸的内容
auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条
scroll：Windows 下，无论内容是否超出总显示滚动条。Mac 下等同auto
行高 line-height 是指文本行基线间的垂直距离。
行距是上一行的底线和下一行的顶线之间的距离。
字体大小 font-size 是同一行的顶线和底线之间的距离。
一个不成文的约定： 行高、字号一般都是偶数，这样可以保证它们的差一定偶数，就能够被2整除。
小技巧：如何单行文本垂直居中？
如果一段文本只有一行，设置 行高 = 盒子高，就可以保证单行文本垂直居中。
list-style-type：设置用于列表的项目符号的类型，例如无序列表的方形或圆形符号，或有序列表的数字、字母和罗马数字（设置为none，以便默认情况下不会显示项目符号）
list-style-position：置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外（理解不了就试试吧）
list-style-image：属性允许对于项目符号使用自定义图片
知识点：管理有序列表的计数
链接状态（采用伪类） - 顺序 link -> visited -> hover -> active
:link (没有访问过的): 这是链接默认状态，当它没有处在其他状态时，使用:link 伪类来应用样式。
:visited: 这个链接已经被访问过了(存在于浏览器的历史纪录)，使用 :visited 伪类来应用样式。
:hover: 当用户的鼠标光标刚好停留在这个链接，使用 :hover 伪类来应用样式。
:active: 一个链接当它被激活的时候 (比如被点击的时候)，使用 :active 伪类来应用样式。
:focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 使用 :focus 伪类来应用样式。
默认样式：
链接具有下划线，可以通过text-decoration:none去掉下划线
未访问过的 (Unvisited) 的链接是蓝色的
访问过的 (Visited) 的链接是紫色的
悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标
激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮)
选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接
A. 背景颜色：background-color
透明度除了可以用rgba表示，还能够用opacity来设置，此还可以使用background: transparent;来设置完全透明。
B. 背景图片：background-image
静态文件：background-image:url(images/2.gif);
渐变，具体见下方
C. 背景是否应该重复(平铺)：background-repeat
no-repeat（不要平铺）
repeat-x（横向平铺）
repeat-y（纵向平铺）
repeat（图像将在整个背景中水平和竖直地重复）
D. 背景出现在元素背景中的位置：background-position
用像素值描述属性值 —— background-position:向右偏移量 向下偏移量;
用单词描述属性值 —— background-position: 描述左右的词 描述上下的词;
E. 背景图片是否固定：background-attachment
fixed（背景就会被固定住，不会被滚动条滚走）
scroll（与fixed属性相反，默认属性）
F. 背景尺寸*：background-size
G. 背景原点：background-origin
H. 背景裁剪，即设置背景是否延伸到边框外面：background-clip
border-box ：背景延伸至边框外沿（但在边框下层），超出 border-box 部分，将裁掉
padding-box ：背景延伸至内边距（padding）外沿，超出 padding-box 部分，将裁掉
content-box：背景被裁剪至内容区外沿，超出 content-box 部分，将裁掉
应用多背景
渐变背景
线性渐变：linear-gradient(方向, 起始颜色, 终止颜色)
径向渐变：radial-gradient(辐射的半径, 中心位置, 起始颜色, 终止颜色)
border 边框有三个要素：像素（粗细）、线型、颜色。
根据三要素拆分border-width、border-style、border-color
根据方向拆分：border-top、border-right、border-bottom、border-left
组合上面两种：border-top-width、border-top-style......
源图像：border-image-source: url();
设置所需大小的切片：border-image-slice: 40;
指定图像如何填充边界：border-image-repeat: round;
stretch：默认，侧面的图像被拉伸来填满边界
repeat：边图像被重复，直到边界被填满，会出现碎片
round： 边图像被重复，直到边界被填满，它们都被稍微拉伸，不会出现碎片
space：边图像被重复，直到边界被填满，拷贝之间添加少量间隔，不会出现碎片
边界 border 的应用可详见「CSS 画图」
设备媒体能够指定样式表规则用于指定的媒体类型和查询条件，其主要用于响应式设计，语法：@media 媒体类型 and 条件 { 样式 }。
媒体类型：
前文中已经混杂了 CSS3 的部分内容，这里概述部分未提到的属性。
文本阴影：text-shadow
边框阴影：box-shadow
如果在一个阴影声明的开始放置 inset 关键字，可以使其变成一个内部阴影 box-shadow: inset 2px 2px 1px black;
边框圆角：border-radius
border-radius 完整写法 border-radius : 50px 50px 50px 50px / 40px 40px 40px 40px; 的 “/” 前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。
| 值 | 描述 |
|---|---|
all
用于所有媒体类型设备。
用于打印机。
screen
用于计算机屏幕、平板电脑、智能手机等等。
speech
用于大声“读出”页面的屏幕阅读器。
