Введение в CSS (каскадные таблицы стилей)

Автор/Переводчик статьи: Erthy W / Евгений АндросовДата публикации: 20.05.2009

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

CSS используют формат HTML. Поэтому, прежде, чем изучать CSS, вы должны понять основные принципы работы HTML.

Существует три типа CSS: внешний, внутренний и линейный. Эти типы находятся в строгой иерархии в отношении друг друга. Линейный тип имеет высший приоритет при форматировании HTML-документа,  за ним следует внутренний и заканчивается внешним типом с его наименьшим приоритетом. Это значит, что при конфликте значений двух типов, будут применены значения того стиля, который находится выше по приоритету. Например, при конфликте внешнего и линейного стилей в каком-то конкретном значении, применено будет значение линейного стиля. (При этом, остальная часть внешней таблицы стилей будет применена в обычном порядке.)

Главное отличие между типами CSS заключается в их расположении по отношению к документу. Линейный тип содержится в элементах тегов и применяется по отношению только к этому элементу. Внутренний тип заносится между тегами <head> документа и применяется к элементам внутри этого документа. Внешний тип находится в отдельном файле с расширением .css и применяется к элементам всех связанных с ним HTML-страниц. Это очень удобно и позволяет применить единый стиль для всего массива страниц сайта или одного из его блоков. Ссылка на внешний тип заносится внутрь тега <head> каждой связанной с ним страницы.  

Структура CSS включает в себя три элемента: класс, свойство и значение. Класс определяет, к какому элементу HTML должно быть применено действие со стороны CSS. Свойство  определяет, какой аспект HTML-элемента нуждается в изменениях и Значение определяет, какой конкретный аспект будет изменен.
Примечание: часто вместо слова «свойство» используется слово «атрибут».
Первым действует Класс, за ним следует Свойство, Значение, заключенное в фигурные скобки, отделяется двоеточием. Пример:

Класс {Свойство:значение}.

В реальной ситуации тот же пример может выглядеть следующим образом:

a {font-weight:bold;}

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

Если мы, например, хотим, чтобы все таблицы документа имели рамку шириной 2 пикселя, мы пишем следующий стиль:

Table{border-width:2px}

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

<table style="border-width:2px">

Когда вы поняли структуру CSS, все, что вам надо знать – какие бывают классы, свойства и значения. Вы сами назначаете классы, используя заданные классы HTML и придумыыая произвольные названия. Заданный класс может быть использован только один раз в документе, тогда как тогда как произвольные названия вы можете придумывать и употреблять бесчисленное количество раз.

Например, класс  «body» - единственный в своем роде и определяет свойства и значения тела документа. Естественно, что он используется один раз и может выглядеть, например, так:

body {background-image:url(img/body.jpg);}

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

.stroka {background-color:#ffffff;}
       .style3 {
color: #800040;
font-weight: bold;
}
.style4 {
color: #808000;
font-weight: bold;
}


Если вы интересуетесь более глубоким изучения CSS, вы можете найти много хороших онлайн-ресурсов.

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

Автор: Erthy W,
Источник статьи: www.free-css.com

Перевод: Евгений Андросов


Ваши комментарии:

Комментарий добавил(а): Катя
Дата: 20.05.2009

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

Комментарий добавил(а): Е.Андросов
Дата: 21.05.2009

самостоятельно освоить даже ОСНОВЫ программирования очень сложно. даже не знаю, что вам посоветовать кроме видеокурсов или каких-нибудь занятий :) наверное, больше усидчивости и терпения. трудно только вначале. чем больше вы вникаете в предмет, тем легче и понятнее он становится.

Комментарий добавил(а): partner
Дата: 04.07.2009

Кать не ВСЁ сразу. Я сам себя успокаиваю , тоже многое непонято, еще раз прочитаю...<p>а у нас трое 2года, 4 года и 14 лет.</p>

Комментарий добавил(а): a
Дата: 27.10.2010

на кого расчитат этот лепет? новичку не поможет(только отобьет желание учиться), а понимающему о чем тут написан- это уже не нужно:)

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

Введите число, которое вы видите на картинке


Вам помогла эта статья? Вы тоже можете помочь проекту, пожертвовав любую сумму по своему усмотрению. Например, 100 рублей. Или меньше :)