css基础入门

css基础

层叠样式表css特性：层叠性，继承性[h系和a标签除外（浏览器内核有个默认样式）]
优先级：！important>行内样式（嵌入标签）>id选择器>类选择器>标签选择器>默认样式

css选择器

• ID选择器
• 类选择器
• 后代选择器(重点)
• 子代选择器
• 标签选择器
• 并集选择器
• 交集选择器

一个样式表认识以上选择器：

#id .class>div,p>.class1,.class2.class3{
    font-size : 26px;
}

行高相关属性

认识行高我们首先要知道浏览器默认文字大小是16px，默认行高为18px;
行高：是基线与基线之间的距离
计算：行高=文字高度+上下边距
应用：一行文字行高和父元素（其所在的盒子content高度）高度一致的时候，文字垂直居中显示。

div{
    height:26px;
    line-height:26px;
}

文本元素属性

一个样式表认识文本属性

/* font:font-style font-weight font-size/line-height font-family;[font简写] */
p{
    font:italic bold 16px/16px %u5B8B%u4F53,SimHei;
    color:blue;
    text-align:Left;/*[Left|right|center]*/
    text-indent:2em;
}

拓展(字体的unicode编码)

注意：字体尽量不要用中文标示
查看编码：

连接伪类和a标签相关属性

look here

/*a:link{属性:值;}链接默认状态,和a一样*/
a{
    color:red;
    text-decoration:none|underline|line-through;
}
a:visited{
    color:yellow;
}/*链接访问之后的状态*/ 
a:hover{
    color:blue;
}/*鼠标放到链接上显示的状态[重点]*/
a:active{
    color:pink;
}/*链接激活的状态[重点]*/

补充：{：focus[获取焦点改变样式]}

背景属性

• background-color [背景颜色]
• background-image url(“”) [背景图片]
• Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y [背景平铺]
• Background-position 值 | left | right | center | top | bottom [背景定位]
• Background-attachment scroll[相对容器] | fixed[相对浏览器窗口] [背景图片位置相对对象（兼容性不好）]

连写（url必须）

p{
    background: url('./resouce/btn.jpg') no-repeat 30px 40px scroll;
}

border相关属性

• Border-left | right | bottom | top
• border-width : 10px;
• border-style : solid实线 | dotted点线 | dashed虚线;
• border-color : red;
• border-collapse : collapse;[边框合并]

简写

div{
    border:1px solid red;
}

浮动布局（float）

float:left | right | both
作用：◆文本绕图◆制作导航◆网页布局
清除浮动：

• clear:left | right | both;
• overflow:hidden [父元素触发BFC];
• 伪元素[写在父元素上，最佳实现方案]

.clearfix:before,
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    zoom: 1;/* 触发haslayout，兼容ie6/7 */
}

定位相关属性（position）

※绝对定位：

Position: absolute;

特点：

• 元素使用绝对定位之后不占据原来的位置（脱标）
• 元素使用绝对定位，位置是从浏览器出发。
• 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
• 嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
• 给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

※相对定位：

Position: relative;

特点：

• 使用相对定位，位置从自身出发。
• 还占据原来的位置。
• 子绝父相（父元素相对定位，子元素绝对定位）
• 行内元素使用相对定位不能转行内块

※固定定位：

Position: fixed;

特点：

• 固定定位之后，不占据原来的位置（脱标）
• 元素使用固定定位之后，位置从浏览器出发。
• 元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;

元素之间的转换属性

p{
    display:inline;/*块级元素转行内元素*/
}
span{
    display:block;/*行内元素转块级元素*/
}
.class{
    display:inline-block;/*某种元素转为行内块元素*/
}

css初始化

不常用的可以自行删改，多贴少补！

/* CSS Document */
html, body, div, span, object, iframe,h1, h2, 
h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, 
em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, 
ol, ul, li,fieldset, form, label, legend,table, caption, tbody, 
tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption, 
figure, footer, header, hgroup, menu, nav, section, summary,time, mark, 
audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    outline-style:none;
}
body {
    line-height:1;
}
a{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
a:hover,a:focus{
    text-decoration:none;
    bblr:expression(this.onFocus=this.blur());/*IE*/
    outline-style:none;/*FF*/ 
    }
table {
    border-collapse:collapse;
    border-spacing:0;
}
input, select {
    vertical-align:middle;
}
/*css为clearfix，清除浮动*/
.clearfix:before,
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.clearfix:after{
    clear:both;
} 
.clearfix{ 
    zoom:1;/*IE/7/6*/
}

初始化更多这里