Css - правила хорошого тону - по-російськи

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

Застосувати CSS на сторінці можна трьома способами:

  • Inline CSS - за допомогою атрибута style для HTML-тегів
  • Embedded CSS - таблиця стилів розміщена в коді сторінки, елемент . З кожною сторінкою веб-сайту може бути пов'язано декількома таблиць стилів. Крім цього, зовнішні CSS можна пов'язати з документом за допомогою директиви @import. наприклад:

    Слід запам'ятати: як впроваджені в документ CSS (Embedded CSS) і посилання на зовнішні файли CSS (External CSS) завжди повинні розміщуватися на самому початку документа (X) HTML між відкриває і закриває тегами .

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

    Прибиваємо значення браузера за замовчуванням

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

    Кожен елемент в селекторі тепер набуває нульових значень для margin, padding і border, якими б вони не були раніше, коли браузер починає відображати сторінку. Подібний метод дозволяє прибити все значення за замовчуванням, після чого можна починати оформлення сторінки в тому вигляді, якою її хотілося б бачити. продовжуємо:

    Селектор p оголошує margin для нашого елемента p. коротше кажучи, відступ 15 пікселів з усіх боків для всіх елементів параграфа

    .

    . Таким чином отримуємо однакове відображення параграфів в різних браузерах. Подібно параграфу можна встановити відступи і / або кордони і для інших елементів, яким ми їх обнуляли в першому селекторі, знову ж для їх однакового відображення в різних браузерах.

    На зображенні нижче можна побачити як елемент fieldset був відображений в Internet Explorer і Firefox. З скриншота абсолютно зрозуміло, що кроссбраузерность при значеннях відступів за замовчуванням просто ніяка. Кожен з браузерів на власний розсуд визначає зовнішній вигляд одного і того ж елемента.

    На наступній картинці явно видно ефект від обнулення відступів і кордонів fieldset. що ми зробили в першому селекторі. Тобто тепер браузери показують сторінку відповідно до наших вказівок, а не так, як їм хотілося б. Хоча знову можна помітити невелику різницю: legend за замовчуванням синій в Internet Explorer і чорний в Firefox, що нам звичайно не підійде. Змінити колір тексту і інші настройки для fieldset можна в окремому селекторі. Крім цього, можна їх оголосити як значення для сторінки за замовчуванням в першому селекторі, де ми обнуляли відступи, а потім перевизначити кожному елементу потрібні для нього значення, як це було зроблено для параграфа.

    тестуємо сторінку

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

    Створюйте сторінки в Standards Mode

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

    - стандартний перехідний XHTML1.0 або

    - стандартний основний HTML4.01

    Спершу тестируйте сторінки в правильних браузерах

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

    Зразковий набір для тестування в процесі створення сторінки по-зменшенням: Firefox (як і інші Gecko-браузери відмінно обробляє CSS), Opera і Internet Explorer. Не слід починати тестування з IE, тому що він багато в чому є коректним і в ньому достатня кількість глюків, боротьбою з якими краще займатися після успішної налагодження в правильних браузерах.

    Давайте зрозумілі назви селекторам

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

    Назва цього селектора (#MenuBlock) абсолютно ясно говорить про те, що в ньому міститься блок навігації.

    А ось що означає # div1 важко буде згадати вже на другий день верстки сторінки. Такі назви селектор нікуди не годяться.

    розміри тексту

    Не слід використовувати абсолютні розміри шрифтів в документі, в цьому випадку багато браузери не в змозі змінювати з розміри, якщо текст виявиться занадто дрібним. Найкраще користуватися відносними одиницями виміру: em або%.

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

    Шрифт на сторінці

    font-family: Arial, Verdana, Helvetica, sans-serif;

    Крім цього, слід пам'ятати: якщо назва шрифту складається з декількох слів, розділених пробілами, таку назву слід взяти в лапки: "Times New Roman".

    Встановлюємо значення за замовчуванням

    На початку статті ми позбулися значень браузерів, які вони застосовують до HTML елементам за замовчуванням, ми обнулили відступи і межі. Тепер же навпаки, встановимо значення за замовчуванням для документа. Найкраще місце для них - тег body.

    Це дивне значення розміру шрифту 100.01% компенсує кілька глюків браузерів. По-перше, установка значення розміру шрифти в процентах (а не em) усуває проблему IE / Win при непропорційному розтягуванні і стисненні шрифтів, якщо потім використовуються em для інших елементів. Крім того, деякі версії Opera показують font-size: 100% дрібніше, ніж інші браузери. Safari ж, має проблеми з font-size: 101%. Тому краще використовувати саме 100.01%!

    Отже, ми встановили розмір шрифта для body. а потім використовуючи його як базове, можемо визначати щодо його розміри шрифтів інших елементів на сторінці. Наприклад для елемента p можна визначити font-size: 80% і це буде 80% щодо розміру шрифту для body. А для елемента h1. наприклад, можна призначити font-size: 135%.

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

    Потім встановлюємо колір тексту за замовчуванням (color: # 333), який також можна буде перевизначити для будь-якого елемента, і встановлюємо колір фону для сторінки (background-color: #fff).

    На закінчення