1.Css (Cascading Style Sheets): has the ability to edit the page styles and modes of
CSS syntax Description: Each CSS style consists of two parts, namely selectors and declarations, statements, also known as attributes and attribute values. Property must be in braces, attributes and attribute values are connected by a colon. Each statement ends with a semicolon.
Selector {properties:}
1.1 css properties: selector having specified properties, which is the core of css, css total of more than 150 properties.
1.1.1 text attributes
font type
{font-family:字体1，字体2;}
Description:
When the font is to be quoted when Chinese font; "Times New Roman"
when the English font with spaces need quotes: such as: "Time New Roman";
next window Chinese version of the operating system: Chinese default font is Arial or Times New Roman, English is the default font Arial.
Text Color:
{color：颜色值}
1.1.2 Css list of attributes
defined list of bullet styles:
{list-style-type:}
Description:
Value: disc (solid circles) circle (open circles) square (filled squares) none (remove the list symbol)
using the picture as a list of symbols:
{list-style-image:url（图像路径）;}
Location define a list of symbols
{list-style-position: ;}
Description: Value: outside (outside) inside (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 list bugs
. 1) when the parent element (li) with a float: left; the child element (a) is not set float happens vertical bugs;
Hack: a parent element li, and sub-elements a are set floating;
2) when in li to turn into a block; and has a height, and with a float, li is not set step appears floating show
Hack: li added simultaneously to a float;
State of the mouse
to expand: the Cursor
Crosshair plus
Text Text
Wait wait
Help help group
Progress process
Inherit inherited
Move mobile
Ne-resize up or move to the right
Pointer Hand
