- •Интернет-программирование Блочная верстка css 3
- •230700 «Прикладная информатика» и 080500 «Бизнес-информатика»
- •Цель работы
- •2. Порядок выполнения работы
- •3. Теоретические сведения
- •Селектор класса (class)
- •Селектор идентификатора (id)
- •Комментарии css
- •Подключение таблицы стилей
- •Несколько таблиц стилей
- •Практическая часть
- •Контрольные вопросы
- •Список рекомендуемой литературы
- •241035, Брянск, бульвар 50 лет Октября, 7, бгту, 58-82-49
Селектор класса (class)
При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.
Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей:
h1.stepleft {margin-left: 10pt}
h2.stepright {margin-left: 20pt}
Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:
<h1 class="stepleft">
Заголовок с внешним отступом 10 пунктов.
</h1>
<h2 class="stepright">
В то же время не допускается следующее определение атрибута class:
< h1 class="stepleft" h2 class="stepright">,
т.е. можно определить только один атрибут class.
Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class.
.left {margin-left: 40pt}
В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.
В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе ".left":
<table class="left">
Эта таблица будет иметь внешний отступ, равный 40 пунктам.
</table>
<p class="left">
Этот параграф будет иметь внешний отступ, равный 40 пунктам.
</p>
Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, так как это не будет работать в Mozilla/Firefox.
Селектор идентификатора (id)
Стили элементов HTML можно определить также с помощью селектора идентификатора, который обозначается символом #.
Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением "fontsz":
#fontsz{font-size: 50%}
Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением "first":
ul#first
{
list-style: disc;
color: #ffffff
}
Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, так как это не будет работать в Mozilla/Firefox.
Комментарии css
Для пояснения кода и для последующего его редактирования используются комментарии, которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается символом "*/", как в примере ниже:
/* Первый комментарий. */
table
{
/* Второй комментарий. */
margin-left: 10pt;
font-family: "sans serif"
/* Третий комментарий. */
border-style:outset;
}
Подключение таблицы стилей
Когда браузер считывает таблицу стилей, он форматирует документ согласно с этой таблицей. Существует три способа подключения таблицы стилей.
Подключение внешней таблицы стилей.
Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн Web-сайта, то этот способ идеально подходит – редактируется только один файл с таблицей стилей. Для подключения внешней таблицы стилей предназначен тег <link>, который размещается в разделе заголовка:
<head>
<link rel="stylesheet" type="text/css"
href="first.css" />
</head>
Данный код указывает браузеру на то, что определение стиля хранится в файле first.css. Последний, в свою очередь, выполнит форматирование документа согласно с этим определением стиля.
Некоторые замечания:
внешнюю таблицу стилей можно создать в любом текстовом редакторе;
файл с внешней таблицей стилей не должен содержать никаких тегов html;
файл с внешней таблицей стилей необходимо сохранить с расширением .css.
Пример:
ul {margin-left: 10pt}
li {font-family: arial}
body {background-color: blue}
Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы между значением свойства и единицами измерения, так как это будет работать правильно только в IE6, но не в Mozilla/Firefox или Netscape.
Пример с пробелом — "margin-left: 20 px";
пример без пробела — "margin-left:20px".
Подключение внутренней таблицы стилей
Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег <style>, который размещается в разделе заголовка:
<head>
<style type="text/css">
li {font-family: arial}
p {font-size: 25%}
h1 {margin-right: 10pt}
</style>
</head>
В соответствии с определениями стиля браузер форматирует документ. Однако если он встретит незнакомые теги, то проигнорирует их. Например, старый браузер, который не поддерживает стили, проигнорирует тег <style>, но содержимое последнего будет выведено на странице. Чтобы этого не произошло, необходимо скрыть описание стиля в элементе комментария HTML:
<head>
<style type="text/css">
<!--
body {background-color: green}
table {border-style: dotted}
-->
</style>
</head>
Встроенные стили
Данный способ используется в том случае, если необходимо применить стиль к одному появлению элемента. Метод обладает существенным недостатком, так как он смешивает содержимое документа с его представлением и соответственно теряет многие преимущества таблиц стилей.
Для определения встроенных стилей в соответствующем теге применяют атрибут style, который может содержать любое свойство CSS.
Пример:
<body style="background-color: blue" >
<h1 style="color: yellow" >Заголовок H1</h1>
</body>
В примере показано, как задать цвет фона документа и цвет заголовка h1.