ЛЕКЦИЯ
Тема: «Идентификация и группирование.
Блочная верстка»
План лекции
1. Идентификация и группирование элементов
(class и id)
1.1. Группирование элементов с помощью class
1.2. Идентификация элементов с помощью id
2. Группирование элементов (span и div)
2.1. Группирование с помощью <span>
2.2. Группирование с помощью <div>
1.
Идентификация и группирование элементов (class и id).
Когда нужно применить оригинальный стиль к
определенным элементам сайта используется class и id для специфицирования свойств выбранных элементов.
1.1. Группирование элементов с помощью
class
С помощью
него можно применить любой стиль к определённому элементу или группе элементов.
Предположим, что нам надо сделать заголовки на нашей странице разных цветов.
Для этого прописываем селекторам example1 и example2 (названия селекторов могут быть
любыми) разные цвета:
.example1
{color:#CC0000}
и
.example2 {color:#008000},
где точка перед селекторами - обязательна. Далее используем наше свойство class в заголовке h3, которое и
приравниваем к нужному селектору:
<h3 class="example1">
и
<h3 class="example2">.
<html>
<head>
<title>Пример</title>
<style type="text/css">
.example1 {color:#CC0000}
.example2 {color:#008000}
</style>
</head>
<body>
<h3 class="example1"> Заголовок красного цвета.</h3>
<p>Наш
текст</p>
<h3 class="example2">Заголовок зеленого цвета.</h3>
<p>Наш
текст</p>
</body>
</html>
Результат в
браузере:
Пример:
Предположим, у нас есть два списка меню учебника - для
CSS и для HTML. В документе HTML-код может быть таким:
<p>Учебник по CSS</p>
<ul>
<li><a href="#">Введение</a></li>
<li><a href="#">Основы</a></li>
<li><a href="#">Код</a></li>
</ul>
<p>Учебник по HTML</p>
<ul>
<li><a href="#">Введение</a></li>
<li><a href="#">Основы</a></li>
<li><a href="#">Код</a></li>
</ul>
Пример - как это выглядит с помощью HTML
Сделаем ссылки для CSS одним цветом, а для HTML
другим. Для достижения этой цели мы разделим ссылки на две категории с помощью
присвоения класса каждой ссылке атрибутом class.
Установим классы для предыдущего примера:
<p>Учебник по CSS - все ссылки
желтые</p>
<ul>
<li><a href="#"
class="css">Введение</a></li>
<li><a href="#"
class="css">Основы</a></li>
<li><a href="#"
class="css">Код</a></li>
</ul>
<p>Учебник по HTML - все ссылки
бордовые</p>
<ul>
<li><a href="#"
class="html">Введение</a></li>
<li><a href="#"
class="html">Основы</a></li>
<li><a href="#"
class="html">Код</a></li>
</ul>
Далее мы можем определить специальные свойства для
ссылок css
и html,
соответственно.
a {color: blue;}
a.css
{color: #FFBB00;}
a.html
{color: #800000;}
Пример - с настройками классов в СSS
Как показано в примере, вы можете определять свойства
для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице
стилей документа.
Итог
В селекторах класса в качестве селектора указывается
элемент или группа элементов, оформленных одним стилем. Нужно записать элемент
HTML, который будет образовывать класс, поставить после него точку, после точки
записать название класса (какое угодно). Например:
|
|
|
|
Если обозначить в заголовке H1 class=bluecolor, то
он будет выглядеть также (голубого цвета), как заголовок "Селекторы
класса" в этом документе.
Если вы хотите сделать общий класс, который можно
будет применять к любым HTML элементам, то просто не нужно записывать элемент
HTML, а надо сразу поставить точку, после нее записать название класса, а после
названия класса записать определение стилей. Например:
|
|
У элемента, которому будет присвоен класс bluecolor, текст будет голубого цвета. Этот класс можно применить ко многим
элементам: ссылке, абзацу, заголовку, форме и т.д. Очень важным является то,
что к одному элементу можно применить сразу несколько классов. Для этого нужно
записать их через пробел.
1.2. Идентификация элемента с помощью id
В отличие от группирования (свойство class ), каждый id должен быть уникальным, т.е. не более одного элемента
с определённым id. В других случаях используйте атрибут class.
Использование атрибута схоже со свойством class. Поэтому, его использование
мы рассмотрим на том же примере. Также, как и в группировании, прописываются
селекторам example1 и example2 нужные нам значения:
#example1
{color:#CC0000} и #example2 {color:#008000},
где знак # перед селекторами - обязателен. Далее присваиваем атрибуту id нужный нам
селектор:
id="example1" и id="example2" , в нашем случае, в заголовке h3.
<html>
<head>
<title>Пример</title>
<style type="text/css">
#example1 {color:#CC0000}
#example2 {color:#008000}
</style>
</head>
<body>
<h3 id="example1"> Заголовок красного цвета.</h3>
<p>Наш
текст</p>
<h3 id="example2"> Заголовок зеленого цвета.</h3>
<p>Наш
текст</p>
</body>
</html>
Результат в браузере:
Пример.
<h1>Глава 1</h1>
<h2>Глава 1.1</h2>
<h2>Глава 1.2</h2>
<h1>Глава 2</h1>
<h2>Глава 2.1</h2>
<h3>Глава 2.1.2</h3>
Это могут быть заголовки документа, разделённого на главы
или параграфы. Естественным будет назначить id каждой главе:
<h1 id="style1">Глава 1</h1>
<h2
id="style1-1">Глава 1.1</h2>
<h2
id="style1-2">Глава 1.2</h2>
<h1
id="style2">Глава 2</h1>
<h2
id="style2-1">Глава 2.1</h2>
<h3
id="style2-1-2">Глава 2.1.2</h3>
Заголовок, скажем, Глава 1.2, должен быть красным. Это
делается в соответствии с CSS:
#style1-2{color: red;}
Когда же
лучше использовать атрибут class, а когда id?
Ответ достаточно прост. Если вам
необходимо изменить оформление для одной определенной группы элементов, то
группировать их необходимо с помощью классов, если же вы хотите задать значение
одному определенному элементу, то делать это лучше при помощи id.
Однако никто не мешает использовать один и тот же id в нескольких местах
(правда по правилам в одном документе нельзя использовать один и тот же id несколько раз). Но
здесь есть одно существенное замечание — id имеет более высокий приоритет. Рассмотрим пример: пусть для заголовка h1 применяется
одновременно и class, и id, и в каждом из них описан цвет текста, тогда
заголовок окрасится в цвет, который указан для id.
Маленький пример, описывающий отличия и применение
идентификатора и класса. Применим стили описанные ниже:
<style> .class1{color: black;} #id1{color: red;} </style> |
к конструкции:
<p class="class1">Текст черного цвета<p><p id="id1">Текст красного цвета<p><p class="class1" id="id1">Текст снова красного цвета, id имеет приоритет.</p> |
2. Группирование элементов (span
и div)
Элементы <span> и <div> используются для структурирования документа, часто
совместно с атрибутами class и id.
2.1. Группирование с помощью
<span>
Элемент <span> можно назвать нейтральным элементом, который ничего
не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может
использоваться для визуальных эффектов применимо к отдельным блокам текста.
Пример:
Что такое CSS с помощью </span>:
<p>CSS (англ. Cascading Style Sheets — каскадные
таблицы стилей) — формальный язык описания внешнего вида документа, написанного
с использованием языка разметки.</p>
Сделаем часть текста красным благодаря использованию
преимуществ <span>
<h1>Пример – Что такое CSS с помощью
/span:</h1>
<p><span
class="vid">CSS</span> (англ. Cascading Style
Sheets — каскадные таблицы стилей) — формальный <span class="vid">язык</span> описания внешнего вида документа, написанного с использованием языка <span class="vid">разметки</span>.</p> Каждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей:
CSS:
span.vid {color:red;}
Разумеется, вы можете также использовать id для определения
стиля <span>-элементов. Не забывайте только, что вы должны
установить уникальный id каждому из трёх <span>-элементов.
2.2. Группирование с помощью <div>
В то время как <span> используется в элементах уровня блока, как в
предыдущем примере, <div> применяется для группирования одного или более
блок-элементов.
Главное отличие его использования заключается в том,
что содержимое тега всегда начинается с новой строки и после него всегда
добавляется перенос строки.
Кроме этого отличия, группирование с помощью <div> работает
более или менее аналогично. Сделаем два списка с помощью <div>:
<div
id="css">
<ul>
<li>Основные понятия</li>
<li>Структура</li>
<li>Работа с текстом </li>
<li>Работа с изображением</li>
<li>Группы</li>
<li>Классы</li>
</ul>
</div>
<div id="html">
<ul>
<li>Основные понятия</li>
<li>Структура</li>
<li>Теги</li>
<li>Таблицы</li>
<li>Работа с текстом</li>
<li>Работа с изображением</li>
</ul>
</div>
В таблице стилей мы можем использовать такое же
группирование, как и раньше:
#css {background:blue;}
#html {background:red;}
Поговорим о полях (свойство margin) и отступах
(свойство padding) элемента. Между собой эти два свойства схожи, однако все же это два
абсолютно разных свойства.
Поле (margin) - это расстояние от внешней границы элемента до
границы окна браузера или же элемента родителя (границы того блока в который
вложен наш элемент).
Отступом (padding) - называют расстояние от внутренней границы элемента
до его содержания текста, картинок, таблиц.
На рисунке наглядно показаны эти расстояния, а так же
место занимаемое бордюром (border) про него тоже не следует забывать.
Расстояния margin и padding указываются:
px - В пикселях или
любых других допустимых CSS единицах измерения.
% - В процентах.
auto - Размер полей и
отступов автоматически рассчитывается браузером.
Сделаем тоже самое, что показано на рисунке с помощью
блоков <div> и свойств CSS.
Пример CSS:
div.block1 {width: 260px;
background-color: #c5ffa0;
border: 2px solid #a68754}
div.block2
{background-color: #c0e4ff;
border: 8px solid #a68754;
margin: 40px;
padding: 20px}
Пример HTML:
<head>
<title>My
CSS</title>
<link
rel="stylesheet" type="text/css"
href="/style/style.css" media="all"/>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
</head>
<body>
<div
class="block1">Поле margin
<div
class="block2">Поле padding</div>
</div>
</body>
</html>
Возможные
значения margin и padding.
В примере выше присудив свойствам margin и padding по одному
значению, мы определили поля и отступы элемента со всех четырех его сторон. Для
того чтобы указать разные размеры полей и отступов для каждой из сторон
элемента, необходимо указывать два, три или четыре аргумента через пробел.
Причем в зависимости от количества значений результат будет разным.
margin: 5px; - одно
значение.
Одно значение - Поля одинаковые со всех сторон.
margin: 5px 40px; -
два значения.
Первое значение - Устанавливает поля от верхней и
нижней границ.
Второе значение - Устанавливает поля от левой и правой
границ элемента.
margin: 5px 40px 20px; -
три значения.
Первое значение - Устанавливает поле от верхней
границы элемента.
Второе значение - Устанавливает поля от левой и правой
границ элемента.
Третье значение - Устанавливает поле от нижней границы
элемента.
margin: 5px 40px 20px 1px; - четыре значения.
Первое значение - Устанавливает поле от верхней
границы элемента.
Второе значение - Устанавливает поле от правой границы
элемента.
Третье значение - Устанавливает поле от нижней границы
элемента.
Четвёртое значение - Устанавливает поле от левой
границы элемента.
С padding дело происходит по тому же принципу, как и с margin, отступы от
внутренних границ элемента до содержания приобретают размеры в зависимости от
количества аргументов и их значений.
Пример.
CSS:
#block1{margin:auto 100px;
border:4px
solid #a68754;
background-color:lightgreen;
height:600px;
}
#block2{margin:50px 50px 50px 150px;
padding:40px;
border:4px
solid #a68754;
background-color:lightblue;
}
#block3{margin:50px 200px 50px 10px;
padding:40px;
border:4px
solid #a68754;
background-color:lightblue;
}
HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet"
type="text/css" href="/style/style.css"
media="all"/>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<div
id="block1">Текст 1 Текст 1 Текст 1
<div id ="block2">Текст
2 Текст 2 Текст 2 </div>
<div id ="block3">Текст
3 Текст 3 Текст 3 </div>
</div>
</body>
</html>
Дочерние
свойства margin и padding.
Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.
У margin зто:
margin-top - Поле от
верхней границы элемента родителя,
margin-left - Поле от
левой границы элемента родителя,
margin-right - Поле от
правой границы элемента родителя,
margin-bottom - Поле
от нижней границы элемента родителя.
И у padding соответственно:
padding-top - Отступ
от верхней границы элемента до его содержания,
padding-left - Отступ
от левой границы элемента до его содержания,
padding-right - Отступ
от правой границы элемента до его содержания,
padding-bottom - Отступ
от нижней границы элемента до его содержания.
4. Рамки – свойство Border
Поговорим о том, как сделать с помощью CSS рамку -
бордюр, вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно
было применить далеко не к каждому тегу (элементу) да и не всегда он мог решить
ту или иную дизайнерскую задумку.
В CSS эту задачу берёт на себя одноимённое базовое свойство
border и
значительно расширяет круг возможностей при работе со стилем границы любого
элемента выводимого на экран.
Стиль
границы.
Если в HTML бордюр мог быть только в виде сплошной линии вокруг
элемента, то в CSS это уже достаточно широкий набор возможных стилей
рамок.
Свойство border-style может присваивать элементу один из ниже перечисленных
стилей границы.
none - граница
отсутствует (по умолчанию).
dotted - граница из
ряда точек.
dashed - пунктирная
граница.
solid - сплошная
граница
double - двойная
граница
groove - граница
"бороздка"
ridge - граница
"гребень"
inset - вдавленная
граница
outset - выдавленная
граница
Пример CSS:
p {background-color:
#f5f5f5;text-align: center;}
Пример HTML:
<head>
<title>My
CSS</title>
<link
rel="stylesheet" type="text/css"
href="/style/style.css" media="all"/>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
</head>
<body>
<p
style="border-style: none;">граница отсутствует</p>
<p
style="border-style: dotted;">граница из ряда точек</p>
<p
style="border-style: dashed;">пунктирная граница</p>
<p
style="border-style: solid;">сплошная граница</p>
<p
style="border-style: double;">двойная граница</p>
<p
style="border-style: groove;">граница "бороздка"</p>
<p
style="border-style: ridge;">граница "гребень"</p>
<p
style="border-style: inset;">вдавленная граница</p>
<p style="border-style:
outset;">выдавленная граница</p>
</body>
</html>
В браузере:
Стиль бордюра может быть задан как для всех сторон
элемента одновременно, так и для каждой его стороны отдельно в зависимости от
того, сколько значений присвоено свойству border-style. Таковых значений может быть от одного до четырёх по
числу сторон элемента.
В каждом из четырёх случаев действуют свои
"правила" по присуждению стиля рамки той или иной стороне элемента,
которые приведены ниже:
Толщина
границы.
Свойство border-width - устанавливает ширину границы элемента. Ширина
бордюра может быть заданна с помощью следующих аргументов:
thin - тонкая
граница
medium - средняя
толщина границы
thick - толстая
граница
А также в пикселях
или любых других единицах измерения принятых в CSS.
Цвет
границы.
Цвет рамки или её
сторон по отдельности определяется свойством border-color. Цвет бордюра может иметь следующие значения:
#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета
RGB.
transparent - прозрачная
граница.
Так же как и в
случаях с толщиной и стилем, цвет бордюра тоже может иметь от одного до четырёх
цветовых значений при каждом варианте, окрашивая нужные стороны бордюра, как
показано в таблице ниже.
Границы
справа слева сверху и снизу отдельно.
Для того, что бы
определить стиль, цвет и ширину бордюра для одной из сторон элемента,
пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними "коллегами по цеху" список
которых приведён ниже:
border-bottom - Определяет стиль, цвет и ширину нижней границы
элемента.
border-bottom-color - Устанавливает цвет нижней границы элемента.
border-bottom-style - Определяет стиль нижней границы элемента.
border-bottom-width - Определяет ширину нижней границы элемента.
border-left - Определяет стиль, цвет и ширину левой границы элемента.
border-left-color - Устанавливает цвет левой границы элемента.
border-left-style - Определяет стиль левой границы элемента.
border-left-width - Определяет ширину левой границы элемента.
border-right - Определяет стиль, цвет и ширину правой границы
элемента.
border-right-color - Устанавливает цвет правой границы элемента.
border-right-style - Определяет стиль правой границы элемента.
border-right-width - Определяет ширину правой границы элемента.
border-top - Определяет стиль, цвет и ширину верхней границы
элемента.
border-top-color - Устанавливает цвет верхней границы элемента.
border-top-style - Определяет стиль верхней границы элемента.
border-top-width - Определяет ширину верхней границы элемента.
Создание
элементов со сглаженными углами
С помощью нового
CSS3 свойства border-radius можно делать углы
элементов сглаженными.
Пример
#el1 {border-radius:5px;}
#el2 {border-radius:10px;}
В браузере:
Данное свойство может применяться не ко
всем углам элемента, а только к определенным:
border-top-left-radius
делает сглаженным только верхний левый угол элемента;
border-top-right-radius
делает сглаженным только верхний правый угол элемента;
border-bottom-left-radius
делает сглаженным только нижний левый угол элемента;
border-bottom-right-radius
делает сглаженным только нижний правый угол элемента.
Пример.
#el1 {border-top-left-radius:20px; border-radius:5px;}
#el2 {border-top-right-radius:20px; border-radius:10px;}
Добавление к элементам тени
С помощью свойства box-shadow можно добавлять к элементам страницы
тени.
Тень может быть внешней и внутренней. Внешние
тени создают эффект приподнятости элемента над остальным содержимым, а
внутренние создают эффект вдавленности элемента.
Пример.
#el1 {box-shadow:4px 4px black;}
#el2 {box-shadow:6px 6px 6px 2px black;}
Возможен дополнительный параметр:
#el3 {box-shadow:0px 0px 6px 2px black inset;}
5. Высота и ширина
Определять высоту и ширину элемента
можно с помощью свойств:
Width и height
Установка ширины [width]
Свойством width вы можете определять ширину элемента.
В примере показан бокс для ввода
текста:
div.box {width: 200px;
border: 1px solid black;
background: orange;}
Установка высоты [height]
Обратите внимание, как, в предыдущем примере,
высота бокса устанавливается содержимым этого бокса. Высоту элемента можно
определить свойством height. В качестве примера
создадим бокс высотой 500px:
div.box {height: 500px;
width: 200px;
border: 1px solid black;
background: orange;}
6. Свойство Float
(поплавки)
Float - этому свойству при переводе с
английского не придумали более точного определения, нежели чем
"поплавок". А элемент с таким свойством называют "всплывающим".
Элемент может "всплывать" вправо или влево с помощью свойства.
Свойство float определяет, по какой стороне будет
выравниваться - всплывать элемент, при этом остальные элементы будут обтекать
его с других сторон.
Выравнивание элемента происходит по
краям родительского элемента или же по краям окна браузера.
Значения свойства float:
left - Выравнивает элемент по левому краю,
остальные элементы обтекают его справа.
right - Выравнивает элемент по правому
краю, остальные элементы обтекают его слева.
none - Выравнивание элемента не задается
(по умолчанию)
Если мы, например, хотим, чтобы текст
окружал рисунок, то результат должен быть таким:
HTML-код для этого примера:
<div id="picture">
<img src="css.jpg"
alt="CSS" width="90px">
</div>
<p>CSS (Cascading Style Sheets) Каскадные стили таблиц – это язык
стилей позволяющий определять отображения HTML документа. Так как HTML
используется для создания структуры документа, то CSS используется для
форматирования содержимого структуры HTML. Многие свойства, используемые в
Cascading Style Sheets (CSS), аналогичны свойствам HTML.
</p>
Чтобы рисунок всплывал влево, а текст
окружал его, вы должны определить ширину бокса, окружающего рисунок, и
установить в свойстве float значение left:
Пример CSS:
#picture {float:left; width: 100px;}
Результат:
Пример в три колонки:
Поплавки/Floats можно использовать для
вывода колонок в документе. Для этого вы должны просто определить необходимые
колонки в HTML-коде тэгами <div> таким образом:
HTML-код для этого примера:
<div id="column1">
<p>CSS (Cascading Style Sheets) Каскадные стили таблиц – это язык
стилей...</p>
</div>
<div id="column2">
<p>Так как HTML используется для создания структуры документа, то
CSS используется...</p>
</div>
<div id="column3">
<p>Многие свойства, используемые в Cascading Style Sheets (CSS),
аналогичны свойствам HTML...</p>
</div>
Теперь необходимую ширину колонок
установим, например, 33%, а затем установим всплывание каждой влево в свойстве
float:
Пример CSS:
#column1{background-color:lightgrey;
float:left;
width:33%; }
#column2{background-color:lightgreen;
float:left;
width:33%; }
#column3{background-color:yellow;
float:left;
width:33%; }
Результат:
Свойство clear управляет поведением последовательностью всплывающих
элементов документа.
По умолчанию последовательные элементы
смещаются вверх, заполняя доступное пространство, которое освобождается, если
бокс всплывает в сторону.
Свойство clear может иметь значения left, right, both или none. Принцип таков, что если clear, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет
находиться под нижним краем поля возможных всплывающих сверху боксов.
<div id="picture">
<img src="css.jpg"
alt="CSS" width="90px">
</div>
<h1>CSS</h1>
<p class="floatstop"> CSS
(Cascading Style Sheets) Каскадные стили таблиц – это язык стилей...</p>
Чтобы не дать тексту всплывать вверх
перед рисунком, мы можем добавить такой код CSS:
#picture {float:left;
width: 100px;}
.floatstop {clear:both;}
Блочная верстка заменяет таблицы HTML.
Разберём классический макет верстки
сайта из трёх колонок, а так же "шапки" и "подвала". В
котором правая и левая колонки имеют фиксированную ширину, а центральная
колонка "резиновая" т.е. занимает собой всё оставшееся место.
HTML-код для этого примера:
<head>
<title>My CSS</title>
<link
rel="stylesheet" type="text/css"
href="/style/style.css" media="all"/>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
</head>
<body>
<div id="logo">Логотип</div>
<div id="menu">Меню</div>
<div id="reklam">Реклама</div>
<div id="content">
Основное содержание<br><br><br><br><br>
И ещё куча текста..
</div>
<div id="foter">Подвал</div>
</body>
</html>
Пример CSS:
body { color: black;
background-color: white; }
#logo { background-color: #9da6a2;
padding: 5px; }
#menu { background-color: #247eca;
width: 100px; height: 250px;
float: left;
padding: 5px; }
#reklam { background-color: #247eca;
width: 100px; height: 250px;
float: right;
padding: 5px; }
#content { background-color: #4e8f0c;
height: 250px; padding: 5px 15px; }
#foter { background-color: #ff9e5c;
clear: both; padding: 5px; }
Например, давайте
зададим для некого абзаца курсор в виде перекрестия:
p { cursor: pointer; }
Изменение курсора при наведении мыши, например, на изображение:
img {cursor: pointer;}
Можно
воспользоваться inline-стилем:
<img src=”myimage.jpg” alt=”Моё изображение” style=”cursor:pointer;”>
КОНТРОЛЬНЫЕ ВОПРОСЫ
1. Как применяется
группирование элементов с помощью class?
2. Как применяется
группирование элементов с помощью id?
3. Расскажите о
группировании элементов с помощью контейнера div?
4. Как применяется
группирование элементов с помощью span?
5. Как задаются поля и
отступы элементов?
6. Как создать рамку
вокруг элемента?
7. Как определить
высоту и шири ну элемента?
8. Что означает свойство float и, какие значения может принимать?
9. Опишите свойство clear.
10. Как задать вид курсора при наведении мышью на элемент?