CSS

CSS

Уроки CSS рассчитаны на тех, кто знает HTML. Здесь Вы найдете уроки о том как сделать Ваши сайты стильными, красивыми и добавить эффекты анимации на Ваши страницы.

В прошлом уроке мы рассмотрели псевдоклассы дочерних элементов. В этом уроке разберем псевдоклассы форм.

Ряд псевдоклассов используется для работы с элементами форм:

  • :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)

  • :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)

  • :checked: выбирает элемент, если у него не установлен атрибут checked (для флажков и радиокнопок)

  • :default: выбирает элементы по умолчанию

  • :valid: выбирает элемент, если его значение проходит валидацию HTML5

  • :invalid: выбирает элемент, если его значение не проходит валидацию

  • :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)

  • :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне

  • :required: выбирает элемент, если у него установлен атрибут required

  • :optional: выбирает элемент, если у него не установлен атрибут required

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

  • :first-child: представляет элемент, который является первым дочерним элементом

  • :last-child: представляет элемент, который является последним дочерним элементом

  • :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере

  • :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере

  • :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент

  • :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца

  • :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер

  • :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

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

Список доступных псевдоклассов:

Селекторы элементов одного уровня или смежных элементов позволяют выбрать элементы, которые находятся на одном уровне вложенности. Иногда такие элементы еще называют сиблинги (siblings) или сестринскими элементами.

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

<body>
    <h2>Заголовок</h2>
    <div>
        <p>Текст</p>
    </div>
</body>

 

Здравствуйте! Продолжаем изучение css селекторов и на очереди селекторы потомков.

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

Определение стиля начинается с селектора. Например:

div{
    width:50px; /* ширина */
    height:50px; /* высота */
    background-color:red; /* цвет фона */
    margin: 10px; /* отступ от других элементов */
}

Любой html-документ, сколько бы он элементов не содержал, будет по сути "мертвым" без использования стилей. Стили или лучше сказать каскадные таблицы стилей (Cascading Style Sheets) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.

Что такое CSS?

Возможно, вы уже слышали о CSS, но не знаете, что это такое? В этом уроке вы узнаете, что такое CSS и что он может сделать для вас.
CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.

Страница 7 из 7