![《网页设计》课件-3-5文本样式设置_第1页](http://file4.renrendoc.com/view14/M01/27/04/wKhkGWYifv6AJ-kRAACiiBWk9iE464.jpg)
![《网页设计》课件-3-5文本样式设置_第2页](http://file4.renrendoc.com/view14/M01/27/04/wKhkGWYifv6AJ-kRAACiiBWk9iE4642.jpg)
![《网页设计》课件-3-5文本样式设置_第3页](http://file4.renrendoc.com/view14/M01/27/04/wKhkGWYifv6AJ-kRAACiiBWk9iE4643.jpg)
![《网页设计》课件-3-5文本样式设置_第4页](http://file4.renrendoc.com/view14/M01/27/04/wKhkGWYifv6AJ-kRAACiiBWk9iE4644.jpg)
![《网页设计》课件-3-5文本样式设置_第5页](http://file4.renrendoc.com/view14/M01/27/04/wKhkGWYifv6AJ-kRAACiiBWk9iE4645.jpg)
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
文本样式设置目录◎设置CSS的字体属性◎文本属性1设置CSS的字体属性1.字体设置—font-family字体族科实际上就是CSS中设置的字体,用于改变HTML标签或元素的字体。语法:
font-family:"字体1","字体2","字体3";浏览器不支持第一个字体时,会采用第二个字体;前两个字体都不支持,则采用第三个字体,以此类推。浏览器不支持定义的所有字体,则会采用系统的默认字体。注意中文字体需要加英文状态下的引号,各字体之间必须使用英文状态下的逗号隔开。英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或者双引号,例如font-family:"arialblack";。2.字号大小—font-size字号大小属性用作修改字体显示的大小。语法:
font-size:大小取值;取值范围:绝对大小:xx-small|x-small|small|medium|large|x-large|xx-large;相对大小:larger|smaller;长度值或百分比。注意绝对大小根据对象字体进行调节。绝对大小的单位有px(像素)、in(英寸)、cm(厘米)、mm(毫米)、pt(点),推荐使用px。相对大小则是相对于父对象中字体尺寸进行相对调节,使用em的较多。百分比取值基于父对象中字体的尺寸。3.字体风格—font-style字体风格就是字体样式,主要是设置字体是否为斜体。语法:
font-style:样式的取值;取值范围:normal|italic|oblique。normal(缺省值)是以正常的方式显示;italic则是以斜体显示文字;oblique属于其中间状态,以偏斜体显示。4.字体加粗—font-weight字体加粗用于设置字体的粗细,实现对一些字体的加粗显示。语法:
font-weight:字体粗度值;取值范围:normal|bold|bolder|lighter|number。normal(缺省值)表示正常粗细;bold表示粗体;bolder表示特粗体;lighter表示特细体;number表示font-weight还可以取数值,其范围是100-900,实际项目开发中主要使用normal和bold。5.小型的大写字母—font-variant小型的大写字母用来设置英文字体是否显示为小型的大写字母。语法:
font-variant:取值;取值范围:normal|small-caps。normal(缺省值)表示正常的字体,small-caps表示英文显示为小型的大写字母字体。6.复合属性:字体—fontfont属性是复合属性,用作对不同字体属性的略写。语法:
font:字体取值;取值:字体风格、小型的大写字母、文本的粗细、字体大小、行高、字体族科之间使用空格相连接。注意font复合属性要按照固定的font-style、font-variant、font-weight、font-size/line-height、font-family的顺序编写,不需要的可以不写,但要保证顺序正确。举例演示【实例5-1】font字体设置。2文本属性1.颜色属性—colorcolor属性用来表示文本的颜色。
语法:
color:颜色代码注意颜色取值可以是颜色关键字,如red,blue,green,yellow等。颜色取值也可以十六进制来表示,例如#FF0000。颜色取值还可以使用RGB代码来表示。rgb(x,x,x)其中,x是基于0~255之间的整数,例如rgb(255,0,0)。使用rgb(y%,y%,y%)表示,y是一个介于0到100之间整数,例如rgb(100%,0%,0%)。这表示为红色,当值为0时百分号不能省略。2.文本行高—line-height行高属性用于控制文本基线之间的间隔值,或者说是行与行之间的距离。语法:
line-height:行高值;行高值通常使用像素px,相对值em和百分比%,实际开发中使用最多的是像素px。3.单词间隔—word-spacing单词间隔用来定义英文单词之间的间隔,对中文无效。语法:
word-spacing:取值;取值范围:normal|<长度>。normal是指正常的间隔,是默认选项;长度是设定单词间隔的数值及单位,允许使用负值。4.字符间隔—letter-spacing字符间隔和单词间隔类似,不同的是字符间隔用于设置字符的间隔数。语法:
letter-spacing:取值;5.文字修饰—text-decoration文字修饰属性主要是用于对文本进行修饰,如设置下划线、上划线、删除线等。语法:
text-decoration:修饰值;取值范围:none|[underline|overline|line-through]。none表示不对文本进行修饰,这是默认属性值;underline表示对文字添加下划线;overline表示对文本添加上划线;line-through表示对文本添加删除线。取值范围:normal|<长度>。normal是指正常的间隔,是默认选项;长度是设定单词间隔的数值及单位,允许使用负值。注意:text-decoration可以赋多个值。例如:text-decoration:underlineoverline;6.文本转换—text-transform文本转换属性仅被用于表达某种格式的要求,是用来转换英文文字的大小写的。语法:
text-transform:转换值;7.文本缩进—text-indent文本缩进属性用于定义HTML中块级元素(如p,hl等)的第一行可以接受的缩进数量,常用于设置段落的首行缩进。语法:
text-indent:缩进值;文本的缩进值必须是一个长度或一个百分比。若设定为百分比,则以上级元素的宽度而定,通常使用em为单位。取值范围:none|capitalize|uppercase|lowercase。取值中,none表示使用原始值;capitalize使每个字的第一个字母大写;uppercase使每个单词的所有字母大写;lowercase则使每个字的所有字母小写。8.文本水平对齐—text-align文本水平对齐用来设置文本水平对齐方式。语法:
text-align:排列值;9.处理空白—white-spacewhite-space属性用于设置页面对象内空白(包括空格和换行等)的处理方式。默认情况下,HTML中的连续多个空格会被合并成一个,而使用这一可以设置成其他的处理方式。语法:
white-space:值;取值范围:normal|pre|nowrap。其中,normal是默认属性,即将连续的多个空格合并;pre会导致源中的空格和换行符被保留;nowrap则表示强制在同一行内显示所有文本,直到文本结束或者遇到<br>对象。取值范围:left|right|center。其中,left为左对齐;right为右对齐;center为居中对齐。10.垂直对齐—vertical-alignvertical-align表示垂直对齐方式,用于设置一个行内元素的纵向位置,相对于它的上级元素或相对于元素行。行内元素是没有行在其前和后断开的元素,例如,在HTML中A和IMG。它主要用于对图像的纵向排列。语法:
vertical-align:排列取值;取值范围:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<百分比>。baseline使元素和上级元素的基线对齐;sub为下标;super为上标;top为使元素和行中最多的元素向上对齐;text-top使元素和上级元素的字体向上对齐;middle是纵向对齐元素基线加上上级元素的x高度的一半的中点,其中x高度是字母“x”的高度;text-bottom使元素和上级元素的字体向下对齐。注意:百分比是一个相对于元素行高属性的百分比,它会在上级基线上增高元素基线的指定数量。这里允许使用负值,负值表示减少相应的数量。;11.阴影效果—text-shadowtext-shadow属性可以为页面中的文本添加阴影效果。语法:
text-shadow:h-shadow值v-shadow值blur值color;12.对象内溢出文本—text-overflowtext-overflow属性用于标示对象内溢出的文本。语法:
text-overflow:clip|ellipsis;其中,clip表示修剪溢出文本,不显示省略标记“…”;ellipsis:用省略标记“...”标示被修剪文本,
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024教学场地租赁合同范本
- 河南省南阳市邓州市张村乡中学2024-2025学年初三下学期3月联考试题初三化学试题试卷含解析
- 河南省漯河市临颍县2023-2024学年三下数学期末考试试题含解析
- 河南省洛阳市伊滨区2024届三年级数学第二学期期末考试模拟试题含解析
- 河南省洛阳市名校2024年英语七下期末教学质量检测模拟试题含答案
- 考评员技能竞赛理论考试题库500题(含答案)
- 河南省洛阳市涧西区洛阳市达标名校2025年初三联合考试化学试题试卷含解析
- 第五届全国电力行业青年培训师教学技能竞赛考试题库-中(多选题)
- 2024年树木的买卖合同范本
- 2024年土地流转合同范本
- 中国共青团发展历史简介
- 保险行业承保、理赔和财务三环节的腐败治理,保险论文
- JJG 1044-2008卡尔·费休库仑法微量水分测定仪
- GB/T 2885.5-2008矿用窄轨车辆第5部分:平板车
- GB/T 21071-2021仓储服务质量要求
- GB/T 14229-2021齿轮接触疲劳强度试验方法
- 2020年1月浙江卷A puppy for poppy小狗的陪伴读后续写 课件 高三英语写作专项复习
- 队列会操评分表
- 中学思想政治课程标准与教材分析课件
- 样品加工流程及测试方法简介
- 灾后复工施工方案
评论
0/150
提交评论