专题:他们说这叫“面向对象CSS”
昨天结束掉了第二档HTML5+CSS3实战性 质的教程演示连载;篇幅上没有第一档实战教程那么长,讲述的也不是很细, 并且很标题;通过对这两档东东的尾行,至少一些思路和感觉应该建立起来了。
全文共分为5篇,以一个典型的blog首页及文章内页作为目标范例,依次通过整体结构分析、 HTML5标签使用及代码编写、点缀使用CSS3进行样式设置等步骤进行了实战演示。
个人觉得文字甚至没必要看,字也确实不多;照葫芦画葫芦把页面及样式代码从头到尾搞上个一两遍就可以达到学习目的 了。为方便浏览,总结成本专题扔在这边,希望能对大家有些参考价值,欢迎交流指正。
原文参考:Object-Oriented CSS: What, How, and Why
其实是another HTML5+CSS3实战教程。之前的一篇中,我们学习了页面侧边栏的样式定义,整个目标范例的首页基本搞定;今天来看看内页方面的东东。
复制之前的首页文件,并重命名为“post.htm”。内页的整体结构与首页基本相同,头部与侧边栏保持不变,主要内容部分由文章列表变成单篇文章,并且增加了评论列表及评论表单等元素。
复制以下代码,将当前post.htm中的<header>及主要内容部分的<section>容器整体替换掉:
其实是another HTML5+CSS3实战教程。昨天开始了样式方面的话题,围观了主要内容部分的样式设定,主样式表styles.css也开始有些样子了。今天继续,来看侧边栏。
再次参考一下目标范例页面,我们可以观测到侧边栏主要由两部分组成:
- 按发布时间归档的文章列表
- 近期评论列表,包括评论内容及内容信息等
首先,我们可以把它们同等的作为侧边栏内容容器,定义一个名为.side-box的class,并设置样式:
其实是another HTML5+CSS3实战教程。之前一篇里面,我们了解了这轮学习的目标页面范例以及相应的页面代码,对整体布局的HTML5用法也做了简要的解释;今天开始进入样式方面的话题。
在之前一篇的页面代码范例中,我们可以看到该页面一共调用了3个样式表:reset.css、text.css和styles.css;其中reset.css就是Eric Meyer的样式重置方案;text.css用来定义一些文本元素的基本样式,我们来看下它的代码:
其实是another HTML5+CSS3实战教程。昨天我们起了个头,看了作者对他所定义的“面向对象CSS”的概述;天上一句地上一句的且不管他,今天来实际看看究竟要搞怎样的飞机。
这个“Object Oriented CSS”页面是最终成品图,也就是我们的目标范例。和之前一档HTML5+CSS3实战类似,都是用这样的Blog文章列表形式的页面来做示范,比较典型;如果慢慢的看到这样的页面时脑海里能用新的HTML5元素标签建立起一套轮廓来,那是很好的事情来;这也是反复用小实战演示的方法来学习的一个目的之一。
推荐到目标页面中使用firebug一类对应实际样式查看代码;我拿来放在下面先:
时隔半月,我的coder人格继续来学习业务知识;这次来翻一翻学一学的是来自nettuts+的“Object-Oriented CSS: What, How, and Why”;可以看到,作者标题到一定程度了,不过仍是值得学习参考的HTML5+CSS3实战性质的流程范例。他们说这叫“面向对象CSS”,我姑且就这么翻着了;开搞。
什么是面向对象CSS?
所谓面向对象CSS,本质上讲,就是编写更加简洁高效的CSS;代码方面仍是我们熟识和热爱的那个CSS,只是在这里用一种新的说法来代表这类简洁的CSS模式及实践方式。(作者一上来就主动揭露了自己标题的本质,很坦诚也很嚣张;继续看)
