Просмотр уровня приоритета стиля CSS

  1. Стили браузера по умолчанию
  2. Селекторы
  3. Тип выбора
  4. Класс выбора
  5. Селектор идентификаторов
  6. Встраивание стилей
  7. Внешние стили
  8. Внутренние стили
  9. Встроенные стили
  10. Важное правило!
  11. Заключение

Каскадная таблица стилей ( CSS ) , я думаю, самый простой из языков по сравнению с другими языками, связанными с сетью, поэтому неудивительно, что многие люди только начинают научиться создавать сайт будет в основном изучать этот язык и HTML первый.

В этом посте мы пойдем вернуться к основам CSS , Мы рассмотрим, как изначально применяются стили CSS, какие стили будут применяться, как одни объявления стилей перезаписывают друг друга, а другие нет.

Рекомендуемое чтение: CSS Вернуться к основам: объяснение терминологии

Итак, этот пост специально предназначен для начинающих, которые только начинают осваивать проблемы, вероятно, все еще допускающие ошибки и ошибки при составлении своей первой таблицы стилей. Итак, начнем.

Стили браузера по умолчанию

Firefox, Chrome, Safari, Opera и Internet Explorer в настоящее время пять лучших настольных браузеров в магазине. Эти браузеры и все другие браузеры следуют стандартному правилу, включающему встроенные стили по умолчанию для отображения элементов HTML.

Итак, когда мы вставим несколько случайных элементов HTML без добавления каких-либо стилей, вы увидите, что это все еще правильно отображается в браузере ,

Итак, когда мы вставим несколько случайных элементов HTML без добавления каких-либо стилей, вы увидите, что это все еще   правильно отображается в браузере   ,

Но, если мы тщательно проверяем эти элементы, у каждого из браузеров есть (немного) разные значения для их декларации «по умолчанию», что приводит к несогласованности между браузерами, особенно в старом, таком как IE6, 7 и Firefox 3.0.

Но, если мы тщательно проверяем эти элементы, у каждого из браузеров есть (немного) разные значения для их декларации «по умолчанию», что приводит к несогласованности между браузерами, особенно в старом, таком как IE6, 7 и Firefox 3

Например, как вы можете видеть на приведенном выше снимке экрана, новейший Firefox по умолчанию отображал блочную цитату с полем: 16px 40px 16px 40px, в то время как Internet Explorer 7 отображает блочную цитату с полем: 0px 40px.

Чтобы преодолеть несоответствия, показанные выше, многие веб-дизайнеры и разработчики предпочитаю перезаписывать все эти стили с помощью CSS Reset . Этот файл CSS обычно содержит почти все селекторы типа HTML, определяя их с помощью одинаковых правил.

Доступно множество сбросов CSS, но вот три моих самых любимых:

Селекторы

Вы, вероятно, часто читаете этот термин в блогах веб-дизайна / разработки, которые вы посетили; Селекторы .

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

Тип выбора

Мы упоминали однажды выше, Тип селектора будет нацелен на любые указанные элементы HTML в документе. Например:

p {/ ** декларация ** /}

будет соответствовать всем элементам p или абзаца и, в конечном итоге, перезапишет стили по умолчанию, заданные в браузерах.

Класс выбора

Когда вы добавили класс или даже много классов к элементу, вы также можете настроить таргетинг на эти классы. Селектор класса начинается с точечного параметра.

.box {/ ** объявление ** /}

Приведенный выше фрагмент будет соответствовать всем элементам, которые имеют класс box, или мы также можем выбрать более конкретно.

p.box {/ ** объявление ** /}

Он будет нацелен только на элемент p, который имеет класс box .

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

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

Идентификатор является очень ограничительным атрибутом, у нас может быть только один идентификатор элемента, и он также должен быть уникальным.

<div id = "content"> Content </ div>

В случае, если у нас есть идентификатор в элементе, мы можем использовать селектор идентификатора, чтобы предназначаться для этого элемента; Селектор идентификатора определяется параметром hash #.

#uniqueID {/ ** объявление ** /}

Поскольку идентификатор уникален, он имеет самый высокий уровень приоритета типа селектора. Поэтому, когда мы объявляем стили с помощью селектора идентификаторов , он в конечном итоге перезаписывает все те же объявления из классов , селекторов типов и стилей браузера по умолчанию .

Встраивание стилей

Мы прошли все основные базовые селекторы и теперь рассмотрим, как эти стили встроены в HTML-документ.

Внешние стили

Внешние стили - это стили, которые добавляются в отдельный файл, обычно в файл .css, который затем связывается с документом HTML с помощью тега <link> для применения этих стилей.

<link rel = "stylesheet" href = "css / style.css">

И все стили, объявленные в файлах, будут вести себя так, как мы упоминали в разделе « Селекторы » выше, а именно, они будут в основном перезаписывать стиль браузера по умолчанию и переписывать в другое объявление стиля в зависимости от уровня приоритета селекторов.

Этот метод является наиболее рекомендуемым способом присоединения стилей, особенно когда у вас есть тысячи строк CSS-кодов с множеством страниц для присоединения.

Таким образом, стилями также будет легко управлять, например, вы можете разделить CSS-файлы на несколько файлов в зависимости от их конкретной роли, например typography.css, чтобы управлять всеми стилями, связанными с типографикой, и так далее.

Внутренние стили

Внутренние стили - это стили, встроенные непосредственно в HTML-документ, обычно внутри тега <head>.

<head> <style type = "text / css"> h1 {/ ** объявление ** /} p {/ ** объявление ** /} </ style> </ head>

Но эта практика не рекомендуется, когда у вас будет несколько сотен стилей, так как ваша HTML-страница будет слишком длинной, и стиль будет влиять только на то, где встроены стили. Когда вы допустите, скажем, десять страниц, вам нужно будет скопировать эти стили и встраивать их во все страницы, а когда вам нужно изменить стили, вам придется изменить его на десять разных страниц, что, очевидно, является утомительной задачей.

В зависимости от уровня приоритета внутренний стиль выше, поэтому он будет перезаписывать внешние стили.

Встроенные стили

Встроенные стили - это стили, которые непосредственно встроены в элемент HTML.

<p style = "margin: 5px;"> Это абзац </ p>

В этом примере выше будет добавлено поле 5px к элементу абзаца, а также будут перезаписаны поля, объявленные для этого элемента как во внутреннем, так и во внешнем стилях.

Но избегайте этого, поскольку ваша разметка будет загромождена всеми этими объявлениями стиля; Если у вас есть набор стилей, это даже станет кошмаром, чтобы увидеть и поддерживать все ваши HTML и стили.

Дальнейшее чтение : Три способа вставить CSS - W3CSchools.

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

Существуют некоторые обстоятельства, когда мы должны применять определенный стиль для элемента, но тот же стиль для этого элемента также был объявлен в другом месте таблицы стилей или в документе. Например:

У нас есть следующий тег привязки со встроенными стилями

<a style="color: #border: 1px solid #156E8E; background-color: #389ABE;"> Это ссылка </a>

И у нас также есть отдельный стиль для этого тега привязки в таблице стилей.

{граница: 1px solid # 333; цвет фона: # 555; }

В этом примере мы можем использовать правило! Important, чтобы заставить браузер использовать стили в таблице стилей вместо стиля в элементе.

{border: 1px solid # 333! важный; цвет фона: # 555! важно; }

Правило! Важно будет указывать, что этот стиль является наиболее важным и должен применяться к другому стилю, даже если он непосредственно встроен в элемент (встроенные стили) .

Дальнейшее чтение : ! важные объявления CSS: как и когда их использовать - Smashing Magazine.

Заключение

Мы прошли весь предмет в этой статье. Теперь мы видим, что каждый селектор и способ встраивания стилей имеют разные уровни приоритета в механизме браузера. Как я упоминал ранее, эти темы предназначены для начинающих, поэтому они не являются чем-то новым для опытных веб-дизайнеров.

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

Наконец, я предоставил вам демонстрационный файл и исходный файл для дальнейшего изучения нашего обсуждения в этой статье.

Надеюсь, вам понравится этот пост, и если вы обнаружите в нем некоторую неточность или я пропустил несколько важных моментов, не стесняйтесь сообщить мне об этом в разделе комментариев ниже.

Похожие

Компоненты пользовательского интерфейса Styling с нуля: кнопки и формы
... стилизовать основные веб-компоненты, если вы никогда не делали этого раньше. Вы хотите, чтобы ваши кнопки и формы выглядели хорошо, а также были совместимы с разными браузерами. Самое простое решение - использовать такую ​​среду, как Bootstrap или Foundation, но это не поможет вам понять основы. На самом деле это не так сложно, как кажется, и в этой статье я покажу вам, как это сделать. Чтобы облегчить себе жизнь, я собрал все это в свои собственные рамки,
Как проверить безопасность антивируса, брандмауэра, браузера и программного обеспечения
Таким образом, у вас есть антивирус, защищающий вашу систему, ваш брандмауэр работает, все ваши плагины для браузера обновлены, и вы не пропускаете никаких патчей безопасности. Но
CSS Layout | слои, абсолютное и относительное позиционирование и плавающие элементы
... стилей . Чтобы настроить простой блок навигации, мы будем использовать такой код (с CSS в внешний файл .css или блок стиля): div # navigation {width: 200px; фон: серый; отступы: 10 пикселей; } <div id = "navigation"> ... навигационные ссылки ... </ div> Этот пример кода использует некоторый очень простой код CSS. Все элементы
Курс языка HTML: несколько слов об инструментах
Работа над документом HTML требует использования различных инструментов, которые можно разделить на несколько классов. Редакторы HTML Хотя документ можно редактировать в простейшем текстовом редакторе, для этого потребуется вручную ввести все коды, что довольно сложно и подвергает вас риску обгона сообщений об ошибках. Лучше воспользоваться богатым предложением специализированных редакторов HTML. Редакторы HTML можно разделить на два основных класса:
Стилизация веб-компонентов с использованием общей таблицы стилей
Веб-компоненты - это удивительная новая функция в Интернете, позволяющая разработчикам определять свои собственные элементы HTML. В сочетании с руководством по стилю веб-компоненты могут создавать API-компоненты, которые позволяют разработчикам прекращать копирование и вставку фрагментов кода и вместо этого просто использовать элемент DOM. Используя теневой DOM, мы можем инкапсулировать веб-компонент и не беспокоиться о войнах специфичности с любой другой таблицей стилей на странице. Тем не
Sony Xperia Z1 - топ-10 новых функций, и вас это должно волновать?
Sony только что раскрыла Xperia Z1 , Это новый фирменный Android, телефон, который должен конкурировать с Samsung Galaxy S4 и - однажды - Galaxy S5. Но есть ли у него отбивные? Мы рассмотрели 10 лучших функций телефона, чтобы оценить, стоит ли им что-то удивлять. 1. Алюминиевая рама
Создание и стилизация индикатора выполнения с помощью HTML5
HTML5 введен элемент индикатора выполнения, который позволяет нам отображать ход выполнения определенных задач, таких как загрузка или загрузка, в основном все, что выполняется В этой статье мы обсудим, как добавить этот элемент в документ, как стилизовать его с помощью CSS и анимировать индикатор выполнения. Давайте начнем. Рекомендуемое
ДАТАРТ | Частота обновления ТВ: когда вы не знаете, во что верить!
Подавляющее большинство производителей сегодня представляют свои воображаемые, вымышленные номера со своими телевизорами вместо реальной частоты обновления. Где это правда, и почему производители указывают значения, которые не соответствуют параметрам оборудования панели?
4 шага, чтобы добавить видео на фоне страницы WordPress
Каждый владелец сайта хочет, чтобы посетители оставались на нем, а не возвращались к результатам поиска. В этом случае вы должны знать секреты, позволяющие «привлечь» посетителей и сделать их постоянными пользователями и клиентами сайта. На сегодняшний день в Интернете вы можете найти много информации о том, как повысить конверсию на сайте и снизить показатель отказов. Среди предложенных методов - добавление изображений и видео на сайт. И если все пользователи познакомились с первым
Настройка прокси Squid на прокси через родительский прокси
Здесь мы собираемся взглянуть на настройку двух Squid прокси серверы для пересылки запросов из внутренней сети без подключения к Интернету в сеть DMZ, а затем, при необходимости, в Интернет. Конфигурация позволит нам выбирать, какие домены следует или не следует пересылать на следующий прокси-сервер, позволяя не перенаправлять запросы, предназначенные для доменов во внутренней сети, следующему прокси-серверу Squid, а другие запросы в сеть DMZ
Обзор LG Optimus L7 II (видео)
... стились кнопки регулировки громкости и программируемая клавиша Quick. На правой стороне находится только кнопка питания, а внизу крючок микрофона и microUSB для синхронизации и зарядки. Up - это 3,5-мм выход для наушников и отверстие для дополнительного микрофона. Задняя крышка Optimus L7 II имеет шероховатый финишный слой, и устройство оборачивается сзади и по краям, и оно достаточно хорошее, чтобы иметь ухо, чтобы вы могли потянуть его для облегчения удаления. На задней панели

Комментарии

Тип файла cookie Цель использования файла cookie Будет ли удаление файла препятствовать использованию сайта?
Тип файла cookie Цель использования файла cookie Будет ли удаление файла препятствовать использованию сайта? Аналитические файлы cookie (файлы cookie независимой компании - Google). Аналитические файлы cookie собирают информацию о том, как посетители используют веб-сайты, типе веб-сайта, с которого перенаправлялись пользователи, а также о количестве посещений пользователей и времени посещения этого сайта. Эти файлы не регистрируют личные данные конкретного пользователя, но используются для составления
Как этот тип программного обеспечения работает в этом случае?
Как этот тип программного обеспечения работает в этом случае? Хакеры основывают всю свою деятельность на социальной инженерии и знакомстве с моделями действий человека. В случае поддельных антивирусов используется самая сильная эмоция, то есть страх (следовательно, такие программы также называют scareware - «пугать»). Пользователь Интернета получает уведомление о том, что его компьютер подвержен риску, и единственный способ защитить его - это установить антивирус, который только
Каким должен быть глобальный стиль руководства стиля в веб-компоненте?
Каким должен быть глобальный стиль руководства стиля в веб-компоненте? Прежде чем обсуждать, как получить глобальное руководство по стилю для стиля веб-компонента, мы должны обсудить, что он должен и не должен пытаться стилизовать. Прежде всего, текущий лучшие практики для веб-компонентов утверждают, что веб-компонент, включая его стили, должен быть инкапсулирован, чтобы он не зависел от каких-либо
Что такое препроцессор CSS?
Что такое препроцессор CSS? Препроцессоры CSS не заменяют CSS. Фактически, препроцессоры просто предоставляют нам дополнительную функциональность, такую ​​как переменные, миксины, операции и функции, с помощью которых мы можем упростить процесс создания и управления файлами CSS. Препроцессоры позволяют нам определять свойства один раз, а затем повторно использовать их в нашем проекте гораздо более динамично, чем простой CSS. Что МЕНЬШЕ? LESS - относительно
Как работает Селектор документов?
Как работает Селектор документов? Щелкните правой кнопкой мыши рамку выбора документа (серая рамка, а не синяя полоса) в любом месте за пределами строки заголовка и выберите «Включить стыковку» в контекстном меню. Затем дважды щелкните по строке заголовка (синяя полоса в окне игры). Как установить длинную линию при переносе строки? Столбец, в котором разрывы строк

5. Но есть ли у него отбивные?
Где это правда, и почему производители указывают значения, которые не соответствуют параметрам оборудования панели?
Тип файла cookie Цель использования файла cookie Будет ли удаление файла препятствовать использованию сайта?
Как этот тип программного обеспечения работает в этом случае?
Каким должен быть глобальный стиль руководства стиля в веб-компоненте?
Что такое препроцессор CSS?
Что МЕНЬШЕ?
Как работает Селектор документов?
Как установить длинную линию при переносе строки?