CSS基础知识总结

4.1 CSS概述

       CSS全称为“Casceading Siyle shee"，中文解释为“层叠样式表”、它是以 HTML 为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对基局的浏览器设置不同的样式。在网页设计时采用CSS技术，可以有效地对页面的布局、保的朗色器育景和其他效果实现更加精确的控制、只要对相应的代码做一些简单的整、学可以改交同一页面的不同部分效果，也可以改变同一个网站中不同网页的外观和格式。                    

4.1.1.CSS的基本概念

       HTML标记是用来定义文档内容，比如通过h，p和table等标记表达“这是标题”“这是段落”、“这是表格”等信息，而文档布局由浏览器完成。随着新的HTML标记(比如字体标记 和颜色属性)添加到HTML规范中，要实现页面美工、文档内容清晰、独立于文档表现层的站点变得越来越困难。传统HTML的缺点主要体现在如下几方面。
  1.维护困难
为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高，
  2.标记不足
HTML自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些 HTML 中都很难找到。

4.1.2传统HTML的缺点

CSS 通过定义标记如何表现，对页面结构风格进行控制，分离文档的内容和表现，克服了传统 HTML的缺点。将CSS 嵌人在页面中，通过浏览器解释执行，而且 CSS 文件是文本文件，只要理解 HTML都可以掌握它。其特点主要如下。
(1)页面的字体变得更漂亮，更容易编排。
(2)可以轻松控制页面的布局，
(3)可以在大多数浏览器上使用
(4)以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现页面下载更快。
(5)可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS 文件中相应的行，就可以改变整个网站上页面的显示样式。

4.1.2.1.维护困难

为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高

4.1.2.2.标记不足

HTML自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些 HTML 中都很难找到。

4.1.2.3.网页过“胖”

由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了很多宝贵的带宽。
4.1.2.4.定位困难

在整体页面布局时，HTML对于各个模块的位置调整很困难。

4.1.3.CSS的特点和优势

CSS 通过定义标记如何表现，对页面结构风格进行控制，分离文档的内容和表现，克服了传统 HTML的缺点。将CSS 嵌人在页面中，通过浏览器解释执行，而且 CSS 文件是文本文件，只要理解 HTML都可以掌握它。其特点主要如下。

4.1.3.1.表现和内容分离

CSS通过定义HTML,标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便

4.1.3.2.增强了网页的表现力

CSS样式属性提供了比HTML,更多的格式设计功能。例如，可以通过CSS样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。

4.1.3.3.使整个网站显示风格趋于统一

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网页的格式功能，从而大大降低网站的开发与维护的成本。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

存放css样式文件目录一般命名为style或css。

4.1.4.2.样式文件的命名规则

在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的便;在项目后期，为了网站性能上的考虑，会将不同的CSS文件整合到一个CSS文件中这个文件一般命名为style.css或css.css。

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设
者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样:的时间。样式名必须能够表示样式的大概含义(禁止出现如 Divl，Div2和 Style 等自名),者可以参考表4-1中的样式命名。

4.1.4.4.CSS代码注释

像其他语言一样，CSS允许用户在源代码中嵌人注释。CSS注释被浏览器忽略，不影响网页效果。注释有助于记住复杂的样式规则的作用、应用的范围等，便于样式规则的后期维护和应用。CSS注释以字符“/*”开始，以字符“*/”结束。注释可以是单行，也可以
是多行，并可以出现在CSS代码的任何地方。

4.1.4.5.CSS代码注释

代码缩进可以保证CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择器按两次 Tab 键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱

4.2 CSS语法基础

CSS就是一个包含一个或多个规则的文本文件，CSS规则由两个主要的部分构成:选择髀(Selector选择器)和声明(Declaration)
选择器通常是需要改变样式的HTML元素
声明由一个或多个属性与属性值对组成。属性是CSS的关键字，如font-family(字体)color(颜色)和border(边框)等，属性用于指定选择器某一方面的特性，而属性值则用于指定选择器的特性的具体特征。

1.基本语法

selector { propertyl : valuel ; property2 : value2 ; property3 : value3} ;选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3:…}

2.语法说明

(1)选择器。选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符
(2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“.”连接，每个属性/属性值对之间用分号(;)隔开。
(3)属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性 background-color;而在脚本语言中，对象属性则连写成backgroundColor在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。

4.2.2.CSS选择器类型

CSS选择器主要有4种类型:标记选择器、class选择器、ID选择器及伪类选择器等。

1.标记选择器

标记选择器(也可称为“元素选择器”)即直接使用HTML标记名称作为选择器。它定义的样式作用于页面中所有与选择器同名的标记

2.class选择器

class选择器也叫“类”选择器，可以给指定的标签设置一个class属性和 class 值然后通过 class选择器找到对应的标签，为其设置class值，即添加CSS样式。使用 class 类选择器时，需要用英文(.)进行表示，

3.ID选择器

ID 选择器用来对某个单一元素定义单独的样式。ID选择器只能在HTML 页面中使用次，针对性更强。定义ID选择器时，需要在id名称前加一个“#”

4.伪类选择器

前面介绍的选择器都是能够与HTML,中具体标记对应的，但是像段落的第1行，超链接访问前与访问后等，就没有H1ML标记与之对应，从而也没有简单的CSS选择器应用，为此CSS引进了伪类选择器

4.2.3.CSS选择器声明
 

在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，都可以使用集体声明的方法，用“,”分隔多个选择器，对风格相同的 CSS 选择器同时声明

1.集体声明
集体声明代码如下:
h3.h4,h5 ,p{ color:red ;font-size :18px;}
2.全局声明
对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式。这时可以利用全局声明符号“*”代码如下:
* {color : red ;
font-size:18px ;}
3.派生选择器(上下文选择器)
另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使(SS代码变得更加整洁。例如，要让列表项<i>中的<stnong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器:

li strong { font-style : italic ; font-weight ; normal ;} strong {font-weight :bold ;}

4.3 CSS引入方式

.3.1.内联样式表（行内样式表）

1.基本语法
<标记 slye=“属性!:属性值1;属性 2:属性值 2:…">修饰的内容</标记>
2.语法说明
语法说明:
(1)标记是指 HTML标记，如p，hl 和 body 等标记;
(2)标记的 style 定义的声明只对自身起作用;
(3)slyle 属性的值可以包含多个声明，每一声明之间用“;”分隔;(4)标记门身定义的 style 样式优先于其他所冇样式定义。

4.3.2.内部样式表

1.基本语法
I <style type =" text/css" >
选择器 1{属性 1:属性值1:属性 2:属性值 2;…}
选择器 2{属性 1:属性值1;属性 2:属性值 2;…·}选择器 n{属性1:属性值1;属性 2:属性值 2:…}</style>
2.语法说明
style 标记是成对标记，有1个type 属性是指 style 元素以 CSS 的语法定义。
选择器1，…，选择器n，可以定义n个选择器，再定义声明部分。
属性和属性值之间用冒号连接,“属性/属性值”对之间用分号分隔。

4.3.3.外部样式表

1.链接外部样式表
链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过网页的<head></head 标签中使用<link>标记将外部样式表文件链接到 HTML 文档中
(1)基本语法:
<link type="textcss”rel="stylesheet" href="外部样式表名.css">
(2)语法说明:语法中必须指定<link>标记的3个属性，其中 href是定义链接外部样式表文件的 url 可以是相对路径和绝对路径;rel是定义当前文档与被链接文档之间的关系，这里指定stylesheet，表示被链接的文档是样式表文件;type是定义链接文档的类型，这里类型指定为textcss，表示链接的外部文件为 CSS 样式表，
这里面涉及3个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。pe="texVcss"规定被链接文档的 MIME类型。href="mystyle.css"规定被链接文档的位置，只需要记住这个固定写法即可。

2.导入外部样式表
导人式是将一个独立的 CSS 文件导人 HTML 文档中，其是在 HTML 文档<bead>中应用<style>标签，并在<style>标签中的开头处用@ impont语句，即可导人外部样式表文件
(1)基本语法:
<style type=" text/css" >
@ import url("CSS 文件路径");
/*此处还可以存放其他 CSS 样式*/
</style>
(2)语法说明。导入样式表必须在 style 标记内开头的位置定义，可以同时导人多个外部样式表，每条语句必须以“;”结束。一般导人外部样式写在最前面，内部样式写在后面。
“@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式表的名称在书写时，必须是全称再加上后缀名“.css”，如“4-5.css”
导人式会在整个网页加载完后再加载CSS文件，因此如果网页比较大则会出现先显示无样式的页面，再出现网页的样式的情况。

4.4 CSS的属性单位

4.4.1.长度、百分比单位

1.相对类型
其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。如用cm(当前字母中，字母的宽度)作为属性单时，将会依据父元素的font-size 属性，如果没有父元素，则参考浏览器的默认值字号

2.绝对类型
绝对类型所使用的单位不会随着显示设备的不同而改变，也就是当属性值使用绝对单位时，不论在哪种设备上显示都是一样的，例如屏幕上的1cm与打印机上的Icm 是一样长的表 4-3 为浏览器支持的绝对类型的长度单位。
百分比单位是一种常用的相对类型，通常的参考依据为fnt-size属性。百分比值总是相对于另一个值。下面的语句将margin属性的值没置为font-size 的 200%:
pmargin:200% ;
需要注意的是，不管使用哪种单位，在设置的时候数值与单位之间不需要加空格

较大则会出现先显示无样式的页面，再出现网页的样式的情况。

4.4.2.色彩单位

HTML网页和CSS样式都是按照RGB来设颜色的。在HTML标记中只提供了两种设置色彩的方法:十六进制数和色彩英文名称。CSS则提供了三种定义色彩的方法:十六进制数、色彩英文名称、rgb 函数和rgba 兩函数。

1.用十六进制数方式表示色彩值
在计算机中，定义每种色彩的强度范围为0~255。当所有色彩的强度都为0时，将产生黑色:当所有色彩的强度都为 255 时，将产生白色。
在 HTML中，使用RGB概念指定色彩时，前面是一个“#”号，再加上6个十六进制数字表示，表示方法为:#RRGGBB、其中，前两个数字代表红光强度(Red)，中间两个数字代表绿光强度(Green)，后两个数字代表蓝光强度(Blue)，以上3个参数的取值范围为00~g。参数必须是两位数，对于只有1位的参数，应在前面补0。这种方法共可表示256x256x256种色彩，即16M种色彩。而红色、绿色、黑色、白色的十六进制设置值分别为#FF0000、#00FF00、#0000FF、#000000、#FFFFFF。

2.用色彩名称方式表示色彩值
用色彩名称方式表示色彩值在CSS中也提供了与HTML一样的用色彩英文名称表示色彩的方式。CSS只提供16种色彩名称，

3.使用RGB（x,y,z）函数表示
x、y、2、分别是红色、绿色、蓝色的值，x，y，zE[0，225]，亦可用百分比表示:对比rgba(x，y，z，a)中a是alpha 通道设置透明度取值 0~1。

4.5.CSS继承与层叠

CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，

4.6.1.块级元素

display属性设置为 block将显示块级元素，块级元素的宽度为100%，带有换行符，使块级元素始终占据一行，如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区 div 和 body 等元素都是块级元素。

4.6.2.行级元素(display:inline)

行级元素也称内联元素，display 属性设置为inline 将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超链接、图像、范用(pan)、衣单元素等都是行级元素，

4.6.3.列表项元素(display:list-item)

li-iiem 属性们衣示列表项目，其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号

4.6.4.隐藏元素(display:none)

none 属性值及示隐藏并取消盆模型，所包含的内容不会被浏览器解析和显示。通过把dispay 设置为 none，该元素及其所有内容就不再显示，也不占用文档中的空间。

5 CSS元素选择器

最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。

1. 语法：

2. 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者

3. 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

6 CSS背景(background)
background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种：

background-color          背景颜色
background-image          背景图像
background-repeat         背景图像设置水平或垂直平铺或不平铺
background-position       背景图像设置定位
background-attachment     背景图像设置固定或滚动
​
背景属性简写：
body{
    background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat --> 
background-attachment --> background-position

7 CSS字体 (font)
font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。

简写顺序：
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
注意，font-size 和 font-family 的值是必需的，否则无效。
​
(1)是绝对或相对大小，可以使用px、em、%和em组合来设置。

使用px设置：通过像素设置文本大小是设置的整个页面。
使用em设置：1em等于当前的字体尺寸，比如设置的默认字体是12px，因此1em的默认大小就是12px。像素转换em：px/12 = em
使用%和em组合设置：在所有浏览器的解决方案中，设置 <body> 元素的默认字体大小是 100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

块级元素和行内元素
块级元素(block-level)：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素特点：

总是从新行开始
高度，行高，外边距以及内边距都是可以控制的
宽度默认是容器的100%
可以容纳内联元素和其他块元素

行内元素(inline-level)：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度，宽度，对齐等属性，常用于控制页面中文本的样式。常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：
1.只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
16 行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。
 8 CSS 三大特性
层叠、继承、优先级
CSS层叠性：是指多种CSS样式的叠加。
CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是： 子承父业。
CSS优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

使用了 !important声明的规则。
考虑权重时，需要注意的一些点：

继承样式的权重为0。
行内样式优先。
权重相同时，CSS遵循就近原则。
9 盒子模型（CSS重点）
CSS三大模块： 盒子模型 、浮动 、定位。
盒子模型：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
​
盒子边框（border）

语法：border : border-width || border-style || border-color 
常用属性值：none：没有边框即忽略所有边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、
dotted(点线)、double(双实线)
10 实现居中
1 外边距实现盒子居中
满足两个条件：

必须是块级元素。
盒子必须指定了宽度（width）
然后给元素左右的外边距都设置为auto。
例如：.header{ width:960px; margin:0 auto;}

2 文字盒子居中

文字水平居中是 text-align: center
盒子水平居中 左右margin 改为 auto
20 盒子模型布局稳定性
按照优先使用宽度 （width）、其次 使用内边距（padding）、再次 外边距（margin）。
width > padding > margin
原因：

margin 会有外边距合并 还有 ie6下面margin 加倍的bug，所以最后使用。
padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
width 没有问题，我们经常使用宽度剩余法 高度剩余法来做。
11 盒子阴影
语法： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；
22 浮动(float)
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法：选择器{float:属性值;} 属性值可以是left，right，both，none。
目的：为了让多个块级元素同一行上显示。

12 定位(position)
position 属性值分为四种：

static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index的特点：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性