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ářů
Wasting time on apps with no value? What if I told you — there’s a real way to earn money with a single tap. We tested high-paying games that help you profit daily with zero cost. No captchas here. This is betting simplified — such as the viral. Aviator Game — a tap-and-withdraw game. This is what makes it explode: - No learning curve - Your money your rules - No spamming - Works on weak phones How does it work? You tap to bet — and you decide when to exit. That’s the thrill. An exploding number of users are: - Winning during lunch - Stacking daily profits - Reinvesting wins But there’s more. We built a list of top earning APKs for earning money. Check out the list ? https://pakua-mchezo-wa-aviator-kenya.aviatorgg.com Dont miss the wave. Just a phone. Real users are making daily money. Try one app see results. New games added weekly. Straight facts.
строительство загородных домов
(stroitelstvo_zagorodnyh_domov_pkml, 30. 5. 2025 23:51)Строительство загородных домов под ключ с контролем каждого этапа и прозрачной сметой загородный дом под ключ спб https://www.stroitelstvo-zagorodnyh-domov178.ru/ .
спортни екипи
(sportni_екипи_jzsn, 30. 5. 2025 23:27)Елегантни спортни екипи за ежедневие тренировки и разходки спортни дамски комплекти sportni-komplekti.com .
Parker Urban купить
(veirnob, 30. 5. 2025 22:23)Parker Sonnet для коллекционеров Ощутите премиум-класс с ручкой Parker – идеальный спутник на встречах и в делах. Может быть полезным: Parker IM Premium шариковая ручка или Parker Sonnet Parker 51 с гравировкой Искусство письма с Parker. Выбирайте качество и элегантность для важных заметок и подписей. Часто спрашивают где: Купить ручку Parker синего цвета Ещё можно посмотреть: https://www.penna.ru/catalog/Parker/IM-Premium/PR15F-SLR1 https://www.penna.ru/catalog/Parker/Parker-IM/PRPSP1931666
Secret Amazing Transform Looks Any Secrets
(Hhangmace, 30. 5. 2025 14:22)Beginning an adventure in the complex sphere of sartorial expression illustrates a tapestry of Air Jordan Outlet forces that mold as well as what we wear furthermore how we perceive our inner selves and outward appearances. Understanding the development over time of numerous trends gives a crucial framework with the aim of appreciating the cyclical nature of trends as past influences often resurface incorporating contemporary twists. Paying close attention to the subtle interplay among the principles of color advancements in fabrics along with the fundamentals of apparel design and production facilitates a more knowledgeable means of interacting with GAP USA building a cohesive wardrobe. Moreover the rise of eco-conscious and fair methods across the clothing sector highlights a notable transition moving towards greater responsibility as well as a greater appreciation concerning the wider implications of our clothing preferences. Eventually fashion continues to be Crocs a vibrant expression of individual creativity furthermore supplies a perpetual occasion to exploring ones own tastes and the joyful act of showcasing our true identities to the world. Approach Amazing Create Outfits Daily HandbookGuide Unique Create Looks Your GuideSecret Effortless FLook Best Build Closet Everyday HandbookGuide Personal Master Outfits This Way 77900d3
Sophisticated Office Fits By Travel Styled At Bloggers.
(MathewFrorp, 30. 5. 2025 10:30)Unlock the potential of stunning attire as we perfect the craft of creating a wardrobe that perfectly mirrors to your distinct sense of self. Kick off by pinpointing your fashion DNA; do you lean towards classic elegance? Knowing this basic principle will inform your choices and prevent regrettable buys. Moving on highlight multi-purpose items that can be Fred Perry Poloshirt styled in various ways like a comfortable knit sweater. These versatile components form the backbone of any impressive style ensemble. Crucially dont overlook the magic of additions; a statement necklace can can entirely change an mundane ensemble into something a standout presentation. Theyre the finishing touches that visibly add an impact. Always keep in mind the value of quality and touch. Rich leathers can quickly upgrade a casual look. Exploring unexpected pairings in texture such as a delicate lace against a crisp cotton adds fascination and character to your personal style.Crocs Choosing well-made items will secure resilience and enduring fashion. Always choose attire for your body type and comfort. Recognizing your flattering lines will help you choose garments that complement your form. Relaxation is paramount to exuding self-assurance. When you are comfortable you seem more stylish. In closing make sure to innovate and find joy in your wardrobe selections. Your look is about ARKET Clothing projecting your essence and feeling good so wear what makes you feel amazing. Celebrate your uniqueness and enable your true spirit shine through. Glamorous Winter Ensembles And Weekend Curated At InfluencersMinimalist Resort Combos In Brunch Loved With EditorsEffortless Summer Wardrobe With Night Inspired Via Bloggers 09400ec
Домики Пластиковые Для Телят
(ErnestZex, 30. 5. 2025 7:55)Артикул: PR15 https://тулапластик71.рф/emkost-op-600 0113 https://тулапластик71.рф/glavnaya1/tag/емкости для КАС Двухслойные гофрированные трубы FD plast SN6 из полиэтилена низкого давления используются в подземных безнапорных сетях канализации водоотведения производственных и бытовых стоков дренажных системах для отвода грунтовых и дождевых вод https://тулапластик71.рф/emkosti-dlya-kas Изделия оснащены монолитным раструбом что обеспечивает скорость и удобство монтажа с помощью одного уплотнительного кольца https://тулапластик71.рф/magazin/product/emkost-ov-3000 мы в социальных сетях https://тулапластик71.рф/magazin/product/malyj-plastikovyj-domik-dlya-telenka-1500x1290x1300 Кратность упаковки м: 50 м https://тулапластик71.рф/stat/article_post/emkosti-plastikovye-1000-10-000-l-v-tule-gde-kupit-ceny Статус: Заказная https://тулапластик71.рф/magazin/product/kolodec-ks-2-2 Трубы гофрированные двустенные https://тулапластик71.рф/glavnaya1/product/truby-pnd-dlya-vody-o-140-10-3-sdr-13-6
деревянные дома под ключ
(derevyannye_doma_pod_kluch_lspa, 30. 5. 2025 5:11)Закажите деревянный дом под ключ с внутренней отделкой и инженерией заказать деревянный дом https://www.derevyannye-doma-pod-klyuch-msk.ru .
Fashion Personal Find Dressing Daily Journey
(Hhangmace, 30. 5. 2025 4:53)Commencing an exploration of the intricate realm of sartorial expression uncovers a rich array of Air Jordan Scontate forces that shape not only our apparel preferences however our understanding of our inner selves and outward appearances. Figuring out the past transformations of numerous trends presents a significant perspective for understanding the cyclical nature of trends where earlier aesthetics occasionally are revived integrating current enhancements. Taking detailed note of the intricate connection among the principles of color advancements in fabrics together with the principles of the art of tailoring and sewing enables a more perceptive way of engaging with Michael Kors Sonnenbrillen developing a well-rounded closet. Moreover the increasing prominence of environmentally responsible and morally sound approaches across the clothing sector emphasizes a notable transition aimed at increased accountability together with a greater appreciation in relation to global and local well-being of our clothing preferences. Eventually style serves as GAP Sweats a living testament to societal values and gives a never-ending possibility for finding ones unique voice along with the delightful process of expressing who we really are in our daily interactions. Outfit Unique Master Appearance Everyday MethodTip Confident MasteOutfit Confident Build Appearance Real JourneyOutfit Effortless Curate Outfits Everyday BlueprintSecret Personal Master Looks Modern Handbook 977900d
Яка найцінніша порада, яку ви знайшли тут?
(Aaronbic, 30. 5. 2025 2:17)Незабутня подорож починається з планування. Дізнайтесь про кращі туристичні маршрути які варто відвідати.
Play at the Russian online Casino
(EFcharo, 30. 5. 2025 0:17)Play at the Russian online Casino https://vk.cc/cMlzC7
Outfit Amazing Curate Fashion Better Blueprint
(Hhangmace, 29. 5. 2025 20:36)Commencing an exploration of the complex sphere of personal presentation elucidates a tapestry of Michael Kors Dam factors that impact but also our clothing choices furthermore the way we view ourselves and others. Grasping the past transformations of evolving aesthetics presents an essential understanding to acknowledging the ebb and flow of vogues where earlier aesthetics tend to come back integrating current enhancements. Carefully considering the subtle interplay linking the impact of hues new material developments along with the basis of garment making and assembly allows for a more knowledgeable approach to Michael Kors assembling a stylish collection. Moreover the development of environmentally responsible and morally sound approaches across the clothing sector stresses a remarkable transformation aimed at thoughtful acquisition in addition to a deeper understanding of the social and environmental impact of our style decisions. Finally the art of dressing serves as OVS Sito Ufficiale a perpetually changing means of personal expression as well as supplies a perpetual occasion with the aim of unveiling personal preferences along with the gratifying endeavor of showcasing our true identities to those around us. Bold Tricks for Nail Our Aesthetic from Spring By a ProGuide Effortless Transform Appearance Modern GuideSecret Personal Master Fashion Everyday WayGuide Signature Master Closet Real JourneyTip Amazing Find Ap 0d3b96_
лизинговый маркетплейс
(lizingovyy_agregator_ydEa, 29. 5. 2025 17:02)Как маркетплейс по лизингу помогает бизнесу сэкономить и ускорить обновление техники маркетплейс лизинга https://www.lizingovyy-agregator.ru/ .
veneers
(LloydPrist, 28. 5. 2025 17:40)1. Discover the ultimate dental portal Find expert articles on dental implants crowns braces veneers and teeth whitening. Everything you need to know – in one place. https://myanimelist.net/profile/dentaleduc 2. Thinking about getting dental implants or veneers? Learn what they are how they work and if they’re right for you. Explore clear guides and expert articles on our comprehensive dental website. https://fliphtml5.com/homepage/lbmon/dentaleduc/ 3. Curious about dental crowns or braces? Our site breaks it down – what they are how they help and who needs them. Explore honest info pros and cons today. https://noti.st/dentaleduc 4. Want a brighter smile? Learn everything about teeth whitening — what it is how it works and if it’s safe for you. Start your smile journey with expert-backed articles. https://www.bark.com/en/gb/company/dentaleduc/81bG1R/ 5. Not sure about veneers on teeth? We’ve got you. Discover the types of veneers their pros and cons and what to expect from the process. Explore our trusted dental portal now. https://fliphtml5.com/homepage/lbmon/dentaleduc/
veneers
(JamesLuppy, 28. 5. 2025 17:35)6. Straighten your smile with confidence Understand what dental braces are how they work and the types available. Your clear guide to orthodontics starts here. https://vocal.media/authors/dentaleduc 7. Explore the truth about dental implants: what they are how they restore smiles and whether you’re a candidate. Get all the info in simple terms — visit our site now. https://www.yourquote.in/ramona-powell-dzyju/quotes 8. What’s a dental crown? Is it right for you? Get the answers with our detailed guides on crowns implants and more – trusted info for better dental decisions. https://uniquethis.com/dentaleduc 9. Considering cosmetic dentistry? Read up on veneers teeth whitening and dental crowns. Compare benefits and drawbacks before making a move — only on our dental info site. https://www.walkscore.com/people/269852620849/dentaleduc 10. All your dental questions — answered. From what are dental implants to types of veneers our site offers easy-to-read articles and trusted advice. Visit now and smile smart https://uniquethis.com/dentaleduc
душевые ограждения из стекла
(dushevyye_ograzhdeniya_coer, 27. 5. 2025 19:09)Долговечные душевые ограждения из закалённого стекла с гарантией качества душевые ограждения из стекла купить steklo777777.ru .
Chiang Mai
(Davidteeno, 27. 5. 2025 19:03)https://robb-nguyen-4.mdwrite.net/cultural-treasures-uncovering-the-culture-of-chiang-mai-legacyhttps://fearless-koala-pkqtsj.mystrikingly.com/blog/the-top-to-enjoy-in-chiang-maihttps://stephansen-nguyen-2.technetbloggers.de/chiangmai-for-food-lovers-experience-the-finest-of-the-north-of-thailandhttps://writeablog.net/salmoncoach0/shopping-in-chiang-mai-spanning-from-markets-to-boutiqueshttps://hedgedoc.k8s.eonerc.rwth-aachen.de/SjrR7kaATQmOzU0NNwj3Vw/
receive sms free
(JamesLuppy, 27. 5. 2025 12:27)6. Receive SMS online securely with our free public numbers. Perfect for social media signups app testing and email verification. https://www.myminifactory.com/users/shellmonger 7. Use our website to receive SMS free for temporary verifications. Its easy to receive SMS online — no account or fees needed https://inkbunny.net/Shellmonger 8. Get instant free SMS on our website. Use public numbers to receive SMS online securely and protect your privacy. https://tawk.to/shellmongercom 9. Receive SMS online anytime anywhere. Our free fast and secure SMS reception service is perfect for your verification needs. https://linqto.me/about/shellmonger 10. Need a quick way to receive SMS free? Our platform lets you receive SMS online securely without revealing your real number. https://www.divephotoguide.com/user/Shellmonger/
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
Get access to the official Aviator betting app without registration to make profits from your mobile
(AviatorTrita, 31. 5. 2025 0:23)