当前位置:首页 > 新闻资讯 > 网站建设

厦门网站建设为您介绍:CSS基础知识

日期:2016-07-31 23:00 编辑:leo 来源:互联网 标签:厦门网站建设 浏览:2072次

一、CSS基础
1.什么是CSS?
CSS[Cascading Style Sheet],层叠样式表
2.CSS能做什么?
快速维护页面元素(如文本、图像、表格等)的样式。
3.HTML属性与CSS样式的使用原则
W3C建议尽量使有CSS样式取代HTML标记的属性。
HTML与CSS的关系是结构与表现的关系。
4.CSS的使用方式
4.1 链接到外部的CSS文件
    CSS文件的扩展名为.css    
    <link type="text/css" rel="stylesheet" <br/>    
    media="all|screen|print" href="CSS文档URL"/>    
    media,指CSS文件的应用媒体类型。    
    all,应用于所有的媒体介质。    
    screen,应用于浏览器。    
    print,应用于打印机。    
4.2 书写于文档的头部
    <style type="text/css"><br/>    
    ...    
    </style><br/>
4.3 书写于标记内部
    <标记名称 style="CSS样式;...">    
    <标记名称 style="CSS样式;...">...<!--标记名称-->
4.4 CSS应用方式的优先级
        内联样式的优先级最高        
        头部样式与外部样式取决于书写的顺序
5.CSS的语法规则
  选择器{
        属性:值;
        属性:值;
        ...
 }
二、CSS选择器
1.什么是CSS选择器?
CSS选择器就是告诉网页,哪些对象将使用CSS样式。
2.CSS选择器
2.1 通配选择器   --  * (自动应用于所有的HTML元素)
2.2 类型选择器   -- 标记名称 (自动应用于某种类型的HTML元素)
2.3 类选择器      -- .类名称 (手动的HTML元素添加class="类名称"属性,多个类名之间以空格分隔)
2.4 ID选择器     -- #id (手动的应用给文档中唯一的对象,添加id="ID"属性)
    ID可能被使用的地方:    
    A.CSS样式    
    B.JavaScript  -- document.getElementById(id)    
    C.jQuery      -- $('#id')
2.5 群组选择器    -- 选择器,选择器,... (具有相同属性的选择器的简捷方式)
2.6 后代选择器    -- 选择器 选择器 ... (选择器之间至少为父子关系)
2.7 子代选择器    -- 选择器>选择器>... (选择器之间只能为父子关系)
2.8 伪类/伪元素选择器 --  :link :hover :active :visited                       
                      :after :before                      
                      :focus
3.CSS选择器的优先级
  inline,IDs,classes,tags 
    内联样式的优先级是:1,0,0,0    
  ID选择器的优先级是:0,1,0,0 
    类选择器的优先级是:0,0,1,0    
    类型选择器优先级是:0,0,0,1    
    例1:    
  #a1{  --> 0,1,0,0    
  }    
    例2:
  #a1 li{  --> 0,1,0,1   
  }
 
     例3:    
  body #a1 li{  --> 0,1,0,2   
  } 
    例4:    
  body #a1 .a2 .a3 li{  --> 0,1,2,2 
  }   
4.CSS单位
4.1 长度单位
px,像素
%,百分比
em,字号的倍数
4.2 颜色单位
A.英文名称,如red,green等
B.完整十六位进制,如#ff0000,#00ff00,#0000ff,#ffffff(白色),#000000(黑色)
C.简写十六位进制,如#f00,#0f0等
D.完整RGB模式,如rgb(255,0,0)等
E.百分比RGB模式,如rgb(0%,100%,0%)
<!--标记名称--><!--标记名称--><!--标记名称-->

延伸阅读:

本站文章,部分来源互联网,部分为原创,如有侵权请联系我们,如您转载请注明来自:https://www.e1000u.net/news/77.html