zoukankan      html  css  js  c++  java
  • [原]精简高效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>  


     

  • 相关阅读:
    前端发展态势 && 前端工作流程个人浅析
    Mac在Django安装mysqlclient时报错
    rabbitMQ简单配置及OSError: [Errno 9] Bad file descriptor问题
    MacOS 出现command not found
    Celery简单说明以及在Django中的配置
    Celery目录结构配置
    shell脚本之安装docker
    阿里云按需购买设置
    Java中的关键字 transient
    jvm常用参数
  • 原文地址:https://www.cnblogs.com/java20131201/p/3466232.html
Copyright © 2011-2022 走看看