• （1）内嵌式 ） • CSS一般位于 一般位于HTML文件的头部，即<head> 文件的头部， 一般位于 文件的头部 与</head>标记内，并且以<style>开始，以 标记内，并且以 开始， 标记内 开始 </style>结束，例如如下的代码定义了 结束， 结束 <body>、<td>、<th>标记使用的字号。 标记使用的字号。 、 、 标记使用的字号 <style type="text/css"> body,td,th { fontfont-size: 12px; } <style
<html> <head> <title>标题</title> <style type="text/css"> @import url(1.css); @import url(2.css); </style> </head> <body> <h2>CSS标题1</h2> <p>紫色、粗体、下划线、25px的效果1</p> <h2>CSS标题2</h2> <p>紫色、粗体、下划线、25px的效果2</p> <h3>CSS标题3</h3> <p>紫色、粗体、下划线、25px的效果3</p> </body>
指链接与文档的关系，指链接 的是一个样式表文件
<link rel="stylesheet" type="text/css">
href="style.css"
（4）导入样式
导入样式和链接样式的功能基本相同,只是语法和运作方 式上略有区别. 导入的样式表在HTML文件初始化时,会被导入到HTML 文件内,作为文件的一部分,类似内嵌式的效果。而链接式样 式表则是在HTML的标记需要格式时才以链接的方式引用。 导如样式表，常用格式： @import url(sheet1.css) @import url(“sheet1.css”) @import url(‘sheet1.css’) @import sheet1.css @import “sheet1.css” @import ‘sheet1.css’
<body> <p class="one">class选择器1</p> <p class="two">class选择器2</p> <p class="three">class选择器3</p> <h3 class="two">h3同样适用</h3> </body> </html> 我们可以看到3个<p>标记分别呈现 不同的颜色以及字体大小。而且任 何一个class选择器都适用于所有 HTML标记，只需要用HTML标记 的class属性声明即可。 都应用的 .two 选择器，但效果 不完全相同
3、 选择器声明
在声明各种CSS选择器时,如果某些选择器的风格是完 全相同的,或者部分相同,这时便可以利用集体声明的方法, 将风格相同的CSS选择器同时声明.例如6 <html> <head> <title>集体声明</title> <style type="text/css"> h1, h2, h3, h4, h5, p { /* 集体声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special , .special , #one { text-decoration:underline; } </style> </head> /* 集体声明 */ /* 下划线 */
2.Css文件: h3{ color:#00FFFF; font-style:italic; font-size:40px; }
Css样式四种嵌入方式优先 级
如果在各种方法中设置的属性不一样,比如内嵌式设置字 体为宋体,链接式设置颜色为红色,那么显示结果会两 者同时生效,为宋体红色字. Css样式四种嵌入方式优先级由高到低： • 行内样式优先级最高, • 其次是采用<link>标记的链接式, • 再次是位于<style></style>之间的内嵌式, • 最后是@import导入式.
2、css选择器 css选择器
选择器(selector)是CSS中很重要的概念,所有HTML 语言中的标记都是通过不同的CSS选择器进行控制的。
• （1）标记选择器 • 一个HTML页面由很多不同标记组成， 而CSS标记选择器就是声明哪些标记采用 哪种CSS样式。
声明 声明
h1
{
Color: red ；
• • • • • • • • • • • • • •
<body> <p>class选择器与标记选择器1</p> <p>class选择器与标记选择器2</p> <p>class选择器与标记选择器3</p> <p class="special">class选择器与标记选择器4</p> <p>class选择器与标记选择器5</p> <p>class选择器与标记选择器6</p> </body> </html> 首先通过标记选择器定义<p>标记的 全局显示方案，然后再通过一个class 选择器对需要突出的<p>标记进行单独 设置，这样大大提高了代码的编写效 率。
（2）行内样式 代码style="font style="font代码style="font-size: 10pt; color: #FF6600;"用于控制段落文字的字号和颜色 用于控制段落文字的字号和颜色， #FF6600;"用于控制段落文字的字号和颜色， 采用<style=" ">的格式把样式写在HTML中 采用<style=" ">的格式把样式写在HTML中 的格式把样式写在HTML 的任意行内， =”右边的属性设置放入双 的任意行内，“=”右边的属性设置放入双 引号中，多个属性用“;”分隔 分隔。 引号中，多个属性用“;”分隔。
<body> <h4>一种都不使用</h4> <h4 class="one">只使用第一种</h4> <h4 class="two">只使用第二种</h4> <h4 class="one two">同时使用两种class</h4> <h4>一种都不使用</h4> </body> </html>
（3） ID选择器
例如1: <html> <head> <title>class选择器</title> <style type="text/css"> .one{ color:red; /* 红色 */ font-size:18px; } /* 文字大小 */ .two{ color:green; /* 绿色 */ font-size:20px; } /* 文字大小 */ .three{ color:cyan; /* 青色 */ font-size:22px; } /* 文字大小 */ </style> </head> ……
/* 粗体 */ /* 字体大小 */ /* 颜色 */
• <body> • <p id="one">ID选择器1</p> • <p id="two">ID选择器2</p> • <p id="two">ID选择器3</p> • <p id="one two">ID选择器3</p> • </body> • </html>
Font-size:25px；
}
标记选择器
属性
值
属性
值
（2） 类别选择器
• 所有标记都可通过class属性设置类选择 器
类别名称
声明 { Color: green ；
声明 ； Font-size:20px； }
.class
类别 • • • • • • • • • • • • •
•
另外类别选择器还有一种很直观的使用方法，就是 直接在标记声明后接类别名称，以次来区别该标记。
类别名称 h3.class {
声明 Color: red ；
声明 Font-size:23px； }
标记
选择器
属性
值
属性
值
例如3: <html> <head> <title>标记选择器.class</title> <style type="text/css"> h3{ color:blue; font-size:18px; } h3.special{ color:red; font-size:23px; } .special{ color:green; } </style> </head>
