Java web开发 1.2 CSS技术 9.文本的CSS属性.ppt

下载文档 降价啦

1
0
约2.78千字
约 28页
2020-09-30 发布于北京
举报
版权申诉
保障服务

Java web开发 1.2 CSS技术 9.文本的CSS属性.ppt

1、本文档共28页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

实例——综合设置字体网页效果一级标题设为20像素，字体为“仿宋”，二级标题颜色为灰黑色，大小为16像素，字体为“微软雅黑”。正文段落首行缩进2字符，1.5倍行距。超链接去掉下划线，字体颜色为绿色，字体为“微软雅黑”。校训的内容显示为红色，斜体，隶书，字号20像素。 * svwsf * 人机交互设计 CSS层叠样式表页面设置关于文字的设置 CSS字体属性定义文本的字体系列、大小、加粗、风格、和变形等。第一部分字体的设置设置字体——font-family 设置字号——font-size 设置字体样式——font-style 设置字体加粗——font-weight 设置字体变体——font-variant 组合设置字体属性——font 设置颜色——color 1 设置字体——font-family 基本语法 font-family：字体1，字体2，字体3，……；语法说明 ? 应用font-family属性可以一次定义多个字体，而在浏览器读取字体时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体，则自动读取第二种字体，若第二种字体也找不到，则自动读取第三种字体，这样依次类推。如果定义的所有字体都找不见，则选用计算机系统的默认字体。 2 设置字号——font-size 基本语法 font-size:绝对尺寸|关键字|相对尺寸|百分比设置字号——font-size 语法说明绝对尺寸是指尺寸大小不会随着显示器分辨率的变化而变化，也不会随着显示设备的不同而变化。如用绝对尺寸设置的文字在显示器分辨率为960×600和分辨率为1024×768下所显示的大小是一样的。设置字号——font-size 语法说明使用绝对尺寸设置文字大小的时候一定要加上单位，如果没有加单位，浏览器会默认以px（像素）为单位。绝对尺寸可以使用的单位包括in（英寸）、px（像素）、cm（厘米）、mm（毫米）、pt（点）、pc（皮卡）。最常用的单位还是px（像素）。设置字号——font-size 语法说明相对尺寸是指尺寸大小继承于该元素属性的前一个属性单位值。这里要强调的是，如果是在该元素的font-size属性中使用cm为属性单位，那么将直接继承于父元素的font-size属性，若没有父元素，则参考浏览器的默认字号值。设置字号——font-size 语法说明绝对尺寸和相对尺寸也可以使用关键字来定义字号。绝对尺寸的关键字有七个，分别为xx-small（极小）、x-small（较小）、small（小）、medium（标准大小）、large（大）、x-large（较大）、xx-large（极大）。相对尺寸则仅有两个关键字，分别为larger（较大）和smaller（较小）。相对尺寸的larger是指在它的上一个关键字基础上扩大一级，smaller则是在它上一个关键字基础上缩小一级。设置字号——font-size 语法说明百分比是基于父元素中字体的大小为参考值的。 <style type="text/css"> .p1{ font-size:24px} .p2{ font-size:2cm} .p3{ font-size: 50%} </style> <body> <p class="p1">这是第一个样式</p> <p class="p2">这是第二个样式<span class="p3">这个是相对尺寸</span></p> <p>这是第三个样式</p> </body> 示例： 3 设置字体样式——font-style 基本语法 font-style:normal|italic|oblique 设置字体样式——font-style 语法说明设置字体样式——font-style 实例代码 <style type="text/css"> p{ font-size:96px; color:#FF0000} .p1{ font-style:normal} .p2{ font-style:italic} .p3{ font-style:oblique} </style> <p class="p1">这是第一个样式</p> <p class="p2">这是第二个样式</p> <p class="p3">这是第三个样式</p> 设置字体加粗——font-weight 基本语法 font-weight:normal|bold|bolder|lighter|number 设置字体加粗——font-weight 语法说明 5 设置字体变体——font-variant 基本语法 font-variant:norm