Как писать стили CSS

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

На сайтах ucoz все CSS стили размещены в отдельном файле. В этом файле Вы можете изменять/редактировать/добавлять стили. Управлять этим файлом Вы можете
Панель управления – Дизайн – Управление дизайном CSS

Селекторы CSS

Что такое стили CSS я писала в статье: Просто о стилях CSS. А в этой статье будем разбирать сам синтаксис написания того или иного стиля.

Любой стиль пишется для конкретного тега (или нескольких тегов html). Поэтому CSS и HTML неразрывно связаны, об этом я писала и ранее.
Основной синтаксис:
Синтаксис CSS
Вначале указывается имя тега, – в умных книжках называется селектор – заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется сам стиль – свойство, а после двоеточия — его значение этого свойства. Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько.

Обратите внимание: красным цветом выделены обязательные знаки, без которых стили просто не будут работать. Забыли одну скобку или двоеточие – все – ничего работать не будет, стиля как будто не существует. Это важно будьте внимательны.

Итак, селектор – это имя тега -тот тег HTML, к которому будут применены стили, что находятся в фигурных скобках. Например, если Вы напишите название P, то вся информация содержащаяся на HTML страницах Вашего сайта внутри тегов <p> </p> будет иметь тот стиль, который Вы зададите для тега P.

Например:

Результат:

Стиль для тега <p>

Универсальный селектор

Универсальный селектор содержит в себе свойства абсолютно для всех тегов сайта. И обозначается он звездочкой. Синтаксис универсального селектора выглядит так:

Классы CSS

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

А что делать если я не хочу чтобы все теги P имели заданные свойства. А что если мне необходимо, чтобы некоторые теги имели совсем другие свойства. Для этого и существуют классы CSS стилей.

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

CSS

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

Например:

В данном примере селектору (тегу) <P> присвоено еще и дополнительное имя admin. Это означает,что не все теги <p> будут иметь заданный стиль, а только те, в которых прописан класс “admin“.

HTML

Мы видим что написан тег <p>, и ему присвоен класс admin.

Именно так, при верстке сайта создаются разные стили для одинаковых тегов. Самым распространенным при верстке сайта, по моему мнению, является тег div. И часто именно для него прописано огромное количество разнообразных стилей.

Очень часто одни и те же стили, могут применяться для разных тегов, например div, p, и т.д. Тогда сам тег не пишется, а после точки пишется название класса.

Пример:

Результат:

Друг познается в беде

The Friend in Need is the Friend indeed

On connaît l’ami dans le besoin

Дочерние селекторы CSS стилей

Очень часто в html версии сайта бывает так что один тег находится внутри другого. Чаще всего внутри тегов div находятся еще самые разнообразные теги. Так вот теги внутри тегов являются дочерними. А CSS стили написанные для таких тегов являются дочерними селекторами.

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

Разбираем CSS

Итак, ми видим, что класс для всех тегов (селекторов) – admin. Первый селектор – это внешний тег div, для которого и заданы свойства. Далее мы видим следующий селектор div.admin p – вот он значит свойства для всех тегов p, которые находятся внутри тега div класса admin. Тоже самое с div.admin a – тут прописаны все свойства тега а, который находится внутри тега div класса admin.

Синтаксис дочерних селекторов простой: тот тег, который находится внутри предыдущего, пишется после главного тега через пробел. В нашем случае, например, div.admin p. Внешний тег div.admin. А внутренний p, он и написан после div.admin после пробела.

Разбираем HTML

С HTML все проще простого. Класс прописан всего только раз, в самом внешнем теге div. В нашем примере это класс admin. А далее все теги находятся внутри тега div и являются дочерними, поэтому на них распространяются стили дочерних селекторов написанных в CSS.

Результат:

The Friend in Need is the Friend indeed

On connaît l’ami dans le besoin

А это ссылка

Псевдоклассы CSS

Псевдоклассы определяют элемент на странице при каком-либо его изменении, например, когда на элемент наводят курсор мышки. Чаще всего псевдоклассы использую для оформления ссылок. Прим этом вы можете задать разные стили для ссылки когда она неактивна, активна, нажата или …Вот эти псевдоклассы мы и рассмотрим.

Синтаксис псевдоклассов
Псевдоклассы пишутся после селектора (тега) через знак двоеточие.
Например,

Самые распространенные псевдоклассы CSS для определения стилей ссылок

:link – определяет стиль еще НЕ посещенной ни разу ссылки.
:active – определяет стиль активной ссылки. Ссылка становится активной если кликнуть по ней.
:visited – определяет стиль еще посещенной ссылки ранее.
:hover – определяет стиль ссылки, когда на нее навести курсором.
Обратите внимание, что :hover всегда должно располагаться после :link и :visited, так как в противном случае правила каскадирования скроют свойства :hover. Лучше всего располагать псевдоклассы так, как я расположила их при объяснении.

В качетсве примера использования пседоклассов хочу выложить Вам свои стили CSS, которые определяют измение ссылок в Разделах “Новое” и “Популярное” в левом блоке этого сайта. Вы можете посмотреть как изменяется ссылка при наведении курсора.

А вот как это выгдядит в CSS:

А это код HTML, который я употребляю в информере:

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


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

Один комментарий

  1. Полезная статья. Для новичка, самое то!
    Спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *