Каскадные таблицы стилей CSS — Часть 1 — Необходимый минимум знаний для работы с CSS

Logo
Каскадные таблицы стилей CSS - Часть 1 - Необходимый минимум знаний для работы с CSS

Эта статья есть первой в категории «HTML, PHP, CSS и MySQL». В ней я хочу подробно изложить самый необходимый минимум, который необходим для работы с каскадными таблицами стилей. Весь материал буду излагать просто и понятно без лишней терминологии для того чтобы даже новичок ничего не знающий в CSS и HTML смог понять весь материал и применить его на практике. Итак, переходим к изучению CSS или каскадных таблиц стилей.

Что такое каскадные таблицы стилей (CSS) и для чего они нужны

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

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

Приведенный выше пример демонстрирует всего малую часть возможностей каскадных таблиц стилей. Но для того чтобы воспользоваться хоть малой их частью, необходимо иметь хотя бы минимальные знания CSS. Дальше в этой статье я намерен рассказать вам об основных правилах, способах создания и редактирования правил в каскадных таблицах стилей. Благодаря этим знаниям вам не составит труда внести корректировки в дизайн своего сайта. Итак, переходим к делу.

Что такое правила (классы) CSS и как их создавать

Для того чтоб вы поняли что такое классы CSS и какую они играют роль я опять прибегну к примерам. Разберем одну с самых популярных проблем, которые беспокоят начинающих вебмастеров – создание копирайта. Наш копирайт будет выглядеть примерно так:

© dmitriydenisov.com — создание и продвижение сайтов, блогов, заработок на сайте

и будет являться ссылкой. Если мы просто добавим в footer код копирайта, то он будет иметь обычный вид. Зачастую это общий для всего сайта шрифт, цвет ссылок как активных, так и при наведении и много других параметров. Для того чтобы этого избежать нам потребуется создать в каскадной таблице стилей (CSS) новое правило (класс) и связать его с нашим копирайтом. Это все делается очень просто. Для создания нового класса CSS открывает таблицу стилей нашего сайта (обычно это файл style.css который находится в корне сайта или используемой вами темы оформления) и в конце добавляем такие строки:

. copyright{
}

Новый класс CSS состоит с точки и названия, которое идет сразу после нее. Итак, мы создали пустой класс CSS. Теперь нам нужно создать для него правила, которые будут определять внешний вид созданного стиля. Они прописываются в фигурных скобках «{}». После каждого правила ставится точка с запятой «;»

К примеру, мы хотим, чтобы шрифт копирайта был черным, размер 12 пикселей, семейство Tahoma и он выравнивался по центру. Для этого нам нужно добавить в класс CSS следующее:

.copyright {
color: #000;
font-size: 12px;
font-family: tahoma;
text-align:center;
}

Поскольку наш копирайт будет содержать ссылку, то добавим еще один класс для ссылок и сделаем их темно серыми:

.copyright a {
color: #333;
}

И класс CSS для ссылок при наведении сделаем тоже темно серого цвета:

.copyright a:hover {
color: #333;
}

После этого нам остается лишь добавить в footer код копирайта и применить к нему созданный нами класс

<div class="copyright"><a href="http://dmitriydenisov.com" title="Доступно о создании и продвижении сайтов, блогов. Поисковая оптимизация. Заработок на сайте.">&copy; dmitriydenisov.com — создание и продвижение сайтов, блогов, заработок на сайте</a></div>

Теперь созданный нами копирайт станет черного цвета, а при наведении будет становиться темно серым, почти черным.

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

Делается это очень просто. Для этого открываем на редактирование страницу нашего сайта и добавляем вверху между тегами <head> строку:

<link rel="stylesheet" href="http://mysite.com/style.css" type="text/css"  />

Так как сайты на простом HTML уже почти не используются, то для того чтобы подключить таблицу стилей сразу ко всему сайту вам будет необходимо открыть файл header.php (шапка сайта) и добавить код в него.

Типы правил каскадных таблиц стилей.

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

p {
}

Так как правило создается для конкретного тега, то необходимо просто прописать его имя без точки и разных скобок. После этого открываем фигурные скобки, где и будут прописываться конкретные правила CSS, которые будут определять внешний вид абзацев. Для примера, сделаем текст всех абзацев светло серым, размер шрифта 12 пикселей, а гарнитуру шрифта сделаем Verdana. Для этого пропишем следующее:

p {
color: #f6f6f6;
font-size: 12px;
font-family: Verdana;
}

Как видите, сначала пишется свойство, а потом его значение. В отличие от простого HTML здесь вместо знака «=» мы прописываем «:», после чего ставим точку с запятой. Это означает что описание данного свойства завершено.

Это был первый тип правил. Теперь перейдем ко второму. К примеру, мы хотим сделать так, чтобы один абзац выделялся среди других. Например, сделать его синего цвета. Для этого нам необходимо проделать следующее. Открываем таблицу стилей и создаем новое правило.

p.mystyle {
color: #0000FF;
}

Для того чтобы применить его на практике нам будет необходимо открыть код документа с текстом который мы хотим изменить и добавить внутрь тега <p> созданное нами правило CSS.

<p class="mystyle">Текст нашего абзаца, который мы хотим изменить</p>

Если ваш сайт работает на CMS  и вы используете при написании статей встроенный редактор, то для внесения такого изменения вам будет необходимо открыть HTML код вашей статьи и вносить нужные поправки в код. Также хочу заметить, что созданное выше правило CSS применимо только для тегов абзацев. Если вы попытаетесь применить его вне тегов <p>, то это не даст никаких результатов.

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

.new {
}

Как видите, перед точкой нет никаких значений. Это означает, что данное правило CSS можно применить к любому тегу. Для этого вам необходимо просто прописать его в нужном месте. Например, для заголовка H2.

<H2 class="new">Наш заголовок</H2>

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

Следующий момент, о котором стоит поговорить, это придание одного и того же стиля нескольким тегам. Для этого вместо того чтобы дублировать стиль, можно просто через запятую перечислить все теги. Это поможет избежать лишнего кода. На практике это будет выглядеть так:

p,h3,h2 {
}

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

p strong {
color: #ff0000;
}

Теперь все слова, которые выделены тегами strong и находятся в пределах абзацев, изменят свой цвет на красный. Таким способом можно изменить внешний вид текста выделенного не только жирным, но и другими тегами, например тегами em которые отвечают за отображение курсивом.

И в завершение давайте рассмотрим правила для состояний ссылок. В HTML ссылки создаются следующим образом:

<a href="http://dmitriydenisov.com">Анкор ссылки</a>

При помощи каскадных таблиц стилей мы можем изменить внешний вид ссылок в разных состояниях, таких как ссылка при наведении (a:hover), просто ссылка(a:link), посещенная ссылка(a:visited) и ссылка при нажатии(a:active). На практике это будет выглядеть так:

a:link {}
a:hover{}
a:visited{}
a:active{}

В фигурных скобках прописываются соответствующие свойства для каждого правила CSS.

На этом первая статья по ознакомлению с каскадными таблицами стилей подошла к концу. Как видите материал не сложный, но его тяжело объяснять посредством текста. Все же надеюсь, что вы смогли понять суть изложенного материала.

Если у вас остались какие-то вопросы, вы всегда можете задать их в комментариях. Если вы не хотите пропустить выпуск следующей статьи, в которой я буду более детально разбирать каскадные таблицы стилей, их термины и свойства, вы всегда можете подписаться на рассылку новостей в разделе «Подписка».

На этом все.  Удачи вам и до скорых встреч на страницах блога dmitriydenisov.com

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 4

  • Миха

    Супер. все четко и понятно.

  • Дмитрий

    Миха, спасибо за комментарий. Рад, что Вам понравилось.

  • Рома

    прочитал и понимаю что остались вопросы : сайт на HTML могу я вставить css прям в код?
    откуда берутся цифры color: #000;
    как приступить и с чего начать работу с css?
    Благодарю за предоставленный материал!
    С Уважением! Роман

  • Дмитрий

    Рома, CSS можно прописывать непосредственно в HTML, но сейчас так уже никто не делает. Все стили выносятся в отдельный файл. Что касается обучения, то рекомендую начать с бесплатных видео уроков. Основы гораздо проще понять посредством видео, а не текста. В интернете сейчас очень много бесплатных видео уроков по HTML и CSS, поэтому найти их и скачать не составит труда.

Оставить комментарий

отменить ответ