синтаксис HTML5

Як ви вже дізналися, в HTML5 деякі правила були ослаблені. Це було зроблено тому, що творці HTML5 хотіли, щоб ця мова реальніше відображав дійсну роботу веб-браузерів. Іншими словами, вони хотіли скоротити розрив між "працюють веб-сторінками" та "веб-сторінками, правильними з точки зору стандарту". У наступному розділі ми розглянемо зміни в правилах більш детально.

Звичайно ж, все ще існують застарілі методи, підтримувані браузерами, вживання яких абсолютно не схвалюється стандартом HTML5. Ці методи можна виявити за допомогою валідатора HTML5.

ослаблені правила

При нашому першому знайомстві з розміткою HTML5 ми дізналися, що використання елементів , і не є обов'язковим для цієї розмітки. Але ослаблення правил в HTML5 на цьому не закінчується.

У ньому також дозволяється використовувати в тегах як прописні, так і малі літери, як в наступному прикладі:

У тегах можна використовуватияк прописні, так і малі літери.

Також можна не використовувати закриває зворотну косу риску в порожніх елементах, тобто елементах без вмісту, таких як (Зображення),
(Розрив рядка) або

приклад
розриву
рядки

У HTML5 також зазнали змін правила для атрибутів. Значення атрибутів більше не потрібно брати в лапки, але тільки за умови, що вони не містять заборонених символів (зазвичай це символи>, = або пробіл). Ось приклад використання елемента таким чином:

Також дозволені атрибути без значень. Таким чином, якщо для установки прапорця в XHTML потрібно кілька повторюється синтаксис:

то в HTML5 це можна робити в традиціях HTML 4.01, вказуючи тільки одна назва атрибута:

Але деяких особливо турбує не те, що все це дозволено в HTML5, а те, що не особливо послідовні розробники можуть недбало використовувати як строгі, так і ослаблені правила, іноді навіть в одному і тому ж документі. Але в дійсності подібна недбала розмітка можлива і в XHTML. В обох стандартах обов'язок за хороший стильрозмітки лежить на веб-розробника, тому що браузер з'їсть все, що йому буде подано.

Використання елементів , і . В елементі зручно розміщувати визначення природної мови сторінки, а елементи і дозволяють відокремити інформацію про сторінку від власне вмісту сторінки.

Малі літери в тегах. Використання малих літер в тегах не є обов'язковим, але такі теги набагато більше поширені, їх легше вводити (т. К. Не потрібно задіяти клавішу ), А також не так ріжуть око, як теги з великими літерами.

Взяття в лапки значень атрибутів. Значення атрибутів беруться в лапки тому, що на це є причина - допомогти уникнути помилок, які в іншому випадку дуже легко допустити. Без лапок один неправильний символ значення атрибута може зіпсувати всю сторінку.

Перевірка коду HTML5

Новий розслабляючий підхід до правил в HTML5 може бути цілком до душі одним веб-розробникам. Інших же сама думка про те, що за фасадом працюючого без сучка, без задирки браузера може ховатися непослідовна, повна помилок розмітка, здатна позбавити сну.

Якщо ви належите до другого типу, то знайте, що інструмент для перевірки правильності розмітки, який має назву валідатором, може виявити код, який не відповідає рекомендованим стандартам HTML5, навіть якщо браузер і оком не моргне при обробці цього коду.

Деякі з можливих проблем, Які валідатор в змозі вловити, включають наступні:

відсутність обов'язкових елементів (наприклад, елементу

Дамо струс браузеру в стилі HTML5!

У тегах XHTML не можна використовувати великі літери.

Для перевірки цього коду потрібно валідатор XHTML, який контролює проходження суворим старими правилами XHTML. Валідатор від W3C для цього не підійде, але зате підійде валідатор на сайті http://validator.nu, де потрібно вказати стандартну (тобто XHTML) в списку Preset. Також потрібно встановити прапорець Be lax about HTTP Content-Type, якщо тільки ви не вставляєте перевіряється код безпосередньо в текстове поле.

Слідуючи цим крокам, ви зможете створити документ XHTML і виконати його перевірку. Проте браузери все одно будуть обробляти цей документ, як звичайну сторінку HTML5, яка просто пнеться походити на XML-документ. Ніяких додаткових правил при обробці такої сторінки застосовувати вони не будуть.

Якщо ж ви хочете, щоб і браузери обробляли сторінку згідно з правилами XHTML, то вам потрібно налаштувати свій веб-сервер для подачі сторінок з MIME-типом application / xhtml + xml або application / xml, замість стандартного типу text / html. До речі, браузери, які підтримують XHTML5, обробляють таку розмітку по-іншому, ніж звичайний код HTML5. Вони намагаються обробляти сторінку як документ XML, і якщо це їм не вдається (через помилки в коді), браузер припиняє обробку решти документа.

Який з цього висновок? Для переважної більшості веб-розробників, від любителів до серйозних професіоналів, гра за суворими правилами XHTML не варто необхідних для цього свічок. Єдиним винятком є ​​розробка спеціальних рішень, наприклад сторінок з вмістом, яким потрібно маніпулювати за допомогою XML-інструментів, таких як, наприклад, XQuery і XPath.

Якщо вам цікаво, можна обдурити браузер і змусити його переключитися в режим XHTML. Для цього потрібно лише перейменувати файл з розширенням xhtml або xht, а потім відкрити його з жорсткого дискавашого комп'ютера. Більшість браузерів (включаючи Firefox, Chrome і IE 9) будуть обробляти таку сторінку, як ніби-то вона була завантажена з веб-сервера з настройками MIME XML. Якщо сторінка містить будь-яку незначну помилку, в браузері відобразиться частково оброблена сторінка (IE 9), повідомлення про помилку XML (Firefox) або те й інше разом (Chrome).

DOM як частина мови

У мові HTML5 вперше було введено поняття DOM (Хоча він існував і до цього, однак він не був частиною мови), Тепер HTML-документ розглядається як набір обєктів, а не тегів. Тому як такого синтаксису HTML5не існує. Однак при написанні коду ви можете дотримуватися правил розмітки тегів, Які були встановлені в HTML 4.01 або XHTML 1.0

Синтаксис HTML 4.01

В HTMLдо п'ятої версії, існувало кілька правил написання коду:

1. Вільний режим loose, який використовується в HTML 4.01
   "Http://www.w3.org/TR/html4/loose.dtd">
2. Cтрогий режим strict, який використовується в HTML 4.01
   "Http://www.w3.org/TR/html4/strict.dtd">
3. Ще був синтаксис пов'язаний з фреймами. Фрейми в HTML5 вважаються застарілими, але багато розробників все одно використовують їх, оскільки фрейми дуже зручні при розробці деяких веб-додатків.

Синтаксис XHTML 1.0

В XHTML, Існувало два правила написання коду:

1. Перехідний режим transitional, який використовується в XHTML 1.0
   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Суворий режим strict, який використовується в XHTML 1.0
   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Сучасний синтаксис HTML5

При використанні HTML5, написавши на початку HTML-документа, доктайпів, Ви можете використовувати будь-який з перерахованих вище синтаксисів мови (Правил написання коду)або навіть поєднувати HTML 4.01 і XHTML 1.0 один з одним.

Наприклад, не обрамляти лапками значення атрибутів атрибут = значення (Вільний режим HTML 4.01 - loose), Але в той же час ставити слеш в одиночних тегах
(Строгий режим хHTML 1.0 - strict).

XHTML (strict), найкращий

Досвідчені HTML-верстальники зазвичай використовують при написанні коду на HTML5, строгий синтаксис XHTML strict, оскільки він тримає верстальника в тонусі, не дозволяє йому розслаблятися і тим самим оберігає його від можливих помилокв коді. Також використання строгого синтаксису стане в нагоді при вивченні програмування, бо там строгість синтаксису, вкрай важлива.

HTMLрозшифровується як HyperText Markup Language ( мова розмітки гіпертексту):

• моваозначає, що він може бути прочитаний як людиною, так і комп'ютером;
• розміткаозначає, що написаний вами код позначається за допомогою ключових слів;
• гіпертекстозначає, що він використовує HTTP як частина Інтернету.

Як і будь-яка мова, HTML поставляється з набором правил. Ці правила досить прості і зводяться до визначення кордонів, Щоб знати, де щось починається і де закінчується.

Нижче наведено приклад абзацу в HTML:

Якщо Тетріс і навчив мене чогось, так це того, що помилки накопичуються, а досягнення зникають.

Те, що ви бачите в кутових дужках < и >називається тегами HTML. Вони визначають, де щось починається і де воно закінчується.

Кожен з тегів несе певний сенс. У нашому випадку<р>позначає абзацтексту.

Як правило, вони йдуть парами:

• відкриває тег<р>визначає початок абзацу;
• закриває тег
  визначає його кінець.

Єдиним розходженням між відкриває і закриває тегами є слеш /, який передує імені тега.

При об'єднанні відкриває, закриває тегів і всього між ними, ви отримаєте елемент HTML. Рядок цілком являє собою елемент HTML, який використовує теги HTML<р>і

.

Якщо ви переглянете цей приклад в вашому браузері, то помітите, що теги HTML в браузері не відображаються. Вони читаються тільки браузером, щоб знати, який тип контентуви написали.

Де писати HTML

Ви, ймовірно, стикалися c простими текстовими файлами, тими, які мають расшіреніе.txt. Щоб такий текстовий файл став HTML-документом(Замість текстового), вам потрібно використовувати расшіреніе.html.

Відкрийте текстовий редактор, скопіюйте та вставте наступне вміст:

Це моя перша веб-сторінка!

Збережіть цей файл як my-first-webpage.html, просто відкрийте його вашим браузером і ви побачите:

Це моя перша веб-сторінка!

• використовуйте текстовий редактор, на зразок Notepad ++, для створення HTML-документів;
• використовуйте браузер, на зразок Firefox, для відкриття HTML-документів.

атрибути

Атрибути діють як додатковаінформація, прив'язана до елементу HTML. Вони пишуться всередині тега HTML. Таким чином, вони також не відображаються в браузері.

Наприклад, атрибут href використовується для визначення призначення посилання (яка створюється тегом ):

завантажити Firefox

Є 16 атрибутів HTML, які можуть бути використані в будь-якому елементі HTML. Всі вони не є обов'язковими.

Ви в основному будете застосовувати class (який використовується для CSS) і title (підказка, яка з'являється при наведенні курсора на об'єкт, на зразок цього).

деякі елементи HTMLмістять обов'язковіатрибути. Наприклад, при вставці зображення ви повинні вказати його розташування за допомогою атрибута src:



Беручи до уваги, що мета елемента полягає в показі зображення, то має сенс шлях до зображення зробити обов'язковим.

Коментарі

Якщо ви пишете щось в своєму коді без порушення відображення сторінки браузером, то ви можете писати коментарі. Вони будуть ігноруватися браузером і можуть бути використані тільки для людей, які пишуть код.

Коментар починається з .

Привіт світ!

самозакриваються елементи

Деякі елементи HTML мають тільки відкриває тег:




Оскільки у них немає закриває тега і, отже, вони не можуть містити нічого всередині, самозакривних елементи зазвичай несуть із собою кілька атрибутів, які надають додаткову інформацію.

вказує, відповідно до якого стандартом HTML написана ваша Web-сторінка.




DOCTYPE	опис
HTML5
	Для всіх документів.
HTML 4.01
"Http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
	Перехідний синтаксис HTML.
	У HTML-документі застосовуються фрейми.
XHTML 1.0
	Строгий синтаксис XHTML.
	Перехідний синтаксис XHTML.
	Документ написаний на XHTML і містить фрейми.
	XHTML мобільного профілю, додає специфічні елементи для мобільних телефонів.
XHTML 1.1
"Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Ніякого поділу на види це визначення не має, синтаксис один і підпорядковується чітким правилам.

Отже, доктайпів існує кілька (строгі і перехідні, для HTML і XHTML). Який стандарт вибрати - ось в чому питання.

Стандарти HTML і XHTML

HTML - стандартна мова розмітки Web-документів.

В HTML 4.01 і HTML5 зовнішній вигляд сторінки відділений від її змісту. Зміст і структура (заголовки, абзаци, посилання) задаються в HTML. Оформлення (вирівнювання, шрифти, кольори) задаються CSS-стилями.

Наприклад, тег і атрибут align оголошені застарілими.

XHTML - розширювана мова розмітки Web-документів, створений на базі XML. Стандарт XHTML являє собою перелік відмінностей між HTML 4.01 і XHTML.

вимоги XHTML	Не можна	потрібно
Всі теги повинні бути закриті.
Всі теги, атрибути і CSS-властивості повинні бути набрані в нижньому регістрі.
Всі значення атрибутів тегів повинні бути укладені в лапки.
Повинна строго виконуватися ієрархія: перший тег закривається останнім.	...	...
Блоковий тег не може бути вкладений в рядковий. (Після блочного елемента подальше виведення на сторінці здійснюється з нового рядка. Рядковий елемент перекладу рядки не робить.)	...	...
Булеві атрибути записуються в розгорнутій формі.
У зображень обов'язково повинно бути вказано опис

Переваги мови XHTML - НЕ строгість синтаксису, а можливість придумувати власні теги.

Однак, 2 липня 2009 року Консорціум Всесвітньої павутини (W3C) повідомив про припинення робіт над XHTML 2.0, вважаючи концепцію XHTML невірною. Група програмістів переключилася на роботу над стандартом HTML5. І хоча стандарт HTML5 все ще не затверджений, на ньому вже написано безліч сайтів.

Кому цікаво, коли ж HTML5 буде закінчений, можуть ознайомитися з першоджерелами:

Офіційна версія стандарту HTML5 знаходиться за адресою: www.w3.org/TR/html5/

Визначимося з вибором. Зробити його нескладно: використовувати XHTML-стандарт не варто, якщо ви не збираєтеся розширювати мову HTML.

На! DOCTYPE, призначених для документів, що використовують фрейми, зупинятися не будемо: позавчорашній день.

Наступне питання: який вибрати синтаксис - строгий або перехідний?

Строгий і перехідний синтаксис HTML 4.01

Перехідні синтаксиси існують для того, щоб полегшити перехід на новий стандарт. Вони пропустять багато з того, що строгий синтаксис вважатиме помилками.

Зрозуміти, що тут до чого, простіше на прикладі. Спочатку задамо строгий синтаксис.

строгий синтаксис

Перевірка на валідність

червонимкольором.

Відповідність HTML-коду оголошеному стандарту називають валідність, А перевірку на це відповідність - валідацією.

Щоб відстежувати помилки верстки, встановимо доповнення до FireFox Html Validator.

Відкриємо нашу сторінку в браузері FireFox, Наведемо мишку на знак валідатора:

Подвійне клацання на знаку валідатора дастьрозгорнуту список помилок:




Поміняємо! DOCTYPE на перехідний синтаксис:

перехідний синтаксис

Перевірка на валідність

Частина тексту знадобилося виділити червонимкольором.

Запускаємо FireFox. Помилок немає:




Начебто все чудово. Може, на цьому і зупинитися?

Моя порада: робити валідну верстку або відповідно до суворим синтаксисом HTML 4.01, або відразу на HTML5. HTML треба використовувати за прямим призначенням, а оформлення залишити CSS. Крім того, якщо у сайту валідна верстка, а він неправильно відображається в будь-якому браузері, то це однозначно проблема браузера. Нові версії браузера будуть краще відповідати стандарту і не помилятися в інтерпретації валидного коду. Якщо ж складна верстка реалізована невалідним способом, то немає гарантій, що нові версії браузера не розсипаючи її на шматочки.

Не спокушайтеся лояльністю перехідного синтаксису, тільки суворе відповідність стандартам!

Навіщо потрібна валідна верстка

Здавалося б, навіщо мучитися? Адже маленькі недоліки верстки браузери часто виправляють автоматично, і сайт працює абсолютно нормально. Але ці дрібні, практичні непомітні помилки проте зауважують пошукові системи. Навіть один відсутній тег

- це мінус на оцінці якості сайту.

Саме через здатність пошукових системпомічати будь-які недоліки HТML-коду і рекомендується дотримуватися валідність верстки. Крім того, перевіряючи код на валідність, можна виявити поряд з дрібними недоліками ще й серйозні помилки, які були не помічає раніше.





У першому розділі ви дізналися, що дизайн сайту створюється з допомогою CSS. Для кращого розуміння, що і для чого потрібно використовувати, давайте розглянемо один наочний приклад. Уявіть собі, що HTML - це чорно-білий структурований каркас будинку без прикрас, а CSS - це те, за допомогою чого ми створюємо унікальний образ.

Як бачите, у будинку праворуч з'явилися кольору, матеріали та додаткові прикраси. На веб-сторінці відбувається все те ж саме: за допомогою правил CSS на ній з'являються кольори, відступи, змінюється стиль шрифтів і розміри елементів, створюється цілий, завершений стиль.

Проста таблиця стилів

Давайте ж поглянемо, як виглядає сама елементарна таблиця стилів і з яких елементів вона складається. Це приклад CSS-стилю для всіх тегів

Які є на веб-сторінці:

Як тепер буде виглядати текст

У браузері і що означає кожен рядок? Все дуже просто: шрифт матиме напівжирний шрифт і колір # 1E824C (шістнадцятковий код кольору) і відображатися в розмірі 1em (відносна одиниця, що дорівнює розміру шрифту, який заданий за замовчуванням у браузері).




Вищеописаний стиль, як і будь-який інший, включає в себе набір елементів, у яких є власні назви. Запам'ятайте їх, щоб при читанні наступних глав ви розуміли, про що йде мова.

Селектор Вказуючи його, ми говоримо браузеру, до чого саме хочемо застосувати стиль. У нашому випадку селектором є p. Блок оголошень Так називається весь вміст, що знаходиться між фігурними дужками () після селектора. Стильова властивість Це команда, за допомогою якої вказується бажаний варіант форматування (наприклад, ви хочете змінити написання шрифту font-weight, колір color, розмір шрифту font-size і т. Д.). Після імені властивості необхідно ставити двокрапку. Надалі ви познайомитеся з великою кількістю властивостей CSS. Значення властивості Після двокрапки записується саме значення властивості, яке ви визначаєте самостійно, створюючи таким чином власний стиль. Залежно від властивості необхідно вказувати відповідне йому значення.

Наприклад, накреслення шрифту задається ключовими словами bold, bolder і т. д., колір - шістнадцятковим значенням, RGB (A), HSL (A) або ключовими словами red, orange, white і т. Д., Розмір шрифту - одиницями виміру CSS (відсотками % , пікселями px, пунктами pt, висотою шріфтаem) Або константами small, medium, large і т. Д. Після вказівки значення властивості ставиться крапка з комою.



Оскільки CSS не чутливий до перенесення рядків, прогалин, символів табуляції і регістру, ви можете оформляти ваш код так, щоб в подальшому його було зручно читати і правити. Наприклад, ми могли б написати вищенаведений код в одному рядку:

P (font-weight: bold; color: # 1E824C; font-size: 1em;)

Він теж працює, але чи легко в ньому розібратися? Особливо коли код CSS досить довгий. Звичайно, не завадило б розділити його хоча б пробілами. Існує кілька правил хорошого тону, і якщо ви відразу вивчіть їх, то в майбутньому скажете собі «спасибі».

Дуже часто при описі стилю використовується компактна форма запису, при якій всі властивості для одного селектора вказані в одному блоці:

P (font-weight: bold; color: # 1E824C; font-size: 1em;)

А така форма запису досить громіздка, хоч і працює:

P (font-weight: bold;) p (color: # 1E824C;) p (font-size: 1em;)

Щоб було легше орієнтуватися в коді, рекомендується записувати кожне властивість на новому рядку і використовувати табуляцію або прогалини при перерахуванні властивостей. Іноді між двокрапкою та значенням властивості ставиться пробіл, але тут ви можете вирішувати, як вам зручніше.

Для додаткової зручності можна додавати коментарі прямо в CSS. У них ви можете писати пояснення, позначки, що допомагають орієнтуватися в таблицях стилів.

Коментарі в CSS записуються між символами / * і * /. Вони не відображаються на веб-сторінці в браузері і видно виключно в коді. Розробники також часто використовують коментарі для того щоб приховати тимчасово непотрібний ділянку коду CSS. Виглядають коментарі таким чином:

/ * Стиль для основного тексту * / p (font-weight: bold; color: # 1E824C; font-size: 1em;)

Внутрішні і зовнішні таблиці стилів

Коли ви створили таблицю стилів, ви можете вибрати, яким чином прикріпити її до веб-сторінці. Існує два варіанти таблиць - внутрішні, які додаються прямо на сторінку, і зовнішні, які знаходяться в окремому файлі з расшіреніем.css і підключаються до сторінки за допомогою посилання.

Внутрішні таблиці стилів записуються в HTML-документі між тегами. Потрібно додавати таблицю стилів в кожну веб-сторінку. Якщо на сайті присутня велика кількість сторінок, яким необхідний однаковий дизайн, то додавання, а також редагування стилів стає невдячною роботою - процес займе дуже багато часу. Тому внутрішні таблиці стилів вважаються незручними.

Зовнішні таблиці стилів набули більшого поширення. Вам потрібно лише підключити таблицю до всіх необхідних веб-сторінок, використовуючи тег c атрибутом rel(Визначає відношення між сторінкою та підключається файлом) і значенням stylesheet, яке означає, що в файлі, що підключається міститься таблиця стилів. Атрибут href - це шлях (URL) до вашого файлу.css:

Редагуючи тільки один файл, ви можете змінювати стиль для всього сайту відразу, незалежно від того, скільки на ньому сторінок. Це дуже зручно, особливо для великих ресурсів.

Урок: створюємо таблицю стилів

Оскільки зовнішні таблиці стилів найбільш зручні і широко використовуються при розробці дизайну, ми будемо вчитися створювати саме їх. Архів з файлами для даного уроку ви можете завантажити на цій сторінці.

В папці ви знайдете HTML-документ з прикладом простої сторінки і зображення (буде використовуватися в уроці). Відкрийте HTML-документ в браузері. Ви побачите, що сторінка виглядає зовсім звичайно. Щоб надати їй більш привабливий вигляд, давайте напишемо для неї стиль.

Поки що вам не потрібно занадто сильно вникати в те, що означає той чи інший шматок коду. Зараз вам необхідно зрозуміти сам принцип роботи. Приступимо.

Підключення CSS до HTML

Для початку відкрийте на комп'ютері будь-який текстовий редактор (підійде блокнот) і створіть порожній файл з ім'ям style, зберігши його з расшіреніем.css (повинен вийти файл style.css). Збережіть файл в тій папці, де знаходиться завантажений HTML-документ.

Відкрийте HTML-документ в текстовому редакторі, а також в браузері (щоб було зручно переглядати зміни в зовнішньому вигляді сторінки). Додайте між тегами Наступного код:

Коротко про те, що ви тільки що зробили. Вставивши цей код в HTML-документ, ви:

• вказали посилання на шрифт під назвою Roboto Condensed, який буде взятий з сервера Google (докладніше про шрифтах Google ми розповімо пізніше);
• підключили свою зовнішню таблицю стилів style.css (поки що порожню).

Пишемо стиль CSS

Збережіть зміни в HTML-документі і перейдіть в вами створений порожній файл.css. Давайте додамо стиль для сторінки:

Html (padding-top: 5px; background-image: url (background.jpg);)

Збережіть зміни. Вітаємо, ви написали перше правило - воно стосується тега . Перше властивість - padding-top - додасть відступ зверху між вікном браузера і вмістом веб-сторінки в розмірі 5 пікселів. За допомогою другого властивості, background-image, ви підключили зображення для фону всієї сторінки, вказавши шлях до графічного файлу (знаходиться в тій же папці, що і HTML-документ).

Оновлення відкриту веб-сторінку в браузері. Якщо все зроблено вірно, ви побачите, що на сторінці з'явився фон, а між верхньою частиною вікна і текстом трохи збільшився відступ.

Body (width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px;)

Збережіть зміни у файлі. Зараз ви:

• задали область для вмісту тега , Яка дорівнює 75% від ширини вікна браузера;
• забезпечили відступ в 40 пікселів від всіх сторін області вмісту;
• розташували область по центру сторінки, а також зробили відступ зверху і знизу в 15 пікселів;
• задали колір фону #EBEBEB для області вмісту;
• скруглили кути прямокутної області, вказавши радіус округлення 30 пікселів.

Знову поновіть HTML-документ. При цьому переконайтеся, що кеш відключений або перезавантажте сторінку з відновленням всіх пов'язаних з нею файлів, використовуючи спеціальну комбінацію клавіш (наприклад, для Chrome це Ctrl + F5).

Ви побачите, що по центру сторінки додалася прямокутна область з округленими кутами. Це і є результат ваших дій у файлі CSS. Ви можете також спробувати зменшити вікно браузера і помилуватися, як ширина прямокутної області підлаштовується під його розмір. Це відбувається завдяки тому, що ширина width задана в процентах.

Змінюємо шрифт за допомогою CSS

Пора прикрасити наш текст. Додайте в таблицю стилів цей код і збережіть зміни:

H1 (color: # E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif;) h2 (color: # E87E04; font-size: 1.7em; margin-left : 20px; font-family: "Roboto Condensed", sans-serif;) p (color: # 22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed ", sans-serif;)

Написавши це, ви задали кольору шрифтів для тегів h1, h2, p, вказали їх розміри, додали відступи margin від лівого краю в 20 пікселів і додатково для

Зробили відступ зверху в 20 пікселів і встановили інтерліньяж line-height ( міжрядковий інтервалтексту) на 50% більше стандартного. До того ж, ви підключили до всіх трьох тегам шрифт Roboto Condensed (ось для чого на самому початку необхідно було вказати посилання на нього в HTML-файлі).

Оновлення сторінку в браузері і помилуйтеся результатом роботи. У цьому уроці ми спробуємо ще одну річ. Допишите в CSS цей код:

Emphasis (font-weight: bold;)

Збережетеся і обновіть сторінку в браузері. Ви побачите, що в останньому абзаці шрифт в деякій частині тексту став жирним. Щоб зрозуміти, що сталося, перейдіть у вікно текстового редактора, Де на самому початку ви відкрили HTML-файл. Погляньте на останній абзац: частина пропозиції загорнута в тег з класом emphasis. Таким чином ви написали стиль для окремого рядка тексту в абзаці. Детальніше про класи ми розповімо в наступному розділі.

В кінцевому підсумку у вас повинна вийти ось така сторінка:





В якості тренування спробуйте змінити розмір тексту для

(Припустимо, 1.1em), а також збільшити відступ між

І лівим краєм області вмісту ще на 10 пікселів.

висновки

У цьому розділі було розглянуто синтаксис CSS, а також спосіб створення елементарної таблиці стилів. Ви дізналися, як підключити CSS до HTML сторінці, А також навчилися створювати прості стилі. Виділимо основні речі, які необхідно запам'ятати з цієї глави:

Будь-який стиль CSSскладається з декількох елементів: селектора, стильової властивості і значення цієї властивості.

Всі властивості і їх значення записуються в блоці оголошень між двома фігурними дужками () після вказівки селектора.

Потрібно уважно стежити за знаками: дві фігурні дужки(Відкриває на початку блоку оголошень і закриває в кінці). Без цих дужок CSS буде працювати некоректно.

Потрібно обов'язково ставити двокрапку після властивості і крапку з комою після значення.

Для зручності і кращого сприйняття коду CSS записуйте кожне властивість в новому рядку, а також не скупіться на прогалини і табуляцію.