css中的样式总结

背景样式

        css 中可以使用纯色作为背景也可以设置背景图像，实际开发中常将 logo 、一些装饰性的小图片或者超大的图片设置为背景图片，这样有利于控制他们的位置。

• background-color：设置元素的背景颜色，这种颜色会填充元素的内容、内边距和边框（如果边框有透明部分，例如虚线边框）区域。默认值是 transparent (透明)，可使用值有 color_name、hex_number、rgb_number、 inherit等，继承性为 no。
• background-image：设置元素的背景图片，不设置其他背景图片样式则图片会无限平铺整个元素。默认值为none，可使用值有 url()（指向图片的路径）、inherit，继承性为 no。
• background-repeat：定义了背景图片的平铺模式。默认值是 repeat，可使用的值有 repeat-x 、repeat-y、no-repeat、inherit 等，继承性为no。
• background-position：设置背景图片的起始位置。默认值是 0% 0%，可使用top | bottom | center | left | right 等（其中两个可以确定位置的）方位关键词作为属性值，也可以使用两个百分比值（例如50% 50%,和 center center 效果一样），当仅规定一个值时，第二个默认是 center 或50%，或者直接是使用像素值，继承性为 no。
• background-attachment：设置背景图片是否固定或者随着页面的其余部分滚动。默认值是 scroll（滚动），可使用的值有 fixed、inherit 等，继承性为 no。
• background：简写属性，作用是设置所有与背景有关的样式（包括background-color）。允许只设置其中的某些值且对顺序没有要求。默认值 not specified（没有指定），继承性为 no。

如果同时设置了 background-position 和 background-attachment 属性，则background-position 属性的定位是相对页面的窗口的位置。超出元素的那部分背景将不会显示。

文本样式

        CSS 文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等。

• text-indent：规定文本块中首行的缩进；允许使用负值，如果使用负值，那么首行会被缩进到左边。默认值为 not specified ,可以使用的值有像素值、百分比值（相对父元素的宽度）、以字体大小为单位的值即 em，继承性为 yes。
• text-align：该属性规定块级元素内的文本的水平对齐方式。通过允许用户代理调整行内内容中字母和字之间的间隔，可以支持 justify 值。默认值由 direction 属性值决定，可以使用的值有 left、right、center、justify（两端对齐）、inherit，继承性为 yes。
• word-spacing：改变文字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的，可以使用正的或者负的像素值和以字体大小为单位的值（em）、inherit，继承性为 yes。
• letter-spacing：改变字符与字符之间的间隔。与 word-spacing 差别不大，主要区别是字母之间修改的是字母字符之间的距离（不是单词之间）。
• text-transform：处理元素文本中的字母的大小写。默认值为 none ，可选值有 uppercase（大写）、lowercase（小写）、capitalize（首字母大写）、inherit，可继承性为 yes。
• text-decoration：添加文本修饰。默认值为 none，可选值有 underline、overline、line-through、blink（文本闪烁）、inherit，可继承性为 no。
• line-height：设置行间的距离（行高）。默认值是 normal，可选的值有number（行高等于字体尺寸与该数字的乘积）、像素值、百分比值（相对字体）、inherit，可继承性为 yes。
• color：规定文本的颜色，可以接收任何合法的颜色表示的值，可继承性为 yes。

text-decoration:none; 常用来处理链接标签所默认的下划线样式。

字体样式

        字体属性定义文本的**字体系列、大小、加粗、分格（（如斜体）和变形（如小型大写字母）**等样式。

• font-style：定义字体的风格，该属性设置使用斜体、倾斜或者正常字体显示文字。默认值是 normal，可选值还有 italic、oblique（倾斜）、inherit，可继承性为 yes。
• font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但其所有使用小型大写字体的字母与其他文本相比，其字体尺寸更小。默认值是 normal，将值设为 small-caps 则使用小型大写字母字体。可继承性为 yes。
• font-weight：设置字体的粗细。默认值是 normal，可使用的值有 bold、bolder、400（normal)~900之间的值（700为加粗），可继承性为 yes。
• font-size：设置字体的大小，默认值是 medium，可选值有 xx-small、x-small、small、large、x-large、xx-large、smaller、larger（比父元素更大）、像素值、百分比（相对父元素）、inherit，可继承性为 yes。
• font-family：规定字体系列。默认值不同浏览器不同，可以设置多个值，最终会根据先后顺序找到系统具有的字体去显示。常用的有微软雅黑、tahoma、arial等。可继承性为 yes。
• font:font-style | font-variant | weight | font-size/（line-hight）| font-family ; 字体简写属性可以在一个样式生命中设置所有字体相关属性，但这些属性值有一定的书写顺序（上面的顺序），可以不设置其中某个值，但是 font-size 和 font-family 这两个属性值必须有才有效。

其他重要样式属性

列表样式

• list-style-type：设置列表项标记的样式。默认值是 disc（实心圆点），可选值有 none、circle、square、decimal、decimal-leading-zero、lower(upper)-roman等。可继承性为 yes。
• list-style-image：使用图像作为列表项的标记，使用 url() 指定图像的路径。
• list-style-position：设置在何处放置列表项标记。默认值是 outside（列表项在文本外面，第二行文本会和第一行文本对齐。将值设置为 inside 则换行文本与列表项标记对齐。继承性 yes。
• list-style:list-style-type list-style-position list-style-image; 所有列表样式的简写属性。可以不设置其中某个值。默认值 disc outside none，继承性 yes。

将list-style | list-style-tyle 属性值设置为 none 可以去除掉列表项的标记。

表格样式

        表格的默认样式是没有边框的，可以使用 border 属性给表格的各个部分添加边框。例如

table, th, td {
  border: 1px solid blue;
  }
/*为表格和里面的每个单元格都设置边框属性*/

• border-collapse：将表格的边框设置为单一边框。默认值 separate（边框会分开），将值设置为 collapse 边框会合并为单一的边框。会忽略 border-spacing 和 empty-cells 属性。可继承性为 yes。
• border-spacing：规定相邻单元格的边框之间的距离。使用像素值作为值，一个值那么是指水平和垂直间距；如果使用两个那么分别是水平和垂直间距。可继承性为 yes。
• caption-side：定义表格标题的位置。默认为 top ，可以设置为 bottom。可继承性为 yes。
• empty-cells：定义是否忽略表格中的单元格，仅在表格边框分离时有意义，了解即可。默认值为show，设置为 hide 即可隐藏该单元格。

轮廓样式

        轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用。outline 属性规定元素轮廓的样式、颜色和宽度。轮廓线不会占据空间。

• outline-style：用于设置元素的整个轮廓样式。默认值是 none。可选值有 dotted（点状）、dashed（虚线）、solid（实线）。
• outline-color：设置轮廓的颜色。
• outline-width：设置轮廓宽度。
• outline:outline-color outline-style outline-width;轮廓样式的简写属性，可以按照顺序设置以上几个值，也可以不设置其中某个值。

注意：outline-style 属性值必须不为 none，设置 outline-color 和 outline-width 属性才有效。

鼠标

        cursor 属性规定要显示的光标的类型（形状）。默认值是 auto，可继承性为 yes。它的可选值如下，只需记住部分常用的即可。

值	描述
default	默认光标（通常是一个箭头）
auto	默认浏览器设置的光标。
crosshair	光标呈现十字架。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一个等待的加载圈）
help	此光标指示可用的帮助（通常是一个问号）

#扬尘/2020/07/04

3. 走自己的路，让别人说去吧，少年！