Привіт, шановні читачі сайту remontcompa! Мене звати Роман нахватом і я представляю вашій увазі цикл статей з мови стилів CSS3. Абревіатура CSS сталася від англійського Cascading Style Sheets, що в перекладі означає каскадні таблиці стилів. Стилем або CSS називається деякий набір параметрів форматування, що застосовується до елементів HTML документа, щоб змінити їх зовнішній вигляд. Сам по собі HTML є лише стандартною мовою HTML документів і використовується для структурування вмісту HTML сторінки, тому мова HTML є лише першим етапом у процесі навчання створенню сайтів. Наступним кроком є ​​вивчення стилів або CSS, ніж ми з вами і займемося. Додати стилі на веб-сторінку можна кількома способами. Кожен спосіб відрізняється своїми можливостями і призначенням. У даній статті ми розглянемо три способи додавання стилів в HTML документ.

Просто про складне або вивчаємо CSS3. Частина 1. Поняття CSS. Способи підключення стилів CSS до HTML документу

Створимо стандартну структуру HTML документа, як показано нижче.

Між тегами і пропишемо заголовок HTML документа, наприклад "Способи підключення стилів CSS"

використовуючи теги

і

додамо на веб-сторінку заголовок з текстом "Що вдає із себе CSS"

Нижче заголовка, використовуючи теги

і

створимо невеликий абзац з текстом, як показано нижче

Збережемо даний документ на флеш-накопичувачі в папці CSS під ім'ям index з розширенням .html

Вказуємо ім'я index, тип файлу вибираємо html

отримуємо наступне.

Зайдемо в папку CSS, в якій знаходиться наш збережений html документ з ім'ям index. Відкриємо його в веб-браузері

Як бачимо, у вікні веб-браузера відобразилося вміст створеної нами веб-сторінки, а саме заголовок з текстом "Що вдає із себе CSS" і абзац, що починається зі слів "CSS - це мова стилів, який визначає ...."

За допомогою атрибута align (присвоївши йому значення center) виконаємо вирівнювання заголовка з текстом "Що вдає із себе CSS" по центру веб-сторінки

отримуємо наступне.

Змінимо колір тексту абзацу зі стандартного чорного на інший. скористаємося тегом

Існує безліч html квітів, наприклад для тексту абзацу на створеної нами сторінці виберемо колір DeepSkyBlue

Дамо атрибуту color тега значення DeepSkyBlue

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

Таким же чином змінимо колір тексту заголовка, наприклад на червоний колір.

отримуємо наступне

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

Після видалення тегів ... і атрибута align отримуємо первісний вигляд веб-сторінки

Якщо вище ми змінювали колір і розташування тексту заголовка і абзацу на веб-сторінці за допомогою html тегів, то тепер виконаємо все те ж саме, але використовуючи мову CSS. Як вже було сказано вище, в даній статті ми розглянемо три способи додавання стилів на веб-сторінку, а саме: Додавання на веб-сторінку внутрішніх стилів; Додавання на веб-сторінку глобальних стилів; Додавання на веб-сторінку пов'язаних стилів; Розглянемо додавання внутрішнього стилю на веб-сторінку Внутрішній стиль є розширенням для одиночного тега, який використовується на веб-сторінці. Для визначення стилю використовується атрибут style, а його значенням є деякий набір стильових правил. Змінимо колір тексту заголовка на веб-сторінці на червоний, а також вирівняємо його по центру, використовуючи внутрішній стиль. До тегу

додамо атрибут style, далі пропишемо стильові властивості, а саме: text-allign: center, color: red

отримуємо наступне.

У підсумку, відкривши файл index.html в веб-браузері бачимо, що текст заголовка на веб-сторінці має червоний колір і розташований по центру.

Таким же чином, використовуючи атрибут style, змінимо колір тексту абзацу зі стандартного чорного на колір deepskyblue

Перезавантажуємо сторінку index.html і бачимо зміна кольору тексту абзацу.

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

Між тегами і в фігурних дужках пропишемо стильові властивості для заголовка веб-сторінки (тег

), І для абзацу (тег

): H1 text-align: center; color: red - розміщуємо текст заголовка по центру веб-сторінки і змінюємо його колір на червоний p color: deepskyblue - змінюємо колір абзацу на deepskyblue

У підсумку отримуємо той же результат, що і при використанні внутрішніх стилів.

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

зберегти.

Створений файл стилів style з розширенням .css

Файл style.css залишимо поки порожнім.

Для зв'язування html документа (в нашому випадку це index.html) з файлом стилів style.css скористаємося тегом. Тег повинен розташовуватися всередині тегів ... Пропишемо між тегами і наступний рядок: де: rel = "stylesheet" - атрибут тега, який вказує веб-браузеру на те, що будуть підключатися стилі; атрибут href = "style.css" вказує шлях до файлу стилів style.css

При створенні файлів стилів потрібно дотримуватися певних правил, наведених нижче (цих же правил потрібно дотримуватися і при додаванні глобальних стилів) Одним з головних елементів файлу стилів є селектор. Селектор визначає, до якого елементу в html документі застосовувати ті чи інші стильові параметри. Як селектора виступають теги, класи і ідентифікатори. Після вказівки селектора йдуть фігурні дужки, в яких прописується стильова властивість, далі вказується його значення Наприклад, нижче на схемі в якості селектора вказано html тег h1, як стильової властивості вказано color :, далі записується значення стильової властивості

Так як ми хочемо розмістити текст заголовка (тег

) По центру веб-сторінки, і задати тексту червоний колір, а також текст абзацу (тег

) Відобразити в кольорі deepskyblue, в файлі стилів style.css прописуємо рядки: h1 text-align: center; color: red і p color: deepskyblue де: h1 text-align: center; color: red - вирівнюємо текст заголовка ( "Що вдає із себе CSS") по центру, і задаємо тексту червоний колір p color: deepskyblue - задаємо тексту абзацу ( "CSS - це мова стилів, який визначає ...") колір deepskyblue

В результаті підключення файлу style.css до html документу index.html бачимо, що текст заголовка на веб-сторінці розташований по центру і має червоний колір. Текст абзацу також змінив свій колір на deepskyblue

Продовження в статті: Просто про складне або вивчаємо CSS3. Частина 2. Типи селекторів CSS