Preprostost koncepta CSS vam omogoča, da povežete pravila sloga iz zunanje datoteke, s strani z oznako, skozi atribut slog na oznaki ali prek javascripta. V kompilaciji in uporabi pravil CSS ni nič zapletenega, za pravilno uporabo pa je potrebno razumeti njeno mesto, logiko dela in mesto pri oblikovanju spletnih strani.

Elementi in tok HTML-dokumenta

Ni pomembno, kako je bila ustvarjena spletna stran. Glavna stvar je, da jo prejme od strežnika brskalnik obiskovalca. Brskalnik gradi drevo objektov strani (DOM), s poudarkom na skladnji HTML in CSS. Z jezikom javascript lahko elemente strani zapolnite s funkcionalnostjo. Idealna možnost je, da brskalnik prejme naslove in telo strani, sproži povezavo s strežnikom AJAX, zahtevana vsebina pa se zapolni tako, kot je potrebna v trenutni seji, in je odvisna od dejanj uporabnika.


Klasična različica je brskalnik za datoteke HTML, CSS, JS in dela po navodilih. Vrstni red prehodov oznak HTML je pomemben, vendar lahko pravila CSS spremenijo dejanski položaj v oknu brskalnika. Pravilna kombinacija vrstnega reda zapisovanja oznak HTML in pravil CSS vam omogoča pravilno prikazovanje informacij in zagotavljanje potrebne funkcionalnosti strani. V vseh primerih obstajajo preprosta pravila:

obstaja tok podatkov, ki je prepoznan, kot ga predpisuje ustrezna skladnja (HTML, CSS, JS);

število vrzeli ni pomembno, pomemben je en prostor;

Prevodi vrstic, zavihkov in drugih podobnih znakovni pomembno;

Pripombe, ki jih ni mogoče vključiti druga v drugo.

Sintaksa pravila CSS, ki je postavljena v slogu oznake, ima prednost. Slogi, podani v oznaki sloga in povezani z zunanjo datoteko, so enakovredni. Oznake ne morejo vplivati ​​na slog. JavaScript koda lahko bere /pisati sloge oznak, ustvarja nove oznake in sloge.


Za boljše branje lahko združite velike in male črke. Sintaksa pravila CSS omogoča uporabo registra, vendar ni pomembno, kdaj se uporablja.

Primer oblikovanja struktur CSS

Osnovne zahteve za sloge so enotne: ime predmeta, na katerega se pravilo nanaša, in seznam pravil v zavitih oklepajih. Objekt je lahko ime identifikatorja oznake (body, p, h1 div, img) ali imena razreda. Niz ime objekta lahko vsebuje več imen, vsak psevdoelement ali psevdo-razred pa je lahko dodeljen vsakemu od njih. Seznam pravil - zaporedje vrstic skozi znak ";". Vsako pravilo vsebuje ime - element sintakse jezika CSS (preko simbola ":") niz vrednosti. V večini pravil je niz vrednosti ena vrednost, vendar, kot je razvidno iz tega primera, lahko vrednosti nastavite na veliko.

Različica delovne datoteke

Sintaksa CSS ne določa, ali naj se poravna ali ne. Način pisanja - v eni vrstici ali nekaj - je okus programerja. Ustvarite lahko več pravil za eno oznako v vrsti, vendar lahko vsa pravila postavite v en vsebnik "{" "}". Takšna "kaša" je značilna za sodobne sisteme upravljanja lokacij (CMS), ki sestavljajo sklope nespremenljivih (zastandardne) v eno neberljivo datoteko, ki jo brskalnik hitreje bere in razume.
Vsi slogi, za katere CMS meni, da so pomembni za razvijalca, so napisani v klasičnem slogu, ki ga je mogoče enostavno pregledati in spremeniti.

Idealna "skladnja" CSS

Idealno bi bilo, da sistem ne obstaja in se njegova funkcija izvaja. Običajno uporabljajo datoteke CSS: preprosto jih je mogoče povezati z dokumentom HTML in jih lahko hitro spremenite. Osvetlitev sintakse HTML in CSS zagotavljajo vsi moderni urejevalniki kod. PhpStorm na primer omogoča popolno delo z množico formatov. Na prvem mestu je zelo priročno delo. Ampak glavna stvar - on preveri kombinacijo HTML datoteke s CSS opisi. Vse označene in medsebojno povezane. Ta izdelek testira tudi datoteke za uporabnost, sintaksa in razredi CSS pa so odlično orodje. Pravila za preproste opise kompleksnih sistemov - to velja za CSS. V zadnjih petih letih so se HTML in CSS »vzajemno koristni« razvili in dosegli »popolnost«. Toda ta popolnost je nenavadno, togo in še naprej zahteva delo kvalificiranega razvijalca (pogosto ekipe) za ustvarjanje profesionalnega spletnega vira. V tem primeru se ustvari niz, ki opisuje nabor slogov. Kot ponavadi se uporablja sintaksa CSS, z eno izjemo: namesto povezav na slike se vstavi vsebina slike. To je strošek tega načina oblikovanja sloga. Ta problem je rešen, bistveno drugačen - slog se oblikuje na letenje.
Prvotno je bil ustvarjen opis - niz znakov. Nato se element StyleLL ustvari kot slogovna oznakaDoloča vrsto te oznake in jo vstavi v vsebino. Končno se v telo telesa vsadi nov predmet, ki takoj začne delovati.

Oblikovanje HTML-ja in CSS-ja "na letenje"

Redki obseg in ne vsak spletni vir se mora odražati takoj v celoti. Običajno je, da takoj zapišete strani, pripravite sloge in ustvarite obdelovalce dogodkov. Na mestu sodobnega CMS ni drugih možnosti. Razvoj ročno izdelanega mesta zagotavlja veliko večjo svobodo delovanja, vendar je to masa fizičnega dela. CMS že ima nabor predlog in stilov. Za razvoj novega spletnega mesta ni treba storiti veliko. Primer ustvarjanja sloga na poti ni sintaksa CSS datoteke v običajnem pomenu besede, vendar je rezultat popolnoma enakovreden. Pretok podatkov, ki ga brskalnik prejme od strežnika, je mogoče zgraditi drugače. Klasična različica ustvari niz datotek HTML, CSS in JS. Če je ne ustvarite, in razvijete logiko oblikovanja toka v teku:

po potrebi ustvarite niz oznak HTML;

oblikovanje niza stilov CSS za vsako podjetje oznak;

zagotavljanje mehanizma za izmenjavo informacij o tehnologiji AJAX.

V tem scenariju, ko je spletno mesto inicializirano v brskalniku, se bo pojavila majhna količina podatkov, ki sproži proces oblikovanja strani in stilov, ki jih potrebuje. Odvisno od dejanj obiskovalca bo pretok podatkov iz strežnika spremenil njegovo vsebino, ne pa tudi v kontekstu prenosa strani ali končnih oznak, in podatkov - v smislu, da točno kje točno in kako točno ustvariti.

Prehodod togosti do mobilnosti

Na običajen način, vse statično ali dinamično. Ko ustvarjate na letalu, pri ustvarjanju oznak obstajajo slogi in programira se logika ustvarjanja. Običajno je stran programirana na strežniku, v brskalniku se razvija JS-koda obdelovalcev in ustvari strukturirana struktura med seboj povezanih pravil. Če želite nekaj spremeniti - se postopek ponovi. Ko programiramo izdelavo strani, se ne ustvarja HTML + CSS, temveč proces njihovega nastanka. Postopek ustvarjanja nečesa je priložnost za napovedovanje situacije in razdelitev glede na situacijo. Programiranje procesa ustvarjanja strani in prikazovanje datotek omogoča bolj dinamično in mobilno spletno mesto, ki se bolj razvija.