CSS复习汇总

1，CSS样式表的规则

CSS由两部分组成:选择器和声明，其中声明由属性和属性值组成，简单的CSS规则如下:

body{margin:32px}

(1)body:选择器  (2)margin:属性  (3)32px:属性值  (4){margin:32px}:声明

选择器：选择器用于指定对文档中哪个标签进行定义。
声明：声明包含在大括号"{}"中，在大括号中首先给出属性名，接着是冒号，然后是属性值。结尾分号是可选的，但是强烈推荐使用结尾分号。
属性:属性有官方CSS规范定义。用户可以定义特有的样式效果。
属性值：声明的属性值放置在属性名和冒号之后，它确切定义了应该如何设置属性。

2，使用CSS选择器

（1）标签选择器

所谓标签选择器，顾名思义，就是用来对HTML中标签进行描述的选择器，通过标签选择器可以对所有标签进行统一描述，统一应用。如下所示统一对<p>标签的内容进行描述

p{
  font-size:40px;
  color:red;
  font-weight:bold;
}

（2）类选择器

类使用class进行命名，在css样式中使用类前加 . 的方式来表示对类进行描述。在一个HTML中，可以有很多标签拥有同一个类

.blue{
    color:blue
}
<p class="blue">测试文本</p>

（3）id选择器

id 使用id进行命名，在css样式中使用前面加#的方式来表示对id进行描述。在一个HTML中，1个id只能定义一个标签

#red{
	color:red
	}

<p id="red">测试文本</p>

3，在HTML中调用CSS的方法

（1）内联式CSS样式

内联式css样式，通过元素的style属性在开始标签内直接书写样式规则，

<p style="font-size:10px;color:red">文本</p>

（2）内嵌式css样式

<style type="text/css">
#red{
	color:red
	}
</style>

<p id="red">测试文本</p>

（3）链接式css样式

<link rel="stylesheet" type="text/css" href="color.css" />

（4）导入外部css样式

<style type="text/css">
	@imoort url(color.css);
</style>

4，样式的参数单位

长度单位: px（像素），%(百分比)，em（元素的字体高度），ex（字母x的高度）
颜色单位:RGB

5，设置网页文本的具体样式

使用color定义网页文本的颜色
使用font-family属性设置文字的字体
使用font-style定义文字的倾斜效果:normal(正常)，oblique(斜体)，italic(偏斜体)，
使用font-weight设置文字的粗细:normal(正常),bold(粗体),bolder(特粗体),lighter(细体),inhert(继承),100~900
使用letter-spacing设置网页文本字母之间的距离
使用word-spacing设置网页文本单词之间的距离
使用line-height设置网页文字行间高
使用margin设置网页文字段落间距
使用text-align控制文本的水平对齐方式:left(左对齐) center(居中对齐) right(右对齐)
使用vertical-align属性控制文本的垂直对齐方式
使用color,background-color,background-image3个属性设置文字的颜色，背景颜色及背景图像。
使用font-variant实现英文字母小写边大写，使用text-transform实现英文字母大小写转换
使用text-decoration实现网页文字的装饰效果:underline(下划线)，line-throuht(删除线)，overline(顶划线)
使用text-indent设置段落首行缩进效果

6，设置网页图像特效

（1）图像边框基本属性

在css3中使用border-style属性设置边框的样式，如实线，点画线，丰富了边框的表现形式。边框具有三个属性：

border-width:设置边框的粗细。Thin(细边框),Medium(中等边框),Thick(粗边框),Length(自定义边框宽度)
border-color:设置边框的颜色。
border-style:设置元素边框样式。None(无边框),Hidden(与None相同，不过可用于解决冲突),Dotted(点状边框),Dashed(虚线),Solid(实线),Double(双线),Groove(3D凹槽边缘，效果取决于border-color),Ridge(同上)

（2）为不同的边框设置不同的样式，

分别为不同的边框设置不同的样式，上边框(border-top),右边框(border-right)，左边框(border-left)，下边框(border-bottom)

7,设置网页背景颜色与背景图像

（1）使用background-color设置背景颜色，

（2）使用background-image设置背景图片

background-image:url("background1.jpg");

（3）使用background-repeat设置背景图像平铺

repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向上平铺
repeat:背景图像在横向和纵向上平铺
no-repeat:背景图像不平铺
round:背景图像自动缩放,知道适应且填充满整个容器
space:背景图像以相同的间距平铺且填充满整个容器或某个方向

（4）使用background-position设置背景图像的位置

<percentage>:用百分比指定背景图像填充的位置
<length>:用长度值指定背景图像的填充的位置
center:背景图像横向和纵向居中
left:背景图像在横向上填充从左边开始
right:背景图像在横向上填充从右边开始
top:背景图像在纵向上填充从顶部开始
bottom:背景图像在纵向上填充从底部开始

（5）使用background-attachment设置背景图片位置固定

fixed：背景图像相对于窗体固定
scroll：背景图像相对于元素固定，也就是说背景图像会随元素的滚动而滚动，这是因为背景图像总是跟着元素本身，但会随元素的祖先元素或窗体滚动
local：背景图像相对于元素内容固定，也就是说背景图像不会随元素的滚动而滚动，这是因为背景图像总是跟着元素内容

8，css3的高级特性

（1）复合选择器

1，交集选择器，

交集选择器由两个选择器直接连接构成，其结果是选中两者各自元素范围的交集。其中第一个必须是标签选择器，第二个必须是类选择器或id选择器，这两个选择器之间不能有空格，必须连续书写。这种方式构成的选择器将同时选择满足前后两者定义的元素。

<html>
<head>
<style type="text/css">
p{color:blue;font-size:18px;}
p.p1{color:red;font-size:40px;}
.p1{color:black;font-size:30px;}
</style>
</head>
<body>
<p>使用p标记</p>
<p class="p1">指定了p.p1类别的段落文本</p>
<h3 class="p1">指定了.p1类别的标题</h3>
</body>
</html>

显示结果如下:

2,并集选择器

并集选择器是由多个选择器通过逗号连接而成，这些选择器分别是标签选择器，类选择器或id选择器等，它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。

<html>
<head>
<style type="text/css">
h1,h2,h3{
	color:red;
	font-size:10px;
}
</style>
</head>
<body>
<h1>h1文字</h1>
<h2>h2文字</h2>
<h3>h3文字</h3>
</body>
</html>

显示结果如下:

3，后代选择器

在实际编写CSS样式时，我们可能只对某一个标签的子标签使用样式，这样后代选择器就派上用场了。后代选择器是指选择符组合中前一个选择器包含后一个选择器，选择器之间使用空格作为分隔符。

<html>
<head>
<style type="text/css">
h1 span{
	color:red;
}
</style>
</head>
<body>
<h1>这是h1标签内的文本<span>这是h1标签下span内的文本</span></h1>
</body>
</html>

（2）css的继承特性

在css中父类的css样式会默认继承给子类，但不是所有的属性都支持继承，以下属性是可以被继承的:

文本相关的属性是可以被继承的。例如:font-family,font-size,sont-style,font-weight,font,line-height,text-align,text-indent,word-spaceing
列表相关的属性是可以被继承的。例如:list-style-image,list-style-position,list-style
颜色相关的属性是可以被继承的。例如：color

9，div+css3网页标准化布局

（1）定义DIV

DIV是一个容器，HTML页面中的每一个标签对象几乎都可以称为一个容器。

DIV是HTML中指定的专门用于布局设计的容器对象。在传统表格式的布局当中之所以能够进行页面的排版布局设计，完全依赖表格对象table。在页面中绘制一个由多个单元格组成的表格，然后在相应的表格中放置内容，并通过对表哥单元格位置的控制实现布局的目的，这些都是表格式布局的核心。相比表格式布局，利用DIV进行布局是一种全新的布局方式，DIV是这种布局的核心对象，使用CSS3布局的页面不需要依赖表格，仅从DIV的使用上说，使用一个简单的布局只需要依赖DIV与CSS3，因此也可以称为DIV+CSS3布局。

（2）CSS布局定位

1，浮动定位

浮动定位是CSS排版中非常重要的手段。浮动的框可以左右移动，知道其外边缘碰到包含框或另一个框的边缘，因为浮动框不在文档的普通流中，所以文档流中的块框看起来如同浮动框不存在一样。

float用于设置对象是否浮动显示，以及设置其具体浮动的方式，可选的参数如下:

left：文本或图像会移至父元素的左侧。
right:文本或图像会移至父元素的右侧。
none:默认值，文本或图像会显示于它在文档中出现的位置。

2，position定位

position定位属性与float属性一样，也是CSS排版中非常重要的概念。从字面意思上理解，position就是定位的位置，即块相对于其父块所在的位置和相对于它自身所在的位置。

其中，position的可用属性值如下表所示。

static：静态（默认）,无特殊定位
relative：相对，对象不层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置。
absolute：绝对，将对象从文档流中脱出，通过width,height,left,right,top和bottom等属性与margin,padding,border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义
fixed：悬浮，使元素固定在屏幕的某个位置，其包含块是可视化本身，因此它不随滚动条的滚动而滚动。
inhert：该值从其上级元素继承得到

（1）相对定位(relative)

如果对一个元素进行相对定位，可在它所在的位置上通过设置垂直或水平位置让这个元素相对于起点进行移动，如果将top设置为40像素，那么框出现在原位置顶部下方40像素的位置。如果将left设置为40像素，那么会在元素左边创建40像素的空间，也就是将元素向右移动。

在使用相对定位时，无论是否移动，元素仍然占据原来的空间，因此，移动元素会导致覆盖其他框。

（2）绝对定位（absolute）

相对定位实际上被看作普通定位模型的一部分，因为元素的位置为相对于它在普通流中的位置。与其相反，绝对定位元素的位置与文档流无关，因此不占据空间，普通文档流中其他元素的布局就像绝对定位的元素不存在一样。简单的说，使用了绝对定位之后，对象就会浮在网页上面。

（3）悬浮定位（fixed）

将块的position参数设置为fixed，本质上与将其设置为absolute一样，只不过块不随着浏览器的滚动条向上或向下移动。因为浏览器对该属性值的兼容性不理想，所以不推荐使用该值。

10，可视乎模型

（1）盒模型

所有页面中的元素都可以看成是一个盒子，占据这一定的页面空间。一般来说，这些被占据的空间往往比单纯的内容要大。换句话说，可以通过整个盒子的边框和距离等参数来调节盒子的位置。

一个盒模型是有content（内容），border（边框），padding（填充）和margin（间隔）4个部分组成的。填充，边界和边框都分"上右下左"4个方向，既可以分别定义，也可以统一定义

（2）视觉可实话模型

在HTML文档元素中，p,hl,div等元素被称为块级元素，这就意味着这些元素显示为一块内容，即"块框"。与此相反，strong和span等元素成为行内元素，因此它们的显示内容在行中，即"行内框"。但是我们可以通过块级元素与行内元素的display属性改变生成框的类型，将行内元素的display属性设置为block，可以让内行元素表现的像块级元素一样，反之亦然。

11，CSS3中盒模型的新增属性

在CSS3中新增了3种盒模型的控制属性，分别是overflow,overflow-x,overflow-y。

overflow，overflow-x,overflow-y

overflow属性用于设置当对象的内容超过其指定的高度及宽度时应该如何进行处理，相关属性如下:

visible:不剪切内容也不添加滚动条。如果显示声明该默认值，对象将被剪切为包含对象的window或frame的大小，并且clip属性设置将失效
auto：该属性值为body对象和textarea的默认值，在需要时剪切内容并添加滚动条
hidden：不显示超过对象尺寸的内容
scroll：总是显示滚动条