CSS, or Cascading Styles Sheets, je način stila i sadašnjeg HTML-a. Dok HTML predstavlja značenje ili sadržaj, stilski stil predstavlja prezentaciju tog dokumenta.
Stilovi ne mirišu ili nemaju okus ništa poput HTML-a, imaju format "svojstvo: vrijednost" (property: value), a većina svojstava može se primijeniti na većinu HTML oznaka.
Sadržaj za Beginner
Applying CSS - Na različite načine možete primijeniti CSS u HTML.
Selectors, Properties, and Values - Bitovi koji čine CSS.
Colors - Kako koristiti boju.
Text - Kako manipulirati veličinom i obliku teksta.
Margins and Padding - Kako stvari izvući.
Borders - Granice. Stvari koje se kreću oko stvari.
Sve Zajedno - Bacanje svih gore navedenih sastojaka u jednu začinjenu hotpot.
Applying CSS
Postoje tri načina primjene CSS-a na HTML: Inline, internal, i external.
Inline
Inline stilovi se direktno uvlače u HTML oznake pomoću style atributa .
Oni izgledaju ovako:
Code: Select all
<p style="color: red">tekst</p>
Ali, ako se sećate, pristup najbolje prakse je da HTML treba da bude samostalan, besplatan dokument za prezentaciju, i tako se treba izbjeći linijske stilove gdje god je to moguće.
Internal
Embedded, ili internal (Ugrađeni ili unutrašnji), stilovi se koriste za celu stranicu. Unutar elementa (head)glave, oznake (style) stila okružuju sve stilove stranice.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>CSS primjer</title>
<style>
p {
color: red;
}
a {
color: blue;
}
</style>
...
Iako je poželjno za HTML-a sa inline prezentacijom, obično bolje držati HTML i CSS datoteke odvojene ...
External
Spoljni stilovi se koriste za cjelokupnu, višestruku stranicu. Postoji zasebna CSS datoteka koja će jednostavno izgledati nešto poput:
Code: Select all
p {
color: red;
}
a {
color: blue;
}
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
...
Da biste izvukli najviše od ovog tutoriala, bilo bi dobro da probate kod dok idemo zajedno, pa napravaite novi fajl sa vašim tekst-uređivačem i sačuvajte prazni dokument kao "style.css" u istom Folderu kao vašu HTML fajl.
Sada promenite HTML datoteku tako da počinje nešto ovako:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Moja Prva Stranica</title>
<link rel="stylesheet" href="style.css">
</head>
...
Selectors, Properties, and Values
Dok HTML ima oznake (tags), CSS ima selektore (Selectors). Selektori su imena koja se daju stilovima u internim i spoljašnjim listovima stilova. U ovom CSS Beginner koncentrišemo se na HTML selektore, koji su jednostavno imena HTML oznaka i koriste se za promjenu stila određenog tipa elementa.
Za svaki selektor postoje “properties” u kovrdžastim zagradama, koji jednostavno uzimaju oblik reči kao što su color, font-weight ili background-color.
Vrednost se daje osobini nakon dvotačke (NE znak "jednako"). Polu-kolone se koriste za odvajanje osobina.
Code: Select all
body {
font-size: 14px;
color: navy;
}
U suštini, kada se ovo primeni na HTML dokument, tekst između oznaka tijela (što je sadržaj čitavog prozora) biće 14 piksela u veličini i morskim u bojama.
Lengths and Percentages
Postoje mnoge jedinstvene jedinice za vrijednosti koje se koriste u CSS-u, ali postoje neke opće jedinice koje koriste brojni objekti i vrijedi se upoznati s njima prije nego što nastavite.
Ostale jedinice uključuju pc (picas), cm (centimetre), mm (milimetre) i in (inches).
px (kao što su font-size: 12px) je jedinica za piksele.
em (kao što su font-size: 2em) je jedinica za izračunatu veličinu fonta. Dakle, "2em", na primer, je dvostruko veća od trenutne veličine fonta.
pt (kao što su font-size: 12pt) je jedinica za (points) bodove, za mjerenja tipično u štampanim medijima.
% (kao što su width: 80%) je jedinica za ... čekajte ... procenti.
Kada je vrednost nula, ne morate navesti jedinicu. Na primjer, ako želite odrediti granicu, to bi bila border: 0.
Colors"px" u ovom slučaju ne znači nužno piksele - male kvadrate koji čine ekran računara - sve vreme. Savremeni preglednici omogućavaju korisnicima da zumiraju i izlaze iz stranice tako da čak i ako navedete font-size: 12px, ili height: 200px, na primjer, iako će ovo biti originalna navedena veličina u pretraživaču bez zoomiranja, oni će se i dalje povećavati i smanjivati u veličini uz prednost korisnika. To je dobra stvar. Vjerujte mi.
CSS donosi vam 16.777.216 boja. Oni mogu imati oblik imena (name), RGB (red / green / blue) vrijednost ili hex kod.
Slijedeće vrijednosti, kako bi se specificirali kako "crveno-crveno-može-biti", proizvele su isti rezultat:
Predefinisana imena boja uključuju aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, i yellow. transparent takođe je važeća vrijednost.red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00
Uz mogućnost izuzetka crno-belih, imena boja su ograničena upotreba na modernim, dobro dizajniranim web stranicama jer su toliko specifične i ograničavajuće.
Tri vrijednosti u RGB vrijednosti su od 0 do 255, a 0 je najniži nivo (bez crvene, na primjer), 255 je najviši nivo (na primjer, puno crvene). Ove vrijednosti mogu biti i procentualni.
Hexadecimal (ranije i tačnije poznat kao "sexadecimal") je bazni sistem broj 16. Mi se generalno koriste za sistem decimalnih brojeva (osnova-10, od 0 do 9), ali heksadecimalno ima 16 cifara, od 0 do f.
Broj heksa je prefiksiran karakterom heš (#) i može biti tri ili šest cifara u dužini. U suštini, triocifična verzija je kompresovana verzija šestocifreni (# ff0000 postaje # f00, # cc9966 postaje # c96, itd.). Triocifrenu verziju je lakše dešifrirati (prva cifra, kao prva vrijednost u RGB, crvena, druga zelena i treća plava), ali šestocifreni verzija daje više kontrole nad tačnom bojom.
color and background-colorCSS3, najnovija verzija CSS-a, takođe vam omogućava da definišete HSL boje - nijansu, zasićenost i lakoću.(hue, saturation and lightness)
Koje ćemo naučiti kasnije
Boje se mogu primjeniti pomoću color i background-color (obratite pažnju da to mora biti američka engleska "color" a ne "colour").
Plava pozadina i žuti tekst mogu izgledati ovako:
Code: Select all
h1 {
color: yellow;
background-color: blue;
}
Code: Select all
body {
font-size: 14px;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
to be continued..