CSS 背景属性(Background)
属性 | 描述 | CSS |
background | 在一个声明中设置所有的背景属性。 | background:#FFF url(bgimage.gif) no-repeat 0 -68px; |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 | background-image: url(bgimage.gif); background-attachment: fixed; |
background-color | 设置元素的背景颜。 | background-color:#00ff00; background-color:yellow; |
background-image | 设置元素的背景图像。 | background-image: url(bgimage.gif); |
background-position | 设置背景图像的开始位置。 | background-position: top left right bottom; |
background-repeat | 设置是否及如何重复背景图像。 | background-repeat: repeat -x -y; |
CSS 边框属性(Border 和 Outline)
属性 | 描述 | CSS |
border | 在一个声明中设置所有的边框属性。 | border:5px solid red; |
border-bottom | 在一个声明中设置所有的下边框属性。 | border-bottom:thick dotted #ff0000; |
border-bottom-color | 设置下边框的颜。 | border-bottom-color:#ff0000; |
border-bottom-style | 设置下边框的样式。 | border-bottom-style:dotted; |
border-bottom-width | 设置下边框的宽度。 | border-bottom-width:15px; |
border-color | 设置四条边框的颜。 | border-color:red green blue pink; |
border-left | 在一个声明中设置所有的左边框属性。 | border-left:thick double #ff0000; |
border-left-color | 设置左边框的颜。 | border-left-color:#ff0000; |
border-left-style | 设置左边框的样式。 | border-left-style:dotted; |
border-left-width | 设置左边框的宽度。 | border-left-width:15px; |
border-right | 在一个声明中设置所有的右边框属性。 | border-right:thick double #ff0000; |
border-right-color | 设置右边框的颜。 | border-right-color:#ff0000; |
border-right-style | 设置右边框的样式。 | border-right-style:dotted |
border-right-width | 设置右边框的宽度。 | border-right-width:15px; |
border-style | 设置四条边框的样式。 | border-style:dotted solid double dashed; |
border-top | 在一个声明中设置所有的上边框属性。 | border-top:thick double #ff0000; |
border-top-color | 设置上边框的颜。 | border-top-color:#ff0000; |
border-top-style | 设置上边框的样式。 | border-top-style:dotted; |
border-top-width | 设置上边框的宽度。 | border-top-width:15px; |
border-width | 设置四条边框的宽度。 | border-width:thin medium thick 10px; |
outline | 在一个声明中设置所有的轮廓属性。 | outline:#00FF00 dotted thick; |
outline-color | 设置轮廓的颜。 | outline-color:#00ff00; |
outline-style | 设置轮廓的样式。 | outline-style:dotted; |
outline-width | 设置轮廓的宽度。 | outline-width:5px; |
CSS 文本属性(Text)
属性 | 描述 | CSS |
color | 设置文本的颜。 | color:#00ff00; color:red; color:rgb(0,0,255); |
direction | 规定文本的方向 / 书写方向。 | direction: ltr; direction: rtl; |
letter-spacing | 设置字符间距。 | letter-spacing:2px; letter-spacing:-2px; |
line-height | 设置行高。 | line-height:90%; line-height:200% |
text-align | 规定文本的水平对齐方式。 | text-align:center; text-align:left; text-align:right |
text-decoration | 规定添加到文本的装饰效果。 | Overline; underline; line-through; blink |
text-indent | 规定文本块首行的缩进。 | text-indent:50px |
text-shadow | 规定添加到文本的阴影效果。 | - |
text-transform | 控制文本的大小写。 | capitalize; lowercase; uppercase |
unicode-bidi | 设置文本方向。 | - |
white-space | 规定如何处理元素中的空白。 | Pre; nowrap; pre-wrap; pre-line |
word-spacing | 设置单词间距。 | word-spacing:25px; |
CSS 字体属性(Font)
属性 | 描述 | CSS |
font | 在一个声明中设置所有字体属性。 | font:italic bold 12px/20px arial,sans-serif; |
font-family | 规定文本的字体系列。 | font-family:"Times New Roman",Georgia,Serif; |
font-size | 规定文本的字体尺寸。 | font-size:200%; |
font-size-adjust | 为元素规定 aspect 值。 | font-size-adjust:0.58; |
font-stretch | 收缩或拉伸当前的字体系列。 | font-stretch:ultra-condensed; |
font-style | 规定文本的字体样式。 | font-style:italic; font-style:oblique; |
font-variant | 规定文本的字体样式。 | font-variant:small-caps; |
font-weight | 规定字体的粗细。 | font-weight:bold; font-weight:900; |
CSS 外边距属性(Margin)
属性 | 描述 | CSS |
margin | 在一个声明中设置所有外边距属性。 | margin:10px 5px 15px 20px; |
margin-bottom | 设置元素的下外边距。 | margin-bottom:2cm; |
margin-left | 设置元素的左外边距。 | margin-left:2cm; |
margin-right | 设置元素的右外边距。 | margin-right:2cm; |
margin-top | 设置元素的上外边距。 | margin-top:2cm; |
CSS 内边距属性(Padding)
属性 | 描述 | CSS |
padding | 在一个声明中设置所有内边距属性。 | padding:10px 5px 15px 20px; |
padding-bottom | 设置元素的下内边距。 | padding-bottom:2cm; |
padding-left | 设置元素的左内边距。 | padding-left:2cm; |
padding-right | 设置元素的右内边距。 | padding-right:2cm; |
padding-top | 设置元素的上内边距。 | padding-top:2cm; |
CSS 列表属性(List)
属性 | 描述 | CSS |
list-style | 在一个声明中设置所有的列表属性。 | list-style:square inside url('/i/arrow.gif'); |
list-style-image | 将图象设置为列表项标记。 | list-style-image:url("/i/arrow.gif"); \ square; |
list-style-position | 设置列表项标记的放置位置。 | list-style-position:inside; |
list-style-type | 设置列表项标记的类型。 | list-style-type:circle; \ lower-roman \ upper-roman |
marker-offset | ||
内容生成(Generated Content)
属性 | 描述 | CSS |
content | 与 :before 以及 :after使用,插入生成 | content: " (" attr(href) ")"; |
counter-increment | 递增或递减一个或多个计数器。 | counter-increment:section; |
counter-reset | 创建或重置一个或多个计数器。 | counter-reset:subsection; |
quotes | 设置嵌套引用的引号类型。 | quotes: '"' '"' "'" "'"; |
CSS 尺寸属性(Dimension)
属性 | 描述 | CSS |
height | 设置元素高度。 | height:100px; |
max-height | 设置元素的最大高度。 | max-height:100px; |
max-width | 设置元素的最大宽度。 | max-width:100px; |
min-height | 设置元素的最小高度。 | min-height:100px; |
min-width | 设置元素的最小宽度。 | min-width:100px; |
width | 设置元素的宽度。 | width:100px; |
CSS 定位属性(Positioning)
属性 | 描述 | CSS |
bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移。 | bottom:5px; |
clear | 规定元素的哪一侧不允许其他浮动元素。 | clear:both; |
clip | 剪裁绝对定位元素。 | clip:rect(0px,60px,200px,0px); |
cursor | 规定要显示的光标的类型(形状)。 | cursor:wait; cursor: pointer; |
display | 规定元素应该生成的框的类型。 | display:inline; display:block; |
float | 规定框是否应该浮动。 | float:right; |
left | 设置定位元素左外边距边界与其包含块左边界之间的偏移。 | left:100px; |
overflow | 规定当内容溢出元素框时发生的事情。 | overflow:scroll; |
position | 规定元素的定位类型。 | position:absolute; |
right | 设置定位元素右外边距边界与其包含块右边界之间的偏移。 | right:5px; |
top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 | position:absolute; top:5px; |
vertical-align | 设置元素的垂直对齐方式。 | vertical-align:text-top; |
visibility | 规定元素是否可见。 | visibility:hidden; |
z-index | 设置元素的堆叠顺序。 | z-index:-1; |
active下载CSS 打印属性(Print)
属性 | 描述 | CSS |
orphans | 设置当元素内部发生分页时必须在页面底部保留的最少行数。 | |
page-break-after | 设置元素后的分页行为。 | page-break-after:always; |
page-break-before | 设置元素前的分页行为。 | page-break-before:always; |
page-break-inside | 设置元素内部的分页行为。 | page-break-inside:avoid; |
widows | 设置当元素内部发生分页时必须在页面顶部保留的最少行数。 | |
CSS 表格属性(Table)
属性 | 描述 | CSS |
border-collapse | 规定是否合并表格边框。 | border-collapse:collapse; |
border-spacing | 规定相邻单元格边框之间的距离。 | border-spacing:10px 50px; |
caption-side | 规定表格标题的位置。 | caption-side:bottom; |
empty-cells | 规定是否显示表格中的空单元格上的边框和背景。 | empty-cells:hide; |
table-layout | 设置用于表格的布局算法。 | table-layout:fixed; |
CSS 伪类(Pseudo-classes)
属性 | 描述 | CSS |
:active | 向被激活的元素添加样式。 | a:active {color: #0000FF} |
:focus | 向拥有键盘输入焦点的元素添加样式。 | a:focus {color: #00FF00} |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | a:hover {color: #FF00FF} |
:link | 向未被访问的链接添加样式。 | a:link {color: #FF0000} |
:visited | 向已被访问的链接添加样式。 | a:visited {color: #00FF00} |
:first-child | 向元素的第一个子元素添加样式。 | first-child em{font-weight:bold} |
:lang | 向带有指定 lang 属性的元素添加样式。 | q:lang(no) {quotes: "~" "~"} |
CSS 伪元素(Pseudo elements)
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论