CSS基本知识

css选择符（选择器）

选择符表示要定义样式的对象，可以是元素本身，也可是一类元素或制定名称的元素

在css选择符中，大致可有10种：类选择符、id选择符、class选择符、通配符、群组选择符、包含选择符、伪类选择符、伪对象选择符……

关于选择符的权重问题，css中用四位数来表示权重，权重的表达式如0000

类型选择符的权重为 0001
class选择符的权重为 0010
id选择符的权重为 0100
子选择符的权重为 0010
属性选择符的权重为 0010

伪类选择符的权重为 0010
伪元素选择符的权重为 0010
包含选择符的权重为 ：为包含选择符的权重之和
内联样式的权重为 1000
继承样式的权重为 0000
在这里特别要注意的就是关于a标签的伪类选择-在使用a标签的伪类时，不可以打乱顺序

a:link{属性：属性值} 超链接初始化的状态

a:visited{属性：属性值} 超链接被访问后的状态

a:hover{属性：属性值} 鼠标悬停，即鼠标划过超链接时的状态

a:active{属性：属性值} 超链接被激活时的状态，即鼠标按下时它的状态

注意：联合使用的时候，样式的顺序是不能改变的link、visited、hover、active。顺序错误则超链接样式失败。

css核心属性

一、关于文本的css声明

文本大小：{font-size：value}

属性值为数值型，单位有几种常见的pt、rem、em、px（9p t= 12px \ 1em = 16px ）

也可以使用绝对大小关键字

xx-small ： 9px

x-small ：11px

small：13px

medium：16px

large：19px

x-large：23px

xx-large：27px

文本颜色：{color：颜色值}
文本字体：{font-family：“字体”}
字体加粗：{font-weight：bold（加粗的）/bolder（更粗的）/ normal（常规）/ 100-500-900}   在css规范中，字体粗细，分为9个等级，分为100-900；其中100对应最轻字体变形，而900对应最重字体变形，500规范字体；600-900加粗字体。
倾斜：{font-style：italic（倾斜度小）/ oblique（倾斜度大）/ normal（取消倾斜，常规显示）}
水平对齐方式：{text-align：left / right / center / justify(两端对齐对中文不起作用)}
垂直对齐方式：{vertical-align：top / bottom / middle}
行高：{line-height：normal/value}
文字属性的简写：（顺序）font-style \ font-variant \ font-weight \ font-size \ line-height \ font-family

文本修饰：text-decoration：none / underline(添加下划线) / overline(添加上划线) / line-through(添加删除线) / blink (闪烁)
首行缩进：{text-indent：value} value可取负值；该属性只对第一行起作用
字间距：{letter-spacing：value} 控制英文/汉字的字距
词间距：{word-spacing：value} 控制英文单词之间的距离
文体流控制：{layout-flow：vertical-ideographic 自上而下 / horizontal自左向右} 只支持IE浏览器

二、关于列表的css声明

定义列表符号的样式：list-style-type：disc（实心圆）/ circle（空心圆）/ square（实心方块）/ none
使用图片作为列表符号：list-style-image：url(目标图片)
定义列表符号的位置：list-style-position：outside（外边）/ inside（里边）

三、关于背景的css声明（边框）

背景颜色 ： background-color：颜色值
背景图片的设置：background-image：url()
背景图片平铺属性：background-repeat：no-repeat / repeat / repeat-x / repeat-y
背景图的固定：background-attachment：scroll 滚动 / fixed（固定）
背景图的位置：background-position：left / center / right / 数值   top/center/bottom/数值
边框：border：线型（solid实线/dashed虚线/dotted点线/double双线） 粗细（value） 颜色
右边框：border-right / 左边框：border-left / 上边框：border-top / 下边框：border-bottom

四、文本溢出

overflow（overflow-x / overflow-y）：visible 默认值 / hidden（隐藏，内容会被修剪其他内容不可见）/ scroll / auto / inherit

scroll - 里面没有内容时，也会显示内容

auto - 有内容溢出才会出项滚动条

inherit - 规定应该从父元素中继承 overflow属性（一般不使用）

文本溢出

text-overflow：clip / ellipsis

clip：不显示省略号（…）而是简单的裁切

ellipsis：当对象内文本溢出时，显示省略标记

五、空余空间

white-space：normal / pre / nowrap / pre-wrap / pre-line / inherit

normal ：默认值

pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签

nowrap：文本不会换行，文本会在同一行上继续，知道遇到<br/>标签为止

pre-wrap：保留空白符序列，但是正常的进行换行

pre-line：合并空白符序列，但是保留换行符

inherit：IE浏览器不支持此属性，从父元素继承whit-space

要让文本显示省略号：

容器宽度：width:value;
强制文本在一行显示，white-space:nowrap;
溢出内容被隐藏overflow：hidden;
溢出文本显示省略号：text-overflow:ellispsis

多行显示省略：

width:value;
over-flow:hidden;
text-overflow:ellipsis;
word-break:break-all;
display:-webkit-box !important;
-webkit-box-orient:vertical;
-webkit-line-clamp:value(设置多少行显示)

六、浮动属性

float：none / left / right

七、盒模型

外边距，边框，内边距，内容区组成

外边距：margin / margin-left / margin-right /margin-bottom / margin-top

margin属性在上下情况下，取最大一个值，谁大取谁（左右无异）

margin第一级会把margin-top传给上一级，这个是要注意的。

内边距：padding / padding-left /padding-right

八、元素类型的转换

盒子模型可通过display属性来改变默认的像是类型

display:18个属性值  该属性设置或检索对象元素应该生成的盒模型的类型；

常用的：block（块元素） / inline（内联元素） / inline-block（行内块元素） / none / list-item / table-header-group / table-footer-group ....

九、position定位属性，检索对象方法：

position:static / absolute /  relative / fixed

static：默认值无特定定位；

absolute：绝对定位，将对象从文档中拖离出来，受用left / right / top / bottom等属性，相对其最接近的一个并没有定位设置的元素进行绝对定位，如不存在这样的父对象，则依据body对象，而其层叠通过z-index属性定义；

relative：相对定位，对象不可叠，在文档流偏移位置（占文档流）

fixed：对象定位遵从定位方式（absolute）但要遵守一些规范，参照整个屏幕，低版本的浏览器不支持

CSS Bug 、CSS Hack 、 Filter

在学习的过程，我总结了一些，css的一些bug，首先我先在这里介绍一下什么为css bug，css hack，filter

CSS Bug：css样式在各浏览器中解析不一致的情况，不能正确显示问题称为css bug
CSS Hack：css中，Hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为它们都属于个人对css代码的非官方的修改或者非官方的补丁，有些人更喜欢使用path（补丁）来描述这行为
Filter：表示过滤的意思，它是一种对特定浏览器或组显示或隐藏规则或声明的方法，用来过滤不同浏览器的Hack类型，使用Hack带来副作用，降低css代码的可读性。增加代码的负担
设置css和hack和filter有两种方法：一是利用浏览器自身的bug，来隐藏或显示样式或声明，利用浏览器对css支持的不完善，如对某些规则或语法还没有形成支持来隐藏或显示样式

在这里，我总结了一些常见的IE6的css解析bug以及hack

图片间隙（把img元素转为块状元素）
双倍浮向（双倍边距）这是最常见的一个bug，当IE6-浏览器在解析浮动元素时，会错误地吧浮向边界加倍显示 （解决方法：给浮动元素添加display：inline；就是把元素设为内联元素）
在IE6-以下版本中，部分块元素拥有默认高度（低于18px）-解决方法，给元素添加声明 font-size：0；overflow：hidden；height：0；
表单元素行高不一致；给表单元素设置为float
在img放入a里面，可给img去除边框，img在a里，在IE浏览器时会有一个边框，就要去除border：0；
按钮元素默认大小以及样式不一致 - 解决方式：hack1：统一大小以及样式；hack2：input外套一个标签，在这个标签里写按钮的样式，吧input的边框去除；hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可
百分比：在IE6以下版本中解析百分比，会按四舍方式计算从而导致50%加50%大于100%的情况
高度塌陷，设置float浮动之后，会造成一个高度塌陷问题，float的bug还是比较多的，解决方式，在浮动元素最后，添加一个空的div标签，然后给这个空标签添加clear：bot和；清除浮动即可，但是这个方式还是比较麻烦，所以，清楚浮动，就在浮动元素的父元素中添加一个伪类after  

div:after{conten:"";display:blcok;clear:both;visibity:hidden;height:0;overflow:hidden;}

鼠标指针bug cursor属性的hard属性值只有IE浏览器识别，其他浏览器不是别，cursor中pointer属性值IE6+以及其他内核浏览器都可以识别，统一某元素鼠标指针形式为手型添加cursor：pointer；
透明属性，IE浏览器写法：filter：alpha（opcity=value1-100）

上面是一些简单的css总结，稍后会总结一下css3的新属性