Koristni nasveti

Ustvarjanje menijev CSS - Vodnik za začetnike

CSS pomeni za "kaskadne stilske liste" (iz angleščine. Cascading Style Sheets). CSS je zbirka parametrov, s katerimi se ta ali tisti element prikaže na spletni strani. Te parametre lahko določite v ločeni datoteki ali pa jih zapišete neposredno v HTML kodo strani. Na primer, na naši spletni strani so lahko naslednji elementi: naslov članka, odstavki, citati, sprotne opombe, slike, videoposnetki, povezave. Nastavite lahko določen slog zaslona - velikost, barvo, debelino okvirja itd.

Pri delu s spletnim mestom je priporočljivo uporabljati ločeno datoteko s slogi, namesto da vdelate kodo z nastavitvami sloga na ločenih straneh. To bo znatno skrajšalo čas - ko boste vedeli lokacijo stilskega lista, lahko vedno hitro najdete določen slog in ga uredite. Tabela slogi ima razširitev .css, njegovo ime je običajno style.css.

Priloga datoteke CSS

Obstaja več načinov za povezavo datoteke CSS. Govorili bomo o dveh metodah, ki se najpogosteje uporabljajo pri ustvarjanju spletnih mest:

1. Vezava. Ta metoda se uporablja, ko morate v eni datoteki nastaviti stile za vse strani. Ta metoda se pogosto uporablja pri ustvarjanju spletnega mesta. Če želite povezati tabelo stilov, uporabite ukaz, ki ga morate vstaviti v telo oznake.

Prvi dve lastnosti brskalniku pomenita, da spletno mesto uporablja CSS, nato je naveden naslov datoteke s slogi.

2. Vdelava v oznake dokumentov. S to metodo se slog za določen element strani nastavi neposredno v kodi HTML. Na primer:

Tu imamo predpisane sloge oziroma za posode

Navedimo primer tabele sloga - ustvarite datoteko style.css in napišite sloge:

Tu smo postavili sloge za telo strani in za naslov.

. Prav tako lahko nastavite posebne sloge za vse druge elemente strani spletnega mesta.

Zdaj povežite naš obrazec slogi na spletno mesto:

Tako smo ugotovili kaj je CSS zakaj se uporablja ta tehnologija, smo se naučili, kako povezati sloge na spletnem mestu. Ta lekcija je nekakšen uvod v kaskadne liste slogov. V drugih lekcijah bomo podrobneje govorili o tehnologiji CSS.

Možnosti menija CSS

Obstaja več vrst in vrst menijev CSS:

  1. Glavni meni. To je seznam posebnih povezav do ključnih delov spletnega mesta.
  2. Dodatni meni. Takšen meni ima hierarhično strukturo in je treh vrst:
    • Spustni meni Razširi se, ko premaknete miško nad element,
    • Pojavni meni spletnega mesta. Pokaže se, ko kliknete določen element,
    • Statični dodatni meni za CSS. Drevesna struktura, predstavljena v že odprti obliki.

Kako ustvariti meni v CSS?

Tu je primer ustvarjanja preprostega horizontalnega in navpičnega menija CSS z razlagami.

Koda horizontalnega menija je napisana na naslednji način:

Rezultat je podoben vodoravni meni:

Navpični meni, pridobljen s to kodo, je videti tako:

Kako ustvariti tabelo stilov, css?

Ustvari CSS datoteka tako enostavno kot html. Dovolj je, da zaidete v kateri koli urejevalnik besedil, na primer Beležnico, in ustvarite datoteko z CSS podaljšek. Dajmo mu standardno ime - style.css.

Čestitamo! Vaša datoteka je pripravljena. Do zdaj je prazna, kasneje pa jo bo mogoče napolniti z ustreznimi vsebinami. Spodaj bomo opisali osnove - kako povezati css.

Zunanji slog

Morda zunanja CSS - To je najbolj pravilna in optimalna rešitev za spletno mesto. Dovolj je, da navedete samo na strani oznaka povezave (ustvarjena za povezovanje drugih datotek) s povezavo do tabele slogov in slogi so povezani!


Vrstica z oznako povezave predvideva, da je style.css v istem imeniku (mapi) kot naša datoteka (na primer index.html). Če se je lokacija datoteke css spremenila, je treba v atribut href opraviti ustrezne spremembe. Na primer, pogosto se zgodi, da pod CSS ustvarijo ločeno mapo (kar je priročno in logično). Toda potem bo atribut href izgledal drugače:

Notranji listi

Včasih lahko vidite še en css konstrukt, ki je vstavljen neposredno vanj html tag

Plus je, da lahko v isto datoteko takoj nastavite sloge. Pomemben minus - nastavljene lastnosti bodo dodeljene samo določenemu elementu, v tem primeru odstavku. Tako se izgubijo vse prednosti daljinsko povezovalnih lastnosti.

Listi stilov

Obstaja lažji način. CSS vstavki. Če ne želite ustvariti ločene datoteke CSS in morate uporabiti le nekaj lastnosti, potem je ta možnost primerna. Začnimo takoj s primerom.

Kot je razvidno iz primera, smo sloge postavili tik pred zaključkom glavno oznako znotraj odpiranje in zapiranje oznak slog. Pravzaprav oznaka slog se lahko predpiše v telo, če pa želite, da so vaše beležke videti strukturirane in da oseba, ki to kodo vidi potem, ko vas ne zgrabi za glavo, je najbolje, da napiše sloge na enem mestu.

Očitna je tudi pomanjkljivost vgrajenega stilskega lista - takšne zapise bo treba narediti za vsako stran posebej.

Oglejte si video: HTML Vodič 6 - Urejen in Neurejen Seznam ordered in unordered list (Januar 2020).