CSS常用样式（详解）

最新推荐文章于 2023-09-10 14:38:58 发布

搞前端的小菜

最新推荐文章于 2023-09-10 14:38:58 发布

阅读量1.4k

点赞数 3

分类专栏： HTML+CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_46726346/article/details/107863055

版权

HTML+CSS 专栏收录该内容

8 篇文章 11 订阅

订阅专栏

继续整理CSS的知识点，这一篇主要说一下CSS的样式。
上一篇说了CSS的选择器，那选中了元素之后，就是要给元素添加样式了。

一、背景

背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #color{
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
    </style>
<body>
    <div id="color">div1</div>
</body>

在这里插入图片描述

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

背景图像

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

    <style>
        #img{
            width: 400px;
            height: 300px;
            background-image: url(small.jpg);
        }
    </style>
<div id="img"></div>

显示出来是这样的：
在这里插入图片描述
是因为我这张图片大小就是400*300的图片，如果我把div的大小设置大一点会是神马样子呢？

    <style>
        #img{
            width: 800px;
            height: 600px;
            background-image: url(small.jpg);
        }
    </style>

在这里插入图片描述
图片就会重复！这时候就有另一个属性了。

背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

    <style>
        #img{
            width: 800px;
            height: 600px;
            background-image: url(small.jpg);
            background-repeat: no-repeat;
        }
    </style>

这样图片就不会重复了。

那如果我想让图片移动该怎么做呢？
背景定位
可以利用 background-position 属性改变图像在背景中的位置。

我给div加个边框可能看的更清楚一点。

    <style>
        #img{
            border: 1px black solid;
            width: 800px;
            height: 600px;
            background-image: url(small.jpg);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>

在这里插入图片描述
这样图片就在div中居中显示了。

OK，关于背景的常用样式就说这些。

二、CSS 文本

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等

缩进文本
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进

    <!-- 缩进文本 -->
    <style>
        #indent{
            text-indent: 5em;
        }
    </style>
<p id="indent">这是一个帅哥</p>

这里的1em指的是16px。

水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

    <!-- 文本居中 -->
    <style>
        #text{
            width: 400px;
            height: 100px;
            text-align: center;
            background-color: chartreuse;
        }
    </style>
<div id="text">this is a cool boy</div>

显示出来是这样的：
在这里插入图片描述
可以看出来水平方向是居中的。
如果想实现出来竖直也是居中的效果：

   <style>
        #text{
            width: 400px;
            height: 100px;
            text-align: center;
            background-color: chartreuse;
            line-height: 100px;
        }
    </style>

把line-height这个值设置成和div的高度一样就能实现出高度上居中。
在这里插入图片描述
字间隔

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。

例如上面的例子：

    <style>
        #text{
            width: 250px;
            height: 100px;
            text-align:center;
            background-color: chartreuse;
            line-height: 100px;
            word-spacing: 5px;
        }
    </style>

这样就会每个单词有5px的字间隔

字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal

还是上面的例子也可以再加上一句letter-spacing: 2px;：

    <style>
        #text{
            width: 250px;
            height: 100px;
            text-align:center;
            background-color: chartreuse;
            line-height: 100px;
            letter-spacing: 2px;
            word-spacing: 5px;
        }
    </style>

这样字母之间会有2px的间隔。

文本装饰
接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

none
underline
overline
line-through
blink
不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

    <!-- 文本装饰 -->
    <style>
        a{
            text-decoration: none;
        }
    </style>
<a href="https://i.csdn.net/#/uc/profile">一个帅哥的博客</a>

这样链接的显示就没有了下划线了。其他的参数我也就不一一试了。

OK，关于css的文本样式，就说这些。

三、CSS 字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

指定字体系列
使用 font-family 属性定义文本的字体系列。

    <!-- 字体 -->
    <style>
        #font{
            font-family: Georgia;
        }
    </style>
<p id="font">this is a good book</p>

字体风格
font-style 属性最常用于规定斜体文本。

该属性有三个值：

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
例如上面的例子：

    <style>
        #font{
            font-family: Georgia;
            font-style: italic;
        }
    </style>

这样字体就变成了斜体。

字体加粗
font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
还是上面的例子：

    <style>
        #font{
            font-family: Georgia;
            font-style: italic;
            font-weight: bold;
        }
    </style>

字体大小
font-size 属性设置文本的大小。
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
还是上面的例子：

    <style>
        #font{
            font-family: Georgia;
            font-style: italic;
            font-weight: bold;
            font-size: 14px;
        }
    </style>

这样字体就会变得小一点。

字体颜色

关于字体颜色还是很简单的：

    <style>
        #font{
            font-family: Georgia;
            font-style: italic;
            font-weight: bold;
            font-size: 14px;
            color: brown;
        }
    </style>

一个color搞定了。

OK，关于字体的样式就说这些。

四、CSS 链接

设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

例如我们拿刚才的链接来做例子：

    <!-- 链接 -->
    <style>
            a:link {color:#FF0000;}
            a:visited {color:#00FF00;}
            a:hover {color:#FF00FF;}
            a:active {color:#0000FF;}
    </style>

对应了链接的四种状态时的颜色。

当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

刚才也说过：
text-decoration 属性大多用于去掉链接中的下划线。

背景色
background-color 属性规定链接的背景色：

    <style>
        a{
            text-decoration: none;
            background-color: darkmagenta;
        }
    </style>

OK，关于a标签独有的样式就说这些。

五、CSS 列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

列表类型
要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type

    <!-- 列表 -->
    <style>
        ul{
            margin-left: 20px;
            list-style-type : square
        }
    </style>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

像这样就会把列表前面编程小方块。
在这里插入图片描述
而我们一般都用none这个参数让前面的标志设置成空。

列表项图像
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到。
这里我就不演示了，我得效果不好看哈。

关于列表我们最常用的属性还是：

        li{
            list-style: none;
        }

像这样，把前面的标志给去掉。

OK，关于列表的样式就说这些。

六、CSS 表格

CSS 表格属性可以帮助您极大地改善表格的外观。

表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。

    <!-- 表格 -->
    <style>
        table,tr,td{
            border: 1px solid brown;
        }
    </style>
    
    <table>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
    </table>

显示出来的话，有点别扭。
在这里插入图片描述
这是因为：上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
例如上面的例子我们给table加一个border-collapse

    <style>
        table,tr,td{
            border: 1px solid brown;
        }
        table{
            border-collapse: collapse;
        }
    </style>

这样就会看着舒服多了。
在这里插入图片描述
表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。

   <style>
        table,tr,td{
            border: 1px solid brown;
        }
        table{
            border-collapse: collapse;
            width: 300px;
            height: 100px;
        }
    </style>

在这里插入图片描述
这里面你还可以加字体的样式啊，什么颜色，背景颜色，文本居中都可以滴。
那这里面我就不一一试了。

OK，关于表格，以及常用的CSS样式，我这里就全说完了。最后附上我的笔记吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 背景颜色 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #color{
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
    </style>
    <!-- 背景图片 -->
    <style>
        #img{
            width: 400px;
            height: 300px;
            background-image: url(small.jpg);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
    <!-- 缩进文本 -->
    <style>
        #indent{
            text-indent: 5em;
        }
    </style>
    <!-- 文本居中 -->
    <style>
        #text{
            width: 250px;
            height: 100px;
            text-align:center;
            background-color: chartreuse;
            line-height: 100px;
            letter-spacing: 2px;
            word-spacing: 5px;
        }
    </style>
    <!-- 文本装饰 -->
    <style>
        a{
            text-decoration: none;
            background-color: darkmagenta;
        }
    </style>
    <!-- 字体 -->
    <style>
        #font{
            font-family: Georgia;
            font-style: italic;
            font-weight: bold;
            font-size: 14px;
             color: brown;
        }
    </style>
    <!-- 链接 -->
    <style>
            a:link {color:#FF0000;}
            a:visited {color:#00FF00;}
            a:hover {color:#FF00FF;}
            a:active {color:#0000FF;}
    </style>
    <!-- 列表 -->
    <style>
        ul{
            margin-left: 20px;
            list-style-type : square
        }
        li{
            list-style: none;
        }
    </style>    
    <!-- 表格 -->
    <style>
        table,tr,td{
            border: 1px solid brown;
        }
        table{
            border-collapse: collapse;
            width: 300px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="color">div1</div>
    <div id="img"></div>
    <p id="indent">这是一个帅哥</p>
    <div id="text">this is a cool boy</div>
    <a href="https://i.csdn.net/#/uc/profile">一个帅哥的博客</a>
    <p id="font">this is a good book</p>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <table>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
    </table>
</body>
</html>

OK，结束，END。

搞前端的小菜

关注

3
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
CSS常用样式（详解）

继续整理CSS的知识点，这一篇主要说一下CSS的样式。上一篇说了CSS的选择器，那选中了元素之后，就是要给元素添加样式了。一、背景背景色可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 <style> *{ margin: 0; padding: 0; } #color{ width: 100px;
复制链接

扫一扫