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

866

我是小又又,住在武汉,做了两年新媒体,准备用 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 排版