CSS

CSS

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

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

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

 

Здравствуйте! От стилизации списков плавно переходим к заданиям стилей для таблиц. В этом уроке мы рассмотрим стили для таблиц.

CSS предоставляет ряд свойств, которые помогают стилизовать таблицу:

  • border-collapse: устанавливает, как будет стилизоваться граница смежных ячеек

  • border-spacing: устанавливает промежутки между границами смежных ячеек

  • caption-side: устанавливает положение элемента caption

  • empty-cells: задает режим отрисовки для пустых ячеек

  • table-layout: определяет размеры таблицы

 

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

CSS предоставляет специальные свойства по стилизации списков. Одним из таких свойств является list-style-type. Оно может принимать следующие значения для нумерованных списков:

  • decimal: десятичные числа, отсчет идет от 1

  • decimal-leading-zero: десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99

  • lower-roman: строчные латинские цифры, например, i, ii, iii, iv, v

  • upper-roman: заглавные латинские цифры, например, I, II, III, IV, V…

  • lower-alpha: строчные латинские буквы, например, a, b, c..., z

  • upper-alpha: заглавные латинские буквы, например, A, B, C, … Z

Для ненумерованных списков:

  • disk: черный диск

  • circle: пустой кружочек

  • square: черный квадратик

 

Здравствуйте! На прошлом уроке мы с Вами разбирались со стилями 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 действует механизм каскадности, которую можно определить как набор правил, определяющих последовательность применения множества стилей к одному и тому же элементу.