网页制作之内嵌样式实例

1.内嵌样式表简介

2.HTML,ID,CLASS,伪类选择器运用

3.外部样式表使用

4.行类，内嵌，外部样式表优先级

5.border,margin,padding属性介绍（选择）

 

 

1.内嵌样式表简介

 

1.1 为什么需要内嵌样式表

当网页中某些标签想共享一些样式的时候，可以使用内嵌样式表。

 

1.2 内嵌样式表语法

<style>

选择器{

 样式属性:样式属性值;

 样式属性:样式属性值;

 ................... 

}

</style>

例如:

<style>

 body{

    font-size:13px;

    color:red;

 }

</style>

 

 

 

 2.HTML,ID,CLASS,伪类选择器运用

 

 2.1 HTML标签选择器语法

     HTML标签名{

样式属性:样式属性值;

     }

     例如：

     body{

font-size:13px;

color:red;

     }

     特点:所有选中的标签将自动运用改样式.

 

 

 

 2.2 ID选择器语法

     #ID名称{

样式属性:样式属性值;

     }

     例如：

     #test{

font-size:13px;

color:red;

     }

     调用:

     <div id="test"></div>

     特点:指定id名称的标签运用改样式.

 

 

 

 2.3 CLASS选择器语法

     .类名称{

样式属性:样式属性值;

     }

     例如：

     .myclass{

font-size:13px;

color:red;

     }

     调用:

     <div class="myclass"></div>

     特点:指定class属性的标签运用改样式.

 

 

2.4 伪类选择器语法

     标签名:行为（动作）{

样式属性:样式属性值;

     }

     例如：

     a:hover{

font-size:13px;

color:red;

     }

     调用:

     <a>鼠标移动过来就知道效果了</a>

     特点:指定的标签在触发某种行为的时候将套用改样式.

 

 2.5 常用的选择器使用格式

     1.例如:

     div,p,img{

font-size:12px;

     }

     说明:div,p,img同时套用改样式

 

     2.例如:

     div p{

font-size:12px;

     }

     说明:div标签里面的p标签才会套用改样式

     <div>

<p>我才会套用样式</p>

     </div>

 

 

 3.外部样式表使用

 

 3.1 为什么需要使用外部样式表

  当某些网页想共享一些样式的时候，可以使用外部样式表

 

 3.2 外部样式表语法

  把需要共享的样式保存在一个单独的文件中*.css

  例如:test.css 内容如下

  body{font-size:13px;}

  #test{font-size:13px;}

  .myclass{font-size:13px;}

  调用方式:

  1.通过<link>标签调用<link rel="stylesheet" type="text/css" href="css文件路径" />

  2.通过@import指令调用(浏览器兼容不好，不推荐使用)

  <style>

@import css文件路径;

  </style>

 

  4.行类，内嵌，外部样式表优先级

    当行类，内嵌，外部样式表出现相同选择器相同样式属性的时候，

    优先级则是行类>内嵌>外部.

    反之，则是属性叠加。

 

    ID选择器》class选择器》标签选择器

    行类样式表>内嵌样式表>外部样式表

 

 

更多参考查看: http://cxylm.net/a/wangyezhizuo/2015/1031/1036.html