Osnove CSS: postavitev strani

Ustvarjanje spletnih mest ni za ljudi s šibkimi živci. Poleg znanja morajo imeti pri označevanju strani kreativno mišljenje, perfekcionistične naklonjenosti in filigransko natančnost. CSS v tej zadevi je preprosto nenadomestljiv. In vsak spletni skrbnik mora poznati svoje osnove.

Kaj je CSS?

Tisti, ki poznajo HTML, vam ni treba povedati, da gre za jezik označevanja strani. Toda njegovi ustvarjalci so se odločili, da ji dodajo oznake, ki so odgovorni za videz in oblikovanje. To je samo s tem pristopom, kodna stran je postala prevelika in skoraj neberljiva. Seveda na ta način ni prišlo nikamor, zato je bila sprejeta celovita rešitev: HTML je odgovoren za postavitev strani, CSS za vizualni dizajn.

Okrajšava CSS pomeni Cascading Style Sheets (kaskadni slogovni list). Sestavljajo ga parametri, ki so odgovorni za vizualizacijo predmetov na strani.

Prednosti CSS

Kaskadni slogovni list omogoča spletnemu skrbniku ne le ustvarjanje čudovitega vira, temveč tudi, da se kodira berljiva, znatno zmanjša njegovo velikost. Z uporabo CSS lahko določite takšne parametre, ki v oznaki HTML na strani niso možni.

Z CSS lahko dobesedno spremenite videz virov v samo nekaj kliki. To je zelo priročno, še posebej, če je stran več strani. Vse spremembe zasnove se izvedejo v kaskadnem slognem listu in ne s spreminjanjem parametrov na vsaki strani vira. In samo zahvaljujoč CSS-u lahko izvedete blok-oznake.

Povezovanje CSS

Ko govorimo o osnovnih načelih CSS, se najprej naučimo, kako povezati kaskadni list s slogi v datoteko HTML. Ta proces je precej preprost. Prvi korak je ustvariti dokument HTML. Za tiste, ki še ne vedo, jih ustvarjajo v programu Notepad. Nato s funkcijo »Shrani kot« določite razširitev HTML.

Kaskadni slogovni list je ustvarjen na enak način, samo datoteko je treba navesti z razširitvijo css. Prejeti dokument je treba shraniti v isto mapo kot datoteke HTML. Na primer, dokument s slogovnimi listi se imenuje style.css. Če ga želite povezati z dokumentom HTML, morate uporabiti oznako , ki je odgovoren za povezovanje zunanjih datotek. Med oznakami , je treba vnesti naslednje:

Morda je to eden najprimernejših načinov za povezovanje zunanjih datotek.

Pravilo CSS

Študija označevanja CSS naj bi začela s študijo sintakse. V kaskadnem slognem listu ni oznak, skriptov ali parametrov. Obstaja samo pravilo, ki ga je treba upoštevati. Sestavljen je iz selektorja in blokov slogov. Na primer, v kaskadnem slogovnem polju je podan položaj: telo {ozadje: črna barva: bela}.

Tu je telo selektor, ki je odgovoren za oblikovanje sloga mesta telesa ozadja: črna in barva: bela so lastnosti in njihovi pomeni. Pisani so s podpičjem. Ta položaj omogoča, da je ozadje strani črno, besedilo pa je belo.

Selektorji

No, intenzivni uvod v CSS nadaljujemo. Postavitev strani bo precej težko narediti brez poznavanja selektorjev. Če je vse jasno z lastnostmi in njihovimi vrednotami, bo dodatno znanje o selektorjih pomagalo narediti želeno postavitev strani.

Kaj morate vedeti o selektorjih? Prvič, njihove sorte:

• Identifikator. Imena elementov strani se lahko uporabijo kot selektorji. V primeru, ko morate na primer izbrati odstavek besedila z drugo barvo, dodajte identifikator. Določa ga parameter id.

Upoštevati je treba, da se en identifikator lahko uporabi le enkrat. V tem primeru se izbirnik imenuje roza, če potrebujete drug identifikator, preprosto morate dodeliti drugo ime (rožnato, zeleno, itd.).

Razredi. Izbirnik razreda se uporablja, če želite nastaviti iste parametre za več predmetov. Na primer, za dva odstavka besedila morate določiti rdečo barvo.

Objekti z razredi so lahko katera koli številka.

Za isti objekt lahko določite razred in identifikator - to ne nasprotuje oznaki CSS. Toda ker ima identifikator višjo prioriteto, bo slog uporabljen za predmet. Pri označevanju strani v CSS je vredno razmisliti.

Identifikatorji in razredi se lahko uporabljajo za vse predmete. In če morate določiti en slog za besedilo in slike, potem ne morete podati imena elementa, kot je bilo v primeru (p # roza, p.red). Lahko postavite točko ali rešetko. Tudi selektorje lahko združite. Na primer, h1, h2, h3 {color: red-font-sixe: 17px}.

Postavitev strani

Če izučite postavitev strani, lahko razumete, da je nekaj njegovih vrst:

• Tabular. Ko ni bilo kaskadnega slogovnega lista, je bila ta oznaka glavna. Omogočil je najbolj natančno postavitev predmetov vira drug od drugega. Ampak kodo se izkaže, da je prevelika in je iskalnik indeksa slabo indeksiran. Druga pomanjkljivost te metode je hitrost prenosa. Dokler se celotna tabela ne naloži, uporabnik niti ne vidi začetka besedila.
• Blokiraj. Zdaj je to glavni način postavitve strani. Njegova uporaba je postala mogoča le zahvaljujoč razvoju in izboljšanju slogovnega lista.

Prednosti postavitve bloka

Postavitev blok strani z uporabo CSS ima nekaj neizpodbitnih prednosti. Najprej je slog predmetov ločen od dokumenta HTML, kar močno izboljša čitljivost kode in omogoča hitro vizualne spremembe. Drugič, na enem sloju je mogoče prekriti enega sloja in to večkrat olajša postopek pozicioniranja. Seveda so takšna spletna mesta hitreje naložena in indeksirana z iskalniki. Postavitev strani v CSS omogoča enostavno nastavitev sodobnih vizualnih učinkov.

Edina pomanjkljivost tega pristopa je drugačno razumevanje brskalnikov. Nekateri ljudje prikazujejo vir v obliki, v kateri jo spletni skrbnik vidi. Vendar pa obstajajo brskalniki, ki izkrivljajo sliko, zato je z velikim številom razredov in selektorjev treba uporabiti hacks, ki bodo kode prijazno klikajo na brskalnik.

Kako narediti postavitev spletnega mesta?

Prva stvar, ki jo je treba začeti, je ustvarjanje postavitve. To bi moralo biti redna slika z razširitvijo psd. Po ustvarjanju (nakupu ali prenosu) je treba sliko vrezati v bloke in jo postaviti v eno mapo (po možnosti ločeno). Ti drobci bodo uporabljeni kot ozadje blokov.

V dokumentu HTML za postavitev bloka uporabite oznako

Prva stvar, ki se naredi, ko je postavitev spletnega mesta razrezana na koščke, v HTML-ju nastavite strukturo spletnega mesta s pomočjo oznake

Nastavite parametre

Na primer, lahko jasno vidite, kako so nastavljeni parametri za blokade CSS. Postavitev postavitve strani je podana v slikovnih pikah, čeprav je v večini primerov bolje uporabiti odstotke. V oknu brskalnika bo to spletno mesto videti "prilagojeno različnim delom platna", ker je bil v tem primeru uporabljen samo barva območja blokov. Če pa jo zamenjate z ozadjem, lahko dobite ne le lep, temveč tudi precej funkcionalen izdelek.

Med oznakami

Ta primer je le majhen del vsega, s katerim se bo webmaster moral ukvarjati, medtem ko bo delal na kvalitativnih značilnostih vira. Ko ustvarite dober spletni vir, lahko pogosto uporabljate hacks, da pridobite funkcijo navzkrižnega brskalnika. Urejanje kode strani je lahko v posebnih urednikih, kar bistveno poenostavi delo, čeprav spletnega skrbnika ne odstrani potrebe po ročnem urejanju.

Vsakdo lahko samostojno oblikuje spletno mesto. Glavna stvar je razumeti, da sta bila CSS in HTML ustvarjena s strani ljudi in namenjena ljudem. Osnove postavitve strani so na voljo vsakomur in ustvarjanje spletnih virov ni samo privilegij izvoljenih, ampak je lahko tudi precej redna dejavnost vsakogar, ki si želi.