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是块级属性，只能用于

、、

•  

  • 、

    ~

    等标识符里。文本水平对齐可以控制文本的水平对齐，而且并不仅仅指文字内容，也包括设置图片、影像资料的对齐方式。

    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%。为了避免与用户的样式表之间的冲突，背景和颜色应该一起被指定。

• 、

  ~

  等标识符里。

  4、水平对齐：text-align

  语法：{text-align:left|right|center|justify}
  作用：在元素框中水平对齐文本
  说明：
  ·left 　 左对齐
  ·right 　右对齐
  ·center　居中
  ·justify 两端对齐，均匀分布
  注意：text-alight是块级属性，只能用于

  、、