CSS Nazaj na osnove Terminologies Explained
CSS ali Cascading Stylesheets dopolnjujejo definicijski jezik pravil za oblikovanje našega spleta. Umetniki povsod vsakodnevno uporabljajo CSS za ustvarjanje, organiziranje in kodiranje sklopov pravil za osnovne postavitve spletnega mesta. To je postal najbolj priljubljen jezik za front-end design in zagotavlja neverjetne sposobnosti z nedavno izdajo CSS3. Toda kaj vse to kodo dejansko pomeni?
Jezik je bil popolnoma razvit že nekaj let. Zmeda lahko nastane predvsem zaradi napačne komunikacije in zlorabe podobnih izrazov. CSS prinaša veliko novih konceptov v tabelo. Pokrivali bomo nekaj najbolj priljubljenih terminologij, ki jih bomo obvladali kot CSU guru.
Zakaj specializirati s CSS?
To vprašanje je bilo zastavljeno že prej in tudi če vstopimo v leto 2011, vidimo, da se pojavljajo enaki rezultati. CSS je robusten jezik, ki ni všeč skriptiranju ali programiranju. Gre za jezik sloga, natančneje za kodo, ki opisuje, kako naj se spletna stran obnaša.
Z uporabo CSS lahko neposredno manipuliramo z atributi posameznih elementov HTML. Na vse bloke, odstavke, povezave in slike lahko vplivajo pravila CSS. Izboljšanje semantike predstavitve za splet je bilo vedno velik korak. To je glavni razlog, zakaj je CSS še vedno vodilni igralec za oblikovalce - nihče ni ustvaril nič boljšega!
Lastnosti in vrednosti
To je najpreprostejši način za vdor v CSS. Vse kode spadajo v dva dejanja: izbiro elementa za uporabo modelov in kaj uporabiti. Slednji se ustvari s parom lastnine / vrednosti.
Kot primer barva: rdeča; je zelo preprost par / lastnost / vrednost. Lastnost, ki smo jo uporabili, je barve ki nam omogoča, da preidemo v katerokoli sprejemljivo vrednost spremenite barvo besedila. To je lahko tudi šestnajstiška koda ali RGB (rdeče-zeleno-modra) barvni podatki. Večkrat oblikovalci ne bodo omenjali ideje o vrednotah, ker je lahko zavajajoča.
Lastnosti in vrednosti so res ena ideja. Vsaka deklaracija za lastnino zahteva vrednost, same vrednote pa so brez pomena. Obstaja veliko dokumentacije na spletu, ki gre preko različnih lastnosti in kako vplivajo na elemente HTML. Priporočam, da kupite referenčno knjigo CSS iz katerekoli bližnje knjigarne. So precej poceni in imajo večino informacij, ki jih potrebujete.
Vrednosti izbirnika
Izbirniki so potrebni za dokončanje celotne vrstice kode CSS. To smo izjavili, da določimo, kateri tip elementa ciljamo. Obstaja veliko selektorjev in mnogi so tako zapleteni, da povprečni oblikovalec ne bi potreboval veščin. Preverite dokumente za izbiro W3, če želite izvedeti več.
Najpreprostejši način za začetek definicij slog je uporaba golih elementov kot izbirnikov lastnosti. To pomeni manipulacijo korenske kode, kot je str za odstavke, div za delitve in celo telo in html lahko uporabite za upravljanje celotnega dokumenta spletne strani. Spodaj je hiter primer oblikovanja vseh elementov odstavka.
p družina pisav: Arial, sans-serif; barva: # 222; font-weight: krepko;
Kar daje CSS pravi teži je, kako natančna je lahko izbirnik sniping. Najboljši način za doseganje ciljnih slogov je preko dveh metod, ki sta znana kot razredi in ID-ji. To so običajne ideje v HTML-ju, kjer lahko vsak element nastavite tako, da ima atribute ID in vrednost razreda. Nato s CSS-jem preprosto uporabite sloge za ta blok.
p # firstpar velikost pisave: 14px; / * odstavek s slogom "firstpar" * / p.comment font-size: 1.0em; line-height: 1.3em; / * slogov (i) z razredom "komentar" * /
Dolžina enot in vrednosti
Pogosto se ti pogoji spremenijo, ni veliko presenečenje. Vrednosti so bile pojasnjene prej kot umestitev, ki jo uporabljamo za opis lastnosti. Enote dolžine so tudi vrednosti, ki se uporabljajo za opis lastnosti.
Razlika je v tem, da te vrednosti zahtevajo številčne podatke in zato morajo vrniti nekatere oblike enot. Piksli (px) so najbolj razširjeni in se lahko uporabljajo za večino vsega: širina / višina, velikost pisave, oblazinjenje / robovi, da navedemo nekaj.
Razen teh lahko vidite odstotke (%), ki se pogosto uporabljajo v postavitvah tekočin. Ko nastavite vrednosti širine na odstotek, bo prevajalnik prevzel 100% celotne širine spletnega brskalnika. To daje oblikovalcem veliko natančnosti pri uporabi slogov za strukture postavitve in celo tipografijo strani.
Deklaracijski blok
Zdaj, ko smo združili vse te izraze, smo končno zmožni razpravljati o osnovni ideji za slogovnimi listi. Bloki kode se uporabljajo za označevanje tematskih področij in določanje podrobnosti elementov. Spodaj je na primer vrstica kode za preprost navigacijski vsebnik:
div # nav prikaz: blok; širina: 100%; oblazinjenje: 3px 6px; margin-bottom: 20px;
Najpreprostejši način za prikaz te kode je, da so lastnosti vrstic ena za drugo. Razvijalci CSS so uporabili bloke kode, da razdelijo vsako lastnost na lastno vrstico. Ta program ne zavzame le veliko več prostora, ampak zmanjša zmožnost “skim” vaš list, da bi našli točno tisto, kar potrebujete.
Boljši način za razdelitev blokov kode je ločevanje zapletenih elementov v svoje, potem ko dosežejo prag. Ta številka je osebna in bo različna med razvijalci. To je prelomna točka, kjer logika narekuje, da je neumno obdržati vse na eni liniji, predvsem zaradi berljivosti.
Spodaj sem skupaj napisal primer bloka navigacijskih lastnosti. Ta praksa ohranja globlje elemente na istem mestu, zato so urejanje vseh navigacijskih elementov veliko enostavnejše.
div # nav prikaz: blok; širina: 100%; oblazinjenje: 3px 6px; margin-bottom: 20px; div # nav ul slog seznama: nič; prikaz: blok; div # nav ul li float: levo; margin-right: 10px; velikost pisave: 12px; div # nav ul li a barva: # 0f0f0f; dekoracija besedila: nobena; prikaz: inline-block; oblazinjenje: 2px 5px;
Možni napredki iz CSS2 / CSS3
V naslovih nedavno je bilo non-stop govoriti o neverjetnih ugodnostih CSS3. Toda kaj je res spremenil v jeziku? Jasno je, da bo stara koda še vedno dobro delovala. To vsaj kaže popolno kompatibilnost nazaj med prevajalniki (vedno dobra stvar).
Večje razlike so večinoma povezane z novimi lastnostmi. Ti omogočajo zaokrožene vogale in učinke padajoče sence, ki se prikažejo v brskalniku. CSS3 ponuja tudi nova orodja za opisovanje barv v dokumentu. HSL (Hue-Saturation-Lightness) je najnovejši poleg HSLA, ki vključuje kanal Alpha za zmanjšanje motnosti.
Izbiralci atributov so velik korak naprej v zvezi z ravnim stilom za označevanje. S tem slogom kode lahko ciljate na ime določenega elementa, ki vsebuje atribute z določenimi vrednostmi. Te so večinoma uporabne pri delu z označevanjem, kot je XML, kjer ni standardnih načel oblikovanja za manipulacijo vozlišč. Spodnji primer je sorazmerno preprosta ideja:
div [attrib ^ = "1"] / * stilov tukaj * /
Zgornja koda je del knjižnice CSS selektorjev. To bi vplivalo na vse elemente div z atributom “atrib” ki ima tudi vrednost “1”. Če je to še vedno zmedeno, navedite spodnji primer, da pojasnite. Teoretično morata ta dva selektorja izvajati enake ukrepe.
p [id ^ = "primary"] / * styles * / p # primarni / * stili * /
Zaključek
Po razčlenitvi nekaterih najbolj preveč zmedenih izrazov se CSS zdi kot sprehod v parku. Jezik je zelo intuitiven in začetniki lahko začnejo oblikovati v prvih nekaj urah. To je tisto, zaradi česar je CSS tako priljubljen med spletnimi razvijalci.
Koristi CSS3 so šele začele veljati. V zadnjih nekaj letih bodo novi trendi na spletu pokazali, koliko nadzora imamo nad oblikovanjem spletnih strani. CSS je trenutno ponosen kot prevladujoči jezik za oblikovanje spletnih strani. Vadba v celo osnovne in srednje strokovne veščine lahko ustvari bogate izkušnje oblikovanja in nadaljnje znanje.
