css

CSS的作用：

1. 美化网页，相当于的网页的皮肤

CSS的样式：

a) 行内样式：

i. 在标签内部添加style属性

ii. 适用范围：只适用于当前标签

b) 内嵌样式：

i. 在head标签中添加style标签

ii. 适用页面符合条件的标签

c) 外部样式：

i. 通过link标签引入外部的css文件

ii. 适用于所有导入该文件的页面

CSS的选择器

a) 基本（简单）选择器：（5）

i. 标签选择器 ：直接写标签名称

ii. Id选择器 ：#id名称

iii. 类别选择器 ： .class名

iv. 通用选择器 ：*{}

v. 伪类选择器 ：  ：选择器名

1. 例如：a:link 鼠标点击前  a:visited  鼠标点击后       a:hover  鼠标放上去     a:active   鼠标点击时

b) 复杂选择器：（5）

i. 后代选择器：eg：  div  a  （div中所有的a标签）

ii. 子代选择器：eg：div>a(div的子集a标签，直接下级)

iii. 并集选择器：eg：div,p,ul(给div及其他标签添加相同的样式)

iv. 交集选择器：eg:div.one(给class=one的div添加样式)

v. 属性选择器：eg:div[width](给具有宽度属性的div调节样式)

常见的css属性

字体属性

a) font-family   调节字体

b) font-size   调节文字大小

c) font-style   调节字体的样式（倾斜）

d) font-weight   调节字体的粗细

e) 缩写：要求：必须有font-size和font-family，正常的顺序是font-style  font-weight  font-size font-family

背景属性

1. background-color 调节背景颜色

2. background-image:url() 调节背景图片

3. background-repeat  调节背景是否重复

a) no-repeat

b) repeat-x

c) repeat-y

d) repeat

4. background-position  调节背景图片的位置

5. 缩写：没有顺序和个数的要求

文本属性：

1. text-decoration：none去除下划线

2. text-align:文字的水平对齐方式（left，center，right，justify）

3. line-height 文字的行高（一般我们用于在line-height=height时来调节文字的垂直居中）

列表属性

1. list-style-type   调节列表前的标识

2. list-style-image   调节列表前的图片

3. list-style-position  调节列表前标识的位置

a) outside  在列表外面

b) inside   在列表内部

元素的分类

1.  行内元素

a) 在一行显示，不能自动换行

b) 不能设置宽高

c) 常见的行内元素有：a  u  s  I   del  font  span

2.  块级元素

a) 自动换行，独立占一行

b) 可以设置宽高属性

c) 每个块级元素的宽度默认都是父元素的宽度

d) 常见的块级元素：p  h1-h6  ul  ol  dl  li  div

3.  行内块元素

a) 在一行显示，不能自动换行

b) 可以设置宽高属性

c) 常见的有：input  image button

4. 元素之间的相互转化

a) display：block   inline  inline-block

div

组成的部分：content  border   padding  margin

实际大小：content（width+height）+border+padding

border:  边框

a) border-color

b) border-style

c) border-width

d) border-left

e) border-right

f) border-top

g) border-bottom

padding  内边距

a) padding-left

b) padding-right

c) padding-top

d) padding-bottom

e) 缩写：

i. 一个值：上下左右

ii. 二个值：上下 左右

iii. 三个值：上 左右 下

iv. 四个值：上 右 下 左

margin外边距

a) margin-left

b) margin-right

c) margin-top

d) margin-bottom

e) 缩写：

i. 一个值：上下左右

ii. 二个值：上下 左右

iii. 三个值：上 左右 下

iv. 四个值：上 右 下 左

垂直外边距合并： 在垂直方向上，上一个盒子设置了下边距，下一个盒子设置了上边距,合并取最大值

垂直外边距塌陷：在子元素中设置margin-top，父元素也会随之移动：解决方式1.给父元素添加border属性2.给父元素添加overflow:hidden属性

浮动

标准流：标签元素在正常状态下呈现的形式，一般我们都称为标准流

浮动的作用：

1. 制作导航条

2. 网页的布局

3. 文字的环绕效果

浮动的特点：

1. 会产生脱标

2. 会发生元素转换

3. 不占位置

4. 同级元素之间一个发生浮动，其它的都要发生浮动

浮动的属性：float：left/right

清除浮动

在父元素没有设置高度而子元素又都发生了浮动，那么这个时候我们需要清除浮动产生的影响

清除浮动的方式：

1. 给父元素设置高度（通用性小）

2. 给父元素添加空标签，给标签添加clear(left,right,both,none)(麻烦，不建议使用)

3. 给父元素添加overflow:hidden属性（不建议使用）

4. 使用伪元素清除浮动：

.clearfix：after{

content:““；

height：0；

line-height:0;

display:block;

clear:both;

visibility:hidden;

}

.clearfix{

zoom:1;  /* 兼容ie浏览器*/

}

元素的隐藏

a) overflow:hidden;(隐藏元素中溢出的内容，属性值还有：scroll，auto自动)

b) display:none； 隐藏当前元素;不占位置

c) visibility:hidden; 隐藏当前元素;占位置