Div и Span

Переклад українською: Div та Span

<div> и <span> применяются вместе с каскадными таблицами стилей. По отдельности они не вызывают больших изменений. Факт в том, что тег <span> вообще не влияет визуально на контент. Использование тега <div> приведет к «блокировке» его содержимого, как если бы вы поставили тег <br> до и после секции на странице.

Как и большинство остальных тегов, <div> и <span> могут иметь класс, идентификатор и стилевые атрибуты. Благодаря этим атрибутам стили можно применять к элементам. Теги применяются таким же способом, как и другие HTML-теги. Допускается вложенность одних тегов в другие в несколько уровней.

Образец кода

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>Div and Span</title>
06 </head>
07 <body>
08 <div style="position:absolute; left:0px; top:0px;
09  font-family:Verdana; font-size:10pt;
10  border-style:groove; border-width:30px; border-color:blue; padding:4px">
11 This text appears in the
12  <span style="font-style:italic; color:red">upper-left hand corner</span>
13 of the page.<br />
14 It also has a big blue groovy border around it.
15 </div>
16 </body>
17 </html>

Упражнение: Div и Span

Продолжительность задачи: от 10 до 20 мин.

Это упражнение научит вас как добавлять классы (class) и атрибуты идентификаторов (id) тегам div и span HTML-страницы, которые уже существуют. HTML-страница уже имеет встроенную таблицу стилей, которая должна оставаться без изменений. Ваша задача состоит в том, чтобы сделать так, что страница выглядит как следует.

Никаких подробных инструкций. Просто анализируйте правила во встроенной таблице стилей, используйте классы и идентификаторы id и соответствующим образом применяйте их.

Единицы измерений

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

Единица измерений	Описание	Пример
px	Пиксели	margin-top: 10px;
pt	Пункты	font-size: 12pt;
in	Дюймы	padding-top: .5in;
cm	Сантиметры	top: 5cm;
mm	Миллиметры	left: 45mm;
pc	Пика	bottom: 12pc;
em	Em	font-size: 1.5em;
ex	Ex	font-size: 1.5ex;
%	Проценты	width: 80%;

← Группировка и вложенность | Float и Clear →