LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> CSS (1.) - Úvod

Dnešním dnem otevíráme nový seriál, který se bude zabývat CSS. V tomto díle si osvětlíme vlastnosti a základní funkčnost CSS.

12.7.2004 13:00 | Vasek | Články autora | přečteno 34055×

Co je to CSS?

HTML je značkovací jazyk, z toho vyplývá, že jednotlivé značky (tagy) mají vyznačovat význam jednotlivých částí textu. Přesto se v HTML v průběhu let objevilo několik atributů a elementů, které ovlivňují pouze grafický vzhled, a některé z původních tagů určených pro logiské členění textu, je často účelově využíváno k dosažení určitých grafických efektů. Aby se předešlo těmto nešvarům, a bylo možné jednoduše oddělit strukturální formátování textu od grafického formátování, definovalo v roce 1997 koncorsium W3C soubor metod pro grafickou úpravu webových stránek. Tento soubor metod se jmenuje Cascading Style Sheets (CSS), česky "kaskádové styly".

Kaskádové styly umožňují definovat způsob zobrazení (velikost a druh písma, barvu, zarovnání, orámování, pozadí apod.) u každého html elementu. Tento předpis vzhledu není přímo součástí textu stránky, a díky tomu je zápis stránky přehlednější a dobře strukturovaný. Navíc styly umožňují definovat jednotný vzhled konkrétního elementu v celém dokumentu jedním zápisem tzn. nemusí se opakovat u každého elementu. Pokud styl uložíme do externího souboru, může ho využívat více stránek najednou. Definice vzhledu všech stránek je uložena na jednom místě. Při požadavku na změnu vzhledu stránek, stačí upravit styl na jednom místě, a změny se automaticky promítnou do všech stránek.

Jak je běžné ve světě webdesignu, i podpora kaskádových stylů v jednotlivých prohlížečích webových stránek je různá. Jednotlivé prohlížeče mají vlastní výklad či pravidla CSS. V současné době existují dvě verze kaskádových stylů – CSS1 ( http://www.w3.org/TR/REC-CSS1) a CSS2 (http://www.w3.org/TR/REC-CSS2). V našem seriálu se budeme zabývat verzí CSS2.

Princip CSS

obecný zápis kaskádového stylu

selektor {deklarace}

selektor: zde uvedu jen seznam a níže osvětlím jednotlivé druhy.

  • selektor typu (type)
  • selektor třída (class)
  • selektor id
  • selektor pseudotřídy (pseudo-class)
  • selektor pseudo-elementu (pseudo-element)
  • univerzální selektor
deklarace: deklarace obsahuje seznam vlastností nastavených pro daný selector. Deklarace může vypadat třeba takto: {vlastnost1:hodnota; vlastnost2:hodnota; ...  ;vlastnostn:hodnota}
Definice jednotlivých vlastností může mít jednu z těchto forem:
  • vlastnost:hodnota;
  • vlastnost:hodnota1 hodnota2;
  • vlastnost:hodnota1, hodnota2, hodnota3;

Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky. Pokud si některé znaménko popletete, nebude vám to pravděpodobně fungovat. Mezery a konce řádků příliš velkou roli nehrají, mohou se přidávat a vypouštět. Velikost písmen také nehraje roli.

Příklady:
p {color:red;}
div {border: 1px solid blue;}
h1 {font-family: "Lucida Console", "Monaco CE", fixed, monospace;}

Selektory

V příkladech budu uvádět již konkrétní deklarace stylu, bez nějakého bližšího osvětlení co, která z vlastností či hodnot nastavuje. V nasledujících dílech si postupně probereme jednotlivé vlastnosti a jejich hodnoty.

typu (type)

Jméno selektoru je odvozeno od jména html elementu (tagu). Je možné nastavit současně styl pro několik elementů, pak jsou jednotlivé elementy oddělěny čárkou. Takto nastavený styl se projeví u všech elementů daného druhu v dokumentu.

Příklady:
h1 {text-align: center; color: blue;}
a {text-decoration: none; font-weight: bold; font-family: helvetica;}
h2, h3 {margin: 10px; font-style: italic; border: 1px;}

třída (class)

Jméno selektoru definuje autor tak, že zapíše tečku, a za ni uvede jméno třídy.V HTML dokumentu může použít tuto třídu jako hodnotu atributu class nějakého elementu. Počet elementů příslušné třídy v jednom dokumentu není omezen.

Příklady:
p.novinka {letter-spacing: 0.3em; background-color: green;}
.novinka {background-image: url(new.png);}

id

Jméno tohoto selektoru definuje autor tak, že zapíše znak hash (#), a za něj uvede jméno id. V HTML dokumentu může použít id jako hodnotu atributu id libovolného elementu. V celém dokumentu může být příslušné id použito jen u jednoho elementu.

Příklady:
#kapitola3 {font-variant: small-caps;}
#navigacni_schema {font-size: 12pt; color: lime;}
#prostrkane{letter-spacing: 5px;}

pseudotřídy (pseudo-class)

Použitím selektorů pseudo-třídy zajišťujeme, v závislosti na aktuálním stavu dokumentu, jeho struktuře nebo prohlížení, přiřazení vlastnosti elementům. Selektor pseudo-třídy zapíše autor tak, že uvede znak dvojtečka, za který napíše název pseudo-třídy.

Mezi pseudotřídy patří:

  • first-child
  • link
  • visited
  • hover
  • active
  • focus
  • lang
Příklady:
p:first-childa:hover {font-size: 200%; float: left;}
a:link {color: green;}
a:hover {color: red;}

pseudo-elementu (pseudo-element)

Pseudo-elementy nám umožní přiřadit vlastnosti elementům v závislosti na stavu dokumentu. Selektor pseudo-elementu zapíše autor tak, že uvede znak dvojtečka, za který napíše název pseudo-elementu.

Mezi pseudo-elementy patří:

  • first-line
  • first-letter
  • before
  • after
Příklady:
p.abstrakt:first-line{color: blue;}
p.ukol:before{font-size:xx-small;}

univerzální

V jazyce CSS byl definován i univerzální selektor. Ten je zapsán pomocí znaku hvězdička *. Použitím tohoto selektoru specifikujeme, že vlastnosti u tohoto selektoru uvedené, budou aplikovány na všechny elementy dokumentu.

Příklady:
* {color:blue;}

Závěr

V následujícím díle se podíváme na způsob připojení kaskádových stylů k dokumentu.

Verze pro tisk

pridej.cz

 

DISKUZE

media types 13.7.2004 12:41 by default
L Re: media types 13.7.2004 13:29 Vasek
Chyby a nepřesnosti 17.2.2005 11:52 Ritchie




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

18.6.2018 0:43 /František Kučera

Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.


Přidat komentář

23.5.2018 20:55 /Ondřej Čečák
Od pátku 25.5. proběhne na Fakultě informačních technologií ČVUT v Praze openSUSE Conference. Můžete se těšit na spostu zajímavých přednášek, workshopů a také na Release Party nového openSUSE leap 15.0. V na stejném místě proběhne v sobotu 26.5. i seminář o bezpečnosti CryptoFest.
Přidat komentář

20.5.2018 17:45 /Redakce Linuxsoft.cz
Ve čtvrtek 31. května 2018 připravuje webový magazín BusinessIT ve spolupráci s Best Online Média s.r.o. pátý ročník odborné konference Firemní informační systémy 2018. Akce proběhne v kongresovém centru Vavruška (palác Charitas), Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 15 hod. odpoledne. Konference je zaměřena na efektivní využití firemních informačních systémů a na to, jak plně využít jejich potenciál. Podrobnější informace na webových stránkách konfrence.
Přidat komentář

14.5.2018 7:28 /František Kučera
Květnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 17. 5. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: Audio – zvuk v GNU/Linuxu.
Přidat komentář

7.5.2018 16:20 /František Kučera
Na stránkách spolku OpenAlt vyšla fotoreportáž Pražské srazy 2017 dokumentující srazy za uplynulý rok. Květnový pražský sraz na téma audio se bude konat 17. 5. 2018 (místo a čas ještě upřesníme).
Přidat komentář

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

13.2.2018 0:41 /František Kučera
Únorový pražský sraz OpenAltu se koná 15. 2. 2018 a tentokrát se vydáme na návštěvu do jednoho pražského datacentra. Sejdeme se v 17:50 v severovýchodní části nástupiště tramvajové zastávky Koh-I-Noor. Po exkurzi se přesuneme do restaurace U Pštrosa (Moskevská 49), kde probereme tradiční témata (svobodný software a hardware, DIY, CNC, SDR, 3D tisk…) a tentokrát bude k vidění i IoT brána od The Things Network.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2018) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze