CSS

CSS

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

Здравствуйте! На прошлом уроке мы с Вами разбирались со стилями CSS для текста, а сегодня поговорим о стилях для абзаца. Отдельная группа свойств CSS позволяет стилизовать большие группы текста, например, установить высоту строки или выравнивание текста.

line-height

Свойство line-height определяет межстрочный интервал. Для его установки можно использовать пиксели, проценты или единицы em. Как правило, применяются либо проценты, либо em. Например:

p{
    line-height: 150%;
}

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

 

text-transform

Свойство text-transform изменяет регистр текста. Оно может принимать следующие значения:

  • capitalize: делает первую букву слова заглавной

  • uppercase: все слово переводится в верхний регистр

  • lowercase: все слово переводится в нижний регистр

  • none: регистр символов слова никак не изменяется

 

Здравствуйте! В прошлом уроке мы разбирались как подключить внешние шрифты к веб-странице. В этом уроке поговорим о таком свойстве шрифта как высота.

Для установки размера шрифта используется свойство font-size:

div{
    font-size: 18px;
}

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

Не всегда стандартные встроенные шрифты, как Arial или Verdana, могут быть удобны. Нередко встречается ситуация, когда веб-дизайнер хочет воспользоваться возможностями какого-то другого шрифта, которого нет среди встроенных, но который доступен из внешнего файла. Такой шрифт можно подключить с помощью директивы font-face:

@font-face {
     
    font-family: 'Roboto';
    src: url(http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2);
}

 

Семейство шрифтов

Свойство font-family устанавливает семейство шрифтов, которое будет использоваться. Например:

body{
    font-family: Arial;
}

В данном случае устанавливается шрифт Arial.

 

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

Например, определим красный цвет для фона элемента div:

{
    background-color: red;
}

Здравствуйте! На прошлом уроке мы рассмотрели такое понятие как наследование стилей. Сегодня рассмотрим что такое каскадность в CSS.

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

 

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

 

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

input[type="text"]{
     
    border: 2px solid red;
}

 

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

  • ::first-letter: позволяет выбрать первую букву из текста

  • ::first-line: стилизует первую строку текста

  • ::before: добавляет сообщение до определенного элемента

  • ::after: добавляет сообщение после определенного элемента

  • ::selection: выбирает выбранные пользователем элементы