CSS常用的样式规则

Posted 2021-10-30 橘猫吃不胖～

CSS常用的样式规则

• 1.1 常用的文本样式属性
• 1.2 常用的背景样式属性
• 1.3 常用的列表样式属性
• • 1.3.1 list-style-position
  • 1.3.2 list-style-image
  • 1.3.3 list-style-type
  • 1.3.4 list-style
• 1.4 常用的表格样式属性
• • 1.4.1 border-spacing
  • 1.4.2 border-collapse
  • 1.4.3 border-style
  • 1.4.4 border-radius
• 1.5 常用的鼠标样式属性

1.1 常用的文本样式属性

属性	说明
font-style	字体样式（粗体、斜体…）
font-size	字号
font-family	字体（宋体、楷体…）
font-weight	文字的粗细
color	文本的颜色
text-align	文本对齐

以《静夜思》这首诗为例，它的.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;
    }

属性	说明
line-height	文字行高
word-spacing	单词间距
letter-spacing	字母间距
text-decoration	文本样式

例如，在.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;
    }

1.2 常用的背景样式属性

属性	说明
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;
}

1.3 常用的列表样式属性

属性	说明
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，顺序无要求

1.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;
}

1.3.2 list-style-image

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

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

1.3.3 list-style-type

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

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

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

1.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;
}

1.4 常用的表格样式属性

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

1.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;
}

1.4.2 border-collapse

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

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

例如，CSS样式为：

table{
    border-collapse: collapse;
}

1.4.3 border-style

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

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

例如：CSS样式如下：

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

1.4.4 border-radius

设置边框的圆角：

table{
    border-radius: 30%;
}

1.5 常用的鼠标样式属性

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

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

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

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

写入以下CSS样式：

p{
    cursor: crosshair;
}

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