网页设计基础教程

网页设计基础教程

ID:11246586

大小:466.00 KB

页数:41页

时间:2018-07-11

网页设计基础教程_第1页
网页设计基础教程_第2页
网页设计基础教程_第3页
网页设计基础教程_第4页
网页设计基础教程_第5页
资源描述:

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

1、网页设计基础──CSS层叠样式表王建民1、css简介css是cascadingstylesheet的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。可以用以下三种方式将样式表加入到网页。1.1链入外部样式表文件可以先建立外部样式表文件(.css),然后使用html的link对象。示例如下:文档标题而在xml中,你应该如下例所示在声明

2、区中加入:1.2定义内部样式块对象你可以在你的html文档的和标记之间插入一个块对象。定义方式请参阅样式表语法。示例如下:文档标题

3、ead>请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。1.3内联定义内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:这一行字是灰色的

1.4css注释语法:/*……*/范例1:/*这里写注释*/范例2:/*这里写注释1这里写注释2这里写注释3*/2.1基本规则selector{property:value}参数说明:selector--选择符property:value--样式表定义。属性和属性值之间用冒号

4、(:)隔开。多个定义之间用分号(;)隔开。范例:H2{color:gray;}其中H2是选择符,color是属性,gray是值,整个{clor:gray}是一个声明,而H1{color:gray}就是一条规则。2.2分组让同一条规则应用于多个元素,也就是多个选择符,或者要将更多的样式应用于一个或一组元素。2.2.1分组选择符范例1:H2,P{color:gray;}范例2:body,table,th,td,h1,h2,h3,h4,p,strong,em,b,i{color:gray;}2.2.2分组声明范例1:H1{font:18pthelvetica;} H1{color:purple;}

5、 H1{background:blue;}范例2:H1{font:18pthelvetica;color:purple;background:gray;}范例3:H1,H2,H3{clor:gray;background:white;}2.3类和ID选择符html标记:

css范例:.warning{font-weight:bold;}html标记:
css范例:#first-line{font-weight:bold;}类和ID间的区别在于,首先,类可以给任何数量的元素分配相同的名称,而分配给多个元

6、素ID名称不能相同。其次,ID对元素应用何种样式声明都比类具有更高的优先级。2.4上下文选择html标记:

css范例:h1em{color:gray;}范例可翻译为:任何h1中的em元素颜色为灰色。规则:有多个选择符组成,选择符之间由空格间隔。2.5通用选择符css范例:*{color:black;}所有的元素为黑色。Css范例:body*ul{color:gray;}Body元素下的ul元素不为灰色,而其两级以下的ul元素为黑色。2.6相邻兄弟选择符css范例:h1+p{color:silver;}紧跟在h1后面的p元素的颜色为银色。不包含嵌套在h1中的

7、p元素。Css范例:h2+*{color:silver;}紧跟在h2后面的所有元素为银色。不包含嵌套在h2中的元素。2.7属性选择符css范例1:a[href]{text-decoration:none;}有href属性的a标记元素无下划线。css范例2:[class]{color:gray;}任何有class属性的标记元素为灰色。Html范例:

Clas

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

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

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