不知道有多少码农和我一样,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. Wijmo 2016 V1 强势发布,全面支持Angular 2

    Wijmo UI控件支持Angular 2 从Angular的1.x时代开始,Wijmo就已经支持Angular了.最近,我们正在和Angular团队合作来支持Angular 2.有趣的是,对Angu ...

  2. 用java实现新浪爬虫,代码完整剖析(仅针对当前SinaSignOn有效)

    先来看我们的web.xml文件,如下 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application ...

  3. mongodb-java-driver基本用法

    1.先下载mongodb-java-driver 目前最新版本是2.9.3 2.下面是基本的CRUD示例代码: package com.cnblogs.yjmyzz.cache.test; impor ...

  4. Captain Icon – 350+ 有趣的矢量图标免费下载

    Captain Icon 是一套一个惊人的免费图标集,包含350+有趣的矢量图标,可以缩放到任意大小而不会降低质量.图标的类别很丰富,有设计,体育,社会,天气等很多类别.提供 EPS.PSD.PNG. ...

  5. ShareDrop – 苹果 AirDrop 服务的 HTML5 实现

    ShareDrop 是苹果 AirDrop 服务的 HTML5 版本,你可以直接在设备之间传输文件,而无需先上传到任何服务器.它使用 WebRTC 来实现安全的点对点文件传输.目前 ShareDrop ...

  6. VS2010在64位系统中连接64位Oracle出现的问题和解决方法

    C#使用System.Data.OracleClient连接Oracle数据库.我的是window7/64位系统,装了一个64位的oralce 11G r2 客户端是64位的 用VS10调试错误信息如 ...

  7. jQuery原型属性和方法总结

    从大四下学期开始了解jquery源码相关的东西,在回校参加毕业典礼(准确的说是参加补考挂科太多)期间便开始借着<jQuery>内幕学习jquery源码,然后在博客园写笔记也已经两个月了,也 ...

  8. CVE: 2014-6271、CVE: 2014-7169 Bash Specially-crafted Environment Variables Code Injection Vulnerability Analysis

    目录 . 漏洞的起因 . 漏洞原理分析 . 漏洞的影响范围 . 漏洞的利用场景 . 漏洞的POC.测试方法 . 漏洞的修复Patch情况 . 如何避免此类漏洞继续出现 1. 漏洞的起因 为了理解这个漏 ...

  9. 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片

    InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...

  10. Asp.net web hosting

      start /D "C:\Program Files\Common Files\Microsoft Shared\DevServer\10.0" /B WebDev.WebSe ...