Ohun Akopọ ti Awọn Aṣiṣe Awọn Ẹda Awọn Ọpa Pẹlu Apẹẹrẹ Style Style
Nigbati o ba kọ aaye ayelujara kan lati ori, o ni irọrun lati bẹrẹ pẹlu awọn iru ipilẹ ti a sọ. O dabi bibẹrẹ pẹlu kanfasi ti o mọ ati awọn didan titun. Ọkan ninu awọn iṣoro akọkọ ti awọn apẹẹrẹ oju-iwe ayelujara ṣe ojuju ni pe awọn aṣàwákiri ayelujara gbogbo yatọ. Iwọn aiyipada ti aiyipada yatọ si irufẹ si irufẹ, ẹbi oriṣi aiyipada ti o yatọ, diẹ ninu awọn aṣàwákiri ṣapejuwe awọn agbegbe ati awọn oju iwọn lori ami ara nigba ti awọn miran ko, ati bẹbẹ lọ. Gba awọn iyatọ wọnyi ko nipa ṣe apejuwe awọn aza aiyipada fun awọn oju-iwe ayelujara rẹ.
CSS ati Iṣawe Ti iwa
Akọkọ ohun akọkọ, ṣeto ṣeto ti ohun kikọ rẹ iwe CSS si utf-8 . Lakoko ti o ṣeese pe ọpọlọpọ awọn oju-ewe ti o ṣe apẹrẹ ni a kọ ni ede Gẹẹsi, diẹ ninu awọn le wa ni idojukọ-ti a ṣe deede fun awọn oriṣiriṣi ede ati aṣa. Nigba ti wọn ba wa, utf-8 simplifies ilana naa. Ṣiṣeto ṣeto ohun kikọ ni folda ti ita ita kii yoo ṣe iṣaaju lori ori akọle HTTP , ṣugbọn ni gbogbo awọn ipo miiran, o yoo.
O rorun lati ṣeto ṣeto ohun kikọ. Fun ila akọkọ ti iwe CSS kọ kọwe:
@charset "utf-8";Ni ọna yii, ti o ba lo awọn ohun-ede agbaye ni ohun-ini akoonu tabi bi kilasi ati awọn orukọ ID, fọọmu ara yoo tun ṣiṣẹ ni pipe.
Ṣiṣe oju-iwe Page
Ohun miiran ti o yẹ ni aifọwọyi ti ara ẹni jẹ awọn aza si awọn agbegbe ti o wa ni ita, padding, ati awọn aala. Eyi yoo rii daju wipe gbogbo awọn aṣàwákiri gbe ibi naa si ibi kanna, ati pe ko si awọn aaye alafo pamọ laarin ẹrọ lilọ kiri ayelujara ati akoonu. Fun ọpọlọpọ awọn oju-iwe wẹẹbu, eyi wa ni eti si eti fun ọrọ, ṣugbọn o ṣe pataki lati bẹrẹ nibẹ ki awọn aworan ti o wa lẹhin ati awọn ipin ti a ṣe ila ti wa ni ila daradara.
html, ara {ala: 0px; padding: 0px; aala: 0px; }Ṣeto ijinlẹ aiyipada tabi awọ awoṣe si dudu ati awọ awọ aiyipada si funfun. Nigba ti eyi yoo ṣe iyipada fun ọpọlọpọ awọn aṣaju wẹẹbu, nini awọn awọ boṣewa ti a ṣeto lori ara ati HTML tag ni akọkọ ṣe ki oju-iwe le rọrun lati ka ati ṣiṣẹ pẹlu.
html, ara {awọ: # 000; lẹhin: #fff; }Aiyipada Font Styles
Iwọn nọmba fonti ati ẹbi ẹsun jẹ nkan ti yoo ma daadaa yipada nigba ti ẹri naa ba di mu ṣugbọn bẹrẹ pẹlu iwọn aiyipada aiyipada ti 1 em ati iyajẹ aiyipada ti Arial, Geneva, tabi diẹ ẹ sii omiiran lai-serif. Lilo awọn ems pa oju-iwe naa mọ bi o ti ṣeeṣe, ati fonti lai-serif jẹ diẹ sii legible lori iboju.
html, ara, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }O le wa awọn aaye miiran ti o le rii ọrọ, ṣugbọn p , th , td , li , dd , ati dt jẹ ibere ti o dara fun asọye fonti fonti. Fi HTML ati ara wa ninu ọran, ṣugbọn ọpọlọpọ awọn aṣàwákiri ṣakoso awọn aṣayan awọn ẹda ti o ba ṣokasi awọn lẹta rẹ fun HTML tabi ara.
Awọn akọle
Awọn akọle HTML jẹ pataki lati lo lati ṣe iranlọwọ fun akopọ aaye rẹ ki o si jẹ ki awọn eroja àwárí jinle si aaye rẹ. Laisi awọn aza, gbogbo wọn jẹ ẹwà ti o dara julọ, nitorina ṣeto awọn aiyipada aiyipada lori gbogbo wọn ki o si setumo ẹbi fonti ati awọn titobi titobi fun ọkọọkan.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9m; } h6 {fon-iwọn: 0.8; }Don & # 39; Gbagbe Awọn Isopọ
Ṣiṣe asopọ asopọ awọn awọ jẹ fere nigbagbogbo ipinnu pataki ti oniru, ṣugbọn ti o ko ba ṣe apejuwe wọn ni awọn aza aiyipada, awọn o ṣeeṣe ni iwọ yoo gbagbe o kere ju ọkan ninu awọn ile-iṣẹ-pamọ. Ṣeto wọn pẹlu diẹ iyatọ kekere lori bulu ati lẹhinna yi wọn pada ni kete ti o ni awoṣe awọ fun oju-iwe ti a yan.
Lati ṣeto awọn ìjápọ ni awọn awọ ti buluu, ṣeto:
- awọn ọna asopọ bi bulu
- wo awọn isopọ biiu dudu
- hover links bi buluu to dara
- awọn ìjápọ ti nṣiṣẹ bi paapaa buluu
bi a ṣe han ninu apẹẹrẹ yii:
a: ọna asopọ {awọ: # 00f; } a: ṣàbẹwò {awọ: # 009; } a: hover {awọ: # 06f; } a: lọwọ {awọ: # 0cf; } Nipasẹ sisọ awọn ọna asopọ pẹlu iṣọn-awọ ti o ni ẹwà ti o ni idaniloju ti o ni idaniloju pe emi ko gbagbe eyikeyi awọn kilasi, ati pe o tun mu ki wọn kere ju kekere lọ ju buluu, pupa, ati eleyi ti o fẹlẹfẹlẹ.Ipele ti Kikun
Eyi ni folda ti o ni kikun:
@charset "utf-8"; html, ara {ala: 0px; padding: 0px; aala: 0px; awọ: # 000; lẹhin: #fff; } html, ara, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9m; } h6 {fon-iwọn: 0.8; } a: ọna asopọ {awọ: # 00f; } a: ṣàbẹwò {awọ: # 009; } a: hover {awọ: # 06f; } a: lọwọ {awọ: # 0cf; }