CSS sintaksa: primjeri uporabe

Jednostavnost CSS koncepta omogućuje vam povezivanje pravila stila iz vanjske datoteke, s oznake stranice, kroz atribut stila na oznaci ili preko javascripta. Ništa komplicirano u kompiliranju i korištenju CSS pravila, ali za pravilnu uporabu potrebno je razumjeti njegovo mjesto, logiku rada i mjesto u dizajnu web stranica.

Elementi i protok HTML-dokumenta

Nije važno kako je web stranica stvorena. Glavna stvar je da je od poslužitelja primio preglednik posjetitelja. Preglednik gradi stablo objekata stranice (DOM), fokusirajući se na sintaksu HTML-a i CSS-a. S jezikom javascripta možete ispuniti elemente stranice funkcionalnošću.
Idealna opcija je da preglednik prima naslove i tijelo stranice, pokreće vezu s AJAX poslužiteljem, a traženi sadržaj popunjava se onako kako je potreban u trenutnoj sesiji, i varira ovisno o korisnikovim radnjama.


Klasična verzija je preglednik za HTML, CSS, JS datoteke i radi prema uputama. Redoslijed prolaza HTML oznaka je važan, ali CSS pravila mogu promijeniti svoj stvarni položaj u prozoru preglednika. Ispravna kombinacija redoslijeda bilježenja HTML oznaka i CSS pravila omogućuje vam ispravno prikazivanje informacija i pružanje potrebne funkcionalnosti stranice. U svim slučajevima postoje jednostavna pravila:
  • postoji tok podataka koji se prepoznaje, kako je propisano odgovarajućom sintaksom (HTML, CSS, JS);
  • broj praznina nije važan, jedan prostor je važan;
  • Prijevodi redaka, kartica i drugih sličnih znakovanije važno;
  • Komentari koji se ne mogu međusobno ugraditi.
  • Sintaksa pravila CSS-a postavljena u stilu oznake ima prioritet. Stilovi navedeni u oznaci stila i povezani iz vanjske datoteke jednaki su. Oznake ne mogu utjecati na stil. JavaScript kod može čitati /pisati stilove oznaka, stvarati nove oznake i stilove.


    Da biste poboljšali praktičnost čitanja, možete kombinirati velika i mala slova. Sintaksa CSS pravila dopušta korištenje registra, ali nije važno kada se koristi.

    Primjer dizajniranja CSS struktura

    Osnovni zahtjevi za stilove su ujednačeni: naziv objekta na koji se pravilo primjenjuje i popis pravila u uvijenim zagradama. Objekt može biti ime oznake (tijela, p, h1 div, img) identifikatora ili naziva klase. Niz naziva objekta može sadržavati nekoliko imena, a svaki pseudo-element ili pseudo-klasa može biti dodijeljen svakom od njih.
    Popis pravila - slijed redaka kroz znak ";". Svako pravilo sadrži ime - element sintakse jezika CSS (preko simbola ":") niz vrijednosti. U većini pravila, niz vrijednosti je jedna vrijednost, ali, kao što se može vidjeti iz ovog primjera, vrijednosti se mogu postaviti na mnoge.

    Verzija radne datoteke

    CSS sintaksa se ne postavlja hoće li se uskladiti ili ne. Način pisanja - u jednom redu ili nekoliko - je okus programera. Možete stvoriti nekoliko pravila za jednu oznaku u nizu, ali možete staviti sva pravila u jedan spremnik "{" "}".
    Takva "kaša" tipična je za moderne sustave upravljanja gradilištem (CMS), koji čine skupove nepromjenjivih (standardne) stilove u jednu nečitljivu datoteku koju preglednik brže čita i razumije.
    Svi stilovi koje CMS smatra relevantnim za razvojnog programera napisani su u klasičnom stilu koji se može lako pregledati i mijenjati.

    Idealna "sintaksa" CSS-a

    Idealno se smatra sustav koji ne postoji i izvršava se njegova funkcija. Obično koriste CSS datoteke: lako se povezuju s HTML dokumentom i mogu se brzo promijeniti. Označavanje sintakse HTML-a i CSS-a osiguravaju svi moderni urednici koda. Na primjer, PhpStorm čini savršen rad s masom formata. Na prvom mjestu, vrlo je pogodan za rad. Ali glavna stvar - on provjerava kombinaciju HTML datoteke s CSS opisima. Sve su označene i međusobno povezane. Ovaj proizvod također testira datoteke za upotrebljivost, a CSS sintaksa i klase su izvrstan alat. Pravila za jednostavne opise složenih sustava - to se odnosi na CSS. Tijekom proteklih pet godina, HTML i CSS "obostrano korisni" evoluirali su i dostigli "savršenstvo". No, to je savršenstvo neobično, kruto i nastavlja zahtijevati rad kvalificiranog developera (često tima) za stvaranje profesionalnog web-resursa.
    U ovom primjeru, stvoren je niz koji opisuje skup stilova. Kao i obično, koristi se CSS sintaksa, s jednom iznimkom: umjesto linkova na slike umetnut je sadržaj slike. To je cijena ove metode oblikovanja stila. Ovaj problem je riješen, bitno drugačiji - stil se oblikuje u letu.
    Izvorno je stvoren opis - niz znakova. Zatim se element StyleLL kreira kao oznaka stilaOdređuje vrstu te oznake i u nju ubacuje sadržaj. Konačno, u tijelo tijela ugrađuje se novi objekt koji odmah počinje raditi.

    Formiranje HTML-a i CSS-a "u letu"

    Rijetki opseg, a ne svaki web-izvor, treba se odmah prikazati u cijelosti. To je samo uobičajeno pisati stranice u potpunosti odmah, crtati stilove i stvoriti događaj handlers. Na mjestu modernog CMS-a nema drugih opcija.
    Razvijanje ručno izrađenog mjesta pruža mnogo veću slobodu djelovanja, ali to je masa ručnog rada. CMS već ima skup predložaka i stilova. Ne treba mnogo učiniti za razvoj nove stranice. Primjer stvaranja stila u hodu nije sintaksa CSS datoteke u uobičajenom smislu, ali rezultat je apsolutno ekvivalentan. Tok podataka koji preglednik prima od poslužitelja može biti različito građen. Klasična verzija stvara skup HTML, CSS i JS datoteka. Ako ga ne stvorite i razvijete logiku oblikovanja toka u letu:
  • po potrebi stvorite skup HTML oznaka;
  • oblikovanje skupa CSS stilova za svako poduzeće oznaka;
  • pruža mehanizam za razmjenu informacija o tehnologiji AJAX.
  • U ovom scenariju, kada je web-mjesto inicijalizirano pregledniku, pojavit će se mala količina podataka koja pokreće proces oblikovanja stranice i stilova koji su joj potrebni. Ovisno o aktivnostima posjetitelja, protok podataka s poslužitelja promijenit će njegov sadržaj, ali ne u kontekstu prijenosa stranica ili gotovih oznaka, te podataka - u smislu da točno gdje točno i kako točno kreirati.

    Prijelazod ukočenosti do pokretljivosti

    Na uobičajeni način, sve statički ili dinamički. Prilikom oblikovanja u letu, pri stvaranju oznaka postoje stilovi i programira se logika stvaranja. Obično je stranica programirana na poslužitelju, u pregledniku se razvija JS-kod rukovatelja, a stvara se i strukturirana struktura međusobno povezanih pravila. Ako trebate nešto promijeniti - proces se ponavlja.
    Prilikom programiranja izrade stranice u letu ne stvara se HTML + CSS, već proces njihovog formiranja. Proces stvaranja nečega je prilika za predviđanje situacije i grananje ovisno o situaciji. Programiranje procesa stvaranja stranice i posluživanje njegovih datoteka čini stranicu dinamičnijom i mobilnijom, razvijajući se.

    Povezane publikacije