室内设计培训
平面设计培训
部落窝教育
网站首页 >> 设计在线 >> 文章内容

CSS选择器实例讲解

[日期:2010-03-06]   来源:主流技术阁  作者:主流技术阁   阅读:1080[字体: ]

  CSS选择器:标记选择器,类别选择器(.class),ID选择器(#id) 的简单示例:

  标记选择器:
<style>
h1{
  color:blue;
  font-size:18px;
}
</style>

  类别选择器:
<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.one{
  color:blue;  
  font-size:20px; 
}
.two{
  color:red; 
  font-size:14px; 
}
-->
</style>
</head>
<body>
  <p class="one">主流技术阁</p>
  <p class="two">
主流技术阁</p>
</body>
</html>

  很多时候页面中几乎所有的<p>标记都使用相同的样式风格,只有1-2个特殊的<p>标记需要使用不同的风格来突出,这时可以通过class选择器与标记选择器配合使用。
<html>
<head>
<title>class选择器与标记选择器</title>
<style type="text/css">
<!--
p{     
  color:blue;
  font-size:18px;
}
.special{   
  color:red;  
  font-size:23px; 
}
-->
</style>
</head>
<body>
  <p>
主流技术阁</p>
  <p class="special">
主流技术阁</p>
</body>
</html>

  另外类别选择器还有一种很直观的使用方法,就是直接在标记声明后接类别名称,以此来区别该标记。
<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>
<body>
  <h3>标记选择器.class1</h3>
  <h3>标记选择器.class2</h3>
  <h3 class="special">标记选择器.class3</h3>
  <h3>标记选择器.class4</h3>
  <h3>标记选择器.class5</h3>
  <p class="special">使用于别的标记</p>
</body>
</html>

  在HTML的标记中,还可以同时给一个标记运用多个class类别选择器,从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用,可以适当减少代码的长度。
<html>
<head>
<title>同时使用两个class</title>
<style type="text/css">
<!--
.one{
  color:blue; 
}
.two{
  font-size:22px;
}
-->
</style>
</head>
<body>
  <h4>一种都不使用</h4>
  <h4 class="one">同时使用两种class,只使用第一种</h4>
  <h4 class="two">同时使用两种class,只使用第二种</h4>
  <h4 class="one two">同时使用两种class,同时使用</h4>
</body>
</html>

  ID选择器:
  ID选择器的使用方法跟class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强。
<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
  font-weight:bold; 
}
#two{
  font-size:30px;  
  color:#009900;  
}
-->
</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>
  从显示效果可以看到第2行与第3行都显示了CSS的方案,换句话说在很多浏览器一,ID选择器也可以用于多个标记。但这里需要指出的是,将ID选择器用于多个标记是错误的,因为每个标记定义的ID不只是CSS可以调用,JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同ID的标记,那么将导致JavaScript在查找ID时出错。
  正因为JavaScript等脚本语言也能调用HTML中设置的ID,因此ID选择器一直被广泛地使用。网站建设都在编写CSS代码时,应该养成良好的编写习惯,一个ID最多赋予一个HTML标记。
  另外从最后一行可以看到没有任何CSS样式风格显示,这意味着ID选择器不支持像class选择器那样的多风格同时使用,类似"ID="one two"是完全错误的语法。

主流技术阁PS,CDR,213班 分享到: QQ空间 新浪微博 腾讯微博 人人网
photoshop教程
Photoshop教程
平面设计教程
Photoshop教程