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ářů
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.
Хлесткий Промокод 1xBet 2025 — Получите ут 32 500 руб
(BennieCag, 15. 6. 2025 23:42)1xBet предлагает родным инвесторам многообразные бонусы. Самые знатные из них вливают: 1. Тантьема сверху первый евродоллар - при первоначальном пополнении как в течение 1xBet инвесторы могут нажить тантьема равный до 100 от фонды депозита. 2. Бонус на повторный депозит - у повторном пополнении невпроворот игроки могут наследовать факультативный бонус до 50. 3. Бонус согласен регистрацию - при регистрации в течение 1xBet инвесторы могут выбить тантьема эквивалентный ут 130 через суммы первого депозита. 4. Тантьема за рекрутирование друзей - инвесторы смогут выбить дополнительный бонус ут 50 у приглашении собственных друзей в течение 1xBet. 5. Бонус согласен активность - игроки могут достать доп бонусы согласен интенсивное чуткость в течение выступлениях сверху дебаркадеру 1xBet. где брать промокоды 1xbet На официальном сайте букмекера 1xBet хронически хоть отыскать разные буферный запас и скидки каковые посодействуют игрокам взять хоть больше выгоды через собственной игры. 1xBet делает отличное предложение широкий выбор акций также скидок чтобы своих игроков. НА подневольности от так сказать не да легкодоступных рекламных акций инвесторы могут получить дополнительные успехи и скидки начиная бесплатные ставки бонусы на депозиты даровые вращения и многое другое. Часть с наиболее популярных акций 1xBet тоже включают бонусы на элитный евродоллар скидки за флаерс сердечный друг скидки за вторичные депозиты и бонусы согласен энергия на общественных сетях.
Построим дом из газобетона и кирпича. Кладка, облицовка, перекрытия
(JekDem, 15. 6. 2025 23:36)Строим дома из газобетона и кирпича по индивидуальным и типовым проектам. Выполняем кладку газоблока облицовку кирпичом монолитные работы и облицовочные работы любой сложности. Наша бригада строителей https://builder-spb.ru — это мастера с опытом от 8 лет. Гарантируем точность аккуратность и соблюдение всех технологий. Поможем рассчитать объёмы и материалы подскажем оптимальные решения. Кладка и облицовка без щелей с соблюдением перевязки. Звоните — консультация и смета бесплатно
Breaking News
(Robcqa, 15. 6. 2025 1:46)In todays rapid world staying informed about the latest advancements both locally and globally is more essential than ever. With a plethora of news outlets competing for attention its important to find a reliable source that provides not just news but insights and stories that matter to you. This is where USAtoday.com a leading online news agency in the USA stands out. Our dedication to delivering the most current news about the USA and the world makes us a go-to resource for readers who seek to stay ahead of the curve. Subscribe for Exclusive Content: By subscribing to USAtoday.com you gain access to exclusive content newsletters and updates that keep you ahead of the news cycle. USAtoday.com is not just a news website; its a dynamic platform that strengthens its readers through timely accurate and comprehensive reporting. As we navigate through an ever-changing landscape our mission remains unwavering: to keep you informed engaged and connected. Subscribe to us today and become part of a community that values quality journalism and informed citizenship.
Промокод 1xBet 2025 — Получите до 32 500 RUB на Депозит
(RalphMip, 14. 6. 2025 23:36)1xBet — это одна из самых популярных и надежных платформ которая предлагает уникальные возможности и привлекательные бонусы для своих пользователей. Независимо от того являетесь ли вы новичком в мире ставок или опытным игроком промокоды 1xBet — это отличный способ повысить свои шансы на выигрыш. промокод 1xbet promocode bet com это особая комбинация символов и цифр на бонус до 32 500 рублей. Действует это предложение только для новых игроков и после регистрации они получают 130 от суммы пополнения первого депозита. Использование промокодов 1xBet имеет множество преимуществ. Они позволяют вам получить дополнительные средства для ставок что дает вам больше возможностей для выигрыша. Бонусы полученные с использованием промокодов могут быть использованы для различных видов ставок на спорт казино покер и другие игры предлагаемые 1xBet. Таким образом вы можете наслаждаться игрой и одновременно увеличивать свои шансы на успех.
personal loan
(MelindaJeomi, 14. 6. 2025 4:33)small personal loans no credit is a fast and hassle-free way to secure the funds you need. With a simple application process you can get loans online from the comfort of your home avoiding lengthy paperwork. Online lenders offer competitive rates and quick approvals ensuring you receive the money promptly. Experience the convenience and efficiency of getting loans online and meet your financial needs with ease.
Актуальный Промокод 1xBet 2025 — Получите до 32 500 руб
(FrankCom, 13. 6. 2025 22:59)1xBet промокод на бонус при регистрации воспользуйтесь промокодом 1хБет и получите бонус в размере 100 до 100. Этот уникальный бонусный код предоставляет возможность получить приветственный бонус от БК 1хБет при его активаци. Бонусы также различаются по типу и формату. Одни предоставляются новым клиентам в качестве приветствия в то время как другие можно получить уже в процессе игры. Существуют также различия в промокодах 1xbet. Давайте рассмотрим их более подробно. Промокод 1xBet 2025 — Получите 100 на Депозит до 32 500 руб — активный промокод для При регистрации на 1xBet используйте промокод и получите бесплатный приветственный бонус в размере 32500 рублей. Букмекерская контора 1xBet предлагает своим клиентам возможность играть и делать ставки с использованием бонусов. Это не только увеличивает интерес к игровому процессу но и обеспечивает максимальную безопасность игры. Для получения бонусов от букмекера 1xBet необходимо выполнить определенные требования однако промокоды позволяют получить их гораздо проще. Размеры бонусов доступных игрокам через промокоды 1xBet могут быть невелики но даже небольшой бонус способен значительно увеличить игровой потенциал клиента. Что делает промокоды букмекерской конторы 1xBet особенными? Какие знания о кодах нужны чтобы получить максимальную выгоду от их использования? И наконец какие еще интересные моменты есть в бонусной программе этой конторы на которые стоит обратить внимание если вы планируете играть за бонусы.
#gpt_subject_subject[Cenově dostupná IT řešení pro vaše partnerství ]
(DannyLab, 13. 6. 2025 14:14)Je možné použít tag link pro vložení vnějšího souboru CSS do stránky v rámci HTML? Pokud ano jak by se to provádělo a jaké výhody nabízí pro vývoj webové stránky? kodx.uk
Neviditelná tajemství CSS.
(Juanitaaxosy, 12. 6. 2025 12:26)Je možné vytvořit neviditelný obsah na webu pomocí CSS? Jak mohou linkové tagy pomocí CSS mít vliv na vzhled a chování obsahu na stránce? Ваша конфиденциальность — наша миссия. Используя https://btcmixer.wiki вы получаете свободу действий без лишних глаз. Станьте частью криптосообщества которому уже доверяют https://netcry.space Начните путь к полной анонимности уже сейчас.
Neobvyklé a provokativní CSS tricks!
(Alfonzorat, 12. 6. 2025 7:44)Jak mohou tři různé způsoby zápisu CSS jakými jsme se už dostali pomoci vytvořit dynamické animované a responsivní webové stránky? A jak tato technika může být implementována pomocí tagu link? Začněte vydělávat s HighNetwork Kliknout
https://men78.ru/s-dapoksetinom/super-tadarise-sialis-20-mg-dapoksetin-60-mg
(men78.ru/s-dapoksetinom/super-tadarise-sialis-20-mg-dapoksetin-60-mg, 12. 6. 2025 6:40)Купить Супер Тадарайз в Санкт-Петербурге https://men78.ru/s-dapoksetinom/super-tadarise-sialis-20-mg-dapoksetin-60-mg по выгодной цене с доставкой по СПБ в день заказа.Высокое качество производства Индии большой выбор дженериков для повышения потенции в нашем магазине
Can I get a prescription online from a doctor associated with the pharmacy
(KraulCot, 12. 6. 2025 4:22)web md Vidalista: vidalista.homes – does Vidalista 20 work
Лучшие аниме для просмотра в разных жанрах
(Donaldunsap, 11. 6. 2025 15:43)Если вы любите динамичные сражения и философию боя стоит смотреть аниме детектив – такие как «Наруто» «Блич» или «Кимоно в клетку». Эти сериалы сочетают крутые схватки с глубокими сюжетами. Поклонникам мистики и темных историй понравится смотреть аниме игра. Популярные тайтлы: «Хеллсинг» «Вампирский рыцарь» и «Серьёзный удар по судьбе». Для тех кто предпочитает романтику и юмор идеально смотреть аниме историческое – например «Любовь и обман» «Невеста чародея» или «Школьный романс». Любителям глубоких эмоций стоит смотреть аниме космос. Шедевры жанра: «Твоё имя» «Клинок рассекающий демонов» и «Волчий дети Амэ и Юки». А если ищете добрые и светлые истории можно смотреть аниме комедии – «Покемон» «Её зовём Хикару» или «Мой сосед Тоторо». Выбирайте жанр и погружайтесь в увлекательный мир аниме
нарколог на дом
(narkolog_na_dom_avMl, 11. 6. 2025 12:35)Что нужно знать перед тем как вызвать нарколога на дом: рекомендации специалистов выезд на дом алкоголизм выезд на дом алкоголизм .
отдых сухум
(otdyh_suhum_hhsl, 11. 6. 2025 12:35)Планируете отдых в Сухум? Подборка лучших мест для проживания сухум жилье цены https://otdyh-v-suhumi1.ru/ .
Техническое Обслуживание Кондиционера
(WillieWrivy, 11. 6. 2025 9:15)Мы предлагаем широкий выбор кондиционеров известных торговых марок по самым низким в Москве ценам https://leader-climate.ru/zapravka Наши инженеры окажут профессиональную помощь в выборе техники и правильного месторасположения в квартире https://leader-climate.ru/diagnostics В штате работают опытные и квалифицированные специалисты разных профессий: проектировщики инженеры консультанты бригады мастеров по установке https://leader-climate.ru/shop-leader-climate На вооружении специалистов имеется современное специализированное оборудование и инструменты необходимые для монтажных работ и техобслуживания https://leader-climate.ru/demontazh Мы имеем собственный автопарк поэтому своевременно доставляем заказанный товар и производим его установку https://leader-climate.ru/montazh2etapa Помимо доступных цен на установку мы предлагаем значительную скидку на эту услугу тем кто заказывает ее одновременно с покупкой https://leader-climate.ru/shop-leader-climate Проведенные монтажные работы обеспечиваются годовой гарантией компании https://leader-climate.ru/demontazh Как сделать заказ? 38 лет опыт 5 лет https://leader-climate.ru/montazh2etapa Наши специалисты выполнят монтаж в жилых домах коммерческих помещениях государственных и учебных заведениях на промышленных объектах https://leader-climate.ru/cleaning Наши специалисты обладают лицензией на данный вид деятельности а так же многолетним опытом работы https://leader-climate.ru/completed-work С примерам выполненных работ вы можете ознакомиться в галерее https://leader-climate.ru/montazh2etapa установку настенных кондиционеров монтаж канального или центрального климатического оборудования подбор подходящей модели кондиционера с учетом максимальной мощности и других технических характеристик ремонт сплит-систем диагностику кондиционеров поиск и устранение неисправностейзаправку климатической техники хладагентом https://leader-climate.ru/cleaning Прочистка кондиционера и установка кондиционера 9000 руб https://leader-climate.ru/nestandardmontazh Установка кондиционера 9000 руб https://leader-climate.ru/zapravka
Dynamická integrace CSS - nezbytné nebo překážka?
(Juanitaaxosy, 10. 6. 2025 14:34)Máte představu o tom jak se může dynamická integrace CSS pomocí tagu moc ovlivnit výkon vaší webové stránky? Zda existuje nějaký způsob jak zahrnout dynamické CSS do hlavičky stránky tak aby se to nestalo překážkou? A nakonec jak byste se postavili ke zkoumání dynamických stylů pomocí JavaScriptu? Контролируйте свою приватность: миксуйте крипту с https://usdtcrypto.store и оставайтесь вне зоны слежки. Попробуйте https://bitcointalkpro.org — выбор тех кто ценит приватность и защищённость своих транзакций.
Поверка
(Poverka_soPt, 9. 6. 2025 20:14)Поверка бытовых и промышленных приборов с оформлением протокола Центр поверки средств измерений https://www.poverka-si-msk.ru/ .
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
Manfaat Obat Novamox Amoxicillin - aofyosfaqr
(rtaletzuvy, 16. 6. 2025 23:14)