Вопросы Теги
Описание
Все вопросы "css3"

CSS (Каскадные таблицы стилей) является языком таблицы стилей представления, используемым для описания взгляда и форматирования HTML (Язык разметки гипертекста), XML (Расширяемый язык разметки) документы и элементы SVG включая (но не ограниченный) цвета, расположение, шрифты и анимации. Это также описывает, как элементы должны быть представлены на экране, на бумаге, в речи, или на других медиа.

CSS или Каскадные таблицы стилей, является языком, используемым для управления визуальной презентацией документов, записанных на языке разметки, включая HTML, XML, XHTML, SVG и XUL.

Визуальная презентация HTML была первоначально определена HTML-атрибутами, но HTML 4 удержал от использования эти атрибуты, поскольку CSS был представлен для разделения управления визуальной презентации от содержания. В октябре 1994 Håkon Wium Lie сначала предложил Каскадные Таблицы стилей HTML при работе в CERN с сэром Tim Berners-Lee, который разрабатывал веб-браузер и изобретал HTML.

Основной документ CSS сделан из наборов правила. Каждый набор правила запускается с селектора, шаблон, который соответствует элементам в HTML или XML-документе, и сопровождается блоком нуля или большего количества объявлений свойства, которые определяют презентацию элементов соответствия. Селектор квазиидентичен селектору, используемому JavaScript .querySelectorAll. Например:

/* This is a comment */ a { /* Select all <a> elements (HTML links), */ color: orange; /* change their text color to orange, */ background-color: pink; /* their background color to pink, */ text-decoration: none; /* and remove text decorations like underlines. */ } a:hover { /* Select all <a> elements which are currently being hovered over with the :hover pseudo-class*/ color: red; /* change the color to red */ text-decoration: underline; /* and add an underline again */ }

Простой пример выше также иллюстрирует каскадный элемент CSS. Когда Вы нависаете над ссылкой (т.е. <a> элемент) в странице HTML с этой таблицей стилей относился к нему, оба правила применяются. Из-за первого правила ссылка будет иметь розовый фон. Но, начиная с a:hover селектор более конкретен, color и text-decoration свойства переопределяют свойства от <a> установленный на правило.

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

Селекторный приоритет и специфика

Каждый компонент селектора CSS может быть основан на одном или нескольких из четырех возможных атрибутов элемента HTML:

  1. Идентификатор элемента (от id атрибут)
  2. Название одного из классов элемента (в class атрибут)
  3. Имя тега элемента
  4. Свойства элемента или их значения

Селекторы с помощью идентификационного селектора имеют более высокий приоритет, чем селекторы с помощью имен классов, и селекторы с помощью имени класса имеют более высокий приоритет, чем селекторы с помощью имен тега. Это называют селекторным приоритетом. !important аннотация может использоваться для переопределения селекторного приоритета путем подъема нормального объявления до важного объявления. Каждый раз, когда возможно, однако, более высокая специфика в нормальном объявлении должна использоваться в предпочтении к созданию важного объявления через !important аннотация, для предотвращения переопределений на любых других стилях, которые, возможно, должны были бы быть добавлены, особенно те, которые впоследствии добавляются с естественным намерением приоритета.

Например:

a { /* any anchor element */ color: orange; } .class1 { /* any element with class name class1 */ color: red; } #anchor1 { /* the element with id anchor1 */ color: green; }
<!-- Creates an anchor with a class of class1 and an ID of anchor1 --> <a class="class1" id="anchor1">Sample</a>

В вышеупомянутом примере, цвете текста содержания <a> элемент, строка "Образец", будет зеленым.

Повторные случаи того же селектора также увеличивают специфику, как отмечено в Рекомендации Уровня 3 W3C Селекторов.

.class1.class1 { /* repeated class selector */ font-weight: bold; } .class1 { font-weight: normal; }

Здесь, повторный селектор имеет более высокую специфику, чем исключительный селектор, и font-weight из нашей демонстрационной строки будет полужирным.

Согласно MDN,

Специфика является в основном мерой того, насколько конкретный селектор — какому количеству элементов это могло соответствовать. [...] селекторы элемента имеют низкую специфику. Селекторы класса имеют более высокую специфику, таким образом [классы] выиграют у селекторов элемента. Идентификационные селекторы имеют еще более высокую специфику, таким образом [идентификаторы] выиграют у селекторов класса.

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

/* The first <a> element inside a <p> element that's next to an <h3> element that's a direct child of #sidebar matches this rule */ #sidebar > h3 + p a:first-of-type { border-bottom: 1px solid #333; font-style: italic; } /* Only <img> elements with the 'alt' attribute match this rule */ img[alt] { background-color: #F00; }

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

Наследование

Наследование является основной характеристикой в CSS.

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

  • Свойства, которые наследованы по умолчанию, color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing.
  • Свойства, которые обычно не наследованы, background, border, display, float и clear, height, и width, margin, min/max-height/width, outline, overflow, padding, position, text-decoration, vertical-align и z-index.

Стоит отметить, что любое свойство может быть наследовано при помощи inherit значение свойства. Это должно использоваться с осторожностью, однако, так как Internet Explorer (до и включая версию 7) не поддерживает это ключевое слово. Как пример:

/* Set the color of <p> elements to a light blue */ p { color: #C0FFEE; } /* Set the color of #sidebar to a light red */ #sidebar { color: #C55; } /* <p> elements inside #sidebar inherit their parent's color (#C55) */ #sidebar p { color: inherit; } /* You may also override inherited styles using the !important annotation */ #sidebar p:first-of-type { color: orange !important; }

Важное замечание:

Для вопросов, связанных с CSS, попытайтесь продемонстрировать свой код восстанавливаемым способом с помощью или Стека Отрывки Стека биржи или альтернативно любого редактора онлайн, который позволяет выполнять и совместно использовать код, такой как Мусорное ведро JS, JSFiddle или CodePen (хотя, несомненно, всегда включать соответствующие нормы в вопрос).

Ссылки

Интерактивное учебное руководство

Посетитель CSS - Интерактивная игра для приобретения знаний о селекторах CSS.

Видео учебное руководство

  • Скринкаст CodeSchool CSS - Изучает основные принципы и основополагающие элементы CSS с CSS, По пересеченной местности

CSS псевдо селектор

Проверка

Соглашения о присвоении имен и Методологии: лампа:

Поддержка браузера

Препроцессоры CSS

Постпроцессоры CSS

Таблицы стилей сброса

Платформ CSS

Фактическая версия

  • CSS3 (CSS3 является последним стандартом для CSS)

Будущее

Следующие в настоящее время имеют очень мало (если таковые имеются) поддержка браузера и являются все еще происходящей работой:

Чат-комната

Чат о CSS (и HTML / DOM) с другими пользователями Переполнения стека:

Связанные теги для определенных функций