Cascading Style Sheet (CSS) je sustav za kodiranje web stranica koji dizajnerima omogućuje da manipuliraju s nekoliko značajki 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 s jednom promjenom u CSS datoteci. Evo kako stvoriti CSS za osnovnu web stranicu.
Koraci
Dio 1 od 4: Pisanje Inline CSS -a
Korak 1. Budite sigurni da imate osnovno razumijevanje HTML oznaka
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
font-family
- .
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
stil
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. To je poznato kao pravilo CSS -a.
Korak 5. Shvatite da inline CSS obično ne koriste profesionalni web programeri za web stranice
Ugrađeni CSS može dodati nepotreban nered u HTML dokument. Međutim, to je sjajan 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 uređivačem HTML -a, ako ga imate instaliranog.
Uređivači HTML -a omogućuju vam istovremeno uređivanje HTML -a i CSS -a
Korak 3. Izradite oznaku unutar svoje HTML glave
To će vam omogućiti pisanje CSS -a bez potrebe za zasebnom datotekom.
Korak 4. Odaberite element kojemu želite dodati stil i upišite naziv elementa nakon čega slijedi skup uvijenih zagrada ({})
Da bi vaš kôd bio čitljiviji, uvijek stavite drugu kovrčavu zagradu na njezin redak.
Korak 5. Između zagrada, upišite svoja CSS pravila kao što biste koristili
stil
atribut.
Svaki redak mora završiti točkom -zarezom (;). Kako bi vaš kôd bio čitljiv, svako pravilo treba započeti u vlastitom retku i svaki redak treba biti uvučen.
Vrlo je važno napomenuti da će ovaj stil utjecati na sve elemente odabrane vrste na stranici. Više pojedinosti o stylingu bit će obrađene u sljedećem odjeljku
Dio 3 od 4: Napredniji CSS
Korak 1. Izradite CSS datoteku, a ne HTML datoteku i spremite je pomoću
.css
produžetak.
Otvorite i svoju HTML datoteku.
Korak 2. Izradite oznaku u svojoj HTML glavi
To će vam omogućiti povezivanje zasebne CSS datoteke s vašim 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 mapi kao i HTML datoteka, unutar navodnika mora biti upisan samo naziv datoteke.
Korak 3. Odaberite elemente različitih vrsta kojima želite dodati isti stil
Dodati
razred
atribute ovim elementima i postavite ih jednakim nazivu klase po vašem izboru. To će vašim elementima dati isti stil.
Korak 4. Odredite koji će stil klasa primiti
Upišite naziv klase u svoju CSS datoteku s točkom (.) Koja mu prethodi (tj.
.razred
).
Korak 5. Odaberite pojedinačne elemente kojima želite dodati poseban stil i dodajte
iskaznica
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: Saznajte 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 stranice poput CSS tricks.com posebno su namijenjene poučavanju 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 s 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
Pregled CSS-a dobro razvijenih web stranica može vam pokazati načine oblikovanja 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.
