Osnove CSS: postavitev strani

Ustvarjanje spletnih strani ni delo za ljudi s šibkimi živci. Poleg znanja, morate imeti ustvarjalno miselnost, interese perfekcionista in natančnost natančnosti pri postavitvi strani. CSS je pri tem nepogrešljiv. In poznati njegove osnove je potrebno za vsakega webmasterja.

Kaj je CSS?

Tistim, ki poznajo HTML, ni treba povedati, da je to jezik za označevanje strani. Toda njeni ustvarjalci so se odločili dodati oznake, ki so odgovorne za videz in oblikovanje. To je samo s tem pristopom, koda strani je postala preveč obsežna in praktično neberljiva. Seveda to ni prineslo ničesar, zato je bila celovita rešitev: HTML je odgovoren za postavitev strani, CSS - za vizualno oblikovanje.


Kratica CSS pomeni Cascading Style Sheets (Cascading Style Sheets). Sestavljen je iz parametrov, ki so odgovorni za vizualizacijo objektov na strani.

Prednosti CSS

Kaskadni slog omogoča spletnemu skrbniku, da ne samo ustvari dober vir, temveč tudi, da postane kodo berljiva, kar močno zmanjša njeno velikost. Z uporabo CSS lahko nastavite parametre, ki niso možni v oznaki HTML strani. S CSS lahko dobesedno spremenite videz strani virov v samo nekaj klikih. To je zelo priročno, še posebej, če imate večstransko stran. Vse spremembe v oblikovanju so narejene v kaskadnem slogu, namesto s spreminjanjem parametrov na vsaki strani virov. In samo zahvaljujoč CSS-u lahko naredite blokovsko označevanje.

Povezava CSS

Ko govorimo o osnovnih načelihCSS, najprej se morate naučiti, kako povezati kaskadni slog s HTML datoteko. Ta proces je zelo preprost. Najprej morate ustvariti dokument HTML. Za tiste, ki še ne vedo, so ustvarjeni v programu Notebook. Nato morate s funkcijo »Shrani kot« podati razširitev HTML.


Na povsem enak način se ustvari kaskadna slogovna tabela, treba je določiti samo razširitev css datoteke. Rezultat dokumenta mora biti shranjen v isti mapi kot datoteke HTML. Predpostavimo, da se dokument slogovne datoteke imenuje style.css. Če ga želite povezati z dokumentom HTML, morate uporabiti oznako, ki je odgovorna za povezovanje zunanjih datotek. Med oznakami morate vnesti naslednje:
To je verjetno eden najprimernejših načinov za povezovanje zunanjih datotek.

Pravilo CSS

Študija o označevanju CSS se mora začeti z učenjem sintakse. V kaskadnem slogu ni nobenih oznak, skriptov ali možnosti. Sledi le pravilo. Sestavljen je iz izbirnika in bloka stilov. Na primer, v kaskadnem slogovnem listu je podan položaj: telo {ozadje: črno; barva: bela}. Tukaj je telo in je izbirnik, odgovoren za slogovno oblikovanje telesa mesta; ozadje: črna in barva: bela so lastnosti in njihov pomen. Zapisane so skozi pike. Ta položaj naredi ozadje spletnega mesta črno, besedilo pa je belo.

Selektorji

Nadaljevamo intenziven vnos v CSS. Postavitvene strani bodo težko izvedljive, ne da bi vedeli za selektorje. Če so lastnosti in njihov pomen jasen, potem dodatno znanje o selektorjihnaredite želeno postavitev strani.
Kaj morate vedeti o selektorjih? Prvič, njihove sorte:
  • Identifikator. Kot selektorji lahko uporabite imena elementov strani. V primeru, ko je na primer potrebno označiti odstavek besedila v drugi barvi, dodajte identifikator. Določen je s parametrom id.
  • Spomniti se je treba, da lahko eno identifikacijsko številko uporabimo samo enkrat. V tem primeru se izbirnik imenuje rožnata, če potrebujete še en identifikator, potem morate dati drugo ime (pink2 zelena, itd.). Razredi Izbirnik razreda se uporablja, če je za iste parametre treba nastaviti več objektov. Na primer, za dva odstavka besedila morate navesti rdečo barvo.
    Razredi so lahko poljubno število predmetov. Za isti predmet lahko podate razred in identifikator - ne nasprotuje oznaki CSS. Ker pa ima ID višjo prednost, bo objekt uporabil svoj lasten slog. Pri označevanju strani v CSS-u je to treba upoštevati. Identifikatorji in razredi se lahko uporabljajo za vse objekte. In če morate postaviti en slog besedila in slik, ne morete določiti imena elementa, kot v primeru (p # pink, p.red). Lahko preprosto postavite piko ali mrežo. Izbirnike lahko razvrstite tudi v skupine. Na primer, h1 h2 h3 {barva: rdeča; font-sixe: 17px}.

    Razporeditev strani

    Med proučevanjem strani je mogoče razumeti, da obstaja več njenih različic:
  • Tablichna. Ko ni bilo kaskadnega slogovnega lista, tamarkup je bil glavni. Omogočila je natančno postavitev objektov vira drug od drugega. Koda je zelo velika in slabo indeksirana s strani iskalnikov. Druga pomanjkljivost te metode je hitrost prenosa. Dokler se ne prenese celotna tabela, uporabnik ne bo videl niti začetka besedila.
  • Blok. Zdaj je to glavni način označevanja strani. Njegova uporaba je postala mogoča le z razvojem in izboljšanjem slogovnih listov.

  • Prednosti postavitve blokov

    Postavitev blokovnih strani s pomočjo CSS ima več nespornih prednosti. Prvič, slog predmeta je ločen od dokumenta HTML, kar močno poveča berljivost kode in vam omogoča, da hitro naredite vizualne spremembe. Drugič, obstaja možnost uvedbe ene plasti na drugo, kar večkrat olajša proces pozicioniranja. Seveda so takšna mesta hitreje prenesena in indeksirana z iskalniki. Postavitev strani v CSS-ju omogoča preprosto nastavitev sodobnih vizualnih učinkov. Edina pomanjkljivost tega pristopa je različno "razumevanje" brskalnikov. Nekateri odražajo vir v obliki, v kateri vidi njen spletni skrbnik. Vendar pa obstajajo brskalniki, ki izkrivljajo sliko, zato, če imate veliko število razredov in selektorjev, morate uporabiti hoke, ki naredijo kodo navzkrižno brskanje.

    Kako narediti blok postavitev območja?

    Prva stvar, s katero začnemo, je ustvariti postavitev. To mora biti običajna slika s pripono psd. Po izdelavi (nakupu ali prenosu) je potrebno sliko vklopitiblokov in jih vstavite v eno mapo (po možnosti ločeno). Ti odlomki bodo uporabljeni kot ozadje za bloke. V dokumentu HTML za postavitev bloka se uporablja oznaka. Vse v njem se imenuje plast, format te plasti pa je nastavljen v kaskadni slogi s pomočjo razredov ali identifikatorjev. Prva stvar, ki jo je treba narediti, ko bo postavitev spletnega mesta razrezana na kose, v HTML nastavite strukturo spletnega mesta, uporabite oznako in dodelite izbirnik za vsako plast. Na primer, če je to meni, potem napišite: id = menu. Po tem morate povezati kaskadni slog in nastaviti lastne parametre za vsako plast. Najenostavnejša koda ima naslednjo obliko.

    Nastavi parametre

    Primer prikazuje, kako so parametri nastavljeni za bloke CSS. Postavitev postavitve strani je podana v pikslih, čeprav je v večini primerov bolje uporabiti obresti. V oknu brskalnika bo to mesto imelo obliko "obrezano iz različnih delov platna", kot je bilo uporabljeno v primeru samo v barvnem področju. Če pa jo zamenjate z ozadjem, lahko dobite ne le lep, ampak tudi funkcionalen izdelek.
    Med oznakami lahko napišete vse potrebne informacije z zahtevanim oblikovanjem. Vsako besedilo, napisano v tej oznaki, se takoj prekriva s plastjo na oblikovanem bloku. Objekti med njima se bodo samodejno zmanjšali, da ne bodo presegli velikosti bloka. Ta primer je le majhen del vsega, kar se mora webmaster ukvarjati z delom na kakovosti.značilnosti vira. Pri ustvarjanju dobrega spletnega vira se lahko hacks pogosto uporablja za nakup križancev. Kode strani lahko urejate v posebnih urejevalnikih, kar zelo poenostavi delo, čeprav ne odvrne skrbnika spletne strani od potrebe po ročnem urejanju.
    Vsak lahko samostojno ustvari spletno mesto. Glavna stvar - razumeti, da sta CSS, HTML ustvarili ljudje in namenjeni ljudem. Osnove označevanja strani so na voljo vsem, ustvarjanje spletnih virov pa ni le pravica izbranega, temveč je lahko tudi vsakodnevna dejavnost vsakogar, ki jo želi.

    Sorodne publikacije