从0开始学做DISCUZ风格之二——XHTML+CSS简明教程

不要意思这几天都在外边玩~~接下来速度会大约一周两课~~


在上一堂课里，我们专门介绍了DOM工具的操作，以便即时地查看修改的效果，和查看欲知区域的代码和式样。
在这一堂课，我们将正式进入XHTML和CSS基础知识的世界，或许你对此知道一二，你应该在此基础上系统的学习，这样才不容易忘记；或许你已经很是了解了，无聊的话可以再来看看，以便加深了解。如果你刚刚才打开电视机，没有关系，这里的前三章都是算作铺垫的，而真正的模板制作将在第四章正式开始。。。请go on 睡觉ing


大家看到这个标题有没有吓了一跳呀，这些东西看起来那么多那么繁琐，你一个帖子说得了么？
这里我要先安慰各位一句，其实这些东西简单到世界上再也没有比这个更难的了，如果您不是真心想学会的话那么您一定可以流畅地背诵他们。。。
事先说说要求：本药片一旦入眼，请务必反复背诵直到滚瓜烂熟为止，否则会产生严重的干扰，导致以前学的也忘记了。。。
而且要说明的是，这个帖子只会把XHTML和CSS的主要的内容全部说一下。
标签看上去看多，但是分类后却很容易掌握。

XHTML是什么？
加个X？是受DISCUZX的影响么？其实XHTML就是指更加标准的HTML，是一种更纯净的HTML。现在我们应该用来代替HTML的东东。这个标准可以从如下四条规则中看出：
1，文档只有一个根元素。
2，每个元素都由开始标签和结束标签组成（空元素除外，如<br /><hr />）。
3，元素之间保持对称的嵌套。
4，元素的属性必须有属性值，而且要用引号标注。（如<input checked=’checked’ />,而且我们一定要注意，这里所有的属性和属性值都必须写成这样的格式如align=”left”,width=”123px” 这里前面是属性，中间等号，后面用双引号或者单引号标示属性值）

什么叫标签什么叫属性？
比如 <xml>就叫做标签，其中<xml>叫做开始标签，</xml>叫做结束标签。这个东西只能成对出现，如果这两个标签之间没有任何内容，才可以写成单个的<xml />，注意这个中间需要加一个空格才能获得最大的兼容性。属性是写在开始标签的括号里面的东东，不同的标签有不同的属性，但是也有一些是通用的核心属性，比如<a id=’a’>里面的id，还有class，style等，这些是用来关联到CSS文档里的式样或者JS中的选择器的。

文本相关标签
有<b>粗体，<i>斜体，<em>强调文本等，这些都可以指定id，class，style等核心属性。各位不要小瞧这些属性的作用，事实上有时候加一些标签的目的不是为了获取粗体等效果的，而是为了把这些文字通过这些属性变成更为复杂的式样的。

在这里不得不提到一个标签<span>，我们在模板里经常可以看到，它有个什么鸡巴用呢？其实要说这个得把这三个一起说一下，<span>,<p>,<div> 这三个圈中的文字都可以为他们设置特别的式样，但是不同在于：span连续作用在一行文字上，比如<span>我们</span><span>热爱</span><span>党</span>，在浏览器上看到的这五个让人热血沸腾的字仍然是一行，但是<p>和<div>都会把他们变成新一行，也就是好像在每个结束标签后加了一个换行一样。而后两者的区别在于，P标签的话，文字上下之间隔得更远，因为他们是产生了新的段落。注意：<p>可以包含<span>，反过来不可以。

列表相关标签
<ul>,<ol>,<li>这三个，我们用得最多的是UL和LI，因为一般的循环输入都会采用这个标签来制造统一的效果。前面两个UL定义无序列表，就是说这个标签里面的多个<li>的前面不会自动标注1，2，3……这样的序数词。他们都可以指定核心属性，这就是他们存在的意义。
比如这段代码：
关于列表还有<dl><dt><dd>标签，有兴趣可以自己看。

图像相关标签
也就是<img />这一个，因为他本身就是一个单个标签，图像定义在src属性里，主要说说他的属性，src，这个用来指定文件图片所在的位置，大家可以想想一下超链接关联到另一个资源使用的href，这两个的不同，一个是指定本身，一个是指向外部。
alt，这个当图片显示失败的时候就会以这个提示的内容代替图片，当网络不好等情况下，这个是很有必要的，尤其是对手机用户，他们或许禁用了图片，你们写上这个属性给他们留条活路吧~~~
height，width，这两个指定图片的高宽。

超级链接标签
这个的重要性就不用我多说了吧，<a />
这个需要有开始和结束标签，属性包括href用来指定指向的资源，还有一个target用来指定用那个框架来加载新资源。我们用得比较多的是这一句，target=”_blank”用来在新窗口中打开，其实还可以使用_self,_top,_parent等值。
关于这个还可以使用name属性来确定瞄点。

表格相关标签
有些同志认为现在用div+css 可以代替table了嘛，其实在很多地方这都是不可取代的，不信可以去看看帖子列表页，是不是用了table？
<table />定义一个表格，属性包括align：表格自身的对齐方式。border：指定边框的宽度。width：指定表格的宽度。等
<tr>定义表格的一行，table row。里面的属性可以有align，用于指定其中的文本的水平对齐方式。valign，指定文本的垂直对齐方式。等
<td>定义单元格，这个是作为<tr> 的子节点，在一行里分多个车厢。重要的属性值包括：align：用于指定文本的对其方式。colspan：用于指定这个车厢占用了几个车厢的长度，定义该单元格跨多少列。rowspan：用于指定这个车厢占用了几个铁轨的宽度，定义该单元格横跨了多少行。
其实关于表格的相关标签还有很多比如<tbody><thead>等，但是个人建议首先把上面三个标签用熟练了再去看其余的，才不会思维混乱。

表单相关标签
我们经常要与服务器交互信息，提交数据，文档等。这是一个很麻烦的东东，但是确是最需要掌握的东东之一，各位同学不要害怕，让吾来慢慢带领各位寻路……
首先看一个最简单的表单提交东东：

1. <form action=”” method=”get”>
   
2. <input name=”a” type=”text” />
   
3. <input type=”submit” value=”提交” />
   
4. </form>

复制代码

好吧这是一个最简单的表单提交代码，通过分析这个代码我们可以得到以下信息：
1，        所有内容都写在form这个标签对的内部，里面写其他标签增加内容。
2，        Input标签很不错，可以通过type来化为不同的肉身。
3，        表单提交到本身，且通过GET方式。（什么是GET,POST提交方式？他们都是表单提交数据时候的请求的方式，GET会在浏览器里显示需要提交的数据，比如这个点击提交后就会在浏览器出现如下字符php?a=aaa,如果我有多个框的内容要填，则是这样的形式php?a=aaa&b=bbb。而POST不能在地址栏看到。他们的区别除了安全性能，提交数据的大小，GET最多只能2k以内，如果要上传文件，则必须选用POST方式。其余还有很多不同，什么不同我也不想说，纸上来的终觉浅，你们不自己折腾我说了等于0）。这两个参数是必选的，如果是在discuz7中，这个提交后，应该是通过了特殊的extract处理，在程序中可以直接使用$a这个变量，但是在x中，是在$_G这个数组里。如果是非DZ中，可以使用$_GET[‘a’]得到这个值。
4，        第一个input类型是文本，会出现一个框供大家填入文字信息，第二个类型是submit，会出现一个提交按钮，显示为提交字样，点击之后会把内容提交到服务器。

大家可以通过这个示例来了解一下表单提交的过程，接下来详细说说这两个标签的属性：
<form>
action:用于指定被提交到那个地址，可以是…….php这样的地址。可以写远程地址，所有就存在一个跨域提交的漏洞，在DZ中会对提交的来源进行判断来防止被外站提交非法数据。
method：指定为get或者post。
enctype：指定表单数据的编码方式，一般默认不填的话为application/x-www-form-urlencoded，这个如果采用get方式，提交汉字，在浏览器上出现是urlencode后的效果，不再是汉字了。
multipart /form-data：这种编码方式会以二进制流方式处理表单数据。如果你要上传文件，那么必须使用这个选项。我们来看一段最简单的提交数据的代码：

1. <form method=”post” action=”” enctype=” multipart /form-data”>
   
2. <input name=”file” type=”file” />
   
3. <input type=”submit” value=”提交” />
   
4. </form>

复制代码

我们可以对比一下上面的代码，增加了一个enctype属性，input的type属性改成了file，method改成了post。
这样点击提交后，上传的文件会自动保存到$_FILES数组里，然后通过php等来处理。
还有一种text/plain。

<input />
首先说明这是一个单标签，大家从上面的例子也可以看出，都提到了type属性，我们现在就来总结一下这个属性值：
text：文本。这个时候再添加一个属性value=”aaa”,则会把aaa当做初始值。
password：这个指定密码，设置成这个后会显示为点点。
hidden：如果你有心研究过discuz的代码的话，一定可以频繁地看到这个属性在表格中的应用，因为在表单中要判断请求来源的合法性，一般都会增加一些你表面看不到但是实际上跟随表单一起提交到了服务器的变量和数据，就是用这个东东了。看不到，但是值也被提交了。
radio：单选框。
checkbox：复选框。
file：文件上传域。
submit，reset：提交，重置按钮。

还有如下属性必须掌握：
checked：在选择框的时候，表示初始位置的选择情况。我们上面也说了XHTML的四条规则，所以这个必须写成这样：checked=’checked’,而以前直接写成checked就成了。
disabled：加载的时候禁用该元素，应该注意，当input设置成这个的时候，是能看到的，但是这个内容却不能修改，内容也不能被提交。这个要和上面的hidden属性值相区别。
readonly：这个的效果类似上面，只能读不能输入。常用来做那种比如DZ里的性别一旦填写不可修改的效果。
maxlength：指定文本框中所允许输入的最大字符数。
name：为这个输入框设定一个唯一的名字，提交后当做变量名。

在处理表单时候的多说一句：
一般专业的代码工人（请原谅我这样的称呼，因为真相永远比谎言更动人~~）都会在input前使用label标签。
一般是这样用的：
<label for=’a’>姓名</label><input id=’a’ name=’a’ type=’text’ />
这个label的作用就是当你点击姓名的时候，鼠标的焦点会切换到这个for对应id的框内。
很多网站都有这样的效果，不是吗？
这里的for 指定了a，这个会关联到id为a的元素。
当然可以用另外一种方法，不用使用for。
<label >姓名<input id=’a’ name=’a’ type=’text’ /></label>

关于表单还有如下标签大家可以了解一下：
<button>,<select>,<textarea>

还有一些需要了解的标签：
<html>这个是xhtml的根元素。
<body>这个是页面的主体部分。
<h1>~<h6> 这个是定义六种标题，事实上我们也经常用这个来设置页面里的某一些标题，当然，式样都是处理过的。比如discuz系统的logo大家看看源代码，它是不是定义在<h2>的标签内呢？看看它的源代码和式样：

<br />换行。
<hr />定义水平线。注意这两个书写要规范化，中间有空格，后面有斜线。

<div>这个东东大家恐怕已经看得眼睛都要生毒疮了吧，网络上开口闭口就是DIV+CSS，听起来似乎相当牛×，其实只学这个是不够的。

关于XHTML最后还要说一说head标签里的东东
<title> 定义标题。
<link><style>定义CSS的东东，下面说说的。

还有一个东东大家要掌握：<!-- -->
这个东东是注释，大家都知道，我和大家说的是另外一个东西。
在discuz的模板文件里大家随处可以看见这样的代码
<!—{}-- >这个东东很像上面的东东，但是加了一个大括号是个虾米呢？
这个东西内容很多，在下一堂课DISCUZ模板编译原理里我们会详细说明的，现在暂不表。
好吧，亲爱的同学们，XHTML的内容我们已经全部讲述完毕了，是不是内容也不多啊~~
这里说的是xhtml里关键的和重要的部分，还有部分内容各位可以在把这些东西都掌握好了之后再去了解和查看。

CSS入门：
上一堂课我们已经说了CSS里面的框模型，而且大家可能都了解了内边距和外边距的定义。
但是可能对CSS的整体还是比较模糊的概念，那么从现在开始我将来为大家拨云见太阳~~

CSS是虾米东东？
我们来想象一下没有CSS的岁月里吧，那时还是html，大家都乱七八糟地在标签里用bgcolor这样的属性定义背景，用font这样定义字体，千奇百怪，那是一段多么可怕的岁月啊。。。幸好那个时候我还对网络完全没有兴趣。。。
而CSS出现了，html解放了，所有的背景图片，字体神马的东东全部被放到CSS文件里了。而使用<link>标签，CSS分离了，在工程化模式里修改更方便了，多么美好的前景！

如何在页面中引入CSS呢？
1，        使用外部链接，代码如下
<link type=”text/css” rel=”stylesheet” href=”” >
前面两个表明这个页面在使用CSS，href指向改个外部资源。放在head标签内部，大家可以看看DISCUZ的源代码，看看是不是在head里有这么一句。
2，        使用内部式样
如果是简单的页面，懒得去另外弄一个CSS文件可以用这样的方法，在head里插入如下代码
<style type=”text/css”>
Body { background:black;}
</style>
3,使用内联样式
这是个偷懒的方法，比如我在修改一个div的样式，需要增加一个效果，那么简便的方法莫过于直接在这个div标签里添加一个style属性：
<div style=”font-size:10px;”>
就像这样，本公子经常使用这种方法，很方便呢，不过代价就是想修改的时候经常找不到地方。
如果我采用的是外联的方式，利用第一种方法设置好，那么xhtml的部分已经完全完成了，接下来就是对照xhtml里的id或者class来写CSS了。

CSS的基本语法：
看这个代码
Body { font-size:12px;background-color:black;}
我们来分析上面的代码，可以得到如下信息：
1，        最前面的是选择器，用来选择XHTML文件中的某个标签等关联的样式，这里可以看到是body标签。
2，        关于这个选择器的样式内容写在一个大括号内部，里面的格式是 属性：值；这样的格式，中间是冒号，后面是分号。同时可以指定该选择器的多个属性和值。
3，        这个页面的字体大小被设置成12px，背景颜色被设置成黑色。
补充：其实可以同时有多个选择器，用逗号隔开即可。
接下来我们会按照这个代码从左到右的顺序依次介绍选择器，基本属性。

CSS选择器：
如果我把xhtml中的每一个元素比如一段文字，图片，表格当做一个个明星，文字天王，图片歌后，表格影帝兼摄影师。那么在CSS中则存在他们的造型师，比如上面的那个代码就是body先生的造型师，他前面的body表明他就是body明星的造型师。
所以在CSS样式中，大括号前面的名字表示的就是他们所负责的明星的名字，当然是可以一个造型师负责多个明星。

我们随便打开一个CSS文档，会发现前面的名字有下面三中格式，第一种都和XHTML中的标签同名，第二种前面有#，第三种前面有.
先说第一种属性选择器：
我们在上面的文中学习了很多的标签，那么第一种就是利用他的原始标签来定位。
比如定义页面的背景

1. body { background:black;font-size:12px;}

复制代码

如果是多个选择器使用同一个属性和值，可以这样

1. h1,h2 { font-size:20px;}

复制代码

面对稍微复杂的情况，可以用多个选择器来定位，成为派生选择器，比如对应父元素里的子元素

1. li a { color:red;}

复制代码

还能对某个标签的某个属性和值进行限制：
tag[attr] tag中具有attr属性的情况
tag[attr = value] 其中attr的为value的情况，这个的优先级大于上面的
tag[attr ~= value] 其属性值为多个，其中一个为value的情况
tag[attr |= value] 其属性值为多个，第一个为value的情况*这两种支持的浏览器不多，仅供参考
利用这个比如某个div中，就可以用这样的选择器

1. div[class=a]

复制代码

来选择。

第二种情况，id选择器
在XHTML中我们可以看到，基本所有的标签都可以使用id这个核心属性。
相当于给某个标签起了一个独一无二的名字。
那么我们在css中可以直接利用id来定位，
比如<div id="a">
那么在CSS中，对应的式样可以直接写成 #a {}
这个也可以使用派生选择器。
应当注意的是，这个ID是独一无二的，每个页面只能使用一次
比如在循环中的，li就不能指定id属性，否则CSS会失效。

第三种情况，class选择器
上面说过的ID选择器是独一无二的，那么为了重复利用
我们就可以使用class选择器来批量设置式样。
这个也可以使用派生选择器。

关于继承：
在这里遵循一个子元素默认使用父元素的属性和值
但是子元素的优先级大于父元素的规则。就是说如果子元素有设置字体神马的，则使用子元素的式样，否则默认使用父元素的。

下面重点介绍一些重要的属性：
字体部分：
font：这个是一个复合属性，可以包括字体，大小，风格，加粗等。当然如果只写一个，可以利用具体的font-size等。
color：颜色
text-shadow：阴影，但是对IE没有效果
text-transform：首字母大写，这个效果很不错，可以选择到文字的第一个字母，单独设置样式，弄成报纸上那种第一个是大字的效果。
line-height：行高
letter-spacing：文字与文字之间的间隔
word-spacing：单词之间的间隔

段落部分：
text-indent：段落文本的缩进
text-align：设置文本的对齐方式，比如左或者右

背景部分：
background：这个可以写入颜色，图片，位置，重复，固定等属性，我们看看首页的目录背景设置代码：

1. background: url(https://discuz.dismall.com/static/image/common/mu.png) no-repeat 100% -33px;

复制代码

多个属性中间使用一个空格隔开的
首先是背景图片，格式是url()里面写入地址，当然在discuz中由于模版编译，这个是可以写入一个常量的。
在这里也可以写入背景颜色，但是只有在图片不生效或者不存在的时候才会显示
第三个是重复，这个是不重复，也可以repeat，repeat-x，repeat-y，分别重复，x重复，y重复。
第四个是图像位置，可以是百分比或者像素值。父元素的左上角为0，0坐标，横向为x，竖向为y。两个分别代表其位于x和y的位置。

大小部分：
width，height：宽和高
max-height，min-height，max-width，max-height：分别指出最大最小的高或者宽。

边框部分：
border：这也是一个复合属性，可以指定颜色，样式等，单独某个位置的某个式样可以用这种方式：border-top-color
这个部分上一章介绍过，可以自己去看看。

还有通用的部分：
display：如果这个设置成none，则元素不可见。还可以设置成block强制设置为块。
cursor：光标式样。

位置部分：
position：可以是relative，absolute分别以上一个元素的相对位置做参考，脱离文档流处于漂浮状态。或者static，以页面作为参考系；还有一个fixed，和absolute相似，但是其是以当前屏幕的大小为参考系，和页面脱离了关系。
z-index：这个指定层。
top，bottom，left，right，这些分别指定上下左右，参考系以position的值为准。

CSS定位：
一般浏览器载入一个页面，会按照里面的元素从上而下的位置排列，称为普通流。
但事实上为了获得我们想要的式样，常常需要对这些元素进行位置的调整。
在上面已经说了位置部分的CSS属性
下面简单对relative，absolute和float进行比较
relative是以上一个元素为参考物。假设所有的元素都以原始的顺序排列，这里对某一个元素位置进行定位，得到的是偏移上一个元素的位置。而下一个元素的位置则为默认这个元素位置不变的所在位置。
absolute绝对定位，会把这个元素从文档流里删除，使其漂浮上去了。而且会影响下一个元素的位置，这个时候下一个元素会把这个绝对定位的元素当做不存在而占用这个元素的位置。他的定位则是相对于父元素的定位。
float这个属性大家一定看得很多了吧。
比如在dz首页中的左右分栏就利用了这一个。首先，它也是一个脱离了普通流的元素，漂浮在上面和一般的元素是不会相撞的，但是会掩盖。如果两个元素都是浮动的，则可以在普通流的上面相撞。
一般可以向左浮动或者向右浮动。而且这个漂浮是位于父元素的内部的。而不是脱离了整个页面的框架。
浮动和position不能同时使用。他也能影响下一个元素的位置。
在div中，在普通流中，每个框的出现都是独立的一个段落，上下方式，而不是左右。这也是discuz的首页左右边栏使用float的原因，float只有左右两个值，能够把框放到一行里。
在父元素的框架里，如果里面的元素都是浮动的，则会错位，因为这个时候父元素在普通流里空掉了。这个时候要借助一个clear的属性。
他们的主要区别是上面的内容了，还有一些必须要了解的属性请点击这个查看：
http://www.w3school.com.cn/css/css_positioning_floating.asp
如果要再写的话肯定是重复了，就不写了，自己看吧。

超链接的CSS属性
在超链接中，有一些效果，比如鼠标放上去的时候，点击的时候，普通的时候会呈现出不同的效果，这个也叫做CSS伪类。
这个点击这里可以看到：http://www.w3school.com.cn/css/css_pseudo_classes.asp
这些内容稍微了解一下就可以了。

好像说明一二节，我们还是没有和discuz扯上太多关系，那么从下一节开始，我们将真正步入discuz模板制作之路了。
因为下一节我们将开始讲述discuz模板引擎原理，这三节完毕后，大家应该对模板的修改有一个最基本的原理上的认识了。

打了好多字，好累……呼…呼呼…大口喘气中……
本章内容很多，写了很多天，如果有疏忽不能避免，请指正！！

关于目录：（写明必背的说明是极其重要的，不背下来寸步难行的）（如果有新的出来，我会在每个帖子主贴下面写好这个目录并做好超链接）
1，XHTML基本必背标签，DOM模型简介和在浏览器的定位，CSS盒式模型（必背）及DISCUZ的页面结构简析。
2，CSS的几个必须要背诵的知识，定位，选择器和基本语法。（必背）
3，DISCUZ模板编译原理及其相关。
4，创建自己的第一个模板之创建，结构修改，各种背景的修改和调整，一些遇到的基本错误的修正。
5，风格细节修改及基本图片修改（photo技术），Sprites技术简介和图片制作。
6，数据调用和修改与自增模块。
7，DZjs框架的使用，风格整体测试，查找和处理速度瓶颈。

代表党和人民对你表示支持！！

前排支持！

谢谢楼主，好人呀，这种免费课程已经非常少了！

学习下

支持！！

支持

你太强大了......这个帖子必须收藏..........

不错。。。。。。。。

前排留名