CSS

css

1. CSS

层叠样式表

2. 页面中引入CSS方式

2.1 内联样式

<div style="color:#f00; font-size:14px;"></div>

2.2 内部样式表

<style>
    div {color:#f00; font-size:24px;}
</style>

2.3 外部样式表

• link标签 ： 通过HTML引入外部样式表（推荐的写法）

<link href="外部样式路径" rel="stylesheet">

• @import ： 通过CSS引入外部样式表（不推荐使用）

<style>
    @import url("外部样式表路径");
</style>

3. CSS选择器

3.1 基本选择器

• 标签选择器

div {color:red;}

• 类选择器

.cla-name {color:green;}
// 使用
<div class="cla-name other-cla"></div>

• id选择器

#idName {color:green;}
// 使用
<div id="idName"></div>

3.2 复合选择器

• 后代选择器 ： 以空格隔开

div p {}
.container li {}
.parent .son span {}

• 并集选择器 : 以逗号隔开

div, p {}
.container, li {}
.parent, .son, span {}

• 交集选择器:

div.cla {}
p#main {}
div .main p.info, div#first {}

• 全局选择器

* {}
div * {}

3.3 其它选择器

• div > p
• div + p
• div ~ p
• div[id]
• ...

4. 常用样式

4.1 字体样式

div {
    font-size: 12px;  font-size: 2em;  font-size:2rem;
    font-family: Arial; font-family: Consolas, "Microsoft YaHei";
    font-weight: 100-900 | normal | bold ;
    font-style: normal | italic | oblique;
    font: italic bold 12px/24px Arial;
    font: 12px Arial;
}

4.2 文本样式

div {
    text-align:left | center | right | justify;
    text-decoration: none | underline | overline | line-through;
    text-indent: 24px | 2em;
    text-overflow: ellipsis | clip;
    color: #ff0000 | #f00 | red | rgb(255,0,0) | rgba(255,0,0,.4);
    line-height: 24px | 100% | 1;
    letter-spacing: 5px;
    word-spacing:10px;
}
// 超出显示...
.ddd {  
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: no-wrap;
}
// 强制换行
.break-word {
    word-wrap: break-word;
    word-break: break-all;
}

4.3 背景样式

div {
    background-color: red;
    background-image: url("图片路径");
    background-repeat: repeat | no-repeat | repeat-x | repeat-y;
    background-position: 2px 3px | left top | 50% 50%;
    background-attachment: scroll | fixed;
    background: red url('') no-repeat center center fixed;
}

4.4 盒子模型

div {
    margin: 10px;
    margin: 10px 20px;
    margin: 10px 20px 30px;
    margin: 10px 20px 30px 40px;
    margin: 0 auto;
    padding:10px;
    border: 1px solid red;
    border-top: 1px solid red;
    border-style: solid;
    border-style: solid dashed dotted double;
    border-top-style: solid;
}
// 三角箭头
.trg {
    width:0;
    height:0;
    border-width:10px;
    border-style: solid;
    border-color: transparent red transparent transparent;
}

4.5 浮动

div {
    float: none | left | right;
    clear: none | left | right | both;
}
// 常用清楚浮动方式
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1;
}

4.6 定位

div {
    position: static | relative | absolute | fixed;
    z-index: 2;
    left: 12px;
    top: 23px;
    bottom: 23px;
    right: 23px;
}

4.7 透明

div {
    opacity: .3;
    filter: alpha(opacity=30);
    background: rgba(0,0,0,.3);
}

4.8 列表

ul {
    list-style-type: none;
}

4.9 表格

table {
    border-collapse: collapse;
}

4.10 display & visibility & overflow

div {
    display: inline | none | block | inline-block | table | table-cell | flex;
    visibility: hidden | visiable;
    overflow: hidden | visiable | scroll | auto;
}

4.11 其它

div {
    width: 100px;
    height:100px;
}

5. CSS Hack

/*Mozilla内核浏览器：firefox3.5+*/
-moz-transform: rotate | scale | skew | translate ;
/*Webkit内核浏览器：Safari and Chrome*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera*/
-o-transform: rotate | scale | skew | translate ;
/*IE9*/
-ms-transform: rotate | scale | skew | translate ;
/*W3C标准*/
transform: rotate | scale | skew | translate ;

width: 100px; // 所有浏览器
*width: 80px; // IE6、7
_width: 60px;  // IE6
width:100px;  // 所有浏览器
width:60px\9; // IE浏览器
width:80px\0; // IE8+
width:50px\9\0; // IE9+
div {
    float:left;
    margin-left: 11px;
    _display: inline;
}

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> 
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以上版本都可以识别 <![endif]--> 
<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if IE 6]>this is ie6<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别 <![endif]--> 
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]--> 
<!--[if IE 7]>this is ie7<![endif]--> 
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]--> 
<!--[if lt IE 8]> IE8以下版本可识别 <![endif]--> 
<!--[if IE 8]>this is ie8<![endif]--> 
<!--[if gt IE 8]> IE8以上版本可识别 <![endif]--> 
<!--[if lt IE 9]> IE9以下版本可识别 <![endif]--> 
<!--[if IE 9]>this is ie9<![endif]-->

6. 浏览器内核

• IE : Trident ['traɪd(ə)nt]
• Edge : EdgeHTML
• Firefox : Gecko ['gekəʊ]
• Chrome : 之前浏览器： Webkit，新版本用的是Bink(基于webkit开发的)
• Safari : Webkit
• Opera : 之前浏览器： Presto ['prestəʊ]，新版本用的是Bink(基于webkit开发的)