css学习记录第二天

链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
注意为了确保生效，务必按照LVHA 的顺序生命

focus伪类选择器
用于选取获得焦点的表单元素

input：focus{
	background-color:yellow;
	}

焦点就是光标，一般情况下<input>类表单元素才能获取；

元素选择模式

分为块级元素和行内元素
块级元素：
常见块级元素

h1~h6,p,div,ul,ol,li等，其中<div>标签是最经典的块元素。

块元素特点：
独占一行；高度，宽度，外边距以及内边距都可以控制；宽度默认是容器（父级宽度）的100%；
是一个容器及盒子里面可以放行内或者块级元素。
注意：
文字类的元素内不能使用块级元素；<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。<h1>~<h6>同理。
行内元素：
常见行内元素

a,strong,b,em,i,del,s,ins,u,span等，其中<san>标签是最常见的行内元素。

行内元素特点：
相邻可以存在同一行；高，宽直接设置是无效的；默认宽度就是他本身内容的宽度；行内元素只能容纳文本或其他行内元素；
注意：
链接里面不能再放链接；
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级元素模式最安全。
行内块元素：
<img />,<input />,<td>,他们同时具有块级元素和行内元素的特点。

特点：
可以和相邻行内元素（行内块）在同一行，但是会有间隙，一行可以显示多个；
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高，外边距以及内边距都可以控制（块级元素特点）。

**

行内元素和块级元素可以互相转换

**
转换为块级元素：display：block;
转换为行内元素：display：inline;
转换为行内块元素：display：inline-block;

侧边链接小试

a {
            display: block;
            width: 230px;
            height: 40px;//盒子的高度
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;//首行缩进两行
            line-height: 40px;//文字的行高等于盒子的高度
        }
        a:hover{
            background-color: #ff6700;
        }

小技巧：当文字的行高等于盒子的高度时，就可以让文字在当前盒子内垂直居中

背景

背景颜色默认的是透明

background-color: transparent;//透明

背景图片（图片尽量以背景图片的方式插入，不要在body里面插入）

background-image: url(images/1.jpg);

背景图片不平铺/横向平铺/纵向平铺

 background-repeat: no-repeat/repeat-x/repeat-y;

背景图片位置
如果只指定一个数值，那么一定是x,y默认center垂直居中。

background-position: x y;（x/y:left center right top bottom 也可以用精确单位20px,50px）

背景图像固定

background-attachment：scroll/fixed;(scroll：背景图片是随着对象内容滚动；fixed：背景图像固定）

背景复合写法

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

背景颜色半透明

background-color:rgba(x,x,x,0~1)；（0·1是选择透明度）

注意：IE9+版本浏览器才支持的

css三大特性

层叠性
层叠性原则：
样式不冲突，不会层叠；
样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式；

继承性
字标签会继承父标签的某些样式，如文本颜色和字号。
主要继承样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承
body{font:12px/24px };这样是文字高12px，行高为24px;
body{font:12px/2};这样是文字高12px，行高为12px的两倍，还是24px；
div{font-size：14px};div内的文字高14px,但行高为14px的两倍，是28px;

优先级

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，为类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important重要的	无穷大

！important是写在属性值后面
例：ul li{}的权重是0,0,0,1+0,0,0,1=0,0,0,2
.nav li{}的权重是0,0,1,0+0,0,0,1=0,0,1,1