Izrada web stranica nije posao za osobe sa slabim živcima. Osim znanja, morate imati kreativan način razmišljanja, interese perfekcionista i preciznost pri izgledu stranice. CSS je neophodan u ovom pitanju. A poznavanje njegovih osnova je potrebno za svakog webmastera.
Što je CSS? Oni koji su upoznati s HTML-om ne moraju reći da je to jezik za označavanje stranica. No, njegovi kreatori su odlučili dodati oznake koje su odgovorne za izgled i dizajn. To je samo s ovim pristupom, kod stranice je postao preobiman i gotovo nečitljiv. Naravno, na ovaj način nigdje nije došlo, pa je to bilo sveobuhvatno rješenje: HTML je odgovoran za izgled stranice, CSS - za vizualni dizajn.
CSS skraćenica označava Cascading Style Sheets (Cascading Style Sheets). Sastoji se od parametara koji su odgovorni za vizualizaciju objekata na stranici.
Prednosti CSS-a
Cascading style sheet omogućuje webmasteru ne samo stvaranje dobrog resursa, nego i čitanje koda, uvelike smanjujući njegovu veličinu. Pomoću CSS-a možete postaviti parametre koji nisu mogući u HTML oznaci stranice. Pomoću CSS-a možete doslovno promijeniti izgled stranica resursa u samo nekoliko klikova. To je vrlo zgodno, pogotovo ako imate web-stranicu s više stranica. Sve promjene u dizajnu napravljene su u kaskadnom obrascu, a ne promjenom parametara na svakoj stranici resursa. I samo zahvaljujući CSS-u možete napraviti blok marku.
CSS veza
Govoreći o osnovnim načelimaCSS-u, najprije morate naučiti kako povezati kaskadni obrazac s HTML datotekom. Ovaj proces je vrlo jednostavan. Prije svega, morate stvoriti HTML dokument. Za one koji još ne znaju, oni su kreirani u programu Notebook. Zatim, koristeći funkciju "Spremi kao", morate navesti HTML proširenje.
Na potpuno isti način, stvorena je kaskadna tablica stilova, treba navesti samo proširenje css datoteke. Rezultirajući dokument mora biti spremljen u istu mapu kao i HTML datoteke. Pretpostavimo da se dokument stila naziva style.css. Da biste ga povezali s HTML dokumentom, morate koristiti oznaku koja je odgovorna za povezivanje vanjskih datoteka. Između oznaka morate unijeti sljedeće:
Ovo je vjerojatno jedan od najprikladnijih načina povezivanja vanjskih datoteka.
CSS pravilo
CSS markup studija trebala bi početi s učenjem sintakse. U kaskadnom obrascu nema oznaka, skripti ili opcija. Postoji samo pravilo koje treba slijediti. Sastoji se od selektora i bloka stilova. Na primjer, u kaskadnom obrascu stila, daje se položaj: tijelo {pozadina: crna; boja: bijela}. Ovdje tijelo i je selektor odgovoran za stilsko oblikovanje tijela mjesta; pozadina: crna i boja: bijela su svojstva i njihova značenja. Napisani su kroz točku. Ovaj položaj čini pozadinu web-lokacije crnom, a tekst bijelim.
Selektori
Pa, nastavljamo intenzivan unos u CSS. Layout stranice će biti teško učiniti bez poznavanja selektora. Ako su svojstva i njihova značenja jasna, onda je potrebno dodatno znanje o selektorimaolakšati izgled stranice. Što trebate znati o selektorima? Prvo, njihove sorte:
Identifikator. Kao selektori mogu se koristiti nazivi elemenata stranice. U slučaju kada je, primjerice, potrebno označiti odlomak teksta u drugoj boji, dodajte identifikator. Navedena je parametrom id.
Vrijedi zapamtiti da se jedan ID može koristiti samo jednom. U ovom primjeru, izbornik se naziva ružičast, ako vam je potreban još jedan identifikator, onda samo treba dati drugo ime (pink2 zeleno, itd.). Klasa. Klasni izbornik se koristi ako je potrebno postaviti nekoliko objekata na iste parametre. Na primjer, za dva stavka teksta morate navesti crvenu boju.
Klase mogu biti bilo koji broj objekata. Za isti objekt možete navesti i klasu i identifikator - ne proturječi CSS oznaci. No budući da ID ima veći prioritet, objekt će koristiti svoj vlastiti stil. Kod označavanja stranica u CSS-u to treba uzeti u obzir. Identifikatori i klase mogu se koristiti za bilo koji objekt. A ako trebate staviti jedan stil teksta i slika, ne možete navesti naziv elementa, kao u primjeru (p # pink, p.red). Jednostavno možete staviti točku ili rešetku. Također možete grupirati selektore. Na primjer, h1 h2 h3 {boja: crvena; font-sixe: 17px}.
Raspored stranica
Dok proučavate označavanje stranice, može se shvatiti da postoji nekoliko varijanti stranica:
Tablichna. Kad nije bilo kaskadnog stila, ovajmarkup je bio glavni. To je omogućilo precizno postavljanje objekata resursa jedni od drugih. No, kod je vrlo velik i slabo indeksiran od strane tražilica. Drugi nedostatak ove metode je brzina preuzimanja. Dok se ne preuzme cijela tablica, korisnik neće ni vidjeti početak teksta.
Blok. Ovo je glavni način označavanja stranice. Njegovo je korištenje postalo moguće samo kroz razvoj i poboljšanje stila.
Prednosti rasporeda blokova
Izgled bloka stranice pomoću CSS-a ima nekoliko neporecivih prednosti. Prvo, stil objekta je odvojen od HTML dokumenta, što uvelike povećava čitljivost koda i omogućuje vam da brzo napravite vizualne promjene. Drugo, postoji mogućnost nametanja jednog sloja na drugi, a to nekoliko puta olakšava proces pozicioniranja. Naravno, takva su mjesta brže preuzeta i indeksirana pomoću tražilica. Izgled stranice u CSS-u olakšava postavljanje modernih vizualnih efekata. Jedini nedostatak ovog pristupa je različito "razumijevanje" preglednika. Neki odražavaju izvor u obliku u kojem webmaster vidi. No, tu su i preglednici koji iskrivljuju sliku, pa ako imate veliki broj klasa i selektora, trebate koristiti hakove koji čine kodni preglednik.
Kako izraditi blok stranice?
Prva stvar koju treba početi je stvaranje izgleda. Ovo bi trebala biti obična slika s ekstenzijom psd. Nakon izrade (kupnje ili preuzimanja) potrebno je rezati sliku nablokova i staviti u jednu mapu (po mogućnosti odvojeno). Ovi isječci će se koristiti kao pozadina za blokove. U HTML dokumentu za izgled bloka koristi se oznaka. Sve unutar njega naziva se sloj, a format ovog sloja postavlja se u kaskadnom listu elemenata pomoću klasa ili identifikatora. Prva stvar nakon što će izgled stranice biti izrezana na dijelove, u HTML-u postavite strukturu stranice, koristeći oznaku i dodijelite selektor za svaki sloj. Na primjer, ako je ovo izbornik, napišite: id = menu. Nakon toga morate spojiti kaskadni stil i postaviti vlastite parametre za svaki sloj. Najjednostavniji kod ima sljedeći oblik.
Postavljanje parametara
Primjer pokazuje kako su parametri postavljeni za CSS blokove. Izgled izgleda stranice izražen je u pikselima, iako je u većini slučajeva bolje koristiti kamatu. U prozoru preglednika, ova će stranica imati oblik "obrubljen iz različitih dijelova platna", kao što je u primjeru korištena samo boja blok područja. Ali ako ga zamijenite pozadinskom slikom, tada možete dobiti ne samo lijep nego i funkcionalan proizvod.
Između oznaka možete napisati sve potrebne informacije s potrebnim oblikovanjem. Bilo koji tekst pisan unutar te oznake odmah se stavlja na sloj na oblikovanom bloku. Objekti između njih automatski će se smanjiti kako ne bi premašili veličinu bloka. Ovaj primjer je samo mali dio svega što se webmaster mora baviti kvalitetom.karakteristike resursa. Prilikom stvaranja dobrog web-resursa, hackovi se često mogu koristiti za kupnju Crossbredsa. Kodove stranica možete urediti u posebnim urednicima, što uvelike pojednostavljuje rad, iako ne oduzima webmasteru potrebu za ručnim uređivanjem.
Svatko može samostalno izraditi stranicu. Glavna stvar - razumjeti da su i CSS, HTML su stvorili ljudi i namijenjen ljudima. Osnove označavanja stranica su dostupne svima, a stvaranje web-resursa nije samo povlastica odabranog, nego može biti i svakodnevna aktivnost svakoga tko želi.
CSS skraćenica označava Cascading Style Sheets (Cascading Style Sheets). Sastoji se od parametara koji su odgovorni za vizualizaciju objekata na stranici.
Ovo je vjerojatno jedan od najprikladnijih načina povezivanja vanjskih datoteka.
