Estilo-orriko estilo-orriko kaskaden ikuspegi orokorra
Webgune bat eraikitzen duzunetik hutsetik, oinarrizko estiloak definitzen hasiko da. Oihal garbi eta eskuila freskoekin hasten da. Web diseinatzaileek aurre egin beharreko lehenetariko bat web nabigatzaile desberdinak dira. Letra-tipoaren tamaina lehenetsia plataforma batetik bestera desberdina da, letra-tipoaren familia lehenetsia ezberdina da, nabigatzaile batzuek marjinak eta betegarria gorputz-etiketaren markoan zehazten dituzte, besteak beste, eta abar. Konstrukzio horien inguruan, web orrien estilo lehenetsiak zehazten ditu.
CSS eta karaktere multzoa
Lehenik eta behin, ezarri zure CSS dokumentuen karaktere UTF-8 . Litekeena da diseinatzen dituzun orrialde gehienak ingelesez idazten dituzunean, batzuek lokalizatu ditzakete testuinguru linguistiko eta kultural ezberdinetarako. Noiz dira, utf-8 prozesua errazten du. Kanpoko estilo-orriaren karaktere-jokoa ez da HTTP goiburu baten gaineko lehentasuna izango, baina beste edozein egoeratan egingo da.
Karaktere multzoa konfiguratzeko erraza da. CSS dokumentuaren lehen lerroan idatzi:
@charset "utf-8";Horrela, nazioarteko karaktereak erabiltzen badituzu edukien jabetza edo klase eta ID izenak bezala, estilo-orriak ondo funtzionatuko du.
Orriaren gorputza estilizatzea
Hurrengo estilo orri estilo lehenetsiak estilo-orrien marjinak, betegarriak eta mugak dira. Hori dela eta, arakatzaile guztiek leku berean eduki dezakete edukia, eta ez dago arakatzailearen eta edukien artean dagoen ezkutuko gunerik. Web orrialde gehienentzat, hau testuarekiko ertzetik hurbil dago, baina garrantzitsua da hasieratik irudiak eta diseinu zatiketa ondo lerrokatzea.
html, body {marjina: 0px; betegarria: 0px; mugan: 0 px; }Ezarri aurreko planoko edo letra tipo lehenetsia beltza eta atzeko planoko kolore lehenetsia zuriora. Hau ziurrenik web orrien diseinu gehienetan aldatuko den bitartean, gorputz eta HTML etiketaren gainean kolore estandar hauek edukitzea lehenengoz errazagoa da irakurtzea eta lan egitea.
html, body {kolorea: # 000; atzeko planoa: #fff; }Letra-tipoen esteken lehenetsia
Letra-tipoaren eta letra-tipoaren familia ezinbestean aldatuko dira diseinua eusten duen momentuan, baina 1 letra-tipoaren letra-tamaina lehenetsia eta Arial, Geneva edo beste sans-serif letra-tipoko letra-tipoaren letra-tipoa lehenetsiz. Ems erabiltzea ahalik eta orriena ahalik eta gehien sar dadin, eta sans-serif letra-tipo bat gehiago irakurgarria da pantailan.
html, body, p, th, td, li, dd, dt {font: 1rial Arial, Helvetica, sans-serif; }Testu bat aurki dezakezun beste leku batzuk egon litezke, baina p , th , td , li , dd eta dt letra-tipoa definitzeko hasiera ona dira. HTML eta gorputza sartzen dira kasu honetan, baina nabigatzaile askok letra-tipoen aukerak gainidazten dituzte HTML edo gorputzerako letra-tipoak bakarrik definitzen badituzu.
Azalean
HTML izenburuak oso garrantzitsuak dira zure webgunearen eskema erabiltzeko eta bilatzaileek zure webgunean sakontzeko. Estiloik gabe, nahiko itsusi guztiak dira, beraz, estilo lehenetsiak ezarri behar dituzu denak eta letra-tipo familia eta letra-tipoen tamaina zehaztu.
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.9em; } h6 {font-size: 0.8em; }Ez ahaztu loturak
Esteken koloreak estilizatzea ia diseinuaren alderdi kritikoa da beti, baina estilo lehenetsiak definitzen ez badituzu, aukerak gutxienez sasi-klaseetako bat ahaztuko dituzu. Definitu urdinez aldakuntza txiki batzuekin eta, ondoren, aldatu definitutako guneko kolore-paleta.
Estekak tonu urdinetan ezartzeko, ezarri:
- estekak urdinez
- bisitatu estekak urdin iluna bezala
- Pasatu estekak urdinez
- lotura aktiboak ere urdinak dira
adibide honetan agertzen den moduan:
a: esteka {kolorea: # 00f; } a: bisitatu {color: # 009; } a: pasatzean {kolorea: # 06f; } a: aktiboa {color: # 0cf; } Kolore nahigabeko koloreekin loturiko loturak estutuz, klaseak ez ditut ahaztuko, eta urdin, gorria eta morea lehenetsitakoak baino pixka bat gutxiago egiten ditu.Full Style Sheet
Hemen dago estilo-orri osoa:
@charset "utf-8"; html, body {marjina: 0px; betegarria: 0px; mugan: 0 px; kolorea: # 000; atzeko planoa: #fff; } html, body, p, th, td, li, dd, dt {letra-tipo: 1eko 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.9em; } h6 {font-size: 0.8em; } a: esteka {kolorea: # 00f; } a: bisitatu {color: # 009; } a: pasatzean {kolorea: # 06f; } a: aktiboa {color: # 0cf; }