来看看：网页制造教程:面向工具的CSS使用
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。网页制造poluoluo文章简介：网页制造教程:面向工具的CSS使用.
甚么是面向工具的CSS
框架？工具？哲学？
Object-orientedCSSisacodingparadigmthatstyles"objects"or"modules"—nestable
chunksofHTMLthatdefineasectionofawebpage—withrobust,reusablestyles.
很像言语的退化
令CSS更壮大
有甚么分歧？
ul{...}ulli{...}ullia(②可是，布局在这里){①直至如今，我们只体贴这里}CSS约莫2005
意年夜利面条
CSS约莫2008
略微好一点
而不是使我们的代码变好
我们筑了年夜栅栏
功能呢？
公认的毒药中央
网站变慢
文件巨细和HTTP哀求未作优化
CSS约莫2009
面向工具的CSS
功能的最好理论、可扩大性、和最主要的-简单利用
[*]创立工具而不是页面或模块
[*]在内容工具上设置好的公用默许值
[*]笼统重用元素
[*]分别布局和皮肤(为两个class)
[*]分别容器和内容(开放的编纂区)
[*]利用承继
[*]对看起来OO的使用多个class
9条最好理论
[*]组件库：可重用和冗余
[*]分歧性：制止地位依附(location-dependent)的款式
[*]笼统化
[*]优化图象和sprites
[*]天真
[*]学会爱栅格
[*]制止非尺度的扫瞄器字体
[*]制止高度对齐(alignment)
[*]审慎矫饰你的手艺(chooseyourblingcarefully)
9个圈套
[*]地位依附的款式
[*]制止指定一个class的标签
[*]制止用ID界说主内容地区内的款式
[*]制止不划定规矩背景上暗影和圆角
[*]不要拼合一切图片(触发只要多数几个页面)
[*]制止高度对齐
[*]笔墨就是笔墨，不要做成图片
[*]冗余
[*]制止过早优化
创立组件库
可重用的“乐高积木”
重用元素使得它们
功能“收费”
组件就像乐高积木
组兼并婚配来创立分歧的和风趣的页面
从组件库创立HTML
新的页面一样平常不必要分外的CSS
题目
依据你必要的语义来完成你想要的体现
列表
必需对页面中的一切模块可用
SIDE-WIDELOGES
[*]题目
[*]列表(好比actionlist,externallinklist,productlist,或featurelist)
[*]模块headers和footers
[*]栅格
[*]按钮
[*]圆角boxes
[*]Tabs,Carousel,toggleblocks
制止反复
在不克不及增添代价的元件上华侈功能资本
近似不异的模块
h3和h5太类似了
履历法例：
假如一个页面中的两个模块看起来太类似，它们在一个站点中太类似，选择一个！
例子
Yahoo!团体财经
2+分歧的tab作风。能用不异的图象吗？
3个元件的表面太类似了。选择一个。
模块宽度、背景致或背景图片的改动是个很好的模块复用的例子。
制止地位依附(location-dependent)的款式
沙盒比意年夜利面条好，不外引发了功能成绩
制止甚么？
运转地区
不时…
前往直径
损坏
在CSS中我们一向这么做
损坏
欠好的：
#weatherModuleh3{color:red;}#tabsh3{color:blue;}
[*]h3的全局色彩不决义，将招致
[*]在新模块中没有界说款式
[*]开辟者自愿为不异的款式写更多CSS
保举：
h3{color:black;}#weatherModuleh3{color:red;}#tabsh3{color:blue;}
[*]界说了全局色彩(更好！)
[*]Weather和tabs掩盖了缺省的h3
[*]h3的3种款式在统一模块中不克不及并存
[*]缺省款式不克不及用在weather和tabs除非有更高的优先级
[*]Weather和tabs的h3永久不克不及在其他模块中利用
分歧性
写更多划定规矩往重写之前的猖狂划定规矩。
好比题目在恣意模块的体现是可预感的。
用这个来取代
h1,.h1{...}h2,.h2{...}h3,.h3{...}h4,.h4{...}h5,.h5{...}h6,.h6{...}
[*]界说全局值
[*]遵守语义(同时同意天真的视觉)
必要凌驾6个题目？
真的吗？没有反复？没有类似的？
仍旧必要更多题目？
.category{...}.section{...}.product{...}.prediction{...}
[*]经由过程工具自己的class扩大题目工具
[*]制止利用承继来改动嵌套工具的体现
笼统
复用代码段
反复编码
是笼统分歧水准的语义失利所招致的
分别：
[*]容器和内容
[*]布局和皮肤
[*]表面和背景
[*]工具和夹杂物
分别容器和内容
界说每一个工具的界线
开放的编纂区
图象或flash
夹杂与婚配
容器和内容工具到达高功能计划
分别表面和背景
外部通明！
MAKINGITLOOKFAB
必要当心选择像素
思索PNG8来渐进加强
圈套
可变的或突变背景
防备圆角后的可变或突变背景
分别布局和皮肤
两个独自的class
示例：模块
布局
Slovesborwserbugs,positionspresentationalelems,andgenerallydoestheheavy
liftingofCSS
皮肤
弄大度些。
方针长短常明白的皮肤，庞大的被布局工具和跨网站共享所吸取(Thegoalisverypredictableskins,complexityis
absorbedbythestructureobjectandsharedacrossthesite)。
/*-----simple(extendsmod)-----*/.simple.inner{border:1pxsolidgray;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}.simpleb{*background-image:url(skin/mod/corners.png);}
甚么属于皮肤？
皮肤的每一个值应当是断定的，简单展望并丈量。
[*]色彩
[*]边框
[*]图象
天真性
可延伸的高度和宽度
流动尺寸
Limitthewaysinwhichamodulecanberesued
学着爱上栅格
深信其会很美
教授OOCSS
给计划师和工程师
天然改善
从复杂到庞大的义务
一个实在案例
GonzaloCorderoYahoo!前端开辟工程师
必要思索的计划要素
[*]跨扫瞄器兼容
[*]多言语撑持
[*]可会见性
[*]定时完玉成部结构和功效
狐疑
WEB让步
[*]为何“复杂的东东”变庞大？
[*]为何要让步？
[*]为何我们不克不及依流动的划定规矩和布局？像讲台上那样？
OOCSSSAVESTHEDAY
[*]单个复杂的标签布局
[*]跨扫瞄器撑持(乃至IE5.5！)
[*]十分少的CSS
[*]可剥离的，简单使用在多个计划上
译注
这不单单是OOCSS！
本文内容来历于：
[*]ObjectOrientedCSS高清视频下载
[*]WhatisObjectOrientedCSS?
[*]TheFastAndTheFabulous
[*]TheCascade,Grids,Headings,andSelectorsfromanOOCSSPerspective,AjaxExperience2009
[*]AfterYSlow“A”
[*]DesignFastWebsites
</p>
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
页:
[1]