Чат Telegram
Группа ВКонтакте

Основы CSS

14.04.2020 в 03:26
3019
+470

Теперь пришло время поговорить о CSS (Cascading Style Sheets — каскадные таблицы стилей). Это язык для описания дополнительных стилей HTML-странички. Он позволяет описывать, какой шрифт использовать на сайте, каким размером должны быть заголовки, или каким цветом должны выделяться ссылки.

CSS-стили прописываются в теге <style>, который в свою очередь располагается в теге <head>. Вот так:

<head>
    <style>
        ... тут стили
    </style>
</head>

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

    <style>
        h1 {
            color: #ff0000;
        }
    </style>

Результат:

В целом описание стилей всегда соответствует шаблону:

селектор {
    CSS-свойство: значение;
}

Селектор - это то, для чего будет применяться стиль. В нашем случае это тег <h1>.
CSS-свойство - название свойства, в нашем случае это color. Вообще этих CSS-свойств бывает чуть больше чем дофига, но есть более-менее популярные, которые мы разберём в рамках нашего курса.
Значение - у каждого CSS-свойства есть ряд допустимых значений. Для свойства color, к примеру, это может быть как цвет в HEX-формате вроде #ff0000, так и буквенное обозначение цвета, вроде blue:

        h1 {
            color: blue;
        }

К каждому селектору можно применить сразу несколько свойств. Давайте для примера изменим размер шрифта для <h1>:

        h1 {
            color: blue;
            font-size: 36pt;
        }

Результат:

А ещё CSS-свойства в одном блоке можно применить к нескольким селекторам:

        h1, li {
            color: blue;
        }

Также можно указать в селекторе последовательность тегов, и тогда он применится только если соблюдается вложенность.

        ul li {
            color: blue;
        }

Как вы можете видеть, стили применились только к элементам li, находящимся внутри ul. А вот во втором списке ничего не поменялось.

Чтобы раскрасить нумерованные списки в другой цвет нам понадобится добавить для них отдельные стили:

        ul li {
            color: blue;
        }

        ol li {
            color: red;
        }

Классы

Помимо того, что стили можно применить к конкретному тегу, их можно применять к классам. Классы позволяют задавать стили к любому элементу в HTML, помеченному как объект этого класса. Чтобы задать абзацу класс нужно написать при открытии тега атрибут class:

<p class="myClass">

где myClass - имя класса.

Давайте зададим для абзаца про колобка и для второго списка класс с именем myClass:

<h2>Колобок</h2>
<p class="myClass">
    Небольшая сказка про мучное изделие с большими амбициями
    <br>
    Преимущества этой книги:
</p>
<ol class="myClass">
    <li>она читается быстрее первой</li>
    <li>она дешевле первой</li>
</ol>

Теперь мы можем для этого класса определить стили. Селектор для класса выглядит так же, как и для тега, только перед именем ставится точка. Вот так:

        .myClass {
            font-style: italic;
        }

Идентификаторы

Помимо классов элементам странички можно задавать идентификаторы. Идентификатор должен быть уникальным в рамках одной странички (можно указать только для одного элемента). Задаётся он с помощью атрибута id.

<p id="firstParagraph">
    Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию.<br>
    Сейчас эта книга полностью обновлена с учетом современных тенденций и технологий<br>
    и дополнена <strong>сотнями новых примеров</strong>, иллюстрирующих искусство и науку программирования.
    <br>
    Книга подойдёт для:
</p>

Задать стили для идентификатора можно указав его имя и указав перед ним шарп:

        #firstParagraph {
            background-color: #dddddd;
        }

Инлайновые стили

А ещё бывает так, что надо по-быстрому добавить свойство какому-то конкретному элементу в качестве тестирования. И лень добавлять классы/идентификаторы и вот это вот всё. В таком случае можно добавить так называемый инлайновый стиль. Для этого достаточно любому элементу присвоить атрибут style, в котором просто перечислить нужные CSS-свойства. Вот так:

<p style="color:red;">

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

Подключение файла со стилями

Чтобы не дублировать стили на каждой страничке сайта, их можно хранить в отдельном файле. А в страничках просто подключать этот файл. Давайте создадим рядом с нашими HTML-страничками файл style.css. Запишем в него все наши стили:

style.css

        ul li {
            color: blue;
        }

        ol li {
            color: red;
        }

        .myClass {
            font-style: italic;
        }

        #firstParagraph {
            background-color: #dddddd;
        }

Теперь чтобы подключить этот файл со стилями и применить их нужно написать на нашей страничке в блоке <head> следующую строчку:

<link rel="stylesheet" href="style.css">

То есть теперь секция <head> выглядит так:

<head>
    <meta charset="utf-8">
    <title>Книги для программистов</title>
    <meta name="keywords" content="книги, программирование, литература, обучение, разработка">
    <meta name="description" content="На этой странице Вы сможете познакомиться с лучшими книгами по программированию.">
    <link rel="stylesheet" href="style.css">
</head>

После этого стили применятся. Обратите внимание, что часто браузер кеширует файлы со стилями на некоторое время, чтобы не загружать их повторно. При этом вы можете вносить изменения в стили, а они при обновлении странички не будут обновляться. Чтобы они загрузились заново в браузере надо нажать сочетание клавиш CTRL+SHIFT+R.

На этом с основами CSS закончили. Не забывайте про домашку!

loader
14.04.2020 в 03:26
3019
+470
Домашнее задание
  • Изучите несколько CSS-свойств по этому справочнику
  • Примените несколько CSS-свойств к своему сайту самостоятельно
Логические задачи с собеседований