阅读笔记 | 《CSS标准网页布局开发指南》

《CSS标准网页布局开发指南》

书籍《CSS标准网页布局开发指南》

阅读方法:王者速读法

阅读目的:工作需要;专业性的知识,已经阅读过几次,长时间没用也忘记的差不多了,需要重新拾起来,也想做一个系统性的笔记梳理。

第一阶段,预览

要明确目的的解决问题

第一,想获得什么信息。专业基础知识,长时间没用,从知识、到思维都需要梳理梳理。

第二,能获得什么信息。基础而全面的CSS知识,简单的Web标准及XHTML书写规范知识,配合Dreamwerver编辑工具,丰富的CSS实例及效果展示。

第三,明确重点内容。CSS核心知识,CSS语法及书写规范、CSS各种布局和容器属性等;HTML各种属性记不住不要紧,CSS核心逻辑及布局、容器原理要弄懂。

具体阅读

1.封面。「配合W3C的Web标准」,「详细讲解常用CSS属性」,「实例丰富,难点解决,注意浏览器兼容性」;陈刚编著。

2.版权页。2007年6月出版;内容简介对全书内容做了概括。

3.编辑寄语及前言。对全书内容及特点做一个概括性阐述。

4.目录。共13章,目录已经把内容分为四大部分。第一部分第1章到第3章,CSS布局基础知识;第二部分第4章到第9章,CSS页面布局技巧;第三部分第10章和第11章,整站的CSS定义技巧;第四部分第12章和第13章,实例制作。

总结

对CSS内容有一定的熟悉,以前已经读过类似的书,不过不够系统和深入,需要进行专业知识的梳理。5分钟要浏览完所有的封面、前言、目录有一定的难度,尤其许多知识还不是很熟悉,太多内容都在目录上了,领会目录都感觉领会大半本书了。

第二阶段,快速翻阅全书

对图表的印象

翻阅所有的书页,标题、图表、照片等最显眼的内容基本都看不过来,抽样阅读统计性整体印象,全书的图片有图序,也有标题,图片基本上是实例效果图,绝大部分内容来不及看。

对章节内容的印象

全书400多页,5分钟翻页时间都不够,基本就跟浏览目录差不多,一不小心容易停下来看小标题,就不能按照阅读法要求快速地翻页了。要说对章节内容的印象,还真的不好说,因为真的看不完,翻不过来。

总结:

书本内容比较丰富,尽管对内容有一定的熟悉,翻页阅读翻都翻不过来,更别说浏览阅读了,这时候已经不是抓取知识,而是通过视觉效果来使脑海的知识浮现出来。可以预见,20分钟跳读是没法做到的了,必须要更多的时间来抓取重点内容,系统性内容,而不只是几个单独的知识点。

第三阶段,跳读

第1篇 CSS布局基础知识

第1章 Web标准布局的本质

Web标准可以分为结构标准语言(如HTML)、表现标准语言(如CSS)和行为标准(如JavaScript)3个方面。

比如对于网页布局,传统布局使用table元素进行布局,而Web标准布局则是结构(内容,页面是HTML等)和表现(外观效果,使用CSS来实现)。

重点:Web标准。

第2章 XHTML书写规范

XHTML是HTML的发展,用来呈现网页内容文档结构,也是标记语言,由元素和元素属性组成,语法结构跟HTML差不多。

XHTML主要元素:body元素,文本元素如div、p、标题,修饰元素如hr和img,链接元素a,列表元素如ul,表单元素如form,表格元素如table。

XHTML元素的主要属性:每个元素都有相关的属性。

第3章 CSS基础与书写规范

一个CSS样式的语法由3部分构成:选择符(selectors)、属性(property)和属性值(value)。基本语法:selector{property:value}。

常用的选择符:通配选择符(「*」)、类型选择符(元素标签)、包含选择符(以空格连接)、ID选择符(以「#」定义)、类选择符(以「.」定义)、分组选择符(以「,」分割)。

主要属性分类:字体属性、文本属性、背景属性、定位属性、尺寸属性、布局属性、边界属性、边框属性、补白属性、列表项目属性、表格属性。

伪类基本语法:selector:伪类{property:value}。

CSS选择符的属性具有继承性。

注意CSS命名规范和样式表推荐书写顺序。

理解CSS的块元素和内联元素概念,熟记基本的块元素和内联元素,记不住要懂得如何验证一个元素是块元素还是内联元素的方法(根据原理反验证)。在第5章会讲到,CSS的块元素和内联元素可以通过display属性进行转换。

第2篇 CSS页面布局技巧

第4章 网页头部元素的详细定义

网页头部元素的定义重点需要掌握文档类型(DOCTYPE)的选择、meta标签的定义、CSS调用的方法和优先级问题。

在页面中插入样式表的方法有4种:(1)链入外部样式表,基本语法:<link rel="stylesheet" type="text/css" href="样式表文件的地址">;(2)内部样式表,基本语法:<style type="text/css"> selector{property:value} selector{property:value} </style>;(3)内嵌样式,基本语法:<HTML标记 style="property:value;…">;(4)导入外部样式表,使用@import声明导入,很少使用。

样式应用的优先级:内嵌样式>样式表样式,其原理是样式在应用的时候,离标签越近的样式优先级越高,即遵循最近最优先原则。这一点,最好多做几次试验验证。

选择符优先级:ID选择符>类选择符>类型选择符。

第5章 CSS基本布局属性

理解页面的流结构(元素默认排列方式),在此基础上理解浮动属性定位和定位属性定位。

浮动属性定位通过使用float属性进行定位。注意:float属性是没有继承性的属性。

定位属性定位包括3个方面:定位模式(position属性)、边偏移(top、right、bottom、left四个属性)和层叠定位元素(z-index)。position属性有static、relative、absolute、fixed几个值,使用定位属性定位至少要定位模式和边偏移一起使用。

难点:使用position定位时,水平居中和垂直居中。

页面的背景设定通过有关背景的综合属性(background属性)设定,也可以分开背景颜色、背景图像、背景位置、背景重复等属性进行设定。

CSS的display属性可以控制内容的显示,是一个不可继承的属性。接第3章,CSS的块元素和内联元素可以通过display属性进行转换。

实践:使用CSS和列表(ul和li)制作横向和纵向的菜单,进而制作页面的头部(header,一般包括菜单menu和banner两个部分)。

第6章 CSS容器属性

CSS的容器属性是指CSS盒模型属性。CSS盒模型是指在CSS中所有的文档元素都是一个矩形框,就像一个盒子,由内容(width和height定义)、内边距padding、边框border和外边距margin组成。

拓展:盒模型和块元素、内联元素的关系;自适应原理及实现。

实践:根据盒模型,制作页面的框架。

第7章 CSS定义文本属性

掌握文本的缩进和对齐、行高(line-height)与间隔、字体的综合属性、文本的修饰属性(text-decoration)、链接样式的定义、水平和垂直居中等。

第8章 元素的修饰和CSS常见应用

掌握图片、表单、表格等常用元素的修饰,掌握各种圆角框的制作和下拉菜单的实现。

第9章 浏览器及兼容问题

掌握解决浏览器兼容问题的原理。

解决浏览器兼容性问题一般可以遵循两个原理:使用CSS hack;使用兼容属性。

第3篇 整站的CSS定义技巧

第10章 关于整站样式表的分析

主要需要掌握规划样式表的方法、重复使用样式的技巧,简化页面结构。

规划样式表要遵循使用方便的原则,可以独立一个样式表,也可以使用多个样式表(规划方法)。

第11章 关于标准的校验

掌握标准校验的方法、常见错误以及修正的方法。

标准的校验分为结构(内容)部分的校验和表现CSS校验。

标准的校验可以通过输入网址、上传文件等方法在线校验,也就是通过工具来进行校验。

第4篇 实例制作

第12章 一个英文网站的制作和第13章使用Dreamweaver制作中文网站,是两个大的实例,通过实践掌握编写代码的方式、制作站点的流程、站点结构、样式规划、Dreamweaver工具的使用等知识。

总结

本书知识全面,内容丰富,知识点多,重点要掌握CSS基本语法、元素属性、盒模型、定位、布局应用,掌握文本、链接等元素的修饰和菜单等网站组件的制作,然后通过大型实例学习网站站点的制作。

特别的,本书每一章都有对一章知识点的说明,以及学习目标和重点内容的提示,对读者掌握一章的内容起到很好的指导作用。CSS注释跟HTML注释不同,CSS注释的方法为:/*需要注释的内容*/。

最后,应用王者阅读法阅读本书,我是做不到了,至少第三部分,我花了快两个小时看完,仍然看得很粗略,不过重点内容应该是抓住了,感觉经过王者阅读法的训练,阅读效率还是很不错的。

关于王者阅读法的实践,还可以阅读以下文章:


1.阅读笔记 | 《「微信+」时代:再小的个体也有自己的品牌》

2.阅读笔记 | 《引爆社群:移动互联网时代的新4C法则》

3.阅读笔记 | 《草根自媒体达人运营实战》

4.阅读笔记 | 《玩转微信》

5.阅读笔记 | 《HTML网页设计参考手册》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,599评论 0 30
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,499评论 32 459
  • 一路初阳一路红,驱车共与出城东。 车窗贯入两边风。 不觉盘山寻老路,幸亏迷径问青童。 从朝至暮乐融融。
    雪窗_武立之阅读 315评论 4 5
  • 图文/莫遥 (≧ڡ≦*) ❥ 陕十三 “这里不是书店,请揣着吃货的心情进来。”门口就贴着这样一个标语。比书店更沁人...
    莫遥1114阅读 395评论 1 2