CSS简解

362308229 贡献于2013-09-05

作者 User  创建于2010-12-21 01:52:00   修改者User  修改于2010-12-29 06:21:00字数4103

文档摘要:CSS简解
关键词:

 一、字体 1 字体样式 {font: font-weight font-size font-family} 2 字体类型 {font-family:"字体1","字体2","字体3",...} 3 字体大小 {font-size:数值、inherit} 4 字体粗细 {font-weight:100-900、bold、bolder、lighter、normal;} 5 字体颜色 {color:数值;} 6 字体行高 {line-height:数值、inherit、normal;} 7 字 间 距 {letter-spacing:数值、inherit、normal} 8 单词间距 {word-spacing:数值、inherit、normal} 二、标记语法 (一)标记语法 1 行 间 距 {line-height:数值、inherit、normal;} 2 文本修饰 {text-decoration:inherit、none、underline } 3 段首空格 {text-indent:数值、inherit} 4 水平对齐 {text-align:left、right、center、justify} 5 垂直对齐 {vertical-align:inherit、top、bottom、middle } (二)标记语法 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url(URL)|none} 3 背景定位 {background:url(URL) center center no-repeat; } (三)标记语法 1 边界留白 {margin:margin-top margin-right margin-bottom margin-left} 2 补  白 {padding:padding-top padding-right padding-bottom padding-left} 3 边框宽度 {border-width: border-top-width 等}  4 边框颜色 {border-color:#000000} 数值:分别代表top、right、bottom、left颜色值 5 边框风格 {border-style:none、hidden、inherit|、dashed、solid、double } 6 边  框 {{border-top:border-top-width 等 } 7 宽  度 {width:长度、百分比、 auto} 8 高  度 {height:数值、|auto} 9 漂  浮 {float:left、right、none} 10 清  除 {clear:none|left|right|both} 分类列表 序号 (四)标记语法 1 控制显示 {display:none、block、inline } 2 控制空白 {white-space:normal|pre|nowarp} 3 符号列表 {list-style-type:disc、circle|square|decimal、lower-roman、upper-roman、等} 4 图形列表 {list-style-image:URL} 5 鼠标形状 {cursor:hand、crosshair、text|wait、move、help等} css去掉下划线   下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。   实现方法很简单,在源代码的和之间加上如下的CSS语法控制:    其中:   a:link 指正常的未被访问过的链接;   a:active 指正在点的链接;   a:hover 指鼠标在链接上;   a:visited 指已经访问过的链接;   text-decoration是文字修饰效果的意思;   none参数表示超链接文字不显示下划线;   underline参数表示超链接的文字有下划线 (例如) 定义的顺序是link,visited,active,hover,为了页面的美观,一般只用link和hover就可以了 单独控制某样式字体 例如:
控制区域字体链接样式
样式设置如: CSS定位属性Position。 1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。 一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。 #div-1 {position:static;} 2. position:relative 如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】 #div-1 { position:relative; top:20px; left:-40px; } 3. position:absolute 当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。 #div-1a { position:absolute; top:0; right:0; width:200px; } 4. 浮动 对于可变高度的列来说,绝对定位就不起作用了,以下是另外一个方案。 我们可以浮动一个元素,使它移动到左边/右边,并且是文本环绕着它。这主要用于图像,但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。 #div-1a { float:left; width:200px; } 两个层的左右并列关系 如:  
样式设置为: CSS边框属性 边框风格属性(border-style) 这个属性用来设定上下左右边框的风格,它的值如下: · none (没有边框,无论边框宽度设为多大) · dotted (点线式边框) · dashed (破折线式边框) · solid (直线式边框) · double (双线式边框) 边框属性(border) 这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下: .d1 {border:5px solid gray;} 单边边框属性 上下左右四个边框不但可以统一设定,也可以分开设定。 设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。 设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。 设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。 设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。 CSS边距属性 边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。 左边距属性(margin-left) 这个属性用来设定左边距的宽度。示例如下: .d1{margin-left:1px} 右边距属性(margin-right) 这个属性用来设定右边距的宽度。示例如下: .d1 {margin-right:1px} 上边距属性(margin-top) .d1 {margin-top:1px} 下边距属性(margin-bottom) .d1{margin-bottom:1px} 边距属性(margin) 这个属性是设定边距宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右边距属性。 你可以为上下左右边距设置相同的宽度。示例入下: .d1 {margin:1px} 你也可以分别设置边距,顺序是上,右,下,左。示例如下: .d1 {margin:1px 2px 3px 4px} 上面的代码表示,上边距为1px,右边距为2px,下边距为3px,左边距为4px。 Table与DIV的区别 Table表格的写法

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 2 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档