CSS - єдина найбільш важлива зміна, яку веб-сторінки спостерігали за останнє десятиліття, і вона проклала шлях до поділу стилю і контенту. По-сучасному, XHTML визначає семантику, Структура - значення та зміст веб-сторінки, а CSS стосується презентації. Хоча більшості з нас зручно писати трохи HTML, ми, схоже, думаємо, що CSS - це якась чорна магія. Я сподіваюся змінити це з цими 5 дитячими кроками, щоб стати чаклуном CSS.
Ця стаття призначена для користувачів, які ще дуже мало знайомі з CSS, хоча, сподіваюся, тут знайдеться щось для всіх.
(1) Граматика
Як і будь-яка мова, в CSS є певна граматика, і на перший погляд це може здатися трохи «комп'ютерною програмою», але насправді це просто список речей. Весь CSS написаний так:
SELECTOR {НЕРУХОМІСТЬ: ЗНАЧЕННЯ; ВАРТІСТЬ МАЙНА; ВАРТІСТЬ МАЙНА;}
Як ви, можливо, вже знаєте, CSS працює, застосовуючи стиль до вибраного елемента на веб-сторінці. Наприклад, щоб стилізувати відображення всіх ваших посилань, ви повинні використовувати «a» як селектор. Різні властивості і значення ви дізнаєтеся з досвідом, але деякі з них прості - такі речі, як COLOR, BORDER, FONT-SIZE, HEIGHT - все це можливі властивості, значення яких можуть бути червоними, 14pt, 150%, 1000px - це дійсно так легко. Давайте подивимося, як ми будемо стилізувати всі посилання червоним кольором:
{колір: червоний;}
Ви також можете використовувати один блок CSS для одночасного використання декількох типів елементів з комами:
a, h2, h3 {колір: червоний;}
Це робить не тільки всі посилання, але і всі заголовки h2 і h3 однаковим червоним кольором. Зверніть увагу, що всі вони можуть бути різних розмірів, оскільки цей конкретний кодовий блок ТІЛЬКИ змінює колір.
(2) Селектори класу та ідентифікатора
Однак іноді ви не хочете стилізувати ВСІ елементи a однаково - і в цих випадках ви можете використовувати CLASS або ID. Як правило, ідентифікатор використовується для одноразових елементів і найчастіше використовується для визначення великих блоків контенту або окремих спеціальних кнопок тощо.
Наприклад, у вас може бути великий DIV для блоків HEADER, CONTENT і FOOTER вашої сторінки, тому їх визначення як ідентифікаторів буде розумним кроком. З іншого боку, класи використовуються, коли елементи стилю можуть повторюватися по всій сторінці. Можливо, ви хочете, щоб група елементів мала заокруглені кути з суцільною червоною рамкою розміром 2 пікселя - замість того, щоб мільйон разів писати один і той же вбудований стиль, ви повинні визначити клас для нього і замість цього приєднати клас до цих елементів. Отже, як ви визначаєте ці ідентифікатори і класи?
< div id = "" sidebar "" > < h1 > SIDEBAR </h1 > < div > < img src = "" ".." alt = "" "class =" "округлений у червоний колір" "/> </div > < </div > > > > > > > > > > > > >
Для налаштування цих елементів у CSS ви повинні використовувати:
.red-округлений {//це клас
прикордонний радіус: 5px;
рамка: 2px суцільна червона;
} #
sidebar {.. }//це ідентифікатор
(3) Нащадки
Вам не потрібно прикріплювати класи та ідентифікатори до всього у вашому документі - ви також можете використовувати те, що ми називаємо DESCENDANTS, щоб вибирати елементи. Подивіться на це твердження CSS і подивіться, чи зможете ви з'ясувати, що воно робить:
#sidebar h1 {font-size: 20px;}
Це ПЕРШИЙ знайде елемент з ідентифікатором sidebar, ТОДІ звузить вибір до всіх < h1 >, що містяться в ньому, і застосовує тільки стиль до них.
Отже, якщо ви можете якось згрупувати всі свої елементи разом, краще використовувати селектори-нащадки, так як це навіть менше коду, ніж додавати купу визначень class = «» до всього.
(4) Де помістити цей CSS?
Найкращий спосіб впоратися з CSS - це повністю відокремити його від вашого HTML. Створіть файл з іменем.css і просто додайте цей рядок до заголовка HTML:
Ви також можете додати блоки CSS до розділу між тегами, але я не пропоную цей метод, оскільки він призводить до безладних і важких для читання файлів HTML.
Третє місце для додавання CSS - вбудоване, але ви повинні бути обережні з цим. Все, що додано до рядка, наприклад:
<img style = ""height: 150px;" src = "".."" alt = """" />
автоматично перевизначить все, що визначено у вашому окремому стилі. Таким чином, ви можете сидіти і намагатися налагоджувати цілу вічність, чому ваші мініатюри не змінюються, а ваш CSS може бути ідеальним - але якщо елемент IMG вже включає вбудовані стилі, тоді вони будуть мати пріоритет. Як ви знаєте, якщо щось ще впливає на це, хоча?
(5) Отримайте FireBug або використовуйте Chrome
FireBug - це дивовижний інструмент розробки, який особливо корисний для з'ясування того, як працює CSS. Знайдіть хвилинку, щоб завантажити його і швидко погляньте на нього. FireBug доступний для Firefox як плагін, або якщо ви використовуєте Chrome, то ідентичний набір функцій вже вбудовано. Після того, як ви активували плагін у Firefox або використовуєте Chrome, просто клацніть правою кнопкою миші в будь-якому місці сторінки і виберіть «Перевірити елемент».
Це відкриє нову панель внизу вашого переглядача. З лівого боку вигляд XHTML, красиво відформатований і складний. Якщо ви наведете курсор миші на який-небудь елемент, він виділить цей елемент на сторінці і покаже вам блочну модель CSS навколо нього (ми поговоримо детальніше про блокову модель на наступному уроці). Ключовим моментом тут є те, що ви також можете вибрати будь-який елемент і точно побачити, який CSS впливає на нього з правого боку, і він розб'є ті, в яких селектори викликали це. Всі додані рядки будуть відображатися під заголовком «element.style». Спробуйте зараз на цій сторінці. Зверніть увагу, що дуже часто велика частина CSS, переліченого праворуч, перекреслена центральною лінією - це означає, що інший селектор, що працює з цим елементом, має пріоритет і перевизначає той, який викреслить.
Ось і все на сьогодні, але не соромтеся залишати коментарі, якщо ви вважаєте, що я упустив деякі фундаментальні ключові моменти для початківців, або якщо у вас є якісь конкретні питання або проблеми з CSS, тоді ставте їх у розділі технічної підтримки нашого сайту. Наступного разу я б хотів розширити ваші знання CSS за межі базових змін кольору і розміру.