CSS

amos_tl

浏览: 340420 次
性别:
来自: 长沙

最近访客更多访客>>

495127903

huanggua12353719

gaojingsong

我想与我思

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

1 文档类型声明决定浏览器渲染模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>

standards mode 标准模式文档类型声明完整(严格/过渡)
quirks mode 混杂模式没有或无效的文档类型
almost standards mode 近似标准模式
...

http://hsivonen.iki.fi/doctype/

* 避免使用XML文档声明.

2
selector
元素选择器
p {
color: black;
}

h1 {
font-weight: bold;
}

后代选择器
blockquote p {
padding-left: 2em;
}

id/class选择器
#intro {font-weight: bold;}
.date-posted {color: #ccc;}

组合选择器
#main-content h2 {font-size: 1.8em;}

Pseudo-classes 伪类
a:link {color:blue;}
a:visited {color:green;}
a:hover, a:focus, a:active {color:red;} // 任何元素, IE 6 仅支持 a:active 与 a:hover
tr:hover {background-color: red;}
input:focus {background-color:yellow;}
a:visited:hover {color:olive;} //组合用法

万能选择器
* {
padding: 0;
margin: 0;
}

高级选择器CSS2.1+
子元素选择器/兄弟选择器
#nav>li {
background: url(folder.png) no-repeat left top;
padding-left: 20px;
}

h2 + p {
font-size: 1.4em;
font-weight: bold;
color: #777;
}

属性选择器
acronym[title] {
border-bottom: 1px dotted #999;
}

!important
DOM样式继承

3
组织样式
<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

@colordef #434343; dark gray
@colordef #f2f6e4; light green
@colordef #90b11f; dark green
@colordef #369; dark blue

4
box model
content padding border margin
outline 不影响元素的大小和位置. // IE8+

margin 可以是负值.

标准的CSS盒子模型的width, height 是指内容区域大小.而IE的盒子模型是指内容区域+padding+border.

Margin collapsing 间距折叠
只发生在垂直方向的相邻或嵌套block及空块, 内联,浮动,绝对定位的元素不会发生折叠.

块级元素与内联元素
block box
inline box
no box // display : none;
* 使用display可以改变元素盒子类型.
display : inline;
display : block;
display : inline-block; // 两种行为, CSS2.1+　支持 inline-block, 可以设置宽，高，垂直定位属性． // IE8+

定位：
正常
浮动
绝对定位

inline box　的垂直定位，宽，高是无效的．因为它们基于　line box　定位．可以修改的包括line-height, 水平定位属性(borders, padding, margins)．

相对定位:
relative
left
top
相对元素初始化位置定位. 可能产生重叠. 没有脱离文档流, 占用空间.

绝对定位
absoulte
top
right
left
bottom
z-index
相对最近的祖先定位元素(realtive/offsetParent)的位置,没有则相对body. 可能产生重叠. 脱离文档流, 不占用空间. 因此修改绝对定位的元素不会导致正常文档流回流 reflow.

固定定位
Fixed positioning
相对于视区的定位

浮动
float : left| right
clear: left | right | both | none;
可能产生重叠,脱离文档流 ,向左或向右浮动,直到接触到盒子的边缘或另一个浮动元素停止.正常文档流元素感觉不到它的存在. clear: both //消除垂直间距, 不围绕浮动元素.

5
布局
水平居中
<body>
<div class="wrapper">
</div>
</body>

.wrapper {
width: 920px;
margin: 0 auto;
text-align: left;
}

Liquid layouts
液体布局

使用百分比设置宽度与高度.

Elastic layouts
弹性布局, 相对字体大小设置百分比宽度

body {
font-size: 62.5%; //16px
text-align: center;
}

// 1em = 10px

.wrapper {
width: 92em;
max-width: 95%;
margin: 0 auto;
text-align: left;
}

分享到：