CSS学习笔记（记录一些小技巧）

一、CSS简介

CSS：是Cascading Style Sheets的缩写，中文意思是级联样式表，只要是任何和样式有关的，布局、样式、颜色、大小等等，都与css相关。

CSS：是用来解决内容与表现分离的问题。（把内容和样式分离开）

二、CSS语法

CSS语法

selector{

property : value;

}

选择器、属性、值

class名最好小写

三、CSS基本选择器及权重值

1.标签选择器或元素选择器：

h1{          // （只要符合这个标签都会被选中）

}

2.分组选择器：

h1,p{

}

3.  子类选择器： div下的h1

div h1{

}

4.class选择器：

.class名{

}

5.id选择器：

#id名{

}

6.其他选择器

a:hover{

color: red;   //鼠标滑过字体颜色变红

}

7.全部选择器

*{

}

权重值：

id选择器为100

class选择器为10

标签选择器为1

四、元素的类型

块元素：上下分布，宽度默认是其父级元素的100%

p、h1、div

行元素：水平分布

li a input

改变元素类型使用

display: inline-block;

display: block;

五、CSS的颜色

修改字体颜色：color: red;

修改背景颜色：backgroud-color: blue;

修改边框颜色：border: 1px solid #666;

颜色：

英文单词：red、bule

16进制：#ff0000   简写#ff0（两个两个的字母都一样可以简写成1个）

RGB：rgb(255,0,0)  或 rgb(100%,0%,0%)（红绿蓝三原色）

六、一些实用的小技巧

小技巧1：文字垂直居中     （text-align=center文字水平居中）

height: 30px; 

line-height: 30px;

小技巧2：块元素居中

margin: 0   auto;

小技巧3：所有页面最好首先消掉内外边距（所有浏览器body都有8个像素外边距）

*{

 padding: 0;

 margin: 0;

}

小技巧4： 鼠标移动到按钮区域显示小手

cursor: pointer;

小技巧5：

表格里去掉重复边框： border-collapse: collapse;

去掉字体粗细： font-weight: normal;

小技巧6： 有浮动的存在时，下面内容为了不被覆盖，需要加both，即不左浮也不右浮。

clear: both;

小技巧7： 溢出隐藏

overflow: hidden;

小技巧8： 按z-index值的大小展示模块

z-index = 9999;

小技巧9： css精灵，选取图片中的某一个小图时使用

css sprite

#aa{

   background: url(xx.jpg) -104px -112px;

}

小技巧10： 如何让一个浮动的元素居中（在父元素居中）

方法一：

   text-align: center;

   float: left;

   height: 30px;

   position: absolute;

   left: 50%;

   margin-left: -81px; 

方法二：

父元素设置宽和高，margin:0 auto;

子元素：float: left;        一个span设置为：style="margin-right:0;"      

方法三：

display: inline-block;          父元素设置text-align：center，直接可居中 （inline-block在IE6中不支持）

margin:0 auto;只对块元素生效

text-align对于浮动不生效 

小技巧11：

background: red url(../images/tel.gif) no-repeat 95% 5px;

padding: 0 5px;

小技巧12：去掉a标签的下划线

text-decoration: none;无下划线