Выпуск №6. CSS — каскадные таблицы стилей.

css

Здравствуйте, уважаемые подписчики.

С Вами я, Андрей!

В этом выпуске мы поговорим о CSS (каскадных таблицах стилей).

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

И так начнем!

С помощью таблиц стилей можно указать правило отображения тега HTML в браузере.

Таблица стилей — это фактически набор правил, которые применяются к HTML тегам. Каждое правило состоит из селектора и определения.

Селектор — это тэг HTML.

Определение — это свойство тега и значение. Определение указывается в фигурных скобках, свойство и значение отделяются двоеточием(:). В конце каждого определения ставится точка с запятой (;).

Пример:

p {color: #FF0000;}

Здесь:

P — это селектор.

color: #FF0000; - это определение. Определение всегда заключается в фигурные скобки, после каждого определения ставится точка с запятой.

сolor- это название свойства (в данном случае цвет).

#FF0000 - это значение свойства.

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

А пока, для того чтобы понять в работе того, о чем пойдет речь в этом выпуске, воспользуемся двумя свойствами:

color- задает цвет текста.

background-color - задает фоновый цвет для элемента.

Итак, рассмотрим каким образом можно встраивать таблицы стилей в документ.

1 Способ:

Можно задать свойство для любого тега при помощи параметра style. В этом случае селектор не нужен.

Пример:

<p style="background-color:#003333;">

Мы изменили фоновый цвет абзаца

2 Способ:

Указать свойство в заголовке документа между тегами <style>….</style>

Пример:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">

p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

</style>
</head>
<body>

Эти свойства применяются ко всему документу.

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

Все остальные теги отобразятся без применения стилей.

Если одинаковыми свойствами обладают несколько тегов, то их можно указать через запятую в качестве селектора.(H1, H2, p, li{ color:blue;}).

3 Способ:

Способ позволяет использовать одну таблицу для форматирования нескольких документов.

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

href=»mystyle.css» — путь к файлу CSS.

А содержимое файла строится по тем же правилам (селектор и определение).

Код файла mystyle.css:

p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

4 Способ:

Способ позволяет использовать каскадную таблицу стилей (css), лежащую на каком-нибудь сервере.

Чтобы подключить CSS файл с какого-либо сервера нужно в заголовке документа, между тегами <style>….</style> прописать следующее:

@import:url(http://www.mysite.ru/style/mystyle.css);

Пример:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">

@import:url(http://www.mysite.ru/style/mystyle.css);
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

</style>
</head>

Вы заметили, что в 4-ом способе реализовано два способа включения таблицы стилей к документу.

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

Итак, расположение способов в порядке убывания их приоритетов:

1 Способ;

2 Способ;

4 Способ;

3 Способ;

То есть, если в 3-ем или в 4-ом способе указано p {color: red;}, а во 2-ом или в 1-ом p {color: blue;}, то применится к параграфам свойство p {color: blue;}, потому что приоритет 1-ого и 2-ого способа выше, чем 3-го и 4-го.

Пару слов о наследовании и перейдем к классам.

Часто встречается ситуация, когда содержимое одного тега находится целиком внутри другого.

Пример:

Текст абзаца <strong> текст абзаца, выделенный жирным</strong> продолжение текста абзаца.

То есть у нас тэг <strong> лежит полностью внутри тега <p>.

И если мы теперь зададим стиль для параграфа, он примениться и к тегу <strong>.

<p style=»color:red;»>

Текст абзаца красными буквами<strong>текст абзаца красными буквами, выделенный жирным</strong> продолжение текста абзаца красными.

Классы.

Классы используются для того, чтобы одному и тому же тегу можно было бы задавать различные правила.

Описываются классы в контейнере <style>….</style>, а применяются к тэгам посредствам параметра CLASS.

Давайте посмотрим на пример:

<style type="text/css">

p.red {color:#FF0000; background-color:#000099;}
p.yellow{color:yellow; background-color:#000000;}

</style>

Описали класс red и yellow для тега <p>

<body>
<p class="red">Параграф класса red с красным цветом шрифта и синим фоном.</p>
<p class="yellow"> Параграф класса yellow с желтым цветом шрифта и черным фоном.</p>
……
</body>

Существуют, также и универсальные классы.

Это классы, которые можно использовать не только для определенного, а для любого тега.

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

Пример:

<style type="text/css">

.red {color:#FF0000;}

</style>
…
<body>
<h1 class="red"> Текст заголовка 1-го уровня, класса red</h1>
<h2 class="red"> Текст заголовка 2-го уровня, класса red </h2>
<p class="red"> Текст параграфа класса red </p>
…
</body>

Таким образом, мы применили класс red к трем различным тегам.

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

Рекомендую применить стили, например, к нашему второму выпуску со сказками. Сделать там разноцветные абзацы, и заголовки с помощью стилей.

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

Пишите на E-mail: contact@webformyself.com

Проект webformyself.com — основы самостоятельного сайтостроения

Успехов в учебе!

С Вами был Андрей Бернацкий

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

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

Комментарии Facebook:

Комментарии (33)

  1. Маргарита

    Андрей огромное спасибо,еще не все получается но пытаюсь

  2. Виктор

    Спасибо за урок. А где ссылка для скачивания урока?

  3. Андрей

    Спасибо за предоставленный урок!

  4. Елена

    Андрей Спасибо! Мне удалось разобраться в каскадных таблицах стилей CSS благодаря Вашему уроку! Большое спасибо!!!

  5. Александер

    СПАСИБО БУДУ ДАЛЬШЕ ИЗУЧАТЬ

  6. Вячеслав

    Подскажите, плз, что мне делать. При чтении почты в e-mail при переходе по ссылке упорно выскакивает
    ———————————————————————————

    Запрашиваемой вами страницы нет на сайте,
    возможно, она была удалена, либо вы
    ошиблись в написании адреса.

    Но ведь раз есть письмо и ссылка на источник, значит…

  7. Евгений

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

  8. Евгений

    Во 2-м способе цвета абзацев и заголовков второго уровня, похоже перепутаны местами…

  9. kattt

    Ничего не понимаю(

  10. medium

    Небольшое дополнение:)
    Есть способ импорта CSS из самого файла CSS. Это обеспечит более компктныи вид, т.к. html код итак у нас будет громозкии. Если файлов стиля больше чем один.
    Кроме основного фаила стиля, например нужен еще один отдельный для IE7.
    В HTML ссылка на основнои файл стиля: между тегами
    а уже в самом mystyle.css первые строчки: @import:url(IE7.css); ну а уже затем body {}

  11. Виктор

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

  12. Ольга

    Очень хорошо написано.

  13. Tanuxa

    Спасибо, за урок!
    Сложновато было перестроится с HTML на CSS, пришлось посидеть. Конечно с таблицей CSS страничка с кодом HTML не смотрится такой нагромождённой. HTML код выглядит очень аккуратненько и тогда в нём легко ориентироваться. :)

  14. Владимир

    Добрый день Андрей!
    Чтобы понять эти занятия по построению сайта, какие ещё надо иметь познания, чтобы понять, что такое теги, HTML, CSS, что означают
    знаки, /, ну и другие знаки.
    А то смахивает поговорке «Смотрит баран на новые ворта, а зачем не понимает»

    Владимир
    Ответить

    • Andrey Bernacki

      Владимир, в первом уроке я рассказывал про знаки (углы, /), что такое теги… Что такое CSS и для чего он нужен то же рассказано и показано. Я думаю если б вы не просто прочитали материал, а проделали материалы сами, то поняли бы все без проблем и прочувствовали для чего это и как это….
      Удачи.

  15. lena

    я подписалась на расылку и все не находила времени почитать,для меня это не незнакомый и новый материал,просто было интересно -у всех бывают нюансы в изображении материала. Сегодня получила css урок. Красота! Лаконично,Четко,»в яблочко»!
    стоит просмотреть и предыдущие уроки!

  16. Андрей

    Андрей!
    Отлично, вы просто молодцы, вся команда. Кто не лениться, тот научится.

  17. Евгений

    Спасибо, все понятно и подробно изложено!

  18. Евгения

    Наконец-то я эти таблицы стилей понимать стала!

  19. Евгений

    Ой, Евгения.. Вы еще далеки от понимания CSS. это только начало!
    Вот когда вы поймете верстку на DIV с использованием CSS тогда можно будет и сказать, что Вы ее поняли.
    Кстати, а почему нет урока верстка с использованием CSS?

  20. gocha

    СПАСИБО БУДУ ДАЛЬШЕ ИЗУЧАТЬ

  21. Сергей Петрович

    Для закрепления ещё бы видео-урок!!!

  22. nikolay

    Спасибо.

  23. Дима

    Здравствуй Андрей! Мне это самое главное знать хотелось, спасибо вам очень большое за мышление!
    С наилучшем уважением!

  24. Людмила

    Спасибо, Андрей! Правда, к сожалению, я пока не разобралась в каскадных таблицах стилей!

  25. татьяна

    Андрей ваши уроки классные! Но я не могу понять как отредактировать текст в уже готовом сайте. Как изменить форму

  26. Максим

    Непонятный урок почти ничего не понял.

    • Ольга

      Максим, Нужно читать внимательно с 1урока по-порядку. Не верю, что Вы не в состояии понять!!!!
      Уроки сделаны ОТЛИЧНО!!!!

  27. Юрий

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

  28. Andrey Bernacki

    Правильно rel. А что вы где-то red на этом сайте видели ?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree