2024年4月8日发(作者:)

CSS 背景属性(Background)

属性

background

描述

在一个声明中设置所有的背景属性。

CSS

background:#FFF url() no-repeat 0 -68px;

background-image: url();

background-attachment: fixed;

background-color:#00ff00;

background-color:yellow;

background-image: url();

background-position:

t

op left right bottom;

background-repeat: repeat -x -y;

background-attachment设置背景图像是否固定或者随着页面

的其余部分滚动

background-color设置元素的背景颜色。

background-image设置元素的背景图像。

background-position

background-repeat

设置背景图像的开始位置。

设置是否及如何重复背景图像。

CSS 边框属性(Border 和 Outline)

属性

border

描述

在一个声明中设置所有的边框属性。

CSS

border:5px solid red;

border-bottom在一个声明中设置所有的下边框属性。 border-bottom:thick dotted #ff0000;

border-bottom-color

border-bottom-style

设置下边框的颜色。

设置下边框的样式。

border-bottom-color:#ff0000;

border-bottom-style:dotted;

border-bottom-width:15px;

border-color:red green blue pink;

border-bottom-width

border-color

border-left

设置下边框的宽度。

设置四条边框的颜色。

在一个声明中设置所有的左边框属性。 border-left:thick double #ff0000;

border-left-color

border-left-style

设置左边框的颜色。

设置左边框的样式。

border-left-color:#ff0000;

border-left-style:dotted;

border-left-width:15px; border-left-width

border-right

设置左边框的宽度。

在一个声明中设置所有的右边框属性。 border-right:thick double #ff0000;

border-right-color

border-right-style

设置右边框的颜色。

设置右边框的样式。

border-right-color:#ff0000;

border-right-style:dotted

border-right-width:15px;

border-style:dotted solid double dashed;

border-right-width

border-style

border-top

设置右边框的宽度。

设置四条边框的样式。

在一个声明中设置所有的上边框属性。 border-top:thick double #ff0000;

border-top-color

border-top-style

设置上边框的颜色。

设置上边框的样式。

border-top-color:#ff0000;

border-top-style:dotted;

border-top-width:15px;

border-width:thin medium thick 10px;

outline:#00FF00 dotted thick;

outline-color:#00ff00;

outline-style:dotted;

outline-width:5px;

border-top-width

border-width

outline

设置上边框的宽度。

设置四条边框的宽度。

在一个声明中设置所有的轮廓属性。

outline-color

outline-style

设置轮廓的颜色。

设置轮廓的样式。

outline-width

设置轮廓的宽度。

CSS 文本属性(Text)

属性

color

描述

设置文本的颜色。

CSS

color:#00ff00;

color:red;

color:rgb(0,0,255);

direction: ltr; direction: rtl;

letter-spacing:2px; letter-spacing:-2px;

line-height:90%; line-height:200%

text-align:center;

text-align:left;

text-align:right

Overline;

underline;

line-through;

blink

text-indent:50px

-

capitalize;

lowercase;

uppercase

-

Pre;

nowrap;

pre-wrap;

pre-line

word-spacing:25px;

direction规定文本的方向 / 书写方向。

letter-spacing

line-height

text-align

设置字符间距。

设置行高。

规定文本的水平对齐方式。

text-decoration

text-indent

规定添加到文本的装饰效果。

规定文本块首行的缩进。

规定添加到文本的阴影效果。 text-shadow

text-transform

unicode-bidi

white-space

控制文本的大小写。

设置文本方向。

规定如何处理元素中的空白。

word-spacing设置单词间距。

CSS 字体属性(Font)

属性

font

描述

在一个声明中设置所有字体属性。

CSS

font:italic bold 12px/20px arial,sans-serif;

font-family:"Times New Roman",Georgia,Serif;

font-size:200%;

font-size-adjust:0.58;

font-stretch:ultra-condensed;

font-style:italic;

font-style:oblique;

font-variant:small-caps;

font-weight:bold;

font-weight:900;

font-family

font-size

规定文本的字体系列。

规定文本的字体尺寸。

font-size-adjust

font-stretch

font-style

为元素规定 aspect 值。

收缩或拉伸当前的字体系列。

规定文本的字体样式。

font-variant

font-weight

规定文本的字体样式。

规定字体的粗细。

CSS 外边距属性(Margin)

属性

margin

描述

在一个声明中设置所有外边距属性。

CSS

margin:10px 5px 15px 20px;

margin-bottom:2cm;

margin-left:2cm;

margin-right:2cm;

margin-top:2cm;

margin-bottom

margin-left

设置元素的下外边距。

设置元素的左外边距。

margin-right

margin-top

设置元素的右外边距。

设置元素的上外边距。

CSS 内边距属性(Padding)

属性

padding

描述

在一个声明中设置所有内边距属性。

CSS

padding:10px 5px 15px 20px;

padding-bottom:2cm; padding-bottom设置元素的下内边距。

padding-left设置元素的左内边距。 padding-left:2cm;

padding-right:2cm;

padding-top:2cm;

padding-right

padding-top

设置元素的右内边距。

设置元素的上内边距。

CSS 列表属性(List)

属性

list-style

描述

在一个声明中设置所有的列表属性。

CSS

list-style:square inside url('/i/');

list-style-image:url("/i/");

square;

list-style-position:inside;

list-style-type:circle; lower-roman

upper-roman

list-style-image将图象设置为列表项标记。

list-style-position

list-style-type

设置列表项标记的放置位置。

设置列表项标记的类型。

marker-offset

内容生成(Generated Content)

属性

content

描述

与 :before 以及 :after使用,插入生成

CSS

content: " (" attr(href) ")";

counter-increment:section;

counter-reset:subsection;

quotes: '"' '"' "'" "'";

counter-increment

counter-reset

quotes

递增或递减一个或多个计数器。

创建或重置一个或多个计数器。

设置嵌套引用的引号类型。

CSS 尺寸属性(Dimension)

属性

height

描述

设置元素高度。

CSS

height:100px;

max-height:100px;

max-width:100px;

min-height:100px;

min-width:100px;

width:100px;

max-height

max-width

设置元素的最大高度。

设置元素的最大宽度。

min-height

min-width

width

设置元素的最小高度。

设置元素的最小宽度。

设置元素的宽度。

CSS 定位属性(Positioning)

属性

bottom

clear

clip

描述

设置定位元素下外边距边界与其包含块下边界之间的偏移。

规定元素的哪一侧不允许其他浮动元素。

剪裁绝对定位元素。

CSS

bottom:5px;

clear:both;

clip:rect(0px,60px,200px,0px);

cursor:wait; cursor:

pointer;

display:inline;

display:

block;

float:right;

left:100px;

overflow:scroll;

position:absolute;

cursor规定要显示的光标的类型(形状)。

display

float

left

规定元素应该生成的框的类型。

规定框是否应该浮动。

设置定位元素左外边距边界与其包含块左边界之间的偏移。

overflow

position

规定当内容溢出元素框时发生的事情。

规定元素的定位类型。

right

top

设置定位元素右外边距边界与其包含块右边界之间的偏移。

设置定位元素的上外边距边界与其包含块上边界之间的偏移。

right:5px;

position:absolute; top:5px;

vertical-align:text-top;

visibility:hidden;

z-index:-1;

vertical-align

visibility

z-index

设置元素的垂直对齐方式。

规定元素是否可见。

设置元素的堆叠顺序。

CSS 打印属性(Print)

属性

orphans

page-break-after

描述

设置当元素内部发生分页时必须在页面底部保留的最少行数。

设置元素后的分页行为。

CSS

page-break-after:always;

page-break-before:always;

page-break-inside:avoid;

page-break-before

page-break-inside

widows

设置元素前的分页行为。

设置元素内部的分页行为。

设置当元素内部发生分页时必须在页面顶部保留的最少行数。

CSS 表格属性(Table)

属性

border-collapse

border-spacing

caption-side

empty-cells

描述

规定是否合并表格边框。

规定相邻单元格边框之间的距离。

规定表格标题的位置。

规定是否显示表格中的空单元格上的边框和背景。

CSS

border-collapse:collapse;

border-spacing:10px 50px;

caption-side:bottom;

empty-cells:hide;

table-layout:fixed; table-layout设置用于表格的布局算法。

CSS 伪类(Pseudo-classes)

属性

:active

描述

向被激活的元素添加样式。

向拥有键盘输入焦点的元素添加样式。

CSS

a:active {color: #0000FF}

a:focus {color: #00FF00} :focus

:hover

:link

当鼠标悬浮在元素上方时,向元素添加样式。 a:hover {color: #FF00FF}

向未被访问的链接添加样式。 a:link {color: #FF0000}

a:visited {color: #00FF00}

first-child em{font-weight:bold}

q:lang(no) {quotes: "~" "~"}

:visited向已被访问的链接添加样式。

:first-child

:lang

向元素的第一个子元素添加样式。

向带有指定 lang 属性的元素添加样式。

CSS 伪元素(Pseudo elements)

属性

:first-letter

描述

向文本的第一个字母添加特殊样式。

向文本的首行添加特殊样式。

在元素之前添加内容。

在元素之后添加内容。

CSS

p:first-letter{color:#ff0000; font-size:xx-large;}

p:first-letter{color:#ff0000;font-size:xx-large;}

h1:before{content:url();}

h1:after{content:url();}

:first-line

:before

:after