1. CSS如何控制页面

　　使用XHTML+CSS布局页面，其中有一个很重要的特点就是“结构与表现相分离”（结构指XHTML，表现指CSS）。有人这样描述这种分离的关系，结构XHTML好比一个人，表现CSS好比是衣服，如何让CSS去控制页面，好比是如何让衣服穿在人身上。不同的CSS就可以使页面出现不同的风格适应不同的网站，而不同的衣服，人穿上后就会体现不同的职业。

　　1.1 如何让CSS去控制页面？

　　　　CSS控制页面的样式有四种，分别是：行内样式、内嵌样式、链接样式、导入样式。

　　　　1）行内样式： 

　　　　　　行内样式是4中样式中最直接最简单的一种，直接对html标签使用 style=""，例如：

　　　　　　　　　　<span style="color:#ffffff; font-size:15px;">行内样式</span>

　　　　     虽然这种方式比较直接，但是过多的style属性代码会导致html页面不够纯净，造成文件体积过大，冗余过多，不利于搜索蜘蛛爬行，同时会造成后期运维成本的提高。　　　

　　　　2) 内嵌样式：

　　　　　　内嵌样式是将css代码写在<head></head>之间，并且使用<style type="text/css"></style>进行声明，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

　　 <title>内嵌样式</title>

　　<style type="text/css">

　　　　.class1{color:#ffffff; font-size:15px;}

　　</style>

</head>

<body>

　　<span class="class1">内嵌样式</span>

</body>

</html>

　　　　　　如果一个网站或系统的页面不是很多的情况，使用内嵌样式到是个不错的选择，如果有很多页面的话就会造成每个页面的文件都很大，不利于CSS样式共享不说，也会给后期的维护工作带来很大的难度。

　　　　3）链接样式：

　　　　　　链接样式可以说是使用频率最高，最实用的一种方式了，只需要在<head></head>加上<link href="css文件路径" type="text/css" rel="stylesheet"/>即可，举个示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

　　 <title>链接样式</title>

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

</head>

<body>

　　<span class="class1">链接样式</span>

</body>

</html>
.class1{color:#ffffff; font-size:15px;}

　　　　　　这种方式将HTML文件和CSS文件彻底的分成了两个或多个文件，实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期的维护变的方便，并且如要要保持界面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站或系统风格，也只需要改动公共的CSS文件即可，这才是我们XHTML+CSS制作页面提倡的方式。

　　　　4）导入样式：

　　　　　导入样式和链接样式比较相似，采用import方式导入css样式集，在HTML页面初始化时，会被导入到HTML文件中，成为文件的一部分，类此第二种内嵌样式。建议大家采用链接方式。

　　　　   注：导入样式和链接样式有什么区别呢？

link

 link就是把外部CSS与网页连接起来。

@import

 import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。

为什么使用@import

大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.

另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link

使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病

 如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

04-11更新:  @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

到底要用那种方式

就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

　　1.2 样式的优先级

　　　　如果这上面的四种的两种处于同一页面，就会出现优先级问题，四种样式的优先级是按照“就近原则”：

　　　　　　　　　　行内样式 > 内嵌样式 > 链接样式 > 导入样式

【学习DIV+CSS】2. 学习CSS（一）--CSS控制页面样式的更多相关文章

  1. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  2. 如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入

    css 之 ime-mode语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode ...

  3. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  4. 如何从零开始学习DIV+CSS

    CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...

  5. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  6. 【学习DIV+CSS】1. 你必须知道的三个知识

    1. DIV+CSS的叫法不够严谨 我们以前做页面布局的时候大多是用Table,很多人称之为“Table+CSS”,而现在比较流行的是DIV布局,所以称之为“DIV+CSS”.听起来是挺合理的,岂不知 ...

  7. （4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类

    1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...

  8. 2、CSS学习 - IT软件人员学习系列文章

    上文我们讲了HTML,本文讲讲CSS. 上次我们讲了CSS是HTML页面的装修部分,就是各种瓷砖.粉墙.说明了CSS在HTML页面中的重要地位.没有CSS,那么HTML页面将很粗糙,就象我们的毛坯房一 ...

  9. CSS入门级学习

    css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...

随机推荐

  1. 个人作业4——alpha阶段个人总结（201521123003 董美凤）

    一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...

  2. Redis4.0模块子系统实现简述

    一.模块加载方法 1.在配置文件或者启动参数里面通过<loadmodule /path/to/mymodule.so args>指令加载 2.Redis启动后,通过<module l ...

  3. 个人作业week3案例分析

    调研产品:博客园 第一部分 调研和评测 1.bug 1.不同种类浏览器的支持存在差异 bug描述:在不同浏览器下,部分博客内容显示的格式有明显不同 可尝试用下面两种不同的浏览器打开这个博客网址:htt ...

  4. 软工网络15团队作业4——敏捷冲刺日志的集合贴（Alpha阶段）

    Alpha阶段 第 1 篇 Scrum 冲刺博客 第 2 篇 Scrum 冲刺博客 第 3 篇 Scrum 冲刺博客 第 4 篇 Scrum 冲刺博客 第 5 篇 Scrum 冲刺博客 第 6 篇 S ...

  5. 看懂Qt源代码-Qt源码的对象数据存储

    第一次看Qt源代码的人都会被其代码所迷惑,经常会看到代码中的d_ptr成员.d_func(函数)和Q_DECLARE_PRIVATE等奇怪的宏,总是让人一头雾水,下面这篇文章转自http://www. ...

  6. 一道面试题：StringBuffer a=new StringBuffer ("A"); StringBuffer b=new StringBuffer

    前几天又看到这个面试题,再次看看 public class Jtest{ public static void main(String[] args) { StringBuffer a=new Str ...

  7. delphi的ActionToolBar控件的使用 [问题点数：50分]

    delphi那些默认图标在哪里就是那些Text,Label,Checkbox,显示在palette上面的那些图标. 上面的按钮是在ActionManager中添加的,让后拖到ActionToolBar ...

  8. 是否升级IOS11？IOS11不支持32位程序 查看手机哪些APP不支持

    查看苹果32位APP具体步骤:设置-通用-关于本机-应用程序.如果手机中下载了32位应用的话,苹果会给出应用兼容性提醒:如果手机里没有安装32位应用,右侧没有小三角,点击“应用程序”也会没有反应. I ...

  9. nowcoder 203J Graph Coloring I（dfs）

    题目链接 题目描述 修修在黑板上画了一些无向连通图,他发现他可以将这些图的结点用两种颜色染色,满足相邻点不同色. 澜澜不服气,在黑板上画了一个三个点的完全图.修修跟澜澜说,这个图我能找到一个简单奇环. ...

  10. python selenium2 定位一组元素find_elements实例

    打开hao123首页,需要定位以上区域中的所有链接,他们有相同的父元素<ul class="js_bd site-bd site-hd0">,所有链接处在li>a ...