cursor:hand
С оригинальной документацией по CSS можно ознакомиться на сайте http://www.w3.org/
В спецификации CSS существует понятие строкового (in-line) и блочного (block) элементов разметки.
В качестве универсального блока выступает элемент DIV, а в качестве универсального элемента строковой разметки выступает элемент SPAN.
Элемент DIV дает возможность использовать атрибуты стиля, связанные с размещением блока,
а SPAN позволяет заменить собой элементы строки, такие как FONT, I, B, U, SUB, SUP и т.п.
Этот параграф выровнен по правой границе.
Этот параграф выровнен по центру.
Эта стока также отцентрирована.
Синтаксис псевдокласса
Псевдоклассы можно комбинировать с классами CSS, например,
В данном примере устанавливается значение селектора с первым em элементом в каждом P элементе.
В CSS существуют два псевдоэлемента - first-line, который позволяет определять вид первой строки параграфа
и first-letter, который определяет вид первой буквы параграфа.
Свойства псевдоэлемента - first-line
Свойства псевдоэлемента - first-letter
Приведем пример использования псевдоэлементов для форматирования первой буквы и первой строки в параграфе. Этот стиль определяется следующим образом:
Свойства блока текста: высота (height), ширина (width), граница (border), поле (margin), отступ (padding),
произвольное размещение (float), управление обтеканием (clear).
Отступ (padding) это расстояние между границами вложенных блочных элементов.
Ширина поля (margin) может задаваться по любому направлению относительно сторон блока:
Расстояние между границей и содержанием блока называется отступом.
Соответственно отступ может принимать значения:
У каждого блочного элемента разметки есть граница. От границы отсчитываются отступы (margin и padding). Вдоль границы "плавающего" блока происходит его обтекание текстом.
Для описания границ блоков применяются следующие атрибуты:
"Обтеканием" блока текста другим текстом управляют два атрибута CSS: float и clear.
Атрибут float определяет плавающий блок текста. Он может принимать значения:
left - блок прижат к левой границе,
Пример использования
При использовании "абсолютных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно.
При этом используется атрибут position:absolute.
Например, если некоторый блок с линейными размерами 100х200 px должен быть смещен в абсолютных координатах на вектор (20,10) (в пикселах), то для этого блока следует задать
Безусловно, относительная система координат более гибкая, она позволяет разместить блоки на странице в
координатах охватывающего их блока.
Использование относительных координат позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера.
Для относительного позиционирования используется атрибут position:relative. Например,
Для управления видимостью элемента служит атрибут visibility, который может принимать значения
visibility:visible и visibility:hidden. Например,
Например.
Кегль 24 px, гарнитура Serif, стиль скошенный, цвет шрифта коричневый.
Межбуквенное расстояние 5pt
Приведем несколько примеров использования этого атрибута
Для этой строки Для этой строки Для этой строки
Для выравнивания текста используется атрибут text-align, принимающий значения -
left (выравнивание по левому краю), right (выравнивание по правому краю) и
justify (выравнивание текста на оба края), center (выравнивание по центру).
Для перевода строчных букв в прописные и наоборот используется атрибут text-transform,
принимающий значения uppercase, lowercase, apitalize.
Например,
Преобразование uppercase Преобразование lowercase Преобразование capitalization
Еще один вид преобразования шрифта - это подчеркивание, перечеркивание или надчеркивание слов.
Выполняется такое преобразование путем применения атрибута text-decoration:, принимающий значения
line-through, underline, overline:
Перечеркнем,
подчеркнем,
под чертой.
Для оформления параграфов можно использовать указатель отступа "красной строки" - text-indent,
принимающий как положительные, так и отрицательные значения. Больше услуг предполагает псевдоэлемент
first-line, которые позволяет задавать не только отступ, но и другие параметры.
Псевдоэлемент first-letter позволяет управлять первой буквой строки.
CSS позволяет определять цвета таким образом, чтобы органично внедрять их в графическую среду
пользователя.
Приведем перечень значений относящихся к цвету атрибутов CSS и их
основной смысл.
Например, чтобы установить цвета фона и
переднего плана в параграфе в те же
значения, что и у окна пользователя,
напишите так:
Синтаксис CSS
Синтаксис CSS определен для трех групп - для селекторов (selector), их свойств (property) и параметров (value):
selector {property: value}
Как правило, в качестве селектора используется тег HTML, свойства которого мы хотели бы изменить. При этом изменяемое свойство отделяется от параметра (его значение) двоеточием и берется в фигурные скобки:
body {color: black}
Если параметр (значение) состоит из нескольких слов, то все значение берется в кавычки:
p {font-family: "sans serif"}
При этом, если подлежит изменению несколько свойств одного селектора, то они отделяются друг от друга точкой с запятой:
p {text-align:center;color:red}
При однотипном изменении нескольких селекторов, можно их сгруппировать, например,
h1,h2,h3,h4,h5,h6
{
color: green
}
В случае, если нужно использовать несколько разных свойств одного и того же селектора, в CSS используют классы селекторов. Имя класса отделено от названия селектора точкой, например, если необходимо в одном документе по разному задавать свойства элемента P, то можно использовать подобную конструкцию:
p.right {text-align: right}
p.center {text-align: center}
<p class="right">
Этот параграф выровнен по правой границе.
</p><p class="center">
Этот параграф выровнен по центру.
</p>
.center {text-align: center}
Тогда использовать этот класс можно нескольким селекторам, например
<h3 class="center">
Этот заголовок отцентрирован.
</h3><p class="center">
Эта стока также отцентрирована.
</p>
Этот заголовок отцентрирован.
*#text_green {color: green}
и при его использовании получаем
<h3 id="text_green">Текст</h3>
Текст
Комментарии в CSS ограничены сочетанием /* и */.
Псевдоклассы и псевдоэлементы
В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть или при определенном условии.
Псевдоклассы и псевдоэлементы, используемые в CSS позволяют изменять или добавлять различные свойства тем или иным селекторам.
selector:pseudo-class {property: value}.
Заметим, что CSS позволяет определять классы посредством псевдоклассов
selector.class:pseudo-class {property: value}
Приведем пример задания цвета гиперссылки в зависимости от навигации по данной странице.
a:link {color: #FF0000} /* непосещенная ссылка */
a:visited {color: #00FF00} /* посещенная ссылка */
a:hover {color: #FF00FF} /* мышка над ссылкой */
a:active {color: #0000FF} /* выбранная ссылка */
Заметим, что a:hover обязательно должно определяться после a:link и a:visited,
а a:active обязательно определяется после a:hover.
a.red:visited {color: #FF0000}
<a class="red" href="css.html">CSS</a>
Псевдокласс :first-child совпадает с элементом, являющимся первым дочерним элементом какого-либо другого элемента.
В приведенном примере селектор совпадает с любым элементом P, являющимся первым дочерним элементом
элемента DIV. Правило устанавливает величину отступа для первого параграфа DIV:
<STYLE>
div > p:first-child
{
text-indent:25px
}
</STYLE>
В этом случае при использовании конструкции
<div>
<p>
Первый параграф в div.
Будет реализован указанный отступ.
</p>
<p>
Второй параграф в div.
Для этого параграфа отступ уже применяться не будет.
</p>
p:first-child em
{
font-weight:bold
}
Псевдокласс языка :lang позволяет записывать селекторы CSS, которые совпадают с элементом, на базе языка пользователя (немецкий, французкий и пр.).
<STYLE>
P { font-size: 12pt; line-height: 12pt }
P:first-line {color: #0000FF; font-variant: small-caps}
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
</STYLE>
Кроме этого, есть еще два псевдоэлемента - :before, с помощью которого можно создавать некоторое событие (content) предшествующее определенному элементу и псевдоэлемент :after, который создает событие после элемента, например
h1:before
{
content: url(beep.wav)
}
и
h1:after
{
content: url(beep.wav)
}
Управление элементами блока
Блочные элементы (блоки текста или box) дают возможность работать с фрагментом текста в терминах
прямоугольников, которые этот текст занимает.
При этом блок текста становится элементом страницы таким же как картинка или таблица.
margin-left: левое поле.
margin-right: правое поле.
margin-top: верхнее поле.
margin-bottom: нижнее поле.
margin: задает общий внешний поля от всех сторон блока текста.
padding-left: левый отступ.
padding-right: правый отступ.
padding-top: верхний отступ.
padding-bottom: нижний отступ.
padding: определяет единый размер отступа блока.
rigth - блок прижат к правой границе,
both - текст может обтекать блок с обеих сторон.
обтекания текстового блока.
Позиционирование.
CSS определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость
размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга.
Для позиционирования блоков используется элементposition.
.abs_pos {
position:absolute;
top:10px;left:20px;
width:100px;height:200px;
}
Заметим, что смещения для определения координат блока могут быть отрицательными.
<div style="position:relative;top:50px;left:200px;border-style:outset;width=400px;"
background-color:green;
z-index:1;">
Этот блок смещен вниз на 50px и вправо на 200px
</div>
<div style="position:relative;left:100px;border-style:inset;width=200px;"
background-color:blue;
z-index:0;">
А этот блок смещен вправо на 200px
</div>
Этот блок смещен вниз на 50px и вправо на 200px
А этот блок смещен вправо на 200px
Атрибут z-index: указывает позицию элемента в стеке, при этом эти номера могут принимать как положительные, так и отрицательные значения.
<style>
h3.vis
{
visibility:visible
}
h3.hid
{
visibility:hidden
}
</style>
<h3 class="vis">visible</h3>
<h3 class="hid">hidden</h3>
visible
hidden
Наконец, чтобы показать не весь блок, а его часть, используется атрибут clip
Управление шрифтами
Для управления шрифтами используются следующие элементы:
<p style="font-size:24px;font-family:serif;font-style:oblique;color:darkred;">
Кегль 24 px, гарнитура Serif, стиль скошенный, цвет шрифта коричневый.
</p>
Для изменения межбуквенного расстояния используется атрибут letter-spacing:
line-height задано в 12 pt.
line-height задано в 24 pt.
line-height задано в 6 pt.<p style="text-transform:uppercase;">Преобразование uppercase </p>
<p style="text-transform:uppercase;">Преобразование lowercase </p>
<p style="text-transform:uppercase;">Преобразование capitalization </p>
Списки и таблицы.
В CSS для работы со списками используются следующие атрибуты
Для работы с таблицами используются следующие атрибуты
Работа с подложкой и цветом.
Элемент Background отвечает за наличие, вид и позиционирование подложки документа. Он обладает следующими атрибутами
P { color: WindowText; background-color: Window }
Курсоры.
| Cursor | Style Property | Cursor | Style Property |
|---|---|---|---|
|
|
cursor:default |
|
cursor:text |
|
|
cursor:crosshair |
|
cursor:help |
|
|
cursor:move |
|
cursor:hand |
|
|
cursor:wait |
|
cursor:*-resize |
|
|
cursor:n-resize |
|
cursor:e-resize |
|
|
cursor:se-resize |
|
cursor:progress |
|
|
cursor:all-scroll |
|
cursor:col-resize |
|
|
cursor:row-resize |
|
cursor:no-drop |
|
|
cursor:not-allowed |
|
cursor:vertical-text |
|
|
cursor:url(uri) Адрес курсора задается пользователем | ||
До недавнего времени при создании веб-сайтов ориентировались на мониторы настольных компьютеров с окном браузера примерно 1000px в ширину. В случае если ширина окна меньше, то появляется горизонтальная полоса прокрутки, если же монитор достаточно широкий, то содержание сайта выглядит растянутым или появляется широкое поле по сторонам веб-страницы, что тоже нехорошо.
На данный момент ситуация только обострилась - используется много разных размеров экрана и при создании веб-сайтов необходимо удовлетворить всех пользователей, не зависимо от типа используемых ими устройств. Большинство современных мобильных устройств позволяют до некоторой степени обходить ограничения с помощью масштабирования и панорамирования веб-страниц, но, как бы то ни было, просмотр веб-страницы, созданной для традиционных десктопов, на мобильном устройстве, является занятием мало увлекательным. Одним из решения этой проблемы является создание двух версий веб-сайтов - одна для настольных компьютеров и другая для мобильных устройств. Использование реагирующего дизайна позволяет создать только одну версию веб-сайта, которая будет работать на всех устройствах, не зависимо от его типа и размера, адаптируя внешний вид и элементы навигации под конкретный монитор и технологию управления.
В основе реагирующих шаблонов лежит стандарт CSS media queries. Использование технологии media queries позволяет создать множество правил CSS, которые применяются только в том случае, когда видимая область браузера находится в пределах диапазона заданной ширины/высоты. Например, при создании media query для окон, ширина которых менее 700 пикселей, можно применить набор пользовательских правил CSS, которые автоматически подстраивают элементы страницы, когда страница выводится на узкие окна браузера. Media queries работают почти во всех современных браузерах, за исключением Internet Explorer до восьмой версии включительно. Приведем некоторые возможности media queries, позволяющие конструировать реагирующие шаблоны:
Разница между шириной шаблона и шириной устройства достаточно важна, width - это ширина окна браузера, которая, для настольных компьютеров, как правило, меньше device-width ширины экрана, а для мобильных, больше ширины экрана. Это связано с тем, что большинство мобильных браузеров используют "виртуальное окно" с размерами больше, чем размер экрана, что позволяет пользователю увеличивать или уменьшать масштаб изображения, а также, используя сенсорное управление, перемещаться по области окна, перетаскивая изображения. Зная ширину экрана мобильного устройства, можно адаптировать шаблон, в соответствии с возможностями используемого устройства.
Важно! Величина width (min-width/max-width) измеряется в пикселях CSS, а device-width (min-device-width/max-device-width) измеряется в пикселях устройства. Для размера 100% на мобильном устройстве 1 CSS пиксель равен 1 пикселю устройства, но при изменении масштаба это соотношение меняется, меньше масштаб страницы - CSS-пиксель меньше пикселя устройства. Использование дисплеев высокой чёткости эту ситуацию только усугубляет. Но это исправимо. Используя тег viewport, можно управлять размером окна мобильного браузера. В частности, если нужно, чтобы ширина окна соответствовала ширине экрана устройства с соотношением 1:1 между CSS пикселями страницы и пикселями экрана устройства, то устанавлявая в тегах viewport значения первоначального масштаба initial-scale и максимального масштаба maximum-scale равными единице, получаем требуемый результат
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
Ранее для позиционирования элементов веб-страницы использовались таблицы. Преимущество табличной верстки состоит в том, что всегда и везде вид этой страницы будут одним и тем же. Но, наши недостатки - продолжение наших достоинств. Верстка на таблицах для среднестатистического дисплея делает сайт неудобным как для больших, так и для меньших экранов. Для того чтобы сверстать сайт, принимающий размеры по используемому дисплею используется верстка по блокам.
Приведем пример построения каркаса страницы, сверстанной по блокам:
<html> <head> <title>Каркас на блоках div</title> <link rel="stylesheet" type="text/css" href="CSS/style_div.css" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> <!-- Обертка --> <div id="wrapper"> <!-- Заголовок --> <div id="header"> Заголовок </div> <!-- Текст --> <div id="content"> Текст </div> <!-- Подвал --> <div id="footer"> Подвал </div> </div> </body> </html>Для формирования образа этой страницы используем css файл
body{ /* Общие параметры */
padding:0; /* Поле вокруг текста */
margin:0; /* Отступ */
font:bold 8em Bancodi, Verdana, Arial, Helvetica, sans-serif; /* Параметры шрифта */
color:black; /* Цвет шрифта*/
text-align:center; /* Центрирование текста */
}
#wrapper { /* Параметры обертки */
margin:0 auto;/* Отступ заголовка*/
width:920px; /* Ширина */
}
#header { /* Параметры заголовка */
width:900px; /* Ширина заголовка*/
padding:10px; /* Поле от внутреннего края рамки до содержимого заголовка */
border:1px solid #FFFACD; /* Параметры рамки заголовка */
height:100px; /* Высота заголовка */
margin:8px 0 5px 0; /* Отступы от верхнего, правого, нижнего и левого края */
background:#800000; /* Фоновый цвет */
line-height:100px; /* Интерлиньяж (межстрочный интервал) */
}
#content { /* Параметры основного окна */
width:900px; /* Ширина основного окна*/
border:1px solid #800000; /* Рамка - толщина линии, сплошная, цвет */
background:#FFFACD; /* Цвет фона основного окна */
margin:0 0 5px 0; /* Отступы от верхнего, правого, нижнего и левого края */
padding:8px; /* Поле от внутреннего края рамки до содержимого заголовка */
height:350px; /* Высота */
line-height:350px; /* Интерлиньяж (межстрочный интервал) */
}
#footer { /* Подвал */
width:900px;
border:1px solid #FFFACD;
background:#800000;
margin:0 0 8px 0; /* Отступы от верхнего, правого, нижнего и левого края */
padding:10px;
}
Результатом будет следующая страничка.
Однако при изменении размеров окна браузера веб-страница "съедается", а хотелось бы получить динамическое изменение страницы под размеры окна. Прежде всего, для достижения этой цели при разметке страницы следует использовать не абсолютные значения (например, px), а относительные.
Рассмотрим пример
<html>
<head>
<title>Резиновый сайт</title>
<link rel="stylesheet" type="text/css" href="CSS/style_rubber.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<div id="wrapper">
<!-- Заголовок -->
<div id="header">
Заголовок
</div>
<!-- Панель навигации -->
<div id="navigation">
Навигация
</div>
<!-- Левое поле -->
<div id="leftcolumn">
Левое поле
</div>
<!-- Центр -->
<div id="content">
Центр
</div>
<!-- Правое поле -->
<div id="rightcolumn">
Правое поле
</div>
<!-- Подвал -->
<div id="footer">
Подвал
</div>
</div>
</body>
</html>
Напишем соответствующий стилевой файл
body{ /* Параметры страницы*/
padding:0;
margin:0;
font:bold 14px Verdana, Arial, Helvetica, sans-serif;
color:#666;
text-align:center;
}
#wrapper { /* Параметры обертки*/
margin:0 auto;
max-width:1200px; /* Максимально возможная ширина */
min-height:350px; /* Минимально возможная высота (чтобы страничка не "схлопалась") */
}
#header {
width:100%;
padding:10px;
border:1px solid #FFFACD;
height:100px;
margin:10px 0 5px 0;
background:#800000;
line-height:100px;
font:bold 8em Bancodi,Verdana, Arial, Helvetica, sans-serif; /* Параметры шрифта, используемого в этом окне*/
color:#FFFACD;
}
#navigation{
width:100%; /* Ширина по всей странице*/
border:1px solid #700000;
background:#FFFACD;
margin:0 0 5px 0;
padding:10px;
}
#leftcolumn {
float:left; /* Выравнивает элемент по левому краю, а все остальные элементы обтекают его по правой стороне */
border:1px solid #FFFACD;
background:#700000;
margin:0 5px 5px 5px;
padding:10px;
height:350px;
width:20%; /* Значение ширины - пятая часть ширины страницы */
line-height:350px;
}
#content {
float:left; /* Выравнивает элемент по левому краю, а все остальные элементы обтекают его по правой стороне */
border:1px solid #800000;
background:#FFFACD;
margin:0 5px 5px 0;
padding:10px;
height:350px;
width:50%; /* Значение ширины - половина ширины страницы */
display: block; /* Показывает элемент как блочный */
line-height:350px;
font:bold 8em Bancodi,Verdana, Arial, Helvetica, sans-serif; /* Параметры шрифта, используемого в этом окне*/
color:black;
}
#rightcolumn {
float:left;
border:1px solid #FFFACD;
background:#700000;
margin: 0 5px 5px 0;
padding:10px;
height:350px;
width:20%; /* Значение ширины - пятая часть ширины страницы */
display: block; /* Показывает элемент как блочный */
line-height:350px;
}
#footer {
width:100%; /* Ширина по всей странице*/
clear:both; /* Отменяет обтекание элемента одновременно с правого и левого края */
border:1px solid #FFFACD;
background:#800000;
margin:0 0 10px 0;
padding:10px;
}
Из неиспользованных ранее свойств, появилось float. Это свойство определяет, по какой стороне
будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
В случае значения свойства float равным none, элемент выводится на странице как обычно, но при этом
допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Атрибуты float
Полученная страничка будет выглядеть следующим образом.
Теперь при изменении размера окна меняется и размер блоков, из которых собрана страница. Смотрится лучше, но до поры, до времени. При уменьшении ширины окна браузера менее 1000px правый блок странички заваливается, в результате чего страница становится малопривлекательной. Какой выход?
Решение этой проблемы лежит в использовании возможностей media query для определения текущей ширины окна. Если текущая ширина окна браузера меньше 1000px, то изменим дизайн страницы, помещая правую панель в подвал и растягивая основное окно на освободившееся место. Для этого поместим (либо в CSS-файл, либо ограничим в html-документе тегом style) фрагмент кода
@media screen and (max-width: 1000px) {
#leftcolumn{
margin:0 0 0 0; /* С целью экономии места уменьшим отступы */
}
#content {
margin:0 0 0 0; /* С целью экономии места уменьшим отступы */
width: 70%; /* Растягиваем колонку по ширине правой колонки, ушедшей в подвал*/
}
#rightcolumn {
width: 100%; /* Растягиваем колонку по всей ширине */
height:auto; /* Форматируем высоту колонки по реальному наполнению */
line-height:20px; /* Новый интерлиньяж (межстрочный интервал) */
}
}
Полученное решение позволит сохранить достойный вид веб-страницы, но только до тех пор, пока окно не
уменьшится до 600px. При дальнейшем уменьшении в подвал завалится уже блок с основным содержанием.
Для исправления проблемы добавим фрагмент кода, который позволяет левую колонку переместить вверх и
отформатировать по всей ширине странички, а на все оставшееся место растянуть блок с основным содержанием.
@media screen and (max-width: 600px) {
#leftcolumn{
width: 100%; /* Растягиваем колонку по всей ширине */
height:auto; /* Форматируем высоту колонки по реальному наполнению */
line-height:20px; /* Новый интерлиньяж (межстрочный интервал) */
margin:0 0 0 0; /* Отступы от верхнего, правого, нижнего и левого края */
}
#content {
margin:2px 0 2px 0; /* Отступы от верхнего, правого, нижнего и левого края */
width: 100%; /* Растягиваем колонку по всей ширине */
}
#rightcolumn {
width: 100%; /* Растягиваем колонку по всей ширине */
height:auto; /* Форматируем высоту колонки по реальному наполнению */
line-height:20px; /* Новый интерлиньяж (межстрочный интервал) */
margin:0 0 0 0; /* Отступы от верхнего, правого, нижнего и левого края */
}
}
Результатом будет следующая страничка.