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ářů
If you need to find a stable platform to play with block bypass and with instant withdrawals — take a look at Bitz. It’s simple here: register top up your balance and immediately play trusted slots or sit at a live dealer table. What does the Bitz site offer: - Extensive catalog of slot and table games from reputable providers: https://www.google.ee/url?sa=t&url=https://bitz.team - Live section with professional croupiers and online streams: https://www.google.az/url?sa=t&url=https://bitz.team - Easy account creation and ready-to-play account: https://www.google.lt/url?sa=t&url=https://bitz.team - Backup address when the main site is unavailable: https://www.google.lu/url?sa=t&url=https://bitz.team - Fair payouts and friendly support team: https://www.google.nr/url?sa=t&url=https://bitz.team Every new user get a bonus on the first deposit and complimentary spins — an excellent opportunity to play more without spending extra. Get started use your bonus and enjoy playing at Bitz.
misterdick.ru
(misterdick.ru, 20. 6. 2025 19:20)Приглашаем посетить наш интернет магазин https://misterdick.ru/ по продаже дженериков в Москве с быстрой доставкой по МСК в день заказа. Высокое качество дженериков производства Индии в наличии для покупки. Так же отправляем заказы во все регионы почтой России
деревянные дома под ключ
(derevyannye_doma_cyMl, 20. 6. 2025 18:41)Новые тренды в дизайне и планировке деревянных домов под ключ строительство деревянных коттеджей под ключ строительство деревянных коттеджей под ключ .
Are there specific challenges in the production of oncology medications in India
(WalmartCot, 20. 6. 2025 9:49)priligyforte.com priligy 30mg
Продажи Кондиционеров
(WillieWrivy, 20. 6. 2025 9:25)Цены на услуги https://leader-climate.ru/nestandardmontazh Контакты подтверждены https://leader-climate.ru/nestandardmontazh Стандартная установка кондиционеров https://leader-climate.ru/montazh2etapa Вы ничем не рискуете Мы даем договор и документ об оплате работ https://leader-climate.ru/diagnostics Мы не исчезнем через пару дней https://leader-climate.ru/shop-leader-climate Мы работаем более 8 лет https://leader-climate.ru/nestandardmontazh Документы подтверждены https://leader-climate.ru/cleaning Установка кондиционера в Москве https://leader-climate.ru/standardmontazh
n 2 ethylphenyl 3 nitrobenzenesulfonamide - купить онлайн в интернет-магазине химмед
(LavillAspic, 19. 6. 2025 21:24)антитела mouse e cadherin mab clone 114420 - купить онлайн в интернет-магазине химмед Tegs: n 2 ethylphenyl 3 hydroxy 2 naphthalenecarboxamide - купить онлайн в интернет-магазине химмед n 2 ethylphenyl 3 hydroxy 2 naphthalenecarboxamide - купить онлайн в интернет-магазине химмед n 2 ethylphenyl 3 nitrobenzamide - купить онлайн в интернет-магазине химмед антитела mouse e cadherin phycoerythrin mab clone 114420 - купить онлайн в интернет-магазине химмед https://chimmed.ru/products/antitela-mouse-e-cadherin-phycoerythrin-mab-clone-114420-id=391611
МостБет Промокод на Сегодня при Регистрации - Бонус до 25 000 руб
(Georgefar, 19. 6. 2025 15:19)Промокоды казино Mostbet при регистрации 2025. На ресурсе Мостбет пользователи могут не только делать ставки на спорт и другие события из разных сфер но и получать азартные ощущения в казино. Играть можно как с машинами так и с реальными дилерами в разделе лайв. Чтобы привлекать как можно больше новых игроков и поддерживать интерес постоянных клиентов на сайте Мостбет регулярно проходят акции и раздают бонусы. Самое щедрое вознаграждение могут получить новички использовав промокод казино Mostbet. Указав его при регистрации пользователь получит дополнительные денежные средства на первые несколько депозитов которые сможет использовать для ставок в играх. Это сделать просто если иметь промокод к зеркало. Правда дается он при условии выполнения некоторых правил. Mostbet бонус при регистрации. Не совсем промокод но вы все равно ставите не свои деньги если пополните депозит – 100 бонуса от внесенной суммы. Максимум указан в верхней части главной страницы официального сайта.
ручная дисковая пила
(Приборы-Кип, 19. 6. 2025 10:47)40 Zenith мы предоставляем подробную информацию о каждом Покупайте измерительные приборы на нашем сайте от проверенных производителей. Точные анализаторы среды для производственных задач. Автоматизируйте процессы с нашим оборудованием. Функциональные приборы кип контрольно измерительные устройства для промышленности
Raritní CSS techniky pro eStránky - šekránky.
(Juanitaaxosy, 19. 6. 2025 3:34)Máte libovolný nápad na využití šekránk CSS clipping ve svých eStránkách? Jaké vizuální efekty by mohly vytvořit a jak to provést? Rozhovorujte o tomto neobvyklém a provokativním způsobu jak zvýšit atraktivnost vašich webových stránek. Ваша конфиденциальность — наша миссия. Используя https://btcmixer.club вы получаете свободу действий без лишних глаз. Возьмите под контроль конфиденциальность своих финансов с https://btcmixer.site — начните микшировать прямо сегодня
Что реально изобрести на приятный утренний перекус
(CusieLeks, 19. 6. 2025 1:29)Одна из популярных вариаций современных молочных коктейлей – Сникерс. Его особенность в том что это уже не лишь напиток сколько полноценный десерт – с орехами шоколадом и другими вкусными добавками. Невозможно устоять Сайт
лизинг коммерческого транспорта
(lizing_kommercheskogo_transporta_yrMt, 18. 6. 2025 0:20)Как сэкономить на обновлении автопарка с помощью лизинга лизинг грузовых автомобилей https://www.lizing-auto-top1.ru/gruzovye-avtomobili/ .
Seattle Airport Transportation
(WinfredVep, 17. 6. 2025 23:37)A limousine service offers luxurious chauffeur-driven vehicles for various occasions. For Corporate Travel it provides a professional reliable transportation solution ensuring clients reach meetings and events efficiently and comfortably. The service includes well-maintained fleets trained chauffeurs and amenities like Wi-Fi and refreshments. It prioritizes safety punctuality and discretion catering to the specific needs of business travelers. Additionally it can accommodate group sizes ranging from individual executives to larger teams offering vehicles like sedans SUVs and stretch limousines. The service often features easy booking processes flexible scheduling and 24/7 customer support making it a convenient choice for Corporate Travel. - https://taxi-prive.com/who-we-are/
0rb11ta.top
(CraigLycle, 17. 6. 2025 23:08)https://luvre.top/ Лувр - музей в мире шопов https://0rb11ta.top/ Orb11ta работает https://totblack.top/ BLACK TOT https://yvk92.cc/ Джей и Молчаливый Боб https://triptrip24.top/ TRIPMASTER https://m19ekb.top/ ПАРТИЗАНЫ https://ibelive.top/login/ https://lineshop.cc/
jackpot city online casino canada i71odw
(Edgardobug, 17. 6. 2025 22:01)With thanks An abundance of information sizzling hot online casino games online casino new-jersey online slots casino games
https://naturalniimed.ru/
(naturalniimed.ru, 17. 6. 2025 13:37)Купить натуральный мёд в Мурманске https://naturalniimed.ru/ высокое качество мёда от лучших пчеловодов России в наличии для заказа в Мурманске. Быстрый заказ на сайте и доставка курьером в день покупки приятные подарки в каздом заказе.
зоомагазин
(GictorNax, 17. 6. 2025 0:28)1. Ищете где купить качественные зоотовары для своего любимца? Наш интернет зоомагазин Алматы — это удобный способ заказать все необходимое прямо домой Только проверенные товары отличные цены и быстрая доставка по Алматы. https://savee.it/zoomartkz24/ 2. Устали искать лучший зоомагазин в Алматы? Заходите на наш сайт и находите все топовые зоомагазины Алматы в одном месте Актуальные адреса график работы и возможность оформить доставку. https://www.wikidot.com/user:info/zoomart 3. Ваш питомец заслуживает лучшее На нашем сайте собраны все популярные зоомагазины Алматы с большим выбором кормов игрушек и аксессуаров. Поддерживается доставка зоотоваров по Алматы — быстро удобно и выгодно https://vocal.media/authors/zoomart 4. Теперь найти нужный зоомагазин в Алматы — проще простого Наш сайт — ваш гид по лучшим предложениям скидкам и ассортименту зоотоваров в городе. Закажите онлайн и получите доставку прямо к двери https://my.archdaily.com/us/zoomart-dot-kz 5. Лучшие зоотовары для кошек собак и других питомцев — в одном месте У нас собраны все интернет зоомагазины Алматы с актуальными ценами описаниями и акциями. Не упустите шанс сэкономить https://www.anobii.com/en/01f22ca13fbb0d56cd/profile/activity
best online roulette real money
(KarenDuell, 17. 6. 2025 0:14)best online baccarat real money online casino sports betting online casino bitcoin deposit online slots tournaments online casino with fast registration online keno real money online roulette tournaments online casino VIP program
Manfaat Obat Novamox Amoxicillin - aofyosfaqr
(rtaletzuvy, 16. 6. 2025 23:14)can adults get liquid amoxicillin amoxicillin 875 mg twice a day for strep throat amoxil pediatric drops allergy to amoxicillin and azithromycin administration of amoxicillin after food or before
Куплю Спортивную Форму
(RichardAccew, 16. 6. 2025 20:56)Каждый заказ и каждое изделие мы отшиваем в ручную для вас https://sport-newish.ru/about Мы предлагаем вам лучшие варианты проверенных тканей для вашей будущей формы Регион: Московская область Москва https://sport-newish.ru/catalogue Рашгарды https://sport-newish.ru/ Хоккей https://sport-newish.ru/catalogue Страшный цех: 5 реальных кошмаров на производстве одежды https://sport-newish.ru/aaa ФУТБОЛЬНАЯ ФОРМА https://sport-newish.ru/collection-mw
Codigo promocional 1xbet: Bono VIP de hasta 130 €/$
(BrianSop, 16. 6. 2025 12:15)El codigo de promocion de 1xBet https://coryn.club/forum/pgs/?c_digo_promocional_166.html le permite recibir hasta 130 en bono cuando realiza su primer deposito en 2025. 1xBet es una popular casa de apuestas en linea que ofrece una amplia seleccion de apuestas deportivas y juegos de azar. Para los nuevos usuarios 1xbet ofrece un regalo de bienvenida especial en forma de codigo promocional. Los codigos promocionales son codigos especiales que le permiten obtener bonos adicionales al registrarse o realizar apuestas en el sitio.
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
Online gaming club Bitz
(Harryrew, 21. 6. 2025 1:58)