Наведемо приклад таблиці стилів - створимо файл style.cssі пропишемо стилі:

body ( font-family: Arial, Verdana, Sans-serif; /* Сімейство шрифтів */ font-size: 12pt; /* Розмір основного шрифту в пунктах */ background-color: #f0f0f0; /* Колір фону веб-сторінки * / color: #000000; /* Колір основного тексту */ ) h1 ( color: #a52a2a; /* Колір заголовка */ font-size: 24pt; /* Розмір шрифту в пунктах */ font-family: Georgia, Times, serif /* Сімейство шрифтів */ font-weight: normal; /* Нормальне накреслення тексту */ )

Тут ми поставили стилі для тіла сторінки і для заголовка

. Також можна встановити конкретні стилі для будь-яких інших елементів сторінки веб-сайту.

Тепер підключимо нашу таблицю стилів до сайту:

Привіт світ!

Це моя перша сторінка зі стилями CSS

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

У кожного тега можна задати індивідуальний колір, фон, окантовку та інші властивості. Формат візуального оформлення називається css (Cascading Style Sheets), що означає: «каскадні таблиці стилів».

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

1 Спосіб. Підключити окремий файл css у html коді сторінки

У даному файліпрописуються властивості тегів. Це найбільш зручний та практичний спосіб встановити css стилі для html, особливо якщо на сайті більш ніж 1 сторінка. Змінивши всього 1 файл, можна змінити оформлення всіх сторінок, на яких він підключений. Намагайтеся писати властивості в окремому файлі.

Як встановити файл стилів css на html

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

Приклад підключення файлу (код сторінки.html)

Текстовий зміст

Приклад коду файлу стилів (код сторінки.css)

P (color:green;)

У прикладі вище файл називається my_style.css і розташовується в папці /my_css .

У цьому файлі написано властивість для тега

Код p (color:green;) означає: зробити колір тексту всередині тега

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

2 Спосіб. Написати на початку самої сторінки

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

У вас є односторінковий сайт;

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

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

Як додати css стилі в html код сторінки сайту

Додати стилі сcs на html сторінкусайту, можна так само як і у файлу, а саме між і. Тільки замість посилання на файл прописуються теги, всередині яких пишуться самі стилі.

Приклад додавання властивостей тегів спочатку (код сторінки.html)

Текстовий зміст

3 Спосіб. Написати стиль в атрибуті style для кожного тега окремо

Даний спосіб широко застосовується, коли всередині однієї сторінки є елементи, що не сильно відрізняються між собою, наприклад, тільки кольором (відступом, розміром тощо). У цьому випадку швидше та зручніше підключити один загальний css стиль у html за допомогою окремого файлу, а невеликі зміни додавати у конкретних елементів. Атрибут style має найвищий пріоритет, тому тег отримає всі властивості, зазначені у style, навіть якщо вони раніше були вказані в інший спосіб.

По суті, логіка наступна: загальні стилі, що найчастіше використовуються, ми прописуємо у файлі (1 спосіб), а детальні коригування в самих елементах. Наприклад, якщо у вас на сторінці 5 заголовків, які відрізняються кольором, то краще прописати загальні властивостіу файлі, що визначають розміри та відступи цих заголовків, а колір у самих елементах, за цим способом. у тега

3 спосіб має найвищий пріоритет, тому тег отримає властивості, зазначені в атрибуті style="" , навіть якщо вони раніше були вказані за допомогою іншого методу.

Нам уже відомо, що для того, щоб веб-сайт виглядав красиво та стильно, нам необхідно попрацювати з 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" >Спливне вікно, яке оформляється в даний момент

Підсумок

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