DIV+CSS架构教程,大家一起学

小兵 · 发表于 2006-11-11 16:47

现在什么网站都转成DIV+CSS架构,大势所趋,偶也硬着头皮上了,和大家一起从基础开始学吧HTM我就不多说了,自己研究去.主要说CSS样式了一.CSS初级指南就如 <abbr title="HyperText Markup Language">HTML</abbr>初级指南，<acronym title="Cascading Style Sheets">CSS</acronym>初级指南假设你对CSS一无所知。这个指南的目的是教授CSS的骨干元素──已经可以足够让你来开始学习了。CSS中级指南和CSS高级指南将探讨CSS的更深层次。CSS，或Cascading Styles Sheets，中译层叠样式表或级联样式表，是样式化HTML的一种方法。HTML是文档的内容，则样式表是文档的表现，或者说外观。无论闻起来还是尝起来，样式表一点都不像HTML。它们有着这样的格式：“属性：值(property: value)”，而且大部分属性可以应用到HTML标签中去。 二.应用CSS──把CSS 应用到HTML 中的不同方法。  有三条途径可以把<acronym title="Cascading Style Sheets">CSS</acronym>应用到<abbr title="HyperText Markup Language">HTML</abbr>中去。<h2>内联</h2>内联样式通过<code>style</code>属性直接套进HTML中去。看起来像这样：<pre><code>text</code>  </pre>这将会是指定的段落变成红色。我们的建议是，HTML应该是独立的、样式自由的文档，所以内联样式无论在什么情况下都应该尽量避免。<h2>内部</h2>内部样式服务于整个当前页面。在头标签<code>head</code>里面，样式标签<code>style</code>里包含当前页面的所有样式。看起来像这样：<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code>   <code><html></code>   <code><head></code>   <code><title>CSS Example</title></code>   <code><style type="text/css"></code>   <code class="m1">p {</code>   <code class="m2">color: red;</code>   <code class="m1">}</code>   <code class="m1">a {</code>   <code class="m2">color: blue;</code>   <code class="m1">}</code>   <code></style></code> ...</pre>这将使这个页面的所有段落都是红色的，所有的连接都是蓝色的。与内联样式类似，你应该是HTML文档和CSS文档分离开来，下面，我们的救世来了……<h2>外部</h2>外部样式为整个网站的多个页面服务。这是一个独立的CSS文档，简单的一个范例如下：<pre><code>p {</code>   <code class="m1">color: red;</code>   <code>}</code>   <code>a {</code>   <code class="m1">color: blue;</code>   <code>}</code>  </pre>如果这个文档存为“web.css”的话，它可以这样跟HTML文档连接起来：<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code>   <code><html></code>   <code><head></code>   <code><title>CSS Example</title></code>   <code><link rel="stylesheet" type="text/css" href="web.css" /></code>   <code>...</code>  </pre>在CSS高级指南中，我们还将看到其他连接外部样式表的方法，但到目前，这已经足够了。想从本指南中收获更多，尝试着在你的文本编辑器中新建一个文档，在HTML文档相同的目录中，把这些代码保存为“web.css”。现在像下面一样改进你的HTML文档：<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code>   <code><html></code>   <code><head></code>   <code class="m1"><title>My first web page</title></code>   <code class="m1"><link rel="stylesheet" type="text/css" href="web.css" /></code>   <code></head></code>   <code>...</code>  </pre>保存HTML文档。现在已经把HTML和CSS连接起来了，但还是空白一片，没有改变什么东西。随着进一步学习CSS初级指南，你可以增添或者改变CSS文档，通过刷新浏览器里的HTML文档，方便地看到效果，像我们以前做的一样。三.选择符、属性和值HTML<abbr>有标签（tag），<acronym title="Cascading Style Sheets">CSS</acronym>就有选择符（selector）。选择符就是赋予内部或者外部样式表的名字。在 CSS初级指南中，我们致力于HTML选择符，即是HTML的标签，用来改变一个指定标签的样式。</abbr>每个选择符都有属性（properties）在大括号{}中，里面包括诸如<code>color</code>、<code>font-weighth</code>或者 <code>background-color</code>形式的字样。值（value）在半角英文引号<stong></stong><stong></stong>:<stong></stong><stong></stong>后面，用半角英文分号;隔离。<pre><code>body {</code>   <code class="m1">font-size: 0.8em;</code>   <code class="m1">color: navy;</code>   <code>}</code>  </pre>如上，这给body选择符里的font-size和color属性赋值。基本上，这应用在HTML文档的话，在body标签之间（整个窗口的内容）文本将会有0.8em大小，显示为深蓝色。<h2>长度和百分比</h2>CSS中有很多专有的属性单位，也有很多能够用在大量属性的常规单位，在你继续学习之前，它们值得你熟悉一下。em（比如<code>font-size: 2em</code>）是一个大致与一个字符高度相同的单位。px（<code>font-size: 12px</code>）是一个像素的单位。pt（<code>font-size: 12pt</code>）是一个磅的单位。%（<code>font-size: 80%</code>）是一个……单位，等等，哦，是百分比。其他单位还包括pc(活字），cm（厘米），mm（毫米）和in（英寸）。一个值是0的时候你不必为它声明一个单位。比如，你不想要边界，可以这样设置：<code>border: 0</code> 。<div class="note"><h3>注意</h3>网页不是静态、绝对的媒体。这意味着，网页具有灵活性，用户被允许按他们的喜好方式浏览网页，包括字体尺寸和屏幕的大小等等。因此，为font-size属性赋值的单位中，最佳的是em或者%，而px在多数浏览器中会导致文本具有不可缩放性，也会导致贫乏、乏味的文本。今天先学3章.这3章是一些基础的介绍.现在看这些可能觉得是一些理论的东西,但基础的东西用的却是最多的.今天就说到这里,下课!~</div>[em03][em03]

老树 · 发表于 2006-11-11 17:33

慢慢学

恐龙帅哥 · 发表于 2006-11-12 22:42

慢慢看


浙公网安备 33102302000043号浙ICP备11032801号-2