仓酷云

标题: DIV教程之web尺度化用CSS界说题目的几个实例 [打印本页]

作者: 若相依 时间: 2015-1-16 00:25
标题: DIV教程之web尺度化用CSS界说题目的几个实例
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。

原文：WhatistheBestWaytoMarkuptheTitleofaDocument?
申明：本文是《WebStandardsSolutions:TheMarkupandStyleHandbook》一书中的一章。书号：ISBN:1590593812。我们会连续翻译此书中有代价的章节。
原DanCederholm
翻译：阿宏

复杂的款式

利用CSS，最简单做的事变就是给我们的题目设置分歧的字体款式。我们能够创建一个CSS划定规矩，它将把款式使用到页面中呈现的一切<h1>标签（大概是全部站点，当利用一个内部款式表的时分）。随后，假如我们想要改动全部站点上一切呈现<h1>标签的中央的色彩、尺寸、字体的话，我们一切必要做的事变就是修正一些CSS划定规矩，然后它们将当即改动。听上往十分勾引人，不是吗？
让我们熟悉一下我们本人的超等酷的题目：
<h1>SuperCoolPageTitle</h1>用CSS改动色彩、字体和尺寸：
h1{
font-family:Arial,sans-serif;
font-size:24px;
color:#369;
}页面上一切找到<h1>的中央都将使用Arial字体（大概是缺省的sans-serif字体）、24点巨细和兰色，就象-2显现的。

-2：使用款式后的题目
接着，让我们在笔墨的上面增添一条1点宽的灰色边框，以加强明晰度（看-3）：
h1{
font-family:Arial,sans-serif;
font-size:24px;
color:#369;
padding-bottom:4px;
border-bottom:1pxsolid#999;
}

-3：带有灰色下边框的款式化题目
我们在笔墨的下方增添了一点补白，来让线条四周宽松一点。因为题目是一个块级元素，以是它的界限不单单到笔墨，而是与页面的程度宽度天真的坚持分歧。
值得指出的是，这个出格的创立边框的办法是一个由三部分构成的语句：宽度、式样、色彩。试着改动它们的值，看看会发生甚么分歧的效果。
增添背景

背景能够加强题目的整齐效果。增添一点补白和背景色彩，我们就有了一个不必要图片的，但又很有模样的题目。以下：
h1{
font-family:Arial,sans-serif;
font-size:24px;
color:#fff;
padding:4px;
background-color:#696;
}我们把笔墨改成红色，四周加上4个点的补白，再把背景改成绿色。就象-4显现的那样，这能够创建一个悦目的绿色条来横贯页面，分开段落。

-4：带有背景致和补白的题目
背景和边框

在题目上面增添一个窄窄的边框，加上淡淡的背景致，你可以创立一种三维的效果，却不需利用图片。
这个CSS和后面的例子很类似，仅仅改动一点色彩和在底部增添一个2点宽的边框。
h1{
font-family:Arial,sans-serif;
font-size:24px;
color:#666;
padding:4px;
background-color:#ddd;
border-bottom:2pxsolid#ccc;
}试着创立各类分歧的同色暗影，发生的平面效果如-5显现。

-5：带有背景和下部边框的题目
平展的背景

当背景图片被一同到场后，就变得更富有制造性了。用Photoshop大概你喜好的图片编纂器，创立一个10*10的图片，图片的顶部有玄色的边框，突变的灰色一向究竟部，象-6显现的。

-6：A在Photoshop中创立10×10点巨细的图片（被缩小了）
我们能够用CSS把这个极小的图片平展在<h1>的底部：
h1{
font-family:Arial,sans-serif;
font-size:24px;
color:#369;
padding-bottom:14px;
background:url(10x10.gif)repeat-xbottom;
}repeat-x会关照扫瞄器仅在程度偏向平展（repeat-y将在垂直偏向平展）。我们再把图片设置在bottom，又增添了分外的padding-bottom，我们能够调治平展的图片和下面笔墨之间的间隔。（看-7）

-7：带有平展背景的题目
可交换的图标

处置行内的粉饰性圆点和图标时，作为取代硬编码的体例，我们能够持续利用CSS的background属性来把图标设置在笔墨右边。这个办法能够敏捷的改动全部站点的lookandfeel――晋级一个CSS文件从而立即改动全部站点的页面。
代码和后面平展典范很类似：
h1{
font-family:Arial,sans-serif;
font-size:24px;
color:#369;
padding-left:30px;
background:url(icon.gif)no-repeat050%;
}这里，我们在右边留出了分外的空间（在那儿我们将显现一个图标），设为no-repeat，是为了让背景图片只显现一次（看-8）。我们把它安排在间隔首部0点和间隔顶部50%的地位上。

-8：A：带有图标的题目
轻松晋级

假想如许一个情形来取代后面的例子，我们已在一个包括100个文档的站点顶用FIRSTIMPRESSION</h3>我们用这类办法编码有两个缘故原由。一个缘故原由是，有林林总总的图标，它取决于题目的主题（念书俱乐部的一本书，引号标志着天天的援用，等等）。第二个缘故原由是，事先，我们每月城市依据以后刊行的杂志封面来改换全部站点的配色计划。这类改换要成为大概，固然要用CSS。
要让这些图标跟着页面上别的元素一同变更色彩，其实不必要每次都创立新的图标。我们创立一个仅利用两种色采的图标：红色和通明色（变更的色采将被显露出来）。-9显现了这些图标中的一个例子，它们被利用在首页上的逐日弁言中。

-9：A13×13点巨细的通明图标（缩小的）
透过图标中通明的部分，我们再次利用烦琐的CSS中background属性设置想让它显露出来的色彩。别的我们还想让色采仅仅呈现在图标的前面，而不影响到题目的笔墨，因而我们又用上面的办法将划定规矩仅施加于包括在&l

12下一页

这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了

作者: 若相依 时间: 2015-1-16 00:34
标题: DIV教程之web尺度化用CSS界说题目的几个实例
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
t;h3>内的<img>标签。</p>h3img{
background:#696;
}后面的代码断定了一切包括在<h3>内的<img>标签都有一个绿色的背景。色采透过图片的通明部分显现出来，而红色的部分仍旧坚持红色。每月，我们都能用一个分歧的色采值来晋级CSS划定规矩，从而改动全部站点中的每一个题目和相干联的图标的色采。这就象变把戏！
对齐<img>标签

为了让图标和文本准确的排齐（我们想让它垂直居中），我们到场了以下CSS划定规矩：
h3img{
background:#696;
vertical-align:middle;
}
如许包管了包括于<h3>标签中的图片对齐于它的文本中点。-10显现了题目的效果。

-10：使用CSS背景的通明图片的效果
这个办法另有另外一个值得注重的中央――不仅能够用一个独自CSS代码块来指定图片面前要显现出的背景色彩，一样也能够在CSS代码块的外部指定。
举个例子，让我们回到后面“可交换的图标”例子，增添一些背景致彩：
h1{
font-family:Arial,sans-serif;
font-size:24px;
color:#fff;
padding-left:30px;
background:#696url(transparent_icon.gif)no-repeat050%;
}
transparent_icon.gif将安排在我们在后面所指定的色采下面，用的是一样的划定规矩（看-11）――这里是#696，一个心爱的绿色。

-11：带有背景图片和色采的题目
这个技能使得安排一些与页面色采相干联的小圆角大概粉饰性的图片变得出格的便利。这些非必需的图片被完整的包括在CSS文件中，假如未来要晋级，那将能够十分简单的更换。

</p>

上一页12

表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

作者: 不帅 时间: 2015-1-18 06:45
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 海妖 时间: 2015-1-26 23:18
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 变相怪杰 时间: 2015-2-5 03:57
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 因胸联盟 时间: 2015-2-11 04:51
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 莫相离 时间: 2015-3-11 01:33
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 蒙在股里 时间: 2015-3-17 18:11
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 飘灵儿 时间: 2015-3-24 21:36
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

欢迎光临仓酷云 (http://ckuyun.com/)