Osnove CSS-a: Izgled stranica

Izrada web stranica nije posao za osobe s slabim živcima. Osim znanja, mora se posjedovati kreativno razmišljanje, perfekcionistička sklonost i filigranska preciznost prilikom obilježavanja stranice. CSS u ovom slučaju jednostavno je nezamjenjiv. I svaki webmaster treba znati svoje osnove.

Što je CSS?

Oni koji su upoznati s HTML-om, ne moraju reći da je to jezik označavanja stranice. No, njezini su kreatori odlučili dodati oznake, odgovorne za izgled i dizajn. To je samo s ovim pristupom, kôd stranice postao je preglasan i gotovo nečitljiv. Naravno, na taj način nije doveo niotkuda, pa je usvojen sveobuhvatno rješenje: HTML je odgovoran za izgled stranice, CSS za vizualni dizajn.

Kratica CSS označava Cascading Style Sheets (kaskadni stilski list). Sastoji se od parametara koji su odgovorni za vizualizaciju objekata na stranici.

Prednosti CSS-a

Kaskadni stilski list omogućuje webmasteru ne samo stvaranje lijepog resursa, već i čitanje koda, što značajno smanjuje njegovu veličinu. Pomoću CSS-a možete odrediti takve parametre koji nisu mogući u HTML oznaku stranice.

S CSS-om možete doslovce promijeniti izgled stranica resursa u samo nekoliko klikova. Ovo je vrlo povoljno, pogotovo ako je stranica više stranica. Sve promjene dizajna izvršene su u kaskadnom stilu, a ne mijenjanjem parametara na svakoj stranici resursa. I samo zahvaljujući CSS-u možete implementirati blok marku.

Povezivanje CSS-a

Govoreći o osnovnim principima CSS-a, prvi korak je da naučite kako spojiti kaskadni stilski list na HTML datoteku. Taj je proces vrlo jednostavan. Prvi korak je stvaranje HTML dokumenta. Za one koji još ne znaju, oni ga stvaraju u programu Notepad. Zatim pomoću funkcije "Spremi kao" morate navesti HTML ekstenziju.

Kaskadni stilski list izrađen je na isti način, samo datoteku mora biti specificirana s proširenjem css. Primljeni dokument treba spremiti u istu mapu kao i HTML datoteke. Na primjer, dokument stila iz stila naziva se style.css. Da biste ga povezali s HTML dokumentom, morate upotrijebiti oznaku , koja je odgovorna za povezivanje vanjskih datoteka. Između oznaka , potrebno je unijeti sljedeće:

Možda je to jedan od najprikladnijih načina povezivanja vanjskih datoteka.

CSS pravilo

Studija CSS označavanja trebala bi započeti s proučavanjem sintakse. Nema oznaka, skripti ili parametara u kaskadnom stilu. Postoji samo pravilo koje treba slijediti. Sastoji se od izbornika i blok stilova. Na primjer, u kaskadnom stilu, položaj se daje: body {background: black-color: white}.

Ovdje je tijelo selektor koji je odgovoran za oblikovanje stila tijela - pozadina: crna i boja: bijela su svojstva i njihova značenja. Napisane su točnim zarezom. Ta pozicija čini pozadinu stranice crnima, a tekst je bijeli.

selektora

Pa nastavljamo s intenzivnim uvodom na CSS. Izgled stranica će biti prilično teško bez poznavanja selektora. Ako je sve jasno s svojstvima i njihovim vrijednostima, tada će dodatno znanje o selektora pomoći u izradi željenog izgleda stranice.

Što trebate znati o selektora? Prvo, njihove sorte:

• Identifikator. Nazivi elemenata stranice mogu se koristiti kao selektori. U slučaju, primjerice, trebate odabrati odlomak teksta s drugom bojom, dodati identifikator. Navedeno je pomoću parametra id.

Važno je imati na umu da se jedan identifikator može koristiti samo jednom. U ovom primjeru izbornik se naziva ružičasto, ako vam je potreban drugi identifikator, jednostavno treba dodijeliti drugo ime (pink2, zeleno, itd.).

klase. Odabir klase se koristi ako želite postaviti iste parametre za nekoliko objekata. Na primjer, za dvije odlomke teksta morate navesti crvenu boju.

Objekti s razredima mogu biti bilo koji broj.

Za isti objekt možete odrediti i klasu i identifikator - to ne proturječi CSS označavanju. Ali budući da identifikator ima veći prioritet, stil će se koristiti za objekt. Kod obilježavanja stranice u CSS, valja razmotriti.

Identifikatori i klase mogu se primijeniti na sve objekte. A ako trebate odrediti jedan stil za tekst i slike, ne možete odrediti naziv elementa, kao što je to bio u primjeru (p # pink, p.red). Možete jednostavno staviti točku ili rešetku. Također, selektori se mogu grupirati. Na primjer, h1, h2, h3 {color: red-font-sixe: 17px}.

Izgled stranice

Proučavajući izgled stranica, možete shvatiti da postoji nekoliko njegovih sorti:

• Tablični. Kada nije bilo kaskadnih stilskih ploča, ova oznaka bila je glavna. To je omogućilo najpreciznije smještaje resursnih objekata jedni od drugih. No kôd se pokazao prevelikim i slabo je indeksiran tražilicama. Još jedan nedostatak ove metode je brzina preuzimanja. Dok se cijela tablica ne učita, korisnik neće ni vidjeti početak teksta.
• Blok. Sada je to glavni način izgleda stranice. Njegova uporaba postala je moguća jedino zahvaljujući razvoju i poboljšanju stilskog lista.

Prednosti rasporeda blokova

Blokiraj izgled stranice pomoću CSS-a ima nekoliko nepobitnih prednosti. Prvo, stil objekata je odvojen od HTML dokumenta, što uvelike poboljšava čitljivost koda i omogućuje brzu vizualnu promjenu. Drugo, moguće je prekriti jedan sloj na drugom, a to nekoliko puta olakšava proces pozicioniranja. Naravno, takva su mjesta brže učitana i indeksirana pomoću tražilica. Raspored stranica u CSS olakšava postavljanje modernih vizualnih efekata.

Jedini nedostatak ovog pristupa je drugačije "razumijevanje" preglednika. Neki ljudi prikazuju resurse u obliku u kojem webmaster vidi. No, postoje preglednici koji iskrivljuju sliku, tako da s velikim brojem klasa i selektora morate koristiti hackove koji će kôd omogućiti cross-preglednik prijateljski.

Kako napraviti izgled web mjesta?

Prva stvar koju biste trebali početi je stvaranje izgleda. Ovo bi trebalo biti redovna slika s proširenjem PSD-a. Nakon izrade (kupnje ili preuzimanja), potrebno je rezati sliku u blokove i smjestiti je u jednu mapu (po mogućnosti odvojeno). Ti fragmenti će se koristiti kao pozadina za blokove.

U HTML dokumentu za raspored blokova koristite oznaku

Prva stvar koju treba učiniti nakon što je izgled web-lokacije izrezan na komade, u HTML-u postavlja strukturu web-lokacije pomoću oznake

Postavite parametre

Na primjer, možete jasno vidjeti kako su postavljeni parametri za CSS blokade. Pozicioniranje izgleda stranica određeno je pikselima, iako je u većini slučajeva bolje koristiti postotke. U prozoru preglednika ova će stranica izgledati "prilagođena različitim dijelovima platna", jer je u primjeru korištena samo boja blok područja. Ali ako ga zamijenite pozadinskom slikom, možete dobiti ne samo prekrasan, ali i prilično funkcionalan proizvod.

Između oznaka

Ovaj primjer je samo mali dio svega što će se webmasterom morati baviti dok radite na kvalitativnim karakteristikama resursa. Kada stvorite dobar web resurs, često možete koristiti hackove kako biste stekli funkciju unakrsnog preglednika. Uređivanje kodova stranica može biti u posebnim urednicima, što uvelike pojednostavljuje rad, iako ne uklanja webmastera iz potrebe za ručnim uređivanjem.

Svatko može samostalno izraditi web stranicu. Glavna stvar je shvatiti da su i CSS i HTML stvorili ljudi i namijenjeni ljudima. Osnove izgleda stranice dostupne su svima, a stvaranje web resursa nije samo prednost izabranih, već može biti prilično obična aktivnost svima koji to žele.