html零基础必看——html入门，编程就是如此简单

第六章：颜色属性、文本文字属性

一、颜色样式（颜色取值法）
- 1.颜色属性值取值方法
二、字体样式
- 1. color 文字颜色
- 2.font-size 字体大小
- 3.font-style 文字倾斜样式
- 4.font-weight 字体粗细
- 5.font-family 字体类型，字体名称
- 6.line-height 行高
- 7.font-varian 小型大写字母显示文本
- 补充：vertical-align垂直基线对齐属性
三、文本属性
- 1.text-align 水平对齐方式
- 2.text-indent 首行缩进
- 3. text-decoration 文本线样式
- 4.text-decoration-color 文本线颜色
- 5.text-transform 字母大小写转换
- 6.letter-spacing 字间距
- 7.word-spacing 词间距
- 8.white-space 换行方式
- 9.word-break 长单词换行方式
- 10.文本溢出变为省略号...
四、属性继承
总结

一、颜色样式（颜色取值法）

1.颜色属性值取值方法

颜色属性常见有color、background-color。属性值：

英文取值:

如red、blue等，直接对应用相关颜色的英文

16进制取值：

通过一个以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。

如：#FFFF99 具体见16进制颜色表

可手动输入，也可以通过截图时，用截图工具复制色号

3.rgb值

RGB就是红绿蓝，就是英文的首字母，RGB是色光三原色。每个色彩值在0-255之间，0代表什么也没有是黑色，255代表色彩值最高，即为白色。

取值：0~255正整数，也可用百分比

如rgb(0,0,255) 具体见RGB颜色查询对照表

可手动输入，也可以通过截图时，用截图工具复制色号

rgba值

rgba值和rgb一样，只是多了一个a属性(alpha) a代表透明度 a取值范围: 0~1

如：(0,0,255，0.5)

透明色transparent

给的值就是透明的颜色

<head><title>颜色取值</title><link rel="stylesheet" href="rest.css"><style>/* 1.英文取值法： */.p1{color: red;/* color: pink; */}/* 2.16进制取值法： */.p2{color: #FFCC00;/* color: #FF99FF; */}/* 3.rgb取值法：r:红  g:绿 b:蓝色 三原色取值：0~255正整数 也可以百分比  */.p3{color: rgb(23, 187, 45);}/* 4.rgb取值法:和rgb一样 只是多了一个a属性(alpha) a代表透明度a取值范围: 0~1*/.p4{color: rgba(123, 34, 255,0.5);}/* 5. 透明的颜色 transparent，使文字变得透明 */.p5{color:transparent ;}</style>
</head>
<body><p class="p1">你好，我是p1</p><p class="p2">你好，我是p2</p><p class="p3">你好，我是p3</p><p class="p4">你好，我是p4</p><p class="p5">你好，我是p5</p>
</body>

效果图：

二、字体样式

修饰网页一下文字的特征 : 颜色大小粗细对齐方式等等

1. color 文字颜色

2.font-size 字体大小

取值：数值，单位：px em 百分比等（1em=16px）

字体默认大小是16px，最小值是12px。

3.font-style 文字倾斜样式

属性值：

italic 使字体倾斜

normal 使字体不倾斜
注意：除了i 、em 以外，其他字体的都是默认normal不倾斜

4.font-weight 字体粗细

属性值：

bold 定义粗的字体

bold 定义更粗的字体

lighter 定义更细的字体

normal 定义正常字体大小
注意：除了h1~h6，b，strong以外，其他字体的都是默认normal

5.font-family 字体类型，字体名称

一些常见字体类型：宋体、黑体、微软雅黑、楷体等

取值：直接引用相应字体对应中文汉字即可。如：font-family: 黑体;

注意：为了规范，在引用这些值时，可以用英文状态下‘ ’单引号，当然不用引号也不会报错；如：font-family: ‘黑体’。

<head><title>字体样式</title><link rel="stylesheet" href="rest.css"><style>p,em,i{color: red;font-size: 15px;}/* 文字倾斜样式 */.p2{/* font-style：italic使字体倾斜 */font-style: italic;}em,i{/* font-style: normal使字体不倾斜 ，除了i 、em 以外，其他字体的都是默认normal*/font-style: normal;}/* 字体粗细 */.p1{/* bold 定义粗的字体 */font-weight: bold;}.p2{/* bold 定义更粗的字体 */font-weight: bolder;}.p3{/* lighter  定义更细的字体*/font-weight: lighter;}.p4{/* normal 定义正常字体大小，除了h1~h6，b，strong以外，其他字体的都是默认normal */font-weight: normal;}.p5{/* 用数值100~900来控制，取值只能是整百【不要px单位】 */font-weight: 900;}/* 字体类型，字体名称 宋体、黑体、微软雅黑、楷体等取值：直接引用相应字体对应中文汉字即可【为了规范，在引用这些值时，可以用英文状态下‘’单引号，当然不用引号也不会报错 】需要引入其他特殊字体时，通过外部引入*/.p1{/* font-family: 黑体; */font-family: '宋体';}.p2{font-family: '楷体';}</style>
</head>
<body><p class="p1">你好，我是p1</p><p class="p2">你好，我是p2</p><em>你好，我是em</em><i>你好，我是i</i><p class="p3">你好，我是p3</p><p class="p4">你好，我是p4</p><p class="p5">你好，我是p5</p>
</body>

效果图：

6.line-height 行高

取值：数值（px）百分比

如果想要文字垂直居中，可设置line-height的值和height的值一样高就行了

7.font-varian 小型大写字母显示文本

所有的小写字母均会转换成大写，但是所有作用小型大写字母与其余文本相比，其字体尺寸更小。

取值：font-variant: small-caps

<head><title>字体样式</title><link rel="stylesheet" href="rest.css"><style>.div1 {width: 200px;height: 300px;background-color: red;}.div1>p {/* display: inline-block; */width: 100px;height: 50px;border: 1px solid yellow;line-height: 50px;}/* 行高  line-height取值：数值（px）  百分比如果想要文字垂直居中，可设置line-height的值和height的值一样高就行了*/.div2 {width: 200px;height: 100px;border: 1px solid red;line-height: 50px;}/* 小型大写字母显示文本 这意味着所有的小写字母均会转换成大写，但是所有作用小型大写字母与其余文本相比，其字体尺寸更小。font-variant: small-caps */.div2>.two{font-variant: small-caps;}</style>
</head>
<body><div class="div1"><p class="p1">你好，我是p1</p><p class="p2">你好，我是p2</p><p class="p3">你好，我是p3</p><p class="p4">你好，我是p4</p><p class="p5">你好，我是p5</p></div><div class="div2"><p class="one">hello ,html,css</p><p class="two">hello ,html,css</p></div>
</body>

效果图：

补充：vertical-align垂直基线对齐属性

属性值：

top:顶部对齐

middle：中部对齐

bottom：底部对齐

baseline : 默认对齐
关于上章讲到的基线对齐问题，就是给加上一个相同的对齐的属性值，顶部，中部，或底部对齐。详见上章三、4基线对齐问题

三、文本属性

1.text-align 水平对齐方式

属性值：

left 居左对齐

center 水平居中对齐

right 居右对齐

<style>.div1>p{width: 200px;height: 50px;background-color: thistle;margin-bottom: 10px;}/* 水平对齐方式： */.div1>.p1{/* 居左对齐 */text-align:left;}.div1>.p2{/* 水平居中对齐 */text-align:center;/* 加上行高line-height=height*/line-height: 50px;}.div1>.p3{/* 居右对齐 */text-align:right;text-indent: 10px;}
</style>
<body><div class="div1"><p class="p1">这是我的对齐方式</p><p class="p2">这是我的对齐方式</p><p class="p3">这是我的对齐方式</p></div>
</body>

效果图：

2.text-indent 首行缩进

取值：数值，单位px em 允允许使用负值。如果使用负值，那么首行会被缩进到左边。

<style>/* 首行缩进取值：数值，单位px em 允允许使用负值。如果使用负值，那么首行会被缩进到左边。*/.div2{width: 500px;height: 150px;border: 1px solid red;text-indent: 20px;/* text-indent: -20px; */}</style><div class="div2">这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。</div>

效果图：

3. text-decoration 文本线样式

属性值：

none 默认值，没有文本线
一般用来清除a链接的下划线

underline 下划线

overline 上划线

line-through 中划线
注意：del标签是删除线标签。一个是样式，一个是标签。

4.text-decoration-color 文本线颜色

<style>.div3>p{width: 200px;height: 50px;background-color: pink;margin-bottom: 10px;}/* 文本线样式 */.div3>.p1>a{/* none 默认值，没有文本线 */text-decoration: none;}.div3>.p2{/* underline 下划线 */text-decoration: underline;}.div3>.p3{/* overline 上划线 */text-decoration: overline;}.div3>.p4{/*  line-through 中划线del标签是删除线 */text-decoration: line-through;}/* 文本线颜色 */.div3>.p2{text-decoration-color: blue;}.div3>.p3,.div3>.p4{text-decoration-color: red;}</style><div class="div3"><p class="p1"><a href="">我是超链接</a></p><p class="p2">文本线</p><p class="p3">文本线</p><p class="p4">文本线</p><p class="p5">￥99 <del>原价：299</del> 我是删除线</p></div>

效果图：

5.text-transform 字母大小写转换

属性值：

none 默认值，不变

uppercase 首字母大写

capitalize 字母全部变为大写

lowercase 字母全部变为小写

6.letter-spacing 字间距

它是控制字与字（字母与字母），即字符之间的距离。
属性值：数值，单位：px、em。

7.word-spacing 词间距

它是控制单词与单词之间的距离，即控制本身就有空格的这个空格距离。
属性值：数值，单位：px、em。

二者区别：

letter-spacing 控制的是单个汉字之间的距离，也可控制字母，符号等单个字符的距离，就相当于原本没有距离，硬是给拉开的距离。

word-spacing 控制的是英语单词之间的距离，一般为英文准备的，因为英文书写的时候使用空格分开单词。在中文时，除非中文间有空格，才能生效。就相当于，原本就有的距离，再次去控制这个原本就存在的距离。

<title>文本属性</title><link rel="stylesheet" href="rest.css"><style>.div1>p{width: 200px;height: 50px;background-color: pink;margin-bottom: 10px;}/* 字母大小写转换 */.div1>.p1{/* none 默认值，不变 */text-transform: none;}.div1>.p2{/* 首字母大写 */text-transform: uppercase;}.div1>.p3{/* 字母全部变为大写 */text-transform: capitalize;}.div1>.p4{/* 字母全部变为小写 */text-transform: lowercase;}.div2>p{width: 500px;height: 50px;background-color: green;margin-bottom: 10px;}.div2>.p2{/* 控制字与字（单个字符）之间的距离 */letter-spacing: 30px;}.div2>.p3{/* 控制以空格间隔开文字的间距（空格本身的宽度）*/word-spacing: 30px;}/* letter-spacing和word-spacing的 区别： 1.letter-spacing 控制的是单个汉字之间的距离，也可控制字母，符号等单个字符的距离，就相当于原本没有距离，硬是给拉开的距离。 2. word-spacing 控制的是英语单词之间的距离，一般为英文准备的，因为英文书写的时候使用空格分开单词。在中文时，除非中文间有空格，才能生效。就相当于，原本就有的距离，再次去控制这个原本就存在的距离。*/</style>
</head>
<body><div class="div1"><p class="p1">HELLO,i love html and css</p><p class="p3">HELLO,i love html and css</p><p class="p2">HELLO,i love html and css</p><p class="p4">HELLO,i love html and css</p></div><div class="div2"><p class="p1">你好,我是p。html and css ## ￥￥</p><p class="p2">你好,我是p。html and css ## ￥￥</p><p class="p3">你好,我是p。html and css ## ￥￥</p></div>
</body>

效果图：

8.white-space 换行方式

属性值：

normal 默认值，正常换行

nowrap 文本不换行

9.word-break 长单词换行方式

属性值：

normal 默认值，使用浏览器默认的换行方式

break-all 允许在单词内换行

keep-all 只能在半角空格或连字符处换行

<style>div{width: 150px;height: 100px;border: 1px solid red;margin-bottom: 10px;white-space: normal;}/* white-space 换行方式normal 默认值，正常换行nowrap 文本不换行*/.div2{white-space: nowrap;}.div3{/* *normal* 默认值，使用浏览器默认的换行方式 *//* break-all 允许在单词内换行 *//* word-break: break-all; */word-break: break-all;}.div4{/* keep-all* 只能在半角空格或连字符处换行。 *//* word-break: break-all; */word-break: keep-all;}</style>
</head>
<body><div class="div1">我爱学前端，零基础学HTML+CSS。</div><div class="div2">我爱学前端，零基础学HTML+CSS。</div><div class="div3">I love learning front end.I love learning front end</div><div class="div4">I love learning front end.I love learning front end</div>
</body>

效果图：

10.文本溢出变为省略号…

溢出内容隐藏 overflow:hidden

溢出显示方式 text-overflow 属性值： ellipsis 显示省略符号来代表被修剪的文本 clip 默认，裁剪文本

单行文字溢出部分变为…省略号，要有以下三个步骤（必不可少）

white-space: nowrap;给一个不换行属性，所以就会溢出

overflow:hidden; 溢出部分给隐藏起来

text-overflow: ellipsis 溢出的内容变为…

<head><title>溢出隐藏</title><link rel="stylesheet" href="rest.css"><style>.div1{width: 200px;height: 200px;background-color: pink;/* 将单行文字溢出部分变为…省略号，要有以下三个步骤（必不可少） *//*给一个不换行属性，所以就会溢出  */white-space: nowrap;/* 溢出隐藏了 */overflow:hidden;/* 溢出的内容变为... */text-overflow: ellipsis;}</style>
</head>
<body><div class="div1">我爱学前端，零基础学HTML+CSS。</div>
</body>

效果图：

单行文字溢出部分变为…省略号（了解一下即可，不必深究）

<head><title>溢出隐藏</title><link rel="stylesheet" href="rest.css"><style>
.div2{width: 200px;background-color: pink;/* 将多行文字溢出部分变为…省略号，要有以下五个步骤（必不可少） *//*给一个不换行属性，所以就会溢出  *//* 注意不要设置高度，默认由内容自己撑开 *//* 溢出隐藏了 */overflow:hidden;/* 溢出的内容变为... */text-overflow: ellipsis;display: -webkit-box;/* 这个数值代表想要第几行变为...省略号隐藏 */-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}</style>
</head>
<body><div class="div2">我爱学前端，零基础学HTML+CSS。我爱学前端，零基础学HTML+CSS。</div>
</body>

效果图：

四、属性继承

继承：一个子元素可以从祖先元素继承一些属性的值。
大部分的文本文字属性都会继承，而盒子本身的宽高边距边框等属性则不会继承。

总结

上述是小编为大家整理的颜色属性（颜色取值法）、字体样式、文本属性等部分进行了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。

CSS颜色属性、文本文字属性、属性继承相关推荐

前端基础(五)_CSS文本文字属性、背景颜色属性
CSS文本文字属性 1.文字属性 1.1.字号 font-size:38px; 浏览器默认16px; 1.2.字体 font-family: 如果字体名称包含空格,字体名称上加引号: 中文字体名称加引 ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
CSS多余的文本文字使用省略号显示
CSS多余的文本文字使用省略号显示 1.超出一行试用省略号(这里是使用uni-app开发小程序的代码,如果是其他的也是异曲同工之处) 效果如图所示 <view class="omit& ...
CSS基础(part8)--文本外观属性
学习笔记,仅供参考,有错必纠文章目录 CSS 文本外观属性 color:文本颜色 letter-spacing word-spacing line-height test-decoration te ...
Dreamweaver怎么用css设置基本的文字属性
在Dreamweaver中,我们可以利用css对插入文字的大小.颜色.字体等属性进行调整. font-size:调整文字大小实例: .h1{font-size:20px; } 若没有设置,dw默认为 ...
【攻破css系列——第二天】字体属性和文字属性
文章目录 1. 字体属性 1.1 定义 1.2 字体类型 1.2.1 定义 1.2.2 语法 1.2.3 使用实例 1.3 字体大小 1.3.1 定义 1.3.2 语法 1.3.3 使用实例 1.4 ...
CSS字体和文本的属性学习
CSS Fonts(字体)属性用于定义于字体系列.大小.粗细和文字样式 P { font-family: "微软雅黑"; } div { font-family: "Mi ...
五 . css系列之文本段落属性及应用
(一)CSS属性--文本属性.段落属性 1.color:修饰字体颜色,属性值可以是颜色名称(red/blue/green/gold,建议写常见的名称).十六进制.rgb值.rgba值 2.font-s ...

CSS颜色属性、文本文字属性、属性继承

第六章：颜色属性、文本文字属性

一、颜色样式（颜色取值法）

1.颜色属性值取值方法

二、字体样式

1. color 文字颜色

2.font-size 字体大小

3.font-style 文字倾斜样式

4.font-weight 字体粗细

5.font-family 字体类型，字体名称

6.line-height 行高

7.font-varian 小型大写字母显示文本

补充：vertical-align垂直基线对齐属性

三、文本属性

1.text-align 水平对齐方式

2.text-indent 首行缩进

3. text-decoration 文本线样式

4.text-decoration-color 文本线颜色

5.text-transform 字母大小写转换

6.letter-spacing 字间距

7.word-spacing 词间距

8.white-space 换行方式

9.word-break 长单词换行方式

10.文本溢出变为省略号…

四、属性继承

总结

CSS颜色属性、文本文字属性、属性继承相关推荐

最新文章

热门文章