欢迎来到天天文库
浏览记录
ID:13250639
大小:113.50 KB
页数:15页
时间:2018-07-21
《网页设计与制作实例教程12-css基础》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、13.CSS基础网页设计与制作实例教程CascadingStyleSheet层叠样式表网页包括的内容和样式。CSS就是让内容和样式分离开来,HTML只控制网页的内容,内容的样式由CSS来控制。CSS的优点可以更加精细的控制网页的内容。比HTML更加丰富。便于重用、修改基于Web标准的网页设计方法的设计基础CSS样式的优点:只修改一个.css文件就可以改变页数不定的外观和格式(避免了一个一个网页的修改,大大减少了重复劳动的工作量。)可以“随心所欲”地控制页面布局和外观;在所有浏览器和平台之间具有较好的兼容性;精简网页,提高下载速度(简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,
2、加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次))。第一个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文件中的这三个样式。
此文档下载收益归作者所有