Главная » Бизнес в Интернете

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

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

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

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

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

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

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

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

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

.style1 {
font-size: 18px;
color: #0000FF;
}
таблица стилей CSS

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

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

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

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

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

#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;
}
таблица стилей CSS

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

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

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

.style5 {
color:#FF0000;
}

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


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

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

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

2 комментария »

  • Вячеслав пишет:

    А за расположение блока на странице какие команды отвечают? А то я поставил absolut, но блок в разных браузерах по-разному расположен ( Пришлось его вовсе отключить... Может быть есть значение, которое динамически привязывает блок к содержимому сайта.

  • Александр Ризун (автор) пишет:

    Вячеслав, попробуйте relative.

Оставьте свой комментарий и ответный визит Вам обеспечен