Chinaunix首页 | 论坛 | 博客
  • 博客访问: 445643
  • 博文数量: 63
  • 博客积分: 1175
  • 博客等级: 少尉
  • 技术积分: 1204
  • 用 户 组: 普通用户
  • 注册时间: 2012-04-19 11:33
文章分类
文章存档

2015年(1)

2014年(3)

2013年(7)

2012年(52)

分类: Html/Css

2014-04-22 15:57:51

【知识篇】
知识一、DIV+CSS叫法
  • 引入的误区
        1. 使用table,页面不标准
        2. DIV越多越好,DIV的多少决定页面的标准程度
  • DIV和table的区别
        1. table用来存储数据
        2.
DIV用来架设网页结构
  • 准确叫法
        XHTML+CSS

知识二、 W3C

    1. W3C组织
        即World Wide Web Consortium的缩写,中文为万维网联盟,该组织负责网页标准,即W3C标准 
    2. W3C标准
        包括三个标准:结构标准、表现标准和行为标准,分别对应的语言是xhtml、css和javasrcipt
        静态页面需使用前两种语言,故称为xhtml+css

【基础篇】
基础一、 样式分类
    css样式分为四类:行内样式、内嵌样式、链接样式、导入样式
    1. 行内样式
      最直接、最简单,在html中直接加入style=“”
        for example:  


    2.内嵌样式
       写在中的样式,用声明
     for example:

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <style>
  6. body{
  7. padding:0px;
  8. margin:0px;
  9. }
  10. p{
  11. color:#fff;
  12. font-family: 微软雅黑;
  13. font-size:12px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <p>web前端攻城狮</p>
  19. </body>
  20. </html>
  3. 链接样式
        使用频率最高,最实用的方法,在中间加上link
        for example:

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  
  6. </head>
  7. <body>
  8. <p>web前端攻城狮</p>
  9. </body>
  10. </html>
  4. 导入样式
        采用import方式导入样式
    四种样式的优先级:行内样式 > 内嵌样式 > 链接样式 > 导入样式

基础二、 CSS选择器
        css选择器分为四种:标签选择器,ID选择器,类选择器,通用选择器
        1.标签选择器
            针对标签定义采用相应的样式
            for example:
              p{
                    font-size:12px;
                    color:#eee;
                }
        2.ID选择器
           每个id在html页面中只能出现一次,类似于身份证,页面中使用id选择器更具有针对性
           for example:
            html中定义id标签:
                <p id="one">web前端攻城狮</p>
       css样式:
         #one{
            font-size:12px;
            color:#eee;
           }

          3. 类选择器
               页面中同种标签可设置为同一个类名,同一类名可出现在多个标签中
                for example:
                html中定义类标签:
                <p class="one">web前端攻城狮</p>
         搜索一下
         css样式:
         .one{
            font-size:12px;
            color:#eee;
          }

            4. 通用选择器
                即 * 星号,所有的标签都采取的样式
               for example:    
                *{
                   }
               一般,页面都会先设置如下css样式
                 *{
                        padding:0px;
                        margin:0px;

                   }
                
  该篇到此结束,下篇继续!

阅读(2943) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~