==========================================================================
一. css选择器 或声明
- "." class选择器
- "#" id选择器
- 标签 标签选择器
- 属性选择器：attribute-属性，value-属性值
- [attribute] -- 用于选取带有指定属性的元素。
- [attribute=value] -- 用于选取带有指定属性和值的元素。
- [attribute~=value] -- 用于选取属性值中包含指定词汇的元素。
- [attribute|=value] -- 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
- [attribute^=value] -- 匹配属性值以指定值开头的每个元素。
- [attribute$=value] -- 匹配属性值以指定值结尾的每个元素。
- [attribute*=value] -- 匹配属性值中包含指定值的每个元素。
- 例：（选取title属性中包含hello词汇的元素）：
[title~=hello] {
color:red;
}
-
后代选择器：后代选择器可以选择作为某元素后代的元素。 例："div p{}"
-
子选择器：子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 例："div > p{}"
-
相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。 例：(选取了所有位于div元素后的第一个p元素)："div + p { }"
-
普通相邻兄弟选择器：选取所有指定元素的相邻兄弟元素。 例：(选取了所有位于div元素后的p元素)："div ~ p { }"
-
css属性是有继承的，子类可以继承父类的属性 使用link引入外部css文件
- inherit -- 指定属性设置应该从父元素继承
二. 背景
-
background ： 简写属性，作用是将背景属性设置在一个声明中。
-
background-attachment ： 背景图像是否固定或者随着页面的其余部分滚动。
- 属性值：
- scroll -- 背景图片随页面的其余部分滚动。这是默认
- fixed -- 背景图像是固定的
- local -- 背景图片随滚动元素滚动
- 属性值：
-
background-color ： 设置元素的背景颜色。
-
background-image ： 把图像设置为背景。
- 属性值：
- url('URL') -- 图像的URL
- none -- 无图像背景会显示。这是默认
- inherit -- 指定背景图像应该从父元素继承
- 属性值：
-
background-position ： 设置背景图像的起始位置。
- 属性值：
- 水平是 -- percentage | length | left | center | right
- 垂直是 -- percentage | length | top | center | bottom
- x% y%；
- xpos ypos；
- inherit -- 指定background-position属性设置应该从父元素继承
- 属性值：
-
background-repeat ： 设置背景图像是否及如何重复。
- 属性值：
- repeat -- 背景图像将向垂直和水平方向重复。这是默认
- repeat-x -- 只有水平位置会重复背景图像
- repeat-y -- 只有垂直位置会重复背景图像
- no-repeat -- background-image不会重复
- 属性值：
-
background-size ： 规定背景图片的尺寸。
- 属性值：
- length -- 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
- percentage -- 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
- cover -- 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
- contain -- 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
- 属性值：
-
background-origin ： 规定背景图片的定位区域。
- 属性值：
- padding-box -- 背景图像填充框的相对位置
- border-box -- 背景图像边界框的相对位置
- content-box -- 背景图像的相对位置的内容框
- 属性值：
-
background-clip ： 规定背景的绘制区域。
- 属性值：
- border-box -- 默认值。背景绘制在边框方框内（剪切成边框方框）。
- padding-box -- 背景绘制在衬距方框内（剪切成衬距方框）。
- content-box -- 背景绘制在内容方框内（剪切成内容方框）。
- 属性值：
三. 文本
- color ： 设置文本颜色
- direction ： 设置文本方向。
- 属性值：
- ltr -- 默认。文本方向从左到右。
- rtl -- 文本方向从右到左。
- 属性值：
- line-height ： 设置行高
- text-indent ： 缩进元素中文本的首行
- text-align ： 对齐元素中的文本
- 属性值：
- left -- 把文本排列到左边。默认值：由浏览器决定。
- right -- 把文本排列到右边。
- center -- 把文本排列到中间。
- justify -- 实现两端对齐文本效果。
- 属性值：
- text-decoration ： 向文本添加修饰
- 属性值：
- none -- 默认。定义标准的文本。
- underline -- 定义文本下的一条线。
- overline -- 定义文本上的一条线。
- line-through -- 定义穿过文本下的一条线。
- blink -- 定义闪烁的文本。
- 属性值：
- letter-spacing ： 设置字符间距
- 属性值：
- normal -- 默认。规定字符间没有额外的空间。
- 数值 -- 定义字符间的固定空间（允许使用负值）。
- 属性值：
- word-spacing ： 设置字间距
- text-shadow ： 设置文本阴影
- 语法： text-shadow: h-shadow v-shadow blur color;
- 属性值：
- h-shadow -- 必需。水平阴影的位置。允许负值。
- v-shadow -- 必需。垂直阴影的位置。允许负值。
- blur -- 可选。模糊的距离。
- color -- 可选。阴影的颜色。
- vertical-align ： 设置元素的垂直对齐
- 属性值：
- baseline -- 默认。元素放置在父元素的基线上。
- sub -- 垂直对齐文本的下标。
- super -- 垂直对齐文本的上标
- top -- 把元素的顶端与行中最高元素的顶端对齐
- text-top -- 把元素的顶端与父元素字体的顶端对齐
- middle -- 把此元素放置在父元素的中部。
- bottom -- 把元素的顶端与行中最低的元素的顶端对齐。
- text-bottom -- 把元素的底端与父元素字体的底端对齐。
- 属性值：
- text-overflow ： 规定当文本溢出包含元素时发生的事情。
- 属性值：
- clip -- 修剪文本。
- ellipsis -- 显示省略符号来代表被修剪的文本。
- string -- 使用给定的字符串来代表被修剪的文本。
- 属性值：
- text-transform ： 控制元素中的字母
- 属性值：
- none -- 默认。定义带有小写字母和大写字母的标准的文本。
- capitalize -- 文本中的每个单词以大写字母开头。
- uppercase -- 定义仅有大写字母。
- lowercase -- 定义无大写字母，仅有小写字母。
- 属性值：
- white-space ： 设置元素中空白的处理方式
- 属性值：
- normal -- 默认。空白会被浏览器忽略。
- pre -- 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
- nowrap -- 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。 - pre-wrap -- 保留空白符序列，但是正常地进行换行。
- pre-line -- 合并空白符序列，但是保留换行符。
- 属性值：
- unicode-bidi ： 设置或返回文本是否被重写
- text-align-last ： 设置如何对齐最后一行或紧挨着强制换行符之前的行。
- 属性值：
- auto -- 默认值。最后一行被调整，并向左对齐。
- left -- 最后一行向左对齐。
- right -- 最后一行向右对齐。
- center -- 最后一行居中对齐。
- justify -- 最后一行被调整为两端对齐。
- start -- 最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。
- end -- 最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。
- initial -- 设置该属性为它的默认值。
- 属性值：
- text-wrap ： 规定文本的换行规则。
- 属性值：
- normal -- 只在允许的换行点进行换行。
- none -- 不换行。元素无法容纳的文本会溢出。
- unrestricted -- 在任意两个字符间换行。
- suppress -- 压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。
- 属性值：
- text-justify ： 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
- 属性值：
- auto -- 浏览器决定齐行算法。
- none -- 禁用齐行。
- inter-word -- 增加/减少单词间的间隔。
- inter-ideograph -- 用表意文本来排齐内容。
- inter-cluster -- 只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
- distribute -- 类似报纸版面，除了在东亚语系中最后一行是不齐行的。
- kashida -- 通过拉伸字符来排齐内容。
- 属性值：
- text-outline ： 规定文本的轮廓。
- word-break ： 规定非中日韩文本的换行规则。
- 属性值：
- normal -- 使用浏览器默认的换行规则。
- break-all -- 允许在单词内换行。
- keep-all -- 只能在半角空格或连字符处换行。
- 属性值：
- word-wrap ： 允许对长的不可分割的单词进行分割并换行到下一行。
- text-emphasis ： 向元素的文本应用重点标记以及重点标记的前景色。
- hanging-punctuation ： 规定标点字符是否位于线框之外。
- punctuation-trim ： 规定是否对标点字符进行修剪。
- p标签文字多出用...代替
- 添加属性：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
四. 字体
- font ： 在一个声明中设置所有的字体属性
- 属性值：
- caption -- 定义被标题控件（比如按钮、下拉列表等）使用的字体。
- icon -- 定义被图标标记使用的字体。
- menu -- 定义被下拉列表使用的字体。
- message-box -- 定义被对话框使用的字体。
- small-caption -- caption 字体的小型版本。
- status-bar -- 定义被窗口状态栏使用的字体。
- 属性值：
- font-family ： 指定文本的字体系列
- font-size ： 指定文本的字体大小
- font-style ： 指定文本的字体样式
- 属性值：
- normal -- 默认值。浏览器显示一个标准的字体样式。
- italic -- 浏览器会显示一个斜体的字体样式。
- oblique -- 浏览器会显示一个倾斜的字体样式。
- 属性值：
- font-weight ： 指定字体的粗细。
- 属性值：
- normal -- 默认值。定义标准的字符。
- bold -- 定义粗体字符。
- bolder -- 定义更粗的字符。
- lighter -- 定义更细的字符。
- 100-900 -- 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
- 属性值：
- font-variant ： 以小型大写字体或者正常字体显示文本。
五. 链接样式
- a:link ： 正常，未访问过的链接
- a:visited ： 用户已访问过的链接
- a:hover ： 当用户鼠标放在链接上时
- a:active ： 链接被点击的那一刻
/* 解决bootstrap a标签点击事件出现下划线 */
a:focus {
text-decoration: none;
}
/*设置a标签跳转指定位置过渡*/
body,html{
/*滚动过渡*/
scroll-behavior: smooth;
}
六. 列表样式
- list-style ： 简写属性。用于把所有用于列表的属性设置于一个声明中
- 属性值：
- initial -- 将这个属性设置为默认值。
- 属性值：
- list-style-type ： 设置列表项标志的类型。
- 属性值：
- none -- 无标记。
- disc -- 默认。标记是实心圆。
- circle -- 标记是空心圆。
- square -- 标记是实心方块。
- decimal -- 标记是数字。
- decimal-leading-zero -- 0开头的数字标记。(01, 02, 03, 等。)
- lower-roman -- 小写罗马数字(i, ii, iii, iv, v, 等。)
- upper-roman -- 大写罗马数字(I, II, III, IV, V, 等。)
- lower-alpha -- 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
- upper-alpha -- 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
- lower-greek -- 小写希腊字母(alpha, beta, gamma, 等。)
- lower-latin -- 小写拉丁字母(a, b, c, d, e, 等。)
- upper-latin -- 大写拉丁字母(A, B, C, D, E, 等。)
- hebrew -- 传统的希伯来编号方式
- armenian -- 传统的亚美尼亚编号方式
- georgian -- 传统的乔治亚编号方式(an, ban, gan, 等。)
- cjk-ideographic -- 简单的表意数字
- hiragana -- 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
- katakana -- 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
- hiragana-iroha -- 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
- katakana-iroha -- 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
- 属性值：
- list-style-image ： 将图象设置为列表项标志。
- 属性值：
- URL -- 图像的路径。
- 属性值：
- list-style-position ： 设置列表中列表项标志的位置。
- 属性值：
- inside -- 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
- outside -- 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
- 属性值：
七. 表格
border-collapse:collapse; 折叠边框，双边框变为单边框
表格的标签支持大部分文本、背景、边框等属性，这里不做过多介绍
八. 盒子模型
Margin（外边距） ： 清除边框区域。Margin没有背景颜色，它是完全透明
轮廓（outline） ： 轮廓处于盒子外边距内，边框外，在外边距与边框之间
Border（边框） ： 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） ： 清除内容周围的区域。会受到框中填充的背景颜色影响
九. 边框(Border)
- border ： 简写属性，用于把针对四个边的属性设置在一个声明。
- border-style ： 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
- 属性值：
- none -- 定义无边框。
- solid -- 定义实线。
- dotted -- 定义点状边框。在大多数浏览器中呈现为实线。
- dashed -- 定义虚线。在大多数浏览器中呈现为实线。
- double -- 定义双线。双线的宽度等于 border-width 的值。
- groove -- 定义 3D 凹槽边框。其效果取决于 border-color 的值。
- ridge -- 定义 3D 垄状边框。其效果取决于 border-color 的值。
- inset -- 定义 3D inset 边框。其效果取决于 border-color 的值。
- outset -- 定义 3D outset 边框。其效果取决于 border-color 的值。
- hidden -- 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
- inherit -- 规定应该从父元素继承边框样式。
- 属性值：
- border-width ： 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
- 属性值：
- thin -- 定义细的边框。
- medium -- 默认。定义中等的边框。
- thick -- 定义粗的边框。
- length -- 允许您自定义边框的宽度(像素)。
- 属性值：
- border-color ： 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
- 属性值：
- color -- 指定背景颜色。在CSS颜色值查找颜色值的完整列表
- transparent -- 指定边框的颜色应该是透明的。这是默认
- 属性值：
- border-radius ： 设置边框圆角
- 其他用法：
- border-top-left-radius -- 定义了左上角的弧度
- border-top-right-radius -- 定义了右上角的弧度
- border-bottom-right-radius -- 定义了右下角的弧度
- border-bottom-left-radius -- 定义了左下角的弧度
- 浏览器适配：
- 其他用法：
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
- box-shadow ： 附加一个或多个下拉框的阴影
- 语法： box-shadow: h-shadow v-shadow blur spread color inset;
- 属性值：
- h-shadow -- 必需的。水平阴影的位置。允许负值
- v-shadow -- 必需的。垂直阴影的位置。允许负值
- blur -- 可选。模糊距离
- spread -- 可选。阴影的大小
- color -- 可选。阴影的颜色。
- border-image ： 设置所有边框图像的速记属性。
- 属性值：
- border-image-source -- 用于指定要用于绘制边框的图像的位置
- border-image-slice -- 图像边界向内偏移
- border-image-width -- 图像边界的宽度
- border-image-outset -- 用于指定在边框外部绘制 border-image-area 的量
- border-image-repeat -- 这个例子演示了如何创建一个border-image 属性的按钮。
- 示例：
- 属性值：
div{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; // Safari浏览器及5以上
-o-border-image:url(border.png) 30 30 round; // Opera浏览器
}
- 可以单独设置盒子的四个的属性(top,right,bottom,left) 例：border-top 简写属性，用于把上边框的所有属性设置到一个声明中。 border-top-color -- 设置元素的上边框的颜色。 border-top-style -- 设置元素的上边框的样式。 border-top-width -- 设置元素的上边框的宽度。
十. 轮廓（Outline）
轮廓处于盒子外边距内，边框外，在外边距与边框之间
- outline 在一个声明中设置所有的轮廓属性。
- outline-color 设置轮廓的颜色。
- 属性值：
- invert -- 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
- outline-style -- 设置轮廓的样式。
- outline-width -- 设置轮廓的宽度。
- 其余属性值与边框属性值相同！
- 属性值：
十一. 边距
- 外边距(margin)
- 属性值：
- margin -- 简写属性。在一个声明中设置所有外边距属性。
- margin-bottom -- 设置元素的下外边距。
- margin-left -- 设置元素的左外边距。
- margin-right -- 设置元素的右外边距。
- margin-top -- 设置元素的上外边距。
- 属性值：
- 内边距(padding)
- 属性值：
- padding -- 简写属性。作用是在一个声明中设置元素的所内边距属性。
- padding-bottom -- 设置元素的下内边距。
- padding-left -- 设置元素的左内边距。
- padding-right -- 设置元素的右内边距。
- padding-top -- 设置元素的上内边距。
- 属性值：
- 外边距合并 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
十二. 尺寸
- height ： 设置元素的高度。
- line-height ： 设置行高。
- max-height ： 设置元素的最大高度。
- max-width ： 设置元素的最大宽度。
- min-height ： 设置元素的最小高度。
- min-width ： 设置元素的最小宽度。
- width ： 设置元素的宽度。
十三. CSS Display(显示) 与 Visibility（可见性）
- display ： 设置是否及如何显示元素。
- 属性值：
- none -- 此元素不会被显示。
- block -- 此元素将显示为块级元素，此元素前后会带有换行符。
- inline -- 默认。此元素会被显示为内联元素，元素前后没有换行符。
- inline-block -- 行内块元素。（CSS2.1 新增的值）
- list-item -- 此元素会作为列表显示。
- run-in -- 此元素会根据上下文作为块级元素或内联元素显示。
- table -- 此元素会作为块级表格来显示（类似
<table>），表格前后带有换行符。 - inline-table -- 此元素会作为内联表格来显示（类似
<table>），表格前后没有换行符。 - table-row-group -- 此元素会作为一个或多个行的分组来显示（类似
<tbody>）。 - table-header-group -- 此元素会作为一个或多个行的分组来显示（类似
<thead>）。 - table-footer-group -- 此元素会作为一个或多个行的分组来显示（类似
<tfoot>）。 - table-row -- 此元素会作为一个表格行显示（类似
<tr>）。 - table-column-group -- 此元素会作为一个或多个列的分组来显示（类似
<colgroup>）。 - table-column -- 此元素会作为一个单元格列显示（类似
<col>） - table-cell -- 此元素会作为一个表格单元格显示（类似
<td>和<th>） - table-caption -- 此元素会作为一个表格标题显示（类似
<caption>）
- 属性值：
- visibility ： 设置元素是否可见或不可见。
- 属性值：
- visible -- 默认值。元素是可见的。
- hidden -- 元素是不可见的。
- collapse -- 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
- 属性值：
十四. 定位
- position ： 指定元素的定位类型，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- 属性值：
- absolute -- 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- relative -- 生成相对定位的元素，相对于其正常位置进行定位。
- fixed -- 生成固定定位的元素，相对于浏览器窗口进行定位。
- sticky -- 当 top 为 0 时，元素滚动到顶部时固定。
- 属性值：
- top ： 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
- right ： 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
- bottom ： 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
- left ： 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- z-index ： 设置元素的堆叠顺序
- 属性值：
- number -- 利用数字大小进行堆叠顺序
- 属性值：
- overflow ： 设置当元素的内容溢出其区域时发生的事情。
- 属性值：
- visible -- 默认值。内容不会被修剪，会呈现在元素框之外。
- hidden -- 内容会被修剪，并且其余内容是不可见的。
- scroll -- 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto -- 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- 注释：
- 可利用 overflow-x 和 overflow-y 分别设置x轴和y轴两侧滚动条的属性
- 属性值：
- clip ： 剪辑一个绝对定位的元素
- 属性值：
- shape -- 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) clip:rect(0px,150px,150px,0px);
- auto -- 默认值。不应用任何剪裁。
- 属性值：
- cursor ： 显示光标移动到指定的类型
- 属性值：
- default -- 默认光标（通常是一个箭头）
- pointer -- 光标呈现为指示链接的指针（一只手）
- text -- 此光标指示文本。
- url -- 需使用的自定义光标的 URL。
- 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 更多属性值参考
- 属性值：
十五. 浮动
- float ： 指定一个盒子（元素）是否可以浮动。
- 属性值：
- left -- 元素向左浮动。
- right -- 元素向右浮动。
- none -- 默认值。元素不浮动，并会显示在其在文本中出现的位置。
- 属性值：
- clear ： 指定不允许元素周围有浮动元素。
- 属性值：
- left -- 在左侧不允许浮动元素。
- right -- 在右侧不允许浮动元素。
- both -- 在左右两侧均不允许浮动元素。通常使用此属性清除浮动
- none -- 默认值。允许浮动元素出现在两侧。
- 属性值：
十六. 伪类
-
:link ： a:link ： 选择所有未访问链接
-
:hover ： a:hover ： 把鼠标放在链接上的状态
-
:active ： a:active ： 选择正在活动链接
-
:visited ： :visited ： 选择所有访问过的链接
-
:focus ： input:focus ： 选择元素输入后具有焦点
-
:first-letter ： p:first-letter ： 选择每个p元素的第一个字母
-
:before ： p:before ： 在每个p元素之前插入内容，使用content属性来指定要插入的内容。
-
:after ： p:after ： 在每个p元素之后插入内容，使用content属性来指定要插入的内容。
-
:first-line ： p:first-line ： 选择每个p元素的第一行
-
:first-child ： p:first-child ： 选择器匹配属于任意元素的第一个子元素的p元素
-
:last-child ： p:last-child ： 选择器匹配属于任意元素的最后一个子元素的p元素
-
:lang(language) ： p:lang(it) ： 为
元素的lang属性选择一个开始值，可利用quotes可更改q标签的双引号为其他符号
例：
<q>这是<q>更改</q>顺序</q>
q:lang(en){
quotes:'<' '>' '(' ')';
}
结果：
<这是(更改)顺序>
十七. 透明度
- opacity ：设置元素的不透明级别。
- 属性值：
- value -- 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
- 属性值：
- filter:Alpha(opacity=50) ： IE8 以及更早的版本支持替代的filter属性
十八. 媒体规则
- @media 规则 ：根据不同的设备显示不同的效果
- 属性值：
- all -- 用于所有的媒体设备。
- aural -- 用于语音和音频合成器。
- braille -- 用于盲人用点字法触觉回馈设备。
- embossed -- 用于分页的盲人用点字法打印机。
- handheld -- 用于小的手持的设备。
- print -- 用于打印机。
- projection -- 用于方案展示，比如幻灯片。
- screen -- 用于电脑显示器。
- tty -- 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
- tv -- 用于电视机类型的设备。
- 例：(在显示器和电脑打印机p.text字体大小为20px)
- 属性值：
@media screen,print
{
p.test {font-size: 20px;}
}
十九. 滚动条美化
- scrollbar-3dlight-color: ; - 最外左 -
- scrollbar-highlight-color: ; - 左二 -
- scrollbar-face-color: ; - 面子 -
- scrollbar-arrow-color: ; - 箭头 -
- scrollbar-shadow-color: ; - 右二 -
- scrollbar-darkshadow-color: ; - 右一 -
- scrollbar-base-color: ; - 基色 -
- scrollbar-track-color: ;- 滑道 - 详情
二十. 渐变
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
- 具体渐变颜色详情参考
二十一. 2D转换
// 不放大
transform: scale(1.00,1.00);
// 放大1.5倍
transform: scale(1.5,1.5);
- 元素旋转180度
- 例：
webkit-transform: rotate(180deg); //Chrome, Safari, Opera 支持
+ 以下保留了无用的参数，较为复杂：
-moz-transform:rotate(180deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
-moz-transform-origin:50% 50%;
-webkit-transform:rotate(180deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
-webkit-transform-origin:50% 50%;
-o-transform:rotate(180deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
-o-transform-origin:50% 50%;
transform:rotate(180deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
transform-origin:50% 50%;
二十二. 过渡
- transition ：简写属性，用于在一个属性中设置四个过渡属性。
- 语法： transition: property duration timing-function delay;
- transition-property ：规定应用过渡的 CSS 属性的名称。
- 属性值： none -- 没有属性会获得过渡效果。 all -- 所有属性都将获得过渡效果。 property -- 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
- transition-duration ：定义过渡效果花费的时间。默认是 0，以秒或者毫秒为单位。
- transition-timing-function ：规定过渡效果的时间曲线。默认是 "ease"。
- 属性值：
- linear -- 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease -- 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in -- 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out -- 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out -- 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) -- 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- 属性值：
- transition-delay ：规定过渡效果何时开始。默认是 0，以秒或者毫秒为单位。
- 示例：(有关width和height元素的过渡效果，规定过渡效果2秒后开始)：
div{
transition-property: width,height;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
//适配
-webkit-transition-property:width,height;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
- 简化的示例：
div{
transition: width,height 1s linear 2s;
//适配
-webkit-transition:width,height 1s linear 2s;
}
二十三. 动画
- @keyframes ：规定动画。
- 语法： @keyframes animationname {keyframes-selector {css-styles;}}
- 属性值：
- animationname -- 必需的。定义animation的名称。
- keyframes-selector -- 必需的。动画持续时间的百分比。合法值：0-100%，from (和0%相同)，to (和100%相同)注意： 您可以用一个动画keyframes-selectors。
- css-styles -- 必需的。一个或多个合法的CSS样式属性
- 示例：
@keyframes mymove
{
from {top:0px;}//0% {top:0px;}
to {top:200px;}//100% {top:200px;}
}
//适配
@-webkit-keyframes mymove // Safari and Chrome
{
from {top:0px;}
to {top:200px;}
}
- animation ：所有动画属性的简写属性，除了 animation-play-state 属性。
- 语法： animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- animation-name ：规定 @keyframes 动画的名称。
- animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
- animation-timing-function ：规定动画的速度曲线。默认是 "ease"。
- 属性值：
- linear -- 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease -- 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in -- 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out -- 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out -- 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) -- 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- 属性值：
- animation-delay ：规定动画何时开始。默认是 0，以秒或者毫秒为单位。
- animation-iteration-count ：规定动画被播放的次数。默认是 1。
- 属性值：
- n -- 定义播放动画多少次。 默认值为1
- infinite -- 指定动画应该播放无限次（永远）
- 属性值：
- animation-direction ：规定动画是否在下一周期逆向地播放。默认是 "normal"。
- 属性值：
- normal -- 默认值。动画按正常播放。
- reverse -- 动画反向播放。
- alternate -- 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
- alternate-reverse -- 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
- 属性值：
- animation-play-state ：规定动画是否正在运行或暂停。默认是 "running"。
- 属性值：
- paused -- 指定暂停动画
- running -- 指定正在运行的动画
- 属性值：
- animation-fill-mode ：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- 属性值：
- none -- 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
- forwards -- 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。简单来说就是把物体动画地从一个地方移动到另一个地方，并让它停留在那里
- 属性值：
- 示例：
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
// Safari and Chrome
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
// Safari and Chrome
@-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
- 简化全面适配后的示例：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
// Safari and Chrome:
-webkit-animation:myfirst 5s linear 2s infinite alternate;
// Firefox:
-moz-animation:myfirst 5s linear 2s infinite alternate;
// Opera:
-o-animation:myfirst 5s linear 2s infinite alternate;
// IE:
-ms-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
// Safari and Chrome
@-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
// Firefox
@-moz-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
// Opera
@-o-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
// IE
@-ms-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
- 如有疑惑详情参考
二十四. 多列
- column-count ：指定元素应分为的列数
- 示例：(分为3列)：
div{
-moz-column-count:3; // Firefox
-webkit-column-count:3; // Safari and Chrome
column-count:3;
}
- column-fill ：指定如何填充列
- 属性值：
- balance -- 列长短平衡。浏览器应尽量减少改变列的长度
- auto -- 列顺序填充，他们将有不同的长度
- 属性值：
- column-gap ：指定列之间差距
- 示例：(差距40像素)：
div{
-moz-column-gap:40px; // Firefox
-webkit-column-gap:40px; // Safari and Chrome
column-gap:40px;
}
- column-rule ：一个用于设置所有列规则的简写属性
- 语法： column-rule: column-rule-width column-rule-style column-rule-color;
- column-rule-color ：指定的列之间颜色规则
- column-rule-style ：指定的列之间的样式规则
- 属性值：
- none -- 定义没有规则。
- hidden -- 定义隐藏规则。
- dotted -- 定义点状规则。
- dashed -- 定义虚线规则。
- solid -- 定义实线规则。
- double -- 定义双线规则。
- groove -- 定义 3D grooved 规则。该效果取决于宽度和颜色值。
- ridge -- 定义 3D ridged 规则。该效果取决于宽度和颜色值。
- inset -- 定义 3D inset 规则。该效果取决于宽度和颜色值。
- outset -- 定义 3D outset 规则。该效果取决于宽度和颜色值。
- 属性值：
- column-rule-width ：指定的列之间的宽度规则
- 属性值：
- thin -- 指定一个细边框的规则
- medium -- 定义一个中等边框规则
- thick -- 指定一个粗边框的规则
- length -- 指定宽度的规则
- 属性值：
- columns ：缩写属性设置列宽和列数
- column-span ：指定一个元素应该横跨多少列
- 属性值：
- 1 -- 元素应跨越一列
- all -- 该元素应该跨越所有列
- 属性值：
- column-width ：指定列的宽度
- 以上属性适配浏览器以-webkit- 或 -moz- 为指定浏览器的前缀，如上面的第一个示例。
二十五. 用户界面
- appearance ：允许您使一个元素的外观像一个标准的用户界面元素
- 属性值：
- resize -- 指定一个元素是否是由用户调整大小
- button -- 作为一个按钮，呈现元素
- normal -- 正常呈现元素
- icon -- 作为一个小图片的呈现元素
- window -- 作为一个视口呈现元素
- menu -- 作为一个用户选项设定呈现元素选择
- field -- 作为一个输入字段呈现元素
- 示例：(将div样式更改为button样式)：
- 属性值：
div{
appearance:button;
-moz-appearance:button; // Firefox
-webkit-appearance:button; // Safari and Chrome
}
- resize ：指定一个元素是否是由用户调整大小
- 属性值：
- none -- 用户无法调整元素的尺寸。
- both -- 用户可调整元素的高度和宽度。
- horizontal -- 用户可调整元素的宽度。
- vertical -- 用户可调整元素的高度。
- 示例：(div大小可自行调整)：
- 属性值：
div{
resize:both;
overflow:auto;
}
二十六. 图片
- filter(滤镜) 属性详情参考
二十七. 窗口大小事件
- 根据不同设备引用不同的css文件
- 语法：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
* 属性值：
+ all - 用于所有多媒体类型设备
+ print - 用于打印机
+ screen - 用于电脑屏幕，平板，智能手机等。
+ speech - 用于屏幕阅读器
- 根据窗口大小更改属性
- 示例：(如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变)：
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
* 更多多媒体查询内容可以参考[@media](https://www.w3cschool.cn/cssref/css3-pr-mediaquery.html)规则。
二十八. 弹性布局
- 弹性布局基本概念
- 注解：
- 采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
- 示例：
- 注解：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
// 以上 ul 被称为容器， li 被称为项目，一个容器内所有的子元素都被称为项目
- 容器属性
- 设置在容器上（父元素）的属性有6种
- flex-direction -- 决定主轴的方向（即项目的排列方向）
- 语法：
ul {
flex-direction: row | row-reverse | column | column-reverse;
}
/*
row（默认）：主轴水平方向，起点在左端（即项目从左向右排列）
row-reverse：主轴水平方向，起点在右端（即项目从右向左排列）
column：主轴垂直方向，起点在上边沿（即项目从上向下排列）
column-reserve：主轴垂直方向，起点在下边沿（即项目从下向上排列）
*/
* flex-wrap -- 定义换行情况
+ 语法：
flex-wrap: nowrap | wrap | wrap-reverse;
/*
nowrap（默认）：不换行；
0 0 0 0 0 0
wrap：换行，第一行在上方；
0 0 0 0 0
0
wrap-reverse：换行，第一行在下方。
0
0 0 0 0 0
*/
* flex-flow -- flex-direction和flex-wrap的简写
+ 语法：
flex-flow: <flex-direction> || <flex-wrap>;
/*
flex-direction和flex-wrap的简写，默认row nowrap
常用：
flex-flow: row wrap;
*/
* justify-content -- 定义项目在主轴上的对齐方式
+ 语法：
justify-content: flex-start | flex-end | center | space-between | space-around;
/*
对齐方式与轴的方向有关，假设主轴从左到右。
flex-start（默认值）：左对齐；
flex-end：右对齐；
center：居中；
space-between：两端对齐，项目之间间隔相等，最左右两侧不留空白
space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍，最左右两侧留相等空白
*/
* align-item -- 定义在交叉轴上的对齐方式
+ 语法：
align-items: flex-start | flex-end | center | baseline | stretch;
/*
对齐方式与交叉轴的方向有关，假设交叉轴从下到上。
flex-start：起点对齐；(上对齐)
flex-end：终点对齐；(下对齐)
enter：中间对齐；
baseline：项目的第一行文字的基线对齐；
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
*/
* align-content -- 定义多根轴线的对齐方式
+ 语法：
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*
如果项目只有一根轴线，该属性不起作用。
所以，容器必须设置flex-wrap：···；
flex-start：与交叉轴的起点对齐；(左上对齐)
flex-end：与交叉轴的终点对齐；(左下对齐)
center：与交叉轴的中点对齐；(左中对齐)
space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；(上下两端对齐)
space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；(最上下两侧留相等空白)
stretch（默认值）：轴线占满整个交叉轴。
当你不给项目设置高度但是给容器设置align-content不为stretch时，
同一轴线上的项目的高度将等于项目中高度最高的项目。
*/
- 项目的属性
- 设置在项目上（子元素）的属性也有6个。
- order -- 定义项目的排列顺序。
- 语法：
li {
order: <整数>;
}
/*
数值越小，排列越靠前，默认为0，可以是负值。
*/
.li-1 {
order: 2;
}
.li-2 {
order: 1;
}
* flex-grow -- 定义项目的放大比例
+ 语法：
flex-grow: <数字>;
/*
默认值为0，即如果空间有剩余，也不放大。
可以是小数，按比例占据剩余空间。
若所有项目的flex-grow的数值都相同，则等分剩余空间
若果有一个项目flex-grow为2，其余都为1，则该项目占据剩余空间是其余的2倍
*/
* flex-shrink -- 定义项目的缩小比例
+ 语法：
flex-grow: <数字>;
/*
默认值都为1，即如果空间不足将等比例缩小。
如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
负值对该属性无效，容器不应该设置flex-wrap。
如果一个项目设置flex-shrink为0；而其他项目都为1，则空间不足时，该项目不缩小。
如果所有项目都为0，则当空间不足时，项目撑破容器而溢出。
*/
* flex-basis -- 定义在分配多余空间之前，项目占据的主轴空间。
+ 语法：
flex-basis: <auto或者px>;
/*
默认值为auto，浏览器根据此属性检查主轴是否有多余空间。
注意设置的flex-basis是分配多余空间之前项目占据的主轴空间，
如果空间不足则默认情况下该项目也会缩小。
*/
* flex -- flex属性是flex-grow，flex-shrink和flex-basis的简写
+ 语法：
flex: none | [<flex-grow><flex-shrink><flex-basis>];
/*
默认值为0 1 auto，第一个属性必须，后两个属性可选。
可以用 flex:auto; 代替 flex: 1 1 auto;；
可以用 flex: none;代替 flex: 0 0 auto；
*/
* align-self -- 允许单个项目与其他项目有不一样的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
- 详情请移步☞
- 弹性布局要放在父元素中
- 父级元素设置style样式
/*让最外层的div实现弹性布局效果,让里面的子元素在一行排列*/
display: flex;
/*设置换行，默认不换行*/
flex-wrap:wrap ;
/*设置子元素的对齐方式*/
justify-content: space-between;
二十九 补充
- 禁止元素点击的 css 样式
pointer-events:none;
