代码改变世界

浅谈CSS:CSS基本(1)

2009-12-30 10:32  huayifu  阅读(244)  评论(0)    收藏  举报

A:CSS优先权

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？这中间是根据优先级从而进行取舍的（其中4拥有最高的优先级）。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

例：外部样式表中对段落的定义：

<link rel="stylesheet" type="text/css" href="testCss.css" />
p {
  color: black;
}

内部样式表中对段落的定义：

<style type="text/css">
p {
  color: red;
}

最后的结果是color：red。

B:类选择器

在CSS中，类选择器是以一个点号开始的：

.BACKGROUND{BACKGROUND:#666;}

HTML中：

 

<p class="BACKGROUND">这是灰色的。</p>

CLASS也可以被用作派生选择器

 

.test td {
    background: #666;
    }

这个表示一个类名是test的大元素中所有的td都将是灰色背景的。例如一个table或者div中的td。。。

元素也可以基于他们的类而被选择

td.test {
    background: #666;
    }

在上面类名为test的td的背景是灰色的。这个和上面的.BACKGROUD有什么区别呢？这个test只能是td的，例如p，h1等其他的元素，test是无法被选择的。

 

<td class="test"></td>

C:CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容，内边距，边框和外边距的方式。

  • element : 元素。
  • padding : 内边距。
  • border : 边框。
  • margin : 外边距。

对内边距和外边距进行定义的时候，单位没有什么约束，很随意的，而且对于数值，则根据上，右，下，左顺时针方向进行定义的。

h1 {padding: 10px 0.25em 2ex 20%;}

关于値复制，有的时候不需要4个值都写出来，可以根据值复制进行简化。

例： 

h1 {padding: 10px 0.25em 10px 0.25em;}

可以用

 

h1 {padding: 10px 0.25em;}

来进行简化，具体来说：

  • 如果缺少左外边距的值，则使用右外边距的值。
  • 如果缺少下外边距的值，则使用上外边距的值。
  • 如果缺少右外边距的值，则使用上外边距的值。

例如下图（可以只设一个top值，则根据值复制，其他三个都等于top值。）

CSS 值复制