CSS样式详解

CSS样式表翻译

类型（Type）面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。

注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。

类 型

·font-family：规定元素的字体系列

family-name ：用于某个元素的字体族名称或/及类族名称的一个优先表 generic-family：默认值：取决于浏览器 inherit：规定应该从父元素继承字体系列

·font-size：属性可设置字体的尺寸

xx-small、x-small、small、medium、large、x-large、xx-large：把字体的尺寸设置 为不同的尺寸，从 xx-small 到 xx-large。默认值：medium Smaller：把 font-size 设置为比父元素更小的尺寸

Larger：把 font-size 设置为比父元素更大的尺寸 Length：把 font-size 设置为一个固定的值 %：把 font-size 设置为基于父元素的一个百分比值 Inherit：规定应该从父元素继承字体尺寸

·font-weight：属性设置文本的粗细

normal ：默认值。定义标准的字符 bold ：定义粗体字符 bolder ：定义更粗的字符 lighter ：定义更细的字符

100、200、300、400、500、600、700、800、900：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold

inherit ：规定应该从父元素继承字体的粗细

·font-style：属性定义字体的风格

normal ：默认值。浏览器显示一个标准的字体样式

italic ：浏览器会显示一个斜体的字体样式 oblique ：浏览器会显示一个倾斜的字体样式 inherit ：规定应该从父元素继承字体样式

·font-variant： 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

normal ：默认值。浏览器会显示一个标准的字体

small-caps ：浏览器会显示小型大写字母的字体

inherit ：规定应该从父元素继承 font-variant 属性的值

·line-height ：属性设置行间的距离（行高）

normal :默认。设置合理的行间距

number :设置数字，此数字会与当前的字体尺寸相乘来设置行间距 length :设置固定的行间距

% :基于当前字体尺寸的百分比行间距

inherit :规定应该从父元素继承 line-height 属性的值

·text-transform ：属性控制文本的大小写

none ：默认。定义带有小写字母和大写字母的标准的文本

capitalize ：文本中的每个单词以大写字母开头 uppercase ：定义仅有大写字母

lowercase ：定义无大写字母，仅有小写字母

inherit ：规定应该从父元素继承 text-transform 属性的值

·text-decoration 属性规定添加到文本的修饰

none ：默认。定义标准的文本

underline ：定义文本下的一条线 overline ：定义文本上的一条线 line-through ：定义穿过文本下的一条线 blink ：定义闪烁的文本

inherit ：规定应该从父元素继承 text-decoration 属性的值

·color ：属性规定文本的颜色

color_name ：规定颜色值为颜色名称的颜色（比如 red）

hex_number ：规定颜色值为十六进制值的颜色（比如 #ff0000） rgb_number ：规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0) inherit ：规定应该从父元素继承颜色

Background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。

背 景

·background-color： 属性设置元素的背景颜色

color_name ：规定颜色值为颜色名称的背景颜色（比如 red） hex_number ：规定颜色值为十六进制值的背景颜色（比如 #ff0000） rgb_number ：规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0) transparent ：默认。背景颜色为透明

inherit ：规定应该从父元素继承 background-color 属性的设置

·background-image ：属性为元素设置背景图像

url('URL') ：指向图像的路径

·background-repeat ：属性设置是否及如何重复背景图像

repeat ：默认。背景图像将在垂直方向和水平方向重复 repeat-x ：背景图像将在水平方向重复

List面板可以设置列表项样式、列表项图片、和位置。

列 表

·style ：简写属性在一个声明中设置所有的列表属性 ·style-type ：属性设置列表项标记的类型

none ：无标记

disc ：默认。标记是实心圆 circle ：标记是空心圆 square ：标记是实心方块 decimal ：标记是数字

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, 等。)

·style-image ：属性使用图像来替换列表项的标记

URL ：图像的路径

none ：默认。无图形被显示

inherit ：规定应该从父元素继承 list-style-image 属性的值

·style-position ：属性设置在何处放置列表项标记

inside ：列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside ：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐

inherit ：规定应该从父元素继承 list-style-position 属性的值

Positioning面板就相当于对象放在一个层里来定位，它相当于HTML的DIV标记。你可以把定义看作为一个CSS定义的层。

定 位

·position ：属性规定元素的定位类型

absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 \以及 \属性进行规定

fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 \\以及 \属性进行规定

relative ：生成相对定位的元素，相对于其正常位置进行定位。因此，\会向元素的 LEFT 位置添加 20 像素

static ：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

inherit ：规定应该从父元素继承 position 属性的值

·visibility ：属性规定元素是否可见

visible ：默认值。元素是可见的 hidden ：元素是不可见的

collapse ：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 \

inherit ：规定应该从父元素继承 visibility 属性的值

·z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

auto ：默认。堆叠顺序与父元素相等 number ：设置元素的堆叠顺序

inherit ：规定应该从父元素继承 z-index 属性的值

·overflow ：属性规定当内容溢出元素框时发生的事情

visible ：默认值。内容不会被修剪，会呈现在元素框之外 hidden ：内容会被修剪，并且其余内容是不可见的

scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto ：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 inherit：规定应该从父元素继承 overflow 属性的值

·Placement：设置对象定位层的位置和大小。可以分别设置left（左边定位）、top（顶部定位）、width（宽）、height（高）相对应的CSS属性分别是“left; top; width; height”

·Clip：定义定位层的可视区域。区域外的部分为不可视区，为透明的。可以理解为在定位层上放一个矩形遮罩的效果。相对应的CSS属性是”clip”

本文来源：https://www.bwwdw.com/article/tlad.html