Більшість з вас повинні бути готові до HTML, подібної до тої, що я зробив в кінці мого керівництва по HTML для початківців. Лише рядок коду з посиланням на CSS-файл повинен бути доданий в ваш HTML-документ.
Код, представлений нижче, включає всі CSS-техніки, які були описані в цій секції керівництва. Ви можете зберегти його як CSS-стиль, поглянути, як працюють усі властивості в HTML-файлі і перевірити, як саме вони були застосовані в таблиці стилів. На мою думку, найкращий підхід до розуміння засобів CSS полягає в роботі з реальними файлами, коли ви бачите, що відбувається, якщо змінити ті чи інші речі.
Продовження →
Властивість Z-index описує рівень стека подання елемента на сторінці щодо елементів, які залишилися в потоці. Його значенням є число. Разом зі збільшенням z-index елемента, близькість до користувача також збільшується.
Продовження →
Найбільший трюк в обробці HTML-елементів – це розуміння того, що немає нічого особливого в тому, як більшість із них працюють. У більшості випадків сторінки можуть бути створені за допомогою кількох тегів, до яких застосовано стиль відповідно до особистих переваг. Стандартне подання браузером більшості HTML-елементів включає стилі шрифту, відступи, поля і, головним чином, типи відображення (display).
Продовження →
Вбудовані стилі
Вбудовані стилі прикріплюються безпосередньо до HTML-тегів значенням атрибута style.
Вони нагадують наступний код:
<p style="color: red">text</p>
У результаті застосування цього стилю, параграф буде показаний червоного кольору.
Продовження →
Псевдоелементи прикріплюються до селекторам схожим чином, що і псевдокласи. Їх структура виглядає так: селектор:псевдоелемент {властивість: значення;} .
Буквиця і перша лінія
Псевдоелемент first-letter описує першу букву елемента, а first-line – перший рядок елемента. Наприклад, можна підготувати буквицю і перший рядок для абзацу завдяки цьому коду:
Продовження →
Кілька властивостей CSS можна записати у вигляді одного рядка значень, яка замінює необхідність вказувати цілий ряд властивостей. Ці властивості описуються значеннями, розділеними пробілами.
Наприклад, ви можете об’єднати margin, padding та border-width і записати margin-top-width, margin-right-width, margin-bottom-width і т.п. у вигляді властивість: top right bottom left;
Продовження →
Псевдокласи – це атрибути, які призначаються строго до селекторів з наміром визначити реакцію або стан для даного селектора. Вони володіють наступною структурою: selector: pseudo class {property: value;}, тобто вам лише треба помістити двокрапку між селектором і псевдокласом.
Продовження →
CSS дає можливість використання 16777216 кольорів. Вони можуть бути представлені ім’ям, rgb-значенням (red/green/blue, тобто червоний/зелений /синій) або hex-кодом.
red
Теж саме, що і:
rgb(255,0,0)
Продовження →
Ми створюємо зовнішні каскадні таблиці стилів в окремих документах, даючи їм розширення “. сss”. Зовнішня каскадна таблиця стилів є простий список правил. Вона не містить HTML-тегів. CrashCourse / Demos / Stylesheet.css – приклад зовнішньої таблиці стилів.
Приклад коду
.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}
Продовження →
Ми можемо використовувати float з будь-яким елементом, який не був абсолютно позиційований. Це застосовується для визначення чи повинен елемент переміститися вліво, направо або не повинен зовсім. Ось список можливих значень:
Продовження →
