lühike teave
CSS-i versioonid
Väärtused
url Väärtus on graafilise faili tee, mis on määratud konstruktsiooni url() sees. Faili tee saab kirjutada kas jutumärkides (kahe- või ühekordne) või ilma nendeta. none Keelab elemendi taustpildi. inherit Pärib vanema väärtuse.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektimudel
document.getElementById("elementID ").style.backgroundImage
Brauserid
Internet Exploreri versioonid kuni 7.0 (kaasa arvatud) rakendavad atribuudi hasLayout määratud elemendi sisepiirile tausta. Kui elemendil puudub hasLayout , järgib taustapildi atribuut elemendi piire, nagu spetsifikatsioonis täpsustatud. Ekraani erinevus on märgatav, kui äärised on pigem katkendlikud või punktiirjooned, mitte ühtsed.
Kui elemendiks on seatud kerimine või automaatne , on Internet Explorer 8-l taustal kerimisel ühepiksline vertikaalne viivitus.
Internet Exploreri versioonid kuni 7.0 (kaasa arvatud) pärimisväärtust ei toeta.
Kui taust on seatud tabelireale (silt
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Selle näite tulemus Chrome'i brauseris on näidatud joonisel fig. 1. Internet Exploreri, Opera ja Firefoxi brauserid kuvavad rea tausta õigesti (joonis 2).
Riis. 1. Korrake tausta iga lahtri jaoks
Riis. 2. Kogu rea taust
Autorilt: Tere kõigile. Taustavärvid ja -pildid mängivad veebidisainis tohutut rolli, kuna võimaldavad kujundada mis tahes elemente atraktiivsemalt. Täna vaatame, kuidas HTML-is tausta teha.
Kas tausta seadistamiseks on võimalik kasutada HTML-i?
Ütlen kohe, et ei. Üldiselt ei loodud html veebilehtede kujundamiseks. See on lihtsalt väga ebamugav. Näiteks on olemas atribuut bgcolor, millega saab määrata taustavärvi, kuid see on väga ebamugav.
Sellest lähtuvalt kasutame CSS-i (Cascading Style Sheets). Tausta seadmiseks on palju rohkem võimalusi. Täna vaatleme kõige elementaarsemaid.
Kuidas css-i abil tausta seadistada?
Nii et kõigepealt peate otsustama, millisele elemendile soovite tausta seada. See tähendab, et peame leidma valija, millele reegli kirjutame. Näiteks kui peate määrama tausta kogu lehe kui terviku jaoks, saate seda teha kehavalija kaudu ja kõigi plokkide jaoks div-valija kaudu. No jne. Taust saab ja peaks olema seotud mis tahes muude valijatega: stiiliklassid, identifikaatorid jne.
Kui olete valija kasuks otsustanud, peate kirjutama kinnisvara enda nime. Taustavärvi (nimelt ühevärvilise, mitte gradiendi või pildi) määramiseks kasutage atribuuti background-color. Pärast seda peate panema kooloni ja kirjutama värvi ise. Seda saab teha erineval viisil. Näiteks märksõnade, hex-koodi, rgb, rgba, hsl vormingute kasutamine. Iga meetod sobib.
Kõige sagedamini kasutatav meetod on kuueteistkümnendkood. Värvide valimiseks võite kasutada programmi, mis kuvab värvikoodi. Näiteks photoshop, paint või mõni veebitööriist. Vastavalt sellele kirjutan näitena kogu veebilehe üldise tausta.
keha( taustavärv: #D4E6B3; )
See kood tuleb sisestada peaosasse. On oluline, et failid oleksid samas kaustas.
Pilt taustaks
Pildi jaoks kasutan väikest html-keele ikooni:
Loome tühja ploki identifikaatoriga:
< div id = "bg" > < / div > |
Anname sellele selged mõõtmed ja taust:
#bg( laius: 400px; kõrgus: 250px; taustapilt: url(html.png); )
#bg( laius: 400 pikslit; kõrgus: 250 pikslit; taustpilt : url (html . png ) ; |
Sellest koodist on näha, et kasutasin uut omadust – background-image. See on mõeldud spetsiaalselt pildi lisamiseks html-elemendi taustaks. Vaatame, mis juhtus:
Pildi määramiseks tuleb kooloni järele kirjutada märksõna url ja seejärel sulgudes märkida faili tee. Sel juhul määratakse tee selle põhjal, et pilt asub html-dokumendiga samas kaustas. Samuti peate määrama pildi vormingu.
Kui olete seda teinud ja tausta ikka plokis ei kuvata, kontrollige uuesti, kas kirjutasite pildi nime õigesti, kas tee ja laiend on õigesti määratud. Need on kõige levinumad põhjused, miks taust lihtsalt ei ilmu, kuna brauser ei leia pilti.
Aga kas sa märkasid üht asja? Brauser võttis ja korrutas pildi kogu ploki ulatuses. Seega, teadmiseks, et see on taustpiltide vaikimisi käitumine – neid korratakse vertikaalselt ja horisontaalselt nii kaua, kuni need plokki mahuvad. Sellise käitumisega saate hõlpsasti kontrollida. Selleks kasutage atribuuti background-repeat, millel on 4 põhiväärtust:
Korda – vaikeväärtus, pilti korratakse mõlemalt poolt;
Korda-x – kordab ainult teljel x;
Repeat-y – kordab ainult piki y-telge;
No-repeat – ei korda üldse;
Saate kirjutada iga väärtuse ja vaadata, mis juhtub. Kirjutan selle nii:
background-repeat: kordus-x;
taust - kordamine : kordus - x ; |
Nüüd korrake ainult horisontaalselt. Kui seate no-repeat, siis oleks ainult üks pilt.
Suurepärane, võime siin lõpetada, kuna need on taustaga töötamise põhivõimalused, kuid ma näitan teile veel 2 atribuuti, mis võimaldavad teil paremini juhtida.
Kordamise kaudu suutsid küljendajad luua taustatekstuure ja gradiente ühe pisikese pildi abil. See võib olla 30 x 10 pikslit või isegi väiksem. Või võib-olla natuke rohkem. Pilt oli selline, et kui seda korrati ühelt või isegi mõlemalt poolt, ei paistnud ühtegi üleminekut, nii et tulemuseks oli ühtne õmblusteta taust. Muide, seda lähenemist tasub praegu kasutada, kui soovite oma veebisaidil taustana kasutada sujuvat tekstuuri. Tänapäeval saab gradienti juba rakendada css3 meetoditega, sellest räägime kindlasti hiljem.
Tausta asend
Vaikimisi on taustpilt ploki vasakus ülanurgas, kui see pole määratud korduma. Kuid positsiooni saab hõlpsasti muuta tausta-positsiooni atribuudi abil.
Saate seda määrata erineval viisil. Üks võimalus on lihtsalt märkida küljed, kus pilt peaks asuma:
tausta-positsioon: paremal üleval;
taust - asend: paremal üleval; |
See tähendab, et vertikaalselt jääb kõik samaks: taustpilt asub ülal, kuid horisontaalselt muutsime külje paremale, see tähendab paremale. Teine võimalus positsiooni määramiseks on protsent. Sel juhul algab loendus igal juhul vasakust ülanurgast. 100% - kogu plokk. Seega, et pilt täpselt keskele paigutada, kirjutame selle järgmiselt:
taustapositsioon: 50% 50%;
taustapositsioon: 50% 50%; |
Pidage meeles üht olulist asja positsioneerimisel – esimene parameeter on alati horisontaalasend ja teine vertikaalasend. Seega, kui näete väärtust 80% 20%, võite kohe järeldada, et taustpilt nihkub oluliselt paremale, kuid ei lange palju.
Ja lõpuks saate määrata asukoha pikslites. Kõik on sama, ainult % asemel on px. Mõnel juhul võib selline positsioneerimine olla vajalik.
Lühikiri
Nõus, et kood osutub üsna tülikaks, kui kõik on seatud nii, nagu meie tegime. Selgub, et pildile tuleb määrata tee, kordus ja asukoht. Muidugi pole kordus ja asend alati vajalikud, kuid igal juhul oleks õigem kasutada omaduse stenogrammi. See näeb välja selline:
taust: #333 url(bg.jpg) no-repeat 50% 50%;
taust: #333 url(bg.jpg) kordusteta 50% 50%; |
See tähendab, et esimene samm on vajaduse korral üldise ühtlase taustavärvi salvestamine. Siis tee pildile, kordusele ja positsioonile. Kui mõnda parameetrit pole vaja, jätke see lihtsalt vahele. Nõus, see on palju kiirem ja mugavam ning vähendame oluliselt ka oma koodi. Üldiselt soovitan teil kirjutada alati lühendatud kujul, isegi kui peate märkima ainult värvi või pildi.
Taustapildi suuruse reguleerimine
Meie praegune pilt ei ole väga hea järgmise triki demonstreerimiseks, nii et ma võtan teise. Olgu see ploki suurus või suurem. Niisiis, kujutage ette, et teil on ees ülesanne teha taustpilt nii, et see ei täidaks täielikult oma plokki. Ja näiteks pilt on isegi suurem kui ploki suurus.
Mida saate sel juhul teha? Muidugi oleks kõige lihtsam ja mõistlikum variant lihtsalt pilti vähendada, kuid alati pole seda võimalik teha. Oletame, et see on serveris ja hetkel pole aega ega võimalust seda vähendada. Probleemi saab lahendada atribuudi background-size abil, mida võib nimetada suhteliselt uueks ja mis võimaldab manipuleerida taustapildi ja tegelikult ka igasuguse tausta suurusega.
Nii et minu pilt võtab nüüd plokis kogu ruumi, kuid annan sellele tausta suuruse:
tausta suurus: 80% 50%;
tausta suurus: 80% 50%; |
Jällegi määrab esimene parameeter horisontaalse suuruse, teine - vertikaalse suuruse. Näeme, et kõik oli õigesti rakendatud - foto sai 80% ploki laiusest laiuses ja pooles kõrguses. Siin peate lihtsalt tegema ühe täpsustuse - määrates suuruse protsentides, saate mõjutada pildi proportsioone. Nii et olge ettevaatlik, kui te ei soovi proportsioone rikkuda.
Nagu arvata võib, saab tausta suurust määrata ka pikslites. Kasutada saab veel kahte märksõna:
Cover – pilt skaleeritakse nii, et vähemalt ühelt poolt täidab see ploki täielikult.
Contain – skaleerib seda nii, et pilt mahuks maksimaalses suuruses täielikult plokki.
Nende väärtuste eeliseks on see, et need ei muuda pildi proportsioone, jättes need samaks.
Samuti peaksite mõistma, et pildi venitamine võib põhjustada selle kvaliteedi halvenemist. Võin tuua näite küljendajate elust ja tegelikust praktikast. Kõik teavad ja mõistavad, et lauaarvutitele projekteerimisel peate saidi kohandama peamiste monitoride laiustega: 1280, 1366, 1920. Kui teete taustapildi, mille suurus on näiteks 1280 x 200, ja ärge andke seda. a taustasuuruses, siis suurema laiusega ekraanid Ilmub tühi ruum, pilt ei täida laiust täielikult.
99% juhtudest see veebiarendajale ei sobi, mistõttu ta määrab tausta suuruse: katta nii, et pilt veniks alati akna maksimaalse laiuseni. Seda tehnikat on hea kasutada, kuid nüüd seisate silmitsi probleemiga, et 1920 pikslise ekraanilaiusega kasutajad võivad näha ebaoptimaalset pildikvaliteeti.
Lubage mul teile meelde tuletada, et see venib maksimaalse laiusega. Sellest tulenevalt halveneb kvaliteet automaatselt. Ainus õige lahendus oleks siin esialgu kasutada suuremat pilti – laiust 1920 pikslit. Siis on kõige laiematel ekraanidel see loomulikus suuruses ja teistel lõigatakse see lihtsalt järk-järgult ära, kuid samal ajal, kui taustpilt on õigesti valitud, ei mõjuta see saidi välimust.
Üldiselt on see vaid 1 näide selle kohta, kuidas kasutada selles artiklis saadud teadmisi tõeliste paigutuste koostamisel.
Läbipaistev taust css-i abil
Teine funktsioon, mida saab css-i abil rakendada, on poolläbipaistev taust. See tähendab, et selle tausta kaudu on võimalik näha, mis selle taga on.
Näitena sean kogu lehe pildi taustaks, mida me varem näidetes kasutasime. Identifikaatoriga bg ploki jaoks, millel me kõik katsed teeme, määrame tausta rgba värviseadete vormingu abil.
Nagu ma varem ütlesin, on CSS-is värvide määramiseks palju vorminguid. Üks neist on rgb, graafiliste redigeerijate jaoks üsna tuntud formaat. See on kirjutatud nii: rgb(17, 255, 34);
Esimene väärtus sulgudes on punase, seejärel rohelise ja seejärel sinise küllastus. Väärtus võib olla numbriline vahemikus 0 kuni 255. Sellest lähtuvalt ei erine rgba-vorming, lisatakse ainult üks parameeter - alfakanal. Väärtus võib olla vahemikus 0 kuni 1, kus 0 on täielik läbipaistvus.
Ma arvan, et pole ühtegi kohta, kus kinnisvara ei kasutata CSS-i taust. Näib, et mis võiks olla lihtsam kui see vara? Aga ei, selle võimalused on palju laiemad kui tavaline pildi või värvi määramine lehe taustaks. Mõned on tuttavad ja mõned on ilmselt paljudele uued. Igal juhul on kasulik põhjalikult teada, kuidas taust töötab.
CSS3 tõi kinnisvarasse palju uut, nagu läbipaistvus ja mitme pildi taustaks määramine, kuid sellest räägime allpool, kuid kõigepealt vaatame vara põhitõdesid taustal.
taustavärv
Olen enam kui kindel, et olete taustavärvi juba mitu korda määranud. Seda saab teha mitut tüüpi tähistusega: tavaline (kasutatakse värvinime), kuueteistkümnendsüsteem või RGB-tähistus. Iga tüüp on samaväärne, kasutage seda, mis teile rohkem meeldib. Üritan kasutada kõige lühemat varianti ja lihtsamaks tajumiseks on tulemuseks olev stiilifail veidi väiksem.
P (taustavärv: punane;) p (taustavärv: #f00;) p (taustavärv: #ff0000;) p (taustavärv: rgb(255, 0, 0;))
CSS3 toetab läbipaistvust, nii et saame selle oma värvile lisada, näiteks järgmiselt:
P (taustavärv: rgba(255, 0, 0, 0,5);)
Viimane arv määras läbipaistvuseks 50%. Saate määrata läbipaistvuse väärtuse vahemikus 0 (täiesti läbipaistev taust) kuni 1 (täiesti läbipaistmatu).
taustapilt
Seda omadust kasutatakse ka väga sageli, see võimaldab määrata taustale pildi. CSS3 on lisanud võimaluse määrata taustale mitu pilti, millest igaüks loob oma kihi, nii et iga järgmine kattub eelmisega. Miks see võib kasulik olla? Kõik on üsna lihtne – oletame, et peate saidi igasse nurka kruvima väikesed volangid. Arvestades enam-vähem kummist paigutust, ei ole ühe pildi kasutamine võimalik. Seetõttu teeme 4 kihti, liigutame iga pildi oma nurka ja ongi kõik, probleem on lahendatud
Keha (taustapilt: url("pilt1"), url("pilt2"), url("pilt3"))
Kui teil on vaja taustale määrata üks pilt, jätame koodi ainult esimese, ma arvan, et see on arusaadav.
Piltide taustana kasutamisel peaksite meeles pidama kahte reeglit:
- määrake kontrastne taustavärv juhuks, kui kasutaja pilti mingil põhjusel ei näe. See võib liiklust säästes lihtsalt piltide kuvamise välja lülitada.
- Ärge kasutage olulise teabe edastamiseks taustapilti. Eespool nimetatud põhjustel ei pruugi kasutaja seda näha.
Mitme taustpildi tugi on üsna ulatuslik. Kõik brauserid, isegi IE8, toetavad seda atribuuti.
Tere, kallid ajaveebisaidi lugejad. Täna vaatleme viit CSS-i reeglit, mis võimaldavad teil määrata HTML-i mis tahes elemendi tausta - tausta asukoht (pilt, kordus, värv, manus). Noh, ärgem unustagem mainida ka taustaühendi reeglit.
Selles pole midagi keerulist, kuid on teatud nüansse ja nüansse, mida peate valmismalli kohta teadma (pidage meeles, et see aitab paljastada mis tahes kujunduse kõik nõksud ja küljed).
Tuletan teile veel kord meelde, et see artikkel on osa sarjast ja kõige parem oleks alustada stiili märgistamise uurimist algusest, nimelt artikliga selle kohta, mis on CSS ja millega seda kasutatakse, ning seejärel järgida antud järjekorras. teatmeteoses. Kuigi igal juhul on see teie otsustada, kuid nüüd räägime tausta seadistamisest.
Värv, taustavärv ja taustapilt
Vaatame kõigepealt, kuidas määrata HTML-i elementide värvi kasutades CSS-i värvireeglid. Tegelikult on siin kõik lihtne. Süntaks on täiesti normaalne ja värvi saab määrata vastavalt sellele, kuidas seda tehti hüperteksti märgistuskeeles. Nagu mäletate, asetatakse räsimärgi järele (räsi - “#fe35a3”) või kasutatakse kolme numbrit, kui esimene kattub teise väärtusega, kolmas kattub neljanda ja viies vastavalt kuuendaga ( värvikoodi "#aa33ff" võib lühidalt kirjutada kui "a3f").
Samuti saab HTML- ja Css-koodi värve esitada sõnade kujul (näiteks "punane"), kuid enamasti kasutatakse kuueteistkümnendkoodi:
Värv: #303
Näitena värvisin selle väikese lõigu sama värviga nagu ülal (#303). See erineb nüüd pisut kõigi teiste lõikude värvist (tumedam), milleks on minu kasutatava WordPressi teema CSS-failis seatud #555. Kuid värvi määramine värvi abil on üsna lihtne, kuid taustaga on see pisut keerulisem.
Niisiis, tausta jaoks Css-is Reegleid on viis, mida saab soovi korral üheks kombineerida. Nende nägemiseks võite minna praegusele W3C spetsifikatsioonide lehele ja otsida midagi, millel on sõna Taust:
- taustavärv – seda reeglit kasutades määrate iga HTML-elemendi taustavärvi. Kasutada võib kas koodi või tooni nimetust, st. kõik on täpselt sama, mis värvi kasutamisel.
taustapilt - selle abil saate taustana kasutada pilti (kuid lugege kindlasti selle kohta, sest rasked pildid aeglustavad lehtede laadimist), mille tee näidatakse url () funktsioonis.
Kui vaatate spetsifikatsiooni, näete seda vaikimisi taustavärv mis tahes element on läbipaistev (reegli vaikeväärtus on "background-color:transparent"). Tõsi, elementides ei ole see vaikimisi läbipaistev, sest Need on süsteemielemendid ja kõik nende juures erineb ja erineb tavalistest hüperteksti märgistuskeele siltidest.
Taustavärvi värv on seatud standardseks (kuueteistkümnendkoodi kuus või kolm numbrit või sõna):
Taustavärv: #FEFCDE
Näiteks selle lõigu taust määratakse taustavärvi abil, kasutades ülaltoodud värvikoodi.
Kõik ülejäänud neli CSS-reeglit puudutavad ainult taustpilti, mida saab määrata mis tahes HTML-elemendi jaoks ja soovi korral täpselt positsioneerida. Kasutatavat graafilist faili saab määrata kasutades taustapilt.
Kui vaatate märgistuskeele spetsifikatsiooni, näete, et taustapildi vaikeseade on "puudub" (st taustaks ei kasutata pilti). Noh, kui teil on seda endiselt vaja, peate funktsioonis url () märkima selle tee:
Background-image:url(https://site/image/comment_top_focus.gif);
Näiteks selle lõigu jaoks kasutasin taustaga graafilist faili, mille teed on kirjeldatud just ülal. Näete, et kogu selle lõigu jaoks eraldatud ala on kaetud korduva pildiga, mis originaalis näeb välja järgmine:
Need. kui kasutate ainult ühte taustapildi reeglit, mis näitab graafilise faili teed, korrutatakse sama pilti nii vertikaalselt kui ka horisontaalselt, kuni see katab kogu selle konkreetse HTML-elemendi jaoks veebilehel eraldatud ala (meie näites oli see lõik). Miks see juhtub?
Background-repeat – korrake taustpilti
Jah, kuna me ei määranud CSS-reegli jaoks väärtust taustakordus, mis tähendab, et selle jaoks kasutatakse vaikeväärtust. Vaadates spetsifikatsiooni, saame teada, et see väärtus vastab "korda" (korrake pilti kõigil telgedel). Vastus tuli loomulikult.
Seetõttu saame taustakordusega hakkama hallata taustapildi kordusi. Sellel reeglil võib olla ainult neli tähendust:
Background-position – taustapositsioneerimine
Nüüd tekib küsimus: kas taustapilti on võimalik elemendi suurust piirava ala vasakpoolsest ülemisest nurgast eemale nihutada. Muidugi saab ja selleks on eraldi reegel. tausta-positsioon:
CSS-i spetsifikatsiooni vaadates saab selgeks, miks taustpilt vaikimisi on vajutatud täpselt HTML-i elemendiala ülemisse vasakusse serva. Kuna väärtus "0% 0%" on taustapositsiooni reegli vaikeväärtus.
Noh, kui see reegel pole elemendi jaoks selgesõnaliselt määratud (nagu meie puhul), valib brauser selle väärtuse, mis on spetsifikatsioonis vaikimisi aktsepteeritud (pange tähele, et CSS-i koordinaatteljed esitatakse täpselt vasakust ülemisest servast ala elemendist).
Samuti on spetsifikatsioonist selge, et taustapildi positsioneerimiseks taustapositsiooni abil saate kasutada nii suhtelisi (protsendid) kui ka absoluutväärtusi (näiteks ). Noh, võite kasutada ka sõnu, mis vastavad teatud digitaalsetele väärtustele. Aga kõigepealt asjad kõigepealt.
Taustapildi asukoha määramisel kasutades absoluutühikuid taustapositsioonis kasutatakse selle lõpliku asukoha määramiseks järgmist põhimõtet:
Need. brauser arvutab kindlaksmääratud nihked piki X- ja Y-telge selle ala algpunktist, kus objekt on positsioneeritud, kuni selle pildi enda alguspunktini. Näiteks selles lõigus positsioneerisin taustpildi taustapositsiooni kaudu, kasutades järgmisi CSS-i reegleid:
Background-image:url(https://site/image/logo.png); background-repeat:no-repeat; taustapositsioon: 400 pikslit 25 pikslit;
Pange tähele, et sel juhul joondatakse see vaateala keskpunktiga, mitte nende lõikude jaoks eraldatud ala keskpunktiga. On selge, et tegelikkuses sellist taustapildi paigutust tõenäoliselt ei kasutata.
Kui aga määrate sellistele elementidele nagu keha või HTML (st kogu veebilehte katvates siltides) kindla taustapositsiooni, on see pilt alati vaateaknas nähtav ja see on täpselt CSS-i taustamanuse kasutamine. kinnistu kaasaegses plokkplaneeringus.
Kas on veel mõni kokkupandav reegel Taust, mis võimaldab ühendada kõik viis ülalkirjeldatud reeglit ühte pudelisse. Lisaks saab kombineeritud versiooni kõigi viie väärtusi kasutada mis tahes järjekorras ja mis tahes koguses (need on ainulaadsed ja brauser ei aja neid omavahel segamini). Kõik, mida te otseselt ei määra, eeldab brauser vaikeväärtuseks.
Png) ei kordu 50%;
Selguse huvides rakendatakse sellele lõigule näidisvalmistamisreeglit. Ilus ei tulnud, aga see pole peamine. See lõik kasutab kummalist kollast taustatäidet ja kasutab ka Liveinterneti logo kujutist, mis on joondatud lõigu keskele. Sest Kui taustamanuse reeglile väärtust ei anta, kasutatakse kerimisväärtust (vaikimisi).
Kui soovite mõne elemendi jaoks määrata ainult värvitäite ja mitte häirida taustapilti, saate seda teha:
Taustavärv: #FEFCDE
kirjuta:
Taust: #FEFCDE
Kuna kõik muud kokkupandava reegli väärtused võetakse vaikimisi ja see on see, mida te vajasite.
Edu sulle! Kohtumiseni ajaveebisaidi lehtedel
Võib-olla olete huvitatud
Loendi stiil (tüüp, pilt, asukoht) – Css-i reeglid loendite välimuse kohandamiseks HTML-koodis Kuidas seadistada saidi tabeliridade, loendite ja muude HTML-i elementide vahelduvat taustavärvi n-nda pseudoklassi abil 
Positsioon (absoluutne, suhteline ja fikseeritud) – viisid HTML-i elementide paigutamiseks CSS-is (reeglid vasakul, paremal, üleval ja all) 
Float and clear CSS-is – plokkide paigutuse tööriistad 
Positsioneerimine Z-indeksi ja CSS-i kursori reegli abil hiirekursori muutmiseks 
Täidis, veeris ja ääris – määrake CSS-is sisemine ja välimine polsterdus, samuti äärised kõikidele külgedele (ülemine, alumine, vasak, parem) 
Kuva (plokk, puudub, tekstisisene) CSS-is – määrake veebilehel HTML-elementide kuvamise tüüp 
Css-i prioriteedid ja nende suurenemine, mis on tingitud valijate kombinatsioonist ja rühmitusest, kasutaja- ja autoristiilidest 
CSS - mis see on, kuidas kaskaadlaadilehed ühendatakse stiili ja lingi abil HTML-koodiga 
Sildi, klassi, ID ja universaalsed valijad, aga ka atribuutide valijad tänapäevases CSS-is
