登录  /  注册

前端关于CSS文本_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:32:27
原创
998人浏览过


文本是网页中最重要的一种内容形式,文本几乎可以写在任何地方,块级元素中可以写行内元素中也可以写。文本都是由一个个字符组成的

,在css布局中,每一个字符都有一个em框,通常font-size设置的大小就是设置的em框的大小;这样再由这些各个字符的em框串在一起组成

的框就是这些文本的内容区。在没有行间距的情况下即line-height为1时,上下两行的内容区是紧紧相连的,此时font-size的大小就是基线

之间的距离大小。如果设置了line-height,在布局时就会用line-height减去font-size所得的值再一分为二平均分配在内容区的上下两端,

这样就得到了行内框。此时有两点特性:1.line-height 减 font-size 等于 行间距。2.line-height的值就是基线之间的距离大小。当然这

前提是line-height要大于font-size的。如果设置的line-height比font-size还要小,那么就会有负的行间距,这负的行间距外在表现就是

行与行之间会重叠,重叠的高度是他俩差的绝对值。


设置文本相关的样式有:
1.font-size 设置字体大小  语法|


2.font-family 设置字体类型  语法[]#,当设置多个类型的时候后面的是前面的备选


3.font-weight 设置字体加粗  语法bold|normal|100|200|...


4.font-style 设置字体倾斜   语法normal|italic


5.line-height 设置行高      语法normal|||
行高有一个要注意的地方就是在继承行高的时候,百分数和数字的继承是有区别的,数字是直接继承,就是说继承过来的line-height还是数
字,子元素的行高再根据这个数字进行计算。百分数是继承计算后的值,例如父元素line-height是50%,font-size是20px,那么子元素继承
的不是50%,而是20*50&=10px。


font的值缩写语法:[||]?[/?],最少要有大小和类型


6.text-shadow 设置文本阴影  语法none|[{2,3}&&?]  第一个值表示x轴的偏移,第二个值是y轴的偏移,第三个可选的值
是阴影模糊半径


7.text-decoration 设置文本划线  语法none|[underline||overline||line-through] 表示下划线、上划线、管穿线


8.text-overflow   设置文本溢出处理  语法clip|ellipsis    ellipsis表示溢出时加......省略号
这里要注意,text-overflow一般不单独使用,要配合overflow和white-space使用,例如h2 {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}


关于设置文本行的样式有:
1.text-align 这是设置水平对齐方式的,是设置所有行的,并且这个样式只能应用在块级元素。语法left|right|center|justify


2.vertical-align 这是设置垂直对齐方式的,只能应用于行内元素上,不能继承,设置的是这个行内元素中的文本相对于父元素中的文本的垂直位置。
语法baseline|sub|supper|top|...

3.text-indent 设置的是第一行的缩进,只能应用于块级元素。语法| 负数的缩进会把文本隐藏掉而不是溢出。

4.white-space 设置的是文本中换行和空格的处理  语法nowrap|pre|pre-wrap|pre-line
nowrap表示不换行
pre表示保留文本的换行和空格,并且在溢出时仍然不换行
pre-wrap表示保留文本的换行和空格,但在溢出时自动换行
pre-line 只保留换行

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号