Pozdravljeni dragi bralci remontcompa! Moje ime je Roman Nahvat in predstavljam vam pozornost člankov o jeziku v slogu CSS3. Kratica CSS izvira iz angleškega Cascading Style Sheets, kar pomeni kaskadne liste s slogom. Slog ali CSS je niz možnosti oblikovanja, uporabljenih za elemente dokumenta HTML, da spremenijo svoj videz. HTML sam je le običajen jezik dokumentov HTML in se uporablja za strukturiranje vsebine strani HTML, zato je HTML le prvi korak v procesu učenja spletnega mesta. Naslednji korak je učenje stilov ali CSS, kar bomo storili. Obstaja več načinov za dodajanje slogov na spletno stran. Vsaka metoda se razlikuje po svojih zmožnostih in namenu. V tem članku bomo pogledali tri načine za dodajanje slogov dokumentu HTML..

Samo zapleteno ali se naučite CSS3. 1. del. Pojem CSS. Načini za povezavo slogov CSS z dokumentom HTML

Ustvarite standardno strukturo dokumentov HTML, kot je prikazano spodaj.

Med oznake napišite naslov dokumenta HTML, na primer "Načini povezovanja slogov CSS"

Uporaba oznak

in

dodajte naslov na spletno stran z besedilom "Kaj je CSS"

Spodaj pod naslovom z uporabo oznak

in

ustvarite majhen odstavek z besedilom, kot je prikazano spodaj

Ta dokument shranite na bliskovni pogon v mapi CSS pod indeksom imena s pripono .html

Določite imenik, izberite vrsto datoteke html

Dobimo naslednje.

Pokukali bomo v mapo CSS, kjer se nahaja naš shranjeni html dokument z imenom indeks. Odprite ga v spletnem brskalniku

Kot vidite, je bila vsebina spletne strani, ki smo jo ustvarili, prikazana v oknu spletnega brskalnika, in sicer naslov z besedilom "Kaj je CSS" in odstavek, ki se začne z besedami "CSS je jezik sloga, ki določa ...."

Z atributom poravnave (dodelimo mu srednjo vrednost) bomo poravnali naslov z besedilom "Kaj je CSS" na sredini spletne strani

Dobimo naslednje.

Spremenite barvo besedila odstavka iz standardne črne v drugo. Uporabljamo oznako

Obstaja veliko html barv, na primer za besedilo odstavka na strani, ki smo jo ustvarili, izberite barvo DeepSkyBlue

Nastavite atribut barve oznake na DeepSkyBlue

Ponovno naložimo svojo spletno stran in vidimo, da je besedilo odstavka spremenilo barvo iz črne v tisto, ki smo jo določili

Na enak način spremenite barvo naslovnega besedila, na primer, v rdečo.

Dobimo naslednje

Besedilo naslova in odstavka na naši spletni strani vrnemo v prvotno stanje, in sicer bomo odstranili atribut poravnave in oznake ...

Po odstranitvi oznak ... in atributa poravnave dobimo prvotni videz spletne strani

Če smo zgoraj s pomočjo html oznak spremenili barvo in razporeditev besedila naslova in odstavkov na spletni strani, bomo to storili isto, vendar s pomočjo CSS. Kot smo že omenili, bomo v tem članku preučili tri načine za dodajanje slogov na spletno stran, in sicer: dodajanje notranjih slogov na spletno stran; Dodajanje globalnih slogov na spletno stran; Dodajanje povezanih slogov na spletno stran; Razmislite o dodajanju notranjega sloga na spletno stran. Notranji slog je razširitev posamezne oznake, ki se uporablja na spletni strani. Atribut sloga se uporablja za definiranje sloga, njegova vrednost pa je določen niz stilskih pravil. Barvo besedila naslova na spletni strani spremenite v rdečo in ga tudi centrirajte z uporabo notranjega sloga. Za označevanje

dodajte atribut sloga, nato bomo zapisali lastnosti sloga, in sicer: besedilo-poravnava: sredina, barva: rdeča

Dobimo naslednje.

Ko odpremo datoteko index.html v spletnem brskalniku, vidimo, da je besedilo naslova na spletni strani rdeče in v središču.

Na enak način s pomočjo atributa slog spremenite barvo besedila odstavka iz standardne črne v deepskyblue

Ponovno naložimo stran index.html in vidimo, da se barva odstavka spremeni.

Barvo besedila naslova na spletni strani spremenite v rdečo in jo centrirajte, tokrat s pomočjo globalnega sloga. Če je uporabljen globalni slog, so lastnosti CSS nameščene med oznakama in, ti (in oznake) pa so nameščene med oznakama in .

Med oznake in v kodraste oklepaje zapišemo lastnosti sloga za glavo spletne strani (tag)

) in za odstavek (oznaka

): h1 text-align: center; barva: rdeča - besedilo naslova postavite na sredino spletne strani in spremenite barvo v rdečo p color: deepskyblue - barvo odstavka spremenite v deepskyblue

Kot rezultat dobimo enak rezultat kot pri uporabi notranjih slogov.

Razmislite o zadnjem načinu dodajanja slogov na spletno stran, in sicer o uporabi sorodnih slogov. Bistvo sorodnih slogov je, da so določeni v datoteki ločeno od html dokumenta in imajo pripono .css. Ustvarite še vedno prazen dokument in ga shranite na bliskovni pogon v mapi CSS pod slogom imena in pripono .css

Shrani.

Ustvarjena datoteka s slogom .css razširitev

Pustite datoteko style.css za zdaj prazno.

Za povezavo html dokumenta (v našem primeru je index.html) z datoteko stilov style.css uporabljamo oznako. Oznaka mora biti nameščena znotraj oznak ... Med oznake zapišimo naslednjo vrstico: kjer: rel = "stylesheet" - atribut tag, ki spletnemu brskalniku sporoča, da bodo slogi povezani; atribut href = "style.css" označuje pot do datoteke stilov style.css

Pri ustvarjanju stilskih datotek se morate držati določenih pravil spodaj (enaka pravila je treba upoštevati pri dodajanju globalnih slogov) Eden glavnih elementov datoteke s slogom je izbirnik. Izbirnik določa, kateri element v html dokumentu naj uporabi določene parametre sloga. Izbirnik so oznake, razredi in identifikatorji. Ko je izbirnik določen, se postavijo kodrasti oklepaji, v katerih je registrirana lastnost sloga, nato je navedena njegova vrednost.Na primer, spodaj v diagramu je oznaka html h1 navedena kot izbirnik, barva: kot lastnost sloga je zapisana vrednost lastnosti slog

Ker želimo postaviti naslov besedila (oznaka

) na sredini spletne strani in besedilo nastavite na rdečo, pa tudi besedilo odstavka (oznaka)

) prikaz v barvi deepskyblue, v datoteko stilov style.css zapišemo vrstice: h1 text-align: center; barva: rdeča in p barva: deepskyblue kjer: h1 poravnava besedila: sredina; barva: rdeča - poravnajte besedilo glave ("Kaj je CSS") na sredini in besedilo nastavite na rdečo p color: deepskyblue - nastavite besedilo odstavka ("CSS je jezik sloga, ki določa ...") barva deepskyblue

Kot rezultat povezave datoteke style.css z html dokumentom index.html vidimo, da je naslovno besedilo na spletni strani na sredini in ima rdečo barvo. Besedilo odstavka je tudi spremenilo svojo barvo v deepskyblue

Nadaljevanje v članku: Samo zapleteno ali se naučite CSS3. Del 2. Vrste izbirnikov CSS