三：以理论结合实践方式梳理前端 CSS 3 ——— 常用样式属性

本文链接：https://blog.csdn.net/weijun20180101/article/details/123612170

背景样式

（1）背景颜色

可以使用 background-color 属性为元素设置背景颜色，它接受任何合法的颜色值，默认是 transparent

注意，background-color 属性不能继承

（2）背景图片

可以使用 background-image 属性为元素设置背景图片，它接受任何合法的 URL，默认是 none

注意，background-image 属性不能继承

（3）背景重复

可以使用 background-repeat 属性对背景图像进行平铺，其可选值如下：

repeat：默认值，在水平方向和垂直方向上都平铺
repeat-x：在水平方向上平铺
repeat-y：在垂直方向上平铺
no-repeat：不允许图像在任何方向上平铺

（4）背景位置

可以使用 background-position 属性改变图像的位置，其可选值如下：

top：默认值，将背景图片定位到上方
bottom：将背景图片定位到下方
left：默认值，将背景图片定位到左方
right：将背景图片定位到右方
center：将背景图片定位到中间

（5）背景大小

可以使用 background-size 属性改变图像的大小，其可选值如下：

cover：背景图像完全覆盖背景区域，但是图像的某些部分可能无法显示
contain：背景图像完全适应内容区域
长度
百分数值

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            background-image: url(https://cdn.pixabay.com/photo/2015/06/08/14/52/wave-801752_960_720.jpg);
            background-repeat: no-repeat;
            background-position: top left;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>面朝大海，春暖花开</h3>
</body>
</html>

文本样式

（1）文本颜色

可以使用 color 属性设置文本颜色，它接受任何合法的颜色值

（2）行间间隔

可以使用 line-height 属性设置行间的距离，其可选值如下：

normal：默认值，定义标准的行间间距
长度：设置固定的行间间距
数字：将此数字与当前字体尺寸相乘来确定行间间距
百分数值：规定基于当前字体尺寸的百分比行间间距
inherit：从父元素继承

（3）字间间隔

可以使用 letter-spacing 属性改变字间的间隔，其可选值如下：

normal：默认值，定义标准的字间间距
长度：设置固定的字间间距，接受一个正或负的长度值，若为正，则增大字间距离；若为负，则减小字间距离
inherit：从父元素继承

（4）文本对齐

可以使用 text-align 属性控制元素中的文本对齐方式，其可选值如下：

left：左对齐，即把文本排列到左边，默认值
right：右对齐，即把文本排列到右边
center：居中对齐，即把文本排列到中间
justify：两端对齐，常用于设置打印格式
inherit：从父元素继承

（5）处理空白

可以使用 white-space 属性定义处理空白的规则，这里的空白指的是空格和回车，其可选值如下：

normal：默认值，合并空格，忽视回车，允许自动换行
nowrap：合并空格，忽略回车，不允许自动换行
pre：保留空格，保留回车，不允许自动换行
pre-wrap：保留空格，保留回车，允许自动换行
pre-line：合并空格，保留回车，允许自动换行
inherit：从父元素继承

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .title {
            color: deeppink;
            text-align: center;
            letter-spacing: 3px;
        }
        .author {
            color: hotpink;
            text-align: right;
            line-height: 28px;
            white-space: nowrap;
        }
        .contain {
            color: cornflowerblue;
            text-align: left;
            line-height: 28px;
            white-space: pre-line;
        }
    </style>
</head>
<body>
    <h3 class="title">面朝大海，春暖花开</h3>
    <p class="author">
        —— 海子
    </p>
    <p class="contain">
        从明天起，做一个幸福的人
        喂马，劈柴，周游世界
        从明天起，关心粮食和蔬菜
        我有一所房子，面朝大海，春暖花开
        
        从明天起，和每一个亲人通信
        告诉他们我的幸福
        那幸福的闪电告诉我的
        我将告诉每一个人
        
        给每一条河每一座山取一个温暖的名字
        陌生人，我也为你祝福
        愿你有一个灿烂的前程
        愿你有情人终成眷属
        愿你在尘世获得幸福
        我只愿面朝大海，春暖花开
    </p>
</body>
</html>

（6）文本阴影

可以使用 text-shadow 属性设置文本阴影效果，其可选值如下：

h-shadow：必需，水平阴影的位置
v-shadow：必需，垂直阴影的位置
blur：可选，模糊距离
color：可选，阴影颜色

<!DOCTYPE HTML>
<html>
<head>
    <style>
        h1 {
            text-shadow: 5px 5px 5px #888888;
        }
    </style>
</head>
<body>
    <h1>你好，世界</h1>
</body>
</html>

（7）文本修剪

可以使用 text-overflow 属性规定当文本溢出时发生的动作，其可选值如下：

clip：直接修剪文本
ellipsis：显示省略符号来代表被修剪的文本
string：显示给定的字符串来代表被修剪的文本

<!DOCTYPE HTML>
<html>
<head>
    <style>
        div {
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>如果这是一段很长很长的文字，那么就会溢出</div>    
</body>
</html>

字体样式

（1）字体系列

可以使用 font-family 属性指定字体系列，在 CSS 中存在两种字体系列：

通用字体系列：serif、sans-serif、monospace、cursive、fantasy
特定字体系列：例如 Times、Courier 等等

（2）字体风格

可以使用 font-style 属性设置字体风格，其可选值如下：

normal：文本正常显示
italic：文本斜体显示
oblique：文本倾斜显示
inherit：从父元素继承

（3）字体加粗

可以使用 font-weight 属性设置字体粗细，其可选值如下：

normal：默认值，定义标准字符
bold：定义粗体字符
bolder：比父元素更粗
lighter：比父元素更细
inherit：从父元素继承
从 100 到 900 的整百数字

（4）字体大小

可以使用 font-size 属性设置字体大小，推荐使用像素单位 px，其可选值如下：

xx-small
x-small
small
medium
large
x-large
xx-large
smaller：比父元素更小
larger：比父元素更大
长度
百分数值

<!DOCTYPE HTML>
<html>
<body>
    <p>正常文本</p>
    <p style="font-family: cursive">草书</p>
    <p style="font-style: italic">斜体</p>
    <p style="font-weight: bold">粗体</p>
    <p style="font-size: large">大字</p>
</body>
</html>

轮廓样式

（1）颜色

可以使用 outline-color 属性设置轮廓颜色，它接受任何合法的颜色值

（2）样式

可以使用 outline-style 属性设置轮廓样式，其可选值如下：

none：无轮廓，默认值
dotted：点状轮廓
dashed：虚线轮廓
solid：实线轮廓
double：双线轮廓
inherit：从父元素继承

（3）宽度

可以使用 outline-width 属性设置轮廓宽度，其可选值如下：

thin：细轮廓
medium：中等轮廓
thick：粗轮廓
长度：指定固定的轮廓粗细
inherit：从父元素继承

（4）简写属性

为了方便，我们可以只在 outline 属性中设置所有有关轮廓的属性，它们的排列顺序如下：

outline-color
outline-style
outline-width

<!DOCTYPE HTML>
<html>
    <style>
    h1 {
        color: deeppink;
        text-align: center;
        outline: cornflowerblue solid thin;
    }
    </style>
<body>
    <h1> 面 朝 大 海 ， 春 暖 花 开 </h1>
</body>
</html>

列表样式

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

（1）无序列表类型

disc - 实心圆
circle - 空心圆
square - 实心方块

（2）有序列表类型

1 - 十进制数字 (1, 2, 3, 4)
a - 字母顺序的有序列表，小写 (a, b, c, d)
A - 字母顺序的有序列表，大写 (A, B, C, D)
i - 罗马数字，小写 (i, ii, iii, iv)
I - 罗马数字，大写 (I, II, III, IV)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    ul.a {list-style-type:circle;}
    ul.b {list-style-type:square;}
    ol.c {list-style-type:upper-roman;}
    ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
	<li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<ul class="b">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
	<li>Coffee</li>
	<li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="d">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

</body>
</html>

浮动样式

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

使用浮动会改变块级元素的盒子属性，盒子内容宽度将变成 0，必须设置宽度
使用浮动会改变块级元素的换行属性，只有达到超出父元素宽度时才执行换行
通过清除浮动将块级元素的原始属性变更回来，块级元素宽度百分百及自换行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>

<body>
    <div style="height: 50px; background-color: rgba(255, 0, 0, 0.5);"></div>
    <div style="float: left; height: 50px; background-color: rgba(255, 0, 0, 0.5);"></div>
    <div style="float: left; width: 50px; height: 50px; background-color: rgba(255, 0, 0, 0.5);"></div>
    <div style="float: left; width: 50px; height: 50px; background-color: rgba(255, 0, 0, 0.5);"></div>
    <div style="clear: both; height: 50px; background-color: rgba(255, 0, 0, 0.5);"></div>
</body>
</html>

溢出样式

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条

overflow: visible; – 溢出文本会显示，不会被裁剪
overflow: hidden; – 溢出文本不会显示，会被裁剪
overflow: scroll; – 溢出文本会显示，有滚动条
overflow: auto; – 会显示，是否有滚动条取决于文本是否溢出

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
	p {
		width: 150px;
		line-height: 20px;
		border: 1px dashed #ccc;
	}
</style>
</head>

<body>
    <p style="height: 20px; overflow: visible;">
        这里的文本内容是被溢出
    </p>
    <hr />
    <p style="height: 20px; overflow: hidden;">
        隐藏这里的文本内容是被溢出
    </p>
    <hr />
    <p style="height: 40px; overflow: scroll;">
        隐藏这里的文本内容是被溢出
    </p>
</body>
</html>