网页设计与制作实例教程12-css基础

网页设计与制作实例教程12-css基础

ID:13250639

大小:113.50 KB

页数:15页

时间:2018-07-21

网页设计与制作实例教程12-css基础_第1页
网页设计与制作实例教程12-css基础_第2页
网页设计与制作实例教程12-css基础_第3页
网页设计与制作实例教程12-css基础_第4页
网页设计与制作实例教程12-css基础_第5页
资源描述:

《网页设计与制作实例教程12-css基础》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、13.CSS基础网页设计与制作实例教程CascadingStyleSheet层叠样式表网页包括的内容和样式。CSS就是让内容和样式分离开来,HTML只控制网页的内容,内容的样式由CSS来控制。CSS的优点可以更加精细的控制网页的内容。比HTML更加丰富。便于重用、修改基于Web标准的网页设计方法的设计基础CSS样式的优点:只修改一个.css文件就可以改变页数不定的外观和格式(避免了一个一个网页的修改,大大减少了重复劳动的工作量。)可以“随心所欲”地控制页面布局和外观;在所有浏览器和平台之间具有较好的兼容性;精简网页,提高下载速度(简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,

2、加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次))。第一个CSS第一个CSS应用了s1样式,绿色,字体大小57px

应用了s2样式,字体为红色CSS属性与属性值固定简化语法如下:

3、>常用属性文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值:left(居左,缺省值)right(居右)center(居中)justify(两端对齐)示例代码如下:.p2{text-align:right}文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值:none(无,缺省值)underline (下划线)overline(上划线)line-through(当中划线)示例代码如下:.p2{t

4、ext-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(百分比,相当于父对象高度

5、的百分比)示例代码如下:.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

6、,行高为14px,文字水平对齐方式为右对齐。作业2自己建一个css文件,完成下列样式的定义(1)h1:红色,字体大小12px,bold。(2)#f3:幼圆,水平居中,字符间距:10px,下划线。(3).s1:绿色,行高:150%,首行缩进:25px。在html中调用这个css文件中的这三个样式。

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。