Просто о сложном или изучаем CSS3. Часть 1. Понятие CSS. Способы подключения стилей CSS к HTML документу
Здравствуйте, уважаемые читатели сайта remontcompa! Меня зовут Роман Нахват и я представляю вашему вниманию цикл статей по языку стилей CSS3. Аббревиатура CSS произошла от английского Cascading Style Sheets, что в переводе означает каскадные таблицы стилей. Стилем или CSS называется некоторый набор параметров форматирования, применяемый к элементам HTML документа, чтобы изменить их внешний вид. Сам по себе HTML является лишь стандартным языком HTML документов и используется для структурирования содержимого HTML страницы, поэтому язык HTML является лишь первым этапом в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS, чем мы с вами и займёмся. Добавить стили на веб-страницу можно несколькими способами. Каждый способ отличается своими возможностями и назначением. В данной статье мы рассмотрим три способа добавления стилей в HTML документ.
Просто о сложном или изучаем CSS3. Часть 1. Понятие CSS. Способы подключения стилей CSS к HTML документу
Указываем имя index, тип файла выбираем html
Если выше мы изменяли цвет и расположение текста заголовка и абзаца на веб-странице при помощи html тегов, то теперь проделаем всё то же самое, но используя язык CSS. Как уже было сказано выше, в данной статье мы рассмотрим три способа добавления стилей на веб-страницу, а именно:
Добавление на веб-страницу внутренних стилей;
Добавление на веб-страницу глобальных стилей;
Добавление на веб-страницу связанных стилей;
Рассмотрим добавление внутреннего стиля на веб-страницу
Внутренний стиль является расширением для одиночного тега, который используется на веб-странице. Для определения стиля используется атрибут style, а его значением является некоторый набор стилевых правил.
Изменим цвет текста заголовка на веб-странице на красный, а также выровняем его по центру, на этот раз используя глобальный стиль.
Между тегами <style> и </style> в фигурных скобках пропишем стилевые свойства для заголовка веб-страницы (тег <h1>), и для абзаца ( тег <p>):
h1 {text-align: center; color: red} — размещаем текст заголовка по центру веб-страницы и изменяем его цвет на красный
Рассмотрим последний способ добавления стилей на веб-страницу, а именно использование связанных стилей. Суть связанных стилей заключается в том, что они определяются в отдельном от html документа файле, и имеют расширение .css
Для связывания html документа (в нашем случае это index.html) с файлом стилей style.css воспользуемся тегом <link>. Тег <link> должен
располагаться внутри тегов <head>…</head>
Пропишем между тегами <head> и </head> следующую строку: <link rel=»stylesheet» type=»text/css» href=»style.css»/>
При создании файлов стилей нужно придерживаться определённых правил, приведенных ниже (этих же правил нужно придерживаться и при добавлении глобальных стилей)
Одним из главных элементов файла стилей является селектор. Селектор определяет, к какому элементу в html документе применять те или иные стилевые параметры. В качестве селектора выступают теги, классы и идентификаторы. После указания селектора идут фигурные скобки, в которых прописывается стилевое свойство, далее указывается его значение
Так как мы хотим разместить текст заголовка (тег <h1>) по центру веб-страницы, и задать тексту красный цвет, а также текст абзаца (тег <p>) отобразить в цвете deepskyblue, в файле стилей style.css прописываем строки: h1 {text-align: center; color: red} и p {color: deepskyblue}
где: h1 {text-align: center; color: red} — выравниваем текст заголовка («Что представляет из себя CSS») по центру, и задаем тексту красный цвет
