层叠样式表 Cascading Style Sheet

不要使用Table进行页面布局，它仅仅用于显示表格式的信息

内部样式表

 <style type=”text/css”>

  ….

 </style>

外部样式表引用

<link rel=”stylesheet” type=”text/css” href=http://www.mamicode.com/”css/global.css” >

<link rel=”stylesheet” type=”text/css” href=http://www.mamicode.com/”css/forms.css” >

<style type=”text/css”>

@import url(css/global.css);

@import url(css/forms.css);

</style>

决定用ID选择器和选择器应当遵循的规则：

1. 要在一张网页上多次使用某一种样式时，必须使用类选择器
2. 用ID选择器来识别每张网页上只出现一次的部分，比如侧边栏或页脚
3. 考虑用ID选择器避免样式冲突，ID选择器优先级大于类选择器

群选择器 h1,p,#banner{color:#F1CD33;}

通用选择器 * 选择每一个标签

派生选择器 h1 string {color:red}

伪类选择器

A:link 未点击过的

A:visited 点击过的

A:hover  点击中的

A:active 

:first-child

:focus  input:focus{background-color:  #FFFCCC;}

//IE6和IE7不支持 可通过js来实现。

高级选择器

子选择器 body>h1 选择body下所有的h1标签

兄弟选择器 h2+p

属性选择器

Img[title]{…}

A[href=http://www.mamicode.com/www.baidu.com]{color=”red”;font-weight:bold;}

Input[type=”text”]{..}

A[href^=”http://”]  ^= 表示以….开始

A[href$=”.pdf”]   $=表示以….结束

Img[src*=”headshot”] *=表示含有…的

权重值排名 内建样式 1000分＞ID选择器 100分＞类选择器 10分＞标签选择器 1分

如果权重值相同，则区最后一个样式。

伪元素 如:first-line通常被当作标签选择器对待

伪类  如:link 被当作类对待。

声明了！important 属性的将不会被覆盖

#nav a{color:red;}

A{color: teal !important};

//IE6处理时会有问题

要使文本变斜体，在样式中写入以下代码

Font-style:italic;

确保文本为非斜体，像这样

Font-style:normal;

文本大、小写、首字母大写

Text-transform:uppercase;

Text-transform:lowercase;

Text-transform:capitalize;

Text-transform:none;

文本修饰text-decoration：

下划线underline、上划线overline、中划线line-through、闪烁blink、 none

字间距

letter-spacing:10px; letter-spacing:-10px;

line-height:120%; 默认120%；

对齐文本

Text-align:center;

首行缩进

Text-indent:15px;

无序列表ul  有序列表ol

List-style-type:disc、circle、square

List-style-type:decimal、decimal-leading zero、upper-alpha、lower-alpha、upper-roman、lower-roman、lower-greek、none；

list-style-position:inside、outside、

边距冲突时，浏览器只会应用它们中较大的那一个，不希望这样可以才用top padding

bottom padding解决

display:inline 行类元素

display:block 块级元素

display:none  隐藏

 overflow属性

 overflow:visible

 overflow:scroll:添加滚动条，一使用就出现滚动条

 overflow:auto :要使滚动条变成可选就用auto选项，需要时才添加滚动条。

 Overflow:hidden:隐藏超出部分

解决IE6浮动BUG

Margin-left:-3px;

Zoom:1;

背景图片

Background-image:url(“…”);

Background-repeat:no-repeat、repeat、repeat-x、reeat-y

Background-position:top、center、bottom

Background-position:5px 8px;

Background-position:20px 20px;

底部问题

Html{

      Height:100%;

}

//IE7以及更早的版本不会出现这个问题

//打印网页的话背景图片不会被打印出来，需要的话需使用<img>标签

滚动页面而背景图片未repeat 希望看到背景图片可以使用

Background-attachment:fixed;、scroll

快捷属性

Background:background-color、background-image、background-attachment、background-position

Body{

        Background:#FFF url(bullseye.gif) scroll center center no-repeat;

}

浏览器一般都会给<img>标签添加边框线，除非<img>的边框为0

防止给,<img>添加边框线可以这样

Img{border:none};

表格：

控制表格单元之间的空间

<table cellspacing=”10”>//在每个表格间插入10px空间，如果设置成0讲完全消除间隙

消除双边框：

Table{border-collapse:collapse};

IE6bug

双边距 解决办法 设置属性display:inline、zoom:1;

3px间隙

浮动列与非浮动列之间额外插入3px空间

非浮动列没有设定宽度或高度

Zoom：1；

非浮动列设有宽度或高度

*html #mainColumn{margin-left:0;}

*html #sidebar{margin-right:-3px;}

或者全部浮动

#mainColumn{float:left;}

IE6之前的版本不支持固定定位；

如果一个标签的位置是绝对的，它又不在其他任何设定了absolute、relative或fixed定位的标签里面，那它就是相对于浏览器的窗口进行定位。

如果一个标签处在另一个设定了absolute、relative、或fixed定位的标签里面，那它就是相对于另一个元素的边沿进行定位。

IE6不支持固定定位 解决办法

html #banner{position: absolute;}

打印

给外部样式添加指定媒体类型

<link rel=”stylesheet” type=”text/css” media=”print” href=http://www.mamicode.com/”print.css”/>

<link rel=”stylesheet” type=”text/css” media=”screen,projection,handheld” href=http://www.mamicode.com/”screen.css”/>

显示超链接地址

A:after{

   Content:”(“attr(href)”)”;

}

/*IE6双边距bug*/

* html ….{display:inline;}

CSS3新特性

  CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
  对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
  增加了更多的CSS选择器  多背景 rgba