CSS3: Vadnica z vsemi osnovami za začetnike
V tej vadnici vam bomo predstavili CSS3. CSS3 je nov standard za opredelitev zasnove spletnega mesta ali dokumenta. CSS je poleg HTML-ja najpomembnejši temelj v spletnem razvoju.
CSS3 Tutorial: Zahteve
Preden lahko začnete programirati CSS, potrebujete urejevalnik. Priporočamo brezplačni urejevalnik Notepad ++, ki je na voljo samo za Windows. Če delate z Macom, boste tukaj našli dobre alternative. Potrebujete tudi znanje HTML. Osnove HTML5 najdete v drugem praktičnem nasvetu.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger.webp)
Vadnica: Struktura ukazov CSS
Najprej se naučimo osnovne strukture ukazov CSS.
- V bistvu se morate pri izdelavi ukaza CSS vprašati, kdo naj vzame vrednost, ki jo določena lastnost ima.
- Primer: Vsi
Naslovi bi morali imeti v rdeči barvi lastnosti lastnosti pisave.
- Sintaksa potem izgleda tako: [element] {[lastnosti]: [vrednost]; }
- V našem primeru obarvamo naslov takole: h1 {barva: rdeča; }
- V kodrastih oklepajih si lahko med seboj sledijo poljubno število parov vrednosti lastnosti.
- Pomembno: vsak par se mora končati s podpičjem.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger-2.webp)
Vadnica za CSS3: Vdelajte CSS v HTML
Obstajajo trije načini vdelave CSS-ja v HTML, vendar je samo eden od njih resnično smiseln.
- Varianta 1: Prilagoditev neposredno v elementu s atributom slog. primer:
naslov
- To velja samo za ta en element. Tudi tukaj lahko zaporedoma uporabimo več parov vrednosti nepremičnin.
- Različica 2: Na začetku datoteke HTML znotraj oznake v dokumentu. Primer: h1 {barva: rdeča; barva ozadja: modra; }
- 3. različica: oddajanje v drug dokument. Ukaze zapišite v zunanjo datoteko s pripono .css. Nato to datoteko vključite v glavo HTML.
- Skoraj v vsakem primeru morate uporabiti različico 3. To je edini način uporabe zasnove v več datotekah HTML, ne da bi morali večkrat isto kodo napisati.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger-3.webp)
Vadnica za CSS3: Elementi, ID-ji in razredi kot izbirniki
Prva vrednost pred naramnicami vedno ustreza izbirniku. To določa, za koga se uporablja naslednje:
- Dan lahko preprosto uporabite kot izbirnik. To potem vpliva na vsak element te oznake. V zgornjem primeru bi bil vsak naslov h1 rdeče barve.
- Lahko pa uporabite ID, da zagotovite, da je mogoče uporabiti samo en element. Če želite to narediti, dodajte atribut v element HTML:
Moja glava
- Nato navedite ta ID na listu CSS z oznako # pred izbirnikom: #myHeader {color: red; }
- Lahko pa dodelite razrede, da vplivajo na nekatere, vendar ne na vse elemente:
Moja glava
- Namesto številke # uporabite ».« V CSS pred izbirnikom: .myH1Class {barva: rdeča; }
Vadnica za CSS: pomembne funkcije
Spodaj so ključne lastnosti, ki jih potrebujete za manipuliranje videza elementov.
- barva: dodelite barvo pisave. Številne običajne barve so vnaprej določene, na primer rdeča, črna, bela, rumena itd. Posamezne barve lahko določite kot šestnajsti vrednosti: # B3D2FF
- barva ozadja: to uporabite za dodelitev barve ozadja. Lahko uporabite iste barve kot za barvo.
- obroba: Določite okvir okoli elementa. obroba: črna 2px trdna; ustvari na primer črni okvir.
- velikost pisave: nastavite velikost pisave. Tu so pogoste relativne vrednosti (em) ali točke (pt).
- širina in višina: določite širino in višino elementov. Običajno se to izvede statično prek pikslov (px) ali glede na največjo vrednost v odstotkih: div {width: 70%; višina: 300px; }
- float: Z levo in desno določite, ali naj bo element poravnan levo ali desno.
- oblazinjenje: Vnesite oblazinjenje. Na primer, besedilo lahko postavite v polje.
- margin: Podobno kot oblazinjenje, le da tukaj določite rob. Tako lahko ustvarite vrzel med dvema škatlama.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger-4.webp)
Vadnica za CSS3: možnosti s CSS3
S CSS3 je manj pogosto potrebno ustvariti in integrirati lastno grafiko, saj lahko več učinkov ustvari dinamično.
- motnost: Z vrednostjo med 0 in 1 lahko preprosto določite preglednost elementov.
- Barve lahko zdaj določite v HSL formatu. „H“ pomeni odtenek (odtenek), „S“ za nasičenost (nasičenost) in „L“ za lahkotnost: barva: hsl (300, 100%, 60%);
- box-shadow: Določite senco za območje. škatla-senca: 10px 10px 10px rdeča; bi ustvaril rdečo senco na desni in spodaj.
- meja polmer: preprosto ustvarite zaobljene vogale za površine ali slike.
![](http://hackzl.com/img/internet/4028/css3-tutorial-mit-allen-basics-f-r-einsteiger-5.webp)
Kako spremeniti razmik vrstic HTML s CSS, si lahko preberete v naslednjem praktičnem nasvetu.