css+div

 

 

四、文本样式   序号 中文说明 标记语法 备注 1 行 间 距 {line-height:数值|inherit|normal;}   2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}   3 段首空格 {text-indent:数值|inherit}   4 水平对齐 {text-align:left|right|center|justify}   5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}   6 书写方式 {writing-mode:lr-tb|tb-rl}         1．行 间 距：line-height   语法：{line-height:数值|inherit|normal} 作用：行与行之间的距离 说明：行间距离取值 ·不带单位的数字：以1为基数，相当于比例关系的100% ·带长度单位的数字：以具体的单位为准 ·比例关系 注意：行距是指上下两行基准线之间的垂直距离。一般地说，英文五线格练习本，从上往下数的第三条横线就是计算机所认为的该行的基准线。如果文字字体很大，而行距相对较小的话，可能会发生上下两行文字互相重叠的现象。   2、文本修饰：text-decoration   语法：{text-decoration:inherit|none|underline|overline|line-through|blink} 作用：文本修饰，用于控制文本元素所用的效果，特别适用于引人注意的说明，警告等文本效果。 说明： ·inherit 　　 继承  ·none 　　　　无文本修饰，缺省设置 ·underline　　下划线 ·overline　　 上划线 ·line-through 删除线 ·blink　　　　闪烁 注意：同一语句中可以组合多个关键字。 例子：下划线 上划线 删除线 闪烁 使用下列语句可以使连接不再有下划线:A:link,A:visited,A:active { text-decoration: none }   3．段首空格：text-indent   语法：{text-indent:数值|inherit} 说明：取值范围 ·带长度单位的数字 ·比例关系 注意：文本缩进可以使文本在相对默认值较窄的区域里显示，主要用于中文板式的首行缩进，或是为大段的引用文本和备注做成缩进的格式。在使用比例关系的时候，有人会认为浏览器默认的比例是相对段落的宽度而言的，其实事实并非如此，整个浏览器的窗口才是浏览器所默认的参照物。另外，text-indent是块级属性，只能用于 、、 、 ~ 等标识符里。   4、水平对齐：text-align 语法：{text-align:left|right|center|justify} 作用：在元素框中水平对齐文本 说明： ·left 　 左对齐 ·right 　右对齐 ·center　居中 ·justify 两端对齐，均匀分布 注意：text-alight是块级属性，只能用于 、、 、 ~ 等标识符里。文本水平对齐可以控制文本的水平对齐，而且并不仅仅指文字内容，也包括设置图片、影像资料的对齐方式。   5．垂直对齐：vertical-align 语法：{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super} 说明： ·inherit 继承 ·top 顶对齐 ·bottom 底对齐 ·text-top 相对文本顶对齐 ·text-bottom 相对文本底对齐 ·baseline 基准线对齐 ·middle 中心对齐 ·sub 以下标的形式显示 ·super 以上标的形式显示 注意：文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在网页里垂直对齐。比如说，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格来衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。 例子：105　105 　105 105 6. 书写方式：writing-mode 语法：{writing-mode:lr-tb|tb-rl} 作用：文字的书写方式 说明：  ·lr-tb 从左向左，从上往下  ·tb-rl: 从上往下，从右向左 五、背景样式 序号 中文说明 标记语法 备注 1 背景颜色 {background-color:数值}   2 背景图片 {background-image: url(URL)|none}   3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}   4 背景固定 {background-attachment:fixed|scroll}   5 背景定位 {background-position:数值|top|bottom|left|right|center}   6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}     1．背景颜色：background-color 语法：{background-color:数值} 说明：参数取值和颜色属性一样 注意：在HTML当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了，而且对象的范围很广，可以是一段文字，也可以只是一个单词或一个字母。  例子：给部分文字加背景颜色给部分文字加背景颜色 表格背影颜色：style="background-color:red"   2．背景图片：background-image 语法：{background-image: url(URL)|none} 说明： URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径，将什么也不显示。 例子：给部分文字加背景图片 .imgbgstyle { background-image: url(logo.gif)} 3．背景重复：background-repeat 语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 作用：背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片 说明：参数取值范围： ·inherit 继承  ·no-repeat 不重复平铺背景图片 ·repeat ·repeat-x 使图片只在水平方向上平铺  ·repeat-y 使图片只在垂直方向上平铺  注意：如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。 4．背景固定：background-attachment 语法：{background-attachment:fixed|scroll} 说明：参数取值范围 ·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动  ·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动  注意：背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。  例子：使背景图案不随文字“滚动”的CSS BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed } 5．背景定位：background-position 语法：{background-position:数值|top|bottom|left|right|center} 作用：背景定位用于控制背景图片在网页中显示的位置。  说明：参数取值范围 ·带长度单位的数字参数  ·top：相对前景对象顶对齐  ·bottom：相对前景对象底对齐  ·left：相对前景对象左对齐  ·right：相对前景对象右对齐  ·center：相对前景对象中心对齐  ·比例关系 关键字解释如下: top left = left top = 0% 0%  top = top center = center top = 50% 0%  right top = top right = 100% 0%  left = left center = center left = 0% 50%  center = center center = 50% 50%  right = right center = center right = 100% 50%  bottom left = left bottom = 0% 100%  bottom = bottom center = center bottom = 50% 100%  bottom right = right bottom = 100% 100%  注意：参数中的center如果用于另外一个参数的前面，表示水平居中；如果用于另外一个参数的后面，表示垂直居中。 6. 背景样式：background 语法：{background:背景颜色|背景图象|背景重复|背景附件|背景位置} 作用：背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明: 例子： BODY { background: white url(http://www.yidi.net/logo.gif) } BLOCKQUOTE { background: #7fffd4 } P { background: url(../backgrounds/pawn.png) #f0f8ff fixed } TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right } 注意：当一个值未被指定时，将接受其初始值。例如，在上述的前三条规则，背景位置属性将被设置为0% 0%。为了避免与用户的样式表之间的冲突，背景和颜色应该一起被指定。