CSS - kaskákové štýly

Z Kiwiki
Verzia z 19:10, 29. september 2010, ktorú vytvoril Juraj (diskusia | príspevky) (Vytvorená stránka „{{Navigacne menu - webovske technologie}} '''Čo je to CSS?''' *CSS je skratka pre Cascading Style Sheets(kaskádové štýly) *Štýly definujú spôsob, ako zobraziť HTM…“)
(rozdiel) ← Staršia verzia | Aktuálna úprava (rozdiel) | Novšia verzia → (rozdiel)
Skočit na navigaci Skočit na vyhledávání

Webovské technológie

HTML

CSS - kaskákové štýly

>CSS - základy
>CSS - selektory
>CSS - základné štýly
>CSS - box model
>CSS - pokročilé štýlovanie

JavaScript

PHP

XML

Google API

Java

Java applety

Java servlety

Webové služby

.NET framework

ASP .NET

Čo je to CSS?

  • CSS je skratka pre Cascading Style Sheets(kaskádové štýly)
  • Štýly definujú spôsob, ako zobraziť HTML elementy
  • Štýly boli pridané do HTML 4.0 pre vyriešenie problémov zobrazovania stránky
  • Externé štýly môžu ušetriť veľa práce pri vytváraní webu
  • Externé štýly sú uložené v CSS súborov
  • Viacero definícií štýlov sa kaskádovo zlučujú do jednej, výslednej definície.

Poradie kaskádovania:

Určitý typ definície štýlov má väčšiu prioritu než ostatné štýly definovania. Uvádzame poradie v akom sa vyhodnocujú CSS pravidlá pre vykresľovanie (renderovanie) výslednej web stránky. Začíname na úrovni s najnižšou prioritou.

  1. Preddefinované hodnoty internetového prehliadača
  2. Externá definícia štýlov (súbor .css)
  3. Interná definícia štýlov (vo vnútri elementu <head>)
  4. Inline štýl (vnútri elementu HTML)

Verzie CSS

Jazyk CSS má 3 verzie:

CSS 1

Prvá špecifikácia CSS (CSS level 1) sa stala oficiálnym odporúčaním W3C v decembri 1996. Medzi jeho vlastnosti patrí:

  • Vlastnosti písma,
  • Farba textu, pozadia a iné
  • Text atribúty, ako sú medzery medzi slovami, písmenami a riadky textu
  • Orientácia textu, obrázkov, tabuliek a ďalších prvkov
  • Okraj, hranice, odsadenie a poziciovanie a pre väčšinu prvkov
  • Unikátna identifikácia elementov

CSS 2

CSS level 2 bol vyvinutý konzorciom W3C a bol publikovaný ako odporúčanie v máji 1998. Nadmnožinou CSS1 - CSS2 obsahuje rad nových funkcií, ako je absolútne, relatívne a pevné umiestnenie prvkov, z-index, typy médií, podpora zvukových štýlov a obojsmerný text. Nové vlastnosti písma, ako sú napríklad tiene.

CSS 3

CSS level 3 je vo vývoji od 15.decembra 2005. CSS3 je modulárny a skladá sa z niekoľkých samostatných odporúčaní. Keďže CSS 3 je vo vývoji, podpora tohto odporúčanie nemusí byť v súčasných browseroch úplne implementovaná.

Základná syntax CSS

Štýl zozbrazavania vždy definujeme jednému alebo viacerým HTML elementom. Základná syntax je nasledujúca: 

   selektror: {vlastnosť: hodnota;}

Kde:

  • selektor: vo všeovecnosti sa jedná o HTML element
  • vlastnosť: vlastnosť podľa špecifikácie CSS
  • hodnota: hodnota, ktorú sme definovali danej vlastnosti.

Zakladná definícia vlastností: 

  body {color: black}
  p {font-family: "sans serif"}
  p {text-align:center; color:red}

V prípade, ak chceme definovať rovnaké vlastnosti viacerým HTML elementom, tieto elementy oddelíme čiarkou: 

   h1,h2,h3,h4,h5,h6 { color: green }

V prípade, ak chceme definovať určité vlastnosti len niektorým elementom rovnakého typu (napr. len určitým odstavcom), použijeme selektor pre výber určitej triedy.

V príkalde definujeme nové vlastnosti len tým elementom p, ktoré majú hodnotu atribútu class="right". V druhom prípade definujeme zarovnanie vpravo všetkým HTML elementom, ktoré majú stribút class="right". 

  p.right {text-align: right} 
  .right{text-align: right}

Podobným spôsobom môžeme pracovať aj s atribútom id. V nasledujúcej ukážke sú definované rovnaké pravidlá ako v predchádzajúcom príklade. Rozdiel je v tom, že teraz nepracujeme s atribútom class, ale s atribútom id. 

  p#right {text-align: right} 
  #right{text-align: right}

Komentáre v CSS

Aj v CSS štýloch si môžeme písať komentáre, pre neskoršie ľahšie pochopenie napísaných pravidiel. V nasledujúcich pravidlách napíšeme aj komentár. 

/* Toto je komentár */ 
p 
{ text-align: center; 
	/* komentár: pre elementy p definujem čiernu farbu, ... */ 
	color: black; font-family: arial 
 }

Ako vložiť na web stránku CSS štýl

Externá definícia štýlov

Najuniverzálnešia definícia štýlov je v externých CSS súboroch. Odkazy na tieto súbory musíme následne vložiť na web stránku do časti <head>

Tento spôsob vkladá odkaz na CSS súbor pomocou HTML tagu link 

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

Druhý spôsob je vloženie odkazu pomocou pravidiel jazyka CSS. Jedná sa o importovacie pravidlo @import. Hodnotou tohto pravidla je url adresa súboru zo štýlmi. Keďže sa jedná o CSS pravidlo, musí byť toto pravidlo v značkách <style>. 

<head>
    <style>
	@import url("mysheet2.css");
    </style>
</head>

Interná definícia štýlov

Druhým spôspbom ako definovať CSS štýl je zapísať ich priamo do HTML súboru, do časti <head>. Štýl musíme písať medzi značky <style> a </style>. Tento spôsob je avšak menej univerzálny. 

<head>
   <style type="text/css">
	hr {color: sienna} 
	p {margin-left: 20px} 
	body {background-image: url("images/back40.gif")} 
   </style> 
</head>

Inline definovanie CSS štýlov

Štýly môžeme definovať jednotlivým HTML elementom v mieste ich použitia. Je to najmenej efektívny spôsob, keďže musíme meniť priamo HTML kód. 

   <p style="color: sienna; margin-left: 20px"> 
      This is a paragraph 
   </p>
Zdroj: „http://www.kiwiki.info/index.php?title=CSS_-_kaskákové_štýly&oldid=7200“