博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第十章:为文本添加样式
阅读量:6177 次
发布时间:2019-06-21

本文共 1839 字,大约阅读时间需要 6 分钟。

本章内容:

1.选择字体的方法:在样式表中需要的选择器之后输入font-family:name。如:要将body元素的字体换成Geneva的代码:body{font-family:geneva;}。需要注意的是:虽然font-family属性是继承的,但是有几个元素不会继承父元素的字体设置,其中有表单的select、textarea、input 元素。但是可以强制它们继承父元素的字体设置,代码为:input,select,textarea{font-family:inherit;}

2.指定替代字体:字体列表成为字体栈,通常包括三个字体:希望使用的字体、一个或几个替代的字体、一个表示类属的标准字体。每个字体之间用逗号隔开。如:body{font-family:Geneva,Tahoma,sans-serif;}

3.创建斜体:font-style:italic(创建斜体)或oblique(创建倾斜文本)。注意:取消斜体是:font-style:normal。font-style属性时继承的。

4.应用粗体格式:输入:font-weight:blod 让文本显示为具有平均粗直的粗体。或者输入100~900之间100的倍数,400表示正常粗细,700代表粗体。再或者输入:bloder(更粗)或lighter(更细)。取消粗体格式:font-weight:normal。font-weight属性时继承的。

5.设置字体大小:(1)直接使用像素指定要使用的特殊字号。(2)用百分数、em或者rem指定相对于父元素文本的大小。使用em与百分比数的算法:要指定的字体的大小/父元素的字体大小=值。如:输入:font-size:字体大小值。

6.设置行高:行高指的是段落的行距,即段落内之间的距离。输入:line-height:n。这里的n是一个数字,它与元素的字体大小相乘,得出需要的行高。

7.设置字体颜色:输入:color:colorname。

8.设置背景:修改文本的背景颜色:background-color:colorname(颜色名称)或transparent(表示允许透过父元素的背景颜色)。使用背景图像作为背景:background-image:url(或者none表示不使用图像)。重复背景图像:输入:background-repeat:direction,这里的direction可以取四个值:repeat、repeat-x、repeat-y、no-repeat。控制背景图像是否随页面滚动:background-attachment:fixed(背景图像会附着在浏览器的窗口上)/scroll(访问者滚动页面时背景图像会移动)/local(只有访问者滚动背景图像所在的元素时,背景图像才会移动)。指定元素背景图像的位置:background-position_x y_,其中x和y可以表示为距离左上角的绝对距离或百分数。

9.控制间距:指定字间距:word-spacing:length这里的length是一个带单位的数字,如0.4em或5px。指定子偶间距:letter-spacing:length,这里的length是一个带单位的数字,如0.4em或5px。

10.添加缩进:text-indent:length 这里的length是一个带单位的数字,如1.5em或18px。

11.对其文本:输入:text-align:left(左对齐)/right(右对齐)/center(居中)。

12.修改文本的大小写:text-transform属性可以为样式定义文本的大小写。text-transform:capitalize让每个单词的首字母大写,text-transform:uppercase让所有字母大写,text-lowercase让所有字母小写,text-transform:none让文本保持原来的样子。

13.装饰文本:text-decoration:underline以添加下划线,或者输入overline以添加上划线,或者输入line-through以添加删除线。

14.设置空白属性:white-space:pre(让浏览器显示原文本中的所有空格和回车)、nowrap(确保所有空格不断行)、normal(按正常方式处理空格)。

转载于:https://www.cnblogs.com/koto/p/5008612.html

你可能感兴趣的文章
C#学习常用类(1002)---KeyValuePair<TKey, TValue> 结构
查看>>
浅谈grep命令查找匹配内容的使用、参数、正则
查看>>
磁盘配额
查看>>
UserInputControls用户输入控制
查看>>
我的友情链接
查看>>
Nginx+Lua架构开发目录贴
查看>>
mysql备份方法(热备)
查看>>
scala匿名函数
查看>>
vlan技术【实现】vlan简介和SVI实现不同vlan间通信
查看>>
scrapy爬虫初步尝试
查看>>
陈松松:视频制作不出来,跟这7个思维有九成关系
查看>>
形参和实参有何区别
查看>>
我的友情链接
查看>>
MySQL表结构的导入和导出MySQL表结构的导入和导出
查看>>
JavaSE 学习参考:Map容器遍历
查看>>
salt模块命令
查看>>
基于TBDS的flume异常问题排查过程
查看>>
2017/5 JavaScript基础7--- 数组
查看>>
网络时常断网的解决办法
查看>>
第八次作业及答案
查看>>