Таблицы стилей CSS: атрибуты class и id

Вы уже умеете создавать одностраничные сайты, и начали разбираться с html-кодом сайта. Когда Вам приходилось как-то форматировать какие-то элементы сайта, например, текст, или заголовки, Вы выделяли их, и изменяли цвет, размер шрифта и так далее. Такой вариант работы возможен, но нежелателен, потому что текст загромождается тэгами html, и, как следствие, становится менее оптимизированным под поисковые запросы, и больше весит.

Вместо такого непосредственного форматирования в настоящее время часто применяется форматирование с помощью таблиц стилей CSS. Применение стилей CSS более удобно, и расширяет возможности html-кода.

Таблицы стилей CSS (от английского Cascading Style Sheet — каскадные таблицы стилей) очень широко применяются в одностраничных сайтах и многостраничных, например, в блогах. Они очень упрощают редактирование: один стиль CSS может применяться ко многим элементам сразу, и достаточно его изменить, чтобы изменились все элементы.

Стили CSS используют для задания цветов, шрифтов, других элементов форматирования, как для всего сайта, так и для его отдельных частей.

Таблица стилей CSS может располагаться в самом документе, в head, между тэгами <style>, а может быть вынесена в отдельный файл с расширением css, например, style.css. Во втором случае страница подключает этот файл с помощью тэга <link> с атрибутом href, равным адресу этого файла.

Когда мы используем таблицы стилей CSS для форматирования отдельных элементов сайта, мы окружаем их тэгами html с атрибутами class и id (классы и идентификаторы). Например, мы прописываем непосредственно в тексте:

<span class="style1">текст</span>

а между тэгами <style> будут находиться свойства этого стиля CSS:

.style1 {
font-size: 18px;
color: #0000FF;
}

Это означает, что класс style1 имеет следующие свойства: размер текста 18 пикселей, цвет синий.

Идентификаторы применяются таким же образом, как и классы, но их используют, когда хотят подчеркнуть, что данное форматирование уникально в своем роде (хотя это не принципиально для работы html-кода). К примеру, непосредственно в тексте прописывается:

<span id="new">текст</span>

а между тэгами <style> будет:

#new {
text-align: center;
font-family: Arial;
}

Это означает, что идентификатор new имеет такие свойства: выравнивание по центру и шрифт Arial. Иногда в font-family прописывают несколько шрифтов: если на компьютере пользования нет первого шрифта в списке, берутся следующие.

Стили CSS можно присвоить не только тэгу <span>. Любой тэг html можно для этого использовать, например:

<p class="style3">текст</span>

а в стилях:

.style3 {
color: #009900;
}

Или, к примеру, для таблицы:

<table id="my">...</table>

а в стилях:

#my {
text-align: center;
}

Тэг <span> применяется тогда, когда отсутствуют другие подходящие тэги html, например:

<p> это слово будет <span class="style5> красным </span></p>

а в таблице стилей CSS:

.style5 {
color:#FF0000;
}

Последнее слово в этом примере будет действительно красным.

Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером