Навчання CSS
Починаємо роботу з HTML + CSS

Цей короткий посібник призначений для людей, які починають своє вивчення CSS вперше.

Наприкінці цієї статті Ви створите HTML файл, який виглядатиме як цей:

Отримана HTML сторінка з квітами та розміткою, зробленою за допомогою CSS.

Зверніть увагу, що я не претендую на те, що це дуже красиво ☺

Розділи позначені цим знаком необов'язкові. Вони містять додаткові пояснення HTML та CSS коду у наведених прикладах. Знак “увага!” на початку абзацу позначає більш розширену інформацію, ніж решта тексту.

КРОК 1: написання HTML коду

Для цієї статті я пропоную використовувати найпростіші утиліти, наприклад Блокнот від Windows, TextEdit на Mac або KEdit під KDE, цілком підійдуть під завдання. Як тільки Ви зрозумієте основні принципи, ви можете перейти на використання більш розвинених інструментів розробки, наприклад, на такі комерційні програми як Style Master або DreamWeaver. Але для створення першого CSS файлу не варто відволікатися на багато розширених можливостей.

Не використовуйте текстовий редактор як Microsoft Word або OpenOffice. Ці програми зазвичай створюють файли, які можуть бути прочитані браузерами. Для HTML та CSS файлів нам потрібні звичайні текстові файли без будь-якого формату.

Перший крок полягає у відкритті порожнього вікна текстового редактора (Notepad, TextEdit, KEdit або будь-якого Вашого коханого) та набору в ньому наступного тексту:

Вам не обов'язково це перенабирати - ви можете просто скопіювати та вставити текст із цієї сторінки в редактор.

(Якщо ви використовуєте TextEdit на Макінтоші, не забудьте вказати TextEdit'у, що це справді простий текстовий файл, відкривши меню Format і вибравши опцію “Make plain text”.)

Перший рядок нашого HTML файлу говорить браузеру про тип документа (DOCTYPE означає DOCument TYPE). У нашому випадку це HTML версії 4.01.

Слова між < і > називаються тегами і як ви можете бачити, документ міститься між і тегами. між and знаходиться різна інформація, яка не відображається у самому документі. Наприклад, там міститься заголовок документа. Пізніше ми додамо туди і зв'язок із файлом CSS.

Тег є місцем вмісту документа. В принципі, все що знаходиться всередині цього тега за винятком тексту між , що є коментарями, буде виведено на екран. Коментар браузером ігнорується.

у прикладі задає відображення “невпорядкованого списку” (Unordered List), тобто. список, елементи якого непронумеровані. Теги починають "елементи списку" (List Item). Тег

є "параграфом". А тег - "якір" (Anchor), за допомогою якого створюються гіперпосилання.

Код HTML редактор KEdit.

• Тег "ul" - список, що складається з одного посилання на кожен елемент списку. Ця структура послужить нам "навігацією" по нашому сайту, пов'язуючи з нами інші сторінки нашого гіпотетичного сайту. Передбачається, що всі сторінки нашого сайту матимуть схоже чи ідентичне меню.
• Елементи “h1” та “p” задають вміст унікальний для кожної сторінки, тоді як підпис (“address”) знизу знову повторюватиметься на всіх сторінках.

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

Виберіть “Зберегти як…” або “Save As…” з меню Файл або File, вкажіть каталог для збереження файлу (наприклад Робочий Стіл) і збережіть цей файл як “mypage.html”. Не закривайте редактор, він нам ще буде потрібний.

(Якщо ви використовуєте TextEdit для Mac OS X версії менше 10.4, ви побачите опцію "Don't append the .txt extension" у діалоговому вікні "Save as". Виберіть цю опцію, тому що ім'я файлу “mypage.html” вже включає розширення. Більш нові версії TextEdit помітять .html розширення автоматично.)

Далі відкрийте файл у браузері. Ви можете зробити це таким чином: знайдіть файл вашим файловим менеджером (Провідник, Windows Explorer, Finder or Konqueror) і клацніть (одноразово або двічі) на ньому. Якщо ви робили все, як описано то ім'я файлу буде “mypage.html”. У вас має відкритися файл у браузері, встановленому за замовчуванням. (Якщо ні, то відкрийте браузер і перетягніть файл у вікно.)

Як Ви бачите, сторінка виглядає досить нудно.

КРОК 2: змінюємо кольори

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

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

Нам потрібно додати елемент до HTML-файлу. Визначення стилів буде всередині цього тегу. Повертаємося до редактора і додаємо наступні п'ять рядків у заголовок HTML коду між тегами і . Рядки, які треба додати виділені червоним (з 5 по 9).

 body
 [і т.д.]

Перший рядок говорить браузеру про те, що це таблиця стилів і що вона написана на CSS (text/css). Другий рядок каже, що ми використовуємо стиль до елемента “body”. Третя встановлює колір тексту в пурпуровий, а наступна встановлює колір тла жовто-зелений відтінок.

1. селектор (У нашому прикладі: “body”), які говорить про те, до якої частини документа застосувати правило;
2. властивість (у нашому прикладі властивостями є 'color' і 'background-color'), яке вказує що саме ми встановлюємо цей елемент, обраного селектором;
3. і значення ('purple' та '#d8da3d'), яке встановлює значення атрибуту.

Наш приклад показує, що правила можуть бути скомбіновані. Ми встановили дві властивості, так само ми могли задати їх окремо:

Фон елемент body так само є тлом цілого документа. Ми явно не призначили іншим елементам (p, li, address…) фону, тому за замовчуванням у них його немає (або він прозорий). Властивість 'color' встановлює колір тексту елемента body, але решта елементів усередині body успадковують цей колір, доки їм не заданий інший як іншого правила. (Ми додамо інші кольори пізніше.)

Тепер збережіть цей файл (використовуйте команду “Зберегти” або “Save” з файлового меню) та перейдіть назад у браузер. Якщо ви натиснете кнопку “оновити” , то зображення зміниться зі “нудної” сторінки на прикрашену (але все одно однакову) сторінку. Окрім посилань зверху, весь текст має бути пурпурний на жовто-зеленому тлі.

Тепер браузер показує сторінку, до якої ми додали колір.

У CSS можна задавати кольори кількома способами.Наш приклад показує два з них: на ім'я (“purple”) та за шістнадцятковим кодом (“#d8da3d”). Існує близько 140 імен кольорів та 16 шістнадцятирічних значень. Додаючи дотик стилю, пояснює деталі щодо цих кодів.

КРОК 3: змінюємо шрифти

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

У текстовому редакторі додайте наступні рядки (рядки 7-8 та 11-13):

 [і т.д.]

Якщо ви збережете файл знову і натиснете "оновити" у браузері, то у вас мають бути різні шрифти в заголовках та тексті.

Сьогодні шрифт заголовків і основного тексту відрізняється.

КРОК 4: додаємо навігацію

Список нагорі HTML сторінки є навігацією по сайту. Багато сайтів мають навігаційне меню вгорі сторінки або по сторонах від вмісту. Наша сторінка також не буде винятком. Ми помістимо меню зліва, бо це дещо привабливіше, ніж нагорі.

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

Нам потрібно перемістити список ліворуч і зрушити решту вмісту трохи вправо, щоб створити простір для нього. Властивості CSS які ми використовуватимемо для цього - 'padding-left' (для зсуву тексту) і 'position', 'left' і 'top' (для зсуву меню).

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

У вікні редактора додайте наступні рядки до HTML файлу (рядки 7 та 12-16):

 body <  padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d >  ul.navbar h1 [і т.д.]

Якщо ви знову збережете файл і оновите його в браузері, то список посилань вийде у вас зліва від основного тексту. Це вже виглядає цікавіше, чи не так?

На відміну від попереднього файлу, в цьому головний текст перемістився праворуч, а навігація ліворуч.

Властивість 'position: absolute' говорить, що елемент ul розташований незалежно від будь-якого тексту який передував або буде наступним за цим елементом, а властивості 'left' і 'top' позначають це розташування. У нашому випадку це 2em зверху та 1em від лівого краю вікна.

'2em' позначає 2 рази за відстанню, що дорівнює розміру поточного шрифту. Тобто, якщо меню відображається шрифтом у 12 пунктів, то 2em дорівнюватиме 24 пунктам. `em` дуже корисна одиниця вимірювання CSS, оскільки може адаптуватися автоматично до шрифту, що використовується браузером. Більшість браузерів мають можливість змінювати розміри шрифту: ви можете спробувати збільшити або зменшити розмір і побачити, що меню змінюватиметься в залежності від розміру шрифту, чого б не сталося, якби ми вказали відступ у пікселях

КРОК 5: прикрашаємо посилання

Навігаційне меню все ще виглядає як список замість меню. Давайте його стилізуємо. Ми приберемо маркери списків та перемістимо елементи ліворуч, де були маркери. Також ми намалюємо кожен елемент списку на білому тлі у своєму чорному квадраті (навіщо? просто так, тому що можемо).

Ми так само не сказали якими повинні бути кольори посилань, так що давайте додамо і цю властивість: синіми будуть посилання, які користувач ще не дивився, пурпуровими - ті які він вже відвідував. (рядки 13-15 та 23-33) :

 [etc.]

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

КРОК 6: додаємо горизонтальні лінії

Останнім додаванням до нашої таблиці стилів стане горизонтальна смуга для розділення тексту та підпису знизу. Ми використовуємо властивість 'border-top' для того, щоб додати переривчасту лінію над елементом (рядки 34-37) :

 [і т.д.]

Тепер наше оформлення закінчено. Давайте винесемо таблицю стилів в окремий файл, щоб інші файли могли використовувати ту саму таблицю стилів, що й перший файл.

КРОК 7: зовнішній CSS

Зараз у нас є HTML файл із вбудованою таблицею стилів. Але якщо наш сайт буде розростатися, можливо, нам знадобиться безліч сторінок, які використовують один і той самий стиль оформлення. Є кращий метод, ніж вставка таблиці в кожну сторінку - ми можемо винести стилі в окремий файл, на який будуть вказувати всі сторінки.

Для створення окремого файлу таблиці стилів нам потрібний інший пустий текстовий документ. Ви можете вибрати пункт "Новий" з меню "Файл" у редакторі для створення порожнього файлу. (Якщо ви використовуєте TextEdit, не забудьте зробити його текстовим знову, використовуючи меню Format.)

Потім виріжте та вставте весь вміст усередині . Вони належать HTML-коду, а не CSS. У новому вікні у вас тепер має бути повна таблиця стилів:

Виберіть "Зберегти як…" з меню "Файл", переконайтеся, що ви в тій же директорії/папці, що і файл mypage.html, і збережіть таблицю стилів під ім'ям "mystyle.css".

Тепер поверніться до HTML-коду. Заберіть весь вміст від включно та замініть прибране елементом як показано (рядок 5) :

 [etc.]

Така конструкція скаже браузеру у тому, що таблиця стилі розташовується у файлі під назвою “mystyle.css”, і оскільки директорія не згадана, браузер шукатиме цей файл там, де лижить HTML файл.

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

Наступний крок - покласти обидва файли mypage.html та mystyle.css на ваш сайт. (Звичайно, ви можете захотіти трохи змінити їх спочатку…) Як покласти файли на сайт залежить від вашого інтернет-провайдера.

Подальше вивчення

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

Мови

Activities Tech. reports Site index Translations Software Search Nearby: Style CSS

Основи CSS

CSS (Cascading Style Sheets) — це код, який ви використовуєте для стилізації веб-сторінки. Основи CSS допоможуть вам зрозуміти, що потрібно для початку роботи. Ми відповімо на такі питання як: Як зробити мій текст чорним чи червоним? Як зробити так, щоб контент з'являвся на певному місці на екрані? Як прикрасити мою веб-сторінку за допомогою фонових зображень та кольорів?

Так що таке CSS?

Як і HTML, CSS насправді є мовою програмування. Це не мова розмітки – це мова таблиці стилів. Це означає, що він дозволяє застосовувати стилі вибірково до елементів у документах HTML. Наприклад, щоб вибрати все елементи абзацу на сторінці HTML і змінити текст всередині них з чорного на червоний, ви повинні написати цей CSS:

Давайте спробуємо: вставте ці три рядки CSS в новий файл у текстовий редактор, а потім збережіть файл як style.css у вашій папці styles .

Але нам все одно потрібно застосувати CSS до нашого HTML документа. В іншому випадку CSS стиль не вплине на те, як ваш браузер відобразить HTML документ. (Якщо ви не стежили за нашим проектом, прочитайте розділ Робота з файлами та Основи HTML, щоб дізнатися, що вам потрібно зробити в першу чергу.)

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

Якщо текст вашого абзацу тепер червоний, прийміть наші вітання! Ви написали свій перший успішний CSS!

Анатомія набору правил CSS

Давайте поглянемо на вищезгаданий CSS трохи докладніше:

Уся структура називається набором правил (Але найчастіше для стислості "правило"). Зазначимо також імена окремих частин:

Ім'я HTML-елемента на початку набору правил.Він вибирає елемент(и) для застосування стилю (в даному випадку елементи p ). Для стилізації іншого елемента просто змініть селектор.

Єдине правило, наприклад, color: red; вказує, які з властивостей елемент ви хочете стилізувати.

Способи, якими можна стилізувати певний HTML-елемент (у разі, color є властивістю для елементів ). У CSS ви вибираєте, які властивості ви хочете торкнутися у вашому правилі.

Праворуч від властивості, після двокрапки, у нас є значення властивості, яке вибирає одне з безлічі можливих ознак даної властивості (існує безліч значень color , крім red ).

Зверніть увагу на важливі частини синтаксису:

• Кожен набір правил (крім селектора) повинен бути обернутий у фігурні дужки (<>).
• У кожному оголошенні необхідно використовувати двокрапку ( : ), щоб відокремити властивість від його значень.
• У кожному наборі правил ви повинні використовувати точку з комою ( ; ), щоб відокремити кожне оголошення від наступного.

Таким чином, щоб змінити кілька значень властивостей відразу, вам просто потрібно написати їх, розділяючи крапкою з комою, наприклад:

Вибір кількох елементів

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

Різні типи селекторів

Існує багато різних типів селектора. Вище ми розглядали лише селектор елементів, який вибирає всі елементи певного типу HTML документі. Але ми можемо зробити вибір конкретнішим. Ось деякі з найпоширеніших типів селекторів:

Ім'я селектора	Що вибирає	приклад
Селектор елемента (іноді званий селектором тега або типу)	Усі HTML-елементи зазначеного типу.	p Вибирає
ID селектор	Елемент на сторінці із зазначеним ID на даній HTML. Найкраще використовувати один елемент для кожного ID (і звичайно один ID для кожного елемента), навіть якщо вам дозволено використовувати один і той самий ID для кількох елементів.	#my-id Вибирає або
Селектор класу	Елемент(и) на сторінці із зазначеним класом (безліч екземплярів класу може оголошуватися на сторінці).	.my-class Вибирає та
Селектор атрибуту	Елемент(и) на сторінці із зазначеним атрибутом.	img[src] Вибирає але не
Селектор псевдокласу	Зазначені елементи, але тільки у випадку певного стану, наприклад, при наведенні курсору.	a:hover Вибирає , але тільки тоді, коли вказівник миші наведено на посилання.

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

Шрифти та текст

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

Перш за все, поверніться і знайдіть висновок з Google Fonts, який ви десь зберегли. Додайте елемент десь усередині шапки вашого index.html (знов, у будь-якому місці між тегами і ). Це буде виглядати приблизно так:

Примітка: Все в CSS документі між /* і */ є CSS коментарем, який браузер ігнорує під час виконання коду. Це місце, де ви можете написати корисні нотатки про те, що ви робите.

Ви можете налаштувати значення px так, як вам подобається, щоб ваш дизайн виглядав так, як ви хочете, але, загалом, ваш дизайн має виглядати так:

Блоки, блоки та ще раз блоки

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

Не дивно, макет CSS заснований головним чином на блокової моделі (box model). Кожен із блоків, що займає простір на вашій сторінці, має такі властивості, як:

• padding , простір лише навколо контенту (наприклад, навколо абзацу тексту)
• border , суцільна лінія, яка розташована поряд з padding
• margin , простір навколо зовнішньої сторони елемента

У цьому розділі ми також використовуємо:

• width (ширину елемента)
• background-color , колір позаду контенту та padding елементів
• color , колір контенту елемента (зазвичай тексту)
• text-shadow : встановлює тінь на тексті всередині елемента
• display : встановлює режим відображення елемента (доки не хвилюйтеся про це)

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

Зміна кольору сторінки

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

Розбираємось із тілом

• width: 600px; - Примушує тіло бути завжди 600 пікселів завширшки.
• margin: 0 auto; — коли ви встановлюєте два значення таких властивостей як margin чи padding , перше значення елемента впливає верхню і нижню сторону (робить їх 0 у даному випадку), і друге значення на ліву і праву сторону (тут, auto є особливим значенням, яке поділяє доступний простір по горизонталі порівну зліва та справа). Ви також можете використовувати один, три чи чотири значення, як описано тут.
• background-color: #FF9500; — як і раніше, встановлює колір елемента фону. Я використовував червонувато-оранжевий для тіла, на відміну від темно-синього кольору для елемента, але не соромтеся та експериментуйте.
• padding: 0 20px 20px 20px; — Ми маємо чотири значення, встановлені для padding, щоб зробити трохи простору навколо нашого контенту. На цей раз ми не встановлюємо padding на верхній частині тіла, але робимо 20 пікселів зліва, знизу та праворуч. Значення встановлюються зверху, праворуч, знизу, ліворуч, у такому порядку.
• Border: 5px solid black; - Просто встановлює суцільну чорну рамку шириною 5 пікселів з усіх боків тіла.

Позиціювання та стилізація нашого заголовка головної сторінки

Потім ми встановили заголовок верхній та нижній padding на 20 пікселів, і зробили текст заголовка того ж кольору, як і колір фону html.

Тут ми використовували одну досить цікаву властивість - це text-shadow, яке застосовує тінь до текстового контенту елемента. Воно має такі чотири значення:

• Перше значення пікселів задає горизонтальне зміщення тіні від тексту - як далеко вона рухається поперек: негативне значення має рухати її вліво.
• Друге значення пікселів задає вертикальне зміщення тіні від тексту - як далеко вона рухається вниз, у цьому прикладі: негативне значення має перемістити її вгору.
• Третє значення пікселів задає радіус розмиття тіні - більше значення означатиме більш розмиту тінь.
• Четверте значення задає основний колір тіні.

І знову спробуйте поекспериментувати з різними значеннями, щоби подивитися, що ви можете придумати.

Центрування зображення

Примітка: Наведені вище інструкції припускають, що ви використовуєте зображення меншої ширини, ніж задана (600px). Якщо ваше зображення більше, тоді воно вийде за межі та займе простір сторінки. Щоб виправити це, ви можете: 1) зменшити ширину зображення за допомогою графічного редактора, або 2) змінити розмір зображення за допомогою CSS шляхом встановлення властивості width для менше, ніж у .

Примітка: Не варто турбуватися, якщо ви ще не розумієте display: block; та відмінності між блоковим/рядковим. Ви зрозумієте, коли вивчатимете CSS докладніше. Ви можете дізнатися більше про різні доступні значення display на нашій сторінці про властивість display.

Висновок

Якщо ви дотримуєтеся всіх інструкцій у цій статті, ви повинні отримати сторінку, яка виглядає приблизно так (ви також можете подивитися нашу версію тут):

Якщо ви застрягли, ви можете порівняти свою роботу з нашим готовим прикладом коду на Github.

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

Початок роботи з CSS

У цій статті ми візьмемо простий документ HTML і застосуємо до нього CSS, вивчаючи деякі практичні речі про мову.

Почнемо з HTML

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

Примітка: Якщо ви читаєте це на пристрої або в середовищі, де ви не можете легко створювати файли, не турбуйтеся нижче представлені редактори коду, щоб ви могли написати код прямо тут, на сторінці.

Додавання CSS до нашого документа

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

Створіть файл у тій самій папці, що й HTML документ, і збережіть його як styles.css . Розширення .css показує, що це файл CSS.

Щоб зв'язати styles.css з index.html, додайте наступний рядок десь усередині HTML документа:

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

Ви можете продовжити роботу в styles.css локально, або ви можете використовувати наш інтерактивний редактор нижче, щоб продовжити цей урок. Інтерактивний редактор діє так, якби CSS на першій панелі був пов'язаний з документом HTML, як це було в нашому документі вище.

Стилізація HTML-елементів

Роблячи наш заголовок червоним, ми вже продемонстрували, що можемо націлювати та стилізувати елемент HTML. Ми робимо це шляхом націлювання на елемент selector — це селектор, який відповідає імені елемента HTML. Щоб націлюватися на всі абзаци в документі, потрібно використовувати селектор p . Щоб зробити всі абзаци зеленими, ви повинні використовувати:

Ви можете вибрати кілька селекторів одночасно, розділивши їх комами. Якщо я хочу, щоб усі параграфи та всі елементи списку були зеленими, моє правило виглядає так:

Спробуйте це в інтерактивному редакторі нижче (відредагуйте поля коду) або у локальному документі CSS.

Зміна поведінки елементів за промовчанням

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

- Невпорядкований список. Він додає маркери, і якщо я вирішу, що я не хочу ці маркери, я можу видалити їх так:

Спробуйте додати це до свого CSS зараз.

Властивість list-style-type – це гарна властивість, інформацію про яку можна знайти на MDN, щоб побачити, які значення підтримуються. Погляньте на сторінку list-style-type і ви знайдете інтерактивний приклад у верхній частині сторінки, щоб випробувати деякі інші значення, потім всі допустимі значення будуть докладно описані нижче.

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

Додавання класу

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

У HTML-документі додайте Атрибут class до другого пункту списку. Ваш список тепер виглядатиме так:

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

Збережіть та оновіть, щоб побачити результат.

Ви можете захотіти, щоб абзац також був помаранчевим і жирним. Спробуйте додати клас "special", потім перезавантажте сторінку і подивіться, що вийде.

Іноді ви побачите правила з селектором, який перераховує селектор HTML-елемента разом із класом:

Цей синтаксис означає "призначатися для будь-якого елемента li, який має клас special".Якби ви зробили це, ви більше не змогли б застосувати клас до або іншого елемента, просто додавши до нього клас;

li.special, span.special

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

Стилізація елементів на основі їх розташування у документі

Додайте наступне правило до таблиці стилів.

Ще можна спробувати стилізувати абзац, коли він іде відразу після заголовка на тому ж рівні ієрархії в HTML.сусідній братський комбінатор) між селекторами.

Спробуйте також додати це правило до таблиці стилів:

Приклад нижче містить два правила вище. Спробуйте додати правило, щоб зробити елемент span червоний, якщо він всередині абзацу Ви дізнаєтеся, чи правильно ви це зробили, так як проміжок в першому абзаці буде червоним, але колір в першому елементі списку не змінить. колір.

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

Стилізація елементів на основі стану

Ви можете змінити зовнішній вигляд посилання, коли користувач наводить на неї курсор, наприклад, видаливши підкреслення, що досягається за допомогою наступного правила:

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

Ми видалимо підкреслення на нашому посиланні при наведенні курсору. Ви можете видалити підкреслення зі всіх станів посилання. Однак, варто пам'ятати, що на реальному сайті ви хочете, щоб відвідувачі знали, що посилання є посиланням. Залишивши на місці підкреслення, люди можуть зрозуміти, що на якийсь текст всередині абзацу можна натискати — до такої поведінки вони звикли. Як і все в CSS, існує можливість зробити документ менш доступним із вашими змінами - ми постараємося виділити потенційні підводні камені у відповідних місцях.

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

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

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

Поєднання селекторів та комбінаторів

Варто відзначити, що ви можете комбінувати кілька селекторів та комбінаторів разом. Ось приклад:

, що йде відразу після */ h1 + ul + p

Ви також можете поєднати кілька типів разом. Спробуйте додати наступне у ваш код:

Це буде стиль будь-якого елемента з класом special, який знаходиться всередині

, що приходить відразу після , що знаходиться всередині . Уф!

В оригінальному HTML, який ми надали, єдиний елемент у стилі .

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

Завершення

У цьому уроці ми розглянули кілька способів стилізації документа за допомогою CSS. Ми розвиватимемо ці знання в міру проходження інших уроків. Однак ви вже знаєте достатньо, щоб стилізувати текст, застосовувати CSS на основі різних способів націлювання на елементи в документі та шукати властивості та значення документації MDN.

На наступному уроці ми розглянемо структуру CSS.