<div id="news-id-324">[b]Cascading Style Sheets(<span style="font-weight: bold;">CSS</span>) - каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания. В классическом <span style="font-weight: bold;">HTML</span> структура и дизайн были вперемешку: рядом с текстовым абзацем его цвет, размер шрифта, тип шрифта и т.п. Если ты захочешь изменить такой простой параметр, как размер шрифта на своем сайте - придется переписывать все странички. <span style="font-weight: bold;">CSS</span> позволяет назначить всем объектам стиль, описание которого может храниться вообще в отдельном файле. Используя <span style="font-weight: bold;">CSS</span>, ты можешь изменить размер шрифта во всех страницах сайта, исправив только один файл с описанием стилей. Чем больше разных стилей ты придумаешь, тем круче менять дизайн. Самое главное, что не придется менять уже готовые <span style="font-weight: bold;">HTML</span>
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими Шрифт Брайля. CSS при отображении страницы может быть взята из различных источников: [/b] документы, лежащие на сервере. Браузер пользователя сам обратится к файлу (по ссылке) со стилями и придаст страничке нужный облик. [list][*][b]Авторские стили (информация стилей, предоставляемая автором страницы) в виде:[/b]</li>[list][*][b]Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.[/b]</li>[*][b]Встроенных стилей — блоков CSS внутри самого HTML-документа.[/b]</li>[*][b]Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте <code>style</code>.[/b]</li>[/list][*][b]Пользовательские стили [/b][list][*][b]Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.[/b]</li>[/list]</li>[*][b]Стиль браузера<span style="text-decoration: underline;"></span>[/b]</li>[list][*][b]<span style="text-decoration: underline;"></span>Стандартный стиль, используемый браузером по умолчанию для представления элементов.[/b]</li>[/list][/list]
[b]Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.[/b]
[b]Таблица стилей состоит из набора <span style="font-style: italic;">правил</span>. Каждое правило, в свою очередь, состоит из одного или нескольких <span style="font-style: italic;">селекторов</span>, разделённых запятыми и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.[/b]
[b]Здесь приведено шесть правил с селекторами <code>p</code>, <code>h2</code>, <code>.note</code>, <code>p#paragraph1</code>, <code>a:hover</code> и <code>#news p</code>.[/b]
[b]В первых двух правилах HTML-элементам <code>p</code> (параграфу) и <code>h2</code> (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.[/b]
[b]Третье правило будет применено к элементам, атрибут <code>class</code> которых содержит слово 'note'. Например:[/b] <dl><dd> <!--code1--><div class="scriptcode"><!--ecode1-->[b]<p <font color="#0000ff">class</font>="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>[/b]<!--code2--></div><!--ecode2--></dd></dl>
[b]Четвертое правило будет применяться только к элементам <code>p</code>, атрибут <code>id</code> которых равен <code>paragraph1</code>. Такие элементы не будут иметь внешних отступов (margin).[/b]
[b]Пятое правило определяет стиль <span style="font-style: italic;">hover</span> для элементов <code>a</code>. По умолчанию в большинстве браузеров текст элементов <code>a</code> подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.[/b]
[b]Последнее, шестое правило, применяется для элементов <code>p</code>, которые находятся внутри элемента с атрибутом <code>id</code>, равным «<code>news</code>».[/b]</div>[b] [/b]
