CSS复习笔记.docx

CSS复习笔记.docx

《CSS复习笔记.docx》由会员分享，可在线阅读，更多相关《CSS复习笔记.docx（19页珍藏版）》请在冰豆网上搜索。

CSS复习笔记

Day01

一.CSS2.0（CascadingStyleSheet）层叠样式表

1.作用：

CSS用来修饰网页的（网页表现）

w3c规定尽量用css样式替代XHTML的属性

2.css的使用

a.内部样式（写在网页的头部）

b.内联样式（写在网页标记中）

<标记名称style="css代码"/>

<标记名称style="css代码">...

c.外部样式

（1）type:

链接页面的文档类型

（2）rel:

当前文档和目标文档的关系

（3）href:

css样式目标页面

（4）media:

根据媒体类型使用不同的css样式

all所有|screen计算机屏幕|tv电视|print打印机

说明：

内联样式优先级最高,如果内部样式和外部

样式冲突，后面的覆盖前面的样式

3.css的语法结构

选择器{属性:

值;属性:

值;...}

selector{attrbute:

value}

4.选择器（selector）

（1）通配选择器====*（自动应用所有标记）

（2）标记（类型）选择器====标记名称（自动应用指定标记）

（3）class类选择器===.class名称

（手动应用任意标记中,一个标记中多个class名称用空格隔开）

应用:

在标记中属性class="class名称"

（4）id选择器====#id名称

（手动应用唯一标记中）

应用:

在标记中属性id="id名称"

（5）群组选择器===选择器名称,选择器名称...

（多个选择器有相同属性的缩写）

（6）后代选择器===选择器名称选择器名称

（两个选择器至少是父子关系）

（7）子代选择器===选择器名称>选择器名称

（两个选择器必须是父子关系）

5.颜色值

a.单词字符：

red红,green绿...

b.十六进制:

#ff0000===#f00红色

c.rgb（）：

rgb:

分别是red,green,blue

0-255或百分比

例如:

红色:

#f00rgb（255,0,0）rgb（100%,0%,0%）

绿色：

#0f0rgb（0,255,0）

蓝色：

#00frgb（0,0,255）

黄色:

#ff0rgb（255,255,0）

白色:

#fffrgb（255,255,255）

黑色:

#000rgb（0,0,0）

浅灰:

#eeergb（230,230,230）

深灰：

#333rgb（3,3,3）

6.文本样式1

（1）文本颜色color:

颜色值

（2）文本大小font-size:

value（单位：

像素px,

em:

网页默认字体大小的比例例如：

1.5em默认字体的1.5倍）

（3）文本加粗font-weight:

normal|bold|值（100-900）

（normal==400bold==700）

（4）文本倾斜font-style:

normal|italic

（5）文本字体font-family:

宋体,微软雅黑,'TimesNewRoman'

（6）text-decoration:

none|underline下划线|

overline上划线|line-through删除线

7.选择器优先级

标记选择器权值0001

class类选择器权值0010

id选择器权值0100

内联样式权值1000

说明：

选择器权值越大优先级有高，

样式显示选择器优先级高的

继承的样式优先级最低,

如果权值相同后面的覆盖前面的样式

!

important的优先级最大

Day02

一.伪类选择器：

a.行为伪类

:

link：

链接未访问状态

:

visited：

链接已访问状态

:

hover:

设置鼠标悬停状态

:

active:

设置鼠标激活状态

说明:

LVHA顺序设置

工作：

a{

color:

#333;

text-decoration:

none;

}

a:

hover{

color:

#f00;

text-decoration:

underline;

}

:

focus设置获得光标效果

去掉文本框默认边框

:

focus{

outline:

none;

}

b.UI元素伪类

:

checked：

设置元素选择状态

:

disabled:

设置元素禁止状态

:

enabled:

设置元素启用状态

二.伪元素选择器

:

before

:

after

例如：

:

before{

content:

"内容"|url（图像URL）;

}

三.布局样式中盒子属性：

1.width:

宽度

2.height：

高度

div标记：

块元素，宽度是父级百分之百

span标记：

行元素,宽度是元素的宽度

说明：

行元素不能设置宽高，只能给块元素

设置宽高，及有宽高属性的元素设置img,input等

3.padding:

内边距（边框和内容的距离）

padding-top:

value上内边距

padding-right:

value右内边距

padding-bottom:

value下内边距

padding-left:

value左内边距

缩写：

padding:

value上下左右一个值

padding:

valuevalue上下左右

padding:

valuevaluevalue

上左右下

padding:

valuevaluevaluevalue

上右下左

说明：

padding会撑大盒子，并且只有正值没负值

4.margin:

外边距（元素边框的外围）

margin-top:

上外边距

margin-right:

右外边距

margin-bottom:

下外边距

margin-left:

左外边距

缩写：

margin:

value上下左右一个值

margin:

valuevalue上下左右

margin:

valuevaluevalue

上左右下

margin:

valuevaluevaluevalue

上右下左

说明:

a.有正值，负值，auto

b.margin:

0auto;

实现盒子块元素的水平居中

c.将盒子中的空隙清除margin:

0,padding:

0

d.两个元素上下margin冲突取大值

左右冲突值相加

e.嵌套元素，子元素会将上下margin值

传递给父元素，如果父元素和子元素margin

冲突取大值

5.border（边框）

border-top-width:

上边框宽度

border-top-sytle:

上边框样式

（实线solid,虚线dashed,

点线dotted,双线double）

border-top-color:

上边框颜色

border-right-width:

右边框宽度

border-right-sytle:

右边框样式

border-right-color:

右边框颜色

border-bottom-width:

下边框宽度

border-bottom-sytle:

下边框样式

border-bottom-color:

下边框颜色

border-left-width:

左边框宽度

border-left-sytle:

左边框样式

border-left-color:

左边框颜色

缩写1

border-width:

value四个方向的宽度

border-width:

valuevalue上下左右

border-width:

valuevaluevalue

上左右下

border-width:

valuevaluevaluevalue

上右下左

border-style:

value四个方向的样式

border-color:

value四个方向的颜色

缩写2

border:

widthstylecolor

例如：

border:

1pxsolid#f00;

6.盒子的总宽度计算

总宽度=左外边距+左边框+左内边界+盒子width

+右内边界+右边框+右外边距

四.文本样式2

font:

font-style倾斜

|font-variant小号的大写字母

|font-weight加粗

|font-size字大小

|line-height行高

|font-family字体

font-style:

normal|italic

font-variant:

normal|small-caps小号的大写字母

font-weight:

normal|bold|值（100-900）

normal==400bold==700

font-size:

value（单位:

px,em）

font-family:

宋体,Arial,'TimesNewRoman';

line-height:

value行高

说明:

元素的行高等于盒子的

高度，实现元素的垂直居中

text-align:

left|center|right

元素的水平对齐

text-decoration:

none|underline

|overline|line-through

text-transform:

none

|capitalize首字母大写

|uppercase大写字母

|lowercase小写字母

text-indent:

value（单位pxem）首行缩进

说明：

只能对块元素使用text-indent

五.浮动（Float）

float:

left左浮动

|right右浮动

|none不浮动

说明:

1.元素浮动脱离文档流（不占位）,无论是

左浮动还是右浮动靠在含边框的边界或浮动盒子

上才停止编辑

2.设置块元素浮动，宽度会缩到和内容一样宽度

3.设置行元素浮动，可以设置宽高

4.设置元素浮动对后面元素的影响是实现文字环绕

六.清除浮动

clear:

both清除两边浮动

|left清除左浮动

|right清除右浮动

说明：

高度塌陷：

父元素中的子元素都浮动，

并且没有设置父元素的高度，

父元素高度为0

解决方法：

a.clear:

both（父级中的子级盒子）

b.万能清除（给父级加样式）

.clear{

clear:

both;

zoom:

1;

}

.clear:

after{

content:

'.';

display:

block;

clear:

both;

height:

0;

visibility:

hidden;

}

七.布局显示

（1）display:

none|

block块

inline行

inline-block内联块

说明：

inline-block属于块元素，

能设置宽高，但是还具有行

元素不自动换行的功能

display:

none不显示，

脱离文档流（不占位）

（2）visibility：

visble默认值

|hidden隐藏

说明：

visibility:

hidden占文档流

（占位）

Day03

一.背景（background）

background-color:

value背影颜色

background-repeat:

repeat（重复默认值）

|repeat-x水平重复

|repeat-y垂直重复

|no-repeat不重复

background-image:

url（图片路径）

背影图片

background-attachment:

scroll（滚动）

|fixed（固定）

background-position:

value（水平位置）value（垂直位置）

说明:

a.水平位置值:

leftcenterright

垂直位置值：

topcenterbottom

b.当background-position有一个值

代表水平方向，垂直方向默认垂直居中

例如:

background-position:

right;//center

水平居右垂直居中

c.background-position:

数值数值

如果是正值背景图片往右，负值往左

缩写：

background:

colorimagerepeatattachmentposition;

二.图片精灵（图片整合）csssprites

1.原理：

将多张小背景图片整合到一张大图中

2.作用：

减少服务器请求，客户端显示每张图片

都要向服务器请求，为了减少服务器请求

将图片整合

三.无序，有序列表

list-style-type:

disc:

circle:

CSS1空心圆

|square:

CSS1实心方块

|decimal:

CSS1阿拉伯数字

|lower-roman:

CSS1小写罗马数字

|upper-roman:

CSS1大写罗马数字

|lower-alpha:

CSS1小写英文字母

|upper-alpha:

CSS1大写英文字母

|none:

CSS1不使用项目符号

list-style-image:

none|url（图片路径）

list-style-position:

outside|inside

缩写

list-style:

typeimageposition

例如：

list-style:

none;（重要）

list-style:

url（1.jpg）inside;

工作中：

background:

url（images/dot.gif）no-repeat0px-96px;

padding-left:

12px;

Day04

布局：

文档流布局

浮动布局

定位布局

一.定位（Position）

（1）属性值

a.static（默认值）:

标准文档流

b.fixed（固定定位）:

脱离文档流（不占位），

通过top,left,right

bottom属性定位置

c.absolute（绝对定位）：

脱离文档流（不占位），

通过top,left,right

bottom属性定位置

说明：

默认情况坐标在浏览器的左上角，

通过左上角移动位置

d.relative（相对定位）：

通过自身文档流定位（位置保留），

通过top,left,right

bottom属性定位置

说明:

默认情况坐标在自身盒子的左上角

工作中：

给父元素或祖先加相对定位（relative）,

实现坐标定位到自身盒子的左上角,

然后给子元素加绝对定位（absolute）,

最后对子元素通过top,left,right

bottom实现移动效果

（2）z-index（实现层排序）

说明：

z-index属性只能有fixed,absolute

relative属性值时使用

可以是正值，负值；默认值是0

值越大定位层越在上面

二.透明度属性

（1）opacity:

0~1;

（支持的浏览器：

chrome谷歌，firefox火狐，

safari苹果浏览器,opera欧朋）

说明：

透明度属性值0代表完全透明

1代表不透明

（2）filter:

alpha（opacity=1~100）

（支持的浏览器:

IE）

Day05

一.定位（Position）

（1）属性值

static：

默认值（标准文档流）

fixed（固定定位）:

脱离文档流（不占位）,通过top,left

right,bottom属性移动

absolute（绝对定位）:

脱离文档流（不占位）,通过top,left

right,bottom属性移动

说明:

默认坐标在浏览器的左上角，通过左上角坐标来移动

fixed有滚动条时与absolute有区别

relative（相对定位）:

根据自身文档流定位（保留位置）

说明：

默认坐标自身盒子的左上角

工作中:

首先给父元素或祖先一个相对定位，实现默认坐标在自身

盒子的左上角，然后再子元素绝对定位（在自身盒子的基

础上移动），子元素通过top,left,right,bottom属性移动

二.透明度

（1）opacity:

0~1

说明:

chrome（谷歌），firefox（火狐）

safari（苹果浏览器）,opera（欧朋）

（2）：

filter:

alpha（opacity=1~100）

说明：

IE支持

三.Hack技术（针对不同浏览器兼容问题解决方法）

（1）条件注释表示法

--[IFIE]>...

[ENDIF]-->

--[IFIE6]>只有IE6.0支持的内容

[ENDIF]-->

（2）属性前缀表示法

*只有IE6.0和IE7.0例如:

*background

_只有IE6.0例如_background

（3）选择器前缀表示法

*html标记{...}只有ie6支持

*+html标记{...}只有ie7支持

四.

overflow属性：

overflow:

visible默认值|

auto|

hidden|

scroll

auto:

在必需时对象内容才会被裁切或显示滚动条

hidden:

不显示超过对象尺寸的内容

scroll:

总是显示滚动条

总结:

1.css样式链接方法（内部链接，外部链接，内联样式）

2.选择器（

通配符选择器

标记选择器

class类型选择器

id选择器

群组选择器

后代选择器

子代选择器

）

3.伪类选择器

4.盒子属性（width,height,padding,margin,border,background）

5.全局样式

6.布局中浮动

7.布局定位

8.hack兼容