Возможности css – 12 классных функций CSS3, которые вы наконец-то можете использовать

Содержание

Возможности CSS, которые вам понравятся в 2015 — Блог Академии — HTML Academy

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

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

CSS-селекторы четвёртой версии

Спецификация селекторов третьей версии хорошо реализована в браузерах и предоставляет нам такие полезные селекторы, как :nth-child. Четвёртая же версия даёт нам гораздо больше способов разметить контент при помощи CSS.

Отрицающий псевдокласс not

Селектор :not появился в третьей версии, но в четвёртой он был обновлён. В третьей спецификации вы можете передать селектор, к которому не должны применяться CSS-свойства. Для того чтобы весь текст, кроме текста с классом .intro стал полужирным, вы можете использовать следующее правило.

В четвёртой версии вы можете передавать список селекторов через запятую.

Псевдокласс has

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

Во втором примере я совмещаю :has и :not и выбираю только те элементы li, которые не содержат элемент p:

Псевдокласс совпадения matches

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

Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.

Режимы наложения в CSS

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

В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode в значения hue и multiply, я могу применить интересный эффект к изображениям.

Использование background-blend-mode

Свойство mix-blend-mode позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h2 и затем в .box2 я устанавливаю mix-blend-mode: screen.

Использование mix-blend-mode

Режимы наложения в CSS на удивление хорошо поддерживаются современными браузерами, за исключением Internet Explorer. background-blend-mode и mix-blend-modeдоступны в Safari и Firefox, в качестве экспериментальной опции в Opera и Chrome. При осторожном использовании это как раз тот вид спецификации, с которым можно поиграться, чтобы усовершенствовать ваш дизайн, при условии, что будет запасной вариант для браузеров не поддерживающих эту возможность.

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

Узнайте больше об использовании режимов наложения в статье на CSS Tricks, на сайте Adobe и Dev Opera.

Функция calc

Функция calc() является частью модуля CSS-значений и единиц измерения третьей версии. Она даёт возможность выполнять математические вычисления прямо в CSS.

В качестве простого примера можно использовать calc() для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px от верхнего левого угла, вы должны использовать:

Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc() означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:

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

CSS-хитрости и функция calc() — забавная статья об использовании calc() для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.

CSS-переменные

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

CSS-переменные, описанные в первой версии модуля пользовательские CSS-свойства для каскадных переменных, приносят эту функциональность в CSS.

К сожалению, поддержка браузерами CSS-переменных в настоящее время ограничена Firefox.

Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.

CSS-исключения

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

Исключения позволяют окружить текстом позиционируемые элементы со всех сторон. Само по себе оно не определяет новый метод позиционирования и может быть использовано только в соединении с другими методами. В приведённом ниже примере я абсолютным позиционированием располагаю элемент, затем определяю его как исключение, задавая свойство wrap-flow и его значение both, после чего текст начинает воспринимать позицию элемента и обтекает его со всех сторон.

Исключения в Internet Explorer

Поддержка браузерами исключений и wrap-flow: both сейчас ограничена IE10+, требующим префикс -ms. Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.

CSS-фигуры

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

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

CSS-фигуры позволяют нам изогнуть текст вокруг изображения воздушного шара

Фигуры поддерживают Chrome и Safari, это означает, что вы можете начать использовать их для устройств с iOS. Во второй версии спецификации вы сможете придавать форму тексту внутри элементов при помощи свойства shape-inside, а с этим придёт много интересных возможностей.

Вы можете узнать больше о фигурах в статьях (один и два) на A List Apart.

CSS-сетки

Самую интересную тему я оставил напоследок. Я большой фанат появления спецификации по сеткам с момента первой реализации в Internet Explorer 10. CSS-сетки предоставляют нам способ создавать при помощи CSS структурные сетки и размещать на них наш дизайн.

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

В примере ниже мы объявляем сеткой элемент с классом .wrapper. Он содержит три колонки с шириной в 100px, отступом в 10px между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.

Пример сетки в Chrome

Поддержка браузерами последней спецификации сеток ограничена Chrome с отметкой «экспериментальная возможность». Существует приличная реализация начальной версии спецификации в Internet Explorer 10 и выше.

Узнать больше о сетках вы можете на моём сайте Grid by Example, где можно увидеть несколько примеров сеток, которые работают в Chrome с включёнными экспериментальными возможностями. Я также делал доклад на CSS Conf EU по сеткам и вы можете посмотреть это видео на YouTube.

У вас есть любимая новая спецификация, не рассмотренная здесь?

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

htmlacademy.ru

CSS — Википедия

У этого термина существуют и другие значения, см. CSS (значения).

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

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

Использование CSS[править | править код]

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

Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля^{[источник?]}.

Способы подключения CSS к документу[править | править код]

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

Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:

когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента <link>, включённого в элемент <head>:

<!DOCTYPE html>
<html>
   <head>
      .....
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      .....
   </body>
</html>

когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе<style> :

<!DOCTYPE html>
<html>
   <head>
      .....
      <style media="all">
         @import url(style.css);
      </style>
   </head>
</html>

когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в элеменет <head>:

<!DOCTYPE html>
<html>
   <head>
      .....
      <style>
         body { 
            color: red;
         }
      </style>
   </head>
   <body>
      .....
   </body>
</html>

когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента

<!DOCTYPE>
<html>
   <head>
      .....
   </head>
   <body>
      <p>
         .....
      </p>
   </body>
</html>

В первых двух случаях к документу применены внешние стили, а во вторых — внутренние стили.

Для добавления CSS к XML-документу последний должен содержать специальную ссылку на файл стилей:

  <?xml-stylesheet type="text/css" href="style.css"?>

Правила построения CSS[править | править код]

В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части — селектор и блок объявлений. Селектор

, расположенный в левой части правила до знака «{» определяет, на какие части документа (возможно, специально обозначенные) распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

селектор, селектор {
  свойство: значение;
  свойство: значение;
  свойство: значение;
}

В четвёртом случае подключения CSS к документу (см. список) правило CSS, являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень

объявлений («свойство CSS : значение»), разделённых знаком «;».

Виды селекторов[править | править код]

Универсальный селектор[править | править код]

* {
   margin: 0; 
   padding: 0; 
}

Селектор тегов[править | править код]

p {
   font-family: arial, helvetica, sans-serif; 
}

Селектор классов[править | править код]

.note {
   color: red; 
   background-color: yellow; 
   font-weight: bold; 
}

Селектор идентификаторов[править | править код]

#paragraph2 {
    margin: 0; 
}

Селектор атрибутов[править | править код]

 
a[href="http://www.somesite.com"] {
   font-weight: bold; 
}

Селектор потомков (контекстный селектор)[править | править код]

div#paragraph2 p.note {
   color: green; 
}

Селектор дочерних элементов[править | править код]

p.note > b {
   color: red; 
}

Селектор элементов одного уровня[править | править код]

 h2 + p {
   font-size: 24px; 
}

Селектор псевдоклассов[править | править код]

a:active {
   color: blue;
}

Селектор псевдоэлементов[править | править код]

p::first-letter {
   font-size: 32px;
}

Классы и идентификаторы элементов[править | править код]

Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента:

<!DOCTYPE html>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>
        Селекторы классов и идентификаторов
    </title>
    <style>
        p.big {
            font-family: arial, helvetica, sans-serif;
            color: red; 
        }
        
        div#first {
            background-color: silver; 
        }
    </style>
   </head>
   <body>
       <div>
          <!-- Это div c серым фоном, стилизованный по id -->
       </div>
       <p>
          <!-- Это текст красного цвета -->
       </p>
   </body>
</html>

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

Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.

Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.

Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с „.“, например, „.big“) или свойство идентификатора самого по себе (в таком случае селектор начинается с „#“, например, „#first“), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.

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

Наследование. Каскадирование. Приоритеты стилей CSS.[править | править код]

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

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

Наиболее низким приоритетом обладает стиль браузера;
Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
- Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
- Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
- Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел „виды селекторов“), содержащимися в контейнерах style данного документа. Нередки

ru.wikipedia.org

Селекторы CSS | CSS

CSS селекторы позволяют установить связь одного правила с определенным элементом HTML. А также, чтобы задавать стили для отдельных элементов, игнорируя другие:

В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.

Для примера нам нужен только один HTML-файл и таблица стилей CSS. Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Селекторы CSS</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <h2> Селекторы CSS</h2>
    <p>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
  </body>
</html>

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

Селекторы классов позволяют применять стили CSS к определенному элементу HTML. Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента <div>, но необходимо задать стили только для одного из них. Для селекторов классов нужны:

Указанный атрибут класса в элементе HTML;
Соответствующий селектор классов CSS.

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

<p> Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML. Это <strong>супер</strong> полезно.</p>

Теперь стилизуем абзац <p class=’synopsis’> в файле CSS с помощью следующего кода:

.synopsis {
  color: #7E8184;        /* Светло серый */
  font-style: italic;
}

Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

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

Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS. Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis, дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.

Атрибут class применяется не только к элементам <p> — он может быть использован для любого элемента HTML. Взяв на вооружение селекторы классов CSS, можно сделать блоки <div> и <span> намного более полезными. Мы можем использовать их для создания, как отдельных элементов, так и произвольных разделов веб-страницы:

Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div. Добавьте следующий код в файл styles.css:

.button {
  color: #FFF;
  background-color: #5995DA;    /* Синий */
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;    /* Темно-серый */
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Конечно, для этого нам нужен соответствующий атрибут класса. Измените <div> в файле selectors.html на следующий код:

<div>Кнопка Один</div>

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

Помните, что <div> не изменяет семантическую структуру страницы. Это делает его отличным инструментом для определения представляемой структуры веб-страницы. Обертывая HTML-элементы в теги <div>, можно создать сайт с помощью более крупных фрагментов, не влияя на то, как поисковые системы просматривают наш контент:

Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:

<body>
<div>  <!-- Добавьте это -->
<h2> Селекторы CSS</h2>
    <p >Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны,, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
</div>  <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
  width: 600px;
  margin: 0 auto;
}

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

Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.

Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы <div>, ничего из этого не было бы возможно.

Один и тот же класс может применяться к нескольким элементам в рамках одного HTML-документа. Это означает, что можно использовать произвольные объявления CSS везде. Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:

<div>Кнопка Один</div>
<div>Кнопка Два</div>

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

Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу. Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:

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

<div>Кнопка Два</div>

Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action (обязательно добавьте этот код после правила .button):

.call-to-action {
  font-style: italic;
  background-color: #EEB75A;    /* Желтый */
}

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

Это добавление нового объявления по сравнению с исходным правилом .button — font-style;
Переопределение существующего в классе .button стиля — background-color.

Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button, применялось бы это правило, и кнопка осталась бы синей.

Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются «одинаково», а приоритет определяется исключительно порядком размещения правил в файле styles.css.

Другими словами, следующие элементы эквивалентны:

<!-- В результате элементы будут отображаться на странице одинаково -->
<div>Кнопка Два</div>
<div>Кнопка Два</div>

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

Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:

.synopsis em {
  font-style: normal;
}

Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:

h2 em {
  /* определенные стили */
}

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

/* Старайтесь избегать такого */
.article h3 .subheading em {
  /* Конкретные стили */
}

Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML:

<div>
  <h3>
    <span>Это <em>на самом деле</em> особенный текст.</span>
  </h3>
</div>

Если захотите применить эти стили к заголовку <h3>, который не был обернут в тег <div class = ‘article’>, придется здорово поломать голову. Та же ситуация, если вы захотите применить их к заголовку <h4>.

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

Классический пример — это ссылка. Веб-разработчик создает элемент <a href>. После того как браузер отобразил его, пользователи могут взаимодействовать с этой ссылкой: навести на нее курсор мыши, кликнуть ссылку и перейти по ней:

Псевдоклассы CSS предоставляют механизм для подключения к таким действиям пользователя. В любой момент времени элемент <a href> может находиться в нескольких состояниях, и можно использовать псевдоклассы для определения отдельных стилей для каждого из этих состояний. Можно представить их как селекторы классов, которые не нужно писать самостоятельно, потому что они встроены в браузер.

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

:link — ссылка, по которой пользователь еще не переходил;
:visited — ссылка, по которой пользователь переходил раньше;
:hover — ссылка, на которую пользователь навел курсор мыши;
:active — ссылка, нажатая мышью (или пальцем).

Рассмотрим эти псевдоклассы, добавив следующие правила в CSS (также обратите внимание на то, что мы используем для обозначения цветов ключевые слова, а не шестнадцатеричные коды):

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: aqua;
  text-decoration: underline;
}
a:active {
  color: red;
}

Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited, когда мы изменим атрибут href на URL-адрес, который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.

Добавьте это правило ниже предыдущего фрагмента кода:

a:visited:hover {
  color: orange;
}

Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она «перекрашивается» в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS, о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.

Можно исправить это с помощью CSS псевдоселектора a:visited:active. Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action, порядок, в котором правила определяются в файле styles.css, имеет значение:

a:visited:active {
  color: red;
}

Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.

Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button. Это позволит создавать кнопки, которые ведут куда-то.

Сначала нужно изменить кнопки, чтобы они стали элементами <a href>, а не просто элементами <div>, как показано ниже:

<a href='nowhere.html'>Кнопка Один</a>
<a href='nowhere.html'>Кнопка Два</a>

Если вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что <a> является встроенным элементом, а также имеет значение цвета по умолчанию:

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

Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

.button:link,                 /* Измените это */
.button:visited {             /* Измените это */
  display: block;             /* Добавьте это */
  text-decoration: none;      /* Добавьте это */
  color: #FFF;                /* Все остальное остается без изменений */
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.

.button:hover,
.button:visited:hover {
  color: #FFF;
  background-color: #76AEED;  /* Light blue */
}

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

.button:active,
.button:visited:active {
  color: #FFF;
  background-color: #5995DA;  /* Blue */
}

Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.

Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более «специфичен», чем текущее правило .call-to-action, поэтому он имеет приоритет.

Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим (убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS):

.call-to-action:link,
.call-to-action:visited {
  font-style: italic;
  background-color: #EEB75A;     /* Желтый */
}
.call-to-action:hover,
.call-to-action:visited:hover {
  background-color: #F5CF8E;     /* Светло-желтый */
}
.call-to-action:active,
.call-to-action:visited:active {
  background-color: #EEB75A;     /* Желтый */
}

Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов <a>, поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

Например, мы могли бы использовать :last-of-type, чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

p:last-of-type {
  margin-bottom: 50px;
}

Это позволяет не затрагивать первые два элемента <p> на странице, не добавляя для последнего абзаца новый атрибут класса:

Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis. Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом <p>. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов <p> в <div class=’synopsis’>, нам пришлось бы переписать наш CSS-код. С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML. Это дает нам четкое разделение контента от представления.

Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент <p> в каждом элементе контейнера.

У нас есть один общий <div>, который обертывает контент (.page), поэтому для нас это не проблема. Но что произойдет, если мы добавим следующий код в нижнюю часть элемента .page:

<div>
  <p>If this page had a sidebar...</p>
  <p>We’d have some problems with pseudo-classes.</p>
</div>

Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент <p> здесь также будет соответствовать p:first-of-type, потому что область применения псевдокласса ограничена родительским элементом.

Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый <p> в контейнере <div class=’page’>, то нужно ограничить область его применения с помощью селектора дочерних элементов. Например:

.page > p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

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

CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.

Вместо атрибута class для любого элемента HTML, используется атрибут id. Попробуйте добавить идентификатор ко второй кнопке:

<a href='nowhere.html'>Кнопка Два</a>

Соответствующий селектор CSS должен начинаться с символа хэша (#). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:

#button-2 {
  color: #5D6063;  /* Dark gray */
}

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

/* (Это тяжело поддерживать) */
#button-2,
#button-3,
#checkout-button,
#menu-bar-call-to-action {
  color: #5D6063;
}

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

Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:

Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код. Обратите внимание, что можно полностью опустить URL-адрес, если он указывает на другой раздел той же веб-страницы:

<!-- С той же страницы -->
<a href='#button-2'>Go to Button Two</a>
<!-- С другой страницы -->
<a href='selectors.html#button-2'>Go to Button Two</a>

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

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

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

Но не все селекторы CSS равнозначны. «Специфичность CSS» — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.

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

.call-to-action:link,
.call-to-action:visited {
  background-color: #D55C5F;    /* Красный */
}

Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action:

#button-2 {
  background-color: #D55C5F;    /* Красный */
}

CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция «порядок имеет значение» работает только тогда, когда все правила имеют одинаковую специфичность:

Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:

•	#button-2
•	.button:link и .synopsis em (они равнозначны)
•	.button
•	a:link
•	a

Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием «BEM». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

В этой статье вы получили практический опыт работы с CSS селекторами классов, селекторами потомков, псевдоклассами, стилями ссылок и селекторами идентификаторов. Цель всех, описанных в этой статье приемов – обеспечить возможность указать определенный HTML-элемент из CSS-кода. Селекторы классов являются самыми универсальными и имеют наименьшее количество недостатков.

Данная публикация представляет собой перевод статьи «css selectors» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Css свойства оформления сайта: обзор самых основных

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

Что нужно знать для начала

Многие ошибочно называют свойства в css тегами. Так вот, это не совсем правильно. Теги – это команды html языка, и только его одного – все они пишутся в угловых скобках. В css же никаких тегов не нужно. Рассмотрим например, типичные правила для оформления веб-страницы, прописанные в таблице стилей:

body{ background: #fff; color: #ccc; … }

body{

background: #fff;

color: #ccc;

…

}

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Стили для текстового содержимого

Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: Размер шрифта в html, Как задать цвет шрифта в html, Как задать шрифт в html.

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

Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.

Отображение на экране

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

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

Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)

Inline- преобразование в строчный элемент.

Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).

Table — преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)

None – элемент исчезает со страницы и не оставляет никаких следов, как будто бы его на ней и не было.

Опять же, это не все значения, только самые основные.

Свойства размера

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Width – ширина

Height – высота

Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.

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

Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:

*{ box-sizing: border-box; }

box-sizing: border-box;

}

В итоге теперь, когда вы будете определять ширину через width, в нее автоматически будут включаться внутренние отступы и рамка. Рамку задают с помощью параметра border. Ее тоже можно определить как для всех сторон, так и для каждой отдельно. Синтаксис таков: border: ширина стиль цвет;

Соответственно, записав так:

div{border: 3px solid blue;}

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

Цвет и фон

Это основные параметры, которые отвечают за восприятие нами информации. В значении в этим свойствам записывается одно и то же – цвет, который можно определить с помощью ключевых слов, в шестнадцатеричном коде или каком-то цветовом формате (чаще всего rgb). Единственное отличие – цвет определяется с помощью свойства color, а фон – с помощью background.

CSS стили внутри тега – так тоже можно

Правильно будет создавать отдельный файл формата css и в нем писать все необходимые стили, но также существует возможность встроить все стили в html, в один тег. Этот тег – style. Он парный, писать его нужно обязательно в пределах тега head. Используется так:

<style>

font-size: 14px;

}

… другие стили

</style>

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Несколько причин использовать таблицу стилей CSS. Возможности и функции CSS.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Уроки CSS. В этой рубрике уже есть публикации CSS правила и CSS синтаксис, CSS свойства. Я хочу поговорить о том, почему просто необходимо использовать таблицу стилей CSS и о возможностях CSS. Давайте вспомним две публикации из рубрики CSS меню: горизонтальное CSS меню для сайта и Горизонтальное выпадающее CSS меню, вертикальное выпадающее CSS меню. Там вы наглядно можете увидеть всю простоту и легкость оформления при помощи каскадных таблиц стилей CSS.

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

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

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

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

Возможности CSS или почему использовать HTML атрибуты – это смертный грех.

Содержание статьи:

Конечно, использовать HTML атрибуты приходится и очень часто, например, когда вы создаете рассылку на e-mail, вы никуда просто не денетесь от тегов <font>, <span>, тегов логического форматирования и тегов непосредственного форматирования. Часто используются атрибуты: href, id, class, title, onclick и т.д., в общем, все HTML атрибуты, которые относятся к группе универсальных HTML атрибутов и атрибутов событий HTML.

Но поверьте, использовать атрибуты: color, background и пр. для оформления страниц вашего сайта – это смертный грех! Во-первых, такие страницы не будут валидны, во-вторых вы дико увеличиваете объем кода ваших страниц, а соответственно и объем работы и затраченное времени, а время – деньги.

Но зачем что-то говорить? Давайте лучше посмотрим на примере возможности таблицы стилей CSS. Давайте создадим HTML заголовок <h2>:

<h2>Самый главный заголовок</h2>

А наш заказчик нам говорит: хочу, чтобы все заголовки моего сайта были синего цвета, фон вокруг заголовка был серым, он обязательно должен быть написан курсивным шрифтом, заголовок должен быть подчеркнут. Да, в HTML есть все средства, чтобы это сделать, но чтобы это сделать, помимо тега <h2> нам необходимо использовать теги <u> и <font> и массу HTML атрибутов. Все, что я написал выше в таблице стилей CSS уместится в одно CSS правило:

h2{ color:#555; font: italic 2 em Times; text-decoration:underline; background:gray; }

h2{

color:#555;

font: italic 2 em Times;

text-decoration:underline;

background:gray;

}

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

h2{ color:#555; font: italic 2 em Times; text-decoration:underline; background:gray url(newpict.png) repeat x; border: 2px solid orange; margin-bottom:0; padding: 7px; }

h2{

color:#555;

font: italic 2 em Times;

text-decoration:underline;

background:gray url(newpict.png) repeat x;

border: 2px solid orange;

margin-bottom:0;

padding: 7px;

}

Все стало вообще круто, при помощи таблицы стилей CSS мы сделали следующее: вокруг заголовка появилась рамка оранжевого цвета, фоном заголовка стала картинка, которая будет повторяться, если потребуется по оси Х, рамка будет отстоять от заголовка как минимум на 7 пикселов, у заголовка в нижней части элемента есть пустое пространство, и мы его удалили. Я надеюсь, что убедил вас в том, что функций у CSS действительно много.

Простота и легкость CSS стилей. Уменьшаем объем кода при помощи CSS. Функции CSS.

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

Допустим, у нас есть HTML документ, в котором очень много заголовков второго и третьего уровня, и мы хотим, чтобы текст заголовков второго уровня был зеленым, а текст заголовков третьего уровня был красным. Чтобы изменить цвет текста средствами HTML мы должны использовать тег <font> и атрибут color для каждого заголовка, то есть для каждого элемента <h3> и <h4>(HTML цвета, таблица цветов RGB):

<h3><font color=”green”>Второй по важности заголовок</font></h3> <h4>><font color=”red”>Третий по важности заголовок</font></</h4> <h3>Второй по важности заголовок</h3> <h4>Третий по важности заголовок</h4> <h3>Второй по важности заголовок</h3> <h4>Третий по важности заголовок</h4> <h3>Второй по важности заголовок</h3> <h4>Третий по важности заголовок</h4>

<h3><font color=”green”>Второй по важности заголовок</font></h3>

<h4>><font color=”red”>Третий по важности заголовок</font></</h4>

<h3>Второй по важности заголовок</h3>

<h4>Третий по важности заголовок</h4>

<h3>Второй по важности заголовок</h3>

<h4>Третий по важности заголовок</h4>

<h3>Второй по важности заголовок</h3>

<h4>Третий по важности заголовок</h4>

Я не мазохист, поэтому не буду изменять цвет всех заголовков средствами HTML, а воспользуюсь возможностями каскадной таблице стилей CSS:

h3{ color: green; } h4{ color:red; }

h3{

color: green;

}

h4{

color:red;

}

Все, теперь все HTML заголовки второго уровня на странице будут зеленые, а заголовки третьего уровня красный. Более того, если вам захочется поменять цвет заголовков, то вы просто откроете таблицу стилей CSS и измените всего лишь одну строчку, а не 20 или 30 строк. Точнее, мы просто изменим одно единственное CSS правило и всё!

Но я подозреваю, что вам этого мало, хорошо, давайте так: помните пример из предыдущего раздела с заголовком первого уровня. Представим ситуацию, заказчик говорит: хочу, чтобы все заголовки на сайте выглядели так же, как и заголовок первого уровня. Ну вот давайте, пишите теги <font>, <u>, пишите HTML атрибуты, да ладно, шучу я, достаточно просто изменить одну строку в таблице стилей CSS, просто добавить CSS селекторы к существующему CSS правилу:

h2, h3, h4, h5, h5, h6{ color:#555; font: italic 2 em Times; text-decoration:underline; background:gray url(newpict.png) repeat x; border: 2px solid orange; margin-bottom:0; padding: 7px; }

h2, h3, h4, h5, h5, h6{

color:#555;

font: italic 2 em Times;

text-decoration:underline;

background:gray url(newpict.png) repeat x;

border: 2px solid orange;

margin-bottom:0;

padding: 7px;

}

Теперь все заголовки на web-странице будут выглядеть одинаково, а те, кто считает, что HTML атрибуты понятней и проще для оформления, пусть попробуют поставить таймер и засечь за какое время они зададут стили для 20-30 заголовков на странице при помощи HTML, у меня на это ушло 3 секунды.

Обычно, все CSS стили хранятся в одном файле, и это очень удобно, потому что так проще изменять отображение web-страниц, проще редактировать код. Конечно, вы можете разбить свою таблицу стилей на несколько файлов, но вопрос: зачем? Чтобы потом вспоминать в каком файле что находится? Или чтобы увеличить время загрузки страницы и формирование ее браузером? Или чтобы увеличить объем кода HTML документа, ведь каждую таблицу стилей нужно подключить.

Применение CSS стилей для нескольких документов. CSS файл.

Помимо того, что вы можете объединять CSS стили и CSS правила в один документ, вы можете использовать одну таблицу стилей CSS сразу для большого числа документов. Вы можете создать один CSS файл и подключать его к различным HTML документам, точнее импортировать CSS файл во множество документов. Именно таким образом сейчас оформляются все сайты, создаются темы для WordPress, шаблоны для Joomla и темы Drupal.

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

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

zametkinapolyah.ru

Что такое CSS, для чего нужны стили CSS

CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

Зачем используется CSS

Назначение CSS – отделять то, что задает внешний вид страницы, от ее содержания. Если документ создан только с использованием HTML, то в нем определяется не только каждый элемент, но и способ его отображения (цвет, шрифт, положение блока и т. д.). Если же подключены каскадные таблицы стилей, то HTML описывает только очередность объектов. А за все их свойства отвечает CSS. В HTML достаточно прописывать класс, не перечисляя все стили каждый раз.

Такая технология:

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

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

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

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

Правило состоит из селектора и блока объявлений.

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс {свойство: значение;}». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор {свойство: значение;}». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

Подключение CSS

CSS можно связать с HTML несколькими способами:

внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
добавить тег <style> с атрибутом type=»text/css»;
подключить внешнюю таблицу стилей: <link rel=»stylesheet» href=»путь до style.css» type=»text/css»/>.

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

wiki.rookee.ru

30 селекторов CSS, которые нужно запомнить

От автора: Итак, вы выучили основные селекторы css: id, class, наследование – и довольны? Если да, то вы упускаете гигантский объем гибкости. Хотя многие селекторы, упомянутые в этой статье, являются частью спецификации CSS3 и, следовательно, имеются в наличие только на современных браузерах, вы должны их запомнить.

1.*

* { margin: 0; padding: 0; }

* {

margin: 0;

padding: 0;

}

Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.

Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Звездочку * также можно использовать для дочерних селекторов.

#container * { border: 1px solid black; }

#container * {

border: 1px solid black;

}

Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

2. #X

#container { width: 960px; margin: auto; }

#container {

width: 960px;

margin: auto;

}

Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.

Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?

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

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

3. .X

Это — селектор class. Разница между id и class’ами в том, что при помощи последнего вы можете выбирать множественные элементы. Используйте class’ы, когда хотите применить стили к группе элементов. В качестве альтернативы используйте id для нахождения иголки в стогу сена и примените стиль к одному отдельному элементу.

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

4. X Y

li a { text-decoration: none; }

li a {

text-decoration: none;

}

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

Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

5. X

a { color: red; } ul { margin-left: 0; }

a { color: red; }

ul { margin-left: 0; }

Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul {}.

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

6. X:visited and X:link

Для выборки всех тэгов-привязок, на которые еще нужно щелкнуть, мы пользуемся псевдоклассом :link.

Как альтернатива, у нас имеется псевдокласс :visited, который, как подразумевается, позволяет нам применять специальные стили только к тэгам-привязкам на странице, по которой уже щелкнули, или которую посетили.

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

7. X + Y

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

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

8. X>Y

div#container > ul { border: 1px solid black; }

webformyself.com

Возможности css – 12 классных функций CSS3, которые вы наконец-то можете использовать

Возможности CSS, которые вам понравятся в 2015 — Блог Академии — HTML Academy

CSS-селекторы четвёртой версии

Отрицающий псевдокласс not

Псевдокласс has

Псевдокласс совпадения matches

Режимы наложения в CSS

Функция calc

CSS-переменные

CSS-исключения

CSS-фигуры

CSS-сетки

У вас есть любимая новая спецификация, не рассмотренная здесь?

CSS — Википедия

Использование CSS[править | править код]

Способы подключения CSS к документу[править | править код]

Правила построения CSS[править | править код]

Виды селекторов[править | править код]

Универсальный селектор[править | править код]

Селектор тегов[править | править код]

Селектор классов[править | править код]

Селектор идентификаторов[править | править код]

Селектор атрибутов[править | править код]

Селектор потомков (контекстный селектор)[править | править код]

Селектор дочерних элементов[править | править код]

Селектор элементов одного уровня[править | править код]

Селектор псевдоклассов[править | править код]

Селектор псевдоэлементов[править | править код]

Классы и идентификаторы элементов[править | править код]

Наследование. Каскадирование. Приоритеты стилей CSS.[править | править код]

Селекторы CSS | CSS

Css свойства оформления сайта: обзор самых основных

Что нужно знать для начала

Стили для текстового содержимого

Отображение на экране

Свойства размера

Цвет и фон

CSS стили внутри тега – так тоже можно

PSD to HTML

Несколько причин использовать таблицу стилей CSS. Возможности и функции CSS.

Возможности CSS или почему использовать HTML атрибуты – это смертный грех.

Простота и легкость CSS стилей. Уменьшаем объем кода при помощи CSS. Функции CSS.

Применение CSS стилей для нескольких документов. CSS файл.

Что такое CSS, для чего нужны стили CSS

Зачем используется CSS

Развитие CSS

Структура языка

Селекторы

Блок объявлений

Подключение CSS

30 селекторов CSS, которые нужно запомнить

1.*

Совместимость

2. #X

Совместимость

3. .X

Совместимость

4. X Y

Совместимость

5. X

Совместимость

6. X:visited and X:link

Совместимость

7. X + Y

Совместимость

8. X>Y

Добавить комментарий Отменить ответ

Рубрики

Рубрики