CSS简介

  认识CSS

  CSS的英文全名是 Cascading Style Sheets,中文可翻译为串接式排版样式,并且 CSS2规范也于 1998 年 02 月通过 W3C 的审核与推荐,所以 CSS 并不是专为 XHTML 所设计的,CSS 还可以被其他标记语言拿来制作排版样本,如 HTML,XML 文件都可以应用 CSS,来美化网页的设计,大家如果学会 CSS,在HTML,XHTML,XML 文件中都可以使用.

  传统 HTML 设计网页版面的缺点

  使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对 XHTML 而言更是如此,因为 XHTML 有意将原先HTML中有关网页版面的标记或属性遗弃不用,如<font>,<center>,color,background,bgcolor 等等,所以对 XHTML 文件而言,其排版与显示的功能比 HTML 文件更弱,所以使用 XHTML 来设计网页更需要搭配 CSS 排版样本.

  CSS的特点

  HTML 排版时的缺点:
  设置麻烦,修改麻烦,功能严重不足.
  CSS 样式排版的优点:
  排版属性功能完整,排版文件可以独立存在,可以共用排版文件

  CSS 样式排版的分类:

    外部样式表
    内部样式表(位于 <head> 标签内部)
    内联样式表(在 HTML 元素内部)

  外部样式表:
      外部样式表相对于内部引用和内联引用来说是高效的是节省宽带的.
      外部样式表是W3C推荐使用的.
      外部样式表是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).
      <head>
         <link rel="stylesheet" type="text/css" href="http://www.xxxxx.com/style.css" />
      </head>
    
  内部样式表

  使用style标签直接把CSS文件中的内容加载到HTML文档内部.位于head之间.
  其功能,又可以分为三种:
      1.标记定义型
      2.class 定义型
      3.id 定义型

    标记定义型格式:
        <head>
        <style type=”text/css”>
        标记名称{属性 1:属性值 1;属性 2:属性值 2;}
        标记名称{属性 1:属性值 2;属性 2:属性值 2;}
        </style>
        </head>
        <body>
          <标记名称>…</标记名称>
        </body>
    
    class 定义型格式:

        <head>
            <style type=”text/css”>
                .定义名称{属性 1:属性值 1;属性 2:属性值 2;}
                .定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
            </style>
        </head>
        <body>
        <标记名称 class=”定义名称”>…</标记名称>
        </body>
    
    id 定义型格式:

        <head>
            <style>
                #定义名称{属性 1:属性值 1;属性 2:属性值 2;}
                #定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
            </style>
        </head>
        <body>
        <标记名称 id=”定义名称”>…</标记名称>
        </body>

  内联样式表

  内联样式表可以把CSS样式直接作用在HTML标签中.
  内联样式表(直接在HTML标签中使用)虽然是一种快捷的方式,但是不利于以后的统一修改和表现的一致性,所以不提倡使用

      <p style="font-size: 10px; color: #FFFFFF;">
            使用CSS内联引用表现段落.
      </p>


  CSS 规定,范围越小,优先级越高.由小到大排列:
    内联样式表
    内部样式表
    外部样式表

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值