T086ѧϰ�� | վ��ѧԺ | �����ĵ� | ���� | Ъ���� | IP��ַ��ѯ | �������� | ���ջ��� | �����ֵ� | ���ù��� | ������Ϣ��ѯ

�����Ծ�CSS--һ������֮ս

�� ��Դ����ҳ����ʦ���ߣ����� ����ʱ�䣺2004-12-06 | ���壺�� �� С��
[����]ԭ�����ߣ�Sergio Villarreal ���߼��飺ī������ҳ����ʦ��1993���Ӵ����磬������ҳΪOvercaffeinated.net ԭ�ij�����sitepoint.com ԭ�ķ���ʱ�䣺2004��5��27�� ǰ�� �ҵ�һ����internet�ϳ����õĻ������նˡ���...
  • ԭ�����ߣ�Sergio Villarreal
  • ���߼��飺ī������ҳ����ʦ��1993���Ӵ����磬������ҳΪOvercaffeinated.net
  • ԭ�ij�����sitepoint.com
  • ԭ�ķ���ʱ�䣺2004��5��27��

����sergio��Ƭ

ǰ��

�ҵ�һ����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���ֵ����ơ��ҽ������ݵı�ʶ��ʼ���ҽ�����ʹ��ʶ�����壬���������ı�ǩ��

ҳͷ��һ��ͼƬ������Ҳ��һ�����⣬����������д���룺

<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�ϳ����˴��󣬲˵���һЩ����ʧЧ����λ��ҳͷЧ��������ͼƬ��

Ie5.0�ϵĴ���

������������bug���Ա��޸������ǿ��ǵ���ƪ���µ����ⷶΧ���Ҳ�չ�����ˡ���������һ����ʵ�Ŀͻ���Ŀ���ҿ϶���������I E5.0���û����ڸ���һ�����������У�CSS�����Ʊ��ֵ�һ���㡣

IE4

��IE4�еĴ�������

Netscape 4.7x

��Netscape4.7�еĴ�������

�����Բ�֧��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�ʾ������л�⡣������վת�ص������а�Ȩ��������ϵ���ǣ����ǻᾡ�����Ը�����
  • ��
  • ��
  • ��
  • ��
  • ��
  • ��
  • ��
  • ��
  • ��
������ѯ Health Check Gulangyu
© 2017 T086ѧϰ�� - T086.com(ԭitlearner.com)
RunTime:9.18ms QueryTime:7