CSS спецификация и каскад


Оглавление (нажмите, чтобы открыть):

Каскадные таблицы стилей CSS

Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.

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

Возможно, Вам понадобятся также:

По методам добавления стилей в документ различают три вида стилей.

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

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.

Пример

Абзац с текстом синего цвета

Абзац с текстом красного цвета

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

Глобальные стили

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

Серый цвет текста во всех абзацах Web-страницы

Серый цвет текста во всех абзацах Web-страницы

Таблицы стилей CSS

Как я уже писал на странице «Учебник HTML», CSS отвечает за оформление страниц и разметку гипертекста. Основная идея каскадных таблиц – уменьшить код HTML и упростить работу с ним. Повторяющаяся информация записывается в отдельный файл, на который впоследствии просто ссылаются.

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

Представьте, что код примера — это фрагмент html-страницы, на странице таких фрагментов 20. Допустим, вам понадобилось сделать 50 таких страниц. 20×50 – 1000 фрагментов получается. А через некоторое время вы решили, что мелкий шрифт надо сделать помельче, а крупный — покрупнее. Для этого вам придётся открыть в редакторе все 50 страниц и сделать в каждой из них по 20 правок. Получится очень нудно и очень долго.

Если создавать сайт на голом HTML, то подобные примеры будут частью повседневности человека, обслуживающего этот сайт. Чтобы этого избежать, нужно пользоваться каскадными таблицами стилей. В этом случае указать, как будет выглядеть крупный и мелкий шрифт придётся всего однажды – в отдельном файле, называемом каскадная таблица стилей .

Синтаксис каскадных таблиц CSS

Синтаксис CSS довольно прост и имеет много общего с атрибутами тегов. Подробную информацию по всем аспектам синтаксиса можно узнать в спецификации W3C. Для CSS, как и для HTML существует своя спецификация. Перевод А.Пирамидина также имеется:

Перевод Пирамидина А.

Официальной на данный момент (март 2012) является версия CSS 2.1, версия CSS 3.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему CCS 3. Итак, что же собой представляет синтаксис CSS? Синтаксис похож на написание атрибутов тега:

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

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

Селекторы CSS стилей

Возможно, этот раздел статьи окажется немного трудным для восприятия, но селекторы штука очень важная, ибо влияют на скорость обработки таблиц стилей. Так что потерпите . Селектор указывает, к какому тегу должны быть применены указанные свойства. Его можно сравнить с адресом почтового отправления. Обозреватель проверяет селекторы на соответствие, когда выстраивает страницу в окне просмотра. Шаблоны селекторов можете посмотреть по ссылкам ниже.

Перевод Пирамидина А.

В селекторе в различном сочетании можно использовать несколько составляющих:

    Название тега (например, тегу

в CSS будет соответствовать селектор P )

  • Идентификатор > > в CSS будет селектор #my_p )
  • Класс (универсальный атрибут тега

    > в CSS будет селектор .my_p )

    Ниже примеры селекторов для тегов

    Теперь подробнее. Составляющие, описанные выше, можно сочетать. Тут тоже есть несколько условий:

    1. Если в селекторе используется название тега, оно всегда идёт первым. Селектор с него начинается.
    2. Если в качестве селектора используется идентификатор, то название тега или класс указывать не нужно, поскольку >может начинаться с класса, если не указывать ID или название тега.

    Выглядит всё это так:

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

    В статье про теги HTML упоминалось о вложенности тегов. В примере выше теги

    и являются вложенными в тег

    и – его потомки. При этом

    При составлении селектора разные его части (теги, классы, идентификаторы) разделяются пробелами. Если вы переходили по ссылкам выше, то наверняка обратили внимание, что в таблице шаблонов есть также примеры с символами + и > .

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

    Как видите, указывать селекторы можно по-разному. Все селекторы выше сделают текст тега зелёным. Однако, у них у всех разная точность указания и разная скорость обработки. Это момент достаточно важный при работе с каскадными таблицами стилей.

    Чем точнее (длиннее, если по-простому) написан селектор, тем меньше вероятность, что он перекроется другим селектором или унаследует от своего родителя что-то не запланированное. С другой стороны длинный селектор будет дольше обрабатываться обозревателем, поскольку обозреватели читают селекторы справа налево. Возьмём фрагмент предыдущего примера и рассмотрим его подробнее:

    Сначала обозреватель применит стили ко всем элементам с классом .green , поскольку проще раздать 10 указаний и потом отменить 2, чем возиться с каждым по-отдельности. Затем обозреватель проверит стили для span.green – отличаются они от стилей или нет. И если отличаются, внесёт корректировки уже только для span . Так происходит потому, что span.green более точный селектор и он не должен перекрываться селектором .green . И напротив, более точный селектор должен перекрывать менее точный. Из-за этого условия всё происходит справа налево, а не наоборот. Изменим пример выше:

    Сначала обозреватель покрасит всё элементы с с классом .green зелёным, затем элементы перекрасит в красный и уже проверив вложенность в

    покрасит оставшиеся в чёрный.

    Поэтому надо всегда помнить о золотой середине и использовать составные селекторы только там, где они действительно нужны. На самом деле тема достаточно глубокая и в рамках этой статьи я не смогу раскрыть и 10-ой части нюансов, поскольку вы 100% запутаетесь тогда. Давайте вернёмся к простому и понятному – обратимся к одному из примеров прошлой статьи:

    Все заблуждаются в меру своих возможностей.

    означает следующее: тег small <размер шрифта: 8 пунктов; цвет: красный ;>результат будет такой:

    Все заблуждаются в меру своих возможностей.

    Изменим размер шрифта с 8 на 18 пунктов:

    Все заблуждаются в меру своих возможностей.

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

    Отмечу, что имя класса может быть любым, но не должно содержать пробелов:

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

    Так вот для того, чтобы определить какаой из тегов станет Васей Пупкиным, нужно воспользоваться атрибутом class . Как это выглядит на практике: в таблице стилей указывают класс

    В html-файле указывают принадлежность тега к классу vasya_pupkin :

    Все заблуждаются в меру возможностей.

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

    Правила CSS

    Кроме стилей в CSS присутствуют правила. Их четыре:

    В переводе А. Пирамидина присутствует также правило @font-face . Однако, перевод выполнен на основе версии спецификации 2.0, а в версии CSS 2.1 (оригинальная версия) это правило исключили, поэтому я тоже исключил его из описания. Все подробности по каждому из правил смотрите в спецификации:

    Блог Vaden Pro

    Cascading Style Sheets или же css при переводе на русский язык означает «каскадные таблицы стилей». Согласно официальной документации W3C css представляет из себя механизм для добавления оформления в html документ.

    О том почему эти таблицы стилей названы «каскадными», почему все оформление страниц сайта следует делать используя именно css, а не те же атрибуты html, какие выгоды принесло веб-разработчикам внедрение каскадных таблиц стилей в обиход и пойдет речь в этой статье.

    Что такое каскадные таблицы стилей?

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

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

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

    Подробнее о «родственных» связях html тегов можно почитать в статье: «Что такое дерево документа в HTML?»

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

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

    Наследование стиля вместе с четкой расстановкой приоритетов наследования и образует собой в конечном итоге «каскад».

    Пример использования css


    Данный фрагмент кода взят из оформления заголовка на одном из сайтов. Он представляет собой одно обычное правило, которое в свою очередь состоит из:

    • Селектора – часть кода сообщающая браузеру к какому именно элементу или же совокупности элементов применяется данное правило. В нашем примере селектор это «#footer h3». Подробнее правила построения селекторов и принципы наследования оформления будут рассмотрены в дальнейших уроках.
    • Блока определений – набор стилей оформления для конкретного селектора. Он содержится между фигурных скобок после селектора. Стили написанные не блоком, а в одну строку являются признаком дурного тона в оформлении css кода.

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

    Зачем понадобилось разделять содержимое и оформление html страниц?

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

    Мастер Йода рекомендует:  70 вопросов, которые следует задать в конце собеседования

    Пример кода с оформлением на чистом html:

    Теперь пройдемся подробнее по основным причинам перехода от чистого html к html + css:

    • Слишком громоздкий код страницы значительно увеличивал размер файла, что ухудшало время загрузки страницы и увеличивало нагрузку на сервер.
    • Смешивание «логической» и «визуальной» части оформления приводило к ухудшению индексации страниц поисковыми роботами.
    • Адаптация внешнего вида сайта под различные типы браузеров и устройств становилась невозможна.
    • Код становился «грязным» не читабельным, что усложняло его поддердку веб-разработчиками.
    • Ограниченность функционала оформления тегами приводила к однообразному и пресному внешнему виду сайтов. При помощи одних только атрибутов невозможно настроить полноценное оформление сайта.
    • Внесение изменений в дизайн становилось крайне трудоемкой задачей, поскольку оформление приходилось менять каждому конкретному элементу, без возможности задания его целой группе элементов в один прием.

    После внедрения стандарта css он решил множество проблем и позволил наконец html-лю стать тем, чем он и задумывался- языком логической разметки документа.

    Что изменилось с внедрением css?

    • Разделение структуры документа на логическую разметку и оформление сделало код значительно «чище», тоесть читабельней, понятней для восприятия.
    • Появилась возможность адаптации сайтов для различных устройств за счет подключения для них различных правил оформления.
    • Один файл css может оформлять все страницы сайта, что позволяет значительно снизить трудоемкость веб-разработки, размер сайта в целом.
    • Простота применения каскадных таблиц стилей значительно сократила время на веб-разработку.
    • За счет кеширования файла с оформлением сайта на порядок ускорилось время загрузки страниц сайтов и снизилась нагрузка на сервера в целом.

    Подводя итоги

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

    CSS урок 3. Каскадирование и принципы приоритетности

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

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

    Объединение унаследованных стилей

    Так уж сложилось, что вложенные элементы обычно наследуют свойства у своих родителей и предков. Рассмотрим следующую ситуацию:

    В примере выше мы задали семейство шрифта общему предку (body), размер — абзацам (p), и цвет — тегу em. На самой веб-странице мы увидим содержимое тега em шрифтом в 16px, семейства Arial и синего цвета. В нашем случае шрифт и размер были унаследованы от предка и родителя соответственно.

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

    Преимущество имеет ближайший родительский элемент

    Рассмотрим следующие правила оформления для главного тега страницы и всех абзацев:

    Как вы думаете, каким цветом окрасится содержимое тега em, зеленым или красным? Конечно же красным (red), так как приоритет при наследовании всегда имеет свойство ближайшего родительского элемента. Учитывая вложенность тегов em в абзацы, их отображение красным цветом не вызывает удивления.

    Приоритет всегда отдается конкретному стилю

    А что будет, если к предыдущим правилам оформления мы зададим еще один? Например, цвет для того же тега em.

    В этом случае, вполне логично, содержимое тега окрашивается в синий цвет (blue), так как для него есть конкретный определяющий стиль. Это значит, что конкретный стиль имеет приоритет над унаследованными.

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

    Распределение приоритетности между конкретными стилями CSS

    После уяснения вышезатронутых принципов каскадности, непроизвольно возникает вопрос — «Как распределяются приоритеты между конкретными правилами?» Ведь к одному и тому же элементу можно обращаться разными способами.

    Например, через селектор тегов, классов и идентификаторов. Рассмотрим следующий пример, в котором у нас есть один абзац на странице, имеющий класс ‘aly’ и идентификатор ‘main’. Для этого абзаца мы придадим разные цвета через соответствующие селекторы.

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

    приоритетность в CSS

    Как видно из иллюстрации, правило применяемое через селектор тегов имеет 1 балл значимости, класс — 10, а идентификатор — 100 баллов. Самая высокая значимость присуждается встроенным стилям, имеющим 1000 единиц важности. Встроенный стиль представляет из себя CSS правило, находящееся внутри html разметки:

    При наличии подобного встроенного стиля, абзац будет окрашен в зеленый цвет (green). Однако, использование подобной техники оформления является нежелательным по двум причинам:

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

    Приоритетность не имеет значения в случае наследуемых свойств.

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

    Из примера выше мы видим, что абзацы внутри блочного элемента с идентификатором ‘main’ будут окрашены в зеленый цвет (green). Хотя, на первый взгляд может показаться что правило для ‘#main’ более важно, нужно помнить что оно обращено к div`у, а не напрямую к абзацу. И здесь срабатывает правило о более конкретном стиле, согласно которому абзацы будут окрашены в зеленый цвет. Словом, приоритетность не наследуется потомками.

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

    таблица приоритетностей в CSS

    Последний стиль сродни окончательному решению

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

    У нас есть два форматирующих правила для одного и того же тега strong с классом bold, находящийся внутри абзаца с классом alive. Оба стиля имеют одинаковую важность — 11 баллов. Какому правилу браузер отдаст пальму первенства?

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

    У нас может быть таблица стилей внушительных размеров, по причине чего становится довольно сложно использовать селектор с правильной приоритетностью, не говоря уже о возможности наличия где-нибудь встроенных стилей. Для решения данной задачи мы можем воспользоваться значением !important. Ее необходимо прописать к необходимому свойству.

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

    Хитрость: гибкое использование правила последней записи

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

    Как вариант можно использовать правило последней (самой актуальной) записи. Например, для такой «нестандартной» страницы можно подключить отдельную таблицу стилей, содержащую особенные правила форматирования. Только нужно не забыть подключить этот файл после основной таблицы стилей, чтобы отменить предыдущие правила. Вот вам и хитрость:-)

    Опасность частого использования селекторов по ID

    Советую вам с осторожностью использовать селектор идентификаторов. Наличие у неё большого балла приоритетности может стать причиной проблем оформления вашего сайта. Обратите внимание на стили ниже.

    Согласно первому правилу мы задаем черный цвет для всех абзацев внутри блока с идентификатором ‘main’. Затем мы хотим выделить абзац с классом ‘letter’ отдельным цветом. Он находится внутри блока с идентификатором ‘main’.

    Но сделать это не получится по той причине, что первый стиль имеет 101 балл значимости, а второй всего лишь 11. Это пример того, какие трудности могут быть при использовании селектора по идентификатору. Можно конечно, использовать другую запись:

    Однако, проблему она решает лишь частично, так как действует только на абзацы внутри блока с идентификатором ‘main’. На абзацы с классом ‘letter’, находящиеся в других блоках она не подействует. Посему, будьте внимательны.

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

    1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
    2. [popup_trigger >Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

    На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

    Каскадные таблицы стилей¶

    CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, оформленного языком разметки.

    Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

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

    Что такое CSS?¶

    Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.

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

    Таблица стилей — это совокупность стилей, применимых к гипертекстовому документу.

    Каскадирование — это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили. Другой аспект каскадирования — наследование (inheritance), — означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа. Например, если вы примените определенный цвет текста в теге

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

    Официальная информация о спецификации Cascading Style Sheets всегда доступна по адресу http://www.w3.org/Style/CSS/

    Общий синтаксис таблиц стилей¶

    Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Таблицы стилей составляются из определенных частей (рис. 1):

    Рис. 1. Синтаксис описания стиля CSS


    • Селектор (Selector). Селектор — это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс или идентификатор объекта гипертекстового документа.
    • Свойство (Property). Свойство определяет одну или несколько характеристик селектора. Свойства задают формат отображения селектора: отступы, шрифты, выравнивание, размеры и т.д.
    • Значение (Value). Значения — это фактические числовые или строковые константы, определяющие свойство селектора.
    • Описание (Declaration). Совокупность свойств и их значений.
    • Правило (Rule). Полное описание стиля (селектор + описание).

    Таким образом, таблица стилей — это набор правил, задающих значения свойств селекторов, перечисленных в этой таблице. Общий синтаксис описания правила выглядит так:

    Регистр символов значения не имеет, порядок перечисления селекторов в таблице и свойств в определении не регламентирован.

    Правила CSS¶

    Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Приведем несколько примеров написания таких правил:

    1. Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) — Serif, кегль (размер шрифта) — 14px:

    Это правило будет применено ко всем тегам

    1. Синий цвет для заголовков с первого по третий уровень:
    1. Таблицы и изображения выводить без обрамления:
    1. Ссылки в элементах списков показывать без подчеркивания:
    1. Внутренние отступы слева и справа для блоков (
    1. Все ссылки в документе отображать черным цветом и полужирным шрифтом, а в основном тексте и списках — обычным, а также выделять их зеленым цветом и подчеркивать только при наведении курсора (в описании правил использован псевдоэлемент a:hover).

    Классы¶

    Стандарт CSS представляет возможности создания именованных стилей — стилевых классов. Это позволяет ответить на такой, например, вопрос: Как применить разные стили к одному и тому же селектору?

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

    Для применения созданного класса его имя нужно указать в атрибуте class для выбранных абзацев:

    Общий синтаксис описания класса:

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

    Вот несколько примеров:

    Идентификаторы¶

    В качестве селектора может выступать идентификатор элемента гипертекста, указанный в атрибуте id. Для назначения стилей таким элементам используется синтаксис, аналогичный описанию классов, но вместо точки ставится знак # (“решетка”). Например:

    Следует помнить, что идентификаторы элементов должны быть уникальны в пределах документа.

    Группировка свойств¶

    Группировка (grouping) состоит в объединении значений родственных свойств. При этом таблица стилей становится более компактной, но предъявляются более жесткие требования к описанию правил. Ниже приведен пример обычного стиля, задающего отступы:

    Это же правило можно переписать с группировкой в следующем виде:

    Оба стиля будут отображаться одинаково.

    Группировка может применяться для таких свойств, как padding, font, border, background и еще некоторых (см. документацию CSS)

    Использование в веб-страницах¶

    Существует три способа применения таблицы стилей к документу HTML:

    • Встраивание (Inline). Этот метод позволяет применить стиль к заданному тегу HTML.
    • Внедрение (Embedded). Внедрение позволяет управлять стилями страницы целиком.
    • Связывание (Linked или External). Связанная таблица стилей позволяет вынести описание стилей во внешний файл, ссылаясь на который можно контролировать отображение всех страниц сайта.
    Мастер Йода рекомендует:  Класс-сервис для кэширования данных на PHP

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

    Встраивание стилей предоставляет максимальный контроль над всеми элементами веб-страницы. Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:

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

    Внедренные стили¶

    Внедренные стили используют тег

    <1,4>| inherit

    | inherit

    Имя Значения Описание
    background [background-color || background-image || background-repeat || background-attachment || background-position] | inherit Управление фоном элемента
    background-color | transparent | inherit Цвет фона
    background-image | none | inherit Фоновое изображение
    background-position [ [

    | ] <1,2>| [ [top | center | bottom] || [left | center | right] ] ] | inherit

    Положение фоновой картинки
    background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit Повторение фоновой картинки
    border [ border-width || border-style || ] | inherit Границы элемента
    border-collapse collapse | separate | inherit Объединение/разделение смежных границ
    border-color <1,4>| transparent | inherit Цвет границы
    border-style <1,4>| inherit Стиль линии границы
    border-top border-right border-bottom border-left [ border-top-width || border-style || ] | inherit Управление стилем заданной границы
    border-width <1,4>| inherit Толщина линии границы
    bottom |

    | auto | inherit

    Низ элемента
    clear none | left | right | both | inherit Запрет заполнения свободного пространства рядом с элементом
    clip | auto | inherit Обрезка содержимого элемента
    color | inherit Цвет содержимого
    cursor [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit Форма курсора
    display inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit Способ отображения элемента
    empty-cells show | hide | inherit Отображение пустых ячеек таблицы
    float left | right | none | inherit Свободное размещение элемента
    font [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit Управление шрифтом
    font-family [[ | ],]* [ | ] | inherit Гарнитура
    font-size | | |

    | inherit

    Кегль
    font-style normal | italic | oblique | inherit Стиль шрифта
    font-variant normal | small-caps | inherit Варианты отображения шрифта
    font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit Толщина шрифта
    height |

    | auto | inherit

    Ширина элемента
    left |

    | auto | inherit

    Положение левой границы элемента
    line-height normal | | |

    | inherit

    Высота строки
    list-style [ list-style-type || list-style-position || list-style-image ] | inherit Стиль списка
    margin <1,4>| inherit Внешний отступ
    margin-top margin-right margin-bottom margin-left | inherit Внешний отступ по заданной стороне
    padding Внутренний отступ
    padding-top padding-right padding-bottom padding-left Внутренний отступ по заданной стороне
    position static | relative | absolute | fixed | inherit Позиционирование элемента
    right |

    | auto | inherit

    Положение правой границы
    text-align left | right | center | justify | | inherit Выравнивание текстового блока
    text-decoration none | [ underline || overline || line-through || blink ] | inherit Текстовые эффекты
    text-indent |

    | inherit

    Абзацный отступ
    text-transform capitalize | uppercase | lowercase | none | inherit Начертание текста
    top |

    | auto | inherit

    Положение верхней границы элемента
    vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom |

    | | inherit

    Вертикальное выравнивание в пределах блока
    visibility visible | hidden | collapse | inherit Управление видимостью элемента
    white-space normal | pre | nowrap | inherit Управление пробелами между словами
    width |

    | auto | inherit

    Ширина элемента
    z-index auto | | inherit Порядок перехода по клавише Tab

    Позиционирование элементов¶

    Рассмотрим пример, приведенный в Листинге 4 из ЛР №1. В этом примере фрагменты содержимого размещены в блочных элементах

    Рис. 2. Вид страницы с отключенными стилями

    Такое влияние на внешний вид оказывает свойство position. Это свойство в сочетании со свойствами left, top, right, bottom, display, clear и ряда других позволяет управлять положением элементов на странице и порядком их вывода. Свойство position может принимать такие значения:

    static — нормальное положение Данный блок является обычным блоком, он отображается согласно общим правилам. Свойства ‘left’ и ‘top’ не применяются. relative — относительное позиционирование Положение блока рассчитывается в соответствии с нормальным потоком вывода. Затем блок смещается относительно своего нормального (static) положения. absolute — абсолютное позиционирование Положение блока (возможно и размер) указывается с помощью свойств ‘left’, ‘right’, ‘top’ и ‘bottom’. Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих элементов того же уровня. fixed — фиксированное положение Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно области просмотра или страницы. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано в примере:

    Управляя позиционированием, можно различным образом размещать блоки информации на странице, вплоть до создания эффектов наложения, перетекания, градиента и т.п.

    Таблицы стилей CSS

    Как я уже писал на странице «Учебник HTML», CSS отвечает за оформление страниц и разметку гипертекста. Основная идея каскадных таблиц – уменьшить код HTML и упростить работу с ним. Повторяющаяся информация записывается в отдельный файл, на который впоследствии просто ссылаются.

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

    Представьте, что код примера — это фрагмент html-страницы, на странице таких фрагментов 20. Допустим, вам понадобилось сделать 50 таких страниц. 20×50 – 1000 фрагментов получается. А через некоторое время вы решили, что мелкий шрифт надо сделать помельче, а крупный — покрупнее. Для этого вам придётся открыть в редакторе все 50 страниц и сделать в каждой из них по 20 правок. Получится очень нудно и очень долго.

    Если создавать сайт на голом HTML, то подобные примеры будут частью повседневности человека, обслуживающего этот сайт. Чтобы этого избежать, нужно пользоваться каскадными таблицами стилей. В этом случае указать, как будет выглядеть крупный и мелкий шрифт придётся всего однажды – в отдельном файле, называемом каскадная таблица стилей .

    Синтаксис каскадных таблиц CSS

    Синтаксис CSS довольно прост и имеет много общего с атрибутами тегов. Подробную информацию по всем аспектам синтаксиса можно узнать в спецификации W3C. Для CSS, как и для HTML существует своя спецификация. Перевод А.Пирамидина также имеется:

    Перевод Пирамидина А.

    Официальной на данный момент (март 2012) является версия CSS 2.1, версия CSS 3.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему CCS 3. Итак, что же собой представляет синтаксис CSS? Синтаксис похож на написание атрибутов тега:

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

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


    Селекторы CSS стилей

    Возможно, этот раздел статьи окажется немного трудным для восприятия, но селекторы штука очень важная, ибо влияют на скорость обработки таблиц стилей. Так что потерпите . Селектор указывает, к какому тегу должны быть применены указанные свойства. Его можно сравнить с адресом почтового отправления. Обозреватель проверяет селекторы на соответствие, когда выстраивает страницу в окне просмотра. Шаблоны селекторов можете посмотреть по ссылкам ниже.

    Перевод Пирамидина А.

    В селекторе в различном сочетании можно использовать несколько составляющих:

      Название тега (например, тегу

    в CSS будет соответствовать селектор P )

  • Идентификатор > > в CSS будет селектор #my_p )
  • Класс (универсальный атрибут тега

    > в CSS будет селектор .my_p )

    Ниже примеры селекторов для тегов

    Теперь подробнее. Составляющие, описанные выше, можно сочетать. Тут тоже есть несколько условий:

    1. Если в селекторе используется название тега, оно всегда идёт первым. Селектор с него начинается.
    2. Если в качестве селектора используется идентификатор, то название тега или класс указывать не нужно, поскольку >может начинаться с класса, если не указывать ID или название тега.

    Выглядит всё это так:

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

    В статье про теги HTML упоминалось о вложенности тегов. В примере выше теги

    и являются вложенными в тег

    и – его потомки. При этом

    При составлении селектора разные его части (теги, классы, идентификаторы) разделяются пробелами. Если вы переходили по ссылкам выше, то наверняка обратили внимание, что в таблице шаблонов есть также примеры с символами + и > .

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

    Как видите, указывать селекторы можно по-разному. Все селекторы выше сделают текст тега зелёным. Однако, у них у всех разная точность указания и разная скорость обработки. Это момент достаточно важный при работе с каскадными таблицами стилей.

    Чем точнее (длиннее, если по-простому) написан селектор, тем меньше вероятность, что он перекроется другим селектором или унаследует от своего родителя что-то не запланированное. С другой стороны длинный селектор будет дольше обрабатываться обозревателем, поскольку обозреватели читают селекторы справа налево. Возьмём фрагмент предыдущего примера и рассмотрим его подробнее:

    Сначала обозреватель применит стили ко всем элементам с классом .green , поскольку проще раздать 10 указаний и потом отменить 2, чем возиться с каждым по-отдельности. Затем обозреватель проверит стили для span.green – отличаются они от стилей или нет. И если отличаются, внесёт корректировки уже только для span . Так происходит потому, что span.green более точный селектор и он не должен перекрываться селектором .green . И напротив, более точный селектор должен перекрывать менее точный. Из-за этого условия всё происходит справа налево, а не наоборот. Изменим пример выше:

    Сначала обозреватель покрасит всё элементы с с классом .green зелёным, затем элементы перекрасит в красный и уже проверив вложенность в

    покрасит оставшиеся в чёрный.

    Поэтому надо всегда помнить о золотой середине и использовать составные селекторы только там, где они действительно нужны. На самом деле тема достаточно глубокая и в рамках этой статьи я не смогу раскрыть и 10-ой части нюансов, поскольку вы 100% запутаетесь тогда. Давайте вернёмся к простому и понятному – обратимся к одному из примеров прошлой статьи:

    Все заблуждаются в меру своих возможностей.

    означает следующее: тег small <размер шрифта: 8 пунктов; цвет: красный ;>результат будет такой:

    Все заблуждаются в меру своих возможностей.

    Изменим размер шрифта с 8 на 18 пунктов:

    Все заблуждаются в меру своих возможностей.

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

    Отмечу, что имя класса может быть любым, но не должно содержать пробелов:

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

    Так вот для того, чтобы определить какаой из тегов станет Васей Пупкиным, нужно воспользоваться атрибутом class . Как это выглядит на практике: в таблице стилей указывают класс

    В html-файле указывают принадлежность тега к классу vasya_pupkin :

    Все заблуждаются в меру возможностей.

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

    Правила CSS

    Кроме стилей в CSS присутствуют правила. Их четыре:

    В переводе А. Пирамидина присутствует также правило @font-face . Однако, перевод выполнен на основе версии спецификации 2.0, а в версии CSS 2.1 (оригинальная версия) это правило исключили, поэтому я тоже исключил его из описания. Все подробности по каждому из правил смотрите в спецификации:

    Каскад в CSS

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

    Знаешь и то, что победителем можно назначить и более слабое (по специфичности) правило, используя директиву !important.

    Возникает естественный вопрос: а что, если специфичности одинаковы?

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

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

    Сортировка по источнику

    Фактически, существует три возможных источника CSS-правил: стили автора, стили читателя, стили браузера.

    Перечисляю в порядке убывания приоритета:

    1. Стили автора — это тот CSS, который пишешь ты, когда делаешь страничку. Самый высокий приоритет.
    2. Стили читателя — CSS который создают под себя некоторые особо продвинутые пользователи. Однако, это бывает крайне редко.
    3. Cтили браузера — настройки-по умолчанию. Самый низкий приоритет. При граммотно составленом CSS у них практически нет шансов выиграть.

    Сортировка по важности

    Фактически все правила разделяются на группы — !important и обычные. И далее сортируются только в пределах своей группы. Это как будто козыря сравниваются только с козырями, а обычные карты — с обычными. Козырная шестерка бъет любого простого туза. Точно так и тут: правила, отмеченные, как !important всегда получат более высокий приоритет.

    Чтобы окончательно нас запутать, сортировку по важности смешали с сортировкой по источнику. Логика такая: если читатель в своей таблице отметил правило, как !important, то значит ему очень нужен этот стиль! И даже авторский !important не должен перебить такое правило. Ведь пользователь точно знает, как ему удобнее! В конечном счете страница делается для посетителей, а не для разработчика.

    В свете всего сказанного привожу список приоритетов с учетом как источника, так и важности (опять от сильных к слабым):

    1. важные объявления читателя;
    2. важные объявления автора;
    3. обычные объявления автора;
    4. обычные объявления читателя;
    5. объявления агента пользователя;

    Сортировка по специфичности

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

    Сортировка по порядку расположения

    Наконец, если важность, источник и специфичность правил совпадает, победителем считается правило, расположенное в таблице позже (ниже по тексту).

    Таким образом, порядок в CSS имеет значение! В приведенном ниже примере победит второе правило и цвет будет красный.

    Обрати, пожалуйста, внимание, что порядок следования классов в HTML роли абсолютно не играет. Что — без разницы. Победитель определяется только на основе порядка в CSS!

    Итоговый каскад

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

    1. Найти все правила, селектор которых подходит для выбора данного элемента.
    2. Разделить все объявления из найденных правил на группы согласно важности и источника:
      1. важные объявления читателя;
      2. важные объявления автора;
      3. обычные объявления автора;
      4. обычные объявления читателя;
      5. объявления агента пользователя.
    3. В пределах групп провести сортировку объявлений по специфичности.
    4. Для равных специфичностей отсортировать по очередности расположения.

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

    Вот собственно и все. Теперь, надеюсь, для тебя уже не осталось загадок в механизме наследования. И слово «каскадные» в фразе «Каскадные таблицы стилей» никогда больше не поставит тебя в тупик.

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

    Статьи по CSS

    Полезная информация о каскадных таблицах стилей (CSS), раскрывающая новые методики преобразования документов в общепринятые и удобные для восприятия пользователем формы.

    Знакомство с псевдо-классами

    В отдельных случаях без псевдоклассов просто не обойтись. Они определены в различных CSS спецификациях (CSS2 или CSS3) и без проблем поддерживаются большинством браузеров, за исключением IE.

    Знакомство с nth-child


    В данной статье мы подробно рассмотрим принцип действия CSS селектора, а точнее псевдоселектора с именем :nth-child.

    Замещаемые элементы

    Замещаемые элементы, в отличие от других элементов страницы, могут иметь истинные размеры – ширину (width) и высоту (height), значения которых определяются свойственными внешнему объекту размерами.

    Замена изображения элемента с помощью CSS

    Неординарный способ замены изображений исключительно методами CSS.

    Все, что вам известно о clearfix — неверно

    Перевод статьи Терри Кобленца Everything you Know about Clearfix is Wrong, в которой он затрагивает вопрос необоснованного использования хака clearfix и раскрывает тайну метода overflow:hidden.

    Важнейшие практические принципы CSS кодирования, которые вредят нам

    Перевод статьи Николь Салливан «Our (CSS) Best Practices Are Killing Us», в которой автор указывает на проблемы, связанные со стереотипами CSS кодирования.

    Вариант веб-страницы для печати

    Средства CSS спецификации позволяют веб-разработчикам без труда создавать различные варианты представления страниц в зависимости от способа их отображения (монитор, принтер и не только).

    URI медиа фрагменты – пространственное измерение

    В статье рассмотрен способ релизации URI медиа фрагментов, эмулирующий их поведение в пока еще не поддерживающих их браузерах.

    Улучшенный способ содержания плавающих элементов в IE с использованием CSS expression

    Перевод статьи Николаса Галлахера &laqou;Better float containment in IE using CSS expressions&raqou;.

    Три истины отзывчивого дизайна, которые вам нужно постигнуть

    Без чего ваш дизайн не может считаться отзывчивым. Три основные критерия.

    Спрайты и CSS псевдо-элементы – эффективный тандем

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

    Способы горизонтальной центровки элементов и сжатия их ширины по контенту

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

    Создание анимированной миниатюры

    В статье рассматривается способ реализации анимированных миниатюр при помощи использования технологии CSS спрайтов и jQuery кода.

    Советы по применению CSS спрайтов

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

    Сложные CSS селекторы, содержащие класс и > 21.02.2020 Alexman Alexman Статьи по CSS

    Возможные комбинации имен классов и идентификаторов в CSS селекторах.

    Слово в защиту селекторов потомков и > 21.02.2020 Alexman Alexman Статьи по CSS

    Перевод статьи Джеффри Зельдмана – In Defense of Descendant Selectors and ID Elements.

    Ширина в медиа запросах и вертикальный скроллбар

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

    Руководство по SASS для абсолютных новичков

    Статья является простейшим и в тоже время эффективным средством знакомства с SASS. В ней идеально просто разъясняются принципы и задачи использования этого CSS модуля.

    Размышления об асинхронности

    Предотвращение блокирования браузера при загрузке JavaScript кода – одна из основных задач веб-производительности.

    Пропорциональное масштабирование изображений с атрибутами размерностей

    Статья освещает один из нюансов отзывчивого дизайна, касающийся масштабирования изображений одновременно с изменениями размеров их контейнеров. Все очень просто.

    Процентные значения для CSS свойства background-position

    Перевод статьи Роджера Йоханссона «CSS background-position and percent», в которой автор затрагивает проблему связанную с использованием процентных значений для свойства background-position.

    Применение Flexbox – комбинация старой и новой версии с целью обеспечения улучшенной поддержки в браузерах

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

    Переопределение цвета выделенной текстовой области средствами CSS

    В этой статье мы рассмотрим пример применения одного из полезнейших псевдоклассов, предусмотренных спецификацией CSS3 — ::selection.

    Панель закладок средствами CSS3

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

    Опыт использования CSS хака clearfix

    Как и большинство разработчиков, я в своих проектах постоянно применяю хак clearfix. Этот CSS прием также известен как Easy Clearing Hack — метод.

    Использование технологии oEmbed

    Перевод руководства по использованию технологии oEmbed.

    Новая, микро версия хака clearfix (Micro Clearfix Hack)

    В этой статье представлен доработанный вид хака clearfix, который предусматривает минимальное использование CSS кода.

    Не используйте HTML5 секции при стилизации заголовков

    Перевод статьи Николь Салливан Don’t Style Headings Using HTML5 Sections, в которой затрагивается тема стилизации заголовков в новой HTML5 спецификации, и не только.

    Медиа запросы полосы пропускания — они нам не нужны

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

    Легкий эффект нажатой кнопки для ссылок

    все, имеющиеся ссылки при щелчке как бы «вдавливаются» внутрь страницы, смещаясь на один пиксель.

    Когда не следует применять селекторы потомков

    Перевод статьи Луиса Лазариса «When to Avoid the Descendant Selector», в которой автор еще раз поднимает вопрос оправданности использования дочерних CSS селектров.

    Какой элемент вы используете для логотипа сайта? По-прежнему ? Я, в общем-то, тоже

    Перевод статьи Гарри Робертса «Your logo is still an image… and so is mine!», в которой рассматривается оптимальный способ реализации логотипа сайта.

    Вы всё ещё используете изображение в качестве логотипа сайта? Я, в общем-то, тоже

    Перевод статьи Гарри Робертса, в которой рассматривается оптимальный способ реализации логотипа сайта.

    Как создавался сайт StartupGiraffe

    Перевод статьи, автор которой делится опытом создания креативных элементов адаптивного дизайна в рамках реального проекта – сайта StartupGiraffe.

    Исправлен Webkit баг, связанный с поддержкой анимации и трансформации псевдоэлементов

    На данный момент это уже давно известный баг движка Webkit, который не позволял применять эффект анимации или трансформации к псевдоэлементам (типа ::before и ::after).

    > 21.02.2020 Alexman Alexman Статьи по CSS

    В статье детально рассматривается вопрос актуальности использования ID атрибутов и их роль в семантике документа. Перевод.

    Хронический Divitis и > 21.02.2020 Alexman Alexman Статьи по CSS

    Зачастую в сфере веб-разработки сталкиваешься с такими терминами, которые вызывают массу вопросов. Именно к ним относятся Divitis и Classitis. Им и посвящается статья.

    Горизонтальная центровка с использованием CSS значения fit-content

    В ответ на статью Роджера Йоханссона о вариантах адаптации ширины элемента и его выравнивания по горизонтали, автор этой статьи, Каталин Росу предлагает свой метод решения проблемы.

    FOUT — побочный эффект при использовании @font-face и борьба с ним

    Использование веб-шрифтов хорошая практика, однако она имеет свои побочные эффекты. Один из них – FOUT.

    Flexbox – новая и старая интерпретация CSS3 модуля

    Перевод статьи Криса Койера, в которой автор разъясняет причины возникновения разночтений, связанных с применением CSS3 модулей компоновки шаблона веб-страницы – «флексбокс» (Flexbox).

    Фиктивные колонки

    Перевод статьи знаменитой стати Дэна Седерхольма – Faux Columns, в которой автор предлагает простой и в тоже время эффективный способ создания колоночного шаблона сайта.

    Единицы масштабирования элементов. Процентные vs вьюпортовые

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


    clearfix-reloaded и демистификация overflow:h > 21.02.2020 Alexman Alexman Статьи по CSS

    Перевод известной статьи Терри Кобленца clearfix Reloaded + overflow:hidden Demystified на вечно актуальную тему улучшения соответсвующих хаков.

    Специфика CSS специфичности

    В данной статье приводится материал, позволяющий понять принципы вычисления фактического значения специфичности CSS селекторов и определения их приоритетности.

    CSS реализация меню без использования

    Перевод статьи Крисса Койера Off Canvas Menu with CSS :target, в которой автор делится опытом реализации адаптивного меню исключительно средствами CSS.

    CSS псевдоэлементы. Полное руководство

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

    CSS приемы, которые известны не всем

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

    CSS фигуры — будущее Web

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

    CSS декларация !important

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

    Концепция Объектно Ориентированного CSS

    Объектно Ориентированный CSS (Object Oriented CSS – OOCSS) представляет собой концепцию CSS, которая предусматривает быстрое, легкое в обслуживании и отвечающее требованиям стандартов представление CSS кода.

    Что такое CSS Reset?

    Краткий ответ на этот вопрос в доступной и понятной форме содержит данная статья.

    Автоматическая отмена обтекания дочерних элементов

    Рассматриваемый в статье CSS прием уже достаточно долгое время известен как clearfix хак.

    Отзывчивые сеточные системы. Являются ли они решением?

    Перевод статьи Гарри Робертса, в которой автор представляет собственный подход создания адаптивной сеточной системы, реализованный в его же библиотеке inuit.css.

    Актуальность вендорных префиксов для свойств box-shadow и border-radius

    Нужно ли все еще применять вендорные префиксы типа -moz и -webkit при использовании ставших популярными последнее время свойств типа border-radius или box-shadow?.

    Что это — прощание с хаком clearfix?

    На горизонте появилось новое значение свойства display, которое в последствии должно избавить нас от повсеместного использования Clearfix.

    Новейшая версия Clearfix-reloaded

    Старый добрый Clearfix всегда подвергается каким-нибудь изменениям.

    Отзывчивые CSS шаблоны без медиа-запросов

    Оправдано ли медиа-запросы считаются неотъемлемой частью отзывчивого дизайна?.

    3 профессиональных совета по Flexbox

    Нюансы использования Flexbox глазами профессионала.

    Margin или padding? Размышления о том, что и где использовать

    На примере одного из распространенных случаев автор попытался найти ответ на спорный вопрос использования полей и отступов.

    CSS с душком. Возвращаемся к теме

    Вторая часть статьи Гарри Робертса о методах CSS кодирования, имеющих дурную славу.

    CSS спецификация и каскад

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

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

    Пример под рукой

    Используем тот же пример, который использовался в опросе. Я заменил color на background и использовал более приятные цвета.

    Как видите, оба блока синего цвета. Но почему? Причина этого заключается в том, что и .red, и .blue имеют одинаковый уровень специфичности. Поэтому браузер выбирает последний стиль в CSS-коде. В примере – это .blue.

    Если поменять местами объявления классов в CSS, то получим следующее:

    Выпуск №6. CSS — каскадные таблицы стилей.

    Дата публикации: 2009-07-15

    Здравствуйте, уважаемые подписчики.

    С Вами я, Андрей!

    В этом выпуске мы поговорим о CSS (каскадных таблицах стилей).

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    С помощью таблиц стилей можно указать правило отображения тега HTML в браузере.

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

    Селектор — это тэг HTML.

    Определение — это свойство тега и значение. Определение указывается в фигурных скобках, свойство и значение отделяются двоеточием(:). В конце каждого определения ставится точка с запятой (;).

    P — это селектор.

    color: #FF0000; — это определение. Определение всегда заключается в фигурные скобки, после каждого определения ставится точка с запятой.

    сolor— это название свойства (в данном случае цвет).

    #FF0000 — это значение свойства.

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

    А пока, для того чтобы понять в работе того, о чем пойдет речь в этом выпуске, воспользуемся двумя свойствами:

    color— задает цвет текста.

    background-color — задает фоновый цвет для элемента.

    Итак, рассмотрим каким образом можно встраивать таблицы стилей в документ.

    1 Способ:

    Можно задать свойство для любого тега при помощи параметра style. В этом случае селектор не нужен.

    Мы изменили фоновый цвет абзаца

    2 Способ:

    Указать свойство в заголовке документа между тегами

    Эти свойства применяются ко всему документу.

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

    Все остальные теги отобразятся без применения стилей.

    Если одинаковыми свойствами обладают несколько тегов, то их можно указать через запятую в качестве селектора.(H1, H2, p, li ).

    3 Способ:

    Способ позволяет использовать одну таблицу для форматирования нескольких документов.

    Смысл заключается в том, что все свойства записываются в отдельном файле с расширением CSS, а затем подключаются в HTML документ.

    href=»mystyle.css» — путь к файлу CSS.

    А содержимое файла строится по тем же правилам (селектор и определение).

    Код файла mystyle.css:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    4 Способ:

    Способ позволяет использовать каскадную таблицу стилей (css), лежащую на каком-нибудь сервере.

    Чтобы подключить CSS файл с какого-либо сервера нужно в заголовке документа, между тегами прописать следующее:

    @import:url(http://www.mysite.ru/style/mystyle.css);

    Вы заметили, что в 4-ом способе реализовано два способа включения таблицы стилей к документу.

    Такое допустимо, но при этом надо учитывать приоритет каждого из способов.

    Итак, расположение способов в порядке убывания их приоритетов:

    1 Способ;

    2 Способ;

    4 Способ;

    3 Способ;

    То есть, если в 3-ем или в 4-ом способе указано p , а во 2-ом или в 1-ом p , то применится к параграфам свойство p , потому что приоритет 1-ого и 2-ого способа выше, чем 3-го и 4-го.

    Пару слов о наследовании и перейдем к классам.

    Часто встречается ситуация, когда содержимое одного тега находится целиком внутри другого.

    Текст абзаца текст абзаца, выделенный жирным продолжение текста абзаца.

    То есть у нас тэг лежит полностью внутри тега

    И если мы теперь зададим стиль для параграфа, он примениться и к тегу .

    Текст абзаца красными буквамитекст абзаца красными буквами, выделенный жирным продолжение текста абзаца красными.

    Классы.

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

    Описываются классы в контейнере , а применяются к тэгам посредствам параметра CLASS.

    Мастер Йода рекомендует:  1–3 августа, Иннополис конференция IT Nights
  • Добавить комментарий