CSS Study
一、CSS 初步
添加 CSS
把 styles.css 和 index.html 联结起来，可以在HTML文档中，<head>语句模块里面加上下面的代码：
1 | <link rel="styesheet" href="styles.css> |
二、构建 CSS 块
层叠与继承
1. 冲突规则
层叠
Stylesheets cascade（样式表层叠） — 简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。优先级
继承
如果设置一个元素的 color 和 font-family ，每个在里面的元素也都会有相同的属性，除非直接在元素上设置属性。2. 理解继承
控制继承
CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。重设所有属性值
CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
CSS 选择器
1. 选择器列表
单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上,如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。
1
2
3
h1, .special {
color: blue;
}
2. 选择器的种类
类型、类、id选择器
1
2
3h1 {} /*类型选择器*/
.box {} /*类选择器*/
#unique {} /*ID 选择器*/标签属性选择器
1
2a[title] { } /*根据一个元素上的某个标签的属性的存在以选择元素的不同方式*/
a[href="https://example.com"] { } /*根据一个有特定值的标签属性是否存在来选择*/伪类和伪元素
1
2
3
4/*包含了伪类，用来样式化一个元素的特定状态*/
a:hover { } /*:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：*/
/*包含了伪元素，选择一个元素的某个部分而不是元素自己*/
p::first-line { } /*::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。*/运算符
1
2/*将其他选择器组合起来，更复杂的选择元素*/
article > p { } /*用运算符（>）选择了<article>元素的初代子元素。*/
盒模型
1. 块级盒子（Block box） 和 内联盒子（Inline box）
块级盒子（Block box）
标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。内联盒子（Inline box）
用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态盒模型的各个部分
标准盒模型
在标准模型 (标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box) 中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。1
2
3
4
5
6
7.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}替代（IE）盒模型
css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用替代模型，通过为其设置 box-sizing: border-box 来实现。1
2
3.box {
box-sizing: border-box;
}使用调试工具来查看盒模型 (F12)
3. 外边距，内边距，边框 (详细)
外边距
外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。边框
边框是在边距和填充框之间绘制的。标准的盒模型，边框的大小将添加到框的宽度和高度。替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。有四个边框，每个边框都有样式、宽度和颜色，我们可能需要对它们进行操作。border属性一次设置所有四个边框的宽度、颜色和样式。等价于1
2
3.box {
border: 1px solid black;
}1
2
3
4
5.box {
border-width: 1px;
border-style: solid;
border-color: black;
}分别设置每边的宽度、颜色和样式，可以使用：设置所有边的颜色、样式或宽度，请使用以下属性：设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一圆角 border-radius
border-radius属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用。
内边距
内边距位于边框和内容区域之间。与外边距不同，不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。
背景与边框
1. CSS 的背景样式
背景颜色 background-color
background-color属性定义了CSS中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到元素的内容和内边距的下面。背景图片 background-image
background-image属性允许在元素的背景中显示图像。控制背景平铺 background-repeat
background-repeat属性用于控制图像的平铺行为。可用的值是:调整背景图像的大小 background-size
background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。也可以使用关键字:背景图像定位 background-position
background-position属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0) (默认)，框沿着水平(x)和垂直(y)轴定位。常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值。`
1
2
3
4
5.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top center;
}或者使用 长度值, and 百分比：1
2
3
4
5.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: 20px 10%;
}混合使用关键字，长度值以及百分比1
2
3
4
5.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px;
}4-value语法来指示到盒子的某些边的距离1
2
3
4
5.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px right 10px;
}
渐变背景
使用background-image属性设置。多背景图像
在单个属性值中指定多个background-image值，用逗号分隔每个值，会发生图像重叠.其他 background-*属性也可以有值逗号分隔的方式休市对应的的background-image：1
2background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;背景附加
指定如何滚动时，内容滚动。这是由background-attachment属性控制的，它可以接受以下值:
CSS 的值与单位
数字，长度和百分比
数值类型 描述 integer 整数 number 表示一个小数——它可能有小数点后面的部分，也可能没有 dimension 有一个附加的单位，例如45deg、5s或10px。 是一个伞形类别，包括 、 、 percentage 表示一些其他值的一部分，例如50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。 绝对长度
单位 名称 cm 厘米 mm 毫米 Q 四分之一毫米 in 英寸 pc 十二点活字 pt 点 px 像素 相对长度与单位
单位 相对于 em 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width ex 字符“x”的高度 ch 数字“0”的宽度 rem 根元素的字体大小 lh 元素的line-height vw 视窗宽度的1% vh 视窗高度的1% vmin 视窗较小尺寸的1% vmax 视图大尺寸的1%
三、样式化 文本
字体样式
作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
颜色:
color 属性设置选中元素的前景内容的颜色1
2
3p{
color = red;
}字体种类:
font-family 属性, 允许为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default font.1
2
3p{
font-family: arial;
}网络安全字体：
可以应用到所有系统 (Arial, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana)默认字体:
serif, sans-serif, monospace, cursive,和 fantasy。serif sans-serif monospace cursive fantasy 有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中） 没有衬线的字体 每个字符具有相同宽度的字体，通常用于代码列表 用于模拟笔迹的字体，具有流动的连接笔画 用来装饰的字体 字体栈:
包含一个font-family属性，其值由几个用逗号分离的字体名称组成，便于浏览器多种选择1
2
3p{
font-family: "Trebuchet MS", Verdana, sans-serif;
}
字体大小:
font-size 属性设置，可以取大多数单位，常用单位为: px, em, rem使用 em / rem 时以 父元素/根元素的大小为基础大小px(像素) em rem 绝对单位,任何情况下，页面上的文本所计算出来的像素值都是一样的 1em 等于我们设计的当前元素的父元素上设置的字体大小 ,em可以调整任何东西的大小，不只是文本 1rem 等于 HTML 中的根元素的字体大小 ，而不是父元素，更容易计算字体大小 字体样式，字体粗细，文本转换和文本装饰
font-style:
用来打开和关闭文本 italic (斜体)。 可能的值如下：font-weight:
设置文字的粗体大小。这里有很多值可选 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不过事实上你很少会用到 normal 和 bold以外的值：text-transform:
允许你设置要转换的字体。值包括：text-decoration:
设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线, 可以接受多个值，同时为一段文本设置上、下、中划线) 可用值为：文字阴影:
text-shadow 属性。这最多需要 4 个值 (正偏移 1px向右移动，负偏移 -1px向左移动) :阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 black.1
2
3p{
text-shadow: 4px 4px 5px red;
}多种阴影
包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本1
2
3
4text-shadow: -1px -1px 1px #aaa,
0px 4px 1px rgba(0,0,0,0.5),
4px 4px 5px rgba(0,0,0,0.7),
0px 0px 7px rgba(0,0,0,0.4);
文本布局
作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。
文本对齐:
text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下:行高:
line-height 属性设置文本每行之间的高，可以接受大多数单位，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:1
line-height: 1.5;
字母和单词间距:
letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位1
2
3
4
5把这个样式应用到 <p> 段落的第一行：
p::first-line {
letter-spacing: 2px;
word-spacing: 4px;
}其他可能用到的属性
Font 样式:
font-variant:
在小型大写字母和普通文本选项之间切换。font-kerning:
开启或关闭字体间距选项。font-feature-settings:
开启或关闭不同的 OpenType 字体特性。font-variant-alternates:
控制给定的自定义字体的替代字形的使用。font-variant-caps:
控制大写字母替代字形的使用。font-variant-east-asian:
控制东亚文字替代字形的使用, 像日语和汉语。font-variant-ligatures:
控制文本中使用的连写和上下文形式。font-variant-numeric:
控制数字，分式和序标的替代字形的使用。font-variant-position:
控制位于上标或下标处，字号更小的替代字形的使用。font-size-adjust:
独立于字体的实际大小尺寸，调整其可视大小尺寸。font-stretch:
在给定字体的可选拉伸版本中切换。text-underline-position:
指定下划线的排版位置，通过使用text-decoration-line
属性的underline 值。text-rendering:
尝试执行一些文本渲染优化。
文本布局样式：
text-indent:
指定文本内容的第一行前面应该留出多少的水平空间。text-overflow:
定义如何向用户表示存在被隐藏的溢出内容。white-space:
定义如何处理元素内部的空白和换行。word-break:
指定是否能在单词内部换行。direction:
定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。)hyphens:
为支持的语言开启或关闭连字符。line-break:
对东亚语言采用更强或更弱的换行规则。text-align-last:
定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。text-orientation:
定义行内文本的方向。word-wrap:
指定浏览器是否可以在单词内换行以避免超出范围。writing-mode:
定义文本行布局为水平还是垂直，以及后继文本流的方向。样式列表
列表特定样式
三个属性可以在 <ul> 或 <ol> 元素上设置：
list-style-type ：
设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。list-style-position ：
设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。list-style-image ：
允许您为项目符号使用自定义图片，而不是简单的方形或圆形。
符号样式
list-style-type 属性允许设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）disc 实心圆点 (默认值)
circle 空心圆点
square 实心方块
decimal 十进制阿拉伯数字,从1开始
cjk-decimal 中日韩十进制数,
例如: 一, 二, 三, ..., 九八, 九九, 一〇〇decimal-leading-zero,
E.g. 01, 02, 03, … 98, 99lower-roman,
E.g. i, ii, iii, iv, v…upper-roman,
E.g. I, II, III, IV, V…lower-greek,
E.g. α, β, γ…lower-alpha,
E.g. a, b, c, … zupper-alpha,
E.g. A, B, C, … Z
项目符号位置
list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。默认值为 outside，这使项目符号位于列表项之外。如果值设置为 inside，项目条目则位于行内。使用自定义的项目符号图片
list-style-image 属性允许对于项目符号使用自定义图片,在控制项目符号的位置，大小等方面是有限的,可以对无序排列更改1
2
3
4
5
6
7ul li {
padding-left: 2rem;
background-image: url(star.svg);
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
}管理列表计数
在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。start
start 属性允许你从1 以外的数字开始计数。1
2
3
4
5<ol start="4">
<li></li>
<li></li>
<li></li>
</ol>reversed
reversed 属性将启动列表倒计数1
2
3
4
5<ol start="4" reversed>
<li></li>
<li></li>
<li></li>
</ol>value
value 属性允许设置列表项指定数值1
2
3
4
5<ol start="4" reversed>
<li value=2></li>
<li value=4></li>
<li value=6></li>
</ol>样式化链接
链接状态
链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:Link (没有访问过的):
这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。Visited:
这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。Hover:
当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。Focus:
一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。Active:
一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。
默认样式
将样式应用到一些链接 (必需按顺序)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}在链接中包含图标 (属性选择器——a[href*="http"] 选中 <a> 元素，但是这样只会选中那些拥有 href 属性，且属性的值包含 "http" 的 <a>的元素。指定位置为100%，使其出现在内容的右边，距离上方是0px, padding-right ，为背景图片留出空间，这样就不会和文本重叠。)1
2
3
4
5a[href*="http"] {
background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
background-size: 16px 16px;
padding-right: 19px;
}样式化链接为按钮
具体请看