css笔记(一)

1、选择器

/*通配选择器，对所有元素都会应用*/
*{color:gray}

/*元素选择器，只应用到相应标签*/
h1{color:gray}
<h1>string</h1>

/*类选择器，只相应到相应的class属性*/
.waring{color:red}
<h1 style="waring">string</h1>

/*id选择器，只应用到相应的id*/
#first{color:gray}
<h1 id="first">string</h1>

/*属性选择器，只应用到相应的属性*/
h1 [type]{color:ray}/*属性值任意*/
<h1 type="string">string</h1>
h1 [type="abc"]{color:ray}/*属性值为abc*/
<h1 type="abc">string</h1>
h1 [type～="abc"]{color:ray}/*属性值一部分为abc*/
<h1 type="123 abc def">string</h1>
h1 [type^="abc"]{color:ray}/*属性值abc开头*/
h1 [type$="abc"]{color:ray}/*属性值abc结尾*/
h1 [type*="abc"]{color:ray}/*属性值包含abc*/
h1 [lang|="en"]{color:ray}/*属性值为en或en-开头*/

/*后代选择器*/
h1 em{color:gray}
<h1>asd<em>fgh</em></h1>

/*子元素选择器*/
h1>em{color:gray}

/*相邻兄弟元素*/
h1+p{color:gray}

/*伪类选择器*/
a.visited {color:red}
/*
:link 未访问
:visited 已访问
:focus 输入焦点
:hover 鼠标停留
:active 鼠标点击
:first-child 第一个子元素
:first-letter 第一个字母(只应用于块级元素)
:first-line 第一行(只应用于块级元素)
:lang 语言选择(根据lang属性和meta元素结合来确定)
:before 之前
:after 之后
*/
*:lang(fr){color:gray}
h2:before {content:"))";color:gray} /*所有的h2元素之前增加银色的括号*/

2、文字

font-family /*字体(Serif笔画有脚,Sans-serif笔画没脚,Monospace等宽,Cursive手写,Fantasy其它)*/
front-weight /*加粗(lighter,normal,bolder,bold)*/
font-size /*大小(px,em)*/
font-style /*风格变形(italic斜体新字体,oblique原有字体上倾斜,normal)*/
font-variant /*自体变形(small-caps小型大写字母,normal)*/
line-hight /*行高*/
text-indent /*缩进(px,em)*/
text-aligh /*水平对齐(left,center,right,justify两端对齐)*/
vertical-align /*垂直对齐(vertical,sub,super,top,text-top,middle,bottom,text-bottom)*/
word-spacing /*字间隔*/
letter-spacing /*字母间隔*/
text-decoration /*文本装饰(underline,overline,line-through,blink)*/
text-shadow /*阴影(前两个长度定义偏移距离,第三个长度模糊半径可选,颜色可在最前或最后*/
white-space /*处理空白和换行符*/
                         空白符    换行符    自动换行
     pre-line      合并         保留         允许
     normal       合并         忽略         允许
     nowrap     合并         忽略          不允许
     pre          保留         保留         不允许
     pre-warp     保留         保留          允许
font /*前三个属性(style,variant,weight)可有可无顺序不限,后面必须有两个或三个属性(size(,line-hight),family)顺序不能变,*/