Урок 110. Основы CSS | Учимся управлять внешним видом сайта

Урок 110. Основы CSS | Учимся управлять внешним видом сайта

Привет!

В далеком 2011 году, когда я заканчивал 8 класс, учитель информатики и мой классный руководитель в одном лице, собрала 4-х заядлых геймеров, в числе которых был и Ваш покорный слуга. Собрала она нас для того, чтобы научить созданию сайтов, вот тогда-то я впервые познакомился и с основами HTML (прошлый урок), и с основами CSS, о которых Вы узнаете прямо сейчас.

CSS (Cascading Style Sheets, в переводе «каскадные таблицы стилей») — язык управления внешним видом HTML-документов (страниц сайтов). То, что Вы видите каждый день в окне браузера создано таблицами каскадных стилей: цвет фона, различных элементов сайта задан специальными свойствами CSS; каким шрифтом написан текст задано специальными свойствами CSS; все, что Вы видите сейчас, читая этот урок, задано свойствами CSS.

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

Погнали!

Селекторы CSS

Таблица стилей CSS состоит из стилевых правил, а правила, в свою очередь, состоят из двух элементов:

  1. Селектора;
  2. Блока объявления.

В блок объявления входят: свойство и значение свойства, но об этом чуть позже.

Основы CSS для начинающих | CSS правило

Сейчас же подробнее остановимся на селекторах. Существует несколько видов:

  • Селектор тегов. В качестве селектора служит HTML-тег, к которому должно быть применено стилевое правило;
    div{width:100px; height:100px}
  • Селектор классов. В качестве селектора служит класс элемента, который указывается в HTML-документе. Перед именем класса ставится точка;
    .block{width:100px; height:100px}
  • Селектор идентификаторов. В качестве селектора указывается идентификатор элемента, указанный в HTML-документе. Перед именем идентификатора ставится знак «решетка» (#).
    #block{width:100px; height:100px}

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

Об оформлении правил CSS говорить не буду, все скажет картинка выше.

Все стилевые правила CSS находятся в файле style.css. Поищите его.

Свойства и значения CSS

В одном CSS-правиле может быть указано несколько свойств и их значений. Перечисляются они через знак «точка с запятой» (;):

.block{width:100px; height:100px; background:#fff}

Для легкости восприятия информации, свойства буду перечислять по их назначению, то есть для фона — отдельно, для текста — отдельно и так далее.

Начнем с фона.

Фон

Для управления фоном сайта или отдельного элемента существует несколько свойств

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

 background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению, 
                                                    повторение фона по вертикали */
  • background-image — устанавливает фоновое изображение сайт или элемента. Значения: url (путь к файлу) | none (отмена фонового изображения) | inherit (наследование родительского значения). Пример:
    backround-image: url(images/hand.png);
  • background-repeat — управление повторением фонового изображения сайта или элемента. Значения:
    • no-repeat (без повторений фонового изображения);
    • repeat (повтор изображения);
    • repeat-x (повтор изображения по горизонтали);
    • repeat-y (повтор изображения по вертикали);
    • inherit (наследование родительского изображения).
      backround-repeat: no-repeat;
  • background-position — управление позицией фонового изображения. Значения:
    • left (лево);
    • right (право);
    • center (центр);
    • top (вверх);
    • bottom (вниз).
      backround-position: left;
  • background-color — управление цветом фона сайта или отдельного элемента. Значение: кодовое значение определенного цвета. Найти его можно с помощью специальных онлайн-сервисов (ColorScheme).
    backround-color: #fff; /*Белый цвет фона*/

Первое основное свойство CSS разобрали.

Шрифт

Для управления внешним видом текста, как и фоном, существует несколько свойств.

  • font — основное свойство шрифта. Может объединить в себе несколько характеристик;
  • font-size — размер шрифта. Задается в процентах, пикселях (более привычно), пункты (pt);
    font-size: 14px;
  • font-weight — толщина шрифта. Значения:
    • bold — полужирный;
    • normal — нормальное начертание.
      font-weight:bold;
  • font-family — указывается семейство шрифтов. В качестве значения выступает название семейства шрифта;
    font-family: Impact;
  • font-style — данное свойство задает начертание шрифта. Значения: normal (обычное начертание) и italic (курсив);
    font-style: italic;

Свойства текста

Одной из основ CSS является управление свойствами текста: выравнивание, цвет, высота строки, расстояние между буквами.

  • text-align — горизонтальное выравнивание текста. Значение: justify (по ширине), center (по центру), left (по левому краю), right (по правому краю)
    text-align: left;
  • color — цвет текста. В качестве значения используется кодовое значение цвета, также можно использовать английские значение текстов (red, white, black)
    color: red;
  • line-height — высота строки. В качестве значения можно использовать как пиксели (px) и проценты (%), так и специальные множитель (1.5 — полуторный межстрочный интервал)
    line-height: 1.5;
  • letter-spacing — интервал между символами. Значение можно выставить пикселями и прописать normal (нормальный интервал)
    letter-spacing: 3px;

Выравнивание элемента

Выравнять по правому или левому краю любой элемент сайта можно с помощью одного стилевого свойства — float. Значения: left (по левому краю), right (по правому краю).

float: left;

Обрамление элемента

С помощью стилевого свойства «border» можно задать обрамление, видимые границы. Можно указать несколько значений: толщину границы (px, %), цвет границы (кодовое значение цвета), стиль границы. Значения стилей границы определяют ее внешний вид:

Основы CSS для начинающих | Значения свойства "border"

Также можно задать границы для отдельной стороны элемента следующими свойствами:

  • border-bottom — нижняя граница элемента;
  • border-top — верхняя граница элемента;
  • border-right — граница с правой стороны элемента;
  • border-left — граница с левой стороны элемента.

Значения для вышеперечисленных задаются точно также, как и для основного свойства.

border: 1px solid #000;

Отступы

Отступы между элементами задаются свойством «margin».

  • margin — задает отступы элемента с каждой стороны. Может содержать несколько значений, которые указываются пикселями или процентами;
    margin: 5px (отступ сверху) 5px (отступ справа) 5px (отступ снизу) 5px (отступ слева);
  • margin-left — отступ с левой стороны;
  • margin-right — отступ с правой стороны;
  • margin-top — отступ сверху;
  • margin-bottom — отступ снизу.

Поля вокруг элемента

Поля вокруг элемента устанавливаются свойством «padding«. Указывается точно так же, как и отступы (margin) и имеет свойства, устанавливающие поля по одной одной стороне: padding-left, padding-right, padding-top, padding-bottom.

padding: 10px 10px 10px 10px;

Размер элемента

Можно установить высоту и ширину элемента свойствами «width» — ширина и «height» — высота. В качестве значений выступают числовые значения в пикселях или процентах. Также можно установить максимально и минимально возможные значения ширины и высоты элемента с помощью свойств: max-width, min-width, max-height, min-height.

width:100px;
height:200px;

Вот и разобрали основы CSS. Я сам знаю только то, что перечислил выше, поэтому строго не судите.

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

Надеюсь, что я не зря сидел несколько часов над написанием данного материала.

Завтра мы попрактикуемся в редакторе Notepad++, будьте готовы.

До завтра!

Пост опубликован: 18/04/2017


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *