CSS 的基础语法

1、基础语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

（1）选择器的分组

你可以对选择器进行分组，这样被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是红色的。

（2）继承

根据 CSS，子元素从父元素继承属性。子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示绿色，子元素的子元素也一样。

2、CSS 基础选择器

2.1 派生选择器

通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁，列表中的 strong 元素变为红色，而不是通常的黑色，

    

2.2 id 选择器

1.id 选择器：

id 选择器可以为标有 id 的 HTML 元素指定特定的样式

id 选择器以“#”来定义---一个id在文档中只出现一次

#divid{}就是一个独立的 id 选择器，#pid a{}就是 用于建立派生选择器,相当于是一个嵌套。

2.3 类选择器

(1)在 CSS 中，类选择器以一个点号显示：

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

2.4 属性选择器

三、 CSS 背景

1、 css 样式-文本

p.uppercase {text-transform: uppercase} 大写
p.lowercase {text-transform: lowercase}小写
p.capitalize {text-transform: capitalize}首字母大写

cursor:pointer;一些不同的光标

text-decoration 属性：去掉链接的下划线

2、 CSS 链接

a:link --普通的、未被访问的链接

a:visited --用户已访问的链接

a:hover --鼠标指针位于链接的上方

a:active --链接被点击的时刻

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

3、  列表类型

   

1、 列表项图片

   

4、 CSS 表格

border-collapse ---设置是否把表格边框合并为单一的边框。

border-spacing ---设置分隔单元格边框的距离。

caption-side --- 设置表格标题的位置。

empty-cells ---设置是否显示表格中的空单元格。

table-layout ---设置显示单元、行和列的算法。

    

四、CSS 盒子模型

我们先来看看盒子的组成包括：

margin(外边距);border(边框);padding(内边距);content(内容)

    

4、CSS 定位

CSS 有三种基本的定位机制：

普通流:

元素按照其在 HTML 中的位置顺序决定排布的过程

浮动:

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

绝对定位:

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

定位属性:

position,将元素放在一个静态的,相对的,绝对的,或固定的位置：

fixed,和 static

/*position: relative;*/
position: absolute;/*不占用空间位置*/

通过对 top,left,right,bottom 这四个属性的赋值让元素向对应的方向偏移

overflow 设置元素溢出其区域发生的事情

clip 设置元素的显示形状,多用于图片

vertical-align 设置元素的垂直对其方式

z-index 设置元素的堆叠顺序

CSS 浮动

left:元素向左浮动

right:元素向右浮动

none:不浮动

inherit:从父级继承浮动的属性

还有一个就 clear 属性:

主要用于去掉向各方向的浮动属性(包括继承来的属性)