CSS篇章

页面的组成:页面=数据(后台技术jsp|asp|.net|php|python)+Html(显示)+CSS(样式)+js(动效)

 

CSS:层叠样式表
        特点:①CSS和HTML分离
                ②可很好的控制页面的布局(DIV+CSS)
                ③提高网页加载速度
                ④降低服务器的成本
                ⑤呈现一致的效果

 

CSS引入的 3 种方式:
  ①外部引入

   1 <link rel="stylesheet" href="main.css"> 
  特点:一个CSS文件可控制多个页面
  易改版、便于维护
  减少代码量、代码简洁规范易于分工协作
  有效利用缓存机制

  相对于单页有垃圾代码
  外部引入中的href属性会给服务器造成请求的压力

  常用于全站
  ②head引入      

1 <style>
2     #main{
3         background: red;
4     }
5 </style>


  特点:速度快,没有服务器请求压力
     相对于外部引入单页代码量少

       不易于改版与维护
       代码较乱不易前后台沟通

     常用于大型互联网首页 如:网易、新浪等

  ③标签内引入
  1 <div style="background:red;">AAA</div> 
  特点:优先级最高

       冗余代码量多,代码量大
       不易于维护

       个别特殊效果的使用


CSS常用选择器分类
  ①ID选择器
  特点:不能重复;一般只作用于一个节点上;定位某一个节点时最好用ID选择器

  ②类选择器
  特点:作用于多个节点上;当很多节点需要相同的样式时使用

  ③标签名选择器
  特点:作用于多个节点上,比类选择器精简

  ④群组选择器
  特点:多种选择器用逗号隔开,体现一种继承和覆盖的思想;优化代码

  ⑤后代选择器

  以上5种选择器都属于CSS1.0,兼容性最好


  兄弟|子选择器.. ->CSS2.0 ->存在一部分问题,以IE为主

  结构性伪类|动画|过渡 ->CSS3.0 -> 多用于移动端


  Css样式选择器分为4个等级;标签内样式>ID选择器总数> class选择器总数>类型选择器总数
  ID选择器权重值 100
  类选择器权重值 10
  标签选择器权重值 1
  如果权重相同,离标签近的有效

posted @ 2016-09-29 14:23  JSKevin  阅读(194)  评论(0编辑  收藏  举报