标签:css、backgroud、text、padding、margin、border、position、选择器
css指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中 css常用属性 背景: background-color:background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 背景位置 background-position : % %; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/ 文本: text、word、direction(文本操作:通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。) text-indent(缩进文本) text-indent: em; text-align(水平对齐) text-align:center word-spacing(字间隔) word-spacing: px; text-decoration(文本装饰)text-decoration: none direction(文本方向) direction:rtl; 框模型:背景应用于由内容和内边距、边框组成的区域。 padding(内边距) padding-top:px; /*上边框留空白*/ padding-right:px; /*右边框留空白*/ padding-bottom:px; /*下边框留空白*/ padding-left:px; /*左边框留空白 margin(外边距) margin-top:px; /*上边界*/ margin-right:px; /*右边界值*/ margin-bottom:px; /*下边界值*/ margin-left:px; /*左边界值*/ border(边框)可设置值:宽度,样式,颜色 框线位置 border-top : px solid border-bottom : px solid border-left : px solid border-right : px solid 框线样式 solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ CSS文字属性: color : font-family : 宋体,sans-serif; /*文字字体*/ font-size : pt; /*文字大小*/ 文字对齐 text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 定位: position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 overflow 设置当元素的内容溢出其区域时发生的事情。 clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 vertical-align 设置元素的垂直对齐方式。 z-index 设置元素的堆叠顺序。 相对定位:注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。 position: relative; left: px; top: px; } 绝对定位:绝对定位使元素的位置与文档流无关,因此不占据空间。 position: absolute; left: px; top: px; } 选择器 元素选择器 为某个 HTML 元素,比如 p、h1、em、a设置样式 html {color:black;} h1 {color:blue;} h2 {color:silver;} 选择器分组 h2 元素和段落都有灰色。 h2, p {color:gray;} 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用,也可以与其他元素结合使用。 .important {color:red;} 只有段落显示为红色文本: p.important {color:red;} 假设 为 important 的所有元素都是粗体,而 为 warning 的所有元素为斜体,中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作: .important {font-weight:bold;} .warning {font-style:italic;} .important.warning {background:silver;} ID选择器 属性选择器 a[href] {color:red;}
标签:css、backgroud、text、padding、margin、border、position、选择器
原文地址:http://lxb994.blog.51cto.com/9805112/1739818