Знайомство з CSS

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

Перше що важливо знати, як саме відображаються стилі. Зокрема, ми повинні знати, як працюють різні типи селекторів та як порядок цих селекторів може вплинути на відображення стилів. Ми також хочемо розуміти кілька основних значень властивостей, які постійно з'являються в CSS, зокрема ті, що стосуються кольору і розміру.>Каскад

Ми почнемо розбирати, як саме відображаються стилі з погляду на те, що відомо як каскад та вивчення кількох прикладів каскаду в дії. У CSS всі стилі йдуть каскадом зверху вниз, що дозволяє додавати інший стиль або переписувати його, тим самим таблиці стилів розвиваються. Скажімо, наприклад, що ми вибрали всі елементи абзацу у верхній частині нашого стилю і встановили для їх колір фону orange і шрифт розміром 24 пікселі. Потім у нижній частині нашого стилю ми знову вибираємо всі елементи абзацу та встановлюємо для них колір фону green, як показано тут.

p { background: orange; font-size: 24px; } 
p { background: green; }

Оскільки селектор абзацу, який встановлює зелений колір фону, розташовується після селектора абзацу, який ставить помаранчевий колір фону, він матиме пріоритет у каскаді. Усі абзаци з'являться на зеленому тлі. Розмір шрифту залишиться 24 пікселями, тому що другий селектор абзацу не визначив новий розмір шрифту.

Каскадні властивості

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

p { background: orange; background: green; }

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

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

Обчислення специфічності

Кожен селектор у CSS має вагу специфічності, він разом із положенням у каскаді визначає, як відображатимуться стилі.

В уроці 1 "Створення першої веб-сторінки" ми говорили про три різні види селекторів: селектор типу, клас та ідентифікатор. Кожен із цих селекторів має різну вагу специфічності.

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

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

HTML

<code data-language="html"><p id="food">...</p>

CSS

#food { background: green; } 
p { background: orange; }

Тут у нас є елемент абзацу зі значенням атрибуту id — food. У CSS цей абзац вибирається двома різними типами селекторів: один селектор типу, а другий ідентифікатор. Незважаючи на те, що селектор типу вказано після ідентифікатора в каскаді, ідентифікатор має пріоритет над селектором типу, тому що він має більшу вагу специфічності, тому абзац з'явиться на зеленому тлі.

Специфічність ваги різних типів селекторів неймовірно важливо пам'ятати. Іноді стилі не можуть з'явитися на елементах, як передбачалося, ймовірно через те, що специфічність ваги наших селекторів порушила каскад, тому наші стилі не відображаються належним чином. ми продовжуватимемо висвітлювати цю тему. А зараз давайте подивимося на те, як стати трохи конкретнішими та обґрунтованішими з нашими селекторами, шляхом їх комбінації. Майте на увазі, що при комбінації селекторів ми також змінюємо їх специфічність. селектори разом. Комбінуючи селектори, ми можемо бути більш конкретними в тому, який елемент або групу елементів ми хотіли б вибрати.="class">hotdog і встановити для них колір фону як brown. Однак, якщо один із цих абзаців, випадково, містить значення атрибута класу mustard, ми хочемо встановити його колір фону як yellow. Наші HTML і CSS можуть виглядати так:

HTML

<code data-language="html"><div class="hotdog"> <p>...</p> <p>...</p> <p class="mustard">...</p>
</div>

CSS

.hotdog p { background: brown; } 
.hotdog p.mustard { background: yellow; }

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

Перший комбінований селектор вище, .hotdog р, включає два селектори: клас і селектор типу. Ці два селектори поділяються пробілом. Ключовим селектором є селектор типу, націлений на елементи абзацу. Оскільки цей селектор поєднується з класом hotdog, повний комбінований селектор вибирає лише елементи абзацу, які знаходяться всередині елемента з класом hotdog.

Другий селектор вище, .hotdog p.mustard, включає три селектори: два класи і один селектор типу. Єдина різниця між другим і першим селекторами є додавання класу mustard в кінці селектора абзацу. Оскільки новий клас mustard знаходиться в правій частині комбінованого селектора, то він є ключовим, а всі окремі селектори, що йдуть перед ним, тепер уточнюють.

Читаючи комбінований селектор справа наліво — він націлений на абзаци з значенням атрибута класу mustard, який розташовується всередині елемента зі значенням атрибута класу hotdog.

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

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

Другий селектор , .hotdog p.mustard, містить два селектори класу та один селектор типу. Комбінований селектор матиме бали 0-2-1. 0 у першій колонці показує нульове число ідентифікаторів, 2 у другій колонці — два селектори класу, а 1 в останній колонці — один селектор типу. Порівнюючи два селектори, у другого селектора з двома класами помітно більш високе значення ваги специфічності та балів. Як такий, він матиме пріоритет у каскаді. Якби ми перевернули порядок цих селекторів у нашій таблиці стилів, помістивши більш "важкий" селектор вище "легкого" селектора, як показано тут, виведення їх стилів не буде порушено через специфічність ваги кожного селектора.

.hotdog p.mustard { background: yellow; } 
.hotdog p { background: brown; }

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

Давайте поглянемо на кнопки, наприклад. Скажімо, ми хочемо, щоб у всіх наших кнопок був розмір шрифту 16 пикселів, але щоб колір фону кнопок міг варіюватися в залежності від того, де кнопки застосовуються. Ми можемо створити кілька класів і розподілити їх за елементами, залежно від застосування бажаних стилів.

HTML

<code data-language="html"><a class="btn btn-danger">...</a> <a class="btn btn-success">...</a>

CSS

.btn { font-size: 16px; } 
.btn-danger { background: red; } 
.btn-success { background: green; }

Тут ви можете побачити два елементи посилань з кількома значеннями атрибутів класу. Перший клас, btn, використовується для визначення розміру шрифту 16 пікселів кожному з елементів. Потім перший елемент посилання використовує додатковий клас btn-danger, щоб застосувати червоний колір фону, а другий елемент посилання використовує додатковий клас btn-success, щоб використовувати зелений колір фону. Наші стилі чисті та модульні.

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

Кольори

Всі колірні значення CSS визначаються як колірний простір sRGB (або стандартний червоний, зелений і синій). Кольори в межах цього простору утворюються шляхом змішування разом червоного, зеленого та синього кольорів, відображаючи спосіб, яким телевізори та монітори генерують всі різні кольори, які вони показують. При змішуванні різних рівнів червоного, зеленого та синього ми можемо створити мільйони кольорів та виявити майже будь-який бажаний колір. HSL.

Ключові кольори

Значення ключового слова — це назви (такі як red, green або blue), які відображаються цим кольором. Назви ключових слів та відповідні кольори визначається специфікацією CSS. Найбільш поширені кольори, поряд з декількома дивностями, пов'язані з ключовою назвою.

Повний список цих назв можна знайти у Спеціфікація CSS.

td>

Колір	Назва	Шестн.	RGB	HSL
	black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
	silver	# c0c0c0	rgb(192, 192, 192)	hsl(0, 0%, 75%)
	gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)
	white	#ffffff	rgb(255, 255, 255)	hsl(0, 100%, 100%)
	maroon	#800000	rgb(128, 0, 0)	hsl(0, 100%, 25%)
	red	#ff0000	rgb(255, 0 , 0)	hsl(0, 100%, 50%)
	purple	#800080	rgb(128, 0, 128)	hsl(300, 100 %, 25%)
	fuchsia	#ff00ff	rgb(255, 0, 255)	hsl(300, 100%, 50%)
	green	#008000	rgb(0, 128, 0)	hsl(120, 100%, 25%)
	olive	#808000	rgb(128, 128, 0)	hsl(120, 100%, 50%)
	lime	#00ff00	rgb(0, 255, 0)	hsl(60, 100%, 25%)
	yellow	#ffff00	rgb(255, 255, 0)	hsl(60, 100%, 50%)
	navy	#000080	rgb(0, 0, 128)	hsl(240, 100% , 25%)
	blue	#0000ff	rgb(0, 0, 255)	hsl(240, 100%, 50%)
	teal	#008080	rgb (0, 128, 128)	hsl(180, 100%, 25%)
	aqua	#00ffff	rgb(0, 255, 255)	hsl (180, 100%, 50%)

Тут ми застосовуємо фон maroon до будь-якого елемента з класом task та фон yellow до будь-якого елемента ту з класом count.

.task { background: maroon; } 
.count { background: yellow; }

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

Шістнадцяткові кольори

Шістнадцяткові значення кольору починаються з ґрат (#), потім йде три або шість символів. Використовуються цифри від 0 до 9 та літери від А до F, у верхньому або нижньому регістрі. Ці значення відображають червоний, зелений і синій колірні канали.

У шестисимвольному записі перші два символи представляють червоний канал, третій і четвертий символи представляють зелений канал, а останні дві цифри представляють синій канал. У трьохсимвольному записі перший символ представляє червоний канал, другий символ представляє зелений канал, а останній символ представляє синій канал. запис може бути скорочено до трьох символів. Для цього символи, що повторюються, з кожної пари повинні використовуватися тільки один раз. Наприклад, відтінок оранжевого представлений шістнадцятковим кольором #ff6600, який також може бути записаний як #f60.

.png" alt="Шестисимвольне значення можна записати у вигляді трьох символів, коли кожен червоний, зелений і синій колірні канали містять символ, що повторюється">

Мал. 3.01. Шестисимвольне значення можна записати у вигляді трьох символів, коли кожен червоний, зелений і синій колірні канали містять символ, що повторюється

Пари символів виходять шляхом перетворення чисел від 0 до 255 в шістнадцятковий формат. Математика тут трохи складна і гідна окремої книги, але корисно знати, що 0 дорівнює чорному, а F дорівнює білому. шістнадцяткових кольорів, понад 16,7 млн, якщо бути точним. Як…

Є 16 варіантів кожного символу в шістнадцятковому кольорі, від 0 до 9 і від A до F. Групуючи символи парами ми отримаємо 256 варіантів кольору (16×16 або 16²). З трьома групами по 256 варіантів у кожній у нас є загалом понад 16,7 млн кольорів (256×256×256 або 256³).

.task { background: #800000; } 
.count { background: #ff0; }

.task { background: rgb(128, 0, 0); } 
.count { background: rgb (255, 255, 0); }

 <code data-language="css">.task { background: rgba(128, 0, 0, .25); } 
.count { background: rgba (255, 255, 0, 1); }

.task { background: hsl(0, 100%, 25%); } 
.count { background: hsl(60, 100%, 50%); }

.task { background: hsla(0, 100 %, 25%, .25); } 
.count { background: hsla(60, 100%, 50%, 1); }

p { font-size: 14px; }

.col { width: 50%; }

.banner { font-size: 14px; width: 5em; }