CSS Osnove (Cascading Style Sheets) izdvojena tema

poruka: 39
|
čitano: 31.711
|
moderatori: Danny_HR, Lazarus Long, XXX-Man, vincimus
+/- sve poruke
ravni prikaz
starije poruke gore
9 godina
protjeran
offline
CSS Osnove (Cascading Style Sheets)

Što je to CSS?

 

  1. CSS je skraćenica za Cascading Style Sheets
  2. CSS-om se definira kako će se HTML elementi prikazati na web stranici
  3. CSS je dodan HTML-u 4.0 kako bi se riješio problem dizajna
  4. CSS se koristi interno (unutar style tagova) ili eksterno (CSS datoteka)

 

 

CSS vam može uštedjeti puno vremena!

Kao što sam već napomenuo, CSS-om definiramo kako će se HTML elementi prikazati na web stranici (krajnjem korisniku). Stil (CSS) se obično sprema u eksterne CSS datoteke (tipično, datoteke sa .css kao ekstenzijom). Eksterne CSS datoteke omogućuju vam da promijenite izgled svih web stranica (koje koriste istu CSS datoteku), uređujući samo jednu datoteku.

 

CSS Sintaksa

CSS se sastoji od dva glavna dijela - CSS selektora, te deklaracija. Svaka se deklaracija sastoji od svojstva, te vrijednosti svojstva. Svojstvo je stilski atribut koji želite promjeniti. Svako svojstvo mora sadržavati vrijednost.

Svaka deklaracija završava sa točkom-zarezom. Preporučljivo je da svaku deklaraciju stavljate u zaseban redak, kako bi vaš CSS bio pregledniji. Primjer:

 

selektor

{

     svojstvo1:vrijednost;

     svojstvo2:vrijednost;

     svojstvo3:vrijednost;

}

 

CSS Komentari

Kao i u većini programskih jezika ili metoda i CSS podržava komentare. Uglavnom se komentari koriste za objašnjavanje köda, kako bi se kasnije lakše snašli. Važna napomena je da web preglednici ne interpretiraju komentare. CSS komentar počinje sa "/*" (bez navodnika), te završava sa "*/". Primjer

 

#izbornik

{

     margin-top:20px; /* Pomiče izbornik 20 piksela od vrha */

}

 

CSS ID i Klasa

CSS vam omogućuje da odredite svoje selektore - ID, te klasu (ID, class). ID selektor se koristi za specificiranje stila za jedan, unikatan element. ID selektor koristi HTML-ov id atribut, te je definiran sa "#" (bez navodnika). Primjer ispod će biti primijenjen na HTML elementu čiji je id atribut postavljen na "dijalog".

 

#dijalog

{

     color:#DD0000; /* Postavlja boju teksta na tamno crvenu */

     padding-left:15px; /* Pomiče sadržaj unutar elementa za 15 piksela u lijevu stranu */

}

 

Selektor klase (class selector) se koristi za specificiranje stila za grupu elemenata. Suprotno od ID selektora, class selektor se često koristi na nekoliko elemenata. Ova metoda vam omogućuje definiranje stila grupi elemenata sa istim class atributom. Class selektor koristi HTML-ov class atribut, te je definiran sa "." (bez navodnika). Primjer ispod će biti primijenjen na grupu HTML elemenata kojima je class atribut postavljen na "centriraj".

 

.centriraj

{

     text-align:center; /* Poređuje tekst iz sredine u lijevu i desnu stranu */

}

 

Također možete specificirati da se klasa odnosi na samo određene HTML elemente. Primjer ispod će biti primijenjen samo na p (paragraf) elemente kojima je class atribut definiran kao "centriraj".

 

p.centriraj

{

     text-align:center; /* Poređuje tekst iz sredine u lijevu i desnu stranu */

}

 

Tri načina za umetanje CSS-a

Postoje tri načina za umetanje CSS-a, a to su:

 

  1. Eksterna CSS datoteka
  2. Interni CSS
  3. Postaviti CSS u istu liniju kao i HTML element

 

 

Eksterna CSS datoteka

Eksterna CSS datoteka je odličan način za primjenu stila na više različitih web stranica. Sa eksternom CSS datotekom, možete promijeniti izgled web stranice, uređujući samo jednu datoteku. Svaka web stranica mora ostvariti "vezu" do eksterne CSS datoteke, koristeći <link> tag unutar <head> tag-a. Primjer:

 

<head>

<link rel="stylesheet" type="text/css"  href="moj_stil.css" />

</head>

 

Eksterna CSS datoteka se može pisati/uređivati u bilo kojem tekstualnom ureditelju (text-editor). Datoteka ne bi smjela koristiti nikakve HTML tagove, te bi trebala biti spremljena sa .css ekstenzijom. Primjer CSS datoteke:

 

hr { color: sienna; }

p { margin-left:20px; }

body { background-color:#44444AA; }

 

Interni CSS

Interni CSS bi se trebao koristiti u situaciji kada zasebna stranica zahtjeva zaseban stil. Interni CSS se definira unutar <head> i <style> taga. Primjer:

 

<head>

     <style>

     hr { color: sienna; }

     p { margin-left:20px; }

     body { background-color:#4444AA; }

     </style>

</head>

 

CSS u liniji HTML elementa

Ovakav način uređivanja CSS-a bi trebalo izbjegavati, ili barem ne koristiti u prevelikoj dozi. Stil se u ovoj situaciji piše u liniji elementa, točnije style atributu. Primjer:

 

<p style="margin-left:25px;">Ovaj je paragraf pomaknut u lijevo.</p>

 

Lista CSS svojstava

http://www.w3.org/TR/CSS21/propidx.html

 

Prioriteti Izvršavanja (napisao: Nemo_BJ)

1. Interpretacija inline (linijskog) koda

2. Interpretacija CSS-a napisanog u head tagu

3. Interpretacija CSS-a u eksternoj datoteci

We come to love not by finding a perfect person, but by learning to see an imperfect person perfectly.
Poruka je uređivana zadnji put ned 5.9.2010 10:17 (Luka P.).
Moj PC  
16 0 hvala 11
9 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Sviđa mi se post. Inače znam nešto malo CSS-a, nikad mi ga se nije dalo pretjerano učiti, ali tvoj post pojednostavljuje stvar. Osmijeh

 
0 0 hvala 0
9 godina
protjeran
offline
RE: CSS Osnove (Cascading Style Sheets)
GigaGirl kaže...

Sviđa mi se post. Inače znam nešto malo CSS-a, nikad mi ga se nije dalo pretjerano učiti, ali tvoj post pojednostavljuje stvar. Osmijeh

Drago mi je da to čujem (tj. čitam, al nema veze) Cool

We come to love not by finding a perfect person, but by learning to see an imperfect person perfectly.
11 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Ne mogu  da razumem grupiranje, primer:

 

.order-summary-content .cart .cart-header-row td.end,.wishlist-content .cart .cart-header-row td.end

{

text-align: right;

padding-right: 5px;

}

 

order-summary-content cart cart-header-row nemaju zapirku a posle td.end ima ',' za grupiranje.

 

 

Moj PC  
0 0 hvala 0
9 godina
protjeran
offline
RE: CSS Osnove (Cascading Style Sheets)
Kuzo kaže...

Ne mogu  da razumem grupiranje, primer:

 

.order-summary-content .cart .cart-header-row td.end,.wishlist-content .cart .cart-header-row td.end

{

text-align: right;

padding-right: 5px;

}

 

order-summary-content cart cart-header-row nemaju zapirku a posle td.end ima ',' za grupiranje.

 

 

 

Zarez znači da će se odnositi na još jednu klasu ili ID (znači onaj dio iza zareza).

U tvom slučaju

 

text-align: right;

padding-right: 5px;

 

će se odnositi na oboje

.order-summary-content .cart .cart-header-row td.end i

.wishlist-content .cart .cart-header-row td.end

 

Znači, to su odvojene grupacije

We come to love not by finding a perfect person, but by learning to see an imperfect person perfectly.
10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Možda bi trebalo reći kako su poslagani prioriteti, kako se izvršava css:

 

1. prvo se izvršava stil unutar html tagova, npr.

 

    <body><div style="width:auto"></body>

 

2. nakon toga se izvršava css napisan u head tagu..

3. nakon toga css u eksternoj datoteci...

Poruka je uređivana zadnji put pon 2.8.2010 20:12 (Nemo_BJ).
 
2 0 hvala 1
9 godina
protjeran
offline
CSS Osnove (Cascading Style Sheets)

Prije postavljanja svojih stilova, preporučljivo je da "resetirate" web browserove zadane stilove. Pronašao sam na stranici Eric Meyera kod za resetiranje stila (ovaj je detaljan, makar ih ima hrpe na internetu). Pa evo ga (znači samo ubacite na početak CSS datoteke). Link: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

 

Evo malo sam smanjio kod (sve u jedan red) jer se ovdje nema što mijenjati kasnije.

/************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* CSS Reset by Eric Meyer */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }
/************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

 

EDIT: Editor ga je pretvorio u 6 redova :D

We come to love not by finding a perfect person, but by learning to see an imperfect person perfectly.
Poruka je uređivana zadnji put uto 3.8.2010 18:46 (Luka P.).
Moj PC  
1 0 hvala 0
9 godina
protjeran
offline
RE: CSS Osnove (Cascading Style Sheets)
Nemo_BJ kaže...

Možda bi trebalo reći kako su poslagani prioriteti, kako se izvršava css:

 

1. prvo se izvršava stil unutar html tagova, npr.

 

    <body><div style="width:auto"></body>

 

2. nakon toga se izvršava css napisan u head tagu..

3. nakon toga css u eksternoj datoteci...

Dodano u prvi post (nisam primjetio prije poruku) {#emotions_dlg.wink}

We come to love not by finding a perfect person, but by learning to see an imperfect person perfectly.
10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Nema frke, ako se sjetim još šta, postam Namigiva

 
0 0 hvala 0
10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Da ne otvaram novu temu postavit ću ovdje pitanje.

 

Pišem tutorijal za jednu stranicu koji je vezan uz CSS3. Prvo sam počeo raditi na demo-u i pri sam kraj posla primjetio sam kako Googleov Chrome preglednik ima jedan bug za koji googlajući nisam uspio naći rješenje. Prvo što sam napravio je krug tako da sam za webkit border radius funkciju za vrijednost stavio pola duljine i širine od kvadrata. Međutim, kad sam dodao webkit box shadow funkciju koja uz blur radius, horizontal te vertical offset i boju sadrži i vrijednost inset (A u njoj je problem). Inset shadow mi se u Safari pregledniku prikazuje odlično kao i u Mozilli i Operi dok se u Chromeu nacrta samo oblik kao na priloženoj slici. Jel neko zna miže li se taj problem riješiti da radi u Chromeu isto kao i na ostalim preglednicima.

Oblik Oblik
Moj PC  
0 0 hvala 0
9 godina
protjeran
offline
RE: CSS Osnove (Cascading Style Sheets)
k1c0 kaže...

Da ne otvaram novu temu postavit ću ovdje pitanje.

 

Pišem tutorijal za jednu stranicu koji je vezan uz CSS3. Prvo sam počeo raditi na demo-u i pri sam kraj posla primjetio sam kako Googleov Chrome preglednik ima jedan bug za koji googlajući nisam uspio naći rješenje. Prvo što sam napravio je krug tako da sam za webkit border radius funkciju za vrijednost stavio pola duljine i širine od kvadrata. Međutim, kad sam dodao webkit box shadow funkciju koja uz blur radius, horizontal te vertical offset i boju sadrži i vrijednost inset (A u njoj je problem). Inset shadow mi se u Safari pregledniku prikazuje odlično kao i u Mozilli i Operi dok se u Chromeu nacrta samo oblik kao na priloženoj slici. Jel neko zna miže li se taj problem riješiti da radi u Chromeu isto kao i na ostalim preglednicima.

Malo sam surfao, i trenutno je to neizvedivo u Chrome web pregledniku (koliko sam vidio)...

10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Da, i ja sam na to naletio šteta što nemože, ali ipak nema veze. Stavit ću samo za Operu i Mozillu.

 

EDIT: Jel zna neko mogu li se koristiti linear gradienti u Operi?

k1.c0
Poruka je uređivana zadnji put pet 3.9.2010 9:40 (k1c0).
Moj PC  
0 0 hvala 0
11 godina
offline
CSS Osnove (Cascading Style Sheets)

Neznam koliko ti jepametno koristiti naprednije opcije CSS-a s obzirom da u svim browserima nisu podrzane (npr round edges, drop shaddow i slicno).

I'm going woo woo
 
0 0 hvala 0
10 godina
neaktivan
offline
RE: CSS Osnove (Cascading Style Sheets)

Što sam dosad napravio super izgleda u Mozilli  i Operi. U web kitovim preglednicima nisam stavio inset shadow, ali ako stavim na Safariju također super izgleda dok na Chromeu se pojavljuje taj bug. Možda bi mogli riješiti taj bug kad bi dodali još jednu funkciju, -webkit-box-radius-shadow. Znači, da im se na taj "novi" kvadrat mogu staviti zaobljeni krugovi.

k1.c0
9 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Jedna mala ispravka molim. U uvodnom postu autor kaže kako:

 

#dijalog {

color: #DD0000; /* Postavlja boju teksta na tamno crvenu */

padding-left: 15px; /* Pomiče dijalog element za 15 pixela u lijevu stranu */

}

 

Problem je u drugom retku jer nije točno, kako bi se element pomaknu 15 pixela u lijevu stranu potrebno je koristiit svojstvo margin,

a navedeno svojstvo pomiče sadržaj unutar elementa za 15 pixela ulijevo.

 

Dakle margin se koristi kada se elementu želi dodati obrub,

a padding se koristi ka da se sadržaj unutar elementa želi odmaknuti od ruba elementa.

 

Primjer priložen na slici

 

Potrebno je dodati da kad se koristi svojstvo padding da to utječe na ukupnu širinu elementa. Element na slici ima definiranu širinu na 400px, a u korištenju sa svojstvom padding njegova stvarna širina je 417px, jer je vrijednost paddinga od 15px dodana tom elementu te mu je dodano i 2px zbog korištenja bordera u širini od 1 px sa svake strane.

Margin i padding razlike Margin i padding razlike
 
4 0 hvala 1
11 godina
offline
RE: CSS Osnove (Cascading Style Sheets)

jedno pitanje zašto css3 već nije dovršen odnosno zbog čega toliko odugovlače?

10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Tko kaže da nije dovršen? Dovršen je on, ali nije podržan u svim preglednicima...

k1.c0
Moj PC  
0 0 hvala 0
10 godina
offline
CSS Osnove (Cascading Style Sheets)

Pozdrav svima!

 

Koristim jednu php skriptu za dodavanje vijesti na svoju stranicu. U css fajlu sam definirao da mi se oko slike pojavljuje tekst (znači sa desne strane i ispod slike ide tekst)

 

To sam uradio ovako:

 

img
{
  border: 0px;
  display: block;
  padding: 0px;
  padding-right: 10px;
  margin: 0px;
  float: left;
}

 

Moje pitanje glasi: da li je ovo moguće definirati samo za određenu veličinu slike npr 300x150 tj. da tekst ide sa desne strane i ispod u slučaju kad se radi o toj veličini slike? Za ostale veličine  slika to ne želim.

 

Nadam se da sam pitanje razumljivo napisao.

 

unaprijed hvala

 
0 0 hvala 0
10 godina
odjavljen
offline
RE: CSS Osnove (Cascading Style Sheets)
mmmnnn kaže...

 

Moje pitanje glasi: da li je ovo moguće definirati samo za određenu veličinu slike npr 300x150 tj. da tekst ide sa desne strane i ispod u slučaju kad se radi o toj veličini slike? Za ostale veličine  slika to ne želim.

 

Nadam se da sam pitanje razumljivo napisao.

 

unaprijed hvala

Definiraj neku klasu tipa img_300, koju češ onda u htmlu pozivati, sa <img class="img_300" src="ime_slike.jpg" />, klasu u CSS definiraš sa točkom .

Ovako dok imaš samo img selektor onda promjenuješ na sve img tagove.

10 godina
offline
RE: CSS Osnove (Cascading Style Sheets)

hvala pomoglo je {#}

9 godina
offline
CSS Osnove (Cascading Style Sheets)

može li mi netko objasniti sljedeće:

#primjer a {

position: relative;

z-index: 10;

display: block;

float: left;

width: 100px;

height: 75px;

margin: 10px;

}

1. zašto stoji ono "a".. jasno mi je kad stoji samo primjer i kad stoji primjer hoover ali što znači "a"

2. z-index?! 

 

 

Kraj razgovora s Kobeom kaže novinar: Možda ipak nije kao Dražen Petrović ali ipak igra kao super zvijezda! (Success is my only motherfucking option, failure's not)
Moj PC  
0 0 hvala 0
10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)
  1.  #primjer a {} - To znači da će svaki element <a> unutar elementa sa ID-jem primjer imati karakteristike dodijeljenje u CSS codeu
  2.  z-index - Pomoću z-index karakteristike određuješ poziciju "sloja" (layera) naspram ostalih elemenata - Više o z-indexu ovdje!
http://bit.ly/fEJAtE
Moj PC  
0 0 hvala 1
7 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Pozdrav,

 

   Da li možeš dati malo opsežniji tutorijal za @font-face, samo @font-face jer sam na jednoj stranici to koristio i svugdje je htjelo(barem ondje gdje sam isprobavao a to je ie,mozzila i chrome). Unaprijed hvala

 
0 0 hvala 0
10 godina
neaktivan
offline
Re: CSS Osnove (Cascading Style Sheets)

Pozdrav,

 

na http://www.mojwebdizajn.net/  nalaze se vodič za CSS.

 

LP

Ivan Mali

Poruka je uređivana zadnji put čet 22.3.2012 17:14 (Little).
8 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Bok svima , zna li netko neki tutorial ta uredivanje textboxova u css-u ?

franovrano
 
0 0 hvala 0
8 godina
neaktivan
offline
Re: CSS Osnove (Cascading Style Sheets)

isto ko i svaki drugi element tag ti je input za defoultno, a ako oš da je neki razlićit od drugih dodaš mu i klasu. Što se CSS tiće sve isto stime da ti ustartu imaju neki border i boja pozadine im je bjela.

10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

ne razumin ovaj position absulute i relative, htio bi da mi je jedan div u pozadini dok su ostala 2 iznad njega, evo npr na ovoj skici htio bi da mi ovaj zeleni div se nalazi u pozadini, ovaj plavi div se nalazi unutar crvenog, te ovaj nerančasti prelazi preko dijela zelenog diva.

stavio sam bio da su mi svi ovi divovi absolute osim plavih di je relative, te sam za zeleni div stavit z-axis -1 dok je na ostalim divovima je 0, sad mi prikazuje sve divove ali mi ne prikazuje zeleni. 

Come to the dark side.... we have cookies :)
Moj PC  
0 0 hvala 0
8 godina
offline
CSS Osnove (Cascading Style Sheets)

z-axis wtf?? Valjda misliš na z-index...

Moj PC  
0 0 hvala 0
10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

ma e taj z index, nisan pratija sta pisen al ne kuzim sta sam falio

Come to the dark side.... we have cookies :)
Moj PC  
0 0 hvala 0
4 godine
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Pozdrav, može li mala pomoć od onih koji imaju iskustva i znaju kako ovo napraviti. Dakle želim border kao na slici, tj. zanima me općenito kako se umetne slika ili box neki na border da bude samo jedna a ne da se ponavlja ili da izgleda onako kao neki uzorak. Hvala unaprijed :)

Poruka je uređivana zadnji put pet 17.4.2015 19:58 (marko_beginner).
 
0 0 hvala 0
Nova poruka
E-mail:
Lozinka:
 
vrh stranice