文档详情

JSP实用简明教程(第二版) 教学课件 作者 978 7 302 20085 7 chapter04.ppt

发布:2017-08-16约2.93万字共65页下载文档
文本预览下载声明
二、CSS语法 2.CSS分类 CSS(Cascading Style Sheet)中,“Cascading”是“层叠”的意思,也就是说在同一个Web文档中可以有多个样式表存在,这些样式表根据所在的位置,拥有不同的优先级,优先级越高,就会被最后在显示时采用。从样式表插入的形式来看可以分为三种: ● 内联式样式表:它利用现有的HTML标记把特殊的样式加入到那些由标记控制的信息中,比如前一例子。 ● 嵌入式样式表:它和Javascript一样可以嵌入到HTML文件的头部中去(html和body标记之间),使用Style和/Style容器装载,例如:“style p {color : blue ; font-weight : bold} /style”,这样会对页面中所有p标记都起作用。 ● 外部式样式表:是一种保存在外部的样式表文件,外部文件以.CSS为扩展名,例如“link rel=stylesheet href=main-sheet.css type=text/css”。 1、CSS简介 二、CSS语法 3.CSS的特点 CSS是用来扩展HTML的,而不是用来替代HTML的,也就是说CSS不能脱离HTML,它只是一项辅助工具。除了可扩展HTML的样式设定外,CSS使得网页的设计与维护更加高效,这主要表现在以下几个方面: ● 减少图形文件的使用 ● 集中管理样式信息 ● 设定共享样式 ● 将样式分类使用 1、CSS简介 二、CSS语法 1.CSS基本格式 一般来说,样式表的定义分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value),基本格式如下: 选择符 {属性:值} 2、CSS基本语法 例:title { font-size: 24px; color: #FF0000; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-style: italic; } “title”是选择符,是需要用CSS定义的元素,“font-size: 24px”是属性和属性值,“font-size”代表字体大小。 多个选择符属性设置相同,可以一次性为它们设置样式,并在多个选择符之间加上“,”来分隔它们,其格式为: 选择符1,选择符2,选择符3 {属性1:值1;属性2:值2;…} 可以为“name”、“title”和“text”设置相同的CSS样式: name,title,text { font-size: 14px; color: #66FF66; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } 特殊格式: 选择符1 选择符2 {属性1:值1;属性2:值2;属性3:值3} 这种格式和上边讲的第二种格式很相似,只是在“选择符1”和“选择符2”之间缺少了逗号,这种格式表示如果选择符2包括的内容同时包括在选择符1中的时候,所设置的样式规则才起作用。 二、CSS语法 2.CSS注释语句 开发人员可以在CSS中插入注释来说明代码的含义。注释有利于自己别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以“/*” 开头,以“*/”结尾。例如: 2、CSS基本语法 /* 定义段落样式表 */ p { text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ } 二、CSS语法 3.CSS选择符 CSS中,选择符可以分为3类:HTML标记选择符(HTML selector)、类选择符(Class selector)和ID选择符(ID selector)。下面分别介绍这3中选择符。 ● HTML标记选择符 例如:p style=color:red 其中“p”是HTML标记选择符。 ● 类选择符 一个选择符能有不同的类,因而允许同一元素有不同样式。其格式为:选择符.类别名 {属性:值} 假如,假设要让两个不同的段落,一个段落向右对齐,一个段落居中,可以先定义两个类: 2、CSS基本语法 p.right {text-align: right} p.center {text-align: center} 以上的例子建立了两个类,right和center,供HTML的p元素使用,然后在不同的段落中的HTML标记里加入定义的class参数: p class=right 这个段落向右对齐的 /p p class=center 这个段落
显示全部
相似文档