Download presentation
Presentation is loading. Please wait.
1
CSS技术 蒋玉华
2
6.1 CSS入门 什么是CSS CSS（cascading style sheet，层叠样式表）技术是一种格式化网页的标准格式 示例比较
3
单纯HTML的局限性 <HTML>
<HEAD><TITLE>使用HTML方式</TITLE> </HEAD> <BODY> <H1 align＝“center”> <FONT face＝“楷体_GB2312”>一级标题</FONT> </H1> <P>---其他正文</P> </BODY> </HTML>
4
CSS技术的优越性 <HTML>
<HEAD><TITLE>使用CSS方式</TITLE> </HEAD> <STYLE> H1{text-align:center;font-family:楷体_gb2312} </STYLE> <BODY> <H1>一级标题</H1> <P>---其他正文</P> <H1 >一级标题</H1> </BODY> </HTML>
5
CSS的优势 解决了HTML方式所固有的两种缺陷－－格式定义的重复和格式维护的困难 大大加强了网页的表现力（提供了更多的设置功能）
大大降低了网站的开发和维护工作量（多个网页应用统一风格，随时更新）
6
6.1 CSS入门 CSS的属性单位 CSS样式定义是由属性及其值组成，属性值的各种单位与HTML有所不同。 常用的长度单位
cm（厘米）；em(字符宽度的倍数 );ex(字符高度的倍数 )；in（英寸）；mm（毫米）；pc（皮卡）1pc=12点；pt（点）1pt＝1/72英寸；px（像素） 百分比单位 格式：先写上“＋”号或“－”号，然后紧跟一个数字，最后是％号。 示例：P{line-height:150%}该段文字的高度为标准行高的1.5倍。
7
注：百分比单位可以由于以下属性： font-size、font 、background-position、background、vertical-align、text-indent、line-height、margin-top、 margin-right 、 margin-bottom 、 margin-left 、 margin、padding-top、 padding-right、 padding-bottom 、 padding-left 、padding、width
8
6.1 CSS入门 CSS的属性单位 颜色单位 颜色名 ＃RRGGBB ＃RGB rgb（rrr，ggg，bbb）
9
6.2 在网页中使用CSS 在标记符中直接嵌套样式信息 使用style属性可以在HTML标记符中直接嵌入样式定义。格式如下： 示例
<标记符 style＝“property1：value1；property2：value2；－－－”> 示例
10
<HTML> <HEAD><TITLE>在标记符中直接嵌套样式信息</TITLE> </HEAD> <BODY> <H1 style＝“text-align:center;font-family:楷体_gb2312”>一代人</H1> <P style=“font-size:24px;text-align:center”>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P> </BODY> </HTML>
11
6.2 在网页中使用CSS 在STYLE标记符中定义样式信息
CSS应用于网页的最常用的方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式。 定义样式的方式： selector{property1：value1；property2：value2；－－－} 示例
12
<HTML> <HEAD><TITLE>在STYLE标记符中定义样式信息</TITLE> <STYLE> <!— P{font-size:24px;text-align:center} H1{text-align:center;font-family:楷体_gb2312} --> </STYLE> </HEAD> <BODY> <H1>一代人</H1> <P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P> </BODY> </HTML>
13
6.2 在网页中使用CSS 链接外部样式表中的样式信息 将重复在多个网页中使用的样式放在外部样式表文件中，然后通过链接的方式引用其中的样式。
方法：在HEAD标记符内使用LINK标记符，通过指定相应属性链接到外部样式表。 用法如下： <LINK rel＝“stylesheet” type＝“text/CSS” href=“样式表文件”>
14
6.2 在网页中使用CSS 链接外部样式表中的样式信息 创建样式表的方法： 示例 将样式定义放置到一个空白的文本文件中
15
与 网 页 源 文 件 同 一 目 录 下 的 mycss.css
网 页 源 文 件 <HTML> <HEAD><TITLE>链接外部样式表文件</TITLE> <LINK rel＝“stylesheet” type＝“text/CSS” href=“mycss.css”> </HEAD> <BODY> <H1>一代人</H1> <P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P> </BODY> </HTML> 与 网 页 源 文 件 同 一 目 录 下 的 mycss.css P{font-size:24px;text-align:center} H1{text-align:center;font-family:楷体_gb2312}
16
6.2 在网页中使用CSS 样式的优先级 多个样式同时修饰一个对象，如果样式冲突，则采用高优先级样式，如果不冲突则采用叠加的样式效果。
样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰的对象越近的样式，其优先级越高。 三种使用样式方法 在标记符中直接用style属性定义的样式优先级最高 用style标记符定义的样式 用link标记符链接的样式 谁距离修饰对象近， 谁的优先级高
17
其中test.css的内容： P{color＝”green”}
正文字体显示什么颜色？ <HTML> <HEAD> <LINK rel＝“stylesheet” type＝“text/CSS” href=“test.css”> <STYLE> P{color＝”red”} </STYLE> </HEAD> <BODY> <P>正文内容</P> </BODY> </HTML> 其中test.css的内容： P{color＝”green”}
18
其中test.css的内容： P{color＝”green”}
正文字体显示什么颜色？ <HTML> <HEAD> <STYLE> P{color＝”red”} </STYLE> <LINK rel＝“stylesheet” type＝“text/CSS” href=“test.css”> </HEAD> <BODY> <P>正文内容</P> </BODY> </HTML> 其中test.css的内容： P{color＝”green”}
19
6.3 CSS样式定义 样式表项的组成如下： selector{property1:value1; property2:value2;---} selector：表示需要应用样式的内容； property：表示由css标准定义的样式属性； value：表示样式属性的值。 H1{text-align:center;font-family:楷体_gb2312} 属性取值 样式属性 选择器 样式定义
20
5种选择器 HTML标记符 具有上下文关系的HTML标记符 用户定义的类 用户定义的ID 虚类
21
一、HTML标记符选择器 HTML标记符是最典型的选择器类型，网页设计者可以为某个或某些具体的HTML元素应用样式定义。
编组（简化样式定义） 例如：H1{color:#ff0000} H2{color:#ff0000} H3{color:#ff0000} 转换成编组样式（选择器用逗号分开） H1，H2，H3{color:#ff0000}
22
二、具有上下文关系的HTML标记符选择器
例如： H1 B{color:#ff0000}/*注意H1和B之间以空格分隔*/ 表示只有位于H1标记符内的B元素具有指定样式。
23
三、用户定义的类选择器 为单一HTML标记符创建多个样式。 将一个句点和一个类名称添加到选择器后 Selector.classname{property1:value1;---} 示例： 3处H1 标记符具有不同的颜色 1、定义类样式 2、应用类样式
24
定义以下类样式 H1.color-red{color:red} H1.color-yellow{color:yellow} H1.color-green{color:green} 在网页中需要使用该类处用class属性引用这些类 <H1 class=“color-red”>此标题为红色</H1> <H1 class=“color-yellow”>此标题为黄色</H1> <H1 class=“color-green”>此标题为绿色</H1>
25
三、用户定义的类选择器 通用类：不仅可以为某个或某些标记符定义类，还可以定义应用于所有标记符的类 构成：句点后加类名
.classname{property1:value1;---} 示例： 1、定义一个类 .red{color:red} 2、在需要引用该类的任意标记符内使用class属性 <P class=“red”>本行文字为红色</P> <H1 class=“red”>本标题字为红色</H1>
26
ID样式定义：#IDname {property:value；－} 引用该样式：在标记符内使用id属性 示例：
1、定义：＃red{color:red} 2、引用： <P id=“red”>本行文字为红色</P> <H1 id=“red”>本标题字为红色</H1>
27
通类与ID的区别 W3C标准这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。 当页面中用到js或者要动态调用对象的时候，要用到id。
28
五、虚类选择器 对于A标记符，可以用虚类的方式设置不同类型超链接的显示样式
不同类型超链接是指访问过的、未访问过的、激活的以及鼠标指针悬停于其上的这四种状态的超链接。 可以通过指定下列选择器之一设置超链接样式 A：link或：link A：visited或：visited A：active或：active A：hover或：hover 示例
29
:link{color:black;text-decoration:none}
:visited,:active{color:gray;text-decoration:none} :hover{color:red;text-decoration:underline} 注：如果要所有的超链接都具有相同的效果，只要为A标记符指定样式即可。
Similar presentations
