网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS文本属性_第1页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS文本属性_第2页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS文本属性_第3页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS文本属性_第4页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS文本属性_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。

CSS3的属性CSS文本属性目录

CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题55.3CSS文本属性5.3.1文本颜色属性color语法：color:color示例代码如下。div{color:red;}/*颜色值为颜色名称*/div{color:#000000;}/*颜色值为十六进制值*/div{color:rgb(0,0,255);}/*颜色值为rgb函数值*/div{color:rgb(0%,0%,80%);}/*颜色值为rgb百分数*/5.3CSS文本属性5.3.2文本方向属性direction语法：direction:ltr|rtl|inherit示例代码如下。div{direction:rtl;unicode-bidi:bidi-override;}5.3CSS文本属性5.3.3字符间隔属性letter-spacing语法：letter-spacing:normal|length示例代码如下。div{letter-spacing:5px;}div{letter-spacing:0.5pt;}5.3CSS文本属性5.3.4行高属性line-height语法：line-height:length|normal|inherit5.3CSS文本属性5.3.5文本水平对齐方式属性text-align语法：text-align:left|right|center|justify示例代码如下。div{text-align:center;}5.3CSS文本属性5.3.6为文本添加装饰属性text-decoration语法：text-decoration:none|underline|blink|overline|line-through示例代码如下。div{text-decoration:underline;}a{text-decoration:underlineoverline;}

5.3CSS文本属性5.3.7段落首行缩进属性text-indent语法：text-indent:length示例代码如下。div{text-indent:-5px;}div{text-indent:underline10%;}5.3CSS文本属性5.3.8文本的阴影属性text-shadow语法：text-shadow:x_position_lengthength|y_position_length|blur|color示例代码如下。p{text-shadow:0px0px20pxyellow,0px0px10pxorange,red5px-5px;}p:first-letter{font-size:36px;color:red;text-shadow:red0px0px5px;}5.3CSS文本属性5.3.9文本的大小写属性text-transform语法：text-transform:none|capitalize|uppercase|lowercase示例代码如下。div{text-transform:uppercase;}5.3CSS文本属性5.3.10元素内部的空白属性white-space语法：white-space:normal|pre|nowrap示例代码如下。p{white-space:nowrap;}5.3CSS文本属性5.3.11单词之间的间隔属性word-spacing语法：word-spacing:normal|length示例代码如下。div{word-spacing:10;}div{word-spacing:10px;}5.3CSS文本属性5.3.12文本的截断效果属性text-overflow语法：text-overflow:clip|ellipsis示例代码如下。div{text-overflow:clip;white-space:nowrap;overflow:hidden;}5.3CSS文本属性5.3.13文本的换行方式属性word-break语法：word-break:normal|break-all|keep-all示例代码如下。div{word-break:break-all;}5.3CSS文本属性5.3.14单词断字属性word-wrap语法：word-wrap:normal|break-word示例代码如下。div{word-wrap:break-word;}5.3CSS文本属性【例5-13】设置文本样式案例，本例页面5-13.html的显示效果，如图所示。5.3CSS文本属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文本属性</title><styletype="text/css">h1{font-family:微软雅黑,黑体;/*设置字体类型*/font-size:36px;text-align:center;/*文本居中对齐*/color:#FF7F50;text-shadow:2px2px8pxchocolate;}h2{text-align:center;color:white;text-shadow:2px2px4px#000000;}.shadow{font-family:微软雅黑,黑体;font-size:30px;text-align:center;color:coral;text-shadow:5px5px3px,10px10px5pxyellow,15px15px8px#FF7F50,0-35pxred;}p{font-family:Arial,"TimesNewRoman";font-size:12pt;/*设置字体大小*/background-color:#ccc;/*设置背景色为灰色*/text-indent:2em;/*段落首行缩进2个父元素的宽度*/}p.indent{text-indent:2em;line-height:200%;/*设置行高为字体高度的2倍*/}p.ellipsis{width:300px;/*设置裁切的宽度*/height:20px;/*设置裁切的高度*/overflow:hidden;/*溢出隐藏*/white-space:nowrap;/*强制文本在一行内显示*/text-overflow:ellipsis;/*当文本溢出时显示省略标记（…）*/}5.3CSS文本属性.red{color:rgb(255,0,0);/*红色文本*/}.one{font-size:24px;text-decoration:underline;/*设置下划线*/}.two{font-size:24px;text-decoration:overline;/*设置上划线*/}.three{font-size:24px;text-decoration:line-through;/*设置贯穿线*/text-shadow:003px#FF0000;}</style></head><body><pid="p1">CSS文本属性</p><h1>CSS文本属性</h1><p>文本属性包括文本对齐方式、行高、<spanclass="one">文本修饰</span>、段落首行缩进、首字下沉、文本截断、文本换行、文本颜色及背景色等。<spanclass="two">字体属性</span>主要涉及文字本身的效果，而<spanclass="three">文本属性</span>主要涉及多个文字的排版效果。</p><pclass="indent">text-overflow属性可以实现文本的截断效果。本属性需要配合overflow:hidden和white-space:nowrap才能生效。</p><h2>白色文本的阴影效果！</h2><pclass="ellipsis">要实现溢出文本显示省略号的效果，除了使用text-overflow属性以外，还必

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论