css-概述

行内样式

<div style="width: 200px; height: 200px;"></div>

内联样式

内联样式可位于head、body标签之间

<style type="text/css">
    #demo {

        width: 200px;

        height: 200px;

        margin: 10px 0 0;

        background-color: #CCC;

    }
</style>

导入样式

@import可位于style标签和css文件内(不推荐使用)

<style type="text/css">

    @import ‘layout.css‘;

</style>

or

@charset "UTF-8";

@import "font.css";

链接样式

<link rel="stylesheet" type="text/css" href="layout.css" />

单位

px  像素

%  百分比

em  相对父元素的字体大小

rem  相对根元素的字体大小  ie9+

vw  相对视口的宽度百分比  ie9+

vh  相对视口的高度百分比  ie9+

注：pc端考虑兼容性用px、%、em较多，vw、vh是移动端响应式的新趋势

颜色

十六进制：#F00

颜色名：red

rgb：rgb(255, 0, 0)

rgba：rgba(255,0,0,0.5)  ie9+

注：一般颜色使用十六进制表示

字体

(MS)Serif：Georgia  Palatino Linotyp  Times New Roman  

(MS)sans serif：Helvetica  Arial  Trebuchet MS  Verdana  Tahoma  Impact  Segoe UI

Monospace：Courier Family  Lucida Family  Centaur  Myriad Pro

windows：微软雅黑(Microsoft YaHei)、黑体(SimHei)、幼圆(YouYuan)、宋体(SimSun)、楷体(KaiTi)、华文系列(ST)

OS X：冬青黑体(Hiragino Sans GB)、华文细黑(STHeiti Light  STXihei)、华文系列(ST)

性能和效率

1、默认字体一般设为Arial

2、字体大小设置最小12px

3、行高设为1.5

4、中文字体最好转为unicode编码，如：\5b8b\4f53 宋体  \5fae\8f6f\96c5\9ed1 微软雅黑

5、正确使用字体类型写法，避免平凡使用引号

字体缩写

family: 12px/1.5 \5fae\8f6f\96c5\9ed1, "STHeiti Light", Arial, \5b8b\4f53, sans-serif;

选择器

基本：#id     .class     tag     *     #id, .class, div

层级：elem elem     elem > elem     elem + elem     elem ~ elem  

属性：[attr]     = 等于     ^= 开头     $= 结尾     *= 包含      ~= 空格     |= 前缀

伪类：:hover     :active     :focus     :before     :after

css3 伪类  ie9+

子元素：:first-child    :last-child    :only-child    :nth-child()     :nth-last-child()

同类型子元素：:first-of-type    :last-of-type    :only-of-type    :nth-of-type()     :nth-last-of-type()

筛选：:not()    :root     :empty     :target

功能：:enabled     :disabled     :checked     ::selection

符号

!important  定义css属性优先级  ie9+

注：不要使用

@import  导入样式

注：不要使用

@charset  定义字符编码

@media  定义自适应规则 ie9+

@font-face  定义字体  ie9+

@font-face {

    font-family: name;

    src: local()  url()  format();

    unicode-range: U+201c, U+201d;

}

@keyframes  定义动画  ie10+

@keyframes name {

    from {}

    50% {}

    to {}

}

css hack

// ie6
*htmldiv{color:red;}
div{-color:red;}

// ie7
*+htmldiv{color:red;}
div{-color:red;}

// ie8
@media \0screen {div{color:red;}}

// ie9
:root div{color:red;}

// ie10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {div{color:red;}}

// ie6 7
@media screen\9 {div{color:red;}}
div{+color:red;}

// ie6 7 8
@media \0screen\,screen\9{div{color:red;}}

// ie8 9 10
@media screen\0 {div{color:red;}}
div{color:red\0;}
div{color:red\0\9;}

// ie9 10
@media screen and (min-width:0\0) {div{color:red;}}
div{color:red\9\0;}

// ie通用
div {color: red\9;}

behavior

语法：behavior: url();

作用：为css定义兼容脚本

注：不推荐使用

#demo {

width: 200px;

height: 200px;

box-shadow: 10px 100px 100px 10px #666;

behavior: url(ie-css3.htc);

}

expression()

语法：color: expression();

作用：为css属性定义脚本

注：不推荐使用

a {
　　*color: expression(this.parentNode.currentStyle.color);  /* 颜色继承 */
　　*hide-focus: expression(this.hideFocus=true);  /* 隐藏焦点虚线 */
　　color: inherit; outline: none;
}