Перегляд рівня пріоритету стилю CSS

Каскадні таблиці стилів (CSS) Я вважаю, що це найпростіша мова в порівнянні з іншими мовами, пов'язаними з Інтернетом, тому не дивно, що багато людей, які тільки починають вивчати, як створити веб-сайт, в основному вивчать цю мову та HTML.

У цій публікації ми повернемося до основ CSS. Ми розглянемо, як спочатку застосовані стилі CSS, які стилі застосовуватимуться, як деякі декларації стилів замінюють один одного, а інші не.

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

Стилі браузера за замовчуванням

Firefox, Chrome, Safari, Opera та Internet Explorer в даний час є п'ятьма кращими настільними браузерами на ринку. Ці браузери та всі інші браузери використовують стандартне правило для включення вбудованих стилів за замовчуванням для відображення елементів HTML.

Отже, коли ми поміщаємо деякі випадкові елементи HTML без додавання будь-яких стилів, ви побачите, що вони все ще належним чином відображаються в браузері.

Але, якщо ми ретельно перевіряємо ці елементи, кожен з браузерів має (трохи) різні значення для свого “за замовчуванням” декларації, які викликають невідповідність у браузерах, особливо в старому, як IE6, 7 і Firefox 3.0.

Наприклад, як видно з наведеного вище знімка екрана, найновіший Firefox надав блоку за умовчанням з margin: 16px 40px 16px 40px, а з іншого боку Internet Explorer 7 відображатиметься блоку с margin: 0px 40px.

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

Доступно багато налаштувань CSS, але тут є мої три найкращих улюблених:

• Normalize.css
• Скидання CSS
• HTML5 Скидання таблиці стилів

Селектори

Можливо, ви часто читаєте цей термін у блогах веб-дизайну / розробки, які ви відвідували; Селектори.

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

Тип селектора

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

 p / ** оголошення ** / 

буде відповідати всім стор або пункт елементами і з його допомогою можна буде перезаписати типи стилів за замовчуванням, надані браузерами.

Селектор класів

Коли до елемента додано клас або навіть багато класів, можна також націлити ці класи. The Селектор класів починається з крапка параметр.

 .поле / ** оголошення ** / 

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

 p.box / ** оголошення ** / 

Він буде націлений лише на стор елемент, який має коробка клас.

Коли ми використовуємо Клас селектор, все ж декларації стилів з обох Тип селектор і Браузер за замовчуванням буде перезаписано.

Селектор ідентифікаторів

The ID це дуже обмежувальний атрибут, ми можемо мати лише один id на елементі, і він також повинен бути унікальним.

 
Вміст
 

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

 #uniqueID / ** оголошення ** / 

З тих пір ID є унікальним, він має найвищий рівень пріоритету типу селектора. Отже, коли ми оголошуємо стилі за допомогою ID Селектор це в кінцевому підсумку перепише всі ті ж декларації з Клас, Тип і селектори Браузер за замовчуванням стилів.

Вбудовування стилів

Ми пройшли через всі основні селектори, і тепер ми розглянемо, як ці стилі вбудовані в документ HTML.

Зовнішні стилі

Зовнішні стилі - це стилі, які додаються в окремий файл, як правило, в .css файл, який потім пов'язаний з документом HTML за допомогою , щоб застосувати ці стилі.

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

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

Таким чином, стилі будуть легко керуватися, наприклад, ви можете відокремити файли CSS на декілька файлів, залежно від його конкретної ролі, наприклад, typography.css для керування всіма стилями, пов'язаними з типографією тощо..

Внутрішні стилі

Внутрішні стилі - це стилі, які вбудовуються безпосередньо в документ HTML, як правило, всередині тег.

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

Виходячи з рівня пріоритету, внутрішній стиль вище, тому він буде перезаписувати зовнішні стилі.

Вбудовані стилі

Вбудовані стилі - це стилі, які безпосередньо вбудовані в елемент HTML.

 
Це абзац
 

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

Але уникайте цього, оскільки ваша розмітка буде завалена всіма цими деклараціями стилів; якщо у вас є вбудований набір стилів, він навіть стане кошмаром, щоб побачити і зберегти всі ваші HTML і стилі.

Подальше читання: Три способи вставки CSS - W3CSchools.

Важливе правило

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

Ми маємо наступний тег прив'язки з вбудованими стилями

 Це посилання 

І ми також маємо окремий стиль для цього анкерного тегу в таблиці стилів.

 a border: 1px solid # 333; фоновий колір: # 555;  

У цьому прикладі ми можемо використовувати !важливо правило, щоб змусити браузер використовувати стилі в таблицях стилів замість того, що в стилю.

 a border: 1px solid # 333! background-color: # 555! важливо;  

The !важливо правило свідчить про те, що цей стиль є найбільшим важливо і повинні застосовуватися над іншим стилем, навіть якщо він безпосередньо вбудований в елемент (Вбудовані стилі).

Подальше читанняважливі декларації CSS: як і коли їх використовувати - Smashing Magazine.

Висновок

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

Але, я думаю, кожен веб-дизайнер взагалі погодиться, що повернення до основ іноді необхідно для перегляду нашого фундаментального знання теми. Насправді, ми часто пропускаємо деякі основні речі, тому що ми, як правило, більше вражені дивовижними (і божевільними) речами, як це.

Нарешті, я надав вам демо-версію та вихідний файл для подальшого вивчення нашого обговорення в цій статті.

• Демо
• Завантажити джерело

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