这是我参与「第四届青训营 」笔记创作活动的第2天
CSS是什么？
CSS全称是CascadingStyleSheets，是用来定义页面元素的样式如：
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
在页面使用CSS
外链
<link rel="stylesheet" href="/assets/style.css">
嵌入
<style>
li{
margin: 0;
list-style: none;
}
p{
margin: 0;
}
</style>
内联
<p style="text-align:center;">Document</p>
CSS中的元素
选择器
如下代码中，h1就是选择器
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
-
- 根据标签名、类名或id
-
- 按照属性
-
- 按照DOM树中的位置
属性选择器
[disabled]{
background:#eee;
color:#999;
}
h1{
color:white;
font-size:14px;
}
伪类
- 不基于标签和属性定位元素
- 几种伪类
-
- 状态伪类
-
- 结构性伪类
伪类选择器列表
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个元素的第一个字母 |
| :first-line | p:first-line | 选择每个元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的元素 |
| :before | p:before | 在每个元素之前插入内容 |
| :after | p:after | 在每个元素之后插入内容 |
| :lang(language) | p:lang(it) | 为元素的lang属性选择一个开始值 |
CSS white-space
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
CSS组合
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格分隔)
- 子元素选择器(以大于 > 号分隔）
- 相邻兄弟选择器（以加号 + 分隔）
- 普通兄弟选择器（以波浪号 ～ 分隔）
CSS初始值
CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
可以使用initial关键字显式重置为初始值
- background-color：initial
CSS求值过程
CSS布局
盒子模型
CSS box-sizing
| 值 | 说明 |
|---|---|
| content-box | 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 |
| border-box | 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 注： border-box 不包含 margin。 |
| inherit | 指定 box-sizing 属性的值，应该从父元素继承 |
CSS overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
CSS块级和行级
CSS display
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示，表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示，表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示。 |
| table-row | 此元素会作为一个表格行显示。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示。 |
| table-column | 此元素会作为一个单元格列显示 |
| table-cell | 此元素会作为一个表格单元格显示 |
| table-caption | 此元素会作为一个表格标题显示 |
| inherit | 规定应该从父元素继承 display 属性的值。 |
CSS flex布局
| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 |
| flex-basis | 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |
| initial | 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
CSS Grid布局
| 值 | 描述 |
|---|---|
| none | 默认值。不定义行或列的尺寸。 |
| grid-template-rows / grid-template-columns | 设置列和行的尺寸。 |
| grid-template-areas | 指定网格布局使用的网格项名称 |
| grid-template-rows / grid-auto-columns | 指定行的尺寸（高度），以及列的自动尺寸。 |
| grid-auto-rows / grid-template-columns | 指定行的自动尺寸，并设置 grid-template-columns 属性。 |
| grid-template-rows / grid-auto-flow grid-auto-columns | 指定行的尺寸（高度），以及自动布局算法怎样运作，和列的自动尺寸。 |
| grid-auto-flow grid-auto-rows / grid-template-columns | 指定自动布局算法怎样运作，和行的自动尺寸，以及设置 grid-template-columns 属性。 |
| initial | 属性设置为默认值 阅读 initial |
| inherit | 从父原生继承该属性， 阅读 inherit |
CSS position
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| sticky | 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
| initial | 设置该属性为默认值，详情查看 CSS initial 关键字。 |
