html_样式表和常用样式属性

样式表： CSS 层叠样式表  Cascading Style Sheets

 样式表按出现的位置，可以分为三种

  1.行内样式表 出现在某一标签开始标签的style属性中

      <span style=""></span>

  2.内部样式表 出现在页面上部head标签中，写在style标签内

          <style type="text/css">

              span{

              color:#F00;

              font-size:36px;

              font-family:Georgia,"Times New Roman", Times, serif;

             }

       </style>

  3.外部样式表 写在html外部的css文件中，使用link标签引入到html页面中

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

样式表按选择器分类，可以分为

 1.标签选择器,以标签名作为选择器

 2.类选择器,以.name作为选择器,在html页面的标签中用class="name"来引用

 3.id选择器,以#name作为选择器,在html页面的标签中用id="name"来引用

  选择器的优先级，修饰的标签越少，优先级越高

常用样式属性-文本属性

       line-height:50px;    /*行高，常用来调整文字纵向的位置*/

       text-align:center;   /*字体的横向位置*/

       text-decoration:none;   /*下划线等,常用来取笑链接下下划线*/

       font-weight:bold;     /*字体粗细*/

       font-family:宋体;  /*字体样式*/

       color:#00F;     /*字体颜色*/

       font-size:24px;  /*字体大小*/

常用样式属性-背景属性

       background-image:url(images/1.png);   /*背景图片路径*/

       background-repeat:no-repeat;         /*背景图片平铺样式*/

       background-position:-30px-30px;      /*背景位置*/

       background-color:#993;  /*背景颜色*/

常用样式属性-列表属性

       list-style:none;

 

c-盒子属性

  盒子属性，最重要的三样属性

   1.margin      外边距

   2.padding     内边距

   3.border      边框

  div里的width和height不包括border，内边距和外边距是分开的，如div中有个div1，div的padding-top是10px,div1的margin-top是10px，  则div和div1在top上距离20px

常用样式属性-浮动float 可实现div的编排

  未使用float时，div会前后换行

  使用float后，div不前后换行，可以再不同的图层上

框架集frame

 <frameset rows="20%,*" frameborder="1">

       <frame src="头部.html"/>

           <frameset cols="20%,*"frameborder="1">

                  <frame src="左边.html" />

                  <frame src="主体.html" />

           </frameset>

 </frameset><noframes></noframes>

  用frame时需要注释掉body

iframe

 <iframe src="http://www.baidu.com"style="width:800px;"></iframe>

  可写在body中

伪类样式

       a{

              text-decoration:none;

       }

       a:link{color:#000}     /* 未访问的链接黑色*/

       a:visited{color:#F00}  /* 已访问的链接红色*/

       a:hover{color:#00F}    /* 当有鼠标悬停在链接上蓝色*/

       a:active{color:#0F0}     /* 被选择的链接 绿色*/