CSS定义与语法
selector{
property1: value1;
property2: value2;
}
link标签
media属性：all,braille,embossed,handheld,print,projection,screen,tty,tv.
媒体查询：@media的属性值有：
width，height//视口宽度
device-width,device-height//屏幕宽度
orientation
aspect-ratio//宽度
device-aspect-ratio//设备宽度
@support查询，基于浏览器的CSS特性可以支持把不同CSS定向到不同设备。
window.macthMedia
CSSOM提供了window接口的扩展，在得到支持的情况下，window.matchMedia将返回一个新的MediaQueryList（mql）对象，代表的是拥有一个matches属性的特定媒体查询字符串的分析结果。
例如：
测试视区的宽度是否小于500像素。
监听媒体变更事件的方法。
var mqobj =window.matchMedia("(orientation: portrait)");
if (mqobj.matches){
document.querySeletor("body").classList.add("portrait");
}
if (window.matchMedia("(max-width:500px)").matches){
//no more than
}else{
//more than
}
var mqmedia = window.matchMedia("(orientation: portrait)");
mqmedia.addEventListener("orientationchange", bodyOrientationClass);//调用函数对指定的事件进行监听
function bodyOrientationClass(){
if (mqmedia.matches){
document.querySeletor("body").classList.remove("landscape");
document.querySeletor("body").classList.add("portrait");
}else{
document.querySeletor("body").classList.remove("portrait");
document.querySeletor("body").classList.add("landscape");
}
}
//删除监听器
mqmedia.removeEventListener("orientationchange",bodyOrientationClass);
CSS最佳实践
1，最大限度减少http请求
比如针对网站的各模块的样式都归到一起，把所有的CSS放到一个长文件。all.css包含{home.css,style.css}
下载 并缓存一个较大的CSS文件。
Sass预处理器-模块化最小化CSS
2，使用外部样式表
使用一个外部样式表，在文件的head包含。
3，使用CSS reset和normalizer来规范浏览器
建议以reset或normalizer文件作为起点，规范化所有的浏览器。
4，使用最弱的特定性以便重写：避免ID
5，不使用内联样式或！important修饰符
CSS选择器
基本选择器
类选择器
ID选择器
更多的CSS3选择器：
常规选择器：通配符*选择器，类型选择器E，类选择器.，ID选择器#。
所有元素可以不只有一个类，但是只能有一个ID。
关系选择器：
1，后代组合器 E F
2，父子组合器 E>F
3，相邻兄弟组合器 E+F
4，常规兄弟组合器 E~F
属性选择器：
E[attr]
E[attr=val]
E[attr | val]正好以val开始或者后面紧跟着一个-
E[attr~=val]匹配属性选择器中任意一个以空格分开的完整的值
E[attr^=val]val与属性的开始部分匹配
E[attr$=val]val与属性的结束部分匹配
E[attr*=val]val与属性值的任意一个部分相匹配
**伪类：**基于DOM位置或者用户当前界面的类
:link 未访问过的链接
:visited 已访问过的链接
:hover 被悬停的链接
:active 当前用户活动的元素
:focus 焦点
:enabled
:disabled
:checked
:indeterminate
状态伪类：
:default
:valid
:invalid
:in-range
:out-of-range
:required
:optional
:read-only
:read-write
结构上的伪类：
:root
:nth-child()
:nth-last-child(n)
:nth-of-type(n) == even,odd
:nth-last-of-type(n)
:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
以下是举例：
例如有30个元素，要定位到3,8,13,23,28，则n=5n-2/5n+3
例如要定位到奇数，则n=odd
更多的伪类：
E:target
E:lang(L)
E:not(s)
例如:
input[type=checkbox]:not(:check)
p:not(.copyright)
p:not(:last-of-type)
伪元素：
定位属于文档的一部分但是无法在DOM树中定位的文本。
原::冒号，后因为IE不支持，改成:。
:first-letter
:selection
提供了生成内容的能力：
:before
:after
CSS颜色值
CSS颜色声明样式：
1，#RRGGBB，#RGB
2，rgb(r,g,b),rgba(r,g,b,a)
3，hsl(h,s,l),hsla(h,s,l,a)=CSS3新增
4，颜色名
5，transparent 透明的
6，currentColor 文本颜色
浏览器的颜色值：系统颜色值，以下只是一部分，还有很多
- activeBorder
- activeCaption
- appWorkspace
- background
- buttonFace
- buttonHighlight
- buttonText
- captionText
- highlightText
- menu
- menuText
- scrollbar
CSS度量单位
长度值：
em-相对于父元素字体大小的比例
rem-根元素字体大小的比例-html
vw
vh
vmin
vmax
ch-字符0的大小比例
ex-字符x的大小比例
pt
cm
mm
in-英寸
px=1/72英寸
%
分辨率单位：
dpi
dpc
dppx
角度、事件、频率：
deg 度数
grad 一个梯度为一个圆的1/400
rads-一弧度=180/π
turn
ms
s
Hz
kHz
简写：
TRouBLe
一个值：TRBL
两个值：TB，RL
三个值：T，RL，B
四个值：T，R，L，B
CSS3模块、图形、图像
盒模型：包含padding border margin content
背景图片会被包含在边框内，不会显示到外部区域，即背景图区域（border，padding，content）
IE盒模型中，height，width是只针对content区域的，而标准盒模型中包含内边距和边框。
利用box-sizing切换。
padding=
border=border-image，border-color，border-style(dashed,dotted,double,hidden,inset,none等)
例如使用CSS创建一个三角形：利用盒子的均分原理，当最下面的盒子没有边框。
当最其他三边变为透明时就形成了一个三角形。
代码为：
blockquote{
background-color: green;
position: relative;
color: white;
padding: 15px 25px;
margin:10px 10px 0;
}
blockquote:after{
border: 15px solid;
border-color: green transparent transparent;
top:100%;left:10px;
width:0;height: 0;
position: absolute;
content: "";
}
margin
content。
box-sizing：
如果你希望盒子100% 就是100% ，不管内边距和边框，可以通过box-sizing属性border-box模仿IE盒模型。
border-radius：原生圆角
CSS渐变
线性渐变：
linear-gradient（#000000,#FFFFFF）
linear-gradient(to bottom, #000000, #FFFFFF)
linear-gradient(180deg, #000000, #FFFFFF)
带前缀和不带前缀有区别：
从左上角到右下角的渐变：
-webkit-linear-gradient( top left, #000000, #FFFFFF);
linear-gradient(to bottom right, #000000, #FFFFFF);
可以设置渐变色：
例如开始之前占据顶部底部宽度10% 的区域是纯色。
-webkit-linear-gradient(top, #000000 10%, #FFFFFF 90%);
-webkit-linear-gradient(top, #000000 20px, #FFFFFF 180px);
同一个位置声明两个color-stop可以让一个颜色淡入到另一个颜色，而不是一个硬线；
background-image:
linear-gradient(to left,
#FFFFFF 40%,
#000000 40%,
#000000 60%,
#FFFFF 60%);
-webkit-gradient(linear,0 0, 100% 0,
color-stop(0.4,#ffffff),
color-stop(0.4,#000000),
color-stop(0.6,#000000),
color-stop(0.6,#ffffff),
);
径向渐变：radial-gradient
background-size:
规定背景图片的大小，属性值：contain，cover，auto
阴影
文本阴影：text-shadow: leftOffset, topOffset, blur, shadow-color
阴影偏移量必选，后两者可选。
leftOffset=正值，到文本右侧距离，负值，到文本左侧距离
blur模糊的宽度
text-overflow：允许将溢出容器的文本剪切掉
属性值：ellipsis=在文本剪切的位置后面添加一个椭圆或者三个点
clip=直接剪切掉
注意：包含文本的盒子overflow设置为visible，white-space设置为nowrap，或pre，才会出现椭圆或者三个点。
盒子阴影：
box-shadow：left-offset,top-offset,模糊半径(可选)，扩散半径，颜色
inset-内阴影，可选项。
例如：
box-shadow:
0 1px 0 rgba(255,255,255, 0.4),
inset 0 1px 0 rgba(255,255,255, 0.4);