1.Díl: Úvodem
Úvodem
Co by jste měli umět, než se pustíte do CSS?
- Základy HTML (bez toho se CSS ani nepokoušejte naučit), zde vám pomůže seriál o základech HTML, který v této knihovně naleznete.
- Základy práce se soubory
Jaké vybavení potřebujete pro kurz?
- Jednoduchý textový editor, stačí poznámkový blok nebo PSPad.
- Správce souborů, postačí průzkumník Windows nebo Total Commander.
- Hodně trpělivosti :o)
K čemu to tedy je?
Odpověď je snadná. CSS slouží k vylepšenému formátování stránek a každý, kdo chce vytvářet kvalitní webové stránky by měl zvládnou alespoň jeho základy.
Teď ale od teorie k praxi. Zkusíme metodu hození do ledové vody a plavání. Zkuste použít na stránce HTML tento kratičký kód:
<span style="color: red">Tenhle text formátuje CSS!</span>
Co se nestalo? Text v tagu span je červený. Nadefinovali jsme to přes parametr style="" . Aha, teď si asi tak říkáte, k čemu to je, když bych to mohl udělat po „HTMlovsku" jen pomocí tagu font:
<font color="red">Tento text formátuje pouze HTML</font>
Efekt je stejný. Co kdybychom ale chtěli udělat text ještě kurzívou. V HTML by to vypadalo asi nějak takhle:
<font color="red"><i>Tento text formátuje pouze jenom HTML</i></font>
K formátování jsme použili dva tagy. Sami uznáte, že v tom někdy bývá docela nepořádek. Pomocí CSS to samé formátování můžete provést mnohem elegantněji:
<span style="color: red; font-style: italic">Tento text formátuje opět CSS</span>
V CSS se dají nastavovat ale i vlastnosti elementů, které pomocí HTML normálně ani nastavit nejdou. Třeba barvu pozadí nějakého textu:
<span style="background-color: blue">Mám modré pozadí díky CSS</span>
Tak to je jenom drobná ukázka toho co CSS dovede.
Kaskádovitost
Hlavní kouzlo CSS je ale v jeho kaskádovitosti. Pokud formátuji HTML dokument pomocí CSS, nepřiděluji většinou každému tagu CSS styl pomocí parametru Style="" ale definuji vlastnosti tagů globálně pro celý dokument.
Například: Určím, že tag <h1> (první nadpis) bude zarovnaný na střed, modrou barvou, písmo Arial velikost 16 a text bude potržený. Potom pokaždé, když použiji tag <h1>, zformátuje se jeho obsah automaticky podle předem určených hodnot.
Zní to moc hezky, ale jak to udělat prakticky? Takhle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Příklad HTML a CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style>
h1 {text-align: center; font-family: Arial; font-size: 16; color: blue; text-decoration: underline}
</style>
</head>
<body>
<h1>Tadá! CSS se projevilo</h1>
Ten nadpis vypadá ale pěkně.
</body>
</html>
A výsledek:
Vlastní definice CSS jsou zde uvedeny v hlavičce, v obsahu tagu <style>. Je tam jenom jeden řádek:
h1 {text-align: center; font-family: Arial; font-size: 16; color: blue; text-decoration: underline}
Jako první se do definice stylu uvádí název tagu. V tomto případě h1. Za tím následují složené závorky. Ve složených závorkách se uvádějí samotné formátovací vlastnosti a to v tomto formátu:
"{vlastnost1: hodnota1; vlastnost2: hodnota2;}".
Schválně jsem tam zvýraznil dvojtečky a středníky, protože bez jejich správného zápisu vám prohlížeč nebude CSS interpretovat správně!
Takto můžete nadefinovat vzhled skoro každého tagu a přidělit mu formát, jaký si jen přejete.
Externí stylopis
Jsou tři možnosti zápisu CSS. Dvě z nich jsme si už předvedli. První je pomocí parametru style u tagu, na který chcete styl aplikovat. Druhá je umístěním tagu style do hlavičky a vypsání všech CSS stylů do tagu <style>. A třetí způsob, ten který jsme si ještě neukazovali, se provádí pomocí tagu link.
Zápis je stejný jako u druhého způsobu, ale obsah tagu style se umísťuje do externího souboru s příponou .css . Na tento externí stylopis se pak dokumentu HTML odkazuje pomocí tagu link: <link rel="stylesheet" type="text/css" href="stylopis.css">. Do parametru href se zapisuje cesta k stylopisu.
Tag link se umísťuje do hlavičky HTML dokumentu. Toto řešení stylů se v praxi používá nejčastěji, protože jednu definici stylů můžeme použít u více stránek, jelikož je umístěna externě. Snadno tak můžeme formátovat třeba styly všech stránek na jednom webu pomocí jednoho externího stylopisu.
Teď zkusíme převést naposledy předváděný příklad, aby vyhovoval provedení třetího způsobu zápisu CSS:
Obsah souboru priklad2.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Příklad HTML a CSS 2</title>
<link rel="stylesheet" type="text/css" href="styly.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>
<h1>Tadá! CSS se projevilo</h1>
Ten nadpis vypadá ale pěkně.
</body>
</html>
Obsah souboru styly.css:
h1 {text-align: center; font-family: Arial; font-size: 16; color: blue; text-decoration: underline}
Efekt je úplně stejný jako u předcházejícího příkladu. Tento příklad bude samozřejmě fungovat jen, když máte vytvořený soubor styly.css umístěn ve stejném adresáři jako stránku HTML samotnou.
Identifikátory a třídy
Zřejmě nebudete chtít definovat styl jenom tagů samotných, to by vám styly asi brzy došly. Pro další možnosti přiřazování stylů jsou zde třídy a indetifikátory. Těchto záhadných názvů se není třeba vůbec bát, je to úplně jednoduché.
Identifikátory a třídy mají aplikačně stejný efekt. Jediný rozdíl je v zápisu. Správně by se ID (zkratka identifikátoru) mělo používat pouze jedenkrát v celém HTML dokumentu, ale nikomu nebude vadit, i když to omylem použijete vícekrát.
ID se zapisuje s mřížkou (#) před názvem identifikátoru. Třída s obyčejnou tečkou před názvem. A jak se třídy a identifikátory používají v praxi?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ukázka tříd & identifikatorů</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style>
span {font-family: Arial, Helvetica, sans-serif; color: lime;}
#uvod {color: blue; background-color: black;}
.zaver {font-size: 36px; font-style: italic; text-decoration: underline;}
</style>
</head>
<body>
<span id="uvod">Víejte na této úžasné stránce formátované pomocí CSS</span><br>
<span>Je fakt supr-čupr! :-)</span>
<span class="zaver">Co říkáte?</span>
</body>
</html>
Pro větší přehlednost používám v příkadech interní stylopis v hlavičce, ale dá se to samozřejmě všechno udělat i externě.
V tomto příkladu je použit jeden identifikátor, jedna třída a jedna definice stylu tagu span. Vidíte, že tagům se definice tříd a indetifikátorů přiřazují pomocí parametrů class a id. Do parametru se názvy tříd a IDček samozřejmě zapisují bez uvozovacího znaku
(# a .).
Zároveň je tu ukázka efektu kaskádovitosti. U tagu span je definována barva color: lime, ale u ID uvod je použitá barva color: blue Jakou barvu bude mít tedy text v tagu span s ID úvod?
Modrou! A proč?
Toto je právě efekt kaskádovitosti. Definice tagu span je ve formátovací hierarchii vzdálenější než definice ID úvod. Proto se na text aplikuje barva modrá. Samozřejmě všechny formátovací vlastnosti, které v ID uvod neurčíte, převezme obsah tagu span přímo zjeho definice.
Na závěr prvního dílu ještě krátká ukázka jednoduché stránky formátované přes CSS. Berte to jako opakování:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Opakování probrané látky o CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style>
body {background-color: black;}
h1 {text-align: center; color: #CCCCCC;}
#zacatek {font-style: italic; color: #00FF66;}
p {color: #FFFFFF;}
.zvyrazneni {font-weight: bolder; background-color: #666666;}
#zaver {color: #0099FF; text-decoration: underline;}
</style>
</head>
<body>
<h1>Příkady úžasného CSS</h1>
<p id="zacatek" class="zvyrazneni">CSS je super věc pro formátování webových HTML stránek a měli by ho ovládat všichni zkušení webdesingeři.</p>
<p>Není moc složité a dají se s ním dělat opravdu velké věci!</p>
<p class="zvyrazneni">Jeden stylopis můžete použít u více HTML stránek, když bude umístěn externě.</p>
<p id="zaver">Tak co říkáte, líbí se vám CSS?</p>
</body>
</html>
Komentáře
Přehled komentářů
Have you ever thought about publishing an e-book or guest authoring on other blogs? I have a blog based upon on the same ideas you discuss and would really like to have you share some stories/information. I know my subscribers would enjoy your work. If you are even remotely interested, feel free to shoot me an e mail. malri.infoforwomen.nl/map27.php mat med mycket antioxidanter
härdare plastic padding infoforwomen.be
(infoforwomen.be, 14. 9. 2020 7:21)
Hi, I check your blog on a regular basis. Your humoristic style is awesome, keep up the good work! bers.infoforwomen.be/map5.php härdare plastic padding
när blev jag gravid infoforwomen.be
(infoforwomen.be, 14. 9. 2020 6:04)
you are in reality a excellent webmaster. The website loading speed is amazing. It sort of feels that you're doing any unique trick. Moreover, The contents are masterwork. you have performed a fantastic process in this matter! orof.infoforwomen.be/map12.php när blev jag gravid
produkter mod hudorme infoforwomen.be
(infoforwomen.be, 14. 9. 2020 4:46)
I will right away snatch your rss as I can't to find your email subscription hyperlink or newsletter service. Do you have any? Kindly let me understand in order that I could subscribe. Thanks. lanth.infoforwomen.be/map19.php produkter mod hudorme
varma bär med vit choklad infoforwomen.be
(infoforwomen.be, 14. 9. 2020 3:30)
I appreciate, cause I found just what I was taking a look for. You've ended my four day lengthy hunt! God Bless you man. Have a great day. Bye landm.infoforwomen.be/map26.php varma bär med vit choklad
gravid hormonspiral symtom infoforwomen.nl
(infoforwomen.nl, 14. 9. 2020 3:08)
You actually make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complex and extremely broad for me. I'm looking forward for your next post, I will try to get the hang of it! lafa.infoforwomen.nl/map19.php gravid hormonspiral symtom
best body skin care infoforwomen.be
(infoforwomen.be, 14. 9. 2020 0:55)
This design is wicked! You most certainly know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Wonderful job. I really loved what you had to say, and more than that, how you presented it. Too cool! tungn.infoforwomen.be/map16.php best body skin care
vegetarisk mat visby infoforwomen.be
(infoforwomen.be, 13. 9. 2020 23:39)
Please let me know if you're looking for a article author for your site. You have some really great articles and I feel I would be a good asset. If you ever want to take some of the load off, I'd love to write some material for your blog in exchange for a link back to mine. Please send me an email if interested. Many thanks! prol.infoforwomen.be/map3.php vegetarisk mat visby
gott och enkelt bröd infoforwomen.be
(infoforwomen.be, 13. 9. 2020 22:23)
Link exchange is nothing else however it is simply placing the other person's blog link on your page at proper place and other person will also do same in support of you. tefur.infoforwomen.be/map16.php gott och enkelt bröd
boots herr rea infoforwomen.nl
(infoforwomen.nl, 13. 9. 2020 21:35)
Yesterday, while I was at work, my sister stole my apple ipad and tested to see if it can survive a 30 foot drop, just so she can be a youtube sensation. My apple ipad is now destroyed and she has 83 views. I know this is entirely off topic but I had to share it with someone! abphr.infoforwomen.nl/map8.php boots herr rea
pizzadeg utan jäst och bakpulver infoforwomen.be
(infoforwomen.be, 13. 9. 2020 21:08)
Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how could we communicate? lyoho.infoforwomen.be/map7.php pizzadeg utan jäst och bakpulver
eco cosmetics göteborg infoforwomen.be
(infoforwomen.be, 13. 9. 2020 19:52)
I all the time used to study paragraph in news papers but now as I am a user of net therefore from now I am using net for articles or reviews, thanks to web. berb.infoforwomen.be/map25.php eco cosmetics göteborg
rfsu thin kondomer infoforwomen.be
(infoforwomen.be, 13. 9. 2020 18:08)
Oh my goodness! Impressive article dude! Many thanks, However I am encountering difficulties with your RSS. I don't know the reason why I cannot join it. Is there anybody getting similar RSS issues? Anyone who knows the solution will you kindly respond? Thanks!! liese.infoforwomen.be/map9.php rfsu thin kondomer
bra spa i lund infoforwomen.be
(infoforwomen.be, 13. 9. 2020 16:32)
Whoa! This blog looks exactly like my old one! It's on a entirely different topic but it has pretty much the same layout and design. Great choice of colors! tefur.infoforwomen.be/map5.php bra spa i lund
alvedon 250 mg infoforwomen.nl
(infoforwomen.nl, 13. 9. 2020 16:02)
I am really enjoying the theme/design of your weblog. Do you ever run into any internet browser compatibility issues? A handful of my blog audience have complained about my site not working correctly in Explorer but looks great in Opera. Do you have any ideas to help fix this problem? herda.infoforwomen.nl/map28.php alvedon 250 mg
gourmet pro double chocolate infoforwomen.be
(infoforwomen.be, 13. 9. 2020 13:49)
Wow that was unusual. I just wrote an very long comment but after I clicked submit my comment didn't show up. Grrrr... well I'm not writing all that over again. Anyhow, just wanted to say fantastic blog! congt.infoforwomen.be/map3.php gourmet pro double chocolate
replay jeans sverige infoforwomen.be
(infoforwomen.be, 13. 9. 2020 12:34)
Neat blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your design. Many thanks misli.infoforwomen.be/map6.php replay jeans sverige
nordbjörn uv dräkt infoforwomen.be
(infoforwomen.be, 13. 9. 2020 11:20)
I'm impressed, I must say. Rarely do I encounter a blog that's equally educative and entertaining, and let me tell you, you've hit the nail on the head. The problem is an issue that too few people are speaking intelligently about. I'm very happy that I stumbled across this in my hunt for something concerning this. retar.infoforwomen.be/map8.php nordbjörn uv dräkt
stekt oxfile recept infoforwomen.be
(infoforwomen.be, 13. 9. 2020 10:03)
Wow, this post is fastidious, my sister is analyzing these kinds of things, so I am going to let know her. ciege.infoforwomen.be/map16.php stekt oxfile recept
1 ГҐrskalas dekorationer infoforwomen.be
(infoforwomen.be, 13. 9. 2020 8:48)
I love what you guys are usually up too. This sort of clever work and coverage! Keep up the fantastic works guys I've added you guys to my own blogroll. carme.infoforwomen.be/map31.php 1 ГҐrskalas dekorationer
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78
mat med mycket antioxidanter infoforwomen.nl
(infoforwomen.nl, 14. 9. 2020 8:29)