CSS+DIV知识1

一、使用CSS控制页面
1、除了行内样式和内嵌样式外，要是HTML页面本身与CSS样式风格分离为两个或多个文

件，可以使用链接式和导入样式。
（1）链接式用法：只需在Html文件代码的<head>和</head>标记之间加上“<link href="样

式相对路径" type="text/css" rel="stylesheet">”。例如：<link href="1.css"

type="text/css" rel="stylesheet">
（2）导入样式用法：导入样式与链接样式的功能基本相同。在HTML中导入样式表，常用

的有如下几种@inport语句：
@import url（1.css）;
@import url（"1.css"）;
@import url（'sheet1.css'）;
@import url sheet1.css;
@import url "sheet1.css";
@import url 'sheet1.css';
可以选择任意一种放在<head>和</head>标记之间的<style>与</style>标记之间，如：
<html>
<head>
<title>页面标题</title>
<style type="text/css">

</head>
<body>
……
</body>
</html>

二、CSS的注释
在CSS中，注释语句都位于“/*”与“*/”之间，内容可以是单行也可以是多行。另外，在

<style>与</style>之间常常会见到“”将所有的CSS代码包含于其中，这是为了避

免老式浏览器不支持CSS、将CSS代码直接显示在浏览器上而设置的HTML注释。

三、CSS选择器

1、标记选择器：如标记的样式风格。同样可以通过h1选择器来声明页面种所有的h1标记

的风格，如下所示：
<style>
h1{color:red;font-size:25px;}
</style>

2、类别选择器

在上小节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应的残生变化。例如当声明了<P>标记为红色时，页面中所有的<P>标记都将显示为红色。但是如果希望其中的某一个<P>标记不是红色，而是蓝色，仅依靠标记选择器时不够的，还需要引入类别(class)选择器。
类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须复合CSS规范，如图1.07所示。

例如，当页面同时出现3个<P>标记时，如果想让它们的颜色各不相同，就可以通过设置不同的class选择器来实现。一个完整的案例如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>class选择器</title>
<style type="text/css">
.red{ color:red; font-size:18px;}
.green{ color:green; font-size:20px;}
</style>
</head>

学8SL网676页sh68网(http://www.xwangye.com)

<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3同样适用</h3>
</body>
</html>

3、ID选择器

ID选择器的使用方法与class选择器基本相同；不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，其格式如图1.11所示。

下面举一个实际案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ID选择器</title>
<style type="text/css">
#one{ font-weight:blod;}
#two{ font-size:30px;
color:#009900;}</style>
</head>

学8SL网676页sh68网(http://www.xwangye.com)

<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<p id="two">ID选择器3</p>
<p id="one two">ID选择器4</p>
</body>
</html>

显示效果如图1.12所示，第2行与第3行都显示的CSS的方案。可以看出，在很多浏览器下，ID选择器可以用于多个标记，即每个标记定义的id不只是CSS可调用，JavaScript等其他脚本语言同样也可以调用、因为这个特性，所以不要将ID选择器用于多个标记，否则会出现意想不到的错误。如果一个HTML中有两个相同的id标记，那么将会导致JavaScript在查找id时出错，例如函数getElementById().
正因为JavaScript等脚本语言也能调用HTML中设置的id,所以ID选择器一直被广泛的使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。
另外从图1.12可以看到，最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用，类似“id="one two"”这样的写法是完全错误的语法。

CSS中类别选择器和ID选择器有区别：

<div id="style1">
<div class="style2">

style1 只能定义为 #style1{.....} 这就是ID选择器
style2 只能定义为 .style2{.....} 这就是类别选择器

posted on 2011-06-30 15:52 carekee 阅读(323) 评论(0) 收藏举报