这是去年看到的一片文章，感觉在我的学习中，有不少的影响。于是把它分享给想很快了解css的兄弟们。
基础篇
[知识一] “DIV+CSS” 的叫法是不准确的
[知识二] “DIV+CSS” 将你引入两大误区
[知识三] 什么是W3C标准？
[基础一] CSS如何控制页面
[基础二] CSS选择器
[基础三] CSS选择器命名及常用命名
[基础四] 盒子模型
[基础五] 块状元素和内联元素
实战篇
[第一课] 实战小热身
[第二课] 浮动
[第三课] 清除浮动
[第四课] 导航条(上) | 导航条(下)
[大练习] 前四节课大练习
[第五课] 浮动布局之结构设计 | 浮动布局之表现设计
[第六课] 定位
[第七课] 定位应用
[第八课] CSS Hack
技巧篇
[单张图片按钮实例]
[首行文字两文字缩进]
在整个教程的最前面必须先给大家纠正一个错误，就是“DIV+CSS”！
“DIV+CSS”这种叫法其实是一种不准确的叫法，是国人给这种布局标准页面的方法起的名字，是对技术理解不够透彻导致的，而标准的叫法是什么呢？呵呵，没错，是xHTML+CSS！，为什么会叫xHTML+CSS等你学完后面的“知识二”和“知识三”后就明白了，现在讲一下下面这个问题：
为什么国人将这种布局标准页面的方法叫做DIV+CSS？
因为第一个将这种技术引进中国的人，对这门技术理解不够透彻，单纯从代码上辨别过去的页面布局方法和现在流行的页面布局方法，认为过去布局页面用的是Table，称之为“Table+CSS”，而现在布局页面呢，用DIV，所以叫DIV+CSS。
听起来也挺合理，岂不知这种叫法误导了绝大部分的网页开发者，认为这样布局出来的页面也就是标准页面，就是符合W3C标准的页面，更甚者走了极端，看到网站上用到Table，就会嘲笑页面做的不够标准，结果用不用Table成为了判定页面是否标准的关键点。还有另外一种极端，将页面中用到的标签全部换做DIV，那就更是大错特错了。
“DIV+CSS”叫法将网页制作者引入两大误区
【误区一】网页中用了Table，页面就不标准，甚至觉着用Table丢人，Table成为了判定页面是否标准的关键点。
【误区一】认为网页中的DIV标签用的越多越好，甚至有人将页面中所有的标签都替换为DIV，DIV的多少，决定页面标准的程度。
为了能够避免大家进入误区，必须要了解“Table”和“DIV”这两个网页元素诞生的目的，首先Table诞生的目的是为了存储数据，而DIV诞生的目的就是为了架设页面结构，两者有不同的工作职能，当我们存储数据的时候用Table是最方便快捷的，比如W3Cfun.com的一个主题页面“浏览器大全”，
地址是：http://www.w3cfuns.com/portal.php?mod=topic&topicid=6，
这个时候肯定用Table最合适了，而表格外面组成页面结构的部分当然用DIV了，这是由他们两个诞生的目的决定的，也是符合W3C标准的， 那么这个页面就是标准页面。
既然是标准页面，标签各干各的活“各司其职”，Table就用来存储数据，怎么用Table就丢人了呢？怎么就不标准了呢？DIV就用来构架页面结构，怎么会用的越多越标准呢？归根结底就是“DIV+CSS”的叫法导致。
我们平时说的W3C，其实是World Wide Web Consortium的缩写，中文是W3C组织或者万维网联盟，W3C这个组织做什么的呢？很简单，就是出网页标准的。那么有W3C组织出的标准就被称为W3C标准，那么符合W3C标准的页面就是标准页面了，好，问题来了~
什么是W3C标准？
【注意】下面对W3C标准的解释，需要理解一下，因为在很多Web前端开发工程师面试的时候会遇到这方面的问题，很多企业在面试一些Web前端技术人员的时候，认为如果连什么是W3C都不知道，那做出来的页面肯定就不能够符合W3C标准，所以要求大家留意下！
W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：结构标准、表现标准和动作标准。与结构标准对应的代表语言是xHTML，与表现标准对应的代表语言是CSS，与动作标准对应的代表语言是JavaScript。
当我们将一个成品的网页设计制作成一个静态页面的时候，就要符合前面两种标准，结构标准和表现标准，那么制作出来的页面就是标准页面，用他们相对应的语言来描述这种制作标准页面的技术我们就称之为“xHTML+CSS”！
【总结】知识一、知识二、知识三是大家必须知道的，知道了这些无论去面试还是和其他人沟通，都会让对方感觉你这个人很专业，对技术理解很透彻！
“你必须知道的知识”讲完了，后面我们就要讲“你必须掌握的基础”，内容不多，但是一定要细看，理解透彻了，这样对后面的“实战篇”才能够起到很好的促进作用，加油！同学们！
本节主要讲解，两个内容：
第一：CSS如何控制页面样式，有几种样式；
第二：这些样式出现在同一个页面时的优先级。
使用xHTML+CSS布局页面，其中有个很重要的特点就是结构与表现相分离，结构指xHTML页面代码，表现就是CSS代码了，如果把一个网页看成穿着衣服的人的话，人就是xHTML，是结构，而衣服呢就是CSS，是表现，现在出现的问题是，如何让CSS去控制页面？或者说，如何让衣服穿在人身上；不同的CSS就可以使页面出现不同的风格适用不同的网站，而不同的衣服，人穿上后就会体现出不同的职业。
第一：如何让CSS去控制HTML页面？
有4种样式(方式)，行内样式、内嵌样式、链接样式、导入样式
1）行内样式
行内样式是4种样式中最直接最简单的一种，直接对HTML标签使用style=""，例如：
虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。
2）内嵌样式
内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</title>
<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
a{color:#FFF;}
img{float:left;第五篇：白话tornado源码之褪去模板的外衣 - 武沛齐 阅读原文»上一篇《白话tornado源码之请求来了》介绍了客户端请求在tornado框架中的生命周期，其本质就是利用epoll和socket来获取并处理请求。在上一篇的内容中，我们只是给客户端返回了简单的字符串，如：“Hello World”，而在实际开发中，需要使用html文件的内容作为模板，然后将被处理后的数据（计算或数据库中的数据）嵌套在模板中，然后将嵌套了数据的html文件的内容返回给请求者客户端，本篇就来详细的剖析模板处理的整个过程。
概述
上图是返回给用户一个html文件的整个流程，较之前的Demo多了绿色流线的步骤，其实就是把【self.write('hello world')】变成了【self.render('main.html')】，对于所有的绿色流线只做了五件事：
- 使用内置的open函数读取Html文件中的内容
- 根据模板语言的标签分割Html文件的内容，例如：{{}} 或 {%%}
- 将分割后的部分数据块格式化成特殊的字符串（表达式）
- 通过python的内置函数执行字符串表达式，即：将html文件的内容和嵌套的数据整合
- 将数据返回给请求客户端
所以，如果要返回给客户端对于一个html文件来说，根据上述的5个阶段其内容的变化过程应该是这样：
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.render("main.html",**{'data':['11','22','33'],'title':'main'})
[main.html]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>{{title}}</h1>
{% for item in data %}
<h3>{{item}}</h3>
{% end %}
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>{{title}}</h1>
{% for item in data %}
<h3>{{item}}</h3>
{% end %}
</body>
</html>第1块：'<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><h1>'
第2块：'title'
第3块：'</h1> \n\n'
第4块：'for item in data'
第4.1块：'\n <h3>'
第4.2块：'item'
第4.3块：'</h3> \n'
第五块：'</body>''def _execute():
_buffer = []
_buffer.append(\\'<!DOCTYPE html>\\n<html>\\n<head lang="en">\\n<meta charset="UTF-8">\\n<title></title>\\n</head>\\n<body>\\n<h1>\\')
_tmp = title
if isinstance(_tmp, str): _buffer.append(_tmp)
elif isinstance(_tmp, unicode): _buffer.append(_tmp.encode(\\'utf-8\\'))
else: _buffer.append(str(_tmp))
_buffer.append(\\'</h1>\\n\\')
for item in data:
_buffer.append(\\'\\n<h3>\\')
_tmp = item
if isinstance(_tmp, str): _buffer.append(_tmp)
elif isinstance(_tmp, unicode): _buffer.append(_tmp.encode(\\'utf-8\\'))
else: _buffer.append(str(_tmp))
_buffer.append(\\'</h3>\\n\\')
_buffer.append(\\'\\n</body>\\n</html>\\')
return \\'\\'.join(_buffer)
'
没有评论:
发表评论