CSS

CSS

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

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

 

Здравствуйте! Сегодня после изучения как в css добавить фон к элементу переходим к созданию тени для элемента.

Свойство box-shadow позволяет создать у элемента тень. Это свойство может принимать сразу несколько значений:

 box-shadow: hoffset voffset blur spread color inset

 

  • hoffset: горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, а при отрицательном - влево

  • voffset: вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, а при отрицательном - вверх

  • blur: необязательное значение, которое определяет радиус размытия тени. Чем больше это значение, тем более размытыми будут края тени. По умолчанию имеет значение 0.

  • spread: необязательное значение, которое определяет направление тени. Положительное значение распространяет тень во вне во всех направлениях от элемента, а отрицательное значение направляет тень к элементу

  • color: необязательное значение, которое устанавливает цвет тени

  • inset: необязательное значение, которое заставляет рисовать тент внутри блока элемента

 

Здравствуйте! В прошлом уроке мы с Вами разбирались с размерами элементов, а в это мы поговорим о фоне элемента. Фон элемента описывается в CSS свойством background. Фактически это свойство представляет сокращение набора следующих свойств CSS:

  • background-color: устанавливает цвет фона

    background-color: #ff0507;
    
  • background-image: в качестве фона устанавливается изображение

    background-image: url(dubi.png);
    

    Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png.

    Также можно использовать абсолютные адреса URL, например:

    background-image: url(http://localhost.com/someimage.png);
    

    Либо можно использовать относительные адреса - относительно html-документа или корневого каталога сайта:

    background-image: url(../images/someimage.png); /* путь относительно html-документа */
    
  • background-repeat: устанавливает режим повторения фонового изображения по всей поверхности элемента

  • background-size: устанавливает размер фонового изображения

  • background-position: указывает позицию фонового изображения

  • background-attachment: устанавливает стиль прикрепления фонового изображения к элементу

  • background-clip: определяет область, которая вырезается из изображения и используется в качестве фона

  • background-origin: устанавливает начальную позицию фонового изображения

 

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

Значение по умолчанию для этих свойств - auto, то есть браузер сам определяет ширину и высоту элемента. Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

width: 150px;
width: 75%;
height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.

Здравствуйте! От внутренних отсутпов в CSS плавно переходим к границам элемента. Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

  • border-width: устанавливает ширину границы

  • border-style: задает стиль линии границы

  • border-color: устанавливает цвет границы

 

Здравствуйте! На прошлом уроке мв разбирались с  внешними полями в CSS.  На этом уроке поговорим о внутренних отступах Свойство padding задает внутренние отступы от границы элемента до его внутреннего содержимого. Как и для свойство margin, в CSS имеются четыре свойства, которые устанавливают отступы для каждой из сторон:

  • padding-top: отступ сверху

  • padding-bottom: отступ снизу

  • padding-left: отступ слева

  • padding-right: отступ справа

 

Здравствуйте! После рассмотрения блочной модели CSS переходим к внешним отступам. Свойство margin определяет отступ элемента от других элементов или границы внешнего контейнера. Существуют специальные свойства CSS для задания отступов для каждой стороны:

  • margin-top: отступ сверху

  • margin-bottom: отступ снизу

  • margin-left: отступ слева

  • margin-right: отступ справа

 

Здравствуйте!  Продолжаем разбираться со стилями 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: черный квадратик