CSS Lesson_01 CSS控制文本显示效果
本帖最后由 happyking 于 2019-5-27 14:12 编辑CSS控制文本显示效果一 控制字体显示1.1 设置字体: font-familyfont-family:"字体1","字体2","字体3"可以为文字设置多个字体,当找不到一个字体时,使用第二个字体显示,如果第二个也找不到,就以第三个字体显示,依次类推,如果都找不到,则以浏览器默认的字体显示
1.2设置字体大小: font-sizefont-size:字体的字号文本的字号可以设置为固定值,也可以设置为相对高度,相对于父亲的高度
1.3设置斜体效果: font-stylefont-style:normal / italic / obliquefont-style可以取normal(正常字体) italic(倾斜字体) 和 oblique(偏斜体)3种
1.4设置加粗字体: font-weightfont-weight:字体的粗度字体的粗度可以用数值表示,也可以使用英文字母表示,如下表所示:
字体的粗细取值含 义
100～900数值越小字体也越细，要求所取的数值是整百的，即只有100、200、300 等
normal正常字体效果
bold加粗字体，字体的粗细与设置为700 基本相同
bolder特粗字体，在加粗字体的基础上再加粗，相当于设置为900 的效果
lighter细体字，相对默认字体更细一些
1.5设置英文大小写 font-variantfont-variant: normal / small-capsnomal:以正常字母形式显示small-caps:将所有小写字母转换成大写字母显示
1.6文本转换大小写: text-transformtext-transform:none / capitalize / uppercase / lowercasenone:不转换capitalize:设置首字母大写uppercase:设置字母转换为大写lowercase:设置字母转换为小写
1.7字体复合属性: font可以按顺序设置如下属性：
[*]font-style
[*]font-variant
[*]font-weight
[*]font-size/line-height
[*]font-family
font:是否斜体 是否同宽 是否粗体 大小 字体名称(顺序不能变)font:italic bold 200px 黑体;
1.8字内换行: word-break字内换行属性是针对英文单词设置,当文本超出浏览器宽度时,在默认情况下会自动换行,但如果正好在较长英文单词中间，那么整个单词都会被移动到下一行显示。使用字内换行属性可以将英文单词打散显示，也可以设置在换行前或换行后整体显示。word-break:normal / break-all / keep-allnormal:正常显示break-all:允许非亚洲语言文本行的任意字内断开keep-all:与所有非亚洲语言的normal 相同，对于中文、韩文和日文不允许断开
1.9超过容器边界时的换行: word-wrapword-wrap:normal / break-wordnormal:默认break-word:强制换行
1.10设置文字修饰: text-decoration设置文本带有下画线,上画线,删除线等text-decoration:underline / overline / line-through / blink / none
值描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。只有在Netscape 浏览器中才能看到效果
inherit规定应该从父元素继承 text-decoration 属性的值
1.11单词间隔: word-spacing设置英文单词之间的间隔,对中文文本不起作用word-spacing:normal / 长度值normal: 以默认间隔显示长度值: 需要设置相应的单位,如果为负数,则在默认的基础上缩小
1.12字符间隔: letter-spacing字符间隔是两个字符之间的间隔,它对英文文本,中文文本都起作用letter-spacing:normal / 长度值normal: 以默认间隔显示长度值: 需要设置相应的单位,如果为负数,则在默认的基础上缩小
1.13字体颜色: colorcolor:颜色代码 / 颜色名称颜色代码: 十六进制数颜色名称: 颜色的英文名
二 控制文本显示效果文本的显示效果,包括文本的对齐,缩进,空白,方向等等2.1 文本的水平对齐: text-aligntext-align:left / right /center / justifyleft:左对齐right:右对齐center:居中对齐justify:两边对齐
2.2 垂直对齐: vertical-align垂直对齐vertical-align属性,用于设置文本和其他元素(一般是上一级元素或者同行的其他元素)的垂直对齐方式vertical-align: baseline / sub / super / top / bottom / text-top / middle / text-bootom / 百分比
vertical-align取值含义
baseline设置文本和上级元素的基线对齐
sub设置文本显示为上级元素的下标,常在数组中使用
super设置文本显示为上级元素的上标,常用于设置某个数值的乘方数
top使文本元素和同行中最高的元素上端对齐
bottom使文本元素和同行中高度最低的元素向下对齐
text-top使文本元素和上级元素的文本向上对齐
middle假如元素的基线与上级元素的x高度的一半相加值为H,则文本与高度H的中心点纵向对齐.其中,x是指字母"x"的高度
text-bootom使文本元素和上级元素的文本向下对齐
百分比是相对于元素行高属性的百分比，会在上级元素基线上增高指定的百分比。如果取值为正数则表示增加设置的百分比；反之取值为负数，则表示减少相应的百分比
https://img-blog.csdnimg.cn/2019052713421856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29IYXBweUtpbmcxMg==,size_16,color_FFFFFF,t_70data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==.align_baseline{vertical-align: baseline;}<div><img class="align_baseline" src="1.jpg"/>对齐方式baseline</div>注意 这里是对img标签设置vertical-align 属性
2.3 文本方向与排序: direction与unicode-bididirection: ltr / rtl / inheritunicode-bidi: normal / bidi-override / embeddirectionltr:从左往右排列rtl:从右往左排列unicode-bidinormal: 默认值bidi-override: 严格按照direction属性值重排序embed: 表示按照文本方向属性在对象内部进行隐式重排序https://img-blog.csdnimg.cn/20190527134026755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29IYXBweUtpbmcxMg==,size_16,color_FFFFFF,t_70data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==
2.4 文本书写模式: writing-modewriting-mode 属性定义了文本内容的排列顺序，在默认情况下，文字是从左到右，写满一行后再从上向下移动一行；使用writing-mode 属性可设置文字排列是先从上到下，然后再从右到左。writing-mode: tb-rl / lr-tbtb-rl: 表示文字先从上到下排列,然后从右到左排列lr-tb: 表示文字先从左到右排列,然后从上到下排列 默认排列div{width: 200px;background: #ccccff;writing-mode:tb-rl;}<div><h2>静夜思</h2><p>床前明月光，</p><p>疑是地上霜。</p><p>举头望明月，</p><p>低头思故乡。</p></div>https://img-blog.csdnimg.cn/2019052713404513.pngdata:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==
2.5 文本溢出: text-overflow该属性用来定义文本内容超出元素定义范围时的显示方式text-overflow: clip / ellipsisclip: 裁切超出的文本区域ellipsis: 超出文本以省略号显示注: 设置text-overflow属性时,必须将overflow属性设置为hidden才行.
2.6 文本缩进: text-indenttext-indent:长度值需要设置长度值和单位,如果设置为负数,则表示突出效果
三 其他文本效果3.1 文本行高: line-heightline-height:高度值高度值可以为百分比,表示基于字体的相对高度,也可以是绝对数值,注意加单位
3.2 处理空白: white-space该属性用来设置页面对象内空白(包括空格和换行)的处理方式white-space: normal / pre / nowrapnormal: 默认效果 将连续多个空格合并成一个pre: 使用等宽字体显示预先格式化的文本nowrap: 表示强制在一行内显示所有文本,直到文本结束或者遇到</br>标签
本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oHappyKing12/article/details/90601861 【11RIA 闪客社区，评分公示】：
是否有价值：一般（银子 +10贡献 +1）
是否原创：否
是否翻译：否
如对自己的评分有疑问，则咨询版主、管理员等。 好详细！！！！ 好好学习！ {:1_122:}{:1_122:}{:1_122:}{:1_122:}{:1_122:} 好好学习！好好学习！好好学习！好好学习！ 好好学习！好好学习！好好学习！好好学习！ 好好学习！好好学习！好好学习！好好学习！好好学习！ 好好学习！好好学习！好好学习！好好学习！ 好好学习！好好学习！好好学习！好好学习！好好学习！好好学习！