css基础

2019年11月09日 阅读数:79
这篇文章主要向大家介绍css基础,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1.1   CSS基础

1.1.1    概述

CSS 指层叠样式表 (Cascading Style Sheets)css

层叠样式表是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。html

CSS目前最新版本为CSS3,是可以真正作到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS可以对网页中的对象的位置排版进行像素级的精确控制,支持几乎全部的字体字号样式,拥有对网页对象和模型样式编辑的能力,并可以进行初步交互设计,是目前基于文本展现最优秀的表现设计语言。前端

1.1.2    基本格式

CSS规则是由两部分组成,选择器以及一条或多条声明,声明使用分号隔开:web

      selector { declaration1 ; declaration2 ......} 算法

例如 : h1{ color:rchrome

ed ; font-size:14px ; }浏览器

12 安全

1.1.3    经常使用属性

如下列表是一些经常使用的属性:网络

属性app

描述

CSS

background

在一个声明中设置全部的背景属性。

1

background-attachment

设置背景图像是否固定或者随着页面的其他部分滚动。

1

background-color

设置元素的背景颜色。

1

background-image

设置元素的背景图像。

1

background-position

设置背景图像的开始位置。

1

background-repeat

设置是否及如何重复背景图像。

1

border

在一个声明中设置全部的边框属性。

1

border-bottom

border-top

在一个声明中设置全部的下边框属性。

在一个声明中设置全部的上边框属性。

1

border-left

border-right

在一个声明中设置全部的左边框属性。

在一个声明中设置全部的右边框属性。

1

border-style

设置四条边框的样式。

1

border-width

设置四条边框的宽度。

1

border-radius

简写属性,设置全部四个 border-*-radius 属性。

3

box-shadow

向方框添加一个或多个阴影。

3

height

width

设置元素高度。

设置元素的宽度。

1

max-height

min-height

设置元素的最大高度。

设置元素的最小高度。

2

max-width

min-width

设置元素的最大宽度。

设置元素的最小宽度。

2

font-family

规定文本的字体系列。

1

font-size

规定文本的字体尺寸。

1

font-weight

规定字体的粗细。

1

list-style

在一个声明中设置全部的列表属性。

1

list-style-type

设置列表项标记的类型。

1

margin

在一个声明中设置全部外边距属性。(margin-toprightbottomleft

1

padding

在一个声明中设置全部内边距属性。(padding-toprightbottomleft

1

clear

规定元素的哪一侧不容许其余浮动元素。

1

cursor

规定要显示的光标的类型(形状)。

2

display

规定元素应该生成的框的类型。

1

float

规定框是否应该浮动。

1

overflow

规定当内容溢出元素框时发生的事情。

2

position

规定元素的定位类型。

2

visibility

规定元素是否可见。

2

z-index

设置元素的堆叠顺序。

2

color

设置文本的颜色。

1

line-height

设置行高。

1

text-align

规定文本的水平对齐方式。

1

text-decoration

规定添加到文本的装饰效果。

1

1.2   CSS选择器

1.2.1    选择器类别

选择器是CSS中极为重要的一个概念:经过必定的CSS语言写法,可以选择到某一个或某一些标签元素,从而为这一个或一些标签设置样式的声明。

1.2.1.1      Id选择器

ID 选择器能够为标有特定 ID HTML 元素指定特定的样式。根据元素ID来选择元素,具备惟一性,这意味着同一id在同一文档页面中只能出现一次,例如,你将一个元素的id取值为”navi”,那么在同一页面你就不能再将其余元素id取名为”navi”了。

前面以 ”#” 号来标志,在样式里面能够这样定义:

#demoDiv{

color:#FF0000;

}

适用场景:某一个特定元素独有的样式。

1.2.1.2      类选择器

类选择器根据类名来选择,前面以 ”.” 来标志,如:

.demoDiv{color:#FF0000;}

HTML中,元素能够定义一个class的属性。如:

<div class="demoDiv">这个区域字体颜色为红色。</div>

同时,咱们能够再定义一个元素:

<p class="demoDiv">这个段落字体颜色为红色</p>

最后,用浏览器浏览,咱们能够发现全部classdemoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

适用场景:某一类别元素共同拥有的样式。

1.2.1.3      标签选择器

一个完整的HTML页面是有不少不一样的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式。

p{

    font-size:12px;

    background:#900;

   color:090;

}

复制代码则页面中全部p标签的背景都是#900(红色),文字大小均是12px,颜色为#090(绿色)

适用场景:为标签元素统一设置默认的样式。

1.2.1.4      属性选择器

能够用判断html标签的某个属性是否存在的方法来定义css。属性选择器,是根据元素的属性来匹配的,其属性能够是标准属性也能够是自定义属性。

[attr]
  
       [title] {margin-left: 10px}
         //选择具备 title 属性的全部元素;
  [attr=val]
  
       [title = 'this'] {margin-right: 10px}
            //选择属性 title 的值等于 this 的全部元素
  [attr^=val]
  
       [title ^= 'this'] {margin-left: 15px}
         //选择属性title的值以this开头的全部元素
  [attr$=val]
  
       [title $= 'this'] {margin-right: 15px}
         //选择属性title的值以this结尾的全部元素
  [attr*=val]
  
       [title *= 'this'] {margin: 10px}
         //选择属性title 的值包含 this 的全部元素

属性选择器效率较低,不建议大规模适用。

1.2.1.5      伪类选择器

有时候还会须要用文档之外的其余条件来应用元素的样式,好比鼠标悬停等。这时候咱们就须要用到伪类了。如下是连接应用的伪类定义。

a:visited{

     color:#FFFF00;

}

a:hover{

     color:#006600;

}

1.2.1.6      伪元素选择器

全部伪元素选择器都必须放在出现该伪元素的选择器的最后面,也就是说伪元素选择器不能跟任何派生选择器,如:p:first-letter em {} 这就是不合法的。

:first-letter:设置块元素首字母样式,行内元素转换成块元素和行内块元素也支持;
       div p:first-letter {font-size: 20px}
  //选择div元素里全部的p元素的第一个字母或汉字,若是把块元素转换成行内元素则就不支持了;
:before
设置以前的样式,能够插入生成的内容,并设置其样式;
  body:before {content: 'The Start:'; display: block}
     //body元素前插入文本内容'The Start:',并设置其为块元素
:after
设置以后的样式,能够插入生成的内容,并设置其样式;
  body:after {content: 'The End.'; display: block}
  //body元素最后插入文本内容'The End.',并设置其为块元素

1.2.1.7      结构性伪类选择器

选择器

含义

示例

E:nth-child(n)

匹配其父元素的第n个子元素,第一个编号为1

p:nth-child(3) { color:#f00; }

p:nth-child(odd) { color:#f00; }

p:nth-child(even) { color:#f00; }

p:nth-child(3n) { color:#f00; }

tr:nth-child(2n+11) { background:#ff0; }

tr:nth-last-child(2) { background:#ff0; }

 

E:nth-last-child(n)

匹配其父元素的倒数第n个子元素,倒数第一个编号为1

E:last-child

匹配父元素的最后一个子元素,等同于:nth-last-child(1)

E:only-child

匹配父元素下仅有的一个子元素,等同于:first-child:last-child :nth-child(1):nth-last-child(1)

E:empty

匹配一个不包含任何子元素的元素,注意:文本节点也被看做子元素

 

1.2.1.8      通用选择器

通用选择器表示全部元素统同样式,用 * 来表示。例如:

*{

font-size: 12px;

}

1.2.1.9      组合选择器

1.2.1.9.1   后代选择器

后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。后代选择器中的元素不只仅只能有两个,对于多层祖前后代关系,能够有多个空格加以分开,如idabc的三个元素,则后代选择器能够写成#a #b #c{}的形式,只要对祖先元素的选择在后代元素以前、中间以空格分开便可。如:

 

      <style>

 

         .father .child{

 

             color:#0000CC;

 

         }

 

     </style>

 

     <p class="father">黑色

 

         <label class="child">蓝色

 

         <b>也是蓝色</b>

 

        </label>

    </p>

这里咱们定义了全部class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种颇有用的选择器,使用后代选择器能够更加精确的定位元素。

1.2.1.9.2   群组选择器

当几个元素样式属性同样时,能够共同调用一个声明,元素之间用逗号分隔。如:

  p, td, li {

 

       line-height:20px;

 

        color:#c00;

 

     }

 

   #main p, #sider span {

 

      color:#000;

 

      ine-height:26px;

 

 }

 

 

1.2.2    选择器优先权重

当标签被多个选择器做用时,按照权重值相加,值大者优先原则,权重值相同那么后定义的规则优先

权重值列表:

选择器

权重值

Id选择器

100

类选择器

10

标签选择器

1

 

CSS选择器的权重算法实例:

 

     <style>

 

          div{color:red;}

 

          a{color:blue;}

 

          div .class-a{color:yellow;}

 

         .class-div a{color:black;}

 

        #a{color:orange}

 

    </style>

 

    <div class='class-div'>

 

           <a id='a' class='class-a'>测试css权重</a>

 

    </div>

 

实例分析:

a标签中的文本内容同时被4CSS选择器所做用,而且样式发生冲突,按照权重值原则分别计算出各选择器的权重值以下:  

div{color:red;}    //  1

 

     a{color:blue;}    //  1

 

     div .class-a{color:yellow;}    // 1+10=11

 

    .class-div a{color:black;}    // 10+1=11

 

    #a{color:orange;}    // 100

 

优先权重总结以下:

(1) 内联CSS > ID选择器 > 类选择器 > 标签选择器

(2) 组合选择器的状况下,根据权重值相加原则判断

(3) 权重相同的状况下,后面的CSS将覆盖前面的CSS

 

练习题:

1

     <style type="text/css">

 

         div{color: red;}

 

         p{color: blue;}

 

    </style>

 

    <div>

 

        <p>test</p>

 

    </div>

 

文本最终颜色值?

 

答案:blue

提示:这里将按照选择器做用标签的层级做为优先考虑,也就是说越接近文本的标签样式优先权重更高。

 

2

    <style type="text/css">

 

         #div1{color: red;}

 

         p{color: blue}

 

    </style>

 

    <div id="div1">

 

         <p>test</p>

 

    </div>

 

文本最终颜色值?

 

答案:blue

提示:任何状况下,继承的祖先元素样式的优先级都不如目标元素的样式优先级,哪怕在第一条语句加上!important也是无用的。

 

 

3

    <style type="text/css">

 

        div p{color: red;}

 

        p{color: blue;}

 

    </style>

 

    <div>

 

       <p>test</p>

 

    </div>

 

文本最终颜色值?

 

答案:red

提示:第一条css语句权重:1+1;第二条css语句权重1;因此最终将显示red

 

4

      <style type="text/css">

 

           div p{color: red;}

 

           p{color: blue!important;}

 

      </style>

 

      <div>

 

         <p style="color: yellow;">test</p>

 

      </div>

 

文本最终颜色值?

 

答案:blue

提示:!improtant>内联CSS > ID选择器 > 类选择器 > 标签选择器

1.3   CSS引入方式

1.3.1    内联CSS

CSS直接经过标签元素的style属性值的方式写入。如:

<div style=”background:red”></div>

此方法简单方便,可是违背结构与样式分离,使得HTML代码较多,当页面有大量内联CSS时难以维护,尽可能不使用。

1.3.2    Style标签引入

<style>...</style>结构能够位于页面<HTML>标签中的任何位置,也能够屡次出现。一般是将整个<style>...</style>结构写在页面的<head>...</head>部分中。如

     <head>

 

           <meta charset="utf-8" />

 

            <title></title>

 

            <style>   

 

                   html,body{height: 100%;margin: 0;}  

 

                   body:before {content: 'The Start:'; display: block}

 

           </style>

 

     </head>

 

适用场景:页面独有的CSS样式。

1.3.3    外链CSS

css代码写在一个单独的文件中,用link标签直接引入该文件到页面中。一个页面能够屡次使用link标签引入多个外部css文件,注意这些CSS代码的相互影响,一般是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。引入代码,以下:

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

这种引入CSS的方式是目前最为流行的,能够在站个网站范围内进行CSS代码的规划,方便复用和维护。

1.4   文本框: 全部的元素都遵循盒模型:内容的高宽》内边距》边框宽度》外边距,这样的一个盒子状的模型。
另外须要注意的是,display:inline的行内元素没法定义width和height属性,它的高宽只能根据此元素内的内容的高宽来决定。
了解盒模型,是学习CSS布局的基础之一。
盒模型

QQ截图20150807170419

 

CSS 中,width height 指的是内容区域(content)的宽度和高度。增长内边距、边框和外边距不会影响内容区域的尺寸,可是会增长元素框的总尺寸。假设框的每一个边上有 10 个像素的外边距和 5 个像素的内边距。若是但愿这个元素框达到 100 个像素,就须要将内容的宽度设置为 70 像素,如下是CSS代码

 

     #box {

 

         width: 70px;

 

         margin: 10px;

 

         padding: 5px;

 

     }

 

在页面调试过程当中,能够经过(谷歌)浏览器控制台观察当前元素的模型状态。点击任意一个元素,在样式显示区域能够看到

1.5   元素display

1.5.1    行内与块状

元素在遵循盒模型的基础上,有两种最基本的表现形式:行内和块状;全部元素都有一个displayCSS属性,这个属性值表明此元素在页面中的表现形式,行内元素的默认值为inline,块状元素为block。可使用display:block;display:inline;实现块级元素和行内元素的相互转换。

常见块状元素:

div - 经常使用块级容易,也是CSS layout的主要标签
       dl -
定义列表
       fieldset - form
控制组
      form -
交互表单
      h1 -
大标题
      h2 -
副标题
      h3 - 3
级标题
      h4 - 4
级标题
      h5 - 5
级标题
      h6 - 6
级标题
      hr -
水平分隔线
      noscript -
可选脚本内容(对于不支持script的浏览器显示此内容)
       ol -
有序表单
      p -
段落
      pre -
格式化文本
      table -
表格
      ul -
无序列表

常见行内元素:

a - 锚点
      abbr -
缩写
      br -
换行
      code -
计算机代码(在引用源码的时候须要)
      em -
强调
      i -
斜体
      img -
图片
      input -
输入框
      label -
表格标签
      s -
中划线(不推荐)
      select -
项目选择
      small -
小字体文本
      span -
经常使用内联容器,定义文本内区块
      sub -
下标
      sup -
上标
      textarea -
多行文本输入框

1.5.2    inline-block 

display的属性值除了inlineblock以外,还有其它可选值,其中比较重要也是使用最频繁的的就是inline-block值。

display:inline-block:行内显示与块状显示的中和,首先它是行内显示的,同时兼并了block元素能够设置高宽属性的特质。

咱们总结下三种display值各自的表现和差别:

display:block

(1) block元素会独占一行,多个block元素会各自新起一行。默认状况下,block元素宽度自动填满其父元素宽度。

(2) block元素能够设置width,height属性。块级元素即便设置了宽度,仍然是独占一行。

(3) block元素能够设置marginpadding属性。

display:inline

(1) inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

(2) inline元素设置width,height属性无效。

(3) inline元素的marginpadding属性,padding和水平方向的margin-left, margin-right都产生边距效果;但竖直方向的margin-top, margin-bottom不会产生边距效果。

display:inline-block

(1) 不会独占一行。

(2) 能够设置width,height属性。

(3) 能够设置marginpadding属性。

1.5.3    display:none

displaynone常常被用来隐藏元素,好比一个弹出层模块默认被设置为display:none,当须要被显示的时候,设置displayblock(通常为block,固然inline也能够)以后便显示出来。

visibilityhidden的区别:

(1) displaynone的元素能够理解为在页面中被删除,它所占的位置也被其它元素替代,浏览器检测到display属性改变以后将从新渲染整个页面,效率相对低。

(2) visibilityhidden的元素并无在页面中被删除,仅仅是在页面中不可见,它的位置也不会被其它元素替代,浏览器不会从新渲染页面,效率更高。

理论上来讲,可以使用visibilityhidden去隐藏元素都尽可能使用这个属性,但通常状况下由于占位的问题,咱们使用displaynone也不会有太大问题。

 

 

 


阶段练习:

1)在了解盒模型和display属性以后,咱们就能够开始作一些常见的基本布局:


要求:作一个横向居中于浏览器,导航项固定宽高,文本水平垂直居中;当鼠标指向某一个导航项时,鼠标呈现手势状态,且该被选择的导航项背景颜色改变,文本颜色改变,颜色自行决定。

 

(2) 尝试作一个二级菜单:


 

1.6   浏览器兼容

1.6.1    浏览器内核

四大浏览器内核
        1.Trident (IE
浏览器) :由于在早期IE占有大量的市场份额,因此之前有不少网页是根据这个Trident的标准来编写的,可是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug
        2.Gecko:( FireFox )
优势就是功能强大、丰富,能够支持不少复杂网页效果和浏览器扩展接口,缺点是消耗不少的资源,好比内存。
        3.Webkit: ( Chrome/ Safari / UC )
优势就是Webkit拥有清晰的源码结构、极快的渲染速度,缺点是对网页代码的兼容性较低,会使一些编写不标准的网页没法正确显示。


        4.Presto: (
欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核,同时也是处理JS脚本最兼容的内核,能在WindowsMacLinux操做系统下完美运行。

 

时间2015-12  来源百度统计

谷歌的市场占有率在国内已经位居第一位,而使人讨厌的IE6已经不足4个百分点,我的建议不要考虑IE6的兼容,把更多时间拿出来设计交互更好的页面。

因此按照浏览器占有率,我建议你的兼容测试优先级为:谷歌浏览器 > IE7/IE8(通常状况下低版本没问题,高版本就不会有大问题)+ 搜狗浏览器(国内浏览器内核通常是高速模式:WebKit;兼容模式:IEtrident核心)。

固然不一样的公司不一样的业务对应的浏览器要求不一样,仍是因地制宜。

1.6.2    兼容方法

于不一样厂商的浏览器,好比Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不一样版本,如IE6IE7,对CSS的解析认识不彻底同样,所以会致使生成的页面效果不同,得不到咱们所须要的页面效果。 这个时候咱们就须要针对不一样的浏览器去写不一样的CSS,让它可以同时兼容不一样的浏览器,能在不一样的浏览器中也能获得咱们想要的页面效果(这就叫作CSS hack)。

简单的说,CSS hack的目的就是使你的CSS代码兼容不一样的浏览器。固然,咱们也能够反过来利用CSS hack为不一样版本的浏览器定制编写不一样的CSS效果。

 

CSS hack经常使用的方法:

1.6.2.1      条件注释法

这种通常是经过条件注释,不一样浏览器加载不一样的CSS外链实现,如:

 

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

 

    <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

 

    <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css">       <![endif]-->

 

a.         只在IE下生效:

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

 

b.         只在IE6下生效:

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

 

c.         只在IE6以上版本生效:

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

 

d.         只在IE8上不生效:

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

 

e.         IE浏览器生效:

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![endif]-->

1.6.2.2      属性前缀法(经常使用)

1.6.2.2.1    *

IE6/IE7可识别

1.6.2.2.2    _

IE6支持:_background-color:orange;       /*for ie6*/ 

1.6.2.2.3    \9

IE浏览器支持:background-color:red\9;      /*all ie*/

1.6.2.2.4    !important

这个表明优先级最高,可是IE6不识别。来看个具体例子(区别IE6,IE7,IE8,FF):

      #tip{ 

 

             background:blue;    /*Firefox背景变蓝色 全部浏览器都支持*/ 

 

             background:red\9;  /*IE8背景变红色 IE六、七、八、9支持覆盖上面样式*/ 

 

            *background:black;         /*IE7背景变黑色 IE六、7支持又一次覆盖上面样式*/ 

 

            _background:orange;  /*IE6背景变橘色 仅IE6支持又一次覆盖上面样式*/ 

 

       }  

 

 

 

能够看出来,这种css hack方法,就是经过不一样浏览器对不一样属性前缀的支持不一样,来区分设置不一样浏览器的CSS值。

1.6.2.2.5    CSS3的浏览器私有属性

实例:

      -webkit-transform:rotate(-3deg);   /*为Chrome/Safari*/

 

      -moz-transform:rotate(-3deg);      /*为Firefox*/

 

      -ms-transform:rotate(-3deg);               /*为IE*/

 

      -o-transform:rotate(-3deg);          /*为Opera*/

 

      transform:rotate(-3deg);               /*为nothing*/

 

1.6.2.2.6   选择器前缀法(知道便可,不常使用)
         *html *前缀只对IE6生效
         *+html *+前缀只对IE7生效

1.6.3    补充

1. 如今前端开发不多再兼容IE6/7了。

2. 最新版的浏览器的css兼容性问题愈来愈小,各浏览器趋于一致。

3. 响应式设计的大量应用,致使兼容各类尺寸的屏幕和各类移动端设备成了前端开发更重要的问题。

1.7   CSS布局

在前面,咱们学习了元素的盒模型和元素的display属性这两个基础概念以后,咱们来看看如下三种布局归类法:Flow Model(流动模型)、Float Model(浮动模型)、Layer Model(层模型);能够认为几乎全部的web页面,都是由这三种布局模型所组成。

1.7.1    Flow Model(流动模型)

流动模型是 HTML 默认布局模型;便可认为是随着文档流自上而下按顺序动态分布,就像麻袋里面堆放了一堆物品,拿掉其中一个上面的物品会自动滚动下去。

 

重点词:最基础简单的模型,也是web元素默认的显示模型

 

1.7.2    Float Model(浮动模型)

使用float属性的元素,将脱离正常的文档流,表现出独特的显示特性;在须要左右靠齐的

状况下使用较多。元素使用float以后,将自动表现为display:inline-block的表现。

 

重点词:

1. 浮动元素会脱离正常的文档流,典型特征是父元素无视浮动的子元素。

案例

   <style type="text/css">

 

                #container{background: black;padding: 5px;}    

 

                #sub{background: red; }                                  

 

       </style>

 

       </head>

 

       <body>

 

            <div id="container">

 

                <div id="sub">dd</div>

 

            </div>

 

       </body>

 

 

显示结果:

 

 

subdiv增长float:left,显示结果:

 

 

分析:子元素浮动以后,脱离正常文档流,也就是至关于父元素里面再也不有该浮动元素存在,因此此时container里面只有一个padding;而sub元素则相对父元素的左上角起点独立显示。

 

2. 块状元素无视浮动元素;内联元素和浮动元素并做一行。

案例:

 

              <head>

    <style type="text/css">

              #container{background: black;padding: 5px;}    

              #sub{background: red; float: left;}

              #div{background: green;}           

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

              </div>           

              <div id="div">dd</div>

       </body>

 

显示结果:

 

 

分析:父元素无视浮动元素(第一点咱们已经讲过),同时绿色div也无视浮动的元素而现实在黑色div之下;同时注意到绿色里面的dd文本(这里能够看作是内联元素)很明显受到了浮动元素的影响,紧贴这红色浮动元素并做一行。

 

3. 多个浮动元素时,将造成浮动文档流,按照inline-block表现显示。

案例:

       <head>

            <style type="text/css">

                     #div1{float:left;background: red;padding: 10px;}

                     #div2{float:left;background: green;margin: 10px;}    

                     #div3{float:left;background: yellow;}        

              </style>

       </head>

       <body>

              <div id='div1'>aa</div>

              <div id='div2'>bb</div>

              <div id='div3'>cc</div>

       </body>

 

显示结果:

 

分析:能够看出每一个浮动的元素按照浮动前后顺序(最早浮动的在最左边,若是这个案例中改成float:right,则div1在最右边)并成一行,而且display性质为inline-block,能够正常设置paddingmargin;对于float的元素咱们没有必要再去手动设置它的display属性(无效)。

 

注意点:

正常文档流和浮动文档流并非彻底隔离,而是相互有影响的,而这种相互影响每每致使布局状况会相对复杂,尤为是不少不一样层级的元素同时浮动时,容易产生非预期的状况,因此不建议滥用浮动。

 

关于清除浮动:

浮动元素以后,每每出现不易控制其显示位置的状况,若是子元素是浮动的,父元素不浮动那么子元素的位置是脱离父元素的束缚,其位置也是根据文档流中上一个已经定位的元素来决定他的位置。

好比:

在一个父容器里面有不少浮动div,结果每每是:

 

此时,由于子元素是浮动的,父容器不能随着子元素尺寸的改变而改变,这种状况每每并非咱们但愿的,这个时候就就可使用清除浮动:

       <style type="text/css">

              #container{background: black;padding: 5px; }   

              #sub{background: red;float: left; }      

              .clear{clear: both;}                     

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

                     <div class="clear"></div>

              </div>

       </body>

 

显示结果:

 

因此,咱们经常用到这种方法去让父容器的尺寸自适应浮动的子元素尺寸;但这里有个很差的地方是使用了一个专门的标签去实现浮动功能,在实际项目中咱们一般是在父元素中加上清除浮动类,经过伪类标签去实现:


       <style type="text/css">

              #container{background: black;padding: 5px; }   

              #sub{background: red;float: left; }      

              .clearfix {

                     clear: both;

                     overflow: hidden;

              }                  

              .clearfix:after {

                     clear: both;

                     content: "";

                     display: block;

                     height: 0;

                     visibility: hidden;

              }                         

       </style>

       </head>

       <body>

              <div id="container" class="clearfix">

                     <div id="sub">dd</div>

              </div>

       </body>

 

1.7.3    Layer Model(层模型)

层模型也叫定位模型,全部元素的默认定位属性(position)值为static,其它经常使用的三种设置是为fixed,absolute,relative

static:表示不定位,元素遵循 HTML 默认的流动模型,若是未显式声明元素的定位类型,则默认为该值。

fixed:表示固定定位,不会随浏览器窗口的滚动条滚动而变化

absolute:表示绝对定位,将元素从文档流中拖出来,而后使用 leftrighttopbottom 属性相对于其最接近的一个具备定位属性的父包含块进行绝对定位。

relative:表示相对定位,它经过 leftrighttopbottom 属性肯定元素在正常文档流中的偏移位置。元素仍然占据原来的空间。

1.7.4    经常使用CSS技巧

1.7.4.1      结构清晰、命名有规则和语义、习惯注释;

 

 

1.7.4.2      处理居中

1.7.4.2.1   文本(内联元素)水平居中

使用text-align:center

1.7.4.2.2   固定宽度的块级元素水平居中

父元素使用text-align:center,块级元素使用margin:0 auto便可:

 

1.7.4.2.3   固定宽度的元素水平、垂直居中

利用绝对定位和负边距处理:

 

1.7.4.2.4   单行文本垂直居中

使用line-height(行高)能够控制垂直位置

 

1.7.4.3      高度随内容自增加

使用min-height:40px; height:auto!important; height:40px;

通常高级浏览器设置min-height便可,当内容高度超过这个最小高度的时候会自增加。

 

1.7.5    结构布局实例

在构建一个web页面以前,都须要首先分析页面的总体结构,划分功能区域,搭建基本的页面框架:

 

 

 

 

 

 

01

 

 

 

 

 

 

 

 

分析结构:

 

1. 搭建页面主框架:

 

<body>

              <div id="wrapper">

                     <!--这是头部-->

                     <div id="header">header</div>

                     <!--这是导航栏-->

                     <div id="nav">nav</div>

                     <!--这是轮播图-->

                     <div id="picture">pictures</div>

                     <!--这是内容部分-->

                     <div id="content">

                            <!--内容的左侧-->

                            <div id="content_left">content_left</div>

                            <!--内容的右侧-->

                            <div id="content_right">content_left</div>

                     </div>

                     <!--这是尾部-->

                     <div id="footer">footer</div>

              </div>

       </body>

 

2. 写主框架的CSS

#wrapper {

       margin: 0;

       padding: 0;

}

#header {

       width: 80%;

       height: 100px;

       background-color: #CCFFCB;

       margin: 0 auto;

}

#nav {

       width: 100%;

       height: 40px;

       background-color: #CCFFCB;

       margin: 10px 0;

}

#picture {

       width: 80%;

       height: 250px;

       margin: 0 auto;

       background-color: #CCFFCB;

}

#content {

       width: 78%;

       height: 560px;

       margin: 10px auto;

       background-color: #CCFFCB;

       padding: 1%;

}

#content_left {

       width: 30%;

       height: 95%;

       background-color: #feff98;

       float: left;

}

#content_right {

       width: 65%;

       height: 95%;

       background-color: #ffcc98;

       float: right;

}

#footer {

       width: 100%;

       height: 70px;

       background-color: #CCFFCB;

}

 

3. 网站的所有总体框架

<body>

              <div id="wrapper">

                     <!--这是头部-->

                     <div id="header">

                            <a href="" class="header_left"><img src=""/></a>

                            <div class="header_right">

                                   <p class="right1">

                                          <a href="">设为首页</a> |

                                          <a href="">加入收藏</a>

                                   </p>

                                   <p class="right2">咨询电话:13023288071</p>

                            </div>

                     </div>

                     <!--这是导航栏-->

                     <div id="nav">

                            <ul>

                                   <li><a href="">网站首页</a></li>

                                   <li><a href="">关于咱们</a></li>

                                   <li><a href="">服务范围</a></li>

                                   <li><a href="">新闻中心</a></li>

                                   <li><a href="">工程案例</a></li>

                                   <li><a href="">联系咱们</a></li>

                            </ul>

                     </div>

                     <!--这是图片-->

                     <div id="picture">

                            <img src="" alt="" />

                     </div>

                     <!--这是内容部分-->

                     <div id="content">

                            <!--内容的左侧-->

                            <div id="content_left">

                                   <div class="left_title">服务项目 Service</div>

                                   <div class="left_menu1">

                                          <ul>

                                                 <li>拆旧、敲墙、酒店、商场</li>

                                                 <li>宾馆拆旧工程</li>

                                                 <li>建筑工地废旧厂房拆酒店</li>

                                                 <li>娱乐场所</li>

                                                 <li>建筑工地及家庭</li>

                                          </ul>

                                   </div>

                                   <div class="left_title">联系咱们 Contact</div>

                                   <div class="left_menu2">

                                          <p>XX工程有限公司</p>

                                          <p>电话:130555555</p>

                                          <p>传真:0517-85932887</p>

                                          <p>地址:淮安天桥区北园大街548</p>

                                          <p>网址:www.gggg.com</p>

                                   </div>

                            </div>

                            <!--内容的右侧-->

                            <div id="content_right">

                                   <div class="company_description">

                                          <div class="content_title1">

                                                 <span>公司简介</span>

                                                 <a href=""><img src="img/more.jpg" alt="" /></a>

                                          </div>

                                          <div class="content_description">

                                                 <p></p>

                                                 <img src="" alt="" />

                                          </div>

                                   </div>

                                   <div class="news">

                                          <div class="content_title1">

                                                 <span>新闻中心</span>

                                                 <a href="">

                                                        <img src="img/more.jpg" alt="" />

                                                 </a>

                                          </div>

<!--新闻连接列表-->

                                          <ul>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href="">/a></li>

                                          </ul>

                                   </div>

                                   <div class="case_show">

                                          <div class="content_title2">

                                                 <span>案例展现</span>

                                                 <a href=""><img src="" alt="" /></a>

                                          </div>

                                          <div class="case_name">

                                                 <ul>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展现名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展现名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展现名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展现名称</p></a></li>

                                                 </ul>

                                          </div>

                                   </div>

                            </div>

                     </div>

                     <!--这是尾部-->

                     <div id="footer">

                            <p></p>

                            <p><a href=""></a></p>

                     </div>

              </div>

       </body>

 

1.8   CSS Spirit

CSS Sprites在国内不少人叫css精灵,是一种网页图片应用处理方式。它容许你将一个页面涉及到的全部零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差很少的,因此无需顾忌这个问题。

优势:

1.利用CSS Sprites能很好地减小网页的http请求,从而大大的提升页面的性能,这也是CSS Sprites最大的优势,也是其被普遍传播和应用的主要缘由;

2.CSS Sprites能减小图片的字节,曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就能够了,不须要对每个小元素进行命名,从而提升了网页的制做效率。

4.更换风格方便,只须要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就能够改变。维护起来更加方便。

固然,Sprites也有明显的缺点,主要就是维护困难,不过能够经过合理控制合并图片个数去调解此问题。

1.9   三种方式处理icon

Iconweb开发中很常见,这里介绍三种最多见的实现方式。

1)切图实现

直接用图片做为icon能够说是最直接也是最简单经常使用的办法了,并且在icon较多的状况下一般会使用spirit方式合并。

2Css实现

经过CSS绘制简单的小icon,主要是三角形图标。

(3) 文件外链

制做矢量图标,导出各个浏览器支持的文件格式,经过文件连接的形式显示图标。此方法优缺点都较明显,优势是轻量、灵活(大小和颜色可随意设置)、兼容好。缺点是制做麻烦、单色、维护差。具体可参考阿里的http://www.iconfont.cn/平台。这种方法经过字符实体显示图标。

 

<style>

/*经常使用的多个icon合并成一张图片*/

.nav{ display:block;width:70px;height:70px; background:url('img/nav.png');}

.nav:hover{ background-position:0 80px}

 

/*利用CSS画简单icon*/

div#up {

width: 0px;

height: 0px;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid #2f2f2f;

}

div#down {

width: 0px;

height: 0px;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

}

div#left {

width: 0px;

height: 0px;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid yellow;

}

div#right {

width: 0px;

height: 0px;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

 

/*经过自定义字体的方式显示图片 http://www.iconfont.cn/*/

@font-face {font-family: 'iconfont';

    src: url('font/iconfont.eot'); /* IE9*/

    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('font/iconfont.woff') format('woff'), /* chromefirefox */

    url('font/iconfont.ttf') format('truetype'), /* chromefirefoxoperaSafari, Android, iOS 4.2+*/

    url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont{

    font-family:"iconfont" !important;

    font-size:32px;font-style:normal;

    -webkit-font-smoothing: antialiased;

    -webkit-text-stroke-width: 0.2px;

    -moz-osx-font-smoothing: grayscale;}

.iconfont:hover{color:red; font-size:36px}

</style>

<body>

<!--demo1-->

---------图片icon---------

<i class="nav"></i>

 

<!--demo2-->

---------CSS icon---------

<div id="up"></div>

<div id="down"></div>

<div id="left"></div>

<div id="right"></div>

 

<!--demo3-->

---------外链文件 icon---------

<br/>

<i class="iconfont">&#xe74f;</i>

</body>

 

 

 

1.1   CSS基础

1.1.1    概述

CSS 指层叠样式表 (Cascading Style Sheets)

层叠样式表是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS目前最新版本为CSS3,是可以真正作到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS可以对网页中的对象的位置排版进行像素级的精确控制,支持几乎全部的字体字号样式,拥有对网页对象和模型样式编辑的能力,并可以进行初步交互设计,是目前基于文本展现最优秀的表现设计语言。

1.1.2    基本格式

CSS规则是由两部分组成,选择器以及一条或多条声明,声明使用分号隔开:

      selector { declaration1 ; declaration2 ......}

例如 : h1{ color:red ; font-size:14px ; }

201209181805275420

1.1.3    经常使用属性

如下列表是一些经常使用的属性:

属性

描述

CSS

background

在一个声明中设置全部的背景属性。

1

background-attachment

设置背景图像是否固定或者随着页面的其他部分滚动。

1

background-color

设置元素的背景颜色。

1

background-image

设置元素的背景图像。

1

background-position

设置背景图像的开始位置。

1

background-repeat

设置是否及如何重复背景图像。

1

border

在一个声明中设置全部的边框属性。

1

border-bottom

border-top

在一个声明中设置全部的下边框属性。

在一个声明中设置全部的上边框属性。

1

border-left

border-right

在一个声明中设置全部的左边框属性。

在一个声明中设置全部的右边框属性。

1

border-style

设置四条边框的样式。

1

border-width

设置四条边框的宽度。

1

border-radius

简写属性,设置全部四个 border-*-radius 属性。

3

box-shadow

向方框添加一个或多个阴影。

3

height

width

设置元素高度。

设置元素的宽度。

1

max-height

min-height

设置元素的最大高度。

设置元素的最小高度。

2

max-width

min-width

设置元素的最大宽度。

设置元素的最小宽度。

2

font-family

规定文本的字体系列。

1

font-size

规定文本的字体尺寸。

1

font-weight

规定字体的粗细。

1

list-style

在一个声明中设置全部的列表属性。

1

list-style-type

设置列表项标记的类型。

1

margin

在一个声明中设置全部外边距属性。(margin-toprightbottomleft

1

padding

在一个声明中设置全部内边距属性。(padding-toprightbottomleft

1

clear

规定元素的哪一侧不容许其余浮动元素。

1

cursor

规定要显示的光标的类型(形状)。

2

display

规定元素应该生成的框的类型。

1

float

规定框是否应该浮动。

1

overflow

规定当内容溢出元素框时发生的事情。

2

position

规定元素的定位类型。

2

visibility

规定元素是否可见。

2

z-index

设置元素的堆叠顺序。

2

color

设置文本的颜色。

1

line-height

设置行高。

1

text-align

规定文本的水平对齐方式。

1

text-decoration

规定添加到文本的装饰效果。

1

1.2   CSS选择器

1.2.1    选择器类别

选择器是CSS中极为重要的一个概念:经过必定的CSS语言写法,可以选择到某一个或某一些标签元素,从而为这一个或一些标签设置样式的声明。

1.2.1.1      Id选择器

ID 选择器能够为标有特定 ID HTML 元素指定特定的样式。根据元素ID来选择元素,具备惟一性,这意味着同一id在同一文档页面中只能出现一次,例如,你将一个元素的id取值为”navi”,那么在同一页面你就不能再将其余元素id取名为”navi”了。

前面以 ”#” 号来标志,在样式里面能够这样定义:

#demoDiv{

color:#FF0000;

}

适用场景:某一个特定元素独有的样式。

1.2.1.2      类选择器

类选择器根据类名来选择,前面以 ”.” 来标志,如:

.demoDiv{color:#FF0000;}

HTML中,元素能够定义一个class的属性。如:

<div class="demoDiv">这个区域字体颜色为红色。</div>

同时,咱们能够再定义一个元素:

<p class="demoDiv">这个段落字体颜色为红色</p>

最后,用浏览器浏览,咱们能够发现全部classdemoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

适用场景:某一类别元素共同拥有的样式。

1.2.1.3      标签选择器

一个完整的HTML页面是有不少不一样的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式。

p{

font-size:12px;

background:#900;

color:090;

}

复制代码则页面中全部p标签的背景都是#900(红色),文字大小均是12px,颜色为#090(绿色)

适用场景:为标签元素统一设置默认的样式。

1.2.1.4      属性选择器

能够用判断html标签的某个属性是否存在的方法来定义css。属性选择器,是根据元素的属性来匹配的,其属性能够是标准属性也能够是自定义属性。

[attr]
         [title] {margin-left: 10px}
         //选择具备 title 属性的全部元素;
  [attr=val]
         [title = 'this'] {margin-right: 10px}
            //选择属性 title 的值等于 this 的全部元素
  [attr^=val]
         [title ^= 'this'] {margin-left: 15px}
         //选择属性title的值以this开头的全部元素
  [attr$=val]
         [title $= 'this'] {margin-right: 15px}
         //选择属性title的值以this结尾的全部元素
  [attr*=val]
         [title *= 'this'] {margin: 10px}
         //选择属性title 的值包含 this 的全部元素

属性选择器效率较低,不建议大规模适用。

1.2.1.5      伪类选择器

有时候还会须要用文档之外的其余条件来应用元素的样式,好比鼠标悬停等。这时候咱们就须要用到伪类了。如下是连接应用的伪类定义。

a:visited{

color:#FFFF00;

}

a:hover{

color:#006600;

}

1.2.1.6      伪元素选择器

全部伪元素选择器都必须放在出现该伪元素的选择器的最后面,也就是说伪元素选择器不能跟任何派生选择器,如:p:first-letter em {} 这就是不合法的。

:first-letter:设置块元素首字母样式,行内元素转换成块元素和行内块元素也支持;
       div p:first-letter {font-size: 20px}
  //选择div元素里全部的p元素的第一个字母或汉字,若是把块元素转换成行内元素则就不支持了;
:before
设置以前的样式,能够插入生成的内容,并设置其样式;
  body:before {content: 'The Start:'; display: block}
     //body元素前插入文本内容'The Start:',并设置其为块元素
:after
设置以后的样式,能够插入生成的内容,并设置其样式;
  body:after {content: 'The End.'; display: block}
  //body元素最后插入文本内容'The End.',并设置其为块元素

1.2.1.7      结构性伪类选择器

选择器

含义

示例

E:nth-child(n)

匹配其父元素的第n个子元素,第一个编号为1

p:nth-child(3) { color:#f00; }

p:nth-child(odd) { color:#f00; }

p:nth-child(even) { color:#f00; }

p:nth-child(3n) { color:#f00; }

tr:nth-child(2n+11) { background:#ff0; }

tr:nth-last-child(2) { background:#ff0; }

 

E:nth-last-child(n)

匹配其父元素的倒数第n个子元素,倒数第一个编号为1

E:last-child

匹配父元素的最后一个子元素,等同于:nth-last-child(1)

E:only-child

匹配父元素下仅有的一个子元素,等同于:first-child:last-child :nth-child(1):nth-last-child(1)

E:empty

匹配一个不包含任何子元素的元素,注意:文本节点也被看做子元素

 

1.2.1.8      通用选择器

通用选择器表示全部元素统同样式,用 * 来表示。例如:

*{

font-size: 12px;

}

1.2.1.9      组合选择器

1.2.1.9.1   后代选择器

后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。后代选择器中的元素不只仅只能有两个,对于多层祖前后代关系,能够有多个空格加以分开,如idabc的三个元素,则后代选择器能够写成#a #b #c{}的形式,只要对祖先元素的选择在后代元素以前、中间以空格分开便可。如:

 

<style>

  .father .child{

         color:#0000CC;

   }

</style>

<p class="father">黑色

    <label class="child">蓝色

         <b>也是蓝色</b>

        </label>

</p>

 

这里咱们定义了全部class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种颇有用的选择器,使用后代选择器能够更加精确的定位元素。

1.2.1.9.2   群组选择器

当几个元素样式属性同样时,能够共同调用一个声明,元素之间用逗号分隔。如:

 

p, td, li {

   line-height:20px;

   color:#c00;

 }

#main p, #sider span {

   color:#000;

   line-height:26px;

 }

 

1.2.2    选择器优先权重

当标签被多个选择器做用时,按照权重值相加,值大者优先原则,权重值相同那么后定义的规则优先

权重值列表:

选择器

权重值

Id选择器

100

类选择器

10

标签选择器

1

 

CSS选择器的权重算法实例:

 

<style>

   div{color:red;}

   a{color:blue;}

   div .class-a{color:yellow;}

   .class-div a{color:black;}

   #a{color:orange}

</style>

 

<div class='class-div'>

    <a id='a' class='class-a'>测试css权重</a>

</div>

 

实例分析:

a标签中的文本内容同时被4CSS选择器所做用,而且样式发生冲突,按照权重值原则分别计算出各选择器的权重值以下:

div{color:red;}    //  1

a{color:blue;}    //  1

div .class-a{color:yellow;}    // 1+10=11

.class-div a{color:black;}    // 10+1=11

#a{color:orange;}    // 100

优先权重总结以下:

(1) 内联CSS > ID选择器 > 类选择器 > 标签选择器

(2) 组合选择器的状况下,根据权重值相加原则判断

(3) 权重相同的状况下,后面的CSS将覆盖前面的CSS

 

练习题:

1

<style type="text/css">

       div{color: red;}

       p{color: blue;}

</style>

<div>

<p>test</p>

</div>

文本最终颜色值?

 

答案:blue

提示:这里将按照选择器做用标签的层级做为优先考虑,也就是说越接近文本的标签样式优先权重更高。

 

2

<style type="text/css">

       #div1{color: red;}

       p{color: blue}

</style>

<div id="div1">

<p>test</p>

</div>

文本最终颜色值?

 

答案:blue

提示:任何状况下,继承的祖先元素样式的优先级都不如目标元素的样式优先级,哪怕在第一条语句加上!important也是无用的。

 

 

3

<style type="text/css">

       div p{color: red;}

       p{color: blue;}

</style>

<div>

<p>test</p>

</div>

文本最终颜色值?

 

答案:red

提示:第一条css语句权重:1+1;第二条css语句权重1;因此最终将显示red

 

4

<style type="text/css">

       div p{color: red;}

       p{color: blue!important;}

</style>

<div>

<p style="color: yellow;">test</p>

</div>

文本最终颜色值?

 

答案:blue

提示:!improtant>内联CSS > ID选择器 > 类选择器 > 标签选择器

1.3   CSS引入方式

1.3.1    内联CSS

CSS直接经过标签元素的style属性值的方式写入。如:

<div style=”background:red”></div>

此方法简单方便,可是违背结构与样式分离,使得HTML代码较多,当页面有大量内联CSS时难以维护,尽可能不使用。

1.3.2    Style标签引入

<style>...</style>结构能够位于页面<HTML>标签中的任何位置,也能够屡次出现。一般是将整个<style>...</style>结构写在页面的<head>...</head>部分中。如:

 

<head>

       <meta charset="utf-8" />

       <title></title>

       <style>   

              html,body{height: 100%;margin: 0;}  

              body:before {content: 'The Start:'; display: block}

       </style>

</head>

 

适用场景:页面独有的CSS样式。

1.3.3    外链CSS

css代码写在一个单独的文件中,用link标签直接引入该文件到页面中。一个页面能够屡次使用link标签引入多个外部css文件,注意这些CSS代码的相互影响,一般是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。引入代码,以下:

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

这种引入CSS的方式是目前最为流行的,能够在站个网站范围内进行CSS代码的规划,方便复用和维护。

1.4   文本框: 全部的元素都遵循盒模型:内容的高宽》内边距》边框宽度》外边距,这样的一个盒子状的模型。
另外须要注意的是,display:inline的行内元素没法定义width和height属性,它的高宽只能根据此元素内的内容的高宽来决定。
了解盒模型,是学习CSS布局的基础之一。
盒模型

QQ截图20150807170419

 

CSS 中,width height 指的是内容区域(content)的宽度和高度。增长内边距、边框和外边距不会影响内容区域的尺寸,可是会增长元素框的总尺寸。假设框的每一个边上有 10 个像素的外边距和 5 个像素的内边距。若是但愿这个元素框达到 100 个像素,就须要将内容的宽度设置为 70 像素,如下是CSS代码:

 

#box {

  width: 70px;

  margin: 10px;

  padding: 5px;

}

 

下图是对上面CSS代码的解释:

IMG_256

 

在页面调试过程当中,能够经过(谷歌)浏览器控制台观察当前元素的模型状态。点击任意一个元素,在样式显示区域能够看到:

1.5   元素display

1.5.1    行内与块状

元素在遵循盒模型的基础上,有两种最基本的表现形式:行内和块状;全部元素都有一个displayCSS属性,这个属性值表明此元素在页面中的表现形式,行内元素的默认值为inline,块状元素为block。可使用display:block;display:inline;实现块级元素和行内元素的相互转换。

常见块状元素:

div - 经常使用块级容易,也是CSS layout的主要标签
      dl -
定义列表
      fieldset - form
控制组
      form -
交互表单
      h1 -
大标题
      h2 -
副标题
      h3 - 3
级标题
      h4 - 4
级标题
      h5 - 5
级标题
      h6 - 6
级标题
      hr -
水平分隔线
      noscript -
可选脚本内容(对于不支持script的浏览器显示此内容)
      ol -
有序表单
      p -
段落
      pre -
格式化文本
      table -
表格
      ul -
无序列表

常见行内元素:

a - 锚点
      abbr -
缩写
      br -
换行
      code -
计算机代码(在引用源码的时候须要)
      em -
强调
      i -
斜体
      img -
图片
      input -
输入框
      label -
表格标签
      s -
中划线(不推荐)
      select -
项目选择
      small -
小字体文本
      span -
经常使用内联容器,定义文本内区块
      sub -
下标
      sup -
上标
      textarea -
多行文本输入框

1.5.2    inline-block

display的属性值除了inlineblock以外,还有其它可选值,其中比较重要也是使用最频繁的的就是inline-block值。

display:inline-block:行内显示与块状显示的中和,首先它是行内显示的,同时兼并了block元素能够设置高宽属性的特质。

咱们总结下三种display值各自的表现和差别:

display:block

(1) block元素会独占一行,多个block元素会各自新起一行。默认状况下,block元素宽度自动填满其父元素宽度。

(2) block元素能够设置width,height属性。块级元素即便设置了宽度,仍然是独占一行。

(3) block元素能够设置marginpadding属性。

display:inline

(1) inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

(2) inline元素设置width,height属性无效。

(3) inline元素的marginpadding属性,padding和水平方向的margin-left, margin-right都产生边距效果;但竖直方向的margin-top, margin-bottom不会产生边距效果。

display:inline-block

(1) 不会独占一行。

(2) 能够设置width,height属性。

(3) 能够设置marginpadding属性。

1.5.3    display:none

displaynone常常被用来隐藏元素,好比一个弹出层模块默认被设置为display:none,当须要被显示的时候,设置displayblock(通常为block,固然inline也能够)以后便显示出来。

visibilityhidden的区别:

(1) displaynone的元素能够理解为在页面中被删除,它所占的位置也被其它元素替代,浏览器检测到display属性改变以后将从新渲染整个页面,效率相对低。

(2) visibilityhidden的元素并无在页面中被删除,仅仅是在页面中不可见,它的位置也不会被其它元素替代,浏览器不会从新渲染页面,效率更高。

理论上来讲,可以使用visibilityhidden去隐藏元素都尽可能使用这个属性,但通常状况下由于占位的问题,咱们使用displaynone也不会有太大问题。

 

 

 

 

阶段练习:

1)在了解盒模型和display属性以后,咱们就能够开始作一些常见的基本布局:

要求:作一个横向居中于浏览器,导航项固定宽高,文本水平垂直居中;当鼠标指向某一个导航项时,鼠标呈现手势状态,且该被选择的导航项背景颜色改变,文本颜色改变,颜色自行决定。

 

(2) 尝试作一个二级菜单:

 

1.6   浏览器兼容

1.6.1    浏览器内核

四大浏览器内核
        1.Trident (IE
浏览器) :由于在早期IE占有大量的市场份额,因此之前有不少网页是根据这个Trident的标准来编写的,可是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug
        2.Gecko:( FireFox )
优势就是功能强大、丰富,能够支持不少复杂网页效果和浏览器扩展接口,缺点是消耗不少的资源,好比内存。
        3.Webkit: ( Chrome/ Safari / UC )
优势就是Webkit拥有清晰的源码结构、极快的渲染速度,缺点是对网页代码的兼容性较低,会使一些编写不标准的网页没法正确显示。


        4.Presto: (
欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核,同时也是处理JS脚本最兼容的内核,能在WindowsMacLinux操做系统下完美运行。

 

时间2015-12  来源百度统计

谷歌的市场占有率在国内已经位居第一位,而使人讨厌的IE6已经不足4个百分点,我的建议不要考虑IE6的兼容,把更多时间拿出来设计交互更好的页面。

因此按照浏览器占有率,我建议你的兼容测试优先级为:谷歌浏览器 > IE7/IE8(通常状况下低版本没问题,高版本就不会有大问题)+ 搜狗浏览器(国内浏览器内核通常是高速模式:WebKit;兼容模式:IEtrident核心)。

固然不一样的公司不一样的业务对应的浏览器要求不一样,仍是因地制宜。

1.6.2    兼容方法

于不一样厂商的浏览器,好比Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不一样版本,如IE6IE7,对CSS的解析认识不彻底同样,所以会致使生成的页面效果不同,得不到咱们所须要的页面效果。 这个时候咱们就须要针对不一样的浏览器去写不一样的CSS,让它可以同时兼容不一样的浏览器,能在不一样的浏览器中也能获得咱们想要的页面效果(这就叫作CSS hack)。

简单的说,CSS hack的目的就是使你的CSS代码兼容不一样的浏览器。固然,咱们也能够反过来利用CSS hack为不一样版本的浏览器定制编写不一样的CSS效果。

 

CSS hack经常使用的方法:

1.6.2.1      条件注释法

这种通常是经过条件注释,不一样浏览器加载不一样的CSS外链实现,如:

 

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

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css">       <![endif]-->

 

a.         只在IE下生效:

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

 

b.         只在IE6下生效:

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

 

c.         只在IE6以上版本生效:

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

 

d.         只在IE8上不生效:

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

 

e.         IE浏览器生效:

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![endif]-->

1.6.2.2      属性前缀法(经常使用)

1.6.2.2.1    *

IE6/IE7可识别

1.6.2.2.2    _

IE6支持:_background-color:orange;       /*for ie6*/ 

1.6.2.2.3    \9

IE浏览器支持:background-color:red\9;      /*all ie*/

1.6.2.2.4    !important

这个表明优先级最高,可是IE6不识别。来看个具体例子(区别IE6,IE7,IE8,FF):

 

#tip{ 

       background:blue;    /*Firefox背景变蓝色 全部浏览器都支持*/ 

       background:red\9;  /*IE8背景变红色 IE6789支持覆盖上面样式*/ 

       *background:black;         /*IE7背景变黑色 IE67支持又一次覆盖上面样式*/ 

       _background:orange;  /*IE6背景变橘色 IE6支持又一次覆盖上面样式*/ 

       }  

 

能够看出来,这种css hack方法,就是经过不一样浏览器对不一样属性前缀的支持不一样,来区分设置不一样浏览器的CSS值。

1.6.2.2.5    CSS3的浏览器私有属性

实例:

 

-webkit-transform:rotate(-3deg);   /*Chrome/Safari*/

-moz-transform:rotate(-3deg);      /*Firefox*/

-ms-transform:rotate(-3deg);               /*IE*/

-o-transform:rotate(-3deg);          /*Opera*/

transform:rotate(-3deg);               /*nothing*/

 

1.6.2.2.6   选择器前缀法(知道便可,不常使用)
         *html *前缀只对IE6生效
         *+html *+前缀只对IE7生效

1.6.3    补充

1. 如今前端开发不多再兼容IE6/7了。

2. 最新版的浏览器的css兼容性问题愈来愈小,各浏览器趋于一致。

3. 响应式设计的大量应用,致使兼容各类尺寸的屏幕和各类移动端设备成了前端开发更重要的问题。

1.7   CSS布局

在前面,咱们学习了元素的盒模型和元素的display属性这两个基础概念以后,咱们来看看如下三种布局归类法:Flow Model(流动模型)、Float Model(浮动模型)、Layer Model(层模型);能够认为几乎全部的web页面,都是由这三种布局模型所组成。

1.7.1    Flow Model(流动模型)

流动模型是 HTML 默认布局模型;便可认为是随着文档流自上而下按顺序动态分布,就像麻袋里面堆放了一堆物品,拿掉其中一个上面的物品会自动滚动下去。

 

重点词:最基础简单的模型,也是web元素默认的显示模型

 

1.7.2    Float Model(浮动模型)

使用float属性的元素,将脱离正常的文档流,表现出独特的显示特性;在须要左右靠齐的状况下使用较多。元素使用float以后,将自动表现为display:inline-block的表现。

 

重点词:

1. 浮动元素会脱离正常的文档流,典型特征是父元素无视浮动的子元素。

案例:

<style type="text/css">

                     #container{background: black;padding: 5px;}    

                     #sub{background: red; }                                  

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

</div>

</body>

 

显示结果:

 

 

subdiv增长float:left,显示结果:

 

 

分析:子元素浮动以后,脱离正常文档流,也就是至关于父元素里面再也不有该浮动元素存在,因此此时container里面只有一个padding;而sub元素则相对父元素的左上角起点独立显示。

 

2. 块状元素无视浮动元素;内联元素和浮动元素并做一行。

案例:

 

              <head>

    <style type="text/css">

              #container{background: black;padding: 5px;}    

              #sub{background: red; float: left;}

              #div{background: green;}           

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

              </div>           

              <div id="div">dd</div>

       </body>

 

显示结果:

 

 

分析:父元素无视浮动元素(第一点咱们已经讲过),同时绿色div也无视浮动的元素而现实在黑色div之下;同时注意到绿色里面的dd文本(这里能够看作是内联元素)很明显受到了浮动元素的影响,紧贴这红色浮动元素并做一行。

 

3. 多个浮动元素时,将造成浮动文档流,按照inline-block表现显示。

案例:

       <head>

            <style type="text/css">

                     #div1{float:left;background: red;padding: 10px;}

                     #div2{float:left;background: green;margin: 10px;}    

                     #div3{float:left;background: yellow;}        

              </style>

       </head>

       <body>

              <div id='div1'>aa</div>

              <div id='div2'>bb</div>

              <div id='div3'>cc</div>

       </body>

 

显示结果:

 

分析:能够看出每一个浮动的元素按照浮动前后顺序(最早浮动的在最左边,若是这个案例中改成float:right,则div1在最右边)并成一行,而且display性质为inline-block,能够正常设置paddingmargin;对于float的元素咱们没有必要再去手动设置它的display属性(无效)。

 

注意点:

正常文档流和浮动文档流并非彻底隔离,而是相互有影响的,而这种相互影响每每致使布局状况会相对复杂,尤为是不少不一样层级的元素同时浮动时,容易产生非预期的状况,因此不建议滥用浮动。

 

关于清除浮动:

浮动元素以后,每每出现不易控制其显示位置的状况,若是子元素是浮动的,父元素不浮动那么子元素的位置是脱离父元素的束缚,其位置也是根据文档流中上一个已经定位的元素来决定他的位置。

好比:

在一个父容器里面有不少浮动div,结果每每是:

 

此时,由于子元素是浮动的,父容器不能随着子元素尺寸的改变而改变,这种状况每每并非咱们但愿的,这个时候就就可使用清除浮动:

       <style type="text/css">

              #container{background: black;padding: 5px; }   

              #sub{background: red;float: left; }      

              .clear{clear: both;}                     

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

                     <div class="clear"></div>

              </div>

       </body>

 

显示结果:

 

因此,咱们经常用到这种方法去让父容器的尺寸自适应浮动的子元素尺寸;但这里有个很差的地方是使用了一个专门的标签去实现浮动功能,在实际项目中咱们一般是在父元素中加上清除浮动类,经过伪类标签去实现:


       <style type="text/css">

              #container{background: black;padding: 5px; }   

              #sub{background: red;float: left; }      

              .clearfix {

                     clear: both;

                     overflow: hidden;

              }                  

              .clearfix:after {

                     clear: both;

                     content: "";

                     display: block;

                     height: 0;

                     visibility: hidden;

              }                         

       </style>

       </head>

       <body>

              <div id="container" class="clearfix">

                     <div id="sub">dd</div>

              </div>

       </body>

 

1.7.3    Layer Model(层模型)

层模型也叫定位模型,全部元素的默认定位属性(position)值为static,其它经常使用的三种设置是为fixed,absolute,relative

static:表示不定位,元素遵循 HTML 默认的流动模型,若是未显式声明元素的定位类型,则默认为该值。

fixed:表示固定定位,不会随浏览器窗口的滚动条滚动而变化

absolute:表示绝对定位,将元素从文档流中拖出来,而后使用 leftrighttopbottom 属性相对于其最接近的一个具备定位属性的父包含块进行绝对定位。

relative:表示相对定位,它经过 leftrighttopbottom 属性肯定元素在正常文档流中的偏移位置。元素仍然占据原来的空间。

1.7.4    经常使用CSS技巧

1.7.4.1      结构清晰、命名有规则和语义、习惯注释;

 

 

1.7.4.2      处理居中

1.7.4.2.1   文本(内联元素)水平居中

使用text-align:center

1.7.4.2.2   固定宽度的块级元素水平居中

父元素使用text-align:center,块级元素使用margin:0 auto便可:

 

1.7.4.2.3   固定宽度的元素水平、垂直居中

利用绝对定位和负边距处理:

 

1.7.4.2.4   单行文本垂直居中

使用line-height(行高)能够控制垂直位置

 

1.7.4.3      高度随内容自增加

使用min-height:40px; height:auto!important; height:40px;

通常高级浏览器设置min-height便可,当内容高度超过这个最小高度的时候会自增加。

 

1.7.5    结构布局实例

在构建一个web页面以前,都须要首先分析页面的总体结构,划分功能区域,搭建基本的页面框架:

 

 

 

 

 

 

01

 

 

 

 

 

 

 

 

分析结构:

 

1. 搭建页面主框架:

 

<body>

              <div id="wrapper">

                     <!--这是头部-->

                     <div id="header">header</div>

                     <!--这是导航栏-->

                     <div id="nav">nav</div>

                     <!--这是轮播图-->

                     <div id="picture">pictures</div>

                     <!--这是内容部分-->

                     <div id="content">

                            <!--内容的左侧-->

                            <div id="content_left">content_left</div>

                            <!--内容的右侧-->

                            <div id="content_right">content_left</div>

                     </div>

                     <!--这是尾部-->

                     <div id="footer">footer</div>

              </div>

       </body>

 

2. 写主框架的CSS

#wrapper {

       margin: 0;

       padding: 0;

}

#header {

       width: 80%;

       height: 100px;

       background-color: #CCFFCB;

       margin: 0 auto;

}

#nav {

       width: 100%;

       height: 40px;

       background-color: #CCFFCB;

       margin: 10px 0;

}

#picture {

       width: 80%;

       height: 250px;

       margin: 0 auto;

       background-color: #CCFFCB;

}

#content {

       width: 78%;

       height: 560px;

       margin: 10px auto;

       background-color: #CCFFCB;

       padding: 1%;

}

#content_left {

       width: 30%;

       height: 95%;

       background-color: #feff98;

       float: left;

}

#content_right {

       width: 65%;

       height: 95%;

       background-color: #ffcc98;

       float: right;

}

#footer {

       width: 100%;

       height: 70px;

       background-color: #CCFFCB;

}

 

3. 网站的所有总体框架

<body>

              <div id="wrapper">

                     <!--这是头部-->

                     <div id="header">

                            <a href="" class="header_left"><img src=""/></a>

                            <div class="header_right">

                                   <p class="right1">

                                          <a href="">设为首页</a> |

                                          <a href="">加入收藏</a>

                                   </p>

                                   <p class="right2">咨询电话:13023288071</p>

                            </div>

                     </div>

                     <!--这是导航栏-->

                     <div id="nav">

                            <ul>

                                   <li><a href="">网站首页</a></li>

                                   <li><a href="">关于咱们</a></li>

                                   <li><a href="">服务范围</a></li>

                                   <li><a href="">新闻中心</a></li>

                                   <li><a href="">工程案例</a></li>

                                   <li><a href="">联系咱们</a></li>

                            </ul>

                     </div>

                     <!--这是图片-->

                     <div id="picture">

                            <img src="" alt="" />

                     </div>

                     <!--这是内容部分-->

                     <div id="content">

                            <!--内容的左侧-->

                            <div id="content_left">

                                   <div class="left_title">服务项目 Service</div>

                                   <div class="left_menu1">

                                          <ul>

                                                 <li>拆旧、敲墙、酒店、商场</li>

                                                 <li>宾馆拆旧工程</li>

                                                 <li>建筑工地废旧厂房拆酒店</li>

                                                 <li>娱乐场所</li>

                                                 <li>建筑工地及家庭</li>

                                          </ul>

                                   </div>

                                   <div class="left_title">联系咱们 Contact</div>

                                   <div class="left_menu2">

                                          <p>XX工程有限公司</p>

                                          <p>电话:130555555</p>

                                          <p>传真:0517-85932887</p>

                                          <p>地址:淮安天桥区北园大街548</p>

                                          <p>网址:www.gggg.com</p>

                                   </div>

                            </div>

                            <!--内容的右侧-->

                            <div id="content_right">

                                   <div class="company_description">

                                          <div class="content_title1">

                                                 <span>公司简介</span>

                                                 <a href=""><img src="img/more.jpg" alt="" /></a>

                                          </div>

                                          <div class="content_description">

                                                 <p></p>

                                                 <img src="" alt="" />

                                          </div>

                                   </div>

                                   <div class="news">

                                          <div class="content_title1">

                                                 <span>新闻中心</span>

                                                 <a href="">

                                                        <img src="img/more.jpg" alt="" />

                                                 </a>

                                          </div>

<!--新闻连接列表-->

                                          <ul>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href="">/a></li>

                                          </ul>

                                   </div>

                                   <div class="case_show">

                                          <div class="content_title2">

                                                 <span>案例展现</span>

                                                 <a href=""><img src="" alt="" /></a>

                                          </div>

                                          <div class="case_name">

                                                 <ul>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展现名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展现名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展现名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展现名称</p></a></li>

                                                 </ul>

                                          </div>

                                   </div>

                            </div>

                     </div>

                     <!--这是尾部-->

                     <div id="footer">

                            <p></p>

                            <p><a href=""></a></p>

                     </div>

              </div>

       </body>

 

1.8   CSS Spirit

CSS Sprites在国内不少人叫css精灵,是一种网页图片应用处理方式。它容许你将一个页面涉及到的全部零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差很少的,因此无需顾忌这个问题。

优势:

1.利用CSS Sprites能很好地减小网页的http请求,从而大大的提升页面的性能,这也是CSS Sprites最大的优势,也是其被普遍传播和应用的主要缘由;

2.CSS Sprites能减小图片的字节,曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就能够了,不须要对每个小元素进行命名,从而提升了网页的制做效率。

4.更换风格方便,只须要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就能够改变。维护起来更加方便。

固然,Sprites也有明显的缺点,主要就是维护困难,不过能够经过合理控制合并图片个数去调解此问题。

1.9   三种方式处理icon

Iconweb开发中很常见,这里介绍三种最多见的实现方式。

1)切图实现

直接用图片做为icon能够说是最直接也是最简单经常使用的办法了,并且在icon较多的状况下一般会使用spirit方式合并。

2Css实现

经过CSS绘制简单的小icon,主要是三角形图标。

(3) 文件外链

制做矢量图标,导出各个浏览器支持的文件格式,经过文件连接的形式显示图标。此方法优缺点都较明显,优势是轻量、灵活(大小和颜色可随意设置)、兼容好。缺点是制做麻烦、单色、维护差。具体可参考阿里的http://www.iconfont.cn/平台。这种方法经过字符实体显示图标。

 

<style>

/*经常使用的多个icon合并成一张图片*/

.nav{ display:block;width:70px;height:70px; background:url('img/nav.png');}

.nav:hover{ background-position:0 80px}

 

/*利用CSS画简单icon*/

div#up {

width: 0px;

height: 0px;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid #2f2f2f;

}

div#down {

width: 0px;

height: 0px;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

}

div#left {

width: 0px;

height: 0px;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid yellow;

}

div#right {

width: 0px;

height: 0px;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

 

/*经过自定义字体的方式显示图片 http://www.iconfont.cn/*/

@font-face {font-family: 'iconfont';

    src: url('font/iconfont.eot'); /* IE9*/

    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('font/iconfont.woff') format('woff'), /* chromefirefox */

    url('font/iconfont.ttf') format('truetype'), /* chromefirefoxoperaSafari, Android, iOS 4.2+*/

    url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont{

    font-family:"iconfont" !important;

    font-size:32px;font-style:normal;

    -webkit-font-smoothing: antialiased;

    -webkit-text-stroke-width: 0.2px;

    -moz-osx-font-smoothing: grayscale;}

.iconfont:hover{color:red; font-size:36px}

</style>

<body>

<!--demo1-->

---------图片icon---------

<i class="nav"></i>

 

<!--demo2-->

---------CSS icon---------

<div id="up"></div>

<div id="down"></div>

<div id="left"></div>

<div id="right"></div>

 

<!--demo3-->

---------外链文件 icon---------

<br/>

<i class="iconfont">&#xe74f;</i>

</body>