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;
}