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

Існує кілька варіантів здійснення цієї операції: використання таблиць вкладених стилів, таблиць зовнішніх стилів та вбудований стиль.

Сьогодні ми поговоримо саме про останній спосіб.

Використання стилю в тег HTML

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

Для прикладу поставимо різні розміришрифт для двох різних абзаців тексту:

< p style= "font-size:25px;" >Задаємо цьому відрізку тексту висоту букв у 25 пікселів. < p style= "font-size:15px; color:#2400ff;"> А цей текст буде з літерами висотою 15 пікселів, причому ще й підфарбуємо його синім, щоб продемонструвати застосування кількох стилів одночасно.

Недоліки

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

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

Також виникне труднощі у оформленні великих обсягів тексту. Думаю, нікого не радує перспектива прописувати для кожного абзацу розмір шрифту, якщо таких абзаців штук 40.

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

Варто також відзначити і плутанину, яка обов'язково вирине у використанні атрибуту style. Ця плутанина виникне через використання різних лапокпід час вписування стилів.

Для наочності подивимося на приклад нижче:

< div style= "font-family: "Roboto Condensed", sans-serif"> Запис коректний. < div style= "font-family: "Roboto Condensed", sans-serif"> Так також правильно. < div style= "font-family: " Roboto Condensed ", sans-serif" >Це не коректний запис. < div style= "font-family: " Roboto Condensed ", sans-serif" >І це теж не правильно

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

Коли варто використати вбудований стиль

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

< div id= "productRate" > < div style= "width: 40%" >

Запис потрібної ширини цього блоку буде найпростішою операцією.

Аналогічна ситуація може виникнути за необхідності заміни фонового зображення(наприклад) користувача під роллю адміністратора. У такому разі тег img може не підійти. Тому варто звернутись до атрибуту style:

< div style= "background:url(fon.jpg)" >

Також програмісти часто звертаються до вбудованих стилів у процесі верстки спливаючих вікон. Найчастіше цей процес проходить таким чином: блоку, над оформленням якого йде робота, прописується display:block, а решта вікон ховається за допомогою display:none, щоб вони візуально не заважали роботі програміста. Ось приклад:

< div class = "element" style= "display:block" >Спливне вікно, яке оформляється в Наразі

Підсумок

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

У цьому розділі мова піде про те, як впровадити CSS в документ HTML, тобто зв'язати стильовий опис елемента безпосередньо з самим елементом, HTML тегом.

Здійснити це завдання можна трьома способами:

• Написати стильовий опис у самому елементі. Такий спосіб хороший лише в тому випадку якщо такий елемент один єдиний у HTML документе який потребує окремого стильового опису.
• Написати стильовий опис всім ідентичних елементів HTML документа. Такий спосіб виправдовує себе, якщо стиль сторінки принципово відрізняється від загального дизайну сайту (групи взаємопов'язаних сторінок).
• Винести стильовий опис елементів HTML окремого файлу CSS. Це дозволить керувати дизайном всього сайту повністю, кожною сторінкою сайту в якій зазначено звернення до файлу CSS. Цей метод є найефективнішим використанням таблиці каскадних стилів.

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

Атрибут стиль.

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

Пишеться так:

style="">

Все, що буде написано між лапками атрибуту styleі буде стильовим описом для даного елемента, в даному випадку елемента

Ну наприклад:

style="color: #ff0000; font-size:12px"> це параграф з індивідуальним стилем

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

За таким самим принципом можна вказати індивідуальний стиль практично для кожного HTML елемента.

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px">Все про слонів

Купити слона

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px">Взяти слона на прокат

style="color: #ff0000; font-size:14px">

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

Тег (не плутайте з однойменним атрибутом) у якому відбувається опис потрібних нам елементів.

Подивіться приклад, нижче до нього будуть коментарі.

Все про слонів

На цьому сайті Ви знайдете будь-яку інформацію про слонів.

Купити слона

У нас Ви можете за вигідними цінами придбати найкращих слонів!!

Взяти слона на прокат

Тільки у нас Ви можете взяти будь-яких слонів на прокат!

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

,

- будуть синіми а параграфи

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

Тепер обіцяні коментарі:

Тег йде безпосереднє оголошення стилів тих чи інших HTML елементів відповідно до наступного синтаксису:

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

CSS в окремому зовнішньому файлі.

Чи довго, чи підійшли ми до головної, на мій погляд, гідності CSS, а саме можливості виносити всі відомості стосовно дизайну сайту в окремий зовнішній файл.

Отже, відкриваємо блокнот (або інший редактор) і пишемо в ньому наступний текст:

Body (background-color: #c5ffa0)
a (color:#000060; font-weight: bold;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (color: #0000ff; font-size:18px)
h2 (color: #ff00ff; font-size:16px)
p (color: #600000; font-size:14px)

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

Всі! файл зі стильовим описом створено! Тепер залишилося зовсім трохи, а саме змусити потрібні сторінки нашого сайту черпати інформацію з цього файлу.

Робиться це за допомогою тега (зв'язок). Тег багатоцільовий та служить для "зв'язування" HTML документа з додатковими зовнішніми файлами, що забезпечують його належну роботу. Тег є своєрідним посиланням, тільки призначеним не для користувачів, а для програм оглядачів (браузерів). Так як несе у собі виключно службову інформацію він міститься у заголовку HTML документа між тегами та не виводиться браузерами на екран.

Тег має атрибути:

href- Шлях до файлу.
rel- Визначає відносини між поточним документом та файлом, на який робиться посилання.

• shortcut icon - Визначає, що файл, що підключається .
• stylesheet- Визначає, що файл, що підключається, містить таблицю стилів.
• application/rss+xml - Файл у формат XMLдля опису стрічки новин.

type- MIME тип даних файлу, що підключається.

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

Повторюся, щоб точно розвіяти можливі непорозуміння. Атрибуту relпривласнюємо значення stylesheetоскільки підключаємо як зовнішній файл каскадну таблицю стилів, вказуємо шлях до файлу css (у цьому прикладі файл називається mystyle.cssі лежить поруч із документом HTML у якому прописується це посилання) так само вказуємо, що даний файлтекстовий і містить у собі стильовий опис type="text/css"

Тепер вставляємо цей рядок у заголовки сторінок нашого сайту і насолоджуємося результатом.

Файл mystyle.css
body (background-color: #c5ffa0)
a (color:#000060; font-weight: bold;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (color: #0000ff; font-size:18px)
h2 (color: #ff00ff; font-size:16px)
p (color: #600000; font-size:14px)
Файл index.html

Меню:

Все про слони.
Купити слон.
Взяти слона на прокат.

---

Все про слонів

На цьому сайті Ви знайдете будь-яку інформацію про слонів.

Файл elephant.html

Меню:

Все про слони.
Купити слон.
Взяти слона на прокат.

---

Купити слона

У нас Ви можете за вигідними цінами придбати найкращих слонів!!

Файл elephant1.html

Меню:

Все про слони.
Купити слон.
Взяти слона на прокат.

---

Взяти слона на прокат

Тільки у нас Ви можете взяти будь-яких слонів на прокат!

У прикладі вище, "сайт про слони", на даний момент, є три сторінки, кожна з яких пов'язана з одним єдиним зовнішнім css файлом - mystyle.css. Таким чином, ми значно його "розвантажили" та зробили дизайн всього сайту "мобільним". Уявіть скільки б кілобайт ми виграли, якби на цьому сайті було сотня повноцінних сторінок!? А також, скільки б часу заощадили, якби нам знадобилося щось змінити в його дизайні!?

У цьому розділі ми розглянули три методи застосування CSS в HTML документ. Який краще використовувати?

• Використовуйте атрибут styleдля будь-якого елемента, якщо цей елемент з відмінним від інших елементів стилем один єдиний на всьому сайті.
• Використовуйте тег . Насправді це виглядає так:

  Тут приклад: відображення CSS-стилів у документі HTML

  Зверніть увагу на те, що всередині тега ми пишемо код також за правилам CSS, використовуючи фігурні дужки. У наступних статтях я докладніше розповім правилам синтаксису CSS.
  

  Підключення кількох CSS-файлів до одного HTML-документу.

  Правила HTML допускають підключення кількох файлів CSS. Багато веб-майстрів використовують це: створюють окремі CSS-файли для тексту і для картинок. Або окремі файли для хедера, футтера та основного тіла сторінки. Давайте розберемося, як це продати.

  Ми створюємо кілька файлів із CSS-стилями. Нехай їх назви будуть style-1.css та style-2.css. Розміщуємо, як і в способі номер один, в одній папці HTML-файлом.

  Тут приклад: відображення CSS-стилів у документі HTML

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

  Посилання на CSS-файл усередині файлу цього ж типу.

  Крім усіх вище перерахованих способів, є спосіб, який дозволяє всередині одного CSS-файлу розміщувати посилання на багато інших!

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

  По-друге, вже підключений файл вписуємо наступний код:

  @import url("style-2.css");

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

  Тест на закріплення матеріалу:
  

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

  Варіант 1:

  Варіант 2:
  

  Варіант 3:

  варіант 4:

  
  Чи можемо ми розмістити каскади CSS у файлі HTML?

  Таблиці стилів можуть бути додані на веб-сторінку трьома різними способами, які різняться за своїми можливостями.

  Таблиці пов'язаних стилів

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

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

  Hello, world!

  Шлях до файлу зі стилями може бути як відносним, так і абсолютним, як показано в даному прикладі.

  Переваги даного способу

  1. Використовується один файл зі стилем для будь-якої кількості веб-сторінок, а також його можна використовувати на інших сайтах.
  2. Можна змінювати таблицю стилів без модифікації веб-сторінок.
  3. При зміні стилю в одному єдиному файлі стиль автоматично застосовується до всіх сторінок, де є на нього посилання. Безперечно, зручно. Вказуємо розмір шрифту в одному тільки місці, і він змінюється на всіх сто або більше веб-сторінках нашого сайту.
  4. Файл зі стилем при першому завантаженні розміщується в кеш на локальному комп'ютері, окремо від веб-сторінок, тому завантаження сайту відбувається швидше.

  Таблиці глобальних стилів

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

  Hello, world!

  У цьому прикладі показано зміну стилю заголовка

  . На веб-сторінці тепер достатньо вказати лише цей тег та стилі будуть додані до нього автоматично.

  Внутрішні стилі

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

  Приклад 3. Використання внутрішніх стилів

  Hello, world!

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

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

  Приклад 4. Поєднання різних методівпідключення стилів

  Hello, world!

  Hello, world!

  У наведеному прикладі перший заголовок задається червоним кольором розміром 36 пікселів, а наступний зеленим кольором та іншим шрифтом.

  CSS розшифровується як Cascading Style Sheets, що в перекладі означає Каскадні таблиці стилів. Використовується для оформлення веб-сторінок. Якщо HTML-код містить вміст (те, що покаже браузер), то CSS визначає його оформлення (те, як браузер це покаже). Принадність CSS в тому, що за допомогою одного стилю можна оформити відразу всі однотипні елементи сторінки або цілого сайту (відразу всі посилання, абзаци, списки). CSS-стилем ви один раз визначаєте, як повинен виглядати той чи інший елемент, наприклад картинки, і вони змінюють своє оформлення відразу у всіх документах. Щоб змінити форматування тексту по всьому сайту, вам достатньо змінити CSS-код лише один раз.

  Основні елементи CSS

  Як HTML складається з тегів, атрибутів та значень, так і CSS складається зі своїх власних елементів. Суть конструкцій CSS можна пояснити так: "Вказати, який елемент сторінки оформити і вказати, як його оформляти". Ось складові конструкції CSS.

  • Селектор. Ідентифікатор, який вказує браузеру, до якого елементу сторінки застосувати оформлення. Завдяки йому оглядач "розуміє", що стиль призначений, наприклад, для оформлення списків чи таблиць.
  • Блок оголошення стилів. Пишеться після селектора і полягає у фігурних дужках. У ньому задається стиль елемента (його оформлення). Блок оголошення стилів і двох частин.
  • Властивість. Аналог атрибута в HTML. Визначає яку саме властивість оформлення буде змінено.
  • Значення. Задається властивості через двокрапку та визначає, як саме властивість буде змінено.

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

  Типи селекторів

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

  • Універсальний. Визначає правила для всіх елементів сторінки, для яких не встановлені інші правила.
    Код * (font-size: 14px;)встановлює розмір шрифту 14 пікселів усім елементам документа, для яких не задано інші правила за допомогою інших селекторів.
  • Тега. Цей тип селектора визначає правила форматування для вмісту певного HTML-тегу. Назва селектора збігається з ім'ям дескриптора, тільки пишеться без кутових дужок: p, h1, ul.
    Наприклад, код h2 (color: red;)встановлює зелений колір тексту для всіх заголовків другого рівня, тобто вмісту тегів
    .
  • Атрибута. За допомогою цієї групи селекторів можна визначити стиль оформлення всіх тегів, яким заданий певний атрибут. Селектори можна ставити точніше, вказуючи як ім'я атрибута, а й присвоєне йому значення, і навіть назва що містить тега. Цим можна скористатися, щоб робити оформлення більш індивідуальним.
  • Класу. Вид селекторів у разі, коли потрібно по-різному оформити вміст тегів одного типу. Наприклад, посилання в нижній частині сайту ви хочете зробити червоними, тоді як решта повинні залишатися синіми, як і були. Щоб застосувати правила класу до елемента сайту, необхідно вказати ім'я класу в атрибуті classвідповідний тег.

  Припустимо, за допомогою класу step окремим елементампотрібно задати відступ ліворуч у 15 пікселів.

  CSS-код буде таким:

  Step (margin-left: 15px;)

  HTML-код, який прив'яже елемент до правила, буде наступним:

  Текст із відступом

  • Ідентифікатор. Використовується спільно з атрибутом id HTML-тега і використовується, коли властивості потрібно задати єдиному елементу. На відміну від селектора класу, перед ім'ям якого ставиться крапка, пишеться через «решітку»:

  #exclusive (color:orange;)

  • Контекстний. У HTML одні теги часто знаходяться всередині інших, і контекстні селектори допомагають задати правила саме на такий випадок. За допомогою них, наприклад, можна відформатувати елементи всередині нумерованих списків або курсивний текст усередині абзаців:

  Pi (fint-family: Century;)

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

  Комбінувати та групувати селектори зручно у багатьох ситуаціях. Наприклад, щоб задати правила класу stepтільки для посилань, потрібно вказати обидва селектори через точку (спочатку тег, потім клас):

  A.step (margin-left: 15px;)

  Як підключити CSS до HTML-сторінки?

  Змусити інструменти створення сайтів взаємодіяти між собою можна кількома способами. За методом додавання стилі поділяються на такі категорії.

  Вбудовані стилі

  Задаються в документі прямо всередині HTML-тегу за допомогою атрибуту style. Мають найвищий пріоритет. Це означає, що якщо для одного й того ж елемента задано різне оформлення, то перевага буде надано правилу, яке прописано всередині тега. Селектор для вбудованого стилю не потрібен, тому що зв'язок стилю та тега очевидний - оформлення тега в ньому і задано.

  Наступний код задає розмір та колір шрифту тексту всередині тега

  Текст оформлений за допомогою внутрішнього стилю.

  Глобальні стилі

  Задаються тегом …

  Пов'язані стилі

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

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

  Щоб зв'язати правила із CSS-файлу з HTML-сторінкою, використовується тег , доданий у контейнер , та його атрибути.

  Ось рядок, який зв'язує правила з файлу mystyle.cssз HTML-сторінкою:

  rel="stylesheet"визначає, що тег посилається на файл таблиці стилів, href="mysyle.css"ставить його адресу. Правила адресації такі самі, як і звичайних посилань – шлях може бути абсолютним, відносним тощо.

  Імпортовані стилі

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

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

  @import url(any.css);

  Команда прописується рядком нижче тега, що відкриває