Веб-компас сайтостроителей
Использование каскадных таблиц стилей (CSS)
Есть несколько способов использования каскадных таблиц стилей в документе HTML
Давайте ознакомимся с этими вариантами по порядку.
Если просмотреть данный код в браузере, то текст будет отображен красным цветом. Как мы этого добились? Вы, наверное, уже догадались, что виной всему строка body {color:red;} .Т еперь настало время познакомиться с написанием CSS-правил. Правило в CSS записывается из двух частей: селектора и описания. В выше приведенном примере селектором будет body, а описанием будет color:red. Если будет несколько описаний, то они записываются через точку с запятой (";"). Описание в свою очередь имеет две части: свойство и значение. В нашем примере свойством будет color, а его значением будет red. Если еще не все понятно, то расшифрую данный пример: при отображении содержимого тега <body> (а это вся страница) нужно текст (свойство color) браузеру выводить красным цветом (значение red свойства color).
Теперь придадим нашей страничке более интересное оформление: синим цветом будет заголовок "Анекдот" и черным цветом сделаем сам текст анекдота
Посмотрели пример в браузере, порадовались, как мы можем разукрасить нашу страничку с помощью CSS, можно дальше идти. Разместим на страничке вдобавок веселую историю
Допустим заголовок истории нужно сделать каким-либо другим цветом, и текст истории тоже нужно сделать каким-нибудь другим цветом. Если указать цвет текста для элемента h1, то изменится цвет текста во всех элементах h1 находящихся в текущем документе. Для задания разных значений свойствам определенных элементов можно использовать классы. Задать класс для элемента HTML-кода можно атрибутом class, значением которого должно быть имя класса (придумывать нужно самостоятельно). Например
Соответственно селектор в каскадных таблицах стилей для данных элементов с заданными именами классов примет вид
Теперь можно изменить наш пример следующим образом
В данном примере использовано также свойство background-color, которое задает цвет фона соответствующего элемента.
Теперь, чтобы изменить отображение документа в браузере (например, цвет текста или фона), нужно изменить лишь соответствующее свойство каскадных таблиц стилей, не меняя при этом код HTML. При этом думаю, доказывать не стоит, что подбирать имена классов нужно таким образом, чтобы было понятно, какой логический смысл несет элемент с данным именем. Если дать какому-либо элементу имя "asdf", то понять, что именно содержит данный элемент практически не возможно. А если дать имя, например, "zagol_history", то уже не надо лезть в HTML-код, чтобы предположить что данный элемент содержит заголовок какой-либо истории.
Действие данного способа использования CSS распространяется только на текущую веб-страницу. О синтаксисе правил CSS будет отдельная статья, а дальше продолжим изучать варианты использования каскадных таблиц стилей.
Подключить же файл CSS (например, назовем его mystyle.css) можно с помощью тега <link> следующим образом
Этот тег должен находиться в заголовке HTML-документа.
Сам файл CSS содержит только список правил каскадных таблиц стилей необходимых для данного сайта. Например, для выше приведенного примера внешний файл CSS (mystyle.css) будет следующий
Соответственно HTML-код примет следующий вид
Использовать данный вариант подключения каскадных таблиц стилей имеет смысл, когда нужно придать определенный внешний вид лишь немногим элементам HTML-документа или изменить некоторые свойства отображения элемента, свойства которого уже описаны либо в заголовке HTML-документа, либо во внешнем файле стилей. Рассматривая все тот же выше приведенный пример, допустим, что надо вставить еще один анекдот, но текст его должен к тому же отображаться курсивом (для этого нужно использовать свойство font-style со значением italic). Также, для примера, давайте напишем текст указывающий источник данных материалов, каким-либо другим цветом.
Использовать данный вариант подключения стилей для задания определенного отображения некоторой части текста удобно совместно с тегом <span>. Как Вы уже, наверное, знаете, этот тег <span> сам по себе ни чего не делает, в отличие от подобных тегов <div> и <p>. Например, нужно выделить несколько слов в тексте полужирным начертанием шрифта (для этого нужно использовать свойство font-weight со значением bold).
В заключение статьи хочу обратить Ваше внимание на то, что все эти 3 способа использования каскадных таблиц стилей можно одновременно использовать в одном HTML-документе.
- Описание в разделе <head> (заголовка) HTML-документа;
- Описание во внешнем файле;
- Встраивание (inline-описание).
Давайте ознакомимся с этими вариантами по порядку.
Описание каскадных таблиц стилей в разделе заголовка HTML-документа
В этом случае содержимое каскадных таблиц стилей должно быть расположено между тегами <style type="text/css"> и его закрывающим тегом </style> в заголовке HTML-документа. Например
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
</style>
</head>
<body>
<h1>Анекдот</h1>
<p> На колхозном собрании председатель говорит:<br>
-В прошлом году мы засеяли пять гектаров конопли, и ее всю пожрала тля. В этом году мы засеем пятнадцать гектаров. Нехай эта зараза подавиться!</p>
продолжение следует…
</body>
</html>
Если просмотреть данный код в браузере, то текст будет отображен красным цветом. Как мы этого добились? Вы, наверное, уже догадались, что виной всему строка body {color:red;} .Т еперь настало время познакомиться с написанием CSS-правил. Правило в CSS записывается из двух частей: селектора и описания. В выше приведенном примере селектором будет body, а описанием будет color:red. Если будет несколько описаний, то они записываются через точку с запятой (";"). Описание в свою очередь имеет две части: свойство и значение. В нашем примере свойством будет color, а его значением будет red. Если еще не все понятно, то расшифрую данный пример: при отображении содержимого тега <body> (а это вся страница) нужно текст (свойство color) браузеру выводить красным цветом (значение red свойства color).
Теперь придадим нашей страничке более интересное оформление: синим цветом будет заголовок "Анекдот" и черным цветом сделаем сам текст анекдота
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
h1 { color:blue; }
p { color:black; }
</style>
</head>
<body>
<h1>Анекдот</h1>
<p> На колхозном собрании председатель говорит:<br>
-В прошлом году мы засеяли пять гектаров конопли, и ее всю пожрала тля. В этом году мы засеем пятнадцать гектаров. Нехай эта зараза подавиться!</p>
продолжение следует…
</body>
</html>
Посмотрели пример в браузере, порадовались, как мы можем разукрасить нашу страничку с помощью CSS, можно дальше идти. Разместим на страничке вдобавок веселую историю
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
h1 { color:blue; }
p { color:black; }
</style>
</head>
<body>
<h1>Анекдот</h1>
<p> На колхозном собрании председатель говорит:<br>
-В прошлом году мы засеяли пять гектаров конопли, и ее всю пожрала тля. В этом году мы засеем пятнадцать гектаров. Нехай эта зараза подавиться!</p>
<h1>Веселая история</h1>
<p>
Дневник космонавтов. 13 января прилетели на МКС, два часа ждали выдачи багажа. Недосчитались нескольких чемоданов и полиэтиленового пакета с ящиком водки. Не надо было его сдавать в багаж! Взяли другой ящик, пошли знакомиться с американцами. Те никак не могли понять выражение «старый Новый год». Пришлось рассказать им про вращение Земли вокруг Солнца. В общем, нормально повисели! 25 января Проапгрейдили бортовой компьютер - вставили крутую видеокарту. Теперь на нём всё летает - и «Тетрис», и «Вольфенштайн». 11 февраля Весь день проводили научные эксперименты с дрозофилами. Выяснилось, что ничего их не берёт - ни липучки, ни мухобойки. Рассказали американцам. Те предложили попробовать точечные удары.
…
</p>
продолжение следует…
</body>
</html>
Допустим заголовок истории нужно сделать каким-либо другим цветом, и текст истории тоже нужно сделать каким-нибудь другим цветом. Если указать цвет текста для элемента h1, то изменится цвет текста во всех элементах h1 находящихся в текущем документе. Для задания разных значений свойствам определенных элементов можно использовать классы. Задать класс для элемента HTML-кода можно атрибутом class, значением которого должно быть имя класса (придумывать нужно самостоятельно). Например
Код
<p class="anekdot">…</p>
<p class="history">…</p>
Соответственно селектор в каскадных таблицах стилей для данных элементов с заданными именами классов примет вид
Код
p.anekdot { color:black; }
p.history { color:#408080; }
Теперь можно изменить наш пример следующим образом
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
h1.zagol_anekdot { color:blue; background-color:#00FF80; }
p.anekdot { color:black; }
h1.zagol_history {color: #B5930B; background-color:#00FFFF;}
p.history {color: #408080; }
</style>
</head>
<body>
<h1 class="zagol_anekdot">Анекдот</h1>
<p class="anekdot"> На колхозном собрании председатель говорит:<br>
-В прошлом году мы засеяли пять гектаров конопли, и ее всю пожрала тля. В этом году мы засеем пятнадцать гектаров. Нехай эта зараза подавиться!</p>
<h1 class="zagol_history">Веселая история</h1>
<p class="history">
Дневник космонавтов. 13 января прилетели на МКС, два часа ждали выдачи багажа. Недосчитались нескольких чемоданов и полиэтиленового пакета с ящиком водки. Не надо было его сдавать в багаж! Взяли другой ящик, пошли знакомиться с американцами. Те никак не могли понять выражение «старый Новый год». Пришлось рассказать им про вращение Земли вокруг Солнца. В общем, нормально повисели! 25 января Проапгрейдили бортовой компьютер - вставили крутую видеокарту. Теперь на нём всё летает - и «Тетрис», и «Вольфенштайн». 11 февраля Весь день проводили научные эксперименты с дрозофилами. Выяснилось, что ничего их не берёт - ни липучки, ни мухобойки. Рассказали американцам. Те предложили попробовать точечные удары.
…
</p>
продолжение следует…
</body>
</html>
В данном примере использовано также свойство background-color, которое задает цвет фона соответствующего элемента.
Теперь, чтобы изменить отображение документа в браузере (например, цвет текста или фона), нужно изменить лишь соответствующее свойство каскадных таблиц стилей, не меняя при этом код HTML. При этом думаю, доказывать не стоит, что подбирать имена классов нужно таким образом, чтобы было понятно, какой логический смысл несет элемент с данным именем. Если дать какому-либо элементу имя "asdf", то понять, что именно содержит данный элемент практически не возможно. А если дать имя, например, "zagol_history", то уже не надо лезть в HTML-код, чтобы предположить что данный элемент содержит заголовок какой-либо истории.
Действие данного способа использования CSS распространяется только на текущую веб-страницу. О синтаксисе правил CSS будет отдельная статья, а дальше продолжим изучать варианты использования каскадных таблиц стилей.
Описание каскадных таблиц стилей во внешнем файле
При использовании данного варианта достигается максимальная гибкость создания и изменения сайта. Вся информация каскадных таблиц стилей сохраняется в отдельном файле, а затем подключается к нужному HTML-документу. При этом появляется возможность использовать описание оформления внешнего вида, выполненного одним файлом каскадных таблиц стилей, несколькими или всеми страницами сайта. И, соответственно, если нужно будет изменить внешний вид всего сайта, то потребуется изменить один файл CSS, а не файлы всех страниц сайта, как при использовании выше описанного метода.
Подключить же файл CSS (например, назовем его mystyle.css) можно с помощью тега <link> следующим образом
Код
<link rel="stylesheet" type="text/css" href="mystyle.css">
Этот тег должен находиться в заголовке HTML-документа.
Сам файл CSS содержит только список правил каскадных таблиц стилей необходимых для данного сайта. Например, для выше приведенного примера внешний файл CSS (mystyle.css) будет следующий
Код
body { color:red; }
h1.zagol_anekdot { color:blue; background-color:#00FF80; }
p.anekdot { color:black; }
h1.zagol_history {color: #B5930B; background-color:#00FFFF;}
p.history {color: #408080; }
Соответственно HTML-код примет следующий вид
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" >
</head>
<body>
<h1 class="zagol_anekdot">Анекдот</h1>
<p class="anekdot"> На колхозном собрании председатель говорит:<br>
-В прошлом году мы засеяли пять гектаров конопли, и ее всю пожрала тля. В этом году мы засеем пятнадцать гектаров. Нехай эта зараза подавиться!</p>
<h1 class="zagol_history">Веселая история</h1>
<p class="history">
Дневник космонавтов. 13 января прилетели на МКС, два часа ждали выдачи багажа. Недосчитались нескольких чемоданов и полиэтиленового пакета с ящиком водки. Не надо было его сдавать в багаж! Взяли другой ящик, пошли знакомиться с американцами. Те никак не могли понять выражение «старый Новый год». Пришлось рассказать им про вращение Земли вокруг Солнца. В общем, нормально повисели! 25 января Проапгрейдили бортовой компьютер - вставили крутую видеокарту. Теперь на нём всё летает - и «Тетрис», и «Вольфенштайн». 11 февраля Весь день проводили научные эксперименты с дрозофилами. Выяснилось, что ничего их не берёт - ни липучки, ни мухобойки. Рассказали американцам. Те предложили попробовать точечные удары.
…
</p>
продолжение следует…
</body>
</html>
Встраивание (inline-описание) стилей
Задать определенный внешний вид с помощью стилей отдельному элементу HTML-кода можно атрибутом style. Тегу style нужно будет присвоить список необходимых правил CSS, например
Код
<p style=" color:blue; background-color:white; "> Текст абзаца</p>
<div style="background:#808080;">Содержимое блока div</div>
Использовать данный вариант подключения каскадных таблиц стилей имеет смысл, когда нужно придать определенный внешний вид лишь немногим элементам HTML-документа или изменить некоторые свойства отображения элемента, свойства которого уже описаны либо в заголовке HTML-документа, либо во внешнем файле стилей. Рассматривая все тот же выше приведенный пример, допустим, что надо вставить еще один анекдот, но текст его должен к тому же отображаться курсивом (для этого нужно использовать свойство font-style со значением italic). Также, для примера, давайте напишем текст указывающий источник данных материалов, каким-либо другим цветом.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
h1.zagol_anekdot { color:blue; background-color:#00FF80; }
p.anekdot { color:black; }
h1.zagol_history {color: #B5930B; background-color:#00FFFF;}
p.history {color: #408080; }
</style>
</head>
<body>
<h1 class="zagol_anekdot">Анекдот</h1>
<p class="anekdot"> На колхозном собрании председатель говорит:<br>
-В прошлом году мы засеяли пять гектаров конопли, и ее всю пожрала тля. В этом году мы засеем пятнадцать гектаров. Нехай эта зараза подавиться!</p>
<h1 class="zagol_anekdot">Анекдот</h1>
<p class="anekdot" style="font-style:italic;">
Фильм «Брат 2». Данила Багров (поигрывая пистолетом перед носом у мужика) говорит:<br>
-Вот скажи мне, мужик, а в чем сила?<br>
Мужик, трясясь от страха:<br>
-В деньгах<br>
Данила:<br>
-Вот и мой брат говорит, что в деньгах. А сила то в Ньютонах!
</p>
<h1 class="zagol_history">Веселая история</h1>
<p class="history">
Дневник космонавтов. 13 января прилетели на МКС, два часа ждали выдачи багажа. Недосчитались нескольких чемоданов и полиэтиленового пакета с ящиком водки. Не надо было его сдавать в багаж! Взяли другой ящик, пошли знакомиться с американцами. Те никак не могли понять выражение «старый Новый год». Пришлось рассказать им про вращение Земли вокруг Солнца. В общем, нормально повисели! 25 января Проапгрейдили бортовой компьютер - вставили крутую видеокарту. Теперь на нём всё летает - и «Тетрис», и «Вольфенштайн». 11 февраля Весь день проводили научные эксперименты с дрозофилами. Выяснилось, что ничего их не берёт - ни липучки, ни мухобойки. Рассказали американцам. Те предложили попробовать точечные удары.
…
</p>
<p style="color:#5C49DE;">Данные материалы взяты с сайта www.veclife.com</p>
продолжение следует…
</body>
</html>
Использовать данный вариант подключения стилей для задания определенного отображения некоторой части текста удобно совместно с тегом <span>. Как Вы уже, наверное, знаете, этот тег <span> сам по себе ни чего не делает, в отличие от подобных тегов <div> и <p>. Например, нужно выделить несколько слов в тексте полужирным начертанием шрифта (для этого нужно использовать свойство font-weight со значением bold).
Код
Этот текст не будет отображен полужирным начертанием шрифта. <span style="font-weight:bold;">Этот текст будет отображен полужирным начертанием шрифта с помощью тега SPAN и каскадных таблиц стилей.</span> Этот текст не будет отображен полужирным начертанием шрифта.
В заключение статьи хочу обратить Ваше внимание на то, что все эти 3 способа использования каскадных таблиц стилей можно одновременно использовать в одном HTML-документе.
- Статью добавил пользователь
- Категория
- Дата размещения 13.06.2008, просмотров 7176
Еще статьи из данной категории
Предыдущие статьи
- нет
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
<h1 class="zagol_history">Веселая история</h1>
Вообще на странице положено делать один заголовок H1.