1.Css（层叠样式表）：拥有对网页和模式样式编辑的能力
CSS语法说明：每个CSS样式由两个部分组成，即选择符和声明，声明又称属性和属性值。属性必须在花括号中，属性与属性值用冒号连接。每条声明用分号结束。
选择符{属性：属性值}
1.1 css属性：属性是指定选择符具有的属性，它是css的核心，css共有150多个属性。
1.1.1文本属性
字体的类型
{font-family:字体1，字体2;}
说明：
当字体是中文字体时需加引号；“宋体”
当英文字体中有空格时需加引号：如：“Time New Roman”；
window中文版操作系统下：中文默认字体为宋体或者新宋体，英文字体默认为Arial。
文本颜色：
{color：颜色值}
1.1.2 Css列表属性
定义列表符号样式：
{list-style-type:}
说明：
取值：disc（实心圆）circle（空心圆） square（实心方块） none（去掉列表符号）
使用图片作为列表符号：
{list-style-image:url（图像路径）;}
定义列表符号的位置
{list-style-position: ;}
说明：取值：outside（外边）inside（里边）
1.1.4 CSS背景属性
背景颜色
语法：选择符{backgrand-color :颜色值;} 简写：background:color值；
背景图片的设置
语法：background-image:url(背景图片的路径及全称)；
说明：网页上有两种图片形式：插入图片、背景图；插入图片：属于网页内容，也就是结构。背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
背景图片的显示原则
1） 容器尺寸等于图片尺寸，背景图片正好显示在容器中；
2） 容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3） 容器尺寸小于图片尺寸，只显示元素范围以内的背景图。、
4） 加载背景图必须有容器区域。
背景图片平铺属性
语法：
选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y}
no-repeat:不平铺
repeat:平铺（默认）
repeat：横向平铺
背景图的固定
语法：选择符{background-attachment:scroll（滚动）/fixed（固定）；}
说明：fixed固定，不随内容一块滚动；scroll:随内容一块滚动
各属性的缩写
语法：选择符{background:属性值1属性值2属性值3；}
背景属性：{background:#} url(背景图片的路径及全称) no-repeat center top;}
1.1.5 CSS浮动属性
float:定义网页中其他文本如何环绕该元素显示
有三个取值：
Left:元素活动浮动在文本左面
Right：元素活动在右面
None:默认值，不浮动
2.样式的建立：内部样式 外部样式 和内联样式
2.1内部样式表（嵌套到页面中）
语法
<style type=”text/css”>
Css语句
</style>
注：使用style标记创建样式时，最好将该标记写在<head></head>
2.2外部样式表2种方法
a. 外部样式的创建
b. 外部样式的导入
方法一：（推荐使用）
语法：
<link rel=”stylesheet” type=”text/css” href=”目标文件的路径和文件名全程”>
说明：使用ink元素导入外部样式表时，需将元素写在文档头部，即<head></head>之间
rel：用于定义文档关联样式表； type：定义文档类型。
方法二：（一般不使用）
<style type=”text/css”>
@import url(“目录文件路径及文件名全称”)
</style>
说明：@和import之间没有空格 url和小括号之间也没有空格；
括号内部加引号，必须以分号结尾。
2.3内联样式表（表行间样式、行内样式、嵌入式样式）
语法：<标签 style=”属性：属性值；属性：属性值；”></标签>
例如：<div style=”width：100px;”></div>
样式表的优先级：
1）内部样式的优先级最高
2）内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高
3.CSS选择符（选择器）
选择符的定义：选择符表示定义样式的对象，可以是元素本身，也可以是一类元素或者指定名称的元素。
常用的选择符有十种左右：类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符、伪对象选择符。
元素选择器/类型选择器/标签选择器（element选择器）
3.1 Id选择器
语法：id名{属性；属性值;}
说明：
- 当我们使用id选择符时，应该为每个元素定义一个id属性：如
- Id选择符的语法格式是”#”加上自定义的id名；
如：#box{width:300px;height:300px;} - 起名时要取英文名，不能用关键字；（所有的标记和属性都是关键字）
- 一个id名称只能对应文档中一个具体的元素，因为id只能定义页面中某个唯一的元素对象。
- 最大的用处：创建网页的外围结构。
3.2 Class选择器
语法：.class名{属性：属性值;}
说明：当我们使用类选择符时，应先为每一个元素定义一个类名称。
类选择符的语法格式是：“如：<div class=”top”></div>”
用法：class选择符更适合定义一类样式。
3.3 群组选择器
语法：选择符1，选择符2，选择符3……{属性：属性值}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
3.4 包含选择器
语法：选择符1（父）选择符2（子）{属性：属性值}
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2；
实例：div ul li{height：200px;}
3.5 通配符
语法：*{属性：属性值}
说明：统配选择符的写法是“”，其含义就是所有元素
用法：常用来重置样式。
3.6 伪类选择器：
a:link {color:red;} /*未访问的链接状态*/
a:visited {color:green;} /*已访问的链接状态*/
a:hover {color:blue;} /*鼠标滑过链接状态*/
a:active {color:yellow;} /*鼠标按下去时的链接状态*/
说明：
当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a:link，a:visited，a:hover，a:active，错误的选择样式有时会使超链接的样式失效。
为了简化代码（表示四种状态的颜色相同），可以把伪类选择符中相同的声明提出来放在a选择符中：例如：a:{color;red}
a:hover{color:green;}表示超链接的三种状态都相同，只有鼠标滑过变化颜色。
- 盒模型
盒模型的概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系，css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含内容区、补白（填充）、边框、边界（外边距）这就是盒模型
Padding的属性
padding是设定页面中一个元素内容到元素的边框之间的距离，也称补白
用法：
1） 用来调整内容（子元素）在容器（父元素）中的位置关系
2） 用来调整子元素在父元素中的位置关系，注：padding属性需要添加在父元素上
3） padding值是额外加在元素有大小上的，如想保证元素大小不变，需从元素宽或高上减掉增加的padding大小
padding属性值的四种方式
四个值：上 右 下 左{padding: 10px 20px 30px 40px;}
三个值：上 左右 下{padding:10px 20px 30px;}
二个值：上下 左右{padding:10px 20px;}
一个值：四个方向padding:2px;/定义元素四周填充为2px/
可单独设置某一方向填充
上方向：padding-top：10px;
右方向：padding-right：10px;
下方向：padding-bottom：10px;
左方向：padding-left：10px;
注意：padding值不能是负值
Padding区域在border与content之间；背景色与背景图像会覆盖padding和content组成的区域；
Margin外边界
边界：margin在元素外边的空白区域，被称为边距（值的属性与padding类似）
盒子大小的计算
盒子实际占有宽度区域
Margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
盒子实际占有高度区域
Margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
例：
div{width:300px;height:300px;border:10px solid #000;
margin:50px;
padding:30px;
此盒子的宽度为：300px+20px+100px+60px=480px
文本属性-容器溢出
{overflow:visible/hidden/scroll/auto/inherit;}
visible：默认值，内容不会被修建，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容；
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其它的内容；
inherit：规定应该从父元素继承overflow属性的值。
文本属性-空白空间
{white-space：normal/pre/nowrap/pre-wrap/pre-line/inherit;}
normal:默认值，多余空白会被浏览器忽略只保留一个；
pre:空白会被浏览器保留；
pre-wrap:保留一部分空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
文本属性-文本溢出
{text-overflow:clip/ellipsis;}
取值：
clip:不显示省略号（….），而是简单的裁切；
ellipsis:当对象内文本溢出时，显示省略标记；
文本属性-省略号设置：
Text-flow属性仅是：当文本溢出时是否省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
-
容器宽度：width：value（px,%,都可以）
-
强制文本在一行内显示：white-space：nowrap;
-
溢出内容为隐藏：overflow：hidden；
-
溢出文本显示省略号：text-overflow：ellipsis；
-
HTML元素的分类：块状元素，内联元素，可变元素
块级元素特点
A. 块级元素在网页中就是以块的形式显示，所需块状就是元素显示为矩形区域，
B. 默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；
C. 块状元素都可以定义自己的宽度和高度以及自己的盒模型
D. 块状元素一般都作为其他元素得容器，它可以容纳其它内联元素和其他块状元素，我们可以把这种容器比喻一个盒子。
常见的块级元素
块级元素：
div 最常用的块级模块
dl和dt-dd搭配使用的块级元素
form 交互表单
h1-h6 大标题
hr 水平分隔线
ol 有序列表
p 段落
ul 无序列表
fieldset 表单字段集
内联元素（inline element）（或者是行内元素）
内联元素三大特点：
A. 内联元素得表现形式是始终以行内逐个进行显示；
B. 内联元素没有自己的形式，不能定义它的宽和高，它显示的宽度、高度和宽度来确定，它的只能根据所包含内容的；高度是小内容单元也会呈现矩形形状
C. 内联（元素也会遵循盒模型基本规则，如何以定义padding，border，margin，background等属性），但个别属性不能正确显示{padding-top;margin-top/margin;}
常见的内联元素
a- 超链接
br 换行
i 斜体
em 强调
label 表单标签
span 常用内联容器，定义文本区块
strong 粗体强调
textarea 多行文本输入框
u 下划线
select 项目选择
6.定位
- 绝对定位、相对定位、固定定位
- 水平、垂直居中
- 命名锚点连接
- Position定位属性
position的属性：static，absolute，relative，fixed（固定定位；应用：右下角的广告）。
Static：默认值。位置设置为static的元素会正常显示，它始终会处于文档流给予的（static元素会忽略任何top、bottom、left或者right声明）
Absolute：相对于父级元素的绝对定位，浮出、脱离文档流，它不占剧空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置。若父级都没有定位，则html（根元素）可以直接指定“left”“top”“right”以及“bottom”属性
Relative：是相对默认值位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置的移动）【不会破坏正确的布局流】
命名锚点链接的应用
定义：是网页制作汇总超链接的一种，又叫命名锚记，命名锚记像一个迅速定位器一样一种页面内部的超级链接，运用相当普遍。
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1） 给元素定义命名锚记名：<标记 id=”命名锚记名”></标记>
2） 命名锚记链接 语法：<a href=”a命名锚记名称”></a>
7. 图像整合技术
Css sprites的原理（图片整合技术）
1． 将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即多张图片合并为一张整图，然后用background-position来实现背景图片的定位技术。
2． 图片整合的优势：1）通过图片整合来减少对服务的请求次数，从而提高页面的加载速度。2）通过整合图片来减小图片的体积。
滑动门技术
1． 什么是滑动门
滑动门是一个形象的称呼，它利用css背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果
2． 滑动门特征
通过滑动门技术，可以使css设计出来的导航菜单兼具传统布局的图像效果，与css布局的高效拓展性。
拓展：css圆角
拓展：圆角边框设置
1． Css圆角设置：
Border:数值；
Border-radius：左上角 右上角 左下角
Border-radius：左上角右上角 右上角左下角（对角线）
Border-radius：5px （四个角一样的弧度设置）
Border-radius：值1 值2 值3 值4；（顺时针）
-
常见浏览器兼容问题
-
解决方法
-
关于浏览器
主流浏览器 Internet explorer、Safari、Google、Opera、百度、360
五大浏览器内核
Trident（代表产品Internet explorer）
Gecko（代表产品 Mozilla Firefoxgecko）
Presto（代表作品Operapresto它是全世界上公认的渲染速递最快的引擎）
Webkit（代表作品 Safari）
Blink（有Google和Opera开发的浏览器排版引擎2013年4月发布）
Css bug、css hack和filter
1） css bug：css样式在各浏览器中解析不一致的情况，或者说css样式在浏览器中不能正确显示的问题称为css bug
2） css hack：css中，hack是指一种兼容css在不同的浏览器中正确显示的技巧方法，因为他们都属于对css代码的非官方的修改，或非官方下的补丁。有些人更喜欢使用patch（补丁）来描述这种行为
3） filter：表示过滤器的意思。它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型
4） 使用hack带来的一些副作用
降低了css代码的可读性，增加了代码的负担。
IE6常见css解析bug及hack
1） 图片有边框bug
当图片加在IE上回出现边框
Hack：给图片加border：0；或者border：0 none；
2） 图片间隙
给div盒子里面嵌套img，标签会产生3-6像素的间隙
解决方法：1）将图片转化为块元素div img{display：block；}
3） 双倍浮动（双倍边框）（只出现在IE6）
描述：当IE6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示
Hack：给浮动元素添加声明：display：inline
4） 默认高度（IE6、IE7）
描述：在IE6以及以下的版本，部分块元素拥有默认高度（在16-20px左右：）
Hack1：给元素添加声明：font-size：0；
Hack2：overflow：hidden；
5） 表单元素行高对齐不一致
描述：表单元素行高对其齐方式不一致
Hack：给表单元素添加声明：float：left；
6） 百分百bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%话50%大于100%的情况
Hack：给右面的浮动元素添加声明：clear：right；意思：清除右浮动
clear：left：清除左浮动，clear：both；清除两边的浮动
7） 透明属性
兼容其他浏览器的写法：opacity：（value的取值范围0-1；例：opacity：0.5；）
IE浏览器的写法：filter：alpha{opacity=value}；取值范围1-100（整数）
8） li列表的bug
1） 当父元素（li）有float：left；子元素（a）没设置浮动的情况下会出现垂直bug；
Hack：给父元素li和子元素a都设置浮动；
2） 当给li中的a转成block；并且有height，并有float，li中没有设置浮动会出现阶梯显示
Hack：同时给li加float；
鼠标的状态
拓展：cursor
Crosshair加号
Text文本
Wait等待
Help帮组
Progress过程
Inherit继承
Move移动
Ne-resize向上或向右移动
Pointer手形
