Cascading Style Sheets 简称 css，是层叠样式表（也叫级联样式表）。
一、css规则：
在 CSS 中包含两种语法规则：
- 普通规则：由选择器、属性和值构成
- @规则：以@开头后面跟随一个关键字的形式构成，也被称为“AT规则”，根据使用方法的不同又可以分为“常规规则”与“嵌套规则”两种。
1.普通规则
- 每个选择器的规则都用 { } 括起来；
- 属性和属性值之间用 ： 隔离分开；
- 每个规则集都用 ; 分开（或者每个规则集结束都已是以分号—；结尾）
p {color:red;}
p:是选择器（selector）
color:是属性(property)
red:是属性值(property value)
css属性前缀:-moz-、-webkit-、-ms-、-o-
img{
-moz-force-broken-image-icon: 1;
width:100%;
height:100%;
}
2. @规则
2.1 常规规则
所谓“常规规则”指的是语法类似下面的规则：
@charset "<charset>";
@import <url>
@namespace url(XML-namespace-URL);
2.2 嵌套规则
所谓“嵌套规则”指的就是在 @规则后面需要跟随一个花括号{ }，其中包含了一些其它的规则声明
@[KEYWORD] {
/* 嵌套语句 */
}
@media all and (min-width: 1280px) {
/* 宽度大于1280 */
}
@page :first {
margin-left: 50%;
margin-top: 50%;
}
| 规则名 | 描述 |
|---|---|
| @charset | 用来设置 CSS 文件使用的字符编码 |
| @color-profile | |
| @container | 容器 |
| @counter-style | |
| @font-face | 用于从远程服务器或者用户本地加载指定的字体 |
| @font-feature-values | |
| @font-palette-values | |
| @import | 用来向当前 CSS 样式文件中导入其它样式文件；也必须放在样式文件的最前面 |
| @keyframes | 用来定义 CSS3 中 animation 动画关键帧（或 waypoints）的样式，以此来控制动画序列中的中间步骤 |
| @layer | |
| @media | 媒体查询 |
| @namespace | 用来定义 CSS 样式表中 XML 命名空间的 @规则，可以为当前样式文件内的所有选择器都设置指定的命名空间 |
| @page | 用于在打印文档时修改某些 CSS 属性，需要注意的是，使用 @page 您只能修改部分 CSS 属性，例如外间距属性 margin，打印相关的 orphans、widows 属性，以及 page-break-* 等属性，其他的 CSS 属性会被忽略 |
| @property | |
| @scope | |
| @supports | 用于检查浏览器是否支持某个 CSS 特性，也被称为“特性查询” |
@charset "utf-8";
@import url;
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
@supports (display: flex) {
.flex-container > * {
text-shadow: 0 0 2px blue;
float: none;
}
.flex-container {
display: flex;
}
}
二、CSS选择器
1. css选择器的类型
选择器基本有以下几种：
- 元素选择器也叫标签选择器
- ID选择器
- 类选择器
- 属性选择器
- 关系选择器
- 伪类和伪元素选择器
- * 通配符（通用选择器）
- > 子代关系选择器
- + 邻接兄弟
- ~ 通用兄弟
- ‘ ’ 空格
*{list-style:none;}
ul > li{color:red;}
h1+p{font-size:16px;}
p~img{margin-left:6x;}
div p span{color:pink;}
2. css层叠(cascade)
样式表层叠——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
3. css优先级
选择器的优先级是：ID选择器 > 类选择器 > 元素选择器
通用选择器（*）、组合符（+、>、~、’ '）和调整优先级的选择器（:where()）不会影响优先级。
否定（:not()）和任意匹配（:is()）伪类本身对优先级没有影响，但它们的参数则会带来影响。参数中，对优先级算法有贡献的参数的优先级的最大值将作为该伪类选择器的优先级。
内联样式会高于普通规则层叠
!important 可以覆盖普通规则的层叠。
p{width:200px;}
p{width:100px!important;}
4. css继承
控制继承
CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。
-
inherit 设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
-
initial 将应用于选定元素的属性值设置为该属性的初始值。
-
revert (en-US) 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
-
revert-layer (en-US) 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
-
unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样
// 把元素的所有属性都设置为自然属性
p{all:unset;}
三、css盒模型(box model)
1.块级盒子 block box
- 每个块级盒子都会自动换行
- 拥有width、height属性
- 拥有内边距（padding）, 外边距（margin）和 边框（border）
2.内联盒子 inline box
- 盒子不会产生换行
- width 和 height 属性将不起作用
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开
// 变成块级元素盒子
.box{display:block}
// 变成内联元素盒子
.box{display:inline}
把内联元素span变成拥有块级元素部分属性，但是span不换行，可以使用这个样式
span{display:inline-block}
3.盒子模型的组成
CSS 中组成一个块级盒子需要：
- Content box:这个区域是用来显示内容，大小可以通过设置 width,height
- Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置
- Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置
- Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置
1.标准盒子模型
如果定义了一个盒子的宽高以及外边距、内边距和边框（width, height, margin, border, and padding）
真实宽 = width + border + padding
真实高 = height + border + padding
margin 不计入实际大小——当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止——不会延伸到 margin
2.替代（IE）的盒模型
默认浏览器会使用标准模型。如果需要使用替代模型，你可以通过为其设置 box-sizing: border-box 来实现。这样就可以告诉浏览器使用 border-box 来定义区域，从而设定你想要的大小
box-sizing: border-box;
如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性
html{box-sizing: border-box;}
*,
*::before,
*::after {
box-sizing: inherit;
}
四、css布局
- 正常布局流 Normal Flow
- 弹性布局 Flexbox
- 网格布局 Grid
- 浮动布局 Float
- 定位布局 Position
- 多列布局 Multi-column Layout
- 表格布局 Table
大部分页面布局都离不开display属性，display属性拥有以下属性值：
- block
- inline
- inline-block
- flex
- grid
- none
1. 弹性布局 Flex Layout
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
// 开启flex布局
.box{display:flex;}
// 行内元素也可以使用 Flex 布局
.box{display:inline-flex;}
1.1 flex 容器的属性
以下6个属性设置在容器上
| 容器属性 | 容器属性值 | 描述 |
|---|---|---|
| flex-direction | row、row-reverse 、column 、column-reverse | 属性决定主轴的方向（即项目的排列方向） |
| flex-wrap | nowrap、wrap 、wrap-reverse | 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，换行 |
| flex-flow | row、nowrap | 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap |
| justify-content | flex-start、 flex-end、 center、 space-between 、 space-around | 属性定义了项目在主轴上的对齐方式 |
| align-items | flex-start 、 flex-end 、 center 、baseline 、 stretch | 属性定义项目在交叉轴上如何对齐 |
| align-content | flex-start 、 flex-end 、 center 、 space-between 、space-around、 stretch | 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 |
flex-direction属性值：
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap属性值：
- nowrap 默认，不换行
- wrap 换行，第一行在上方
- wrap-reverse 换行，第一行在下方
justify-content属性值：
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items属性值：
具体的对齐方式与交叉轴的方向有关
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
align-content属性值：
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
1.2 felx 项目的属性
以下6个属性设置在项目上
| 项目的属性 | 属性值 | 描述 |
|---|---|---|
| order | order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 | |
| flex-grow | 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 | |
| flex-shrink | 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 | |
| flex-basis | flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小 | |
| flex | flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 | |
| align-self | align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch |
2.网格布局 Grid Layout
网格布局（Grid）是最强大的 CSS 布局方案
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
2.1 容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
<div>
<p><span>1</span></p>
<p><span>2</span></p>
<p><span>3</span></p>
<p><span>4</span></p>
<p><span>5</span></p>
</div>
div就是容器，p就是项目。
注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<span>元素就不是项目。Grid 布局只对项目生效。
2.2 行和列
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
2.3 单元格
和列的交叉区域，称为"单元格"（cell）
常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格
2.4 网格线
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线
2.5 容器属性
Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。
| 容器属性 | 描述 |
|---|---|
| display | 开启网格布局 |
| grid-template-columns | 定义每一列的列宽 |
| grid-template-rows | 定义每一行的行高 |
| grid-row-gap | 设置行与行的间隔（行间距） |
| grid-column-gap | 设置列与列的间隔（列间距） |
| grid-gap | 是grid-column-gap和grid-row-gap的合并简写形式 |
| grid-template-areas | 用于定义区域 |
| grid-auto-flow | 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行 |
| justify-items | 设置单元格内容的水平位置（左中右） |
| align-items | 设置单元格内容的垂直位置（上中下） |
| place-items | 是align-items属性和justify-items属性的合并简写形式 |
| justify-content | 是整个内容区域在容器里面的水平位置（左中右） |
| align-content | 是整个内容区域的垂直位置（上中下） |
| place-content | 是align-content属性和justify-content属性的合并简写形式 |
display: grid指定一个容器采用网格布局
div {
display: grid;
}
// 默认情况下，容器元素都是块级元素，但也可以设成行内元素
div {
display: inline-grid;
}
注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
2.6 项目属性
- grid-column-start 属性，左边框所在的垂直网格线
- grid-column-end 属性，右边框所在的垂直网格线
- grid-row-start 属性，上边框所在的水平网格线
- grid-row-end 属性，下边框所在的水平网格线
- grid-column 属性，grid-column-start和grid-column-end的合并简写形式
- grid-row 属性，grid-row-start属性和grid-row-end的合并简写形式
- grid-area 属性指定项目放在哪一个区域
- justify-self 属性，属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目
- align-self 属性，属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
- place-self 属性是align-self属性和justify-self属性的合并简写形式
justify-self 和align-self 属性值：
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
3. 浮动布局
float属性有四个属性值：
- left — 将元素浮动到左侧。
- right — 将元素浮动到右侧。
- none — 默认值，不浮动。
- inherit — 继承父元素的浮动属性。
.box{float:left}
.box{float:right}
4. 定位布局
- 静态定位（Static positioning）
- 相对定位（Relative positioning）
- 绝对定位（Absolute positioning）
- 固定定位（Fixed positioning）
- 粘性定位（Sticky positioning）
.box{
position:relative;
}
.box{
position:absolute;
top:0px;
left:0px;
}
.box{
position:fixted;
top:0px;
left:10px;
}
5. 多列布局
Multiple-column layout
- column-count 指定数量的列
- column-width 列宽
- column-gap 改变列间间隙
- column-rule 在列间加入一条分割线
.container {
column-count: 3;
column-gap: 20px;
column-rule: 4px dotted rgb(79, 185, 227);
}
6. 表格布局
table-layout
/* 关键字值 */
table-layout: auto;
table-layout: fixed;
/* 全局值 */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;
7. 响应式设计
1.自适应布局最外面的容器宽为100%
2.响应式排版多用媒体查询
3.使用视口单位实现响应式排版 vw/vh
8. 媒体查询
五、伪类和伪元素
1. 伪类
通过伪类可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性）
伪类的名称不区分大小写，但需要以冒号:开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：
selector:pseudo-class { property: value; }
其中 selector 为选择器名称，pseudo-class 为伪类的名称。
| 选择器 | 例子 | 描述 |
|---|---|---|
| :active | a:active | 匹配被点击的链接 |
| :checked | input:checked | 匹配处于选中状态的 <input> 元素 |
| :disabled | input:disabled | 匹配每个被禁用的 <input> 元素 |
| :empty | p:empty | 匹配任何没有子元素的 <p> 元素 |
| :enabled | input:enabled | 匹配每个已启用的 <input> 元素 |
| :first-child | p:first-child | 匹配父元素中的第一个子元素 <p>，<p> 必须是父元素中的第一个子元素 |
| :first-of-type | p:first-of-type | 匹配父元素中的第一个 <p> 元素 |
| :focus | input:focus | 匹配获得焦点的 <input> 元素 |
| :hover | a:hover | 匹配鼠标悬停其上的元素 |
| :in-range | input:in-range | 匹配具有指定取值范围的<input> 元素 |
| :invalid | input:invalid | 匹配所有具有无效值的 <input> 元素 |
| :lang(language) | p:lang(it) | 匹配每个 lang 属性值以 “it” 开头的 <p> 元素 |
| :last-child | p:last-child | 匹配父元素中的最后一个子元素 <p>， <p> 必须是父元素中的最后一个子元素 |
| :last-of-type | p:last-of-type | 匹配父元素中的最后一个 <p> 元素 |
| :link | a:link | 匹配所有未被访问的链接 |
| :not(selector) | :not§ | 匹配每个非 <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> |
| :nth-of-type(n) | p:nth-of-type(2) | 匹配父元素的第二个子元素 <p> |
| :only-of-type | p:only-of-type | 匹配父元素中唯一的 <p> 元素 |
| :only-child | p:only-child | 匹配父元素中唯一的子元素 <p> |
| :optional | input:optional | 匹配不带 “required” 属性的 <input> 元素 |
| :out-of-range | input:out-of-range | 匹配值在指定范围之外的 <input> 元素 |
| :read-only | input:read-only | 匹配指定了 “readonly” 属性的 <input> 元素 |
| :read-write | input:read-write | 匹配不带 “readonly” 属性的 <input> 元素 |
| :required | input:required | 匹配指定了 “required” 属性的 <input> 元素 |
| :root | root | 匹配元素的根元素，在 HTML 中，根元素永远是 HTML |
| :target | #news:target | 匹配当前活动的 #news 元素（单击包含该锚名称的 URL） |
| :valid | input:valid | 匹配所有具有有效值的 <input> 元素 |
| :visited | a:visited | 匹配所有已经访问过的链接 |
2. 伪元素
- ::after(:after)
- ::before(:before)
- ::backdrop
- ::cue
- ::cue-region
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- ::slotted()
- ::target-text
- ::part()
- ::marker
- ::grammar-error
| 伪元素 | 例子 | 描述 |
|---|---|---|
| ::after | p::after | 在每个 <p> 元素之后插入内容 |
| ::before | p::before | 在每个 <p> 元素之前插入内容 |
| ::first-letter | p::first-letter | 匹配每个 <p> 元素中内容的首字母 |
| ::first-line | p::first-line | 匹配每个 <p> 元素中内容的首行 |
| ::selection | p::selection | 匹配用户选择的元素部分 |
| ::placeholder | input::placeholder | 匹配每个表单输入框（例如 <input>）的 placeholder 属性 |
Utilities 实用案例
1.css 长度单位
常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。
1. 像素 px
像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。
2. 百分比 %
百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。
3. rem和em
em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。
em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。
rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。
4. vw/vh
（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
vw：相对于视窗的宽度，视窗宽度是100vw；
vh：相对于视窗的高度，视窗高度是100vh；
vmin：vw和vh中的较小值；
vmax：vw和vh中的较大值；
vw/vh 和百分比很类似，两者的区别：
百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vm：相对于视窗的尺寸
2. px、em、rem的区别及使用场景
三者的区别：
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。
使用场景：
对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
2. css 颜色
在日常写css颜色样式，例如文字颜色，背景颜色、阴影颜色等等这些时候都用到了颜色属性。
1. 颜色属性
| 颜色属性 | 说明 |
|---|---|
| background-color | 背景颜色 |
| border-color | 边框颜色 |
| outline-color | 轮廓颜色 |
| text-decoration-color | 文本下划线颜色 |
| text-emphasis-color (en-US) | 对文字进行强调装饰的方法 |
| text-shadow | 文本阴影颜色 |
| caret-color | 插入光标（caret）的颜色 |
| column-rule-color | 列之间的颜色 |
| color-adjust (en-US) | 是否允许浏览器自己调节颜色以便有更好的阅读体验 |
background-color:#666999;
border-color:red;
text-decoration-color:#333;
CSS4 color-adjust属性
color-adjust原本是个非标准属性，CSS Color Module Level 4的工作草案加入了，算是有了名分了，值得介绍一番。
color-adjust这个CSS属性作用用一句话表述：是否允许浏览器自己调节颜色以便有更好的阅读体验。
economy 默认值。economy英文直译意思是“经济”，“节省”。表现为，浏览器（或其他客户端）对于元素进行样式上的调整，调整的规则由浏览器自己决定，以免达到更好的输出效果。例如，当打印时，浏览器会选择省略所有背景图像，并调整文本颜色，以确保对比度对于白纸上的阅读是最佳的
exact则是“精确”，“准确”的意思。意思是告诉浏览器，我设置的这些颜色，背景啥的都是有必要的，精确匹配的，你不要自作聪明帮我做调整
color-adjust: economy;
color-adjust: exact;
伪元素颜色
p::first-letter{
color:pink;
}
p::first-line{
color:yellow;
}
5. color 颜色值
写的最多颜色值的格式的是十六进制的css样式例如：#333333、rgb(0,0,0)，其实还有其他格式。在CSS中颜色的书写可以分为几类：
- 关键字（如；red、blue、green、transparent）
- RGB立体坐标（以"#"开头的十六进制或者rgb()、rgba()函数表达形式的）
- HSL圆柱坐标（以 hsl() 和 hsla() 函数表达式的形式）
- hwb()
1.关键字
其实关键字就是英文颜色单词，如：white–白色、black–黑色、red–红色等等。
一个颜色可以包括一个alpha通道透明度值，来表明颜色如何与它的背景色混合
transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有阿尔法通道为最小值的黑色，是 rgba(0,0,0,0) 的简写。
currentColor关键字 它继承自父级的 color 属性。
p{
color:blue;
}
a{
color:transparent;
}
div{
background-color:currentColor;
}
2.rgb()
rgb是红-绿-蓝（red-green-blue）的缩写
十六进制符号：#RRGGBB[AA]
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）。A是可选的。比如，#ff0000等价于#ff0000ff
p{
color:#336699;
}
a{
color:#000fff
}
十六进制符号：#RGB[A]
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）。A是可选的。三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。比如，#f09和#ff0099表示同一颜色。类似地，四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。比如，#333和#333333表示相同颜色。
p{
color:#333;
}
a{
color:#333333;
}
函数符： rgb[a](R, G, B[, A])
R（红）、G（绿）、B （蓝）可以是（数字），或者（百分比），255相当于100%。A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。
p{
color:rgb(214,214,214)
}
div{
color:rgba(42,215,64,0.7)
}
函数符：rgb[a](R G B[ / A])
CSS 颜色级别 4 支持用空格分开的值。
3.hsl()
颜色也可以使用 hsl() 函数符被定义为色相-饱和度-亮度（Hue-saturation-lightness）模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变亮度/暗度和饱和度）
p{
color:hsl(120, 100%, 50%);
}
4.hwb()
css4 color 制定的颜色函数,目前只有Safari 15和Safari on iOS 15支持，其他浏览器都不支持，慎用。
p{
color:hwb(0,60%,60%);
}
3.css 字体
3.1字体系列属性
- font-family：字体系列
- font-weight：字体的粗细
- font-size：字体的大小
- font-style：字体的风格
3.2文本系列属性
- text-indent：文本缩进
- text-align：文本水平对齐
- line-height：行高
- word-spacing：单词之间的间距
- letter-spacing：中文或者字母之间的间距
- text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
- color：文本颜色
4.css 背景
| 和背景相关的属性 | 描述 |
|---|---|
| background | |
| background-attachment | |
| background-clip | |
| background-color | |
| background-image | |
| background-origin | |
| background-position | |
| background-position-x | |
| background-position-y | |
| background-repeat | |
| background-size |
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
5.css 内边距
padding
- padding-top
- padding-left
- padding-bottom
- padding-right
6.css 外边距
margin
- margin-top
- margin-left
- margin-bottom
- margin-right
7.css边框
1.border属性:
- border-width
- border-style
- border-color
语法：border:width style color;
.box{border:1px silid red;}
2.border-style
- none
- hidden
- dotted 圆点
- dashed 虚线
- solid 实线
- double 双实线
- groove 显示为有雕刻效果的边框，样式与 ridge 相反
- ridge 显示为有浮雕效果的边框，样式与 groove 相反
- inset 显示为有陷入效果的边框，样式与 outset 相反
- outset 显示为有突出效果的边框，样式与 inset 相反
outline轮廓与border很相似。
| 和border相关的属性 | 描述 |
|---|---|
| border | 边框简写 |
| border-bottom | 边框底部 |
| border-bottom-color | 边框底部颜色 |
| border-bottom-left-radius | |
| border-bottom-right-radius (en-US) | |
| border-bottom-style | |
| border-bottom-width | |
| border-collapse | |
| border-color | |
| border-image | |
| border-image-outset | |
| border-image-repeat | |
| border-image-slice | |
| border-image-source | |
| border-image-width | |
| border-left | |
| border-left-color | |
| border-left-style | |
| border-left-width | |
| border-radius | |
| border-right | |
| border-right-color | |
| border-right-style | |
| border-right-width | |
| border-style | |
| border-top | |
| border-top-color | |
| border-top-left-radius | |
| border-top-right-radius | |
| border-top-style | 边框顶部样式 |
| border-top-width | 边框顶部宽度 |
| border-width | 边框宽度 |
| box-shadow | 阴影 |
8.css 圆角
border-radius
.box{border-radius: 30px;}
.box{border-radius: 20% 25%;}
9.css 阴影
文本效果
- text-shadow 向文本添加阴影
- box-shadow 盒子阴影
- text-overflow 文本溢出
- word-wrap 文本换行
- word-break 规定非中日韩文本的换行规则
.text{text-shadow:7px 7px 7px pink}
.box{box-shadow:7px 7px 7px red}
p {word-wrap:break-word;}
10.css 渐变
渐变有两种类型：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
#box{background-image:linear-gradient(red, yellow 10%, green 20%);}
#box{background-image: radial-gradient(shape size at position, start-color, ..., last-color);}
11.css 过渡效果
过渡属性
| 属性 | 描述 | css |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
div{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
12.css 转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸
a.2D转换
- translate()
- rotate() 旋转
- scale() 缩放
- skew()
- matrix()
b.3D转换
- rotateX()
- rotateY()
13.css 动画
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | 3 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 | 3 |
14. css 元素溢出
1. overflow属性
- overflow-x
- overflow-y
overflow 相关属性：
- overflow-anchor
- overflow-block
- overflow-clip-margin
- overflow-inline
- overflow-wrap
2. overflow属性值
| overflow属性值 | 描述 |
|---|---|
| visible | 内容不能被裁减并且可能渲染到边距盒（padding）的外部 |
| hidden | 内容将被裁减 |
| clip | 内容将以元素的边距（padding）盒进行裁剪 |
| scroll | |
| auto | 如果内容溢出，则浏览器提供滚动条 |
| overlay |
CSS overflow 滚动吸附的关键属性
- scroll-snap-type——使用这个属性可定义滚动式视口是否可被吸附、必须还是可选吸附以及吸附应当出现在哪些轴上。
- scroll-snap-align——这个属性设置在滚动容器的每个子元素上，可用于定义每个子元素的吸附位置或没有吸附位置。
- scroll-snap-stop——这个属性确保在滚动中吸附到而不是越过某个子元素。
- scroll-margin——这个属性可以设置在在滚动中可以被吸附的子元素上，用于在指定盒子上创建吸附外边距。
- scroll-padding——这个属性可以设置在滚动容器上，用于创建吸附偏移
15. css 滤镜
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
filter 函数
除特殊说明外，函数的值如果接受百分比值（如 34%），那么该函数也接受小数值（如 0.34）。
- blur() 模糊
- brightness() 亮度
- contrast() 对比度
- drop-shadow() 阴影
- grayscale() 灰度
- hue-rotate() 色相旋转
- invert() 反色
- opacity() 透明度
- saturate() 饱和度
- sepia() 褐色（有种复古的旧照片的感觉）
/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Use no filter */
filter: none;
/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;
1. blur() 高斯模糊
blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为 0。该参数可以指定为 CSS 长度，但不接受百分比值。
filter: blur(5px)
2. brightness() 明亮
brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮
filter: brightness(2)
3. contrast() 对比度
contrast() 函数可调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。
filter: contrast(200%)
4. drop-shadow() 阴影效果
drop-shadow() 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。函数接受 （在 CSS3 背景中定义）类型的值，除了 inset 和 spread 关键字。该函数与已有的 box-shadow 属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
filter: drop-shadow(16px 16px 10px black)
5. grayscale() 图像灰度
grayscale() 函数将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。
filter: grayscale(100%)
6. hue-rotate() 色相旋转
hue-rotate() (en-US) 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。
filter: hue-rotate(90deg)
7. invert() 反转
invert() (en-US) 函数反转输入图像。amount 的值定义转换的比例。值为 100% 则图像完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。若未设置值，则默认为 0。
filter: invert(100%)
8. opacity() 透明
opacity() 转化图像的透明程度。amount 的值定义转换的比例。值为 0% 则是完全透明，值为 100% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。也相当于图像样本乘以数量。若未设置值，则默认为 1。该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。
9. saturate() 图像饱和度
saturate() (en-US) 函数转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。若未设置值，则默认为 1。
filter: saturate(200%)
10. sepia() 深褐色
sepia() (en-US) 函数将图像转换为深褐色。amount 的值定义转换的比例。值为 100% 则完全是深褐色的，值为 0% 图像无变化。值在 0% 到 100% 之间，值是效果的线性乘数。若未设置值，则默认为 0。
filter: sepia(100%)
扫一扫
2425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
