作者:未知 时间:2015-10-12 阅读:( )
安徽省滁州市机电工程学校—茆荣海
关键词:CSS;HTML;层叠样式表;CSS样式;选择器。
一、 引言:
层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一,在HTML文档中加入CSS样式表可分为嵌入式样式表、外部样式表和内联样式表三种,在同一文档内可以同时使用三种方法。
二、 CSS的基础语法规则:
2.1 选择器:
选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型,包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类等。
2.1.1 标签选择器:
一个XHTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。h1 {color:red; font-size:14px;},说明:标签选择器可以直接改变该标签的所有样式。
2.1.2 类选择器:
使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中,XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。以下是使用类选择器定义CSS样式的步骤:(1)、编写合适的类选择器名,然后定义CSS样式声明,例如定义类选择器名为news的CSS样式代码。 .news{ font-size:20px;color:green }(2)、把以news为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下:
新闻
其中,在中写入class=”news”的语句。Class和等号都是固定的写法,在双引号中写入类选择器的名称。
2.1.3 ID选择器:
ID选择器和类选择器相似,不同的是,ID选择器不能复用。在一个XHTML文档中,一个ID选择器只能把其CSS样式指定给一个标签。以下是使用ID选择器定义CSS样式的步骤:(1)、编写合适的类选择器名,然后定义CSS样式声明,以下是定义类选择器名为special的CSS样式代码。#special{ font-size:20px;color:green }
(2)、把以special为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下:
特别报道
其中,在中写入id=” special”的语句。ID和等号都是固定的写法,在双引号中写入ID选择器的名称。
2.1.4 全局选择器:
全局选择器是一个星号。它能作用于XHTML文档中的所有元素。图为全局选择器的结构。对于全局选择器还有一个不得不提的用法,就是为了保证作出的页面能够兼容多种浏览器,所以要对HTML内的所有的标签进行重置,会将下面的代码加到CSS文件的最顶端如:
*{marging: 0 ; padding:0 }
因为HTML4.01中有89个标签,所以相当于在页面加载CSS的时候,先对这89个标签都加上了{margin:0; padding:0;},在这里我不建议大家这么做,因为89个标签中需要重置的标签是很少数,没有必要将所有的标签都重置,需要哪些标签重置就让哪些标签重置就可以了,如下:body,div,p,a,ul,li{marging: 0 ; padding:0 }用到那些就写那些,这点也可以看做衡量页面重构师制作页面水平的高低,以及是否专业的一个方面。
2.1.5 组合选择器:
标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合,标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样,所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式,并不算是一种真正的选择器,但在实际中经常使用。
2.1.6 伪类选择器:
[1]曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2007. 8
[2]王俭敏等.CSS+DIV网页样式与布局案例指导[M].北京:电子工业出版社,2009.4.
上一篇:游戏教学在中职体育教学中的应用
下一篇:在中职数学教学中如何进行德育渗透
浅析高职院校实训室管理
(301)人喜欢 2017-12-05浅析物流技能大赛对高职物流专业建设的推动作用
(307)人喜欢 2017-11-28论高职生闲暇德育的基本路径
(289)人喜欢 2017-11-23广西高职院校借鉴广东校企合作模式浅析
(247)人喜欢 2017-11-15浅析综合实践活动的价值反思与实践重构
(448)人喜欢 2017-11-13浅析英美文学教学中学生人文素质的培养
(336)人喜欢 2017-11-02浅析中高职《基础护理学》课程衔接
(362)人喜欢 2017-10-13浅析中职班主任管理中情感艺术的渗透
(299)人喜欢 2017-10-12浅析家庭如何辅导中学生做好职业生涯规划
(320)人喜欢 2017-10-08浅析高职院校创业教育与区域经济的发展
(374)人喜欢 2017-09-11奇速英语冬令营:寒假英语学习新选择
奇速英语冬令营:习惯、方法、思维,全面提升
奇速英语冬令营开启,趣味学习英语新体验!
冬令营热潮!奇速英语教你用思维导图轻松记单词
2025广东、广西、海南奇速英语冬令营:趣味英语
不容错过!奇速英语冬令营让你轻松掌握英语!
2025湖北、湖南奇速英语冬令营:趣味英语挑战,
2025安徽、福建、江西、山东奇速英语冬令营:趣
2025上海、江苏、浙江奇速英语冬令营:趣味英语
2025辽宁、吉林、黑龙江奇速英语冬令营:趣味英
奇速英语冬令营:创新研学,让英语学习更高效
2025天津、河北、山西、内蒙古奇速英语冬令营:
英语学习必备!6大知名单词阅读APP推荐排行榜
奇速英语时文阅读个性化:单词速记、AI口语、作
英语提分秘诀:突破环境限制,掌握高效方法
英语时文阅读图书大升级!解锁奇速英语个性化时
2025广西南宁奇速英语冬令营:寒假蜕变计划,英
从兴趣到习惯:奇速英语冬令营助力英语全面提升
2025陕西西安奇速英语冬令营:寒假蜕变计划,英
奇速英语冬令营:突破思维,掌握英语学习新方法