一 .背景
1 . background-color 背景色
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认。背景颜色为透明。 |
2 . background-image 背景图像
| 值 | 描述 |
|---|---|
| none | 默认值。不显示背景图像。 |
| url('URL') | 指向图像的路径。 |
3 . background-repeat 背景重复
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
4 . background-position 背景定位
| 值 | 描述 |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。 |
5 . background-attachment 背景关联
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
6 .CSS3背景
6.1 background-size 规定背景图片的尺寸。
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
6.2 background-origin 规定背景图片的定位区域。
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对于内边距框来定位。 |
| border-box | 背景图像相对于边框盒来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
6.3 background-clip 规定背景的绘制区域。
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到边框盒。 |
| padding-box | 背景被裁剪到内边距框。 |
| content-box | 背景被裁剪到内容框。 |
二 .文本
1 . text-indent缩进文本
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。可为负值。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
2 .text-align 水平对齐
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
vertical-align 设置元素的垂直对齐方式
top/bottom/middle 此属性除了table支持的比较完善其他标签支持的并不是太好，不建议使用此属性
一般用于做表格，比如课程表
3 .word-spacing 字（单词）间隔
| 值 | 描述 |
|---|---|
| normal | 默认。定义单词间的标准空间。其默认值与设置值为 0 是一样的。 |
| length | 定义单词间的固定空间。属性接受一个正长度值或负长度值。 例:word-spacing: -0.5em; |
4 .letter-spacing 字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
| 值 | 描述 |
|---|---|
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（允许使用负值）。 |
5 .text-transform 字符转换
| 值 | 描述 |
|---|---|
| none 默认 | 定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 完成这个修改。
6 . text-decoration 文本装饰
| 值 | 描述 |
|---|---|
| none 默认 | 定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
7 .direction 文本方向
| 值 | 描述 |
|---|---|
| ltr | 默认。文本方向从左到右。 |
| rtl | 文本方向从右到左。 |
注释：对于行内元素，只有当 [unicode-bidi 属性]设置为 embed 或 bidi-override 时才会应用 direction 属性。
8 .color 用于设置文本的颜色
可以是名称的关键字 red;
可以是GRB数字，color：#ffffff
可以写成RGB（a,a,a）;
reba(b,b,b,a)；a表示透明度 范围0~1
9 .line-height 行间距
| 值 | 描述 |
|---|---|
| normal | 浏览器默认为正常行距 |
| length | 由浮点数字和耽误标识符组成的长度值，允许为负值。 设置数值越大，文本段落中间的行距越大。 |
10 .CSS3 文本效果
10.1 text-shadow 向文本添加阴影。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
10.2 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word | 在长单词或 URL 地址内部进行换行。 |
三.字体
1 .font-family 指定字体系列
在safari中不好用
mac系统下默认 微软雅黑
win默认宋体
在win下字体的读取时从客户端读取的
font-face 从服务器端加载字体,主要针对win系统
2 .font-style 字体风格
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
3 .font-variant 字体变形
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
4 .font-weight 字体加粗
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100~900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
5 .font-size 字体大小
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
在网页中一般最小的是12px；一般默认是16px。
CSS3字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
四.列表
1 .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, 等。) |
2 .list-style-position 设置在何处放置列表项标记。
| 值 | 描述 |
|---|---|
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
3 .ist-style-image 使用图像来替换列表项的标记。 默认none。
五.表格
| 值 | 描述 |
|---|---|
| border-collapse | 设置是否把表格边框合并为单一的边框。 |
| border-spacing | 设置分隔单元格边框的距离。 |
| caption-side | 设置表格标题的位置。 |
| empty-cells | 设置是否显示表格中的空单元格。 |
| table-layout | 设置显示单元、行和列的算法。 |
六.CSS3边框
1 .box-shadow 向方框添加一个或多个阴影。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
2 .border-radius 设置所有四个 border-*-radius 属性的简写属性。
| 值 | 描述 |
|---|---|
| length | 定义圆角的形状。 |
| % | 以百分比定义圆角的形状。 |
3 .border-image 设置所有 border-image-* 属性的简写属性。
| 值 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径。url() |
| border-image-slice | 图片边框向内偏移。 |
| border-image-width | 图片边框的宽度。 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
Una_Bella
辛苦劳作 转载请注明出处 O(∩_∩)O~
关于学习IT的 网址页(更新中...)
网友评论