CSS学习笔记（一）--基本知识

CSS简介

原名：层叠样式表 (Cascading Style Sheets)
作用：如何显示 HTML 元素
存储位置：常存储在样式表中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
目的：解决内容与表现分离的问题

同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）
   其中4具有最高的权限

语法：选择器+多个声明

ct_css_selector.gif

颜色属性值的不同表达方式：

p { color: red; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }  

当属性值是多个单词时，即单词间有空格时，给值加上双引号。
p {font-family: "sans serif";}
当多个分类器的属性和值一样时：

  color: green;
  }```

##继承
`body {
     font-family: Verdana, sans-serif;
     }`
根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
如果不想p继承，可以另外加上
`p  {  font-family: Times, "Times New Roman", serif; }`

##派生选择器

strong {
color: red;
}

h2 {
color: red;
}

h2 strong {
color: blue;
}

这样的结果：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

##id 选择器
id 选择器以 "#" 来定义。

red {color:red;}

green {color:green;}

 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

这个段落是红色。

这个段落是绿色。

现代布局中，id 选择器常常用于建立派生选择器。
```#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }```
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落(
)
>即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

sidebar p {

font-style: italic;
text-align: right;
margin-top: 0.5em;
}

sidebar h2 {

font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。


##类选择器
`.center {text-align: center}`
所有拥有 center 类的 HTML 元素均为居中。
例如：

This heading will be center-aligned

This paragraph will also be center-aligned.

#####和 id 一样，class 也可被用作派生选择器：

.fancy td {
color: #f60;
background: #666;
}

类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文（名为 fancy 的更大的元素可能是一个表格或者一个 div）
#####元素也可以基于它们的类而被选择：
`td.fancy {
    color: #f60;
    background: #666;
    }`
``
这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。