网页编程技术第3章

网页编程技术第3章

ID:39816121

大小:741.50 KB

页数:80页

时间:2019-07-12

网页编程技术第3章_第1页
网页编程技术第3章_第2页
网页编程技术第3章_第3页
网页编程技术第3章_第4页
网页编程技术第3章_第5页
资源描述:

《网页编程技术第3章》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、通过本章学习,应该掌握以下内容:什么是CSSCSS样式和常用的selector在网页中使用CSS的方法CSS的各种属性第3章在网页中使用CSS样式第3章在网页中使用CSS样式3.1CSS简介3.2CSS样式3.3在网页中使用CSS的方法3.4CSS属性3.1CSS简介CSS(CascadingStyleSheet)——层叠样式表,它是一种格式化网页的标准方式,它通过设置CSS属性使网页元素获得各种不同效果。CSS不是一种程序设计语言,而只是一种用于网页排版的标识性语言,是对现有HTML语言功能的补充和扩展。CSS的主要功能是通过对HTML选择器进行设定,来实现对网页中的字

2、体、字号、颜色、背景、图像等其他元素的控制,使网页能够完全按照设计者的要求来显示。3.1.1CSS的特点将格式和结构分离控制页面布局制作体积更小下载更快的网页将许多网页同时更新浏览器成为更友好的界面3.1.2在网页中使用CSS的方式在标记符中直接嵌套样式信息(内嵌)HTML标记符的style属性在STYLE标记符中定义样式信息(插入)STYLE标记符样式定义链接外部样式表中的样式信息(引入)LINK标记符

3、text/css”href=“stylesheetname.css”>优先级内嵌>插入>引入>浏览器缺省设置3.2CSS样式3.2.1CSS样式表组成3.2.2几种常用的selectorCSS的定义由三部分构成:选择符selector、属性property和属性值value。其基本格式如下:selector{propertyl:valuel;property2:value2;……}selector(选择符)表示需要应用样式的标签(可以是HTML的标签,也可以是自己定义的标签)property表示由CSS标准定义的样式属性,value表示样式属性的值。3.2.1CSS样式表

4、组成如:h1{font-family:宋体;font-style:italic;color:red;}3.2.2几种常用的selectorHTML标记符是最典型的selector类型,网页设计者可以为某个或某些具体的HTML元素应用样式定义。如:BODY{color:black}如果属性的值是多个单词组成的,必须在值前加上双引号。如果需要对一个selector指定多个属性时,应使用分号将所有的属性和值分开。如:p{font-family:"sansserif";font-weight:bold}1.HTML标记符selector使用CSS的标记符设置CSS样式的方法,可以

5、对HTML的同一类型的标记元素设置统一的样式;使用class类选择符和ID选择符则可以对同一类型的的标记元素设置不同的样式,以及为不同类型的标记元素设置相同的样式。class类选择符格式如下:selector.classname{property:value;……}可以使用任何名称命名类,但通常使用具体含义的名称。2.用户定义的类selector.myh1{font-family:宋体;font-size:50pt;color:blue;}H2.s1{color:red}

6、text/html;carset=gb2312">类选择符通过类定义的格式myh1

没有通过类定义的格式myh1

这个p标签使用了类定义的格式myh1

运行效果见:类选择符的使用3.用户定义的IDselector当网页设计者想在整个网页或几个页面上多处以相同样式显示标记符时,除了使用

7、类定义一个通用类样式以外,还可以使用ID定义样式。ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。要将一个ID样式包括在样式定义中,应用一个#号作为ID名称的前缀,如下所示:#IDname{property:value……}定义了ID样式后,需要在引用该样式的标记符内使用id属性。#red{color:red;}#green{color:green;}这个段落是红色。

这个段落是绿色。

注意:id属性只能在每个HTML文档中出现一次。那么如何使用IDSe

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

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

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