Cascading Style Sheet (CSS) je sistem za kodiranje web stranica koji omogućava dizajnerima da manipuliraju s nekoliko funkcija odjednom dodjeljujući određene elemente grupama. Na primjer, koristeći kôd za pozadinu web stranice, dizajneri mogu promijeniti boju pozadine ili sliku na svim stranicama web stranice jednom promjenom u CSS datoteku. Evo kako stvoriti CSS za osnovnu web stranicu.
Koraci
Dio 1 od 4: Pisanje Inline CSS -a
Korak 1. Budite sigurni da poznajete HTML oznake
Trebali biste znati kako oznake funkcioniraju i
src
i
href
atribute.
Korak 2. Naučite neka od osnovnih svojstava CSS -a
Vidjet ćete da postoji jako mnogo nekretnina. Međutim, nije potrebno sve ih naučiti.
-
Neka dobra osnovna svojstva CSS -a koja trebate znati su
boja
i
porodica fontova
- .
Korak 3. Saznajte o vrijednostima za svako odgovarajuće svojstvo
Sva svojstva trebaju vrijednost. Za
boja
imovine, na primjer, možete staviti
crvena
vrijednost.
Korak 4. Saznajte o
stilu
HTML atribut.
Koristi se unutar elementa poput
href
ili
src
. Da biste ga koristili, unutar navodnika iza znaka jednakosti, stavite CSS atribut, dvotočku, a zatim vrijednost svojstva. Ovo je poznato kao CSS pravilo.
Korak 5. Shvatite da inline CSS obično ne koriste profesionalni web programeri za web stranice
Inline CSS može dodati nepotreban nered u HTML dokument. Međutim, to je odličan način da se upoznate s načinom rada CSS -a.
Dio 2 od 4: Pisanje osnovnog CSS -a
Korak 1. Pokrenite program koji želite koristiti
To bi vam trebalo omogućiti stvaranje HTML i CSS datoteka.
Ako nemate instaliran poseban program, možete koristiti Notepad ili neki drugi uređivač teksta. Jednostavno spremite datoteku i kao tekstualnu datoteku i kao CSS datoteku
Korak 2. Otvorite HTML datoteku za svoju web stranicu
Ovo biste trebali otvoriti i s HTML uređivačem, ako ga imate instaliranog.
HTML uređivači omogućuju vam uređivanje HTML -a i CSS -a istovremeno
Korak 3. Kreirajte oznaku unutar svoje HTML glave
Ovo će vam omogućiti da pišete CSS bez potrebe za zasebnom datotekom.
Korak 4. Odaberite element kojem želite dodati stil i upišite naziv elementa nakon čega slijedi skup uvrnutih zagrada ({})
Da bi vaš kôd bio čitljiviji, uvijek stavite drugu kovrčavu zagradu na vlastitu liniju.
Korak 5. Između zagrada, upišite svoja CSS pravila kao što biste koristili
stilu
atribut.
Svaki red mora završiti točkom -zarezom (;). Da bi vaš kôd bio čitljiv, svako pravilo treba započeti u vlastitom retku i svaki red treba uvući.
Vrlo je važno napomenuti da će ovaj stil utjecati na sve elemente odabranog tipa na stranici. Specifičniji stilovi bit će obrađeni u sljedećem odjeljku
Dio 3 od 4: Napredniji CSS
Korak 1. Kreirajte CSS datoteku, a ne HTML datoteku i spremite je pomoću
.css
produžetak.
Otvorite i svoju HTML datoteku.
Korak 2. Kreirajte oznaku u svojoj HTML glavi
Ovo će vam omogućiti da povežete zasebnu CSS datoteku sa svojim HTML dokumentom. Vaša oznaka veze treba tri atributa:
rel
tip
i
href
-
rel
znači "odnos" i govori pregledniku kakav je odnos prema HTML dokumentu. Ovdje bi trebala imati vrijednost
"stilska tablica"
- .
-
tip
govori s kojom se vrstom medija povezuje. Ovdje bi trebala imati vrijednost
"text/css"
-
href
- ovdje se koristi slično kao što se koristi u elementu, ali ovdje mora imati vezu do CSS datoteke. Ako se CSS datoteka nalazi u istoj fascikli kao i HTML datoteka, samo naziv datoteke mora biti upisan u navodnike.
Korak 3. Odaberite elemente različitih vrsta kojima želite dodati isti stil
Dodajte a
razred
atribute ovim elementima i postavite ih jednakim nazivu klase po vašem izboru. Ovo će vašim elementima dati isti stil.
Korak 4. Odredite stil koji će klasa primiti
Upišite naziv klase u svoju CSS datoteku s tačkom (.) Koja mu prethodi (tj.
.class
).
Korak 5. Odaberite pojedinačne elemente kojima želite dodati poseban stil i dodajte
id
atribut.
ID -ovi se stvaraju u CSS -u koristeći simbol funte (#) umjesto točke.
ID -ovi su specifičniji od klasa, pa će id nadjačati svaki stil klase ako ima atribut s različitom vrijednošću od klase
4. dio od 4: Naučite više
Korak 1. Posjetite w3 škole
To je službena web stranica koja ima za cilj podučavanje vještinama web razvoja. W3 ima dosta referenci navedenih za HTML i CSS, kao i druge web jezike.
Korak 2. Pronađite druge web stranice posebno usmjerene na učenje i podučavanje HTML -a i CSS -a
Web lokacije poput CSS tricks.com posebno su usmjerene na podučavanje CSS -u i vještinama web dizajna. Pronalaženje uglednih izvora pomoći će vam na vašem putu učenja.
Korak 3. Stupite u kontakt sa web dizajnerima i programerima
Njihovo iskustvo i znanje mogu vas naučiti vrijednim znanjima i vještinama.
Korak 4. Pregledajte izvorni kod web stranica na koje naiđete
Gledanje CSS-a dobro razvijenih web stranica može vam pokazati načine dizajniranja dijelova web stranica. Kopiranje kao vježba i petljanje po kodu može vam pomoći da naučite kako koristiti različite CSS atribute.
