不知道有多少码农和我一样，css一直是一个软肋，软到全身酥麻。。。既然软肋来了，只能是要想办法解决，所以就找本CSS权威指南看一看，都说

CSS权威指南这本书比较过时，但是内容还是比较充实的，而且内容基本上就是和你交谈一样，非常舒服，好了，下面从正文说起。

一：为啥要学习CSS

　　当你知道CSS的历史还是蛮有味道的，在很久很久以前，web上没有css，只有一些html的标签，比如p，h1...h5... div span,ul 等等，这些html标记

都是一个具有特定含义的html标签，过去人很实在，不讲究排版，只要内容是干货就好了，就比如现在的博客园排版，简洁美，我们这些码农同样也不在乎这

个，只要文章是干货就好，但是呢？web用户不是程序员，他们才不讲究干货不干货，他们讲究外表，讲究炫酷，讲究如何的个性，这样的话Html就扛不住了，

W3C组织就为了满足这些人的胃口，提供了一些装饰html标记的标记，比如strong，font,b,u等等。。。就比如下面这样。

<body>

    <font size="20" color="red"><b>你好</b></font>

</body>

然后的然后，程序员就有了下面这样的抱怨了。。。

第一： 老子为了decorate个text，要写无数个标签，我操。。。多麻烦。。。

第二：马丹，现在我们的页面结构开始越来越复杂，这些几把font, b压根就不能重用，根本就是完蛋的东西。。。。高个毛啊。。。

第三：现在国家这么穷，带宽这么贵，我的html体积真tmd的大，内容其实仅仅占不到html的1/10。。。我的客户有时候要几分钟才能打开。。。这样下去，

我要失业了。。

结果就这样W3C招致网上程序员的骂声一片，原本的想法就是想通过一些样式的html标记来修饰html的结构内容，结果导致现在的一片混乱，而且页面结构失

衡。。。面对三大问题，W3C就开始推出了CSS，这个装修Html的层叠样式表。彻底的解决了程序员提出的三大难题。。。

二：如何解决三大难题

1. 无数个标签的问题

　　css采用一条条规则来decorate各个html的结构元素，规则的结构采用 “标签+内容声明” 的方式，比如：

     <style type="text/css">

         p {

             font-size: 20px;

             color: red;

             margin: auto 0;

             width: 50%;

         }

     </style>

这种定义我想没什么好说的，这样的话，我们把html中的装饰标签全部拿出来了，放到一个专门的css规则中，这样的好处大家也看到了，”内容“和”展示”的分离，

这样的话就解决了程序员们的第一个抱怨。

2. 装饰标签的重用问题。

确实，原始的html装饰标签无法做到重用，这样的话自然就会导致页面膨胀，css就采用了规则组来解决这个问题，先把规则写好，然后哪个标签想用的话，自己套用

下已设定的css定义就可以了。这样的话也就解决了重用的问题。

3. 体积膨胀的问题

如果第一，第二个问题没有解决好，第三个问题自然会发生，而且我想还有其他一连串的连锁反映，那么css都采取了哪些手段来解决的，为了突出css的终极目标，必须

严格的做到“内容”和“展现”的分离，要做到“分离”，那就必须将css单独的封装到一个专门的css文件，这样的话，就不光可以做到单个html页面的标签重用，甚至可以多页

面重用，多站点重用。那下一个问题就来了，引用css文件的方式有哪些？？？  哪些是不值得提倡的？

三：css文件的引用方式

1.  link引用

　　当你把css拖入到vs的时候，默认就是link模式，link它本来就是xhtml的一个标签，所以我们还可以用js来动态追加和控制，这个我想大家都清楚，还有一点好玩的地方就

是可以做“候选样式表”，在浏览器中可以动态选择自己想要的样式，比如下面我定义了两个css文件，分别让页面展示 red 和 blue 的背景。

然后我们可以在浏览器中可以动态切换我想要的css样式，蛮有意思的，虽然这种作用相对比较少见，由于截图不好截，大家可以使用 工具栏中的 ”查看“=> "样式"。

2.import引用

同样这个标记也可以导入，就像下面这样。

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

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         @import url(blue.css)

     </style>

 </head>

 <body>

     hello world;

 </body>

 </html>

最后值得一提的是，尽量避免使用“内联样式”的style，如果这样的话，跟使用font，strong这样的标记几乎没有什么区别，就比如下面这样，所以我们尽量避免。

 <!DOCTYPE html>

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

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body style="color: red; margin: 0 auto">

     hello world;

 </body>

 </html>

好了，第一篇大概就这么说了，后续的我们再延伸，周末愉快。

CSS之旅——第一站 为什么要用CSS的更多相关文章

  1. CSS之旅——第二站 如何更深入的理解各种选择器

    上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成 了xml格式,否则的话就是一堆“杂乱无章”的string ...

  2. asp.net mvc 之旅—— 第一站 从简单的razor入手

    记得2011年mvc3刚出来的时候,我们就有幸将 mvc3 用在我们团购项目上,当时老大让我们用一个星期时间来熟悉mvc,幸好园子里面的老朋友DR 正在写mvc3系列,也恭喜这个系列文章被整理成专题供 ...

  3. Javascript之旅——第一站：从变量说起

    工作这几年,js学的不是很好,正好周末有些闲时间,索性买本<js权威指南>,大名鼎鼎的犀牛书,好好的把js深入的看一看.买过这本 书的第一印象就是贼厚,不过后面有一半部分都是参考手册. 一 ...

  4. Sql Server之旅——第一站 那些给我们带来福利的系统视图

    本来想这个系列写点什么好呢,后来想想大家作为程序员,用的最多的莫过于数据库了,但是事实上很多像我这样工作在一线的码农,对sql 都一知半解,别谈优化和对数据库底层的认识了,我也是这样... 一:那些系 ...

  5. llvm之旅第一站 － 编译及简单使用 LLVM 图解

    http://www.nagain.com/activity/article/4/ http://blog.csdn.net/snsn1984/article/details/8593380

  6. 使用css固定table第一列

    .table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: c ...

  7. python第一站

    python 第一站,豆瓣-美国末日评论小爬虫 最近学习python,但是光是看书看视频学习,总是觉得掌握的不够扎实.所以就决定自己去写写爬虫,当带着目的性去学,也许更容易发现自己需要什么.这是酝酿多 ...

  8. Javascript之旅——第二站：对象和数组

    一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组. 一:对象   说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也 ...

  9. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

随机推荐

  1. hangfire+bootstrap ace 模板实现后台任务管理平台

    前言 前端时间刚开始接触Hangfire就翻译了一篇官方的教程[翻译+山寨]Hangfire Highlighter Tutorial,后来在工作中需要实现一个异步和定时执行的任务管理平台,就结合bo ...

  2. 基于.Net Framework 4.0 Web API开发（4）：ASP.NET Web APIs 基于令牌TOKEN验证的实现

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, ...

  3. Java 读取Properties文件时应注意的路径问题

    1. 使用Class的getResourceAsStream()方法读取Properties文件(资源文件)的路径问题:  InputStream in = this.getClass().getRe ...

  4. hibernate----component-entity （人-地址-学校）

    package com.ij34.dao; import javax.persistence.*; @Entity @Table(name="school_inf") public ...

  5. 框架Maven笔记系列 一 基础

    主题:SpringMVC 学习资料参考网址: 1.http://www.icoolxue.com 2.http://maven.apache.org/ 1.Maven解决了什么问题? Maven基于项 ...

  6. Scalaz（40）－ Free ：versioned up，再回顾

    在上一篇讨论里我在设计示范例子时遇到了一些麻烦.由于Free Monad可能是一种主流的FP编程规范,所以在进入实质编程之前必须把所有东西都搞清楚.前面遇到的问题主要与scalaz Free的Free ...

  7. 【转】PHP计划任务:如何使用Linux的Crontab执行PHP脚本

    转:https://www.centos.bz/2011/03/auto-run-task-crontab/ 我们的PHP程序有时候需要定时执行,我们可以使用ignore_user_abort函数或是 ...

  8. 服务 {49A27252-A326-4EF1-B698-6EBC7068833C} 的计时器作业 id {573BE459-DF82-481C-84BD-CA14D287450B} 配置刷新的上一个实例仍在运行，因此将跳过当前的实例。请考虑增加作业之间的时间间隔。

    在SharePoint2007的错误日志中发现大量如下错误: 07/02/2013 16:17:25.99     OWSTIMER.EXE (0x0958)     0x097C    Window ...

  9. Core Animation - 核心动画

    CAAnimation类,是一个抽象类.遵循CAMediaTiming协议和CAAction协议! CAMediaTiming协议 可以调整时间,包括持续时间,速度,重复次数. CAAction协议  ...

  10. iOS之属性修饰符 retain、strong和copy区别测试

    时不时会有点迷惑属性修饰符retain.strong.copy三者之间的区别,还是把测试过程记录下来好一点! 1.属性修饰符结论 2.给retain.strong.copy修饰的字符串属性赋值指针变化 ...