码迷,mamicode.com
首页 > Web开发 > 详细

定义CSS

时间:2015-07-28 22:46:16      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

1.1 定义CSS的基本语法

  在生活中,我们描述一个对象的时候,比如一个学生的基本情况,可以这样进行描述:

  李敏{

    年龄:18;

    性别:男;

    身高:175:

  }

  通过这样的描述把一个学生的基本信息都表达清楚了,其中的要素有3个:姓名、属性和属性值。每一组属性和属性值都描述了学生这个对象某方面的一个特性。同样,CSS用于网页元素的某方面特性的设置,因此我们可以采用类似上面这样的描述方法来通过CSS设置网页的显示效果。例如:

  1级标题{

    字体:黑体;

    大小:24像素;

    颜色:黑色;

  }

  因为实际的代码都采用了英文书写,所以可以得到如下代码:

  h1{

    font-family:黑体;

    font-size:24px;

    color:black;

  }

  这就是CSS代码。可见,CSS代码非常简单,只要理解了它的含义,很快就可以掌握。CSS就是由“对象”、“属性”和“值”3个基本部分组成的。

  CSS基本语法:选择器{属性1:属性值; 属性2:属性值;...}

 

1.2 CSS基本选择器

  在CSS的3个组成部分中,“对象”是很重要的,它指定了对哪些网页元素进行样式设置。所以,它有一个专门的名称——选择器(selector)。所有的HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择,并赋予各种样式的声明,即可实现各种效果。

  在CSS中,有几种不同的选择器,可分为基本选择器和复合选择器。基本选择器有3种,复合选择器是通过对基本选择器进行组合构成的。

  基本选择器包括3种,分别是HTML标记选择器、类选择器和ID选择器。

1.2.1HTML标记选择器

  网页是由HTML标记组成的,CSS的HTML标记选择器的作用就是声明哪些HTML标记采用了哪些CSS样式。所以,网页中的任何一个HTML标记都可以作为相应的标记选择器的名称。例如div选择器就是声明当前页面中所有的<div>标记的显示效果,例如下面的代码:

  <style>

  div(标记选择器){

    border-width:10px;

    border-color:red;

    margin:20px;

  }

  </style>

  上述CSS代码声明了HTML页面中所有的<div>标记,采用的边框宽度都是10px,边框颜色都为红色,外边距都为20px。

1.2.2 类选择器

  使用HTML标记选择器可以设置页面中所有相同标记的统一格式,但如果需要对相同标记中某些个别标记做特殊效果设置,使用HTML标记选择器就无法实现了,需要引入其他的选择器。

  类(class)选择器允许以一种独立于文档元素的方式来指定样式。class选择器的对象名称可以由用户自定义,属性和属性值的设置和HTML标记选择器相同。类选择器语法结构:

   .classname{property:value;}

【示例】类选择器应用

  <!-- .html文件 -->  

<html>
<head>
<meta charset="utf-8">
<title>类选择器示例</title>
<link href="new_file.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <div class="a1"> a </div>
  <div class="a2"> b </div>
  <div> c </div>
</body>
</html>

  <!-- .css文件 -->

div{
  border-style: dashed;
  border-width: 5px;
  border-color: yellow;
  margin: 10px;
}

.a1{
  border-style:solid;
  border-width:1px;
  border-color:red;
  margin: auto;
}
.a2{
  border-style: dotted;
  border-width: 1px;
  border-color: blue;
  margin: 20px;
}

在HTML网页中可以同时使用多个class选择器。

1.2.3 ID选择器

  其实ID选择器跟类选择器(class selector)的功能一样,两者主要的区别在于它们的语法和用法不同。ID选择器在HTML页面中必须唯一,针对性更强。另外,ID选择器对于javascript操纵HTML元素有帮助。

基本语法:#IDname{property:value;}

  ID选择器不能用于多个标记。因为每个标记定义的id不只是CSS来调用的,javascript等其他页面脚本语言都可能进行调用。那么,当一个页面中出现多个相同的id时,将导致调用出错。所以,在设计网页时,应该考虑到id选择器被调用的特点。

 

1.3 CSS复合选择器

1.3.1 交集选择器

  交集选择器是由两个选择器直接连接构成,结果是二者各自元素范围的交集。其中第一个选择器必须是标记选择器,第二个选择器必须是类选择器或者ID选择器。两个选择器之间必须连续写,不能有空格。交集选择器语法结构为:h1.class{property:value;}

【交集选择器示例】

<html>
<head>
<meta charset="utf-8">
<title>交集选择器示例</title>
<style type="text/css">
  div{
    border-style: dashed;
    border-width: 1px;
  }
  div.a1{
    border-color: red;
    background:#999999
  }
  .a1{
    background: #33ffcc;
  }
</style>
</head>
<body>
  <div> 普通效果 </div>
  <div class="a1"> 交集选择器效果 </div>
  <p class="a1">类选择器效果</p>
</body>
</html>

1.3.2 并集选择器

  另一种复合选择器是并集选择器,它的特点是对各种基本选择器所选择的范围同时选中,任何形式的基本选择器都可以作为并集选择器的一个组成部分。并集选择器语法结构为:h1,h2,class{property:value;}

【示例】并集选择器应用

<html>
<head>
<meta charset="utf-8">
<title>并集选择器示例</title>
<style type="text/css">
  div{
    border-style: dashed;
    border-width: 1px;
  }
  h1,h2,div{
    background:#999999;
  }
</style>
</head>
<body>
  <div> 并集选择器效果 </div>
  <h1> 并集选择器效果 </h1>
  <h2> 并集选择器效果 </h2>
</body>
</html>

1.3.3 后代选择器

  CSS选择器可以通过嵌套的方式对特殊位置的HTML标记进行声明,如<div>标记中包含<p>标记,就可以通过后代选择器进行控制。后代选择器的写法是嵌套外层的标记写在前面,内层的标记写在后面,中间用空格隔开。内层的标记称为外层标记的后代。后代选择器语法结构如下:div p{property:value;}

【示例】后代选择器应用

<html>
<head>
<meta charset="utf-8">
<title>并集选择器示例</title>
<style type="text/css">
  div{
    border-style: solid;
    border-width: 1px;
    border-color: red;
  }
  p{
    background:#999999;
  }
  div p{
    background:#ffff99;
    border-style: solid;
    border-width: 1px;
    border-color: blue;
  }
</style>
</head>
<body>
  <div> 不是后代选择器效果 </div>
  <p> 不是后代选择器效果 </p>
  <div> 后代选择器效果 <p>效果</p> </div>
</body>
</html>

后代选择器不仅可以使用标记选择器进行嵌套,也可以使用类选择器和ID选择器。

定义CSS

标签:

原文地址:http://www.cnblogs.com/jacinthcc/p/4684305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!