Ikasi zure webgunearen itxura hobetzen
CSS estiloko estiloak nola ikasten ikasteko modu bikaina da zure webgunearen itxura hobetzeko. HTML formak ezin dira, dudarik gabe, web orrialde gehienetan gauzarik okerren artean. Sarritan aspergarriak eta utilitaristak dira eta ez dute estiloan asko eskaintzen.
CSS-rekin, hori alda daiteke. CSS konbinatuz inprimaki aurreratuen etiketekin konbinatuz, itxura polita ematen die inprimakiak.
Aldatu koloreak
Testuarekin gertatzen den bezala, inprimakiaren elementuen aurreko plano eta atzealdeko koloreak alda ditzakezu.
Forma osoko forma ia guztietan atzeko planoaren kolorea aldatzeko modu erraz bat sarrerako etiketa atzeko planoaren kolorea erabiltzea da. Adibidez, kode honek atzeko planoko koloreko urdina (# 9cf) elementu guztietan aplikatzen du.
sarrera {
atzeko planoaren kolorea: # 9cf;
kolorea: # 000;
}
Forma osagarri jakin batzuen atzeko planoaren kolorea aldatzeko, gehitu testua eta hautatu estiloari. Adibidez:
sarrera, testua, aukeratu {
atzeko planoaren kolorea: # 9cf;
kolorea: # 000;
}
Ziurtatu testuaren kolorea aldatu zure atzeko planoko kolorea iluntzen baduzu. Kolore kontrasteek inprimakien elementuak errazago irakurtzeko balio dute. Esate baterako, atzeko planoko kolore ilun ilunetan testua askoz ere erraz irakurtzen da testuaren kolorea zuria bada. Adibidez, kode honek testu zuriak hondo gorri batean jartzen du.
sarrera, testua, aukeratu {
atzeko planoaren kolorea: # c00;
kolorea: #fff;
}
Atzeko planoaren kolorea ere jarri dezakezu inprimakiaren etiketan. Gogoratu inprimaki etiketa blokeko elementua dela , beraz, kolorea laukizuzen osoa betetzen du, ez elementuen kokapenak bakarrik.
Hondo hondo bat blokeko elementu bat gehi dezakezu eremu hau nabarmentzeko, honela:
inprimakia {
atzeko planoko kolorea: #ffc;
}
Gehitu ertzak
Koloreen arabera, forma osagarrien ertzak alda ditzakezu. Forma osorako inguruko ertza bakarra gehi dezakezu. Ziurtatu betegarria gehitzea, edo zure inprimakiaren elementuak mugitu egingo dira ondoan.
Hona hemen 1 pixel ertz beltzaren kodea 5 ataleko pixeleko adibide bat:
inprimakia {
mugan: 1px solid # 000;
betegarria: 5px;
}
Inprimakiak bakarrik baino gehiago mugi ditzakezu. Sarrerako elementuen ertza aldatu bereizteko:
sarrera {
mugan: 2px lerro # c00;
}
Kontuz ibili sarrera kutxetan kokatzen duzunean kutxa kaxak bezalakoak baino gutxiagotan ikusten dituztela eta jende batzuek ezingo lukete bete inprimakia bete dezaten.
Konbinatu estiloaren ezaugarriak
Zure inprimaki-elementuak pentsamendua eta CSS batzuekin bateratuz, zure webgunearen diseinua eta diseinua osatzeko modu atsegina bilatzen du.