Css главный стиль. Введение в CSS, встраивание в HTML

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++ , он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets , он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets , то он подходит и для пользователей Microsoft Windows , вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск - Выполнить) при этом откроется диалог «Выполнить» впишите и нажмите Enter (откроется программа ), либо запустите программу через её ярлык.

Перед Вами откроется основное окно программы:

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

</span>Внутренняя таблица стилей

В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег , текст внутри такого элемента не отображается браузером. В CSS коде для добавления комментария необходимо текст комментария поместить в следующую конструкцию: /* текст комментария */ . Комментарии в CSS коде вы можете делать как внутри встроенных стилей, так и во внешних (в отдельном файле).

Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color : red ), а для абзацев голубой (color : blue ). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align : center ). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

</span>Внутренняя таблица стилей

Как хорошо, что я занимаюсь саморазвитием.

Я выучу CSS за месяц, а то и быстрее

Шаг 4: Просмотр HTML страницы в браузере

Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Подключение внешней таблицы стилей

Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.

  1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css ) в той же папке, где вы создавали HTML документ.
  2. Перенесите из предыдущего примера код CSS (содержимое тега

    This is a heading


    This is a paragraph.


    Внешние CSS

    Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

    С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

    Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе страницы HTML:

    Пример






    This is a heading


    This is a paragraph.


    Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

    Вот как выглядит "styles.css":

    body {
    background-color: powderblue;
    }
    h1 {
    color: blue;
    }
    p {
    color: red;
    }

    Шрифты CSS

    Свойство CSS color определяет используемый цвет текста.

    Свойство CSS font-family определяет используемый шрифт.

    Свойство CSS font-size определяет размер текста, который будет использоваться.

    Пример






    This is a heading


    This is a paragraph.


    Граница CSS

    Свойство CSS border определяет границу вокруг элемента HTML:

    Пример

    p {
    }

    CSS заполнение

    Свойство CSS padding определяет отступ (пробел) между текстом и границей:

    Пример

    p {
    border: 1px solid powderblue;
    padding: 30px;
    }

    Существует четыре способа задания CSS стиля для тегов HTML .

    1) Inline-стиль .

    2) Внедрённый стиль

    3) Импортированный стиль.

    4) Стиль из файла .

    И в этой статье мы разберём все четыре способа.

    Для начала первый способ - это inline-стиль . Данный стиль указывается непосредственно в самом теге. Например:

    текст

    В данном случае мы задали, чтобы элемент "текст " будет размером в 150% и выравнен по центру . Это пример inline-стиля .

    Второй способ - это внедрённый CSS стиль , то есть стиль, который задаётся в голове документа, в теге . Например, так:



    Здесь будет происходить следующее: для всех элементов внутри тега

    будет сделано следующее: их цвет будет красным и отступ сверху будет 100 пикселей.

    Третий способ задания CSS стиля - это импортированные стили . Они также, как и внедрённые задаются в голове документа, но уже из файла. Вот пример:



    Здесь ко всей странице будут применяться стили из файла "my.css ".

    И последние вид CSS стилей - это стили из файла. Данный способ является самым частым, и заключается он в подключении файла стиля через тег в голове документа. Например, таким образом:



    Данный способ очень похож на предыдущий способ, но здесь не используется тег