Як задати css стиль

Відео: Основи jаvascript 18 - Зміна стилів елемента

Існує чотири способи завдання CSS стилю для тегів HTML.

1) Inline-стиль.

2) впроваджений стиль

3) імпортований стиль.

4) Стиль з файлу.

І в цій статті ми розберемо всі чотири способи.

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

В даному випадку ми задали, щоб елемент "текст"Буде розміром в 150% і вирівнюються по центру. Це приклад inline-стилю.

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

Тут буде відбуватися наступне: для всіх елементів всередині тега буде зроблено наступне: їх колір буде червоним і відступ зверху буде 100 пікселів.

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

Тут до всієї сторінці будуть застосовуватися стилі з файлу "my.css".

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

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

Коли проявляється пріоритет? А виявляється він при виникненні конфліктних ситуацій, пов`язаних зі спробою одного й того ж елементу задати суперечливий стиль. Наприклад, через inline-стиль намагаємося зробити колір червоним, а через імпортований стиль намагаємося зробити колір цього елемента чорним. Щоб уникнути таких суперечливих ситуацій, необхідно розставити пріоритети: який спосіб з найвищим пріоритетом, а який, навпаки, з найнижчим. Пріоритети в порядку зростання наступні:

1) стиль з файлу.

2) імпортований стиль.

3) впроваджений стиль.

4) Inline-стиль.

Таким чином, inline-стиль має найбільший пріоритет. І, користуючись цим, можна зробити висновок, що в прикладі вище колір елемента буде червоним, а не чорним.

Які висновки можна зробити?

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

2) імпортований стиль треба використовувати, коли 2 і більше сторінок (але не всі) мають певні особливості в стилі.

3) впроваджений стиль треба використовувати для завдання унікальних CSS стилів для конкретної сторінки. Ці стилі унікальні для кожної сторінки сайту.

Відео: Параметри рамки - як задати товщину і стиль рамки контейнера (Основи HTML і CSS)

4) Inline-стиль треба використовувати, коли окремий елемент на окремій сторінці вимагає особливого виду.

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

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

. Перед Вам стоять такі завдання:

1) Розмір шрифту на всіх сторінках сайту повинен бути 15pt, а колір чорним.

2) На всіх сторінках, крім однієї, колір тексту усередині цього елемента повинен бути червоним.

Відео: CSS для початківців. CSS-стилі: селектор, блок, правило, значення і властивість в CSS

3) На кожній сторінці, відступи будуть різними.

4) В окремих випадках може бути змінений розмір і колір тексту.

Я, думаю, що тут все прозоро, але тим не менш, давайте поясню порядок дій:

1) В окремий файл винести стиль, де задається розмір і колір. Потім підключити даний стиль через тег .

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

3) На кожній сторінці всередині тега зробити різні відступи для тега

Відео: Уроки CSS. Способи підключення / вставки CSS коду і файлів в HTML-документ

.

4) У потрібних тегів

налаштувати належним чином розмір і колір тексту.

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

З повагою, Михайло Русаков!

P.S. Повний курс по HTML, CSS і по верстці сайтів: https://srs.myrusakov.ru/makeup