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

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

今日学习目标

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

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

文本颜色

基础说明

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

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

示例

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

注意事项！！！

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

颜色值定义

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

浏览器支持

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

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

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

对齐方式

基础说明

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

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

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

示例

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

属性值

浏览器支持

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

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

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

文本修饰

基础说明

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

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

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

示例

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

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

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

属性值

注意事项！！！

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

浏览器支持

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

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

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

文本转换

基础说明

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

示例

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

属性值

浏览器支持

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

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

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

文本缩进

基础说明

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

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

示例

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

属性值

浏览器支持

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

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

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

今日学习总结

今日心情

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

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

本文使用 mdnice 排版