CSS 样式二

Posted 2020-07-04 尼农小道

CSS文本样式

• text-align：设置文本的对齐方式

取值：

left 向左对齐

right：向右对齐

center：居中对齐

• text-indent：设置文本的首行缩进

    例如，字体设为12px，首行缩进另个字，24px。

• text-decoration：设置文本的装饰线

        取值：

        none 不设置文本装饰线

        underline：设置下划线

        overline：上划线

        line-through：中划线

• text-transform:（主要应用于英文文本）

    取值：

capitalize：将首字母转换大写

uppercase：将所有的字母转换大写

lowercase：将所有的字母转化小写

• letter-spacing：如果是汉字，设置字与字之间的间距

                如果是英文文本，设置，字母与字母的间距

• word-spacing：设置词间距（主要应用英文）
• line-height：设置文本的行高

结构代码：

示例2：

样式代码：

结构代码：

CSS列表样式

list-style:设置列表的符号类型

取值：

不设置符号

none

无序列表的项目符号：

square：实心方块

circle：空心原点

disc 实心原点

有序列表的项目符号

decimal                阿拉伯数字

lower-alpha            小写字母

upper-alpha            大写字母

lower-roman        小写罗马数字

upper-roman        大写罗马数字

 

list-style-position：项目符号的位置

        inside（在li标签的内部）

        outside（在li标签的外部）

 

list-style-image：将项目符号用背景图片表示

        书写规则：list-style-image：url（背景图片的路径URL）

简写形式：list-style:square inside url(arrow.gif);

 

示例1：

样式代码：

结构代码：

CSS背景样式

background-color：设置背景颜色：red #ff0000，rgb（100,120,200）

background-image：url（背景图片的路径url）

background-repeat：

no-repeat：不平铺

repeat：x轴和y轴平铺

repeat-x：在x轴上平铺

repeat-y：在y轴上平铺

background-position:设置图片的位置;

    数值表示法，x px，ypx 只写其中一种，表示另外一个方向上未设置的值，跟这已经设置的这个相同。

单词表示法：

    x方向：left center right，

    y轴方向：top（顶部对齐） center（居中） bottom（底部）

    百分比表示法：50%，50%

background-position:left center;

设置图片x轴向左对齐

设置图片y轴向居中对齐

代码：