Main menu

  2. Головна
  3. Уроки CSS
  4. Урок "Вступ у CSS"

Мітки

Базовий html-код

Кольори html

Цвета HTML https://colorscheme.ru/html-colors.html 

Google Fonts

Урок "Вступ у CSS"

Post on 19 грудня 2017
by Super User
in Уроки CSS

Кожна веб-сторінка в мережі Інтернет має свій особливий вигляд - стиль, дизайн. Цей особливий вигляд створюється завдяки CSS (читається "сі-ес-ес" або "ка-ес-ес").

CSS (Cascading Style Sheets) - це набір команд, які вказують, як мають виглядати абзаци, окремі слова і літери, малюнки, меню, фон та ін. Ці команди записуються за допомогою спеціальної мови розмітки і зберігаються у вигляді каскадних таблиць стилів. Отже, CSS (Cascading Style Sheets) - це каскадні таблиці стилів або CSS-стилі.

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

CSS стиль HTMLВнутрішні стилі

Внутрішні стилі вказуються всередині html-файлу у розділі <head></head>. При цьому використовують спеціальний парний тег <style></style>.

Приклад:

<style>

h1, 

h2 {

color: red;

font-family: "Times New Roman", Georgia, Serif;

line-height: 1.3em;

}

</style>

  

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

Вбудовані стилі вказуються в самому HTML-коді всередині того тегу, який описують. При цьому використовують атрибут style="властивості тега через ;"

Приклад:

<p style="font-weight: bold; color: red;">Виділяємо текст червоним кольором і напівжирними літерами.</p> 

 

Зовнішня таблиця стилів 

Зовнішня таблиця стилів - найпотужніший інструмент для CSS-стилю.

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

Щоб браузер зрозумів, де знаходиться файли з css-стилями, використовують непарний тег <link>, який записують у головній частині html-файлу між тегами <head></head>. 

Атрибути тегу <link>:

rel="stylesheet"  <!-- вказує, що ми зараз описуємо шлях до файлу зі стилями>

href="css/style.css" <!-- вказує шлях до файлу зі стилями (css/) і назву цього файлу (style.css)>  

Приклад:

<head>

<link rel="stylesheet" href="/css/style.css">

</head>  

 

Cелектори 

Усі частини html-сторінки (заголовки, абзаци, малюнки та ін.) описуються у таблиці стилів. Тільки записуються вони інакше: не як теги ( між знаками < та >), а як селектори. 

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

Як описується стиль для селектора?

Стиль селектора описується у блоці оголошень.

Блок оголошень - це команди форматування, які описують властивості  селекторів (колір, розмір, фон, прозорість та ін.). Блок оголошень записується після назви селектора між фігурними дужками "{" та "}".

селектор {блок оголошень} 

Властивість  (наприклад, колір - "червоний", розмір літер "14px")  записують так: спочатку назву властивості, потім пишуть двокрапку :, потім - значення властивості, в кінці - крапка з комою ; 

селектор 

{

  властивість1:значення властивості1;

  властивість2:значення властивості2;  /*блок оголошень*/

  властивість3:значення властивості3;

}

Наприклад:
p {
color: red;
font-family:Arial;
line-height:140%;
}
Результат:

Абзац червоного кольору, накреслення Arial, міжрядковий інтервал 120%


Селектори CSS бувають таких видів: 

1) селектори елементів - селектори, які описують зовнішній вигляд (форматування) УСІХ елементів html-сторінки ПЕВНОГО ТИПУ.
Cелектори елементів записуються як назва html-елемента без дужок "<" та ">". 
Наприклад,
якщо написати у таблиці стилів код 
h1 {color:red; font-family:"Comic Sans MS";}
це означатиме, що усі заголовки першого рівня h1 будуть відображені червоним кольором і накресленням Comic Sans MS

Заголовок h1


2) селектори класів - селектори елементів html-сторінки, які належать до певної групи (класу).
Іншими словами, автор сайту вирішує, що деякі частини веб-сторінки повинні мати якусь особливість. Тоді він їх виділяє:
    спочатку - створює клас у html-коді, а саме
          дописує для тега атрибут class з іменем класу:
                <p class="text">Текст</p>
    потім - описує його в таблиці стилів css, а саме
          пише назву класу з крапкою попереду:
                .text
 
Наприклад,
автор планує, що деякі заголовки h1 повинні бути якогось особливого вигляду, а саме - мати зелений колір.  
Тоді 
у html коді він пише:
<h1 class="main">Заголовок 1 зелений</h1>
у css-коді він пише:
або
h1.main {color:green;} - це означає, що усі заголовки h1, для яких буде вказано class="main", будуть зеленого кольору
або
.main {color:green;} - це означає, що будь-які елементи html-сторінки, для яких вказано class="main", будуть зеленого кольору
Результат:

Заголовок h1 зелений

Важливо!
Правила іменування класів:
а) імена класів повинні починатись з англійських букв
правильно: class="place"
не правильно: class="1place"
б) імена класів пишуться тільки англійськими літерами без "пробілів"
правильно: class="placeone"
не правильно: class="місце один"
в) якщо ім'я складне, то краще між частинами писати дефіс або підкреслення, а не великі літери
правильно: class="place-one" або class="place_one"
не правильно: class="placeOne"
г) автор сам вигадує імена, але краще, коли вони мають якесь зрозуміле значення - так легше розібратись у великому коді
правильно: class="main-menu"
не правильно: class="mm"

3) cелектори ідентифікаторів - селектори для ОДНОГО-ЄДИНОГО елемента html-сторінки, який більше ніде на сторінці не повторюється. 
Іншими словами, автор сайту вирішує, що ОДНА частина веб-сторінки повинна мати якусь особливість. Тоді він її виділяє:
    спочатку - створює ідентифікатор у html-коді, а саме
          дописує для тега атрибут id з іменем ідентифікатора: 
                <p id="text">Текст</p>
    потім - описує його в таблиці стилів css, а саме
          пише назву класу зі знаком "слештег" попереду ("слештег" - "решітка" #): 
                #text
 
Наприклад,
автор планує, що один заголовок h1 повинен бути якогось особливого вигляду, а саме - мати синій колір.  
Тоді 
у html коді він пише:
<h1 id="great">Заголовок 1 синій</h1>
у css-коді він пише:
#great {color:blue;} - це означає, що ОДИН-ЄДИНИЙ елемент html-сторінки, для якого вказано id="great", буде синього кольору
Результат:

Заголовок h1 синій

Правила іменування ідентифікаторів такі ж, як для класів.

4) селектори-нащадки - селектори елементів html-сторінки, які у коді сторінки записані всередині іншого html-елемента (батьківського). 

У css-коді робиться запис за таким правилом:
селектор батьківського елемента відділяється від селектора-нащадка за допомогою пробілу

Наприклад:
потрібно записати стиль для посилання, яке знаходиться всередині абзацу
варіанти css-коду 
        p a {color: green; text-decoration: none;} - означає: усі посилання, які знаходяться всередині абзацу, будуть зеленого кольору і без підкреслення
        p.main a {color: green; text-decoration: none;} - означає: усі посилання, які знаходяться всередині абзацу з класом main, будуть зеленого кольору і без підкреслення
        .main a {color: green; text-decoration: none;} - означає: усі посилання, які знаходяться всередині будь-яких елементів сторінки з класом main, будуть зеленого кольору і без підкреслення
        p .main a {color: green; text-decoration: none;} - означає: усі посилання, які знаходяться всередині будь-яких елементів сторінки з класом main, які знаходяться всередині абзацу, будуть зеленого кольору і без підкреслення

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

5) дочірні селектори - селектори елементів, які є ПЕРШИМИ потомками ("дочками") батьківського елементу.
У css-коді робиться запис за таким правилом:
селектор батьківського елемента відділяється від селектора-нащадка-дочки за допомогою знаку >

Наприклад:
потрібно записати стиль для дочірнього посилання, яке знаходиться всередині абзацу
css-код
        p > a {color: green; text-decoration: none;} - означає: лише ті посилання, які є дочірніми для абзацу, будуть зеленого кольору і без підкреслення
html-код
       <p>Який варіант обрати, вирішує <a href="#">автор.</a></p>


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

6) сестринські селектори - сусідні селектори одного рівня-нащадка
У css-коді робиться запис за такими правилами:
або 
     перший селектор-сусід відділяється від другого селектора-сусіда за допомогою знаку + 
            h1 + p {color:yellow;}
                  даний запис означає, що виділяють жовтим лише ті абзаци, які у html-коді йдуть першими за тегом h1
                          Наприклад, у html-коді
                                   <h1>Який варіант обрати, вирішує </h1><p>автор</p><p>та його друзі</p>
                          перший абзац буде жовтим, а другий - ні.
або 
     перший селектор-сусід відділяється від другого селектора-сусіда за допомогою знаку ~ 
            h2 ~ p{color:yellow;}
                  даний запис означає, що виділяють жовтим ті абзаци, які у html-коді є сестринськими до тегу h2
                          Наприклад, у html-коді
                                   <h2>Який варіант обрати, вирішує </h2><p>автор</p><p>та його друзі</p>
                          обидва посилання будуть жовтими.


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

Свіже