У випадках, коли два і більше правила CSS конфліктують один з одним щодо одного і того ж елемента, браузер слідує набору правил, які дозволяють визначити пріоритет CSS правила.
Це може здатися не таким вже і важливим, і в більшості випадків такі конфлікти ніяк не виявляються. Але в міру того, як CSS файли ростуть у розмірі та складності, ви почнете працювати з декількома окремими CSS-файлами. І тоді ризик появи конфліктів збільшується значно.
p { color: red; }
p { color: blue; }
Елемент p завжди буде синього кольору, тому що відповідне правило зазначено останнім.
div p { color: red; }
p { color: blue; }
Пріоритет у конфліктних ситуаціях збільшується разом зі специфікою селектора.
Продовження →
Як і у випадку з «Керівництвом по HTML для початківців», «Керівництво по CSS для початківців» базується на припущенні, що ваше знання CSS не більше того, що вам відомо про вплив морських відливів на хімічні процеси мозку головоногих молюсків. Призначення цього керівництва полягає в тому, щоб навчити основам. Проміжне і Просунуте керівництва по CSS містять більш докладні відомості про каскадні таблиці стилів.
CSS, або каскадні таблиці стилів, – це те, як HTML представлений. Точно так само як HTML описує контент, таблиці стилів визначають, як документ виглядає.
Стилі не нагадують структуру HTML. Вони використовують формат “властивість: значення” і велика частина властивостей може використовуватися для більшості HTML-тегів.
Продовження →
Несхвалення більшості елементів форматування HTML, які використовувалися в HTML 4.0, означає, що навіть якщо браузери як і раніше підтримують їх, відповідно до рекомендації Консорціуму W3C вони не повинні більше використовуватися. Веб-дизайнерам рекомендується використовувати CSS (Cascading Style Sheets – каскадні таблиці стилів).
Головні переваги CSS:
- Більш чистий код – легше підтримувати і швидше завантажується
- Модульний код – правила стилю можуть застосовуватися до безлічі сторінок
- Однаковий дизайн – код легше підтримувати
- Сила дизайну – точність контролю (позиціонування, розмір, поля та ін)
- Поділ праці – завдання розробника та дизайнера
- Краща доступність – теги не використовуються не за призначенням
Продовження →
Передбачено кілька властивостей, які використовуються для маніпуляції фоновими зображеннями. На щастя властивість background використовується з усіма ними.
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
Продовження →
В Керівництві з CSS для початківців ми аналізували тільки селектори HTML – ті, що представляють HTML-тег. Ви можете також задавати свої власні селектори, які можуть приймати форму класів та ідентифікаторів.
Перевага такого підходу полягає в тому, що ви отримуєте один і той же елемент HTML, але уявляєте його різними способами в залежності від його класу або ідентифікатора.
Продовження →
Прим. перекладача: англійською мовою знак “@” вимовляють як “Ет”. Ет-правила CSS починаються зі знака “@” і тому так називаються. Ет-правила містять всередині себе набір CSS-правил і застосовують їх до чогось конкретного.
Продовження →
Ви можете використовувати межі (рамки), застосовуючи їх до більшості елементів HTML в межах сторінки. Все, що вам потрібно, щоб зробити межу навколо елементу – це border-style. Можливі значення: solid, dotted, dashed, double, groove, ridge, inset, outset.
Продовження →
Коли елементи позиційовані відносно, вони позиціонуються відносно того місця, де вони зазвичай з’являються в потоці. Відносно позиційовані елементи впливають на позиціонування наступних споріднених елементів. Вказується властивість relative і одне або декілька зміщень.
Продовження →
Коми, які поділяють селектори, дозволяють «розділяти» декларації між селекторами. Наприклад, всі елементи i, елементи класу “warning” і елементи з id “important” будуть підкреслені.
i, .warning, #important {
text-decoration: underline;
}
Продовження →
Це не складно – підготувати розкладку сторінки за допомогою CSS. Важливо сприймати кожну частину сторінки як окремий фрагмент, який можна переміщати і трансформувати. Ці фрагменти можуть бути розміщені абсолютно чи відносно іншого фрагмента.
Продовження →