仓酷云

标题: 来谈谈：CSS界说题目的实例解说 [打印本页]

作者: 柔情似水 时间: 2015-1-16 00:16
标题: 来谈谈：CSS界说题目的实例解说
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
复杂的款式

利用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;
}

登录/注册后可看大图

2008041123463008.jpg (9.9 KB, 下载次数: 7)

下载附件保存到相册

来谈谈：CSS界说题目的实例解说

2015-1-16 00:16 上传

-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：带有图标的题目
轻松晋级

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

-9：A13×13点巨细的通明图标（缩小的）
透过图标中通明的部分，我们再次利用烦琐的CSS中background属性设置想让它显露出来的色彩。别的我们还想让色采仅仅呈现在图标的前面，而不影响到题目的笔墨，因而我们又用上面的办法将划定规矩仅施加于包括在<h3>内的<img>标签。
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文件中，假如未来要晋级，那将能够十分简单的更换。

标准的选择器不能格式化一个元素内容的第一个字母或者第一行，而伪元素选择器能实现

作者: 小女巫 时间: 2015-1-18 05:51
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 仓酷云 时间: 2015-1-25 14:07
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 透明 时间: 2015-2-2 22:28
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 乐观 时间: 2015-2-8 16:09
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 分手快乐 时间: 2015-3-8 07:49
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 海妖 时间: 2015-3-15 22:25
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 山那边是海 时间: 2015-3-22 17:10
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

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