转行学前端的第 10 天 : 学习 CSS 文本格式

本文主要是介绍转行学前端的第 10 天 : 学习 CSS 文本格式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。

今日学习目标

今天工作这边发生了不愉快的事情，感觉学习心态有些受到影响，希望今天的学习能顺利一些，不要像昨天那样需要每个知识点都有很多分支。

昨天对于 CSS 背景属性 有一个基础了解，今天准备对于 CSS 文本格式进行一下了解，又是适合学习的一天，加油，小又又！！！！

文本颜色

基础说明

color颜色属性被用来设置文字的颜色。

body {color:#b0c4de;}
复制代码

默认值	not specified
继承	yes
版本	CSS1
JavaScript 语法	object.style.color="#FF0000"

示例

body {color:#b0c0de;}
h1 {color:#6495ed;}
p.ex {color:rgb(0,0,255);}
复制代码

注意事项！！！

请使用合理的背景颜色和文本颜色搭配，这样可以提高文本的可读性。

颜色值定义

值	描述
color	指定文本颜色。在 CSS 颜色值近可能的寻找一个颜色值的完整列表。
inherit	指定文本颜色，应该从父元素继承

具体的颜色值说明，详见颜色值定义

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

所有主要浏览器都支持color属性。

对齐方式

基础说明

text-align 属性用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐。

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

默认值	left if direction is ltr, and right if direction is rtl
继承	yes
版本	CSS1
JavaScript 语法	object.style.textAlign="right"

示例

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
复制代码

属性值

值	说明
`left`	把文本排列到左边。默认值：由浏览器决定。
`right`	把文本排列到右边。
`center`	把文本排列到中间。
`justify`	实现两端对齐文本效果。
`inherit`	规定应该从父元素继承 text-align 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

所有主要浏览器都支持text-align属性。

文本修饰

基础说明

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。

text-decoration 属性是以下三种属性的简写：

text-decoration-line
text-decoration-color
text-decoration-style

默认值	none
继承	yes
版本	CSS1
JavaScript 语法	object.style.textDecoration="overline"

示例

h1 {
  text-decoration: underline overline dotted red;
}

h2 {
  text-decoration: underline overline wavy blue;
}
复制代码

这个用法感觉有点复杂，一次给这么多值~

属性值

值	说明
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

注意事项！！！

不建议强调指出不是链接的文本，因为这常常混淆用户。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

所有主要浏览器都支持text-decoration属性。

文本转换

基础说明

text-transform 属性控制文本的大小写。

默认值	none
继承	yes
版本	CSS1
JavaScript 语法	object.style.textTransform="uppercase"

示例

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
复制代码

属性值

值	说明
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 `text-transform` 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

所有主要浏览器都支持text-transform属性。

文本缩进

基础说明

text-indent 属性规定文本块中首行文本的缩进。

注意：负值是允许的。如果值是负数，将第一行左缩进。

默认值	0
继承	yes
版本	CSS1
JavaScript 语法	object.style.textIndent="50px"

示例

p {text-indent:50px;}
复制代码

属性值

值	说明
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

所有主要浏览器都支持text-indent属性。

今日学习总结

今日心情

今天对于 CSS 文本格式几个样式值，有了一个基础了解，今天感觉可能是心情不好，所以学习的时候感觉有些厌烦，学习进度有点受心情影响。

而且昨天发的文章中，后面又发现了一些错误，就是突然感觉自己这样一个人学的有点累，不知道这边学习方向是不是对的，感觉有些迷茫了，希望明天心态能好一些。

本文使用 mdnice 排版

这篇关于转行学前端的第 10 天 : 学习 CSS 文本格式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！