CSS文本属性，让你的段落更加美观，前端之路更进一步

技术等级】初级

【承接文章】《CSS字体属性，详解属性用法，提升前端小白能力》

本文重点讲解CSS技术中有关文本样式的属性以及这些属性的取值。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

所谓文本，就是大段落的文字。当文字多到可以形成段落时，就会涉及到段落的一些样式调整。例如段落的对齐方式、段落的首行缩进等。

被归结为段落属性的CSS样式包括八个，小海老师将其分为两组。

第一组有如下五个属性：

letter-spacing
word-spacing
text-decoration
text-transform
text-indent

第二组有如下三个属性：

text-align
line-height
vertical-align

本文小海老师先为大家讲解第一组的5个属性，后续的文章会紧接着为大家讲解第二组的3个属性。

一、设置字符间距：

CSS技术利用letter-spacing属性来设置字符间距

该属性可以有多种取值：

normal，正常，表示字符间距采用系统定义的默认间距。
带单位的长度值，指定字符间距的具体数值。

实例：.sty01{letter-spacing:20px;}

上述代码定义了用户自定义类sty01，该样式设置字符间距为20像素。

二、设置单词间距：

CSS技术利用word-spacing属性来设置单词间距

在页面中，单词是以空格作为依据的，每个空格之间被认定为一个单词。所以也可以认为该属性是用来调整句子中空格的距离的。

该属性可以有多种取值：

normal，正常，表示单词间距采用系统定义的默认间距。
带单位的长度值，指定单词间距的具体数值。

实例：.sty02{word-spacing:20px;}

上述代码定义了用户自定义类sty02，该样式设置单词间距为20像素。

三、设置文本修饰：

CSS技术利用text-decoration属性来设置文本修饰

该属性可以有多种取值：

none，文本没有经过任何修饰。
underline，下划线修饰。
overline，上划线修饰。
line-through，删除线修饰。
blink，闪烁修饰（主流浏览器不支持该效果）。

让我们一同来看两个下例子：

例1：结合虚类设定超级链接在鼠标经过时显示下划线效果。

a:link{font-size:12px;text-decoration:none;}
a:visited{font-size:12px;text-decoration:none;}
a:hover{font-size:12px;text-decoration:underline;}
a:active{font-size:12px;text-decoration:none;}

例2：结合虚类设定超级链接在鼠标经过时放大字号效果。

a:link{font-size:12px; }
a:visited{font-size:12px; }
a:hover{font-size:14px; }
a:active{font-size:12px; }

四、设置段落中西文的大小写模式：

CSS技术利用text-transform属性来设置西文的大小写模式

该属性可以有多种取值：

none，段落中西文的大小写模式不受CSS样式的影响。
uppercase，所有西文均为大写模式。
lowercase，所有西文均为小写模式。
capitalize，所有西文均为首字母大写模式。

五、设置段落的首行缩进：

CSS技术利用text-indent属性来设置段落的首行缩进

首行缩进是指：段落中的第一行与整个段落左侧之间的距离，也就是我们俗称的“每一段的第一行空两个格”。

该属性可以取值为：

带有单位的长度值，一般首行缩进两个字符，可设置为字号的2倍。

实例：设置段落的首行缩进为两个字符的距离。

<p>段落内容……</p>
p{font-size:14px; text-indent:28px;}

文章预告

下一篇文章中，小海老师会为大家从细节上深入剖析text-align属性以及块级元素和内联元素的使用。块级元素与内联元素在前端开发中的作用非常重要，我会用整整一篇文章的篇幅，为广大Web前端爱好者们详细讲解这两个概念。对于渴望在前端开发道路上前进的你一定不能错过！

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上也已经写了有七八篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素页面样式）
行为	JavaScript	网页交互

CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式

1 CSS样式引入方式

1.1 外部样式

CSS写在一个单独的.css文件中，通过link标签在网页中引入

<link rel="stylesheet" href="文件路径">

1.2 内部样式

CSS写在网页的head标签中，用style标签包裹

<style>
    /* 写在style标签中的样式 */
</style>

1.3 行内样式

CSS写在标签的style属性中

<标签名 style="行内样式写在这"></标签名>

三种CSS样式引入方式的区别

引入方式	书写位置	作用范围	使用场景
外部样式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
内部样式	CSS写在head头部style标签中	当前页面	案例演示中
行内样式	CSS写在标签的style属性中	当前标签	配合js使用

2 基础选择器

选择器，就是选取（查找）需要设置样式元素的方式

选择器 {
    属性名: 属性值;
}

属性名和属性值合称为css属性

2.1 元素选择器

通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <p>我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

小结：

1、无论嵌套多少层，只要元素名称相同都会被找到

2.2 类选择器

通过类名称，找到页面中所有带这个类名称的元素，然后对其设置CSS样式

类选择器，也有人叫class选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我爱中国</p>
    <p>我爱人民</p>
    <div class="color-style">我爱家乡</div>
</body>
</html>

小结：

1、所有元素都有class属性，class属性的属性值叫类名

2、类名由数字、字母、下划线、中划线组成，不能以数字、中划线开头

3、一个元素可以有多个类名，类名之间用空格隔开

2.3 id选择器

通过元素id属性的属性值，找到页面中带这个id属性值的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

小结：

1、所有元素都有id属性

2、id属性值在一个页面中是唯一的

3、一个元素只能有一个id属性值

2.4 通配符选择器

查找页面中所有的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

小结：

1、通常用于网页重置样式，不常用

2.5 后代选择器

根据选择器查找符合条件的元素，再根据后代选择器查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>我爱中国</p>
        <p>我爱人民</p>
        <div>我爱家乡</div>
        <div>
            <p>我爱中国</p>
            <p>我爱人民</p>
        </div>
    </div>
    <div id="two">
        <p>我爱中国</p>
        <p>我爱人民</p>
        <div>我爱家乡</div>
        <div>
            <p>我爱中国</p>
            <p>我爱人民</p>
        </div>
    </div>
</body>
</html>

2.6 群组选择器

根据多个选择器各自查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>

3 字体样式

字体样式，针对文字本身样式

字体相关的CSS属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

3.1 字体类型

语法：

font-family: 字体1,字体2,字体3...;

说明：

1、font-family属性可是设置多个属性值，用英文逗号隔开，生效顺序是从左到右。浏览器默认字体类型一般是"宋体"

2、字体类型只有一个英文单词，则不需要加上引号；字体类型是多个英文单词或中文的，则需要加上双引号

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋体";
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>

3.2 字体大小

语法：

font-size: 数字 + px

说明：

1、px是像素单位，单位需要设置，否则无效

2、谷歌浏览器默认文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>

3.3 字体粗细

语法：

font-weight: normal/bold/100~900

说明：

属性值	说明
normal	正常（默认值）
bold	较粗
100~900	取100~900九种数值

实际开发一般会设置bold，不设置默认是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>

3.4 字体风格

语法：

font-style: 取值

说明：

属性值	说明
normal	正常（默认值）
italic	斜体
oblique	斜体

不是所有字体都有italic属性值，如果没有italic的，则用oblique

font连写

语法：

font: style weight size family;

说明：

1、可以省略前两项，省略了相当于设置了默认值

不常用，作为了解

3.5 字体颜色

语法：

color: 颜色值

说明：

color属性取值常用有两种，一种是关键字（比如red、green、blue），另外一种是16进制RGB值（#000000，#FFFFFF）

问题一：给同一个元素设置了相同的属性样式，哪个生效？

答：样式会层叠（覆盖），写在最后面的会生效。

问题二：html里面有注释，css有没有注释，如何写？

<style>
    /* 采用元素选择器给p元素设置css样式 */
    p {
        color: #000000;  /* p元素字体颜色为黑色 */
    }
</style>

4 文本样式

文本样式，针对段落的排版效果

文本相关CSS属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修缮
text-transform	大小写转换
line-height	行高
letter-spacing	字母间距
word-spacing	词间距

4.1 首行缩进

语法：

text-indent: 像素值

说明：

缩进大小和字体大小是有关的，缩进1个字的空间等同于1个字的字体大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

4.2 水平对齐

语法：

text-align: 取值

说明：

text-align属性取值

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
</body>
</html>

4.3 文本修饰

语法：

text-decoration: 取值

说明：

text-decoration属性值

属性值	说明
none	去除所有的划线效果（默认值）
underline	下划线
line-throught	中划线
overline	顶划线

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
    <p class="four">生于忧患死于安乐</p>
</body>
</html>

4.4 大小写转换

语法：

text-transform: 取值

说明：

text-transform属性取值

属性值	说明
none	无转换（默认值）
uppercase	转换为大写
lowercase	转换为小写
capitalize	单词首字母大写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>

4.5 行高

语法：

line-height: 取值;

说明：

1、取值可以是一个固定的数值（比如24px），也可以是一个百分数（比如150%）

line-height: 150%;

2、使用font-size属性和line-height属性的组合，可以让行高与字体大小之间保持一定的比例

font-size: 16px;
line-height: 1.5

3、使用line-height属性的继承值。如果父元素的line-height属性有值，那么子元素及后代元素会继承父元素的行高

body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}

行高的设置要大于字体大小的设置，才会显得好看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能</p>
</body>
</html>

4.6 间距

字间距

语法：

letter-spacing: 像素值

说明：

letter-spacing属性用来设置两个字之间的距离，一个英文字母或汉字都是当做一个字来处理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>

词间距

语法：

word-spacing: 像素值;

说明：

word-spacing属性用来设置英文单词之间的距离

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>

5 边框样式

元素基本可以定义边框，边框样式由边框宽度、边框外观和边框颜色三个属性组成。

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

5.1 边框的宽度

语法：

border-width: 像素值;

说明：

边框border-width属性值是一个像素值

5.2 边框的外观

语法：

border-style: 取值;

说明：

border-style取值有三个

属性值	说明
none	无样式
dashed	虚线
solid	实线

5.3 边框的颜色

语法：

border-color: 颜色关键字/16进制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>

5.4 边框样式简写

语法：

border: border-width border-style border-color;

案例：

div {
    border: 1px solid red;
}

5.5 边框局部样式

元素都是盒子模型，都是有四条边的，分别是上、下、左、右。所以又可以为元素某一边边设置边框样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>

6 列表样式

6.1 列表项符号

定义列表项符号

在HTML中，无序列表和有序列表是通过标签ul、ol的type属性来定义的

<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>

接触了css后，得改成list-style-type属性来定义。HTML专心负责结构，CSS专心负责样式。

语法：

list-style-type: 取值;

说明：

ol元素的list-style-type属性值

属性值	说明
decimal	阿拉伯数字：1、2、3…（默认值）
lower-roman	小写罗马数字：i、ii、iii…
upper-roman	大写罗马数字：I、II、III…
lower-alpha	小写英文字母：a、b、c…
upper-alpha	大写英文字母：A、B、C…

ul元素的list-style-type属性值

属性值	说明
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

去除列表项符号

随着技术和审美不断的提高，实际开发中都是直接去除列表项符号

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

有序列表或无序列表设置了list-style-type: none后，样式都一样了。

6.2 列表项图片

语法：

list-style-image: url(图片路径);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

list-style-image不能控制图片大小，实际开发中用background来替代

7 表格样式

7.1 表格标题位置

语法：

caption-side: 取值;

说明：

caption-side属性取值

属性值	说明
top	标题在顶部（默认值）
bottom	标题在底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.2 表格边框合并

语法：

border-collapse: 取值;

说明：

border-collapse属性取值

属性值	说明
separate	边框分开，有空隙（默认值）
collapse	边框合并，无空隙

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.3 表格边框间距

语法：

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

8 图片样式

8.1 图片大小

语法：

width: 像素值;
height: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.2 图片边框

语法:

border: 1px solid red;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.3 图片对齐

水平对齐

语法：

text-align: 取值;

说明：

text-align属性取值

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" alt="">
    </div>
    <div class="i2">
        <img src="small.png" alt="">
    </div>
    <div class="i3">
        <img src="small.png" alt="">
    </div>
</body>
</html>

图片的水平对齐属性设置是在图片标签的父标签上实现的

垂直对齐

语法：

vertical-align: 取值;

说明：

vertical-align属性取值

属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>

8.4 文字环绕

语法：

float: 取值;

说明：

float属性取值

属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

9 背景样式

9.1 背景颜色

语法：

background-color: 颜色值;

说明：

颜色值有两种表示方式，一种是颜色关键字，另外一种是16进制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景颜色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>

9.2 背景图片

引入背景图片

语法:

background-image: url(图片路径)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景图片重复

语法：

background-repeat: 取值;

说明：

background-repeat属性取值

属性值	说明
repeat	在水平方向和垂直方向上同时平铺（默认值）
repeat-x	只在水平方向（x轴）上平铺
repeat-y	只在垂直方向（y轴）上平铺
no-repeat	不平铺

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景图片位置

语法：

background-position: 水平距离 垂直距离

通过像素值定图片位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

通过关键字定位图片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通过水平方向、垂直方向组合出9种方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景图片固定

语法：

background-attachment: 取值;

说明：

background-attachment属性取值

属性值	说明
scroll	随元素一起滚动（默认值）
fixed	固定不动

10 超链接样式

语法：

a {}
a:link {}
a:visited {}
a:hover{}
a:active{}

说明：

伪类	说明
a:link	a元素未访问时的样式
a:visited	a元素访问后的样式
a:hover	鼠标经过a元素时的样式
a:active	鼠标点击时的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

实际开发，一般设置a、a:hover样式就可以了

11 盒子模型

每一个元素都是由内容区、内边距、边框、外边距组成

属性	说明
content	内容区，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
border	边框，用于定义元素的边框
margin	外边距，用于定义当前元素与其他元素之间的距离

11.1 内容区

语法：

width: 像素值;
height: 像素值;
overflow: 取值;

说明：

overflow属性值

属性值	说明
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" alt="">
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

如果要给行内元素设置宽高，则需要给元素设置display: inline-block属性

11.2 内边距

语法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

padding: 上下左右像素值;
padding: 上下像素值 左右像素值;
padding: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

11.3 边框

边框知识参考2.6

11.4 外边距

语法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

margin: 上下左右像素值;
margin: 上下像素值 左右像素值;
margin: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

12 浮动布局

正常文档流就是我们没有使用浮动或者定位去改变的默认情况，按照从上到下，从左到右顺序的元素布局情况。

12.1 定义浮动

语法：

float: 取值

说明：

属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>

12.2 清除浮动

语法：

clear: 取值;

说明：

clear属性值

属性值	说明
left	清除左浮动
right	清除右浮动
both	同时清除左浮动和右浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>

13 定位布局

13.1 固定定位

语法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到顶部</div>
        <div id="s2">
            <p>内容区</p>
            ......
        </div>
    </div>
</body>
</html>

13.2 相对定位

相对定位，指的是该元素的位置是相对于它的原始位置计算而来的

语法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.3 绝对定位

把元素定位到任意你想要的位置，完全脱离文档流

语法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.4 静态定位

用法：

position: static;

说明：

元素position属性的默认值是static

TML

基本概念

HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS 样式是表现。比如，标题字体、颜色变化，或为标题加入背景图片、边框等，所有这些用来改变内容外观的东西称之为表现。
JavaScript 是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变，还有焦点新闻（新闻图片）的轮换。有动画的，有交互的一般都是用 JavaScript 来实现的。

2.常用标签

强调语气：<em>是斜体，<strong>是加粗
引用：<q>短文本引用，<blockquote>长文本引用
换行 <br />
水平横线 <hr />
空格  
表格 <table><tbody>
加上后表格内容全部下载完才会显示
行 <tr>
列 <td>
表格表头 <th>
标题 <caption>
超链 <a>
例子：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
新标签打开：target="_blank"
图片 <img>，图像可以是 GIF，PNG，JPEG 格式的图像文件
例子：<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">
表单 <form>
文本域 <textarea>
例子 <textarea rows="行数" cols="列数">文本</textarea>
cols 多行输入域的列数；rows 多行输入域的行数。这两个属性可用 CSS 样式的 width 和 height 来代替：col 用 width、row 用 height 来代替
输入框 <input type="text/password" name="名称" value="文本" />
当 type=”text” 时，输入框为文本输入框
当 type=”password” 时, 输入框为密码输入框
单/复选框 <input type="radio/checkbox" value="值" name="名称" checked="checked"/>
当 type=”radio” 时，控件为单选框，同一组单选框 name 命名要一致
当 type=”checkbox” 时，控件为复选框
提交按钮 <input type="submit" value="提交">
重置按钮 <input type="reset" value="重置">
下拉列表框 ` `
value <option value="提交值">选项</option>
选中 selected="selected"
多选 multiple="multiple"
标签 <label for="控件id名称">，标签的 for 属性中的值应当与相关控件的 id 属性 值一定要相同

CSS

基本知识

CSS 样式由选择符和声明组成，而声明又由属性和值组成。

选择符：又称选择器，指明网页中要应用样式规则的元素。
声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号{}分隔。当有多条声明时，中间可以英文分号;分隔。

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。优先级遵循就近原则，一般来说，内联式 > 嵌入式 > 外部式。

内联式

例子 <p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式

外部式

例子：<link href="base.css" rel="stylesheet" type="text/css" />

CSS 选择器

常见的类选择器类型有如下几种：

标签选择器，.标签选择器名称{css样式代码;}
类选择器，.类选器名称{css样式代码;}
ID 选择器，＃类选器名称{css样式代码;}
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素
包含选择器，即加入空格 ,用于选择指定标签元素下的后辈元素
通用选择器，匹配html中所有标签元素，* {css样式代码;}类选择器和ID选择器都可以应用于任何元素，但 ID 选择器只能在文档中使用一次，可以使用类选择器词列表方法为一个元素同时设置多个样式，ID 选择器是不可以的。

子选择器和包含选择器区别：>作用于元素的第一代后代，空格作用于元素的所有后代。

另外还有两种选择符：

伪类选择符，允许给 HTML 不存在的标签（标签的某种状态）设置样式。常用的有 a:hover{color:red;}
分组选择符，为 HTML 中多个标签元素设置同一个样式时，可以使用分组选择符,

。例如h1,span{color:red;}

CSS 的继承、层叠和特殊性

CSS 的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定 HTML 标签元素，而且应用于其后代。
特殊性：不同选择器具有不同权值，标签的权值为 1，类选择符的权值为 10，ID选择符的权值最高为 100。
层叠就是在 HTML 文件中对于同一个元素可以有多个 CSS 样式存在，当有相同权重的样式存在时，会根据这些 CSS 样式的前后顺序来决定，处于最后面的 CSS 样式会被应用。

CSS 格式化排版

文字排版

字体，body{font-family:"Microsoft Yahei";}
字号、颜色，body{font-size:12px;color:#666}
粗体，body{font-weight:bold;}
斜体，body{font-style:italic;}
下划线，body{font-style:italic;}
删除线，body{text-decoration:line-through;}

段落排版

缩进，p{text-indent:2em;}
行间距（行高），p{line-height:1.5em;}
中文字间距、字母间距，letter-spacing:50px;和word-spacing:50px;
对齐，div{text-align:center;}

CSS 盒模型

元素分类

在 CSS 中，HTML 中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

块级元素特点：

每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。

设置 display:block就是将元素显示为块级元素，从而使元素具有块状元素特点。

注：img 标签与 div 层之间会有空隙的解决方法是：使用 display:block 就可以消除间隙。

常用的内联元素有：

内联元素特点：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

块状元素也可以通过代码 display:inline将元素设置为内联元素。

常用的内联块状元素有：

inline-block 元素特点：

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码 display:inline-block就是将元素设置为内联块状元素。

盒模型

边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

单独设置下边框的例子 div{border-bottom:1px solid red;}

宽度和高度

CSS 内定义的宽（width）和高（height），指的是 填充以里的内容范围。一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

W3C 的标准 Box Model:

所以有时会设置 box-sizing: border-box;来避免计算内部元素大小

填充(padding)

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。

例子：

边界(margin)

元素与其它元素之间的距离可以使用边界（margin）来设置，顺序和填充一样是上，右，下，左。padding 在边框里，margin 在边框外。

CSS 布局模型

CSS 包含 3 种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：

流动模型（Flow）
浮动模型 (Float)
层模型（Layer）

流动模型

流动模型，流动（Flow）是默认的网页布局模式。

流动布局模型具有2个比较典型的特征：

块状元素 都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为 100%。实际上，块状元素都会以行的形式占据位置。
在流动模型下，内联元素 都会在所处的包含元素内从左到右水平分布显示。

浮动模型

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动。例子：#div1{float:left;}

层模型

CSS 定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)

绝对定位(position: absolute)

如果想为元素设置层模型中的绝对定位，需要设置 position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口。

相对定位(position: relative)

如果想为元素设置层模型中的相对定位，需要设置 position:relative（表示相对定位），它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按 static(float) 方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

简单来说，就是相对元素原来的位置进行移动，元素本身所占的位置会保留。

固定定位(position: fixed)

设置 position:fixed;。fixed：表示固定定位，与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与 background-attachment:fixed; 属性功能相同。

Relative 与 Absolute 组合使用,必须遵守下面规范：

参照定位的元素必须是相对定位元素的前辈元素
参照定位的元素必须加入 position:relative;
定位元素加入 position:absolute，便可以使用 top、bottom、left、right 来进行偏移定位了

例子(HTML 和 CSS 代码分别为)：

颜色和长度

设置颜色的方法也有很多种：

英文命令颜色，p{color:red;}
RGB颜色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}
十六进制颜色，这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}(当你设置的颜色是 16 进制的色彩值时，如果每两位的值相同，可以缩写一半，#0ff)RGB 配色表参考 RGB颜色对照表 - 在线工具 - 开源中国或者 RGB 配色表长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
像素
em，就是本元素给定字体的 font-size 值
% 百分比

设置小技巧

水平居中设置

行内元素。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center来实现的。
定宽块状元素(块状元素的宽度 width 为固定值)。满足定宽和块状两个条件的元素是可以通过设置“左右 margin”值为 auto 来实现居中的。
不定宽块状元素。

加入 table 标签(包括 <tbody>、<tr>、<td>)，为这个 table 设置“左右 margin 居中”
设置 display: inline方法：与第一种类似，显示类型设为行内元素，然后使用 text-align:center来实现居中效果，进行不定宽元素的属性设置。
给父元素设置 float 和 position:relative; left:50%，子元素设置 position:relative 和left: -50% 来实现水平居中。

垂直居中设置

父元素高度确定的单行文本。通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度；line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。
父元素高度确定的多行文本。使用插入 table (包括 tbody、tr、td)标签，同时设置 vertical-align：middle。

另外，为元素设置以下两个属性之一会隐形改变 display 类型，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

position: absolute

float: left 或 float:right

在线咨询

上一篇：前端需要了解的计算机网络知识，这一篇就够了！(图文
下一篇：最新HTML BroadcastChannel AP

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS文本属性，让你的段落更加美观，前端之路更进一步

文章预告

小海教材

小海声明

1 CSS样式引入方式

1.1 外部样式

1.2 内部样式

1.3 行内样式

2 基础选择器

2.1 元素选择器

2.2 类选择器

2.3 id选择器

2.4 通配符选择器

2.5 后代选择器

2.6 群组选择器

3 字体样式

3.1 字体类型

3.2 字体大小

3.3 字体粗细

3.4 字体风格

3.5 字体颜色

4 文本样式

4.1 首行缩进

4.2 水平对齐

4.3 文本修饰

4.4 大小写转换

4.5 行高

4.6 间距

5 边框样式

5.1 边框的宽度

5.2 边框的外观

5.3 边框的颜色

5.4 边框样式简写

5.5 边框局部样式

6 列表样式

6.1 列表项符号

6.2 列表项图片

7 表格样式

7.1 表格标题位置

7.2 表格边框合并

7.3 表格边框间距

8 图片样式

8.1 图片大小

8.2 图片边框

8.3 图片对齐

8.4 文字环绕

9 背景样式

9.1 背景颜色

9.2 背景图片

10 超链接样式

11 盒子模型

11.1 内容区

11.2 内边距

11.3 边框

11.4 外边距

12 浮动布局

12.1 定义浮动

12.2 清除浮动

13 定位布局

13.1 固定定位

13.2 相对定位

13.3 绝对定位

13.4 静态定位

TML

CSS

您的项目需求