CSS Назад до основних термінологій, роз'яснених
CSS або Cascading Stylesheets заповнюють визначальну мову правил розробки для нашої мережі. Для створення, упорядкування та кодування наборів правил для основних макетів веб-сайтів художники щодня використовують CSS. Це стало найпопулярнішою мовою для дизайну інтерфейсу і забезпечує дивовижні здібності з недавнім виходом CSS3. Але що насправді означає весь цей код?
Сама мова повністю розроблена вже кілька років. Плутанина може виникнути в основному через нерозуміння і неправильне використання подібних термінів. CSS приносить багато нових концепцій до таблиці. Ми розглянемо деякі з найпопулярніших термінологій, щоб освоїти як гуру CSS.
Навіщо спеціалізуватися з CSS?
Це питання було поставлене раніше, і навіть у 2011 році ми бачимо ті ж результати, що з'являються. CSS - надійна мова, яка не схожа на сценарії та програмування. Це мова стилю, більш конкретно код, який використовується для опису поведінки веб-сторінки.
За допомогою CSS ми можемо безпосередньо маніпулювати атрибутами з окремих елементів HTML. На всі блоки, абзаци, посилання та зображення можуть впливати правила CSS. Уточнення семантики презентації для веб-сторінок завжди було величезним кроком. Це головна причина, чому CSS все ще є провідним гравцем для дизайнерів - ніхто не створив нічого кращого!
Властивості та значення
Це найпростіший спосіб зламати CSS. Весь код потрапляє у дві дії: вибір елемента для застосування дизайну та застосування. Останній створюється через пари властивостей / значень.
Як приклад колір: червоний; є дуже простою парою властивості / вартості. Майно, яке ми використовували, є колір що дозволяє нам переходити в будь-який прийнятний значення змінити колір тексту. Це також може бути шістнадцятковий код або RGB (червоний-зелений-синій) кольорові дані. Багато разів дизайнери не згадують ідею цінностей, тому що це може ввести в оману.
Властивості та значення дійсно є однією ідеєю. Кожна декларація про власність вимагає вартості, а цінності самі по собі безглузді. Є багато документації в Інтернеті, яка переглядає багато різних властивостей і як вони впливають на елементи HTML. Я рекомендую придбати довідник CSS з будь-якого з найближчих книжкових магазинів. Вони є досить дешевими і містять більшість інформації, яка вам потрібна.
Значення селектора
Для завершення всього рядка коду CSS потрібні селектори. Це те, що ми оголошуємо, щоб встановити, який тип елемента ми націлюємо. Є багато селекторів, і багато хто з них так заплутані, що середній дизайнер не потребуватиме навичок. Перевірте селекторні документи W3, якщо ви хочете дізнатися більше.
Найпростішим способом розпочати визначення стилів є використання елементарних елементів як селекторів властивостей. Це означає маніпулювання кореневим кодом, наприклад стор для абзаців, div для підрозділів і навіть тіла і html може використовуватися для керування документом всієї веб-сторінки. Нижче наведено приклад стилізації всіх елементів абзацу.
p (сімейство шрифтів: Arial, sans-serif; колір: # 222; font-weight: bold;
Що дає реальна вага CSS, наскільки точним може бути снайпінг селектора. Найкращий спосіб досягти цільових стилів - це два способи, відомі як класи і Ідентифікатори. Це звичайні ідеї в HTML, де ви можете встановити будь-який елемент, щоб мати ідентифікатор і значення класу через атрибути. Потім за допомогою CSS легко застосувати стилі до цього конкретного блоку.
p # firstpar розмір шрифту: 14px; / * абзац стилів з ідентифікатором "firstpar" * / p.comment font-size: 1.0em; line-height: 1.3em; / * абзаци (и) стилів з класом "comment" * /
Довжина одиниць і значень
Часто ці терміни змішуються, не є великим сюрпризом. Значення пояснювалися раніше як розміщення, яке ми використовуємо для опису властивості. Одиниці довжини також є значеннями в тому, що вони використовуються для опису властивості.
Різниця полягає в тому, що ці значення вимагають числових даних і тому повинні повертатися деякою формою одиниць. Пікселі (px) є найбільш поширеними і можуть використовуватися для більшості: ширина / висота, розмір шрифту, доповнення / поля, щоб назвати декілька.
Крім цих, ви можете бачити відсотки (%), які часто використовуються за допомогою макетів рідини. При встановленні значень ширини у відсотках компілятор буде вважати 100% всією шириною веб-браузера. Це дає дизайнерам багато чіткості при застосуванні стилів до структури компонування і навіть типографіки сторінок.
Блок декларації
Тепер після того, як всі ці терміни об'єднані, ми нарешті зможемо обговорити основну ідею за таблицями стилів. Блоки коду використовуються для розмежування тематичних областей і визначення деталей елемента. Наприклад, нижче наведено рядок коду для простого навігаційного контейнера:
div # nav display: block; ширина: 100%; заповнення: 3px 6px; margin-bottom: 20px;
Найпростішим способом відображення цього коду є властивість рядка один за іншим. Розробники CSS використовували блоки коду, щоб розбити кожну власність на свою лінію. Цей порядок денний не тільки займе набагато більше місця, але й зменшує здатність “знежирене” лист, щоб знайти саме те, що вам потрібно.
Кращий спосіб розбити блоки коду полягає в тому, щоб відокремити заплутані елементи в себе після того, як вони досягнуть порогу. Цей номер є особистим і буде відрізнятися між розробниками. Це переломна точка, коли логіка диктує йому безглуздо тримати все на одній лінії, головним чином через читаність.
Нижче наведено приклад блоку властивостей навігації разом. Ця практика зберігає більш глибокі елементи в одному місці, тому редагування всіх елементів навігації набагато простіше.
div # nav display: block; ширина: 100%; заповнення: 3px 6px; margin-bottom: 20px; div # nav ul стиль-списку: немає; дисплей: блок; div # nav ul li float: left; margin-right: 10px; розмір шрифту: 12px; div # nav ul li a color: # 0f0f0f; текст-прикраса: немає; дисплей: вбудований блок; заповнення: 2px 5px;
Можливі вдосконалення з CSS2 / CSS3
У заголовках останнім часом був безперебійний розмова про дивовижні переваги від CSS3. Але що насправді змінено мовою? Очевидно, що старий код все одно буде працювати нормально. Це принаймні показує повну зворотну сумісність між компіляторами (завжди добре).
Основні відмінності пов'язані з новими властивостями. Вони дозволяють заокруглені кути і ефекти випадання тіней відображатися в браузері. CSS3 також пропонує нові інструменти для опису кольорів у документі. HSL (Hue-Saturation-Lightness) - це найновіша на додаток до HSLA, яка включає альфа-канал для зменшення непрозорості.
Селектори атрибутів є величезним кроком вперед по відношенню до прямого розмітки. За допомогою цього стилю коду ви можете націлити на назву певного елемента, що містить атрибути з певними значеннями. В основному вони корисні при роботі з розміткою, такою як XML, де немає стандартних принципів проектування для керування вузлами. Наведений нижче приклад є відносно простою ідеєю:
div [attrib ^ = "1"] / * стилів тут * /
Наведений вище код є частиною бібліотеки селекторів CSS. Це вплине на всі елементи div з атрибутом “атрибут” яка також має значення “1”. Якщо це все ще незрозуміло, зверніть увагу на наведений нижче приклад. Теоретично ці два селектори повинні виконувати однакові дії.
p [id ^ = "primary"] / * стилі * / p # основний / * стилі * /
Висновок
Після розбиття декількох з найбільш надто-плутаних термінів CSS виглядає як прогулянка в парку. Мова дуже інтуїтивна, а новачки можуть починати розробку протягом перших кількох годин. Саме це робить CSS настільки популярним серед веб-розробників.
Переваги CSS3 тільки почали набувати чинності. Протягом кількох нових років розвиваються веб-тенденції покажуть нам, наскільки великою мірою ми маємо контроль над дизайном веб-сторінок. Наразі CSS пишається як домінуюча мова для оформлення веб-сайту. Практика навіть на елементарних навичках середнього рівня може створити багатий досвід дизайну та додаткові знання.
