Div и Span

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

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

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

Образец кода:

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

Пиксели (px)

Единица измерений, которая наиболее часто используется в веб-дизайне, — это пиксели. В отличие, например, от дюймов и пунктов, пиксель не является абсолютной величиной. Окончательный размер пикселя определяется размером и разрешением экрана пользователя. Представьте себе картину шириной 900 пикселей. Если установленное разрешение монитора 800 на 600 пикселей, изображение не поместится на экране. Но если на том же мониторе установлено разрешение 1024 на 768 пикселей, картинка поместится и останется немного пространства.

Типографский пункт (pt)

Пункты должны использоваться для печати. Один дюйм равен 72 пунктам.

Дюймы (in), сантиметры (cm), миллиметры (mm)

Несмотря на то, что это одни из самых распространенных единиц измерений, в веб-дизайне лучше их не использовать.

Пики (pc)

Пика (Picas) — единица измерений, которая используется для печати. Один дюйм равен 6 пикам.

Em (em)

Em, или Мутт, — это относительная единица измерений, определяющая размер буквы «М» в шрифте. Поскольку em — величина относительная, а не абсолютное значение, она часто используется в веб-дизайне.

Ex (em)

Ex, или “x-высота”, определяет высоту строчной «x» шрифта. Ex применяется для установки размера контента в зависимости от размера окружающего шрифта.