发布日期: 2024-02-19

更新日期: 2024-03-10

文章字数: 3.3k

Part.3 CSS属性详述（1）

从这一部分开始，我们来了解CSS中具体有哪些属性，各个属性的具体写法，具体作用。

CSS中大体的属性类别有以下几类：

文本属性
列表属性
背景属性
边框属性
浮动属性

CSS文本属性

写在前面，文本属性，目的在于对页面内的各类文本进行各种各样的修饰。

大小和字体

在css中，文本大小用属性 font-size 来进行调整，其单位为 px ，即像素；而字体则通过属性 font-family 来进行调整：

<style>
    p{
        font-size: 16px;
        /* 16px是默认值，设计图中常用12px */
        font-family: 宋体;
        /* 直接写字体名字，默认值是微软雅黑 */
    }
</style>

<p>
    Lorem.
</p>

这里需要注意，当字体名称中有空格时，两侧需要加引号。

还有一种为了兼容性考虑的写法，即font-family属性后可以写多个字体，两两用逗号相隔开，这时系统会从第一个字体开始逐个加载，直到找到成功加载的字体为止。

字体颜色

在css中，字体颜色用属性 color 来进行调整。这个属性其实此前的博文有提及过，就不再赘述，但有几个别的写法可以在这里提一嘴：

color: rgb(0, 0, 255);
<!-- 利用rgb的强度来混合颜色，三种颜色的强度值由0~255 -->

color: #0000ff;
<!-- 利用16进制来进行rgb调色，六位数每两位分别代表red，green，blue的强度值。 -->

加粗和倾斜

加粗，用属性 font-weight 进行控制；倾斜，用属性 font-style 进行控制。

font-weight: bolder / bold / normal / lighter;
<!-- 三个可取值分别代表 更粗 / 加粗 / 正常 / 最细-->

font-style: italic / oblique / normal;
<!-- 三个可取值分别代表 斜体字 / 微微倾斜 / 正常 -->

这里可以再提一句：font-weight其实可以进一步细化调整，即后面直接跟数字，取值范围为100 ~ 900，100是最细的细体，400为正常，700为加粗，900为最粗

文本水平的对齐 / 居中

文本的水平对齐通常利用 text-align 这个属性进行编辑

text-align: left / center / right / justify;
<!-- 左对齐 / 居中 / 右对齐 / 两端对齐-->

但我们如果想让一段文本显示在一个中靠左的位置呢？
答案是先通过width来对一个单元占用的总宽度进行设置，而后再进行text-align的操作即可：

width: 500px;
text-align: right;

当然，只有左右对齐还不是很够，我们如果希望让文本两端都整整齐齐的，则需要利用到 justify，即两端对齐。

文本的行高

说完文本的水平对齐，读者可能想着能否对竖直方向上的属性也进行一定的编辑，这里给出一种比较初级的方法，即调整行高：
在css中，行高通过 line-height 这个属性进行调整。单位为px，即我们很熟悉的像素。

height: 100px;
lineheight: 100px;

我们可以先通过height设置区域的总高度，而后对行高进行对应的设置，即可达到文本居中显示的效果。

当然，这种方法在多行文本显示时显然就不是那么的友善了，这就要看此后提及的另一种方法了。

文本间距

在css中，文本间距由两部分组成：

词间距
字符间距

字符间距，即字符之间相隔的距离。我们通过 letter-spacing 这个属性进行调整，单位为px。

而对于英文，还有一个词间距的概念，即两个单词之间的距离。我们通过 word-spacing 这个属性进行调整，单位同样为px。

首行缩进

首行缩进，这玩意其实可以通过我们在 Part1 中提到的 &emsp 这个玩意实现，但是多少有点麻烦，因此css提供了另一种方式，即 text-indent 属性，这个属性可以手动控制你网页的首行缩进大小，单位仍然是px。

额外提一嘴，还有个单位可以用，即 em ，意为全角空格（可以理解为当前字体的单位大小）。这个单位存在主要是为了防止当字体大小被改变后原先设置的缩进值看起来不合适这一现象。
举个例子，中文缩进两个字符，就可以这么写：

text-indent: 2em;

文本修饰线

css中，也有相对应的文本修饰线的写法，利用 text-decoration 这个属性进行控制：

text-decoration: underline / overline / line-through / none
<!-- 分别对应下划线 / 上划线 / 删除线（中划线） / 无线-->

读者应该会有些好奇none的意义，这个玩意主要用于修饰a链接，它可以使得一个超链接不带有下划线。

同时，其实可以同时设置多条线，即在一个text-decoration中写多个值，两个值之间用空格分隔即可。

大小写检索

在css中，提供了一个对文本字母进行快速编辑的方式：

text-transform: capitalize / lowercase / uppercase / none;
<!-- 代表单词首字母大写 / 全部字母小写 / 全部字母大写 / 不设置 -->

文字混合属性 font

font这玩意是为了偷懒用的，目的在于所见文本编辑时需要的代码量，它是 fong-style font-weight font-size/line-height font-family 这一大串的缩写。

这上面的一串在使用时顺序不能改变，并且必须同时指定font-size和font-family。

font: italic bolder 20px/1em 宋体; 
<!-- 创建了一个斜体加粗，20像素大，一单位高的宋体文本格式 -->

CSS列表属性

接下来，咱们进入下一个部分，谈一谈列表的相关属性。

我们还记得，在HTML中，列表（list）前方显示的分类标志可以进行初步的自定义，这是通过列表本身带有的属性 type 达成的。

而相似的，在css中，列表的分类符号也有自定义的方法。

基本分类符

类似的，css也能实现HTML本身能够实现的几种基本图像，我们通过属性 list-style-type 进行编辑：

<style>
    ul{
        list-style-type: disc / circle / square / none;
        /* 分别代表实心圆 / 空心圆 / 实心方块 / 不设置 */
    }
</style>

当然，都进入css这个领域了，再只能实现这样子的分类符，就显得有点简陋了。

图片分类符

利用css，我们可以实现将列表前的分类符改为图片的效果，我们通过属性 list-style-image 进行控制：

list-style-image: url()
<!-- 括号里放图片的存储位置 -->

这里提一下，可以对ul里面的每个li分别进行设置，从而达到出现不同的分隔符的效果。

列表项标记的放置位置

css中还提供了一个属性，可以用于控制分类符的位置，但它其实只有两个取值：

list-style-position: outside / inside
<!-- 分别代表显示在列表外 / 显示在列表内 -->

html的默认值是outside，但这个属性用的非常少，读者了解即可。

列表混合属性 list-style

与文本属性类似，列表也给了一个偷懒的写法，即 list-style ，它是 list-style-type list-style-image list-style-position 的简写，当使用它时，只需要把上面三个属性用空格分开书写即可，并且在这里位置可替换。

其实上述提到的列表属性，用的最多的还是直接写一个：

list-style: none;

这是因为list-style-image这个属性插入的图片可定义程度不高，因此通常还是仅仅去除分类符即可。

CSS背景属性

背景，即我们之前接触过的background，在此前的简要描述中，我们常用background-color这个属性，它就属于背景属性的一种。

背景颜色

如我们很熟悉的，css中编辑背景颜色利用属性 background-color 来进行。

值得提一嘴的是，这里的颜色同样支持利用此前提过的三种写法进行书写，同时，介绍第四个写法，它比此前的写法多了一个透明度的数字：

background-color: red / rgb(255, 0, 0) / #ff0000 / rgba(255, 0, 0, 0.5);
<!-- rgba是带透明度的写法，最后一个值取值范围在0~1之间，代表透明度 -->

背景颜色渐变

这里其实css提供了一种背景颜色渐变的方法，可以用属性 gradient 来进行设置：

background: linear-gradient(black, white);

当然，这只是最基础的渐变方法，这里给出一个说明链接，读者自行查看即可：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

背景图片

类似，我们可以给一个区域贴上一个图片，这就可以通过 background-image 这个属性进行实现：

background-image: url()
<!-- 括号里填图片地址 -->

当然，图片本身占用像素与我们设定的区域很大可能并不相同，这就需要另一个属性来进行协调，即图片平铺。

图片显示方法

我们可以更改背景图片的显示模式，从而达到更好的预览效果，通过属性 background-repeat 来达成：

background-repeat: repeat / repeat-x / repeat-y / no-repeat;
分别代表正常平铺 / 在x轴平铺 / 在y轴平铺 / 不平铺

图片显示位置

相对应的，当区域大于图片大小，或者区域小于图片大小时，我们可以通过对属性 background-position 进行定义，从而实现图片展示位置（或区域的不同）：

<!-- 默认置于左上角 -->
background-position:
20px 20px
<!-- 距离左上角多少像素 -->
10% 10%
<!-- 距离左上角的距离占整个区域的大小百分比 -->
left/center/right top/center/bottom
<!-- 水平位置和竖直位置 -->

图片显示大小

此后，我们还可以通过调节图片显示在区域内的大小来实现更好的显示效果，用 background-size 进行编辑：

background-size: 
500px 500px;
100% 100%;
cover;
<!-- 这个值代表等比例放大，直到它能够完全覆盖整个区域为止 -->
contain;
<!-- 这个值代表等比例放大，直到再放大就会导致图片不能完整展示为止 -->

相当于对图片进行了拉伸。

背景图片的固定

css额外提供了一个属性叫 background-attachment，它用于控制背景是否会随着鼠标滚轮的滚动而随网页一起滑动。

background-attachment: scroll / fixed;
<!-- 分别代表正常滚动 / 不随网页一起滚动 -->

当设置成fixed时，相当于在当前页面呼出了一个独立页面单独显示这个背景，而相应的这个背景就被你固定在了网页的那个位置。

这个属性常常用于制作视差效果。

这里给出一个简要的例子：

<!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>
        .box1{
            width: 500px;
            height: 3000px;
            background-image: url(../image/test_image1.webp);
            background-size: 500px 300px;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .box2{
            width: 500px;
            height: 3000px;
            background-image: url(../image/test_image2.jpg);
            background-size: 500px 300px;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        /* 上面的图片地址读者可以自行替换成自己的图片地址 */
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

利用上述方法，我们放了两个fixed的背景图片，会显示在浏览器窗口的同一个位置，而只有当滚轮滚到这个图片属于的区域时，这个图片才会显示出来，这就实现了随着滚轮下滑，第一个图片消失，而第二个图片同时出现的效果。

背景混合属性 background

同理，与文字 / 列表类似，背景的属性也是可以被混合书写的，就是简单的 background ，它里面可以包含 background-color background-image background-repeat background-position background-attachment 等等一系列属性，只需要使其中间利用空格分隔开即可。