CSS3.0

一、链接

CSS实例：http://www.runoob.com/css/css-examples.html

CSS概念：http://www.runoob.com/css/css-background.html

 

二、CSS背景

1.属性简写

background: #ffffff url('img_tree.png') no-repeat fixed right top;

当使用简写属性时，属性值的顺序为：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.

2.归纳

 

三、 Text属性

 

四、字体

 

五.链接

这四个链接状态是： 

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

注意：

• a:hover 必须跟在 a:link 和 a:visited后面
• a:active 必须跟在 a:hover后面

 

六、列表

 

 

七、表格

表格边框

如果对表格设置边框，那么表格有一个边框。单元格也有一个边框，这样一来就会出现双重边框，为了不显示双重边框，我们可以使用折叠边框属性

table { border-collapse:collapse; }

table,th, td { border: 1px solid black; }

 

八、盒模型

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度&总高度的计算公式：

总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

总元素的高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距

 

九、CSS边框

 

 

十、CSS轮廓

Outline属性：

 

十一、外边距

 

 

十二、内边距

 

 

十三、CSS尺寸

 

十四、display(显示)与visibility(可见性)

1.display - 块和内联元素

1）块级元素的特性

a.总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示

b.宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制

块级元素主要有：

 address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

2）内联元素的特性

a.和相邻的内联元素在同一行

b.宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-botton)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

3）CSS中块级、内联元素的应用

主要用的CSS样式有以下三个：

• display:block  -- 显示为块级元素
• display:inline  -- 显示为内联元素
• display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了
• display:none   -- 隐藏元素，包括元素的布局空间也被隐藏

2.visibility(可见性)

 

十五、CSS定位

1.positioning定位

position属性的四个值：

• static       ---- 默认值，没有定位
• fixed        ---- 元素的位置相对于浏览器窗口是固定位置，不受窗口的滚动而去滚动
• relative     ---- 相对定位(相对于其正常位置的定位，且其正常位置的布局占位还在)
• absolute   ---- 绝对定位(绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html)

top、left、bottom、right的值：

• auto              ---- 堆叠顺序与父元素相等
• 数值              ---- 单位px 
• 百分数           

2.z-index堆叠顺序

可以为负数，也可以是正数。

值越大，元素越显示在最上面

3.clip裁剪属性

 如果设置了属性overflow为visible不可裁剪，那么clip就会失效

4.overflow处理内容溢出

存在两个分量属性：overflow-x     overflow-y

 5.cursor鼠标样式

 

十六、float浮动

 

十七、CSS对齐元素

1.【元素】水平居中对齐---使用margin

1）元素必须放在块中：display:block; (对于其本身就是块元素的，该属性可以不去设置)

2）设置宽度：width:50%; (防止元素里面的内容溢出)

3）设置水平居中对其：margin:auto;

2.【元素】左右对齐

1）使用定位方式

// 元素左对齐

position:absolute;

left:0px;

// 元素右对齐

position:absolute;

right:0px;

2）使用float方式

// 元素左对齐

float:left;

// 元素右对齐

float:right;

3.【文本】居中、左右对齐---使用text-align

text-align:center;   元素内文本居中对齐

text-align:left;    元素内文本左对齐

text-align:right;  元素内文本右对齐

4.【文本】垂直居中对齐

1）使用padding

如果需要水平和垂直都居中，我们可以组合使用padding和text-align:center

2）使用line-height

a.单行文本

line-height: 200px;

height: 200px;

b.多行文本

line-height: 1.5;

display: inline-block;

vertical-align: middle;

 

十八、伪类

1.语法

selector:pseudo-class{property:value;}

2.实例

1）链接中的伪类

注意：

a:hover必须被置于a:link和a:visited之后，才是有效的

a:active必须被置于a:hover之后，才是有效的

伪类的名称不区分大小写

2）CSS - :first - child伪类

①匹配到第一个p元素

如：p:first-child   // 

②匹配所有的p元素中第一个i元素

p>i:first-child

③匹配所有作为第一个子元素的p元素中所有的i元素

p:first-child i

3.所有的伪类

 

十九、伪元素

1.语法

selector:pseudo-element {property:value;}

2.实例

1）:first-line伪元素用于向文本的首行设置特殊样式

注意：first-line只能应用于块级元素

例：p:first-line{color: #ff0000;}

2）:first-letter伪元素用于向文本的首字母设置特殊样式

注意：first-letter只能用于块级元素

例：p:first-letter{color:#ff0000;}

3.所有的伪元素