CSS Natrag na Osnove Terminologije objašnjeno
CSS ili Cascading Stylesheets upotpunjuju jezik definiranja pravila dizajna za naš web. Umjetnici posvuda koriste CSS na dnevnoj bazi za stvaranje, organiziranje i kodiranje skupova pravila za osnovne izglede web-lokacija. Ovo je postao najpopularniji jezik za dizajn front-end i pruža nevjerojatne sposobnosti s nedavnim izdanjem CSS3. Ali što zapravo znači cijeli ovaj kod?
Sam jezik je u potpunosti razvijen već nekoliko godina. Zbunjenost može nastati uglavnom zbog pogrešne komunikacije i zloupotrebe sličnih pojmova. CSS donosi mnogo novih koncepata u tablicu. Mi ćemo pokriti neke od najpopularnijih terminologija za svladati kao CSS guru.
Zašto specijalizirati s CSS-om?
Ovo pitanje je postavljeno prije, pa čak i ulaskom u 2011. možemo vidjeti iste rezultate. CSS je robustan jezik koji ne voli skriptiranje ili programiranje. To je stilski jezik, točnije kod koji se koristi za opisivanje ponašanja web-stranice.
Koristeći CSS možemo izravno manipulirati atributima iz pojedinih HTML elemenata. Na sve blokove, paragrafe, veze i slike mogu utjecati CSS pravila. Preciziranje semantike prezentacije za web uvijek je bio veliki korak. To je glavni razlog zašto je CSS i dalje vodeći igrač dizajnera - nitko nije stvorio ništa bolje!
Svojstva i vrijednosti
To je najjednostavniji način provale u CSS. Sve šifre spadaju u dvije akcije: odabir elementa za primjenu dizajna i ono što se primjenjuje. Potonji se stvara kroz parove svojstava / vrijednosti.
Kao primjer boja: crvena; je vrlo jednostavan par / svojstvo / vrijednost. Imovina koju smo koristili jest boja što nam omogućuje da prođemo u bilo kojem prihvatljivom vrijednost za promjenu boje teksta. To mogu biti i heksadecimalni ili RGB (crveno-zeleno-plavi) podaci u boji. Mnogo puta dizajneri neće spominjati ideju o vrijednostima jer to može dovesti u zabludu.
Svojstva i vrijednosti su zapravo jedna ideja. Svaka deklaracija o imovini zahtijeva vrijednost, a vrijednosti su same po sebi besmislene. Postoji mnogo online dokumentacije koja prolazi kroz mnoga različita svojstva i kako oni utječu na HTML elemente. Preporučujem kupnju CSS referentne knjige iz bilo koje knjižare u blizini. Oni su prilično jeftini i drže većinu informacija koje su vam potrebne.
Vrijednosti odabira
Izbornici su potrebni za dovršetak cijelog retka CSS koda. To je ono što izjavljujemo da odredimo koju vrstu elementa ciljamo. Postoji mnogo selektora i mnogi su toliko zamršeni da prosječni dizajner ne bi trebao vještine. Provjerite dokumente odabira W3 ako želite saznati više.
Najjednostavniji način za započinjanje definicija stila je korištenje golih elemenata kao selektora svojstava. To znači manipuliranje root koda kao što je p za paragrafe, div za podjele, pa čak i tijelo i hTML može se koristiti za manipuliranje cijelim dokumentom web-stranice. U nastavku je kratak primjer oblikovanja svih elemenata stavka.
p familija fontova: Arial, sans-serif; boja: # 222; font-weight: bold;
Ono što daje stvarnu težinu CSS-u je koliko precizna selekcija može biti snajperska. Najbolji način za postizanje ciljanih stilova je kroz dvije metode poznate kao klase i ID. To su uobičajene ideje u HTML-u gdje možete postaviti bilo koji element da ima ID i vrijednost klase kroz atribute. Onda pomoću CSS-a jednostavno je primijeniti stilove na taj blok.
p # firstpar font-size: 14px; / * paragrafa stilova s ID-om "firstpar" * / p.comment font-size: 1.0em; line-height: 1.3em; / * stilovi odlomci s razredom "komentar" * /
Duljina jedinica i vrijednosti
Često se ovi uvjeti miješaju, a ne veliko iznenađenje. Vrijednosti su objašnjene ranije kao prostor koji koristimo za opisivanje svojstva. Jedinice duljine također su vrijednosti u kojima se koriste za opisivanje imovine.
Razlika je u tome što ove vrijednosti zahtijevaju numeričke podatke i stoga moraju vratiti neki oblik jedinica. Pikseli (px) su najčešći i mogu se koristiti za većinu: širina / visina, veličina fonta, padding / margine, da navedemo samo nekoliko.
Osim ovih, možete vidjeti postotke (%) koji se često koriste kroz raspored tekućina. Kada postavite vrijednosti širine na postotak, kompilator će pretpostaviti da je 100% cijela širina web-preglednika. To dizajnerima daje veliku preciznost prilikom primjene stilova na strukturu rasporeda, pa čak i tipografiju stranica.
Blok deklaracije
Nakon što smo sve ove pojmove stavili zajedno, konačno smo mogli razgovarati o osnovnoj ideji iza stilskih listova. Blokovi koda koriste se za ocrtavanje tematskih područja i navođenje pojedinosti o elementima. Na primjer, u nastavku je redak koda za jednostavan navigacijski spremnik:
div # nav prikaz: blok; širina: 100%; obloga: 3px 6px; margin-bottom: 20px;
Najjednostavniji način za prikazivanje ovog koda je redanje svojstava jedan za drugim. CSS programeri su koristili blokove koda za razbijanje svake imovine na vlastitu liniju. Ovaj program ne samo da zauzima mnogo više prostora nego smanjuje sposobnost “obrati” Vaš list kako biste pronašli točno ono što trebate.
Bolji način razbijanja blokova koda je razdvajanje savijenih elemenata u svoje nakon što dostignu prag. Taj je broj osoban i bit će različit za programere. To je točka preokreta u kojoj logika diktira da budalasto drži sve na jednoj liniji, uglavnom zbog čitljivosti.
Ispod sam napisao primjer bloka navigacijskih svojstava. Ova praksa održava dublje elemente na istom mjestu tako da su uređivanja svih navigacijskih elemenata mnogo jednostavnija.
div # nav prikaz: blok; širina: 100%; obloga: 3px 6px; margin-bottom: 20px; div # nav ul style-list: none; prikaz: blok; div # nav ul li float: lijevo; margin-right: 10px; veličina fonta: 12px; div # nav ul li a color: # 0f0f0f; text-decoration: none; prikaz: inline-blok; obloga: 2px 5px;
Moguća poboljšanja iz CSS2 / CSS3
U naslovima nedavno je non-stop govoriti o iznenađujuće koristi od CSS3. Ali ono što stvarno ima promijenjen na jeziku? Jasno je da će stari kod i dalje raditi. To barem pokazuje potpunu kompatibilnost kompajlera unatrag (uvijek dobro).
Glavne razlike uglavnom se odnose na nova imanja. Oni omogućuju da se zaokruženi kutovi i efekti padajućih sjena prikažu u pregledniku. CSS3 također nudi nove alate za opisivanje boja u dokumentu. HSL (Hue-Saturation-Lightness) je najnoviji uz HSLA koji uključuje Alpha kanal za smanjenje neprozirnosti.
Atributi selektora su veliki korak naprijed u pogledu ravnog markup stila. S ovim stilom koda možete ciljati određeni naziv elementa koji sadrži atribute s određenim vrijednostima. To je uglavnom korisno kada se radi s markupom, kao što je XML, gdje nema standardnih načela dizajna za manipuliranje čvorovima. Primjer u nastavku relativno je jednostavna ideja:
div [attrib ^ = "1"] / * stilova ovdje * /
Gore navedeni kôd dio je knjižnice CSS selektora. To bi utjecalo na sve div elemente s atributom “attrib” koja također ima vrijednost “1”. Ako je ovo još uvijek zbunjujuće, navedite primjer u nastavku da biste pojasnili. U teoriji ova dva selektora trebaju izvoditi iste radnje.
p [id ^ = "primary"] / * stilovi * / p # primarni / * stilovi * /
Zaključak
Nakon razbijanja nekih od prekomjerno zbunjenih izraza, CSS izgleda kao šetnja u parku. Jezik je vrlo intuitivan i početnici mogu početi projektirati unutar prvih nekoliko sati. To je ono što čini CSS tako popularnim među web programerima.
Prednosti CSS3 tek su počele djelovati. Tijekom nekoliko novih godina trendovi u razvoju weba pokazat će nam koliko kontrole imamo doista nad dizajnom web stranica. CSS trenutno stoji ponosan kao dominantni jezik za stiliziranje prednjih web stranica. Prakticiranje čak i na rudimentarnim vještinama srednje razine može proizvesti bogato iskustvo u dizajnu i daljnje znanje.
