CSS常用的样式规则

1 文本样式属性

属性	说明
font-style	字体样式（粗体、斜体…）
font-size	字号
font-family	字体（宋体、楷体…）
font-weight	文字的粗细
color	文本的颜色
text-align	文本对齐
line-height	文字行高
word-spacing	单词间距
letter-spacing	字母间距
text-decoration	文本样式

以《静夜思》这首诗为例，它的.html文件中代码如下：

    <p class="c1">静夜思</p>
    <p class="c2">床前明月光，</p>
    <p class="c2">疑是地上霜。</p>
    <p class="c2">举头望明月，</p>
    <p class="c2">低头思故乡。</p>

CSS样式如下：

    .c1{
        /* 字体样式 斜体*/
        font-style: italic;
        /* 字号 50像素 */
        font-size: 50px;
        /* 字体 楷体 */
        font-family: 楷体;
        /* 文字粗细 900 */
        font-weight: 900;
        /* 颜色 紫色 */
        color: blueviolet;
        /* 文本对齐 居中对齐 */
        text-align: center;
    }
        .c2{
        /* 字体样式 正常*/
        font-style: normal;
        /* 字号 30像素 */
        font-size: 30px;
        /* 字体 宋体 */
        font-family: 宋体;
        /* 文字粗细 600 */
        font-weight: 600;
        /* 文本颜色 橘色 */
        color: chocolate;
        /* 文本对齐方式 居中对齐 */
        text-align: center;
    }

在.html文件中写入以下代码：

<p>you can't have a better tomorrow if you don't thinking about yesterday.</p>

CSS样式如下：

    p{
        /* 单词间距 10像素 */
        word-spacing: 10px;
        /* 字母间距 2像素 */
        letter-spacing: 2px;
        /* 行高 1.5 */
        line-height: 1.5;
        /* 文本样式 */
        text-decoration: overline;
    }

2 背景样式属性background

属性	说明
background-color	设置背景颜色
background-image	设置背景图像
background-repeat	设置一个指定的图像如何被重复，可取值repeat-x（图片横向重复）、 repeat（图片全屏重复）、 no-repeat（图片不重复）、repeat-y（图片纵向重复）

例如，为body写入以下CSS样式：

body{
    /* 设置背景为橙色 */
    background-color: orange;
    /* 设置背景图片 */
    background-image: url(../imges/jumao.jfif);
    /* 背景图片不重复显示 */
    background-repeat: no-repeat;
}

3 列表样式属性list

属性	说明
list-style-position	设置项目符号和文本的位置，取值如下： outside：默认值，列表项目符号放置在文本以外，且环绕文本不根据符号对齐； inside： 列表项目符号放置在文本以内，且环绕文本根据符号对齐； inherit：规定应该从父元素继承list-style-position 属性的值
list-style-image	指定项目符号的图像（可用来更换logo），值为url或none
list-style-type	指定项目符号的类型，值可以取disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none
list-style	指定列表样式，可以依次设置list-style-type、list-style-position、list-style-image，顺序无要求

3.1 标记框在主体块框中的位置list-style-position

该属性有inside、outside和inherit属性值，inside列表项目符号放置在文本以内，且环绕文本根据符号对齐，例如：

    <p>猫猫类型</p>
    <ul>
        <li>狸花猫</li>
        <li>布偶猫</li>
        <li>暹罗猫</li>
        <li>波斯猫</li>
    </ul>

li{
    list-style-position: inside;
}

li{
    list-style-position: outside;
}

3.2 列表元素标记图片list-style-image

这个属性可以更改项目符号为图片，可用于更换logo

li{
    list-style-image: url(../imges/beer.ico);
}

3.3 项目符号类型list-style-type

指定项目符号的类型，属性值取值如下：

属性值	含义
disc	实心圆点
circle	空心圆点
square	实心方块
decimal	阿拉伯数字
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写字母
upper-alpha	大写字母
none	没有符号

li{
    list-style-type: upper-roman;
}

3.4 列表样式list-style

指定列表样式，可以依次设置list-style-type、list-style-position、list-style-image，顺序无要求。

格式为：

li{
    list-style: list-style-type list-style-position list-style-image;
}

例如：

li{
    list-style: url(../imges/beer.ico) outside;
}

4 表格边框样式属性border

属性	说明
border-spacing	指定单元格之间的距离，不能是负值
border-collapse	指定单元格的边框是否合并，取值有两个： separate： 单元格边框独立，默认值； collapse： 相邻单元格的边框合并
border-color	边框颜色
border-width	边框宽度
border-style	边框线的样式
border-radius	边框的弧度

4.1 单元格之间距离border-spacing

表示单元格之间的距离，不能是负值，例如：

    <table border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
        </tr>
    </table>

初始时表格样子为：

设置border-spacing的CSS样式后，单元格大小不变，单元格之间距离加大：

table{
    border-spacing: 5px;
}

4.2 单元格边框合并border-collapse

表示单元格的边框是否合并，取值有两个：

属性值	含义
separate	单元格边框独立，默认值
collapse	相邻单元格的边框合并

例如，CSS样式为：

table{
    border-collapse: collapse;
}

4.3 边框样式border-style

设置边框的样式，部分属性值如下：

属性值	含义
dashed	边框线为虚线
dotted	边框线为圆点
double	边框线为两条实线
groove	边框线为黑灰交叉颜色构成，与ridge效果相反
hidden	边框线隐藏
inset	边框线为左上黑右下灰，与outset效果相反
outset	边框线为左上灰右下黑，与inset效果相反
ridge	边框线为黑灰交叉颜色构成，与groove效果相反

例如：CSS样式如下：

table{
    border-width: 10px;
    border-style:groove;
}

4.4 边框圆角border-radius

设置边框的圆角：

table{
    border-radius: 30%;
}

5 鼠标样式属性cursor

cursor属性可以让鼠标移动不同对象上面，显示不同形状。

属性	含义
auto	自动按默认显示
crosshair	显示“＋”
pointer	手形
text	文本I形
wait	等待

例如，html中写入以下代码：

<p>橘猫吃不胖</p>

写入以下CSS样式：

p{
    cursor: crosshair;
}

当鼠标移动到“橘猫吃不胖”这行字上面的时候，鼠标就会呈现十字型。

6 CSS样式的组合

样式的组合：可以将多个选择器设置为相同的样式，并用逗号隔开，呈现一致的外观

例如，.html文件中写入以下代码：

    <h1>橘猫吃不胖</h1>
    <h2>橘猫吃不胖</h2>
    <p class="p1">橘猫吃不胖</p>

CSS样式如下：

h1,h2,.p1{
    color: lightsalmon;
}

7 CSS样式的关联性

样式表的关联性：样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。

例如，下面是.html文件中的代码：

    <a href="#">橘猫吃不胖</a>
    <p class="p1">
        <a href="#">橘猫吃不胖</a>
    </p>

下列代码中，“.p1 a”表示该样式将选择应用p1样式的元素内的所有a标签，意思是在class="p1"中a标签的样式才会生效：

.p1 a{
    color: orange;
}

8 元素可调整大小resize

resize CSS属性允许你控制一个元素的可调整大小性，该属性取值有4个：

属性值	含义
none	元素不能被用户缩放
both	允许用户在水平和垂直方向上调整元素的大小
horizontal	允许用户在水平方向上调整元素的大小
vertical	允许用户在垂直方向上调整元素的大小
block	根据写入模式和方向值，元素显示了一种机制，允许用户在块方向上水平或垂直调整元素的大小。
inline	根据写入模式和方向值，元素显示一种机制，允许用户在内联方向上水平或垂直调整元素的大小。

注意：如果一个block元素的 overflow 属性被设置成了visible，那么resize属性对该元素无效。

语法为：

resize: none | both | horizontal | vertical | block | inline;

示例：可以用在<textarea>标签上，固定其长和宽。

9 轮廓属性outline

CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color。

属性	含义
outline-color	设置轮廓的颜色。没有设置时默认值为 currentcolor。参见 outline-color。
outline-style	设置轮廓的样式。没有设置时默认值为 none。参见 outline-style。
outline-width	设置轮廓的宽度。没有设置时默认值为 medium。参见 outline-width。

border 和 outline 很类似，但有如下区别：
1、outline不占据空间，绘制于元素内容周围。
2、根据规范，outline通常是矩形，但也可以是非矩形的。