Здравствуйте, уважаемые читатели сайта remontcompa! Меня зовут Роман Нахват и я представляю вашему вниманию цикл статей по языку стилей CSS3. Аббревиатура CSS произошла от английского Cascading Style Sheets, что в переводе означает каскадные таблицы стилей. Стилем или CSS называется некоторый набор параметров форматирования, применяемый  к элементам HTML документа, чтобы изменить их внешний вид. Сам по себе HTML является лишь стандартным языком HTML документов и используется для структурирования содержимого  HTML страницы, поэтому язык  HTML является лишь первым этапом в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS, чем мы с вами и займёмся. Добавить стили на веб-страницу можно несколькими способами. Каждый способ отличается своими возможностями и назначением. В данной статье мы рассмотрим три способа добавления стилей в HTML документ.

Создадим стандартную структуру HTML документа, как показано ниже.

Между тегами и пропишем заголовок HTML документа, например «Способы подключения стилей CSS»

Используя теги

и добавим на веб-страницу заголовок с текстом «Что представляет из себя CSS»

Ниже заголовка, используя теги

и создадим небольшой абзац с текстом, как показано ниже

Сохраним данный документ на флеш-накопителе в папке CSS под именем index с расширением .html

Указываем имя index,  тип файла выбираем html

 

Получаем следующее.

Зайдем в папку CSS, в которой находится наш сохраненный html документ с именем index. Откроем его в веб-браузере

Как видим, в окне веб-браузера отобразилось содержимое созданной нами веб-страницы, а именно заголовок с текстом «Что представляет из себя CSS» и абзац, начинающийся со слов «CSS — это язык стилей, который определяет….»

При помощи атрибута align (присвоив ему значение center) выполним выравнивание заголовка с текстом «Что представляет из себя CSS» по центру веб-страницы

Получаем следующее.

Изменим цвет текста абзаца со стандартного чёрного на другой. Воспользуемся тегом

Существует множество html цветов, например для текста абзаца на созданной нами странице выберем цвет DeepSkyBlue

Присвоим атрибуту color тега значение DeepSkyBlue

Перезагрузим нашу веб-страницу и видим, что текст абзаца поменял свой цвет с чёрного на заданный нами

Таким же образом изменим цвет текста заголовка, например на красный цвет.

Получаем следующее

Вернём текст заголовка и абзаца на нашей веб-странице в первоначальное состояние, а именно удалим атрибут align и теги …

После удаления тегов … и атрибута align получаем первоначальный вид веб-страницы

Если выше мы изменяли цвет и расположение текста заголовка и абзаца на веб-странице при помощи html тегов, то теперь проделаем всё то же самое, но используя язык CSS. Как уже было сказано выше, в данной статье мы рассмотрим три способа добавления стилей на веб-страницу, а именно:

Рассмотрим добавление внутреннего стиля на веб-страницу

Внутренний стиль является расширением  для одиночного тега, который используется на веб-странице. Для определения стиля используется атрибут style, а его значением является некоторый набор стилевых правил.

Изменим цвет текста заголовка на веб-странице на красный, а также выровняем его по центру, используя внутренний стиль. К тегу

добавим атрибут style, далее пропишем  стилевые свойства, а именно: text-allign: center, color: red

Получаем следующее.

 

 

В итоге, открыв файл index.html в веб-браузере видим, что текст заголовка на веб-странице имеет красный цвет и расположен по центру.

Таким же образом, используя атрибут style, изменим цвет текста абзаца со стандартного чёрного на цвет deepskyblue

Перезагружаем страницу index.html и видим изменение цвета текста абзаца.

Изменим цвет текста заголовка на веб-странице на красный, а также выровняем его по центру, на этот раз используя глобальный стиль.

Если применяется глобальный стиль, то свойства CSS располагаются между тегами 

и , а они (теги 

и ) в свою очередь располагаются между тегами и .

Между тегами

и в фигурных скобках пропишем стилевые свойства для заголовка веб-страницы (тег

),  и для абзаца ( тег

):

h1 {text-align: center; color: red} — размещаем текст заголовка по центру веб-страницы и изменяем его цвет на красный

p {color: deepskyblue} — изменяем цвет абзаца на deepskyblue

В итоге получаем тот же результат, что и при использовании внутренних стилей.

Рассмотрим последний способ  добавления стилей на веб-страницу, а именно использование связанных стилей. Суть связанных стилей заключается в том, что они  определяются в отдельном от html документа файле, и имеют расширение .css

Создадим пока ещё пустой документ и сохраним его на флеш накопителе в папке CSS под именем style и расширением .css

Сохранить.

Созданный файл стилей style с расширением .css

Файл style.css оставим пока пустым.

Для связывания html документа (в нашем случае это index.html) с файлом стилей style.css воспользуемся  тегом . Тег  должен

располагаться внутри тегов …

Пропишем между тегами и следующую строку:

где: rel=»stylesheet» — атрибут тега , указывающий веб-браузеру на то, что будут подключаться стили; атрибут href=»style.css» указывает путь к файлу стилей style.css

При создании файлов стилей нужно придерживаться определённых правил, приведенных ниже (этих же правил нужно придерживаться и при добавлении глобальных стилей)

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

Например, ниже на схеме в качестве селектора указан html тег h1, в качестве стилевого свойства указан color:, далее записывается значение стилевого свойства

Так как мы хотим разместить текст заголовка (тег

) по центру веб-страницы, и задать тексту красный цвет, а также текст абзаца (тег

) отобразить в цвете deepskyblue,  в файле стилей style.css прописываем строки: h1 {text-align: center; color: red} и p {color: deepskyblue}

где:  h1 {text-align: center; color: red} — выравниваем текст заголовка («Что представляет из себя CSS») по центру, и задаем тексту красный цвет

p {color: deepskyblue} — задаем тексту абзаца («CSS — это язык стилей, который определяет…») цвет deepskyblue

В результате подключения файла style.css к html документу index.html видим, что текст заголовка на веб-странице расположен по центру и имеет красный цвет. Текст абзаца также изменил свой цвет на deepskyblue

Продолжение в статье: Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS