CSS常用样式

文字样式

font-family 字体类型 font-size 字体大小 font-weight 字体粗细 font-style 字体斜体 color 颜色

属性	说明

1️⃣字体类型font-family

font-family:字体名;

说明：

字体名指的是“微软雅黑”、“宋体”、“Times New Roman”等。

举例：font-family:微软雅黑;

2️⃣ 字体大小font-size

语法：

font-size:像素值;

举例：font-size:15px;

3️⃣ 字体颜色color

语法：

color:关键字/颜色值;

说明：

颜色的表示方式有四种：

• a. rgb 模式 r 红色 g 绿色 b 蓝色 红绿蓝三原色可以组成n多颜色 rgb取值范围（0-255）
• b. 直接写颜色的名称
• c. 十六进制 #9f0000 （最常用）
• d. rgba(红色，绿，蓝，透明度) a的取值范围0-1 0表示完全透明 1 表示不透明

举例：color:blue;

4️⃣ 字体粗细font-weight

语法：

font-weight:取值;

说明：

对于中文网页来说，font-weight属性一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）。

举例：font-weight:bold;

5️⃣ 字体斜体font-style

在CSS中，使用font-style属性来定义字体倾斜效果

语法：

font-style:取值;

说明：

font-style属性的取值如下表：

normal 默认值，正常体 italic 斜体，这是一个属性 oblique 将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique

font-style属性值	说明

文本样式

一、CSS段落属性

text-decoration 下划线、删除线、顶划线 text-transform 文本大小写 font-varient 将英文文本转换为“小型”大写字母 text-index 段落首行缩进 text-align 文本水平对齐方式 line-height 行高 letter-spacing 字距 word-spacing 词距

属性	说明

1、text-decoration

在CSS中，使用text-decoration属性来定义字体下划线、删除线和顶划线。

语法：

text-decoration:属性值;

说明：

text-decoration属性取值如下表：

none 默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式 underline 下划线 line-through 删除线 overline 顶划线

属性值	说明

2、text-transform

在CSS中，使用text-transform属性来转换文本的大小写，这个是针对英文而言，因为中文不存在大小写之分。

语法：

text-transform:属性值;

说明：

text-transform属性取值如下表：

none 默认值，无转换发生 uppercase 转换成大写 lowercase 转换成小写 capitalize 将每个英文单词的首字母转换成大写，其余无转换发生

text-transform属性值	说明

3、font-variant

使用font-variant属性只有一个作用：把文本设置成小型大写字母，这也是针对英文而言，因为中文不存在大小写之分。

语法：

font-variant：normal/small-caps;

说明：

font-variant属性取值如下表：

normal 默认值，正常效果 small-caps 小型大写字母的字体

font-variant属性值	说明

4、text-indent

我们可以使用CSS的text-indent属性来控制文本首行的缩进。

语法：

text-indent:像素值;

说明：

在CSS初学阶段，主要使用像素作单位

5、text-align

在CSS中，使用text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。

语法：

text-align:属性值;

说明：

text-align属性取值如下表：

left 默认值，左对齐 center 居中对齐 right 右对齐

text-align属性	说明

6、line-height

line-height属性指的是行高，而不是行间距。

语法：

line-height:像素值;

7、letter-spacing

语法：

letter-spacing:像素值;

说明：

• letter-spacing控制的是字间距，每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”！

• 默认情况下，letter-spacing几乎都用不上，直接采用浏览器默认样式就可以了。

8、word-spacing

语法：

word-spacing:像素值;

说明：

定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

边框样式

一、边框属性

要设置一个元素的边框必须要设置以下3个方面：

• （1）border-width边框的宽度；
• （2）border-style边框的外观（实线，或者虚线）；
• （3）border-color边框的颜色；

1、border-width

语法：

border-width:像素值;

2、border-style

border-style属性用于设置边框的外观，例如实线边框和虚线边框。

语法：

border-style:属性值;

说明：

❗ 虽然border-style属性值很多，但是大部分我们都用不上。一般情况下，我们用到solid和dashed这两个属性值就够了

3、border-color

border-color属性用来定义边框的颜色。

语法：

border-color:颜色值

二、边框属性简洁写法

设置一个元素的边框就要设置3个属性：border-width、border-style和border-color。如下：

border-width:1px;
border-style:solid;
border-color:Red;

这种写法费时费力，导致代码量多。因此我们边框CSS样式有一个简洁的写法：

border:1px solid Red;

背景样式

一、背景颜色

1、background-color属性

在CSS中，使用background-color属性来定义元素的背景颜色。

语法：

background-color:颜色值;

二、背景图像

背景图像属性如下：

background-image 定义背景图像的路径 background-repeat 定义背景图像显示方式，例如纵向平铺、横向平铺 background-position 定义背景图像在元素哪个位置 background-attachment 定义背景图像是否随内容而滚动

属性	说明

1、background-image属性

在CSS中，使用background-image属性来定义元素的背景图片。

语法：

background-image:url("图像地址");

2、background-repeat属性

在CSS中，使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。

语法：

background-repeat:取值;

说明：

background-repeat属性取值如下：

no-repeat 表示不平铺 repeat 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺 repeat-x 表示在水平方向（x轴）平铺 repeat-y 表示在垂直方向（y轴）平铺

属性值	说明

3、background-position属性

背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。

语法：

background-positon:像素值/关键字;

说明：

语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。

1️⃣ 取值为像素值

x（数值）：设置网页的横向位置，单位为px

y（数值）：设置网页的纵向位置，单位为px

2️⃣ 关键字

top left 左上 top center 靠上居中 top right 右上 left center 靠左居中 center center 正中 right center 靠右居中 bottom left 左下 bottom center 靠下居中 bottom right 右下

属性值	说明

4、background-attachment属性

在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。

语法：

background-attachment:scroll/fixed;

说明：

background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。

内容整理自网络，侵删。