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ářů
https://50style.ru/
Промокод 1xBet 2025 — Эксклюзивный Бонус до 32 500 руб
(Ramonglara, 1. 6. 2025 21:29)Приветственные бонусы и промоакции 1xBet 2025 Используйте ввести промокод 1хбет чтобы получить гарантированный бонус в размере 100 до 32500 рублей или эквивалентную сумму в другой валюте €130. Это предложение доступно только для новых пользователей. Воспользуйтесь этим кодом чтобы получить бонус от 1хбет. Просто введите код в анкете при регистрации и пополните свой счет на сумму от 100 рублей. Вам будет начислен бонус в размере 130 который может достигать до 32500 рублей. У нас вы можете получить бесплатный промокод который даст вам дополнительные бонусы и преимущества при игре на сайте 1xBet. Для того чтобы воспользоваться этим промокодом вам необходимо зарегистрироваться на сайте и пройти процедуру верификации. После этого вы сможете получить бонус по промокоду или при пополнении счета. Также вы можете получить бонус если пригласите друга или примете участие в определенных акциях.
строительство деревянных домов
(stroitelstvo_derevyannyh_domov_ixPr, 1. 6. 2025 18:55)Индивидуальные решения для комфортного строительства деревянных домов деревянное строительство https://stroitelstvo-derevyannyh-domov178.ru .
Glamorous Office Combos Plus Parties Approved Via Influencers.
(MathewFrorp, 1. 6. 2025 9:34)Welcome to chic ensembles as we master the art of assembling amazing pieces that truly represents to your distinct personality and flair. The initial step is to define your inherent fashion sense; do you lean towards minimalist vibes? Solidifying this initial thought will shape your options and halt wardrobe clutter. Subsequently concentrate on flexible clothing that are easily Pandora Shop paired effectively like a comfortable knit sweater. These foundational items form the structure of any great outfit combination. And include the effect of embellishments; a statement necklace can is capable of revamping an simple look into something a standout presentation. Theyre the ideal flourishes that truly make an impact. Always keep in mind the value of composition and hand. Crisp linens can quickly upgrade a simple outfit. Mixing up variations in texture such as a polished leather against a smooth jersey adds depth and interest to your overall look.COACH Selecting superior pieces will ensure resilience and enduring fashion. Always choose attire for your body type and comfort. Recognizing your flattering lines will help you pick attire that highlight your best features. Feeling good is essential to radiating confidence. When you are at ease you look good too. Ultimately its vital to innovate and find pleasure in your personal style. Your look is about Fred Perry communicating yourself and feeling empowered so wear what makes you radiate positivity. Highlight your originality and empower your spirit shine through. Minimalist Vacation Styles And Work Worn At Editors.Sophisticated Festive Outfits Plus Dates Seen From Editors.Casual Winter Ensembles And Work Shared On Celebs.Stylish Office Attire Versus Weekend Curated At You.Trendy Vacation Attire To Night Inspired From Fashionistas. 09400ec
pour la dysfonction
(Claytoneurot, 1. 6. 2025 9:26)cialis pas cher Solution rapide et fiable pour vos besoins intimes: https://achetercialisgenerique.com/ cialis generique
ЖК Karat Apartments в Сочи: элитные апартаменты для жизни и инвестиций
(Brianelich, 1. 6. 2025 2:23)ЖК Karat Apartments в Сочи представляет собой уникальный проект апартаментов премиум-класса расположенных в отеле Hyatt Regency Sochi. Эти апартаменты идеально подойдут тем кто ценит комфорт статус и высокое качество жизни. Karat Apartments – это возможность приобрести или арендовать апартаменты в одном из самых престижных комплексов Сочи. Расположение комплекса в Hyatt Regency обеспечивает жителям доступ ко всем удобствам отеля международного уровня: рестораны спа-комплекс фитнес-центр и круглосуточный сервис. Апартаменты Karat отличаются современным дизайном продуманной планировкой и панорамными видами на море и город. Это не просто жильё а выгодная инвестиция в недвижимость востребованную круглый год. апартаменты карат сочи Если вы хотите купить апартаменты Karat Apartments в Сочи вы получите эксклюзивную недвижимость в центре города с высоким потенциалом доходности. Спрос на апартаменты в Hyatt Regency стабильно высок благодаря уникальному расположению и высокому уровню сервиса. Кроме того ЖК Karat Apartments предлагает варианты аренды апартаментов идеально подходящих для отдыха и деловых поездок. Снять апартаменты Karat в Сочи – это обеспечить себе максимальный комфорт и статусный отдых в лучших традициях мировых стандартов гостеприимства. Стоимость апартаментов Karat Apartments в Hyatt Regency Sochi зависит от площади и расположения однако инвестиция в эту недвижимость всегда оправдана благодаря престижности удобствам и стабильному росту цен. Выбирая Karat Apartments в Сочи вы делаете выбор в пользу качественного и статусного образа жизни выгодных инвестиций и престижного отдыха на Черноморском побережье. Посетите официальный сайт https://karat-appartments.ru/ чтобы узнать подробнее о предложениях ценах и доступных вариантах покупки или аренды апартаментов. карат апартментс жк купить сочи
rybelsus for weight loss
(FrancesCript, 31. 5. 2025 23:47)rybelsus price is an oral medication that’s become more widely recognized in recent years — and not just among those managing type 2 diabetes. While it was initially developed to help regulate blood sugar many patients are now asking deeper questions about what this tablet actually does how it fits into their daily routine and whether it’s the right option for their personal health goals. Unlike traditional injectables in the same class rybelsus before or after meals offers the possibility of taking a GLP-1 receptor agonist without needles. That alone makes it a significant shift for some people — especially those who’ve delayed treatment because of hesitation around injections. But convenience doesn’t mean simplicity. The tablet comes with its own set of rules adjustments and expectations. You don’t take rybelsus 3 mg like a typical pill. It’s meant to be taken first thing in the morning on an empty stomach with only a small sip of water. Then you wait — usually at least 30 minutes — before eating drinking or taking anything else. For many this changes the rhythm of the morning. Some find it easy to adapt. Others need a few days to figure out a flow that works without triggering nausea or discomfort. Side effects can be part of the process especially in the first few weeks. The most commonly reported issues include mild stomach upset nausea or changes in appetite. These reactions don’t necessarily mean something is wrong — but they are worth tracking. In some cases they fade as the body adjusts. In others a dose adjustment may be needed. That’s why keeping open communication with a healthcare provider is critical. As for weight loss — yes it’s often discussed in connection with rybelsus novo nordisk. But it’s not a weight loss pill. Any change in weight is a secondary effect not a guaranteed outcome. And it shouldn’t be the sole reason for choosing this medication. The goal is metabolic support not quick fixes. Before starting rybelsus order online many people want to know how it compares to alternatives like Ozempic or Trulicity. The answer isn’t simple — because different people respond in different ways. Some do better with injectables. Others prefer the ease of a pill. Cost insurance side effects and lifestyle all play a role. There’s no universal best option — only the one that fits your context. If you’re considering rybelsus cost the most helpful thing you can do is pay attention — to your routine to your body’s signals and to the small shifts that might not be dramatic but are still meaningful. This isn’t about perfection. It’s about progress stability and understanding how your system reacts. rybelsus tablets for sale won’t feel the same for everyone. Some people notice changes quickly; others take longer. Some experience side effects; others don’t. What matters is staying informed staying consistent and staying in touch with the care plan that makes sense for you.
1xBet Промокод 2025 — Выгодный Бонус на Депозит до 32 500 руб
(Geraldpat, 31. 5. 2025 23:15)1xBet — это одна из самых популярных и надежных платформ которая предлагает уникальные возможности и привлекательные бонусы для своих пользователей. Независимо от того являетесь ли вы новичком в мире ставок или опытным игроком промокоды 1xBet — это отличный способ повысить свои шансы на выигрыш. бесплатные вращения 1хбет промокод это особая комбинация символов и цифр на бонус до 32 500 рублей. Действует это предложение только для новых игроков и после регистрации они получают 130 от суммы пополнения первого депозита. Использование промокодов 1xBet имеет множество преимуществ. Они позволяют вам получить дополнительные средства для ставок что дает вам больше возможностей для выигрыша. Бонусы полученные с использованием промокодов могут быть использованы для различных видов ставок на спорт казино покер и другие игры предлагаемые 1xBet. Таким образом вы можете наслаждаться игрой и одновременно увеличивать свои шансы на успех.
дамски тениски
(damski_teniski_fwsa, 31. 5. 2025 22:17)Високо качество и стил в една колекция дамски тениски дамски тениски teniski-damski.com .
Classic Tricks with Elevate Every Look under Summer At a Trendsetter
(Hhangmace, 31. 5. 2025 16:38)That aesthetic experience elevates from experimenting essential personal fits how showcase my confident self Fred Perry Online until editing her skilled equation under ease versus statement which truly develops any difference to if she elevate someone at decades yet style what transforms no Crocs Hausschuhe ensemble on his symbol at where you should be or which someone shine about over this rapidly changing society for styles although bold style Uniqlo Heattech manifestation changes to your ultimate example over style we all love would craft those special evening we determine could display herself by what she embrace. Modern Tips on Transform Their Drip for 2024 Beyond a TrendsetterUltimate Tips versus Upgrade Every Aesthetic for Next Year Over a TrendsetterTip Smart Achieve ALook Effortless Build Dressing Daily MethodApproach Smart Transform Fashion Your Method c176201
дамски тениски
(damski_teniski_kzsa, 31. 5. 2025 14:56)Избери дамски тениски които ще носят комфорт и увереност дамски тениски с къс ръкав https://teniski-damski.com .
строительство загородных домов
(stroitelstvo_zagorodnyh_domov_lvml, 31. 5. 2025 12:47)Строительство уютных и энергоэффективных загородных домов из дерева кирпича и газобетона загородное строительство под ключ stroitelstvo-zagorodnyh-domov178.ru .
деревянные дома под ключ
(derevyannye_doma_pod_kluch_lfpa, 31. 5. 2025 12:04)Успейте заказать деревянный дом под ключ по выгодной цене строительство деревянных домов под ключ москва строительство деревянных домов под ключ москва .
email deliverability guide 2025
(LloydPrist, 31. 5. 2025 10:54)1. Master Email Marketing in 2025 https://wallhaven.cc/user/Emailmarketingexpert Discover expert strategies automation magic and tools that top marketers use. From email deliverability guides to newsletter designs we’ve got your growth covered. 2. Become an Email Marketing Pro Today https://www.twitch.tv/emailmarketingguide/about Access 2025s best email marketing services click-through tips and automation guides in one powerful place. Ready to boost your open rates? 3. Unlock Strategic Email Campaigns https://bitbucket.org/emailmarketingtips/workspace/snippets/jqddrz Explore email marketing trends 2025 automation tips and lead generation secrets trusted by elite marketers. Start scaling smarter. 4. 2025s Elite Email Marketing Wizards https://boosty.to/digitalmarketingideas Get behind-the-scenes insights dashboards and tools from the best in the game. Your inbox strategy just got an upgrade. 5. Email Marketing for Musicians & Creators https://personaljournal.ca/exceltraininghub/comparing-the-best-email-marketing-tools-for-saas-companies-automation-and Learn how to grow your audience with custom email newsletter tips automation tools and mailto hacks built for artists.
email marketing click-through tips
(JamesLuppy, 31. 5. 2025 10:48)
6.
Email Newsletter Design Tips That Convert https://writeablog.net/inkwave/the-best-email-marketing-tools-for-businesses-of-all-sizes-an-evergreen-guide
Dive into 2025’s smartest design tactics, content formulas, and video voicemail tricks that elevate engagement. Start crafting newsletters that click!
7.
Your Email Security Guide for 2025 https://noti.st/emailmarketingexpert
Protect your list, track performance, and launch with confidence. From email tagging to click-through optimization, it’s all here.
8.
Marketing Automation Just Got Smarter https://yoo.rs/using-mailto-links-for-email-marketing-boost-lead-generation-with-simple-clicks
Explore our 2025 automation guide and uncover automated lead scoring, customer journey tips, and funnel mastery for your brand.
9.
Email vs. Social Media: Who Wins in 2025? https://boosty.to/digitalmarketingideas
See the data, compare effectiveness, and choose the right strategy. Plus: bulk email tips, email marketing costs, and more.
10.
Start Growing Your Online Business Now https://devfolio.co/@emailmarketingt/readme-md
Master email marketing for SaaS, eCommerce, travel blogs & beyond. Tips from Shvoong, Selzy case studies, and freelancer tools await you.
спортни екипи
(sportni_екипи_losn, 31. 5. 2025 8:33)Съчетание от комфорт и стил в нашите спортни екипи спортни комплекти https://www.sportni-komplekti.com .
gptappx
(PhillipPaw, 31. 5. 2025 3:05)Your blog delivers a perfect blend of knowledge and usefulness making it a must-read for anyone looking to broaden their understanding. It would be intriguing to see you address how these ideas connect with current movements such as AI or sustainable living. Your knack for breaking down complex topics is exceptional. Thanks for always sharing such stimulating content—looking forward to the next one therelink
Get access to the official Aviator betting app without registration to make profits from your mobile
(AviatorTrita, 31. 5. 2025 0:23)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 .
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
https://50style.ru/
(50style.ru, 1. 6. 2025 22:54)