- 1、本文档共15页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
网页设计与制作实例教程12-CSS基础
13.CSS基础 网页设计与制作实例教程 Cascading Style Sheet 层叠样式表 网页包括的内容和样式。 CSS就是让内容和样式分离开来,HTML只控制网页的内容,内容的样式由CSS来控制。 CSS的优点 可以更加精细的控制网页的内容。 比HTML更加丰富。 便于重用、修改 基于Web标准的网页设计方法的设计基础 CSS样式的优点: 只修改一个.css文件就可以改变页数不定的外观和格式(避免了一个一个网页的修改,大大减少了重复劳动的工作量。) 可以“随心所欲”地控制页面布局和外观; 在所有浏览器和平台之间具有较好的兼容性; 精简网页,提高下载速度(简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次))。 第一个CSS html head title第一个CSS/title style type=text/css !-- .s1 {font-size: 57px;color: green;} .s2 {color: red;} -- /style /head body p class=s1应用了s1样式,绿色,字体大小57px /p span class=s2应用了s2样式,字体为红色/span /body CSS属性与属性值 固定简化语法如下: style type=“text/css” !-- .样式名1{样式属性1:属性值;样式属性2:属性值; } .样式名2{样式属性1:属性值;样式属性2:属性值; } -- /style 常用属性 文本对齐属性(text-align) 这个属性用来设定文本的对齐方式。有以下值: left (居左,缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下: .p2 {text-align:right} 文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值: none (无,缺省值) underline?(下划线) overline (上划线) line-through (当中划线) 示例代码如下: .p2 {text-decoration: underline} 文本缩进属性(text-indent) 这个属性设定文本首行缩进。其值有以下设定方法: length (长度,可以用绝对单位(cm, mm, in, pt,?pc)或者相对单位 (em, ex, px)) percentage (百分比,相当于父对象宽度的百分比) 示例代码如下: .p1 {text-indent: 8mm} 行高属性(line-height) 这个属性设定每行之间的距离。其值有以下设定方法: normal (缺省值) length (长度,可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px)) percentage (百分比,相当于父对象高度的百分比) 示例代码如下: .p1 {line-height:1cm} 颜色属性(color) 用颜色属性(color)可以改变文本的字体颜色。示例代码如下: .p1{color:gray} 字间距属性(letter-spacing) 这个属性用来设定字符之间的距离。 normal (缺省值) length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px)) 示例代码如下: .p1 {letter-spacing: 3mm} 作业1:用CSS完成下列效果 1、文字为粗体,12px,斜体,带删除线(line-through),黑体 2、文字中都是大写字母,首行缩进为30px,字符间距为5px,行高为14px,文字水平对齐方式为右对齐。 作业2 自己建一个css文件,完成下列样式的定义 (1)h1:红色,字体大小12px,bold。 (2)#f3: 幼圆,水平居中,字符间距:10px,下划线。 (3).s1:绿色,行高:150%,首行缩进:25px。 在html中调用这个css文件中的这三个样式。 网页设计与制作实例教程 *
您可能关注的文档
- 综合楼结构加固工程招标文件 - 无锡市中医医院.doc
- 综合环境艺术设计1.ppt
- 综合英语二下册作文精华.doc
- 综合部内部控制体系.doc
- 综合部工作总结暨工作计划.doc
- 综英英翻中.doc
- 综合接地贯通地线施工工艺标准.doc
- 绿化中间验收记录表.doc
- 绿化养护承包费用计算.doc
- 绿化植物种植施工方法.doc
- 场营销的保密措施(2024版).docx
- 中成药治疗湿疹临床应用指南(2020年)_李邻峰.pdf
- 中成药治疗特发性少、弱精子...临床应用指南(2021年)_《中成药治疗优势病种临床应用指南》标准化项目组.pdf
- 1-3总则 标准通用术语.pdf
- 中成药治疗新生儿黄疸临床应用指南(2020年)_《中成药治疗优势病种临床应用指南》标准化项目组.pdf
- 中成药治疗溃疡性结肠炎临床...指南(精简版,2022年)_李军祥.pdf
- 中成药治疗更年期综合征临床应用指南(2020年)_《中成药治疗优势病种临床应用指南》标准化项目组.pdf
- 中成药治疗盆腔炎性疾病后遗...临床应用指南(2020年)_《中成药治疗优势病种临床应用指南》标准化项目组.pdf
- 2024年巴黎奥运会-考点汇编.docx
- 中成药辅助治疗甲状腺功能亢...临床应用指南(2021年)_《中成药治疗优势病种临床应用指南》标准化项目组.pdf
文档评论(0)