CSS基础学习-文字、文本的学习
CSS基础学习-文字、文本的学习
文字
字体属性
属性 | 描述 |
---|---|
font |
简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
font-family |
设置字体系列。 |
font-size |
设置字体的尺寸。 |
font-size-adjust |
当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。) |
font-stretch |
对字体进行水平拉伸。(CSS2.1 已删除该属性。) |
font-style |
设置字体风格。 |
font-variant |
以小型大写字体或者正常字体显示文本。 |
font-weight |
设置字体的粗细。 |
指定字体系列
使用 font-family
属性 定义文本的字体系列。
使用通用字体系列
如果你希望文档使用一种 sans-serif
字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:
body {font-family: sans-serif;}
这样用户代理就会从sans-serif
字体系列中选择一个字体(如 Helvetica
),并将其应用到 body 元素。因为有继承,这种字体选择还将应用到 body
元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。
指定字体系列
除了使用通用的字体系列,还可以通过 font-family
属性设置更具体的字体。下面的例子为所有h1
元素设置了Georgia
字体:
h1 {font-family: Georgia;}
这样的规则同时会产生另外一个问题,如果用户代理上没有安装 Georgia
字体,就只能使用用户代理的默认字体来显示h1
元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题:
h1 {font-family: Georgia, serif;}
如果没有安装 Georgia
,但安装了 Times
字体(serif
字体系列中的一种字体),用户代理就可能对h1
元素使用 Times
。尽管 Times
与Georgia
并不完全匹配,但至少足够接近。因此,我们建议在所有font-family
规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。如果对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:
p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}
根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif
字体。
使用引号
上面的例子中使用了单引号。只有当字体名中有一个或多个空格(比如 New York
),或者如果字体名包括 #
或 $
之类的符号,才需要在 font-family
声明中加引号。单引号或双引号都可以接受。但是,如果把一个 font-family
属性放在 HTML 的 style
属性中,则需要使用该属性本身未使用的那种引号:
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
'New York', serif;">...</p>
字体风格
font-style
属性最常用于规定斜体文本。
该属性有三个值:
normal
- 文本正常显示italic
- 文本斜体显示oblique
- 文本倾斜显示
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
italic
和oblique
的区别
font-style
非常简单:用于在normal
文本、italic
文本和oblique
文本之间选择。唯一有点复杂的是明确 italic
文本和oblique
文本之间的差别。斜体(italic
)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique
)文本则是正常竖直文本的一个倾斜版本。通常情况下,italic
和 oblique
文本在 web 浏览器中看上去完全一样。
字体变形
font-variant
属性可以设定小型大写字母。小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。
实例
p {font-variant:small-caps;}
字体加粗
font-weight
属性设置文本的粗细。使用 bold
关键字可以将文本设置为粗体。关键字 100 ~ 900
为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100
对应最细
的字体变形,900
对应最粗
的字体变形。数字 400 等价于 normal
,而 700
等价于 bold
。如果将元素的加粗设置为 bolder
,浏览器会设置比所继承值
更粗的一个字体加粗。与此相反,关键词lighter
会导致浏览器将加粗度下移而不是上移。
实例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小
font-size
属性设置文本的大小。有能力管理文本的大小在 web 设计领域很重要。但是,不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。请始终使用正确的 HTML 标题,比如使用 <h1> - <h6>
来标记标题,使用<p>
来标记段落。font-size
值可以是绝对或相对值。
绝对值:
- 将文本设置为指定的大小
- 不允许用户在所有浏览器中改变文本大小(不利于可用性)
- 绝对大小在确定了输出的物理尺寸时很有用
相对大小:
- 相对于周围的元素来设置大小
- 允许用户在浏览器改变文本大小
注意:如果没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em
)。
使用像素来设置字体大小
通过像素设置文本大小,可以对文本大小进行完全控制:
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
在 Firefox, Chrome, and Safari 中,可以重新调整以上例子的文本大小,但是在 Internet Explorer 中不行。
虽然可以通过浏览器的缩放工具调整文本大小,但是这实际上是对整个页面的调整,而不仅限于文本。
使用 em
来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em
单位代替 pixels
。W3C 推荐使用 em 尺寸单位。1em
等于当前的字体尺寸。如果一个元素的 font-size
为 16 像素
,那么对于该元素,1em
就等于 16 像素
。在设置字体大小时,em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素
。因此1em
的默认尺寸是 16 像素
。可以使用下面这个公式将像素转换为 em
:pixels/16=em
(注:16
等于父元素的默认字体大小,假设父元素的 font-size
为 20px
,那么公式需改为:pixels/20=em
)
实例
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
在上面的例子中,以 em
为单位的文本大小与前一个例子中以像素计的文本是相同的。不过,如果使用em
单位,则可以在所有浏览器中调整文本大小。不幸的是,在 IE 中仍存在问题。在重设文本大小时,会比正常的尺寸更大或更小。
结合使用百分比和 em
在所有浏览器中均有效的方案是为
body
元素(父元素)以百分比设置默认的 font-size
值:实例
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
更多实例
文本
文本属性
属性 | 描述 |
---|---|
color |
设置文本颜色 |
direction |
设置文本方向。 |
line-height |
设置行高。 |
letter-spacing |
设置字符间距。 |
text-align |
对齐元素中的文本。 |
text-decoration |
向文本添加修饰。 |
text-indent |
缩进元素中文本的首行。 |
text-shadow |
设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。 |
text-transform |
控制元素中的字母。 |
unicode-bidi |
设置文本方向。 |
white-space |
设置元素中空白的处理方式。 |
word-spacing |
设置字间距。 |
缩进文本
把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。CSS 提供了 text-indent
属性,该属性可以方便地实现文本缩进。通过使用text-indent
属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em
:
p {text-indent: 5em;}
注意:一般来说,可以为所有块级元素应用 text-indent
,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent
属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
使用负值
text-indent
还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:
p {text-indent: -5em;}
不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有长度单位,包括百分比值。百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%
,所影响元素的第一行会缩进其父元素宽度的 20%
。在下例中,缩进值是父元素的 20%
,即 100 个像素
:
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
继承
text-indent 属性可以继承,请考虑如下标记:
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
以上标记中的段落也会缩进 50 像素
,这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
水平对齐
text-align
是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。
它的前 3 个值相当直接,不过第 4 个和第 5 个则略有些复杂。
值 left
、right
和 center
会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读,所有 text-align
的默认值是 left
。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。
对于希伯来语和阿拉伯语之类的的语言,text-align
则默认为 right
,因为这些语言从右向左读。不出所料,center
会使每个文本行在元素中居中。
提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
text-align:center
与 <CENTER>
这里可能会认为 text-align:center
与 <CENTER>
元素的作用一样,但实际上二者大不相同。
<CENTER>
不仅影响文本,还会把整个元素居中。text-align
不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
justify
最后一个水平对齐属性是 justify
。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。两端对齐文本在打印领域很常见。需要注意的是,要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。
字间隔
word-spacing
属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing
属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing
设置一个负值,会把它拉近:
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
字母间隔
letter-spacing
属性与 word-spacing
的区别在于,字母间隔修改的是字符或字母之间的间隔。与 word-spacing
属性一样,letter-spacing
属性的可取值包括所有长度。默认关键字是 normal
(这与letter-spacing:0
相同)。输入的长度值会使字母之间的间隔增加或减少指定的量:
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
字符转换
text-transform
属性处理文本的大小写。这个属性有 4 个值:
none
uppercase
lowercase
capitalize
默认值 none
对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase
和lowercase
将文本转换为全大写和全小写字符。最后,capitalize
只对每个单词的首字母大写。
作为一个属性,text-transform
可能无关紧要,不过如果突然决定把所有 h1
元素变为大写,这个属性就很有用。不必单独地修改所有 h1
元素的内容,只需使用 text-transform
为你完成这个修改:
h1 {text-transform: uppercase}
使用 text-transform
有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改h1
元素本身。其次,如果以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。
实例
文本装饰
接下来,我们讨论 text-decoration
属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。text-decoration
有 5 个值:
none
underline
overline
line-through
blink
不出所料,underline
会对元素加下划线,就像 HTML 中的 U 元素一样。overline
的作用恰好相反,会在文本的顶端画一个上划线。值line-through
则在文本中间画一个贯穿线,等价于 HTML 中的 S
和 strike
元素。blink
会让文本闪烁,类似于 Netscape
支持的颇招非议的 blink
标记。none
值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:
a {text-decoration: none;}
注意:如果显式地用这样一个规则去掉链接的下划线,那么锚与正常文本之间在视觉上的唯一差别就是颜色(至少默认是这样的,不过也不能完全保证其颜色肯定有区别)。
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:
a:link a:visited {text-decoration: underline overline;}
不过要注意的是,如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。请考虑以下的规则:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
对于给定的规则,所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰,而没有下划线和上划线,因为 text-decoration 值会替换而不是累积起来。
处理空白符
white-space
属性会影响到用户代理对源文档中的空格
、换行
和 tab
字符的处理。通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的 XHTML 处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以给定以下标记,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:
<p>This paragraph has many
spaces in it.</p>
可以用以下声明显式地设置这种默认行为:
p {white-space: normal;}
上面的规则告诉浏览器按照平常的做法去处理:丢掉多余的空白符。如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。
值 pre
不过,如果将 white-space
设置为 pre
,受这个属性影响的元素中,空白符的处理就有所不同,其行为就像 XHTML 的 pre
元素一样;空白符不会被忽略。如果 white-space
属性的值为 pre
,浏览器将会注意额外的空格,甚至回车。在这个方面,而且仅在这个方面,任何元素都可以相当于一个 pre
元素。
值 nowrap
与之相对的值是 nowrap
,它会防止元素中的文本换行,除非使用了一个br
元素。在 CSS 中使用nowrap
非常类似于 HTML 4 中用 <td nowrap>
将一个表单元格设置为不能换行,不过 white-space
值可以应用到任何元素。
值 pre-wrap
和 pre-line
CSS2.1 引入了值 pre-wrap
和 pre-line
,这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。如果元素的white-space
设置为 pre-wrap
,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line
与 pre-wrap
相反,会像正常文本中一样合并空白符序列,但保留换行符。
总结
下面的表格总结了white-space
属性的行为:
值 | 空白符 | 换行符 | 自动换行 |
---|---|---|---|
pre-line |
合并 | 保留 | 允许 |
normal |
合并 | 忽略 | 允许 |
nowrap |
合并 | 忽略 | 不允许 |
pre |
保留 | 保留 | 不允许 |
pre-wrap |
保留 | 保留 | 允许 |
文本方向
如果阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。
不过,并不是所有语言都如此。
我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。
CSS2 引入了一个属性来描述其方向性。
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释:对于行内元素,只有当 unicode-bidi
属性设置为 embed
或bidi-override
时才会应用 direction
属性。
direction 属性有两个值:ltr
和 rtl
。大多数情况下,默认值是 ltr
,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl
。
原文地址:https://www.cnblogs.com/hirak0/p/15232654.html
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(1)表结构
- Centos7修改默认网卡名(改为eth0)以及网卡启动报错RTNETLINK answers: File exists处理
- 通过企业分布式缓存共享运行时数据
- 移植SlidingMenu Android library,和安装example出现的问题解决
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(2)插入记录
- Centos中yum方式安装java
- 微信小程序新革命催生新物种新物种带来大红利!玩转行业新玩法
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(3)删除记录
- 部署Zipkin分布式性能追踪日志系统的操作记录
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(4)显示记录
- Android 2.x中使用actionbar - Actionbarsherlock (2)
- python读txt和xml
- 让Jexus支持高并发请求的优化技巧
- 数据压缩算法LZO (C#)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- laravel框架添加数据,显示数据,返回成功值的方法
- PHP的静态方法与普通方法用法实例分析
- 解决PHP使用CURL发送GET请求时传递参数的问题
- php弹出提示框的是实例写法
- laravel 时间格式转时间戳的例子
- php新建文件的方法实例
- 解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
- PHP迭代器和生成器用法实例分析
- php中关于换行的实例写法
- laravel 获取当前url的别名方法
- php中文语义分析实现方法示例
- laravel 中某一字段自增、自减的例子
- php统计数组不同元素的个数的实例方法
- PHP实现单条sql执行多个数据的insert语句方法
- PHP的JSON封装、转变及输出操作示例