html+css 技巧

3、css定义的技巧：
【1】、为了将来的css代码优化，建议所有的属性上要带上“；”

【2】、某些html 标签，有自己默认的css属性值，
       例如h1 标签就有自己的属性值，自动就是加粗显示。字号比较大。

【3】、为了兼容主流浏览器，为了统一，建议我们在建设是，将所有元素的css 属性，重置为标准         的。
【4】、不同的浏览器，有各自不同的css属性值----要命的，就是浏览器的兼容。

【5】、就一个比较特殊的字体想用，怎么办？--将其转换为图片。
       分中英文字体。设置字体的顺序。将英文字体设置在前，中文在后。

【6】、css 编辑工具--用什么都可以，高手，用树叶杀人

【7】、我们使用95%的css,都是最常用的属性

【8】、想让文字在垂直方向上，居中，将行高设置为，元素的高度，行高=元素的高度
      （line-height=height)
       *******文字的内容不能超过，元素的宽度，也就是不能换行。

【9】、css可以重置新设置，html 标签的默认样式。
---------------------------------------------------------------------------------------------

4、css 应用给网页的方式，就相当于，给人怎么去穿上衣服。
【1】、行内样式：应用于一个。
【2】、嵌入样式：应用于一类标签
【3】、如果我们有很多的网页，都要用css，将这些css 写到一个独立文件中，这个就是外链
       式，推荐使用

【4】、导入试样式：也就是将样式写到一个文件中，再倒入到网页中，
      *****说明，导入试，其实与内嵌式是相类似的，都是将样式加入到网页里。
       1、导入试，会占用html 文件空间
       2、有些浏览器，解析会有问题。浏览器会，最后读取 @import 中内容
----------------------------------------------------------------------------------------------

二、css 选择符
 1、什么选择符？就是你要控制的对象
 2、选择符的分类：
 【1】、标签选择符---针对html 标签
 【2】、ID选择符---针对某一个id
 【3】、类选择符---针对某一类，或者某一些元素，他们的样式是相同的。
         *****同一个元素，应用多个类，类与类名之间用空格分隔

三、css 的特性
css叫层叠样式表
1、继承：子元素会继承父元素的某些样式。
          【因为有些子元素本身就有默认值，所以它就不用父元素】

2、层叠：子元素如果定义了与父元素相同的样式，会覆盖掉父元素的样式。

--------------------------------------------------------------------------------------------

五、常用的一些文字，文本控制的css样式
*****我们在应用css样式时，一定要注意他的默认值。因为不同的浏览器它的css默认值是不同的
 演示这个例子：目的，不同的属性，浏览器支持是不一样，我们还要保证我们网页的兼容性？
   尽量使用通用属性，不用存在兼容性差别的属性。

六、css 控制元素的某种状态---伪类

伪类语法：
元素名称：伪类名称{属性：值}

例如：超链接的，鼠标经过状态

a:hover{text-decoration:underline;}

*****如果，鼠标放上效果不起作用，请修改连接状态的顺序 L-V-H-A

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}      /* 已访问的链接 */
a:hover {color: #FF00FF}        /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}       /* 被选择的链接 */
-------------------------------------------------------------------------------------

css 高级应用

二、css 选择符：
css选择符作用？制定css样式所有对象（范围）

1、标签选择符：针对html 标签
2、id选择符：针对页面只出现一次的内容，id
3、类选择符：针对某些元素，相同的样式，重复样式

******默认情况某些html 元素本身有自己的默认值

4、控制所有元素-----使用通配符---*

通配选择符： *{属性：值}，用于定义所有html元素
********的作用范围很广，但是，它的效率最低。慎用

*{margin:0;padding:0;}//重置所有元素的，外边距与内边距，为零
---------------------------------------------------------------------------------------

三、css 盒子模型

*******一个盒子是由以下几部分构成的：

1、盒子中的内容 content
2、盒子的边框 border
3、盒子的边框与内容之间的距离，称为填充--padding,内边距（内补丁）
4、多个盒子存在，盒子与盒子之间的距离，称为边界---margin，外边距（外补丁）

******就是盒子所在的实际宽度为例=左右边界 + 左右边框 + 左右内填充 + 内容宽度

******css盒子的相关属性：
【1】、内容属性：内容本身的宽=width，内容本身的高=height
【2】、内填充属性：内容与边界之间的距离，padding
 *****再定义盒子的宽度时，要考虑到，内填充，边框，边界的存在
 如果，增加了内填充了，整个盒子宽度值，要再减去，你增加的，内填充值。

小盒子的上面=20 右面 30 下面50 左面100 外边界

margin:20 30 50 100;

margin-top:
margin-right:
margin-bottom:
margin-left:

*****将来在使用外边距，要注意浏览器兼容性。
***** 除了值为0的情况下，所有的非零的值，后面都要加单位。

*****由于各个浏览器存在着，内外边距的，默认值，还不同。
我们需要将所有浏览器的默认内外边距，都从零开始计算。

在实际工作中，不要这个  *{margin：0；padding：0；}，因为效率最低
所以我们是用到了哪些元素，就把哪些元素的默认值，归零。

css 的属性，虽然有继承的特点，但是，并不是，所有的属性都有继承。

*****css 小技巧：
【1】、让盒子，水平居中。将对象的左右外边界，设置auto;
【2】、让盒子中的内容，垂直居中，设置行高=盒子的高度，但是不要有换行。
【3】、我们在调试的时候，可以适当加背景颜色。

边框属性的说明：

css 语法：
border:border-width || border-style || border-color

根据语法，推理出它的使用方法

如果只写 border，则后面要跟着的是，三个不同的自属性，第一个 粗细  第二个 样式  第三个 颜色
border：2px solid blue
border: 2px solid blue

关于列表的属性介绍：---存在兼容性问题

list-style:列表的图片

语法：
list-style: list-style-image || list-style-position || list-style-type

列表的样式：列表的图片  列表的符号位置  列表的样式

list-style:none 不要列表的符号（一般这么使用，避免浏览器的兼容性带来的问题）

******html 元素的分类：块与内联

背景图片，默认情况下是进行水平与垂直方向上的平铺。
默认背景图片，在元素的左上角显示。
背景图片的衣服方式：固定的含义是，将图片固定在，屏幕（可视区域）的某个位置。
兼容性 IE6 只有 html 与 body 两个元素，支持这个属性值。

让你显得专业一定的技巧：

翻转效果：其实思路就是，准备两张大小相同，内容不同的图片，正常情况下显示一张
          在鼠标经过时候，在显示另一张。

它叫伪类，表示一种状态
:link

css精灵技巧：主要是为了，减少http 请求。

--------------------------------------------------------------------------------------

二、css布局的方式：
1、默认的，就是按文档流的顺序。按html 的结构顺序。

2、浮动方式：

3、定位方式：

三、浮动
  浮动就是将，块元素的，霸道属性，独占一行的行为，取消，允许别人其他一行。
  浮动其实是，这个块，从原来的文档流模式中，分离出来，它后的对象，就视它不存在。

常用的布局效果，例如，一行并列式，就是在一行中，显示几个块元素。

css 把页面元素，分为两类，一种是块，一种是内联元素。

body,div, p, h1
ul与li 默认情况下是块元素，要想让他们在一行中显示，就要用到浮动。

我们在制作时，你多使用不同的浏览器查看你的结果，这样，你就能知道，各种浏览器的差别。
******总结出，当IE6 父元素，中的子元素，的高度超过了，父元素的高度，IE6默认，会把父元素的
高度，自动增加。

******如果想让，多个块，显示在同一行中，可以将，这些快，都设置为浮动，并且浮动的方向相同

******浮动浮动，先浮后动，浮动的对象，会先漂浮起，离开原来的位置。后动，就是他后面的对象。
会向它原来的位置上，动起来。

---------------------------------------------------------------------------------------------

四、清除浮动：就是可以去掉前面对象浮动，对后面对象的影响。

为什么，原来在一行中的两个块，会因为，浏览器窗口的大小，改变，而改变其原来的位置。

******设置一个块为水平居中时，都会给这个块设置一个宽度值。

******当父元素，没有指定，高度时，并且，它的子元素有浮动，这时，这个父元素的高度不会自动增加。
1、第一种方法：增加一个空标签，就是没有内容的标签。会增加代码。
2、第二种方法：给父元素，加overflow:hidden

******定位布局：就是可以通过元素的position 属性控制元素的位置。

*******当我们要想使用绝对定位时：必须有两个条件
【1】、必须给 父元素 加定位属性，一般建议使用 position:relative;
【2】、给子元素，加绝对定位position:absolute;同事要加方向属性。

*******相对定位于绝对定位。
绝对定位是父元素为基准点，进行定位----会脱离文档流
相对定位是根据自身为基准点，进行定位-----但还站着原来的空间