�����Ծ�CSS--һ������֮ս
- ԭ�����ߣ�Sergio Villarreal
- �����飺ī������ҳ����ʦ��1993���Ӵ����磬������ҳΪOvercaffeinated.net
- ԭ�ij�����sitepoint.com
- ԭ�ķ���ʱ�䣺2004��5��27��
ǰ��
�ҵ�һ����internet�ϳ����õĻ������նˡ������Ժ��������մ��ݵ�һ�ֵ�ɫ����ʾ����Ȼ����ͨ�����������ŵ�Ӱ"������ʥ��"����ʱû�����꣬û�����õIJ������棬������˵24λ��ɫ�ˡ�Gopher��Ψһ���õĹ��ߡ�������ֻ����Archie��Veronica��û������˵��W3( World Wide Web)����ʱ���翴�����Ѿ��㹻���ˡ�
- 1.���նˡ�����PC����û�����Լ���CPU���ڴ���Ӳ�̡�ͨ����ͬ������������������
- 2.Gopher��һ���ͻ�/������(client/server) Ӧ�ó�������ͨ��ִ��FTP���䣬Զ�̵�¼(remote login)�� Archie ���ҵȣ���������Ϣ�Բ˵���ʽ��ʾ�������û�(end-user)��ʹ�û�������������Ϣ�������û����� Internet��Դʱ���Բ���Ҫ֪���������룩����ַ��
- 3.Archie�ǵ�һ���Զ�����������������FTP��վ�ļ��ij������������������������档
- 4.Veronica��һ��Gopher�͵���Դ������������Gopher�ռ�����������ָ�������ⵥ�ʵ����в˵��
�ֹ���һ��ʱ�䣬���ֵĴ��뿪ʼ�����ҵ���������������Ȼ���ܹ��Ķ���Ҫ�����ݣ�����Щ����ȴ�������ᡣͬ�¸���������HT ML��һ��internetͼ�λ����ԣ�������ѧϰ��һЩ������ͼ�˵�HTML���ٺ�����������256ɫ����ʾ����Mosaic�������ĵ�һ���汾��һ�ж���ʼ���ò�ͬ�ˡ�
����ʱ�������Ѿ��ܳ�ʱ���ˣ��������Ѿ��������������ŵ����ߣ�web����Ҳ�������εس��ĸ����˼�������¸��졣���ҿ�ʼ��Ϊ��ҳ����ʦ�����������������˱���Ϊ���������ơ�javascript�ı�����CSS��Ŭ����չ�Լ�����Ҫ�����ձ����ܵ�web��������չʱ�ڡ�
һ��ʼ��internetֻ�ǰ���Geek(�������ȷ���)�뷨���������ģ�internet��ֻ�д��������ݣ�����û�п��ǵ�������ɫ��Ư����ͼƬ������ʵ�ϣ����Ƕ�ϲ���ڳ��˵�ʱ�����ḻ�ı�����ʽ������(table)���Ʒ����ij��ֽ������������ѣ����ǿ���ͨ�����������Ʋ��֣����Ƿ�ʼ"��ƭ"ϵͳ����������1 pixel��ϸ�ߣ�ֻҪ�ڱ��������в���һ������GIFС�㣬������һ������ɫ�Ϳ���ʵ���ˣ����ܿ������壿�Ǿ�ʹ����һ����ǩ<font>!
���ҽӴ�CSS��web��֮ǰ�����Ѿ��ñ������ƺö����ˡ�web�������Ʒ�����ȫ����ǰ��ͬ��������Ч�ʵģ��������˵ġ��������ء����ҵ�ϲ�����µ����Ʒ��������������������Ĵ��뽫���ݴӲ����з���������ȴ��Ȼ���ֿո������������ƣ���һ�¾�"ϲ������"�ˣ����ٲ����ϵ����Ʒ�����
ֱ�����졣
����web����CSSĿǰ�Ѿ����˺ܶ������ۣ�����ÿһ���õĹؼ��ʣ�������Ϊweb������չʷ����һ��"������"������ʼ��Dougl as Bowman��������������վ(Wired.com)�������Ϸ�չ��2003�꣬Zeldmanд�ġ�Designing with Web Standards��һ�����棬�����Ƕ����������⣬ȫ�������ص�����ʦ��Ϊ�µ����Ʒ�����ӵ�����������ǽṹ���ģ������������ģ����ǿ��ٵĺ��������ġ�
Ȼ������Ȼ��һ���������ٲ��ô�ͳ�ı������Ʒ���������������<font>��ǩ������˵��ͳ���������ף�������ά���Ϳ��ٿ���������˭����ȷ�ģ�
�Ҿ���������һ��ʵ�����������������α仯�ģ����ǵ���ѡ�����ַ������á�
��ս
����ͼ������������һ����������վ��Ȼ������HTML4.01���������ñ���,�����κ�CSS����Ϊ�Աȣ�����XHTML1.0 Transitional ���������������������ԺͿɷ����Թ淶��������CSS��������������(���DZ������������ֱ��������ݡ�)
�������̷����Σ�����ϸ��¼���̣��������������ıȽϣ��������ǵõ���ʲô��ʧȥ��ʲô������Ӧ��վ����һ�ߡ�
��һ�Σ�����վ��
�ҿ�ʼ�����鹹��վ�㡣�Ҽ���Ϊһ����"Butterfly Watchers Association(�����۲�Э��)"����֯������վ���Ǻǣ���Ҳ���������õĿͻ��ˣ��������뵽���������������Ҿ���������������ʵһ�㣬������վ��Ŀ���û������ô�ͳ�IJ��ֺͱȽ�Ȩ�������塣
��ϣ��վ���ǽṹ���յġ���Ч�ġ�������Ҫ�ġ����ң�����ҳ����Ӧ���к������ҵ���Ѱ�Һ��ʵĺ���ͼƬ�����þ���stock.xchng�ҵ���ͼƬ����ɫ�ĺ���ͣ����Ҷ�У��dz�����վ����������һЩ���������Σ�����ͼ�ͳ�Ϊ����ҳ����header��
�����ƹ����У��Ҽ���һЩ������ԭ�������羡��ʹͼƬ�ļ��ߴ���С��һ��ʼ�����ڵ����ϲ���Garamond���壬�������ǵ��û��Ļ����Ͽ���û���������壬�Ҿ�������Georgia����(������������ Times New Roman�����������¿����� Times New Roman��������)������headerͼƬ�ϣ��һ��Dz�����Georgia����Ϊ����ͼƬ��
�ı�ʹ�û�ɫ������ʹ��Trebuchet MS���壻���Ų���Verdana���壬����������Сʱ������Ҳ�ܺá���һ�ֲ����ĵĹ�������һ�������в���4�����壬�Ҳ�����ôͬ�����ֹ۵㡣
���ں�������Щ�۲����ǵ�������֪֮���٣��ҷ���һƪ�۲�ϡ�к�������������ҳ��Ҫλ�ã����������û��Ƚϸ���Ȥ�����ݡ���Ϊ��֯��Ӧ���кܶ���Ա�������һ�����һЩ��Ա��Ϣ��ͬʱ����Ҳ�DZز����ٵģ���Ҳ������ȥ��Ȼ�����˰�Ȩ��һЩ����װ��ͼ��һ�������ں�(They flutter. We watch them.)������ҳ���IJ�����һ��ҳͷ(header)��������һ�е����˵���Ȼ����2�����ݣ�����һ��footer���ҽ�"About"�˵�����Ϊ����������ʾonmouserover��Ч��������ҳ�濴��������������
���ˣ����ڿ��Կ�ʼ�����ˡ�
�ڶ��Σ�"����ǰ��������ʹ������GIFͼƬ�����Ƽ���."
�������Ѿ���һλ�μӹ�������Ŀ����ҳ����ʦ�������Ľṹ��������Ϥ�����ģ�
<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Content goes here.</td> <td bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
�ñ���˵���������Ѿ�ϰ���������ˣ���Ϊ����������������"��ľ��"�����磺������GIFͼƬ�����Ƽ��ࡢ�ñ����ĸ�������������λ�á�������ô���ͣ������ǿɿ��ģ��ñ��ֵ�ҳ��������ǰ���ݣ�û��css���������Կ������������ʺ������������ȵȡ�
�����ǿ�ʼһ��һ�������������ƹ��̡�
��1Сʱ
�ޡ�����ʱ���������CSS������ʲô�����屳����ɫ?Ŷ����...��bgcolor��лл��ʾ���ã���ʼ����������Ԥ��Ч�����Ҷ�����"align=center"�������Ϳ����������������о��У�̫���ˣ�����ô����������ȥ�������������������ط��ĸо�����������ʹ������GIFͼƬ�����Ƽ��࣬��������ǰ����������header�Ͳ˵�֮����ô�����ֿհ��أ�Ŷ��ԭ����images������������һ���ո���IE��������������ʾ����������������ɾ���ո��ͺ��ˡ�
��2Сʱ
��ʹ��javascript���������˵��ķ�תЧ����
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
javascript����д:
function chBg(obj) { obj.bgColor = "#E1E5DB"; } function chBg2(obj) { obj.bgColor = "#CBD1C3"; }
�����Ҷ������Ʒ����е��������⣬�������Ȼ����൱���ġ���Ȼ���Ҿ������ٱ�����Ƕ�ף������뿴��ȥ������Щ���ӣ������Ҽ���һЩע����ȥ���Է����ҵ�������Ҫ�ĵĵط���
������һ��С���⣺����css�����������ӵ��»��ߡ�Ҳ���н����취����������google������һ�¡�
��3Сʱ
google����������û���ҵ��취�����β�������û���»��ߵ����ӣ�һ����һ�������취��
��4Сʱ
�ɶ�����Ϊ���������»��ߣ��Ҳ��ܼ�������ͼƬ�˵�����������ʵ���Ĺ��������Լ��ƶ��ģ��ҿ�������Υ��һ�¡�����һ���� css��������ֻҪ��һ��style="text-decoration: none;"�����ӵĵط��Ϳ����ˣ�yay!�����˲˵��»��ߵ����⡣
���ˣ����ǽ���������������Ҫ��2�С������еĺ���ͼƬ������2��������ʵ��ϸ�߿�Ч��������������
������������ǰ4��Сʱ�ijɹ���IE6�����������ϵ�Ч�����ޣ���Firefox�зdz���ª����Opera��Netscape�п�������������
��5Сʱ
��������...�����Ժ��ġ�
�����У�����ʶ��<font>��ǩ���������ߴ��ľ����ԣ��Ҳ��ܶ������ֳߴ硣���Ǹ�����
News���ֵ������Ű�Ҳ���������⣬Ϊ���������Ҳ��ò��ø����ı���Ƕ����ʵ��Ч����Ϊ��ʹ�����еĺ���ͼƬ���������ֵ����棬��Ҳ���ò����ӱ��������������֡���ƭ��ʽ���Ű����Ҹе������Ρ�
��6Сʱ
���ƽ����ˣ�����ȥ�����������Ʋ�࣬��������������� ��
���а����˶��ٱ��������������鿴��
�����Σ����Dz���Ҫ������
�������ǽ�����ʲô�ǻ���web���ġ���CSS���ֵ����ơ��ҽ������ݵı�ʶ��ʼ���ҽ�����ʹ��ʶ�����壬���������ı�ǩ�� p>
ҳͷ��һ��ͼƬ������Ҳ��һ�����⣬����������д���룺
<h1>Butterfly Watchers Association. They flutter. We watch them.</h1>
�ҽ��Ժ��ٿ���������ȷ��ʾ��������(���������£����Ǿ����ܶ��Ĺ������ݣ��������ٵĹ��IJ���)����������(news��Sightin gs and Membership)������ʶΪ<h2>��
�˵��Ӹ����Ͻ�����һ�������б�(list)�����Խ�����ʶΪlist�����䲻��Ҫ����(���Dz��ü̳�ѡ������������"��"�ڰ����IJ���)���ҽ��Ա�ԭʼ�������ı�����Ϊ��ʵ�ֲ�����Ҫ���Ӷ��ٶ����ı�ǩ(�ҽ������������ӱ�ǩ)��
������ԭʼ�������ı�������ԭ���룬������xhtml1.0 transitional�淶��ע�����е�Ԫ�ض��Ѿ��������ڶ��������Ƶ�<div>�С������е�����Ҳ��������date����(class)�������Կ��������dz���
��1Сʱ
����"container" ����borderΪ1px��ͨ����body��ʽ�ж���"text-align: center"�����ݾ��С�Ϊ���������������ж����У�����"container"�ж�����margin: 0 auto;(��˼����top=0, right=auto, bottom=0, left=auto)�����еĴ��������ͱ���һ�����ס�
����"body"��padding"top"��"bottom"��ֵΪ20px(��ֱ����"container"�ж���padding��Ϊ���ʺ�����������)��
�����б�(li)���붨��Ϊ"display:inline"�������˵��ᱻ��ʾ��һ���ڡ����ڲ˵��������˵���ͼ�ꡣ��Щ����ͼ�����ò��ظ��������������ģ����Ծ�ȷ����(x,y)λ�ã�����������
background: url(menuBullet2.gif) no-repeat 4px 9px;
�˵��ĵ�����ɫ�仯Ч���������ӵ�hover��ʽ��������Ҫjavascript��
������ҳͷ�ĺ���ͼƬΪ<h1>�ı������������Բ��õ��������ԣ��ڲ�����ʾͼƬ���豸��(����Ļ�Ķ���������������)Ҳ���������Ķ����⡣
��2Сʱ
�˵��ĵ�һ��(HOME)ʹ��һ����ͬ��ͼ�꣬�Ҳ��ò�����ԭ���ı�����ΪHOME�˵�����һ��������id(frst):
#hMenu ul li#frst
������һ��(CONTACT)ͼ�꣺
background: transparent url(menuBullet3.gif) no-repeat 615px 9px;
������CSS����2����һ���ĸ߶ȣ����˵��ǣ��ҿ����ñ���ͼƬ����ͨʵ�֡��Ҷ�����"container"�����ظ�������
background: #fff url(bgMain.gif) repeat-y;
��3Сʱ
CSS�����бȱ������ˣ��ر��DZ߿����������Էdz����á�
�����ҿ�ʼ����<h2>���⡣ͼ���Ķ����������ķ���һ����
�ҽ�"news"�㸡��(float)��"sightings" �� "membership"�����档 ����"copyright"��" clear: both;"�����������Ը��ڸ����������档�������еĺ���ͼƬ���������棬���ֿ����Զ�������ͼƬ��Χ������ͼƬ��1px border������padding�����Ϳ���ʵ��ԭ��2������Ƕ��Ч����
�ַ���һЩ���⣺��Ȩ�������ݲ��в����ص���
��4Сʱ
��ʾ�Ĵ�����"sightings" and "membership"��float:right; �����йء������Ǹ����������Ϳ��Խ����������⣬�⿴��ȥ�����֡�����firefox���е�һ�β��ԣ���������ȥ��������ֻ�Dz˵���ͼ���м�pixel����λ��
��һЩCSS���ɿ��������ڷ�IE����������ʾЧ������������ͬ��������ͬ������ֵ��
��ͬһԪ�ض�����ʹ����!important ֵ����ͬ�Ķ���д��ǰ����������ִ�У�����ֵ����IE������֧�֡�
background: url(menuBullet2.gif) no-repeat 4px 6px !important;
background: url(menuBullet2.gif) no-repeat 4px 9px;
��CSS�У�����ͬһԪ���ж������壬����һ������Ч�ġ�������ΪIE��֧��!important������IE��ʹ�õڶ�������ֵ�������������������õ�һ������ֵ��
ȫ�����ɣ��������Ľ�����
����
���ڱ���������
���ø������ҵ���������������ҳ�棬����linux��windows��Macintoshƽ̨�������������ֵ�ҳ���ڲ�ͬ�������п���ȥ��һ����"������ʯһ������"�����Ǹ����ֵĵ�һ���ۡ�
Ȼ��������Ҫ��ҳ�沿������ʱ�����ָ������൱����������һ�����⣬��������ʹ��CMS(���ݹ���ϵͳ)��������Ҫ����ʽ���ͱȽ��鷳��
��������ʱ���е㳤������Ϊ���Ѿ��е��������Ϸ�����������������һ�Σ��������ܻ���ʡ1-2��Сʱ��
�����ݻ��ڱ����������Ǵ���"������(grunt work)"��������Ȼ�Ҿ����Ծ�����Щ�����Ƽ��ɡ�ʹ�û��ڴ�CSS�����ƣ���ͨ��ϰ���ڷֽ����ƺ�����bug�����ñ�������������Ҫ��Щ��������ֻҪ����������������table�Ϳ����ˡ���������������CSS�Ĺ��̡�
����CSS������
��CSS���Ƶĸо��ö��ˡ������ĸı�ֱ�Ӷ��������������ÿ����������̣����۱��������ƾ�������שͷ��ҳ���ĸı�Խ����Խ�е�CSS���Ƶķ�����Ч�ʡ�
CSS���ƶԽ�ʡ����Ҳ�dz������壬��������ʽ��ȡ�������ڵ������ļ��У�����վ����һ������ʽ���ļ�������ʹ����վ���ߴ���С��
��������Ϣ�������з���������Ҳ�������ĺô����ڽ������ҿ�����ʱ�İ�����վ��������Ҫ���κ����ݣ�����CSS Zen Garden ��ͬʱҲ�����������ԣ����������˽����ӷ��㷢������ҳ��(��ס��google��������Ҫ�ķÿ���Դ)��
���������ϣ���ͬ���ڲ�ͬƽ̨��ͬ�������Ͻ��в��ԡ�IE5.5��IE6.0����������IE5.0�ϳ����˴��˵���һЩ����ʧЧ����λ��ҳͷЧ��������ͼƬ��
������������bug���Ա��������ǿ��ǵ���ƪ���µ����ⷶΧ���Ҳ�չ�����ˡ���������һ����ʵ�Ŀͻ���Ŀ���ҿ϶���������I E5.0���û����ڸ���һ�����������У�CSS�����Ʊ��ֵ�һ���㡣
IE4
Netscape 4.7x
�����Բ�֧��CSS����������һЩ���봦��(������Netscape��@import)����ȥ����һЩ��
���ܵ�����Ϥ����CSS�����ƺ�����Ч�ʷdz��ߣ�����֮ǰ�����뻨�Ѵ�����ʱ��ѧϰ����ģ�͵IJ�ͬ���������Ĵ��������Լ����������ۣ�����Ҫ���ϵ�ʵ�������ա�������֮��CSS��tables��������������ʹ�ô�CSS���ƣ�����Ͷ�ʴ�����ʱ��ѧϰ����ʹ����һλ�����ϵ��Ŀ������֣�ҲҪ����Ӧ�Ը���bug����ʱ������һ��bug�Ứ�Ѽ���Сʱ��
ʤ��
CSS�ͻ���web��������ʤ����ֻҪ�������ַ����Ĵ�������������ѡ���ˡ�CSS�ṩ�˸����ĺô�(��Ҫ�������Է���)����ʵ������ԭ�����ҵ����衣�����ñ������ƣ��ͻ�һ������ϵ��˵��Ҫ�İ棬�ҿ��ܻ��������Ҳξ��ˣ����ڹ���ij�����塣������ʹ�õ���CSS���ҽ�����˼����Ϊ�ͻ��İ棬��Ϊ�Ҳ���Ҫȫ���Ʒ�������
��л
ллAva McBride��ʹ��Browsercam ���������ҵ����ơ�
- ת����ע����Դ��ITѧϰ�� ��ַ��http://www.t086.com/ �����������Ƽ�������
- �ر������� ��վ�������ر�������ֹת�ص�ר�������������¿�������ת�أ���������ע��������ԭʼ���ߡ����°�Ȩ������ԭʼ�������С����ڱ���վת�����µĸ��˺���վ�����DZ�ʾ������л�⡣������վת�ص������а�Ȩ��������ϵ���ǣ����ǻᾡ�����Ը�����
- �������е���ɫ
- �������ж�IP��ַ��A��B���C��
- ������ϵ��Ц�� (ʷ����ȫ��
- ��Google���������ŵ���ͨv4.0
- ���ٶ�ͳ��URL��hm������utm�����Ķ�Ӧ��ϵ
- ��ƻ������MACbook Air���ݼ���ȫ
- ��Linux��ʹ��host��dig��nslookup��ѯDNS
- ���������ԡ���װ Windows XP ����ϵͳ��ͼ��ȫ����
- �����Լ���VPS�Google��������
- ��С�ڴ�VPS֮Nginx+PHP-fpm�߸����Ż���ѹ�����Է���