• [原]精简高效CSS系列之一——CSS样式用法


          学过网页设计的都知道CSS灵活性很好,网页的样式完全与代码分离。仅仅需要简单的CSS代码知识就可以将一个本来不太漂亮的网页立刻变得漂亮起来,很轻易的改变网页的外观。上一篇文章总结了CSS样式的基础以及优缺点。这篇文章接着说CSS样式的用法。

        

     一、CSS在网页设计中有三种方式的用法,那么具体使用中采用哪种方法呢?

          当有多个网页用到CSS采用外联CSS文件的方式,这样不仅网页的代码大大减少,修改起来方便,而且还能提高复用性,这样一个CSS文件就可以控制多个HTML页面了;只在单个网页中使用的CSS,采用文档头部方式;只有在一个网页一两个地方才用到的CSS样式,采用行内样式,很方便,应用样式时做相应修改即可。

     

    二、下面简单介绍一下CSS的三种方式

    1、行内样式

    <html>  <head>  <title>例子</title>  </head>  <body style="background-color: #FF0000;">  <p>这个页面是红色的</p>  </body>  </html>  


     

    2、内嵌样式

    <html>  <head>  <title>例子</title>  <style type="text/css"> <!-- body {background-color: #FF0000;} --> </style>  </head>  <body>  <p>这个页面是红色的</p>  </body>  </html>  


     

    3、链接样式

    链接样式就是要引入一个CSS文件。CSS文件可以放在服务器或者本地硬盘上。那么css文件里的样式内容:

    body {background-color: #FF0000;}  

    在HTML文档里面插入链接语句:

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

    这行链接语句要放在<head></head>之间:

    <html>  <head>  <title>例子</title>  <link rel="stylesheet" type="text/css" href="style.css" />  </head>  <body>  <p>这个页面是红色的</p>  </body>  </html>  

     

    以上三种方式说明了在显示HTML页面的时候要按照给定的CSS样式进行显示。

           总结:网页设计的过程中将以上三种方式结合起来应用,不仅不会造成混乱,而且特别灵活,效率高。如果一个网页中有这三种方式,那么首先检查的是行内样式,针对其样式去执行;然后检查的是内嵌样式也就是头部插入css样式的;最后检查的是连接样式。也就是三种方式的优先级由高到低分别是:行内样式、内嵌样式、导入样式。

     

    PS:还有一种样式使用@import引入: 跟LINK用法很像,但必须放在<STYLE>...</STYLE> 中。

    <STYLE TYPE="text/css"> <!-- @import url(http://yourweb/ example.css); --> </STYLE>  


     

  • 相关阅读:
    HDU 5583 Kingdom of Black and White 水题
    HDU 5578 Friendship of Frog 水题
    Codeforces Round #190 (Div. 2) E. Ciel the Commander 点分治
    hdu 5594 ZYB's Prime 最大流
    hdu 5593 ZYB's Tree 树形dp
    hdu 5592 ZYB's Game 树状数组
    hdu 5591 ZYB's Game 博弈论
    HDU 5590 ZYB's Biology 水题
    cdoj 1256 昊昊爱运动 预处理/前缀和
    cdoj 1255 斓少摘苹果 贪心
  • 原文地址:https://www.cnblogs.com/java20131201/p/3466232.html
Copyright © 2020-2023  润新知