CSS学习03：CSS文本属性

文本颜色★

文本颜色总结

文本对齐★

文本对齐总结

修饰文本

文本缩进

文本缩进总结

行高

文本颜色★

color用来自定义文本的颜色属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {/* 1. 预定义颜色，例如 英语单词代表的颜色 red pink 平常讲新知识时常用*/color: pink;}span {/* 2. 十六进制颜色，工作中最常用 *//* 在计算机中常见进制 二进制（0~1） 八进制（0~7） 十进制（0~9） 十六进制（0~9 a~f） *//* #000 黑色 #fff白色  #ccc 灰色 *//* 如 color: #6a9955;  */                /* 十六进制表示颜色时，六个值 两个两个一组 如果每一组都时相同的可以用一个表示#aabbcc --> #abc #ffffff -- > #fff#ab0022 --✖-->不能缩写*/color: #baf;}div {/* 3. rgb 里面每一个值取值范围0~255  很少用*/color: rgb(0, 255,255);}</style>
</head>
<body><p>预定义颜色</p><span>十六进制颜色</span><div>RGB的颜色设置</div>
</body>
</html>

图例：

文本颜色总结

表示方式	属性值
预定义的颜色值	red、green、blue、pink……
十六进制	#000 #aaa #6a9955 #3a4f6a …… 十六进制表示颜色时，六个值两个两个一组如果每一组都时相同的可以用一个表示
RGB	rgb(0,255,255) 或者 rgb(0,100%,100%)

表示方式

属性值

预定义的颜色值

red、green、blue、pink……

十六进制

#000 #aaa #6a9955 #3a4f6a ……

十六进制表示颜色时，六个值两个两个一组如果每一组都时相同的可以用一个表示

RGB

rgb(0,255,255) 或者 rgb(0,100%,100%)

文本对齐★

text-align 属性用于设置元素内文本内容的水平对齐方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {}.bg1 {/* 文本对齐  left 默认值*/text-align: left;}.bg2 {/* 让盒子内文字水平居中 */text-align: center;}.bg3 {/* 让盒子内文字水平居右 */text-align: right;}</style>
</head>
<body><p>文字对齐的方式</p><div class="bg1"><span style="width: 100px; height: 100px;background-color: red; color: white;">left</span></div><div class="bg2"><span style="background-color: green; color: white;">center</span></div><div class="bg3"><span style="background-color: blue; color: white;">right</span></div>
</body>
</html>

图例：

文本对齐总结

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

修饰文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {/* 取消下划线  最常用*/text-decoration: none;}p {/* 添加下划线 */text-decoration: underline;}div {/* 删除线 相当于 del标签 */text-decoration: line-through;}span {/* 添加上划线 */text-decoration: overline;}</style>
</head>
<body><a href="#">取消下划线</a><p>添加下划线</p><div>删除线</div><br><span>上划线</span>
</body>
</html>

图例：

属性值	说明
none	默认，没有装饰线（最常用，用于给超链接去除下划线）
underline	下划线。超链接自带（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

文本缩进

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 16px;/* 文本缩进 text-indent 值可以是px 也可以是 em*//* 首行缩进  px值可以是正，正值向右走。 也可以是负，负值向左走*/text-indent: 32px;/* em 是一个相对单位，相对于当前盒子上文字大小 *//* text-indent: 2em; */}div {text-indent: 100px;}span {/* 不是独占一行的盒子 不能使用 首行缩进代码 */text-indent: 50px;}</style>
</head>
<body><p>我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。</p><div>浔阳江头夜送客，枫叶荻花秋瑟瑟。</div><span>浔阳江头夜送客，枫叶荻花秋瑟瑟。</span>
</body>
</html>

图例：

文本缩进总结

文本缩进 text-indent 值可以是px 也可以是 em。

首行缩进， px值可以是正，正值向右走；也可以是负，负值向左走。

em 是一个相对单位，相对于当前盒子上文字大小。

不是块元素（独占一行的元素），不能使用文本缩进。

行高

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

行高 = 上间距+ 文字高度 + 下间距

也可以使父元素里的子元素垂直居中，可以搭配text-align来记忆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {/* 行高，设置行于行之间的距离 *//* 行高 = 上空隙 + 文字高度 + 下空隙 */line-height: 30px;/* 1.5代表的是行高是字体的1.5倍 */font:  16px/2.0 '微软雅黑';}</style>
</head>
<body><p class="p1">忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。</p><p>忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。</p>
</body>
</html>

图例：

CSS学习03：CSS文本属性相关推荐

CSS引入方式与文本属性
CSS引入方式与文本属性引入方式内部样式表行内样式表外部样式表文本属性文本对齐文本缩进文本颜色行间距装饰文本引入方式内部样式表 <!DOCTYPE html> &l ...
CSS学习笔记2字体属性和文本属性
CSS字体属性 CSS Fonts(字体)属性用于定义字体系列.大小.粗细和文字样式字体系列 CSS使用font-family属性定义文本的字体系列 p { font-family:"微软 ...
Web前端开发（三）--css优先级进阶，文本属性，元素类型转换，display，overflow，浮动，定位
一.选择器优先级进阶计算方式: 行间样式 1000 id 100 class 10 标签选择器 1 让每一个选择器对应的值相加,谁的值大谁的优先级就高. <!DOCTYPE html> ...
WEB代码：CSS字体样式、文本属性、背景样式、边框属性、鼠标样式、列表样式
1.字体样式: 1.字体样式 font-family 2.字体大小 font-size 3.字体类型 font-style 4.字体粗细 font-weight span{font-family: 微 ...
CSS学习笔记--CSS语法与选择器
导语 Css用于控制网页的样式和布局,指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素,这个样式通常存储在样式表中.在工作中通常使用的外部样式表,外部样式表 ...
CSS学习 | 《CSS揭秘》读书笔记——第一章
第一章引言 web标准标准的制定过程:CSS规范通常是由CSS工作组的成员来编写的. 人员结构如:88%来自W3C会员公司的成员(比如浏览器厂商.主流网站.研究机构.常规技术公司等):7%特邀专家 ...
Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
CSS学习03之基本选择器
回顾有三种插入样式表的方法: 外部 CSS  <link rel="stylesh ...
CSS学习笔记---字体文本
字体字体的样式 font-size(用来设置文字所占框的大小) 设置文字的大小,浏览器中一般默认的文字大小都是16px font-size设置的并不是文字本身的大小, 在页面中,每个文字都是处在一个 ...
学习记录 --【零基础CSS学习】16.背景属性
目录一.背景颜色二.背景图片三.背景重复四.背景尺寸五.背景定位六.背景固定(不常用,仅作了解) 七.背景属性的简写一.背景颜色 1. background-color:合法的颜色值: ...

CSS学习03：CSS文本属性

文本颜色★

文本颜色总结

文本对齐★

文本对齐总结

修饰文本

文本缩进

文本缩进总结

行高

CSS学习03：CSS文本属性相关推荐

最新文章

热门文章