HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(中)课件_第1页
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(中)课件_第2页
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(中)课件_第3页
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(中)课件_第4页
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(中)课件_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

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

文档简介

1、 育知同创官网：HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(中)大家看到目前为止我们页面中显示的标签样式都是浏览器默认的一些样式，我们得设置成我们需要的样式，我们从以下几类样式讲起。一、 文字属性文字属性属性描述color字体颜色font-size字号 ,网页上常用字号大小为12px和14pxfont-family字体,网页常用的字体为”微软雅黑”，“宋体”,”黑体”font-weight字体加粗： bold 加粗 normalfont-style字体样式: normal | italic代码：<!DOCTYPE html><html><he

2、ad><meta charset="UTF-8"><title>文字属性</title><style type="text/css">bodyfont-size: 12px;font-family: "微软雅黑"h3color: red;p:first-of-typecolor:blue;h3 emfont-style: normal;color: greenyellow;p:first-of-type strongfont-weight: normal;color: pink;p

3、:last-of-type spanfont-weight: bold;p:last-of-type strongcolor: red;</style></head><body><h3>气象局<em>停发霾预警</em>？回应：正协商联合发布机制</h3><p>1月17日晚间，一张<strong>“关于暂停霾预报预警业务的通知”</strong>图片在微博上流传。图片中的文字写道：“各省辖市气象局，各直管县（市）气象局，省气象台：2017年1月17日18：36分接中国气象局预

4、报司电话通知，要求立即停止霾预报预警工作。请各单位接到本通知后，即刻停止制作和发布霾预报预警产品。对于出现能见度小于10KM的情况，可根据相对湿度，按照雾开展预报预警工作”，落款人为“科技与预报处”。</p><p><span>多位气象、环保系统人士分析称</span>，气象部门<em>不再发布霾预警</em>预报，意味着两部门正在进一步厘清职责划分，避免在公开发布中出现两种口径的“预警”引发误解。中央电视台天气预报节目主持人宋英杰在认证的微博上转发了这条消息，并评论表示：“我猜测是两部门在切磋新规，如何联合发布霾污染预警，

5、<strong>避免之前预警等级不一致的情况。</strong></p></body></html>页面效果二、 段落属性段落属性属性描述text-align文本对齐 属性值为:left/center/righttext-indent文本缩进属性值为2em/24px/-24px最小值设为-9999pxtext-decoration文本描述 属性值为:underline（下划线）、none 、 overline（上划线） 、 line-through（删除线）line-height文本行高 属性值为: 20px 150% 1.5text

6、-transform文字大小写转换 属性值分别是capitalize | uppercase | lowercase （ 将单词首字母转大写 | 所有字母转大写 | 所有字母转小写，只对英文单词起作用。） letter-spacing设置标签的字符之间的最小，最大和最佳间隙 ，属性值为:length, 值是 数值单位可以是px或em .word-spacing设置标签的单词之间的最小，最大和最佳间隙。或者说，单词之间空格的大小。值是 数值单位可以是px或em .white-space属性值：normal | nowrapnowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本

7、结束或者遭遇br对象代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文字、段落属性</title><style type="text/css">bodyfont-size: 12px;font-family: "微软雅黑"h3color: red;text-align: center;text-decoration: underline;letter-spacing: 2px;pte

8、xt-indent: 2em;line-height: 24px;p:first-of-typecolor:blue;h3 emfont-style: normal;color: greenyellow;p:first-of-type strongfont-weight: normal;color: pink;p:last-of-type spanfont-weight: bold;p:last-of-type strongcolor: red;</style></head><body><h3>气象局<em>停发霾预警</em&

9、gt;？回应：正协商联合发布机制</h3><p>1月17日晚间，一张<strong>“关于暂停霾预报预警业务的通知”</strong>图片在微博上流传。图片中的文字写道：“各省辖市气象局，各直管县（市）气象局，省气象台：2017年1月17日18：36分接中国气象局预报司电话通知，要求立即停止霾预报预警工作。请各单位接到本通知后，即刻停止制作和发布霾预报预警产品。对于出现能见度小于10KM的情况，可根据相对湿度，按照雾开展预报预警工作”，落款人为“科技与预报处”。</p><p><span>多位气象、环保系统人士分

10、析称</span>，气象部门<em>不再发布霾预警</em>预报，意味着两部门正在进一步厘清职责划分，避免在公开发布中出现两种口径的“预警”引发误解。中央电视台天气预报节目主持人宋英杰在认证的微博上转发了这条消息，并评论表示：“我猜测是两部门在切磋新规，如何联合发布霾污染预警，<strong>避免之前预警等级不一致的情况。</strong></p><p></p></body></html>页面效果另外对于text-transform、word-spacing常给英文的网站使用

11、代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文字、段落属性</title></head><body><p>sometimes, we need a little tears to clear the mist in our eyes, a little assurance to clear the doubts in our head, a little hug to nurse our ach

12、ing heart.</p></body></html>页面效果代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文字、段落属性</title><style type="text/css">ptext-transform: capitalize;word-spacing: 3px;</style></head><body><p&

13、gt;sometimes, we need a little tears to clear the mist in our eyes, a little assurance to clear the doubts in our head, a little hug to nurse our aching heart.</p></body></html>页面效果还有white-space是否换行的问题代码：<!DOCTYPE html><html><head><meta charset="UTF-8"

14、;><title>文字、段落属性</title><style type="text/css">pfont-family: "微软雅黑"width: 200px;</style></head><body><p>得不到的终归是风，强留千百次终究会走。人人都忙于自己的欢喜与悲伤，有时候习惯寂寞就好了。孤独的话说太多不被倾听更难过，给我个暂停键吧我真的累了。下面是小编为大家带来的一些感伤的qq个性签名短语。</p></body></html&g

15、t;页面显示效果在没有加white-space之前，超出宽度200px之后，文字会自动换行，但是加了white-space之后，文字超过宽度200px之后也不会换行。代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文字、段落属性</title><style type="text/css">pfont-family: "微软雅黑"width: 200px;white-space: no

16、wrap;</style></head><body><p>得不到的终归是风，强留千百次终究会走。人人都忙于自己的欢喜与悲伤，有时候习惯寂寞就好了。孤独的话说太多不被倾听更难过，给我个暂停键吧我真的累了。下面是小编为大家带来的一些感伤的qq个性签名短语。</p></body></html>页面效果总结：像font-size,font-family这两种属性常给body这个标签添加，因为对于整个页面来说，整个页面的字号和字体都是一样的，如果页面中其它的地方需要各别设置，再去设置就可以了，其它的文字段落属性需要给哪个

17、标签设置就给哪个标签设置。另外text-decoration: underline;除了underline这个属性值用的比较多之外，none用的也比较多，比如我们只要给文字添加超链接之后，文字就会带有下划线，那如果我们的文字不需添加超链接呢，我们通常给a标签添加一个这样的属性atext-decoration: none;, text-decoration的其它属性用的比较少。还有就是定属性的顺序没有顺序，先写哪个属性都中以。看代码：<!DOCTYPE html><html><head><meta charset="UTF-8">

18、;<title>文字、段落属性</title><style type="text/css"></style></head><body><a href="#">我加了超链接1</a><a href="#">我加了超链接2</a><a href="#">我加了超链接3</a></body></html>页面效果添加了atext-decoration: none;样式之后:代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文字、段落属性</title><style type

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论