CSS-вёрстка
advertisement
Каскадные таблицы
стилей
Лекция 7
Cascading Style Sheets
CSS (англ. Cascading Style Sheets —
каскадные таблицы стилей) —
технология описания внешнего вида
документа, написанного языком разметки.
Преимущественно используется как
средство оформления веб-страниц в
формате HTML и XHTML, но может
применяться с любыми видами документов
в формате XML и др..
Cascading Style Sheets
Стандарт CSS определяет приоритеты, в порядке которых
применяются правила стилей, если для какого-то элемента подходят
несколько правил одновременно. Это называется «каскадом», в
котором для правил рассчитываются приоритеты или «веса», что
делает результаты предсказуемыми.
Таблица стилей состоит из набора правил. Каждое правило, в свою
очередь, состоит из одного или нескольких селекторов, разделённых
запятыми, и блока определений. Блок определений же обрамляется
фигурными скобками, и состоит из набора свойств и их значений.
Схематически это можно показать так:
селектор, селектор {
свойство: значение; свойство: значение; свойство: значение;
}
Cascading Style Sheets
Например:
p { font-family: Garamond, serif; }
h2 { font-size: 110 %; color: red; background: white; }
.note { color: red; background: yellow; font-weight: bold; }
p#paragraph1 { margin: 0; }
a:hover { text-decoration: none; }
#news p { color: blue; }
Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.
В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня)
назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт
недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет
отображаться красным на белом фоне с увеличенным кеглем.
Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'.
Например:
<p class="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом
фоне.</p>
Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1.
Такие элементы не будут иметь внешних отступов (margin).
Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров
текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши
находится над этими элементами.
Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с
атрибутом id, равным «news».
CSS-вёрстка
До появления CSS оформление веб-страниц осуществлялось непосредственно
внутри содержимого документа. Однако с появлением CSS стало возможным
принципиальное разделение содержания и представления документа. За счёт этого
нововведения стало возможным лёгкое применение единого стиля оформления для
массы схожих документов, а также быстрое изменение этого оформления.
Преимущества CSS вёрстки:
Несколько дизайнов страницы для разных устройств просмотра. Например, на
экране дизайн будет рассчитан на большую ширину, во время печати меню не
будет выводиться, а на КПК и сотовом телефоне меню будет следовать за
содержимым.
Уменьшение времени загрузки страниц сайта за счет переноса правил
представления данных в отдельный CSS-файл. В этом случае браузер загружает
только структуру документа и данные, хранимые на странице, а представление
этих данных загружается браузером только один раз и кэшируется.
Простота последующего изменения дизайна. Не нужно править каждую страницу,
а лишь изменить CSS-файл.
Дополнительные возможности оформления. Например, с помощью CSS-вёрстки
можно сделать блок текста, который остальной текст будет обтекать (например для
меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.
CSS-вёрстка
Для того, чтобы создать домашнюю страничку
или сайт, необходимо воспользоваться CSS,
поскольку данный способ оформления страницы
очень удобен и прост.
Сравним записи:
<BODY bgcolor=”#DFDFF0” text=”#1D1D18”>
<body style=”backround-color: #DFDFF0;
color:#1D1D18”>
CSS-вёрстка
background-image:url(dog.jpg) данный фоновый
рисунок можно копировать по разным сторонам, к
примеру:
<body style=”backround-image:url(); backgroundrepeat: repeat-y; backround-attachment:fixed”>
Данное значение позволяет снабдить страницу
фоном, а также копировать его при помощи
атрибута repeat: repeat-x – копии по
горизонтали, repeat-y – копии по вертикал и
no-repeat – без копий.
CSS-вёрстка
Можно использовать трехзначную запись
#123 вместо #112233.
Далее, для того, чтобы отцентрировать
текст по одной из сторон используется
атрибут text-align:center
CSS-вёрстка
Для задания размеров шрифта, а также его цвета и
гарнитуры используется следующие свойства.
Font-size: larger – относительное увеличение,
smaller – относительное уменьшение,
120% - процентное выражение,
18px – задание размера в пикселях,
абсолютное задание размера – xx-small, x-small,
small, medium, large, x-large, xx-large,
либо в других единицах: рх, мм, см, in (дюйм).
CSS-вёрстка
Изменить можно не только сам шрифт, но
также регистр символов текста с помощью
стилевого свойства
text-transform: capitalize (верхний регистр
первых букв всех слов),
uppercase (все буквы в верхнем регистре),
lower-case (все в нижнем),
none (регистр отсутствует).
CSS-вёрстка
Элемент <b> можно заменить на
font-weight: bold, normal, 100-900
(причем 400- normal, а 700- bold),
относительные значения – bolder и
lighter.
CSS-вёрстка
Стиль написания фраз задается атрибутом
font-style: italic (курсив),
normal (обычный),
oblique (наклонный шрифт).
CSS-вёрстка
Атрибут <br> заменяется на свойство
margin, с помощью которого можно
регулировать поля со всех сторон элемента,
а для индивидуальной регулировки полей с
каждой стороны можно использовать
свойства margin-top, bottom, left, right.
Значения задаются в пикселях.
CSS-вёрстка
Практически для всех элементов можно так же
определить отступы
padding (padding: 60px; padding-left: 20px;).
Различие между полем и отступом заключается в
том, что отступ находится внутри рамки элемента,
а поле – вне нее.
Также определенный абзац можно не только
выровнять по определенной стороне, но и задать
размеры блока, в который будет вписан абзац
<p style=”text-align:justify; width:35%;
height:40%” >
CSS-вёрстка
Абзацный отступ или красную строку (раньше мы
использовали сочетание символов - &nbsp;)
можно создать при помощи стилевого свойства
text-indent: отступ в любых единицах, к примеру:
px – пиксели, MM – миллиметры, CM –
сантиметры, IN – дюймы, PT – пункты,
EX – отступ, равный высоте строчных букв,
EM – отступ, равный высоте шрифта в целом.
CSS-вёрстка
Более гибко можно выбирать свойства шрифта:
его начертание, размер, степень жирности,
гарнитуру и оформление. Свойства font-style, fontweight, font-size мы уже рассмотрели, теперь
рассмотрим еще 2 не менее важных свойства.
1) text-decoration: underline (подчеркнутый),
overline (надчеркнутый),
line-through (зачеркнутый) и
blink (мигающий, правда он поддерживается
Оpera и Netscape).
CSS-вёрстка
2) Задать гарнитуру шрифта можно
следующим образом:
font-family: Gando BT,Arial
Для задания расстояния между буквами
используется свойство
letter-spacing: 0.05 em;
а line-height: 100 px; задает высоту строк.
CSS-вёрстка
Для создания списков с маркерами или буквами и
цифрами необходимо применить стилевое
свойство:
<style>
UL {list-style: square, circle, disс}
OL { list-style: decimal, lower-roman, upperroman}
Для создания графических маркеров списка
используется свойство
<ul style=”list-style-image: url (marker.gif);”>
CSS-вёрстка
Чтобы задать рамку объекта, необходимо определить
свойство border-style (по умолчанию рамка отсутствует),
вид рамки: solid (обычная), double (двойная), groove
(вогнутая с обеих сторон), ridge (выпуклая с обеих
сторон), inset (вогнутая), outsеt (выпуклая), dotted
(точечная) и dashed (пунктирная).
Чтобы рамка не терялась на фоне больших букв,
необходимо задать свойство border-width: thick (толстая
рамка), thin (тонкая) и medium (средняя).
Цвет рамки - border-color: red.
Обтекание текстом (применительно к конкретному
элементу) float: right, left
CSS-вёрстка
cursor
Устанавливает форму курсора, когда он находится в
пределах элемента. Вид курсора зависит от операционной
системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать
вид курсора, решите, а будет ли он использоваться к месту.
Многих пользователей подобные изменения могут ввести
в заблуждение, когда, например, вместо традиционной
руки, появляющейся при наведении на ссылку, возникает
нечто другое. В большинстве случаев, лучше оставить все
как есть.
CSS-вёрстка
Синтаксис
cursor: auto | crosshair | default | e-resize | help |
move | n-resize | ne-resize | nw-resize | pointer |
progress | s-resize | se-resize | sw-resize | text | wresize | wait || url('путь к курсору')
Аргументы
auto
Вид курсора по умолчанию для текущего элемента.
url
Позволяет установить свой собственный курсор, для
этого нужно указать путь к файлу, в котором указана
форма курсора, в формате CUR или ANI.
Виды курсоров
default
P {cursor:default}
crosshair
P {cursor:crosshair}
help
P {cursor:help}
move
P {cursor:move}
pointer
P {cursor:pointer}
progress
P {cursor:progress}
text
P {cursor:text}
wait
P {cursor:wait}
n-resize
P {cursor:n-resize}
ne-resize
P {cursor:ne-resize}
e-resize
P {cursor:e-resize}
se-resize
P {cursor:se-resize}
s-resize
P {cursor:s-resize}
sw-resize
P {cursor:sw-resiz
w-resize
P {cursor:w-resize}
nw-resize
P {cursor:nw-resize}
Создание фильтров
Браузер IE, начиная с версии 4, имеет
специфическое CSS-свойство Filter, с
помощью которого можно создать какойлибо визуальный эффект.
Синтаксис использования CSS свойства
Filter (фильтр) в IE имеет следующий вид.
Filter: <название фильтра>;
Создание фильтров
Фильтр принимает следующие аргументы:
Blur – размытие объекта
Fliph – отражение объекта по горизонтали влево
Flipv - – отражение объекта по вертикали вверх
Glow – отмена изменений
Wawe – создание полос
Shadow – создает тень от объекта (direction –
задает направление тени и ее наличие - enabled)
Стилевое позиционирование
Можно задать тип позиционирования position, т.е. где
будет расположен текст, в каком месте странички.
Существует 2 типа позиционирования – абсолютный
(absolute) и относительный (relative). В относительном
позиционировании отсчет ведется от той позиции,
которую должен был бы занимать этот элемент, если бы
позиционирование не было задано. А абсолютное
позиционирование означает, что отсчет ведется от
верхнего левого угла окна браузера. Еще у этого свойства
может быть значение static, означающее, что элемент не
позиционируется индивидуально, и значение fixed
(фиксированная позиция – элемент позиционируется
абсолютно и не прокручивается вместе с остальным
содержимым страницы).
Стилевое позиционирование
Static
Это способ по умолчанию, можно сказать, отстутствие
какого бы то ни было специального позиционирования, а
просто выкладывание боксов одного за другим сверху
вниз. Этот порядок как раз и есть упомянутый мной
прямой поток.
Элементы отображаются как обычно. Использование
параметров left, top, right и bottom не приводит к какимлибо результатам.
Стилевое позиционирование
Absolute
Бокс с абсолютным позиционированием располагается по заданным
координатам, а из того места, где он должен был бы быть, он
удаляется, и в этом месте сразу начинают раскладываться следующие
боксы. Говорят, что он "исключается из потока".
Указывает, что элемент абсолютно позиционирован. В этом случае он
не существует в обычном потоке документа подобно другим
элементам, которые отображаются на веб-странице словно абсолютно
позиционированного объекта и нет. Положение элемента задается
атрибутами left, top, right и bottom относительно края окна браузера.
Стилевое позиционирование
Fixed
Ведет себя так же, как absolute, но при этом он не
скролится вместе с остальной страницей.
По своим свойствам это значение аналогично аргументу
absolute, но в отличие от него привязывается к указанной
параметрами left, top, right и bottom точке на экране и не
меняет своего положения даже при пролистывании вебстраницы. Браузеры Netscape, Mozilla и Firefox вообще не
отображают полосы прокрутки, если положение элемента
задано фиксированным, и оно не помещается целиком в
окно браузера. В браузере Opera хотя и показываются
полосы прокрутки, но они никак не влияют на позицию
элемента. Internet Explorer 6 и ниже не поддерживает
данный аргумент.
Стилевое позиционирование
Relative
Такой бокс можно сдвинуть относительно того места, где он был бы в
потоке, но при этом из потока он не исключается, а продолжает
занимать там свое место. То есть сдвигается со своего места он только
визуально, а положение всех боксов вокруг него никак не меняется.
Положение элемента устанавливается относительно его исходного
места. Добавление атрибутов left, top, right и bottom изменяет позицию
элемента и сдвигает его в ту или иную сторону от первоначального
расположения, в зависимости от применяемого параметра.
Абсолютное позиционирование
Со свойством position тесно связаны еще 2
свойства – top и left, которые задают
позицию верхнего левого угла по
горизонтали и по вертикали. Чем больше
значение top, тем ниже расположен
элемент, и, соответственно, чем больше
значение left , тем элемент правее. Чтобы
приподнять текст примерно на высоту
одной строки, можно написать след-е: top: 18px.
Внутренние тадицы стилей
Таблица стилей обычно располагается в заголовке, в разделе HEAD.
Она занимает место между тегами <STYLE> и </STYLE>.
<style>
body {background-color: blue; color: red;}
</style>
Пробелы здесь не имеют значения, так же, как и переводы строк.
Элементы, к которым задают форматирование, перечисляется через
запятую.
н1, н2 {text-align:center;}
Гиперссылки определяется следующим образом:
A:link, a:visited {color: #634438;}
A:active{color: black;}
A:hover {color: white; } – при наведение на мышку будет
подсвечиваться белым цветом.
Стили классов
К примеру у нас должно быть 3 разных стилевых варианта для элемента <DIV>. В CSS они называются классами. Чтобы отличить эти
элементы друг от друга, у них придется установить атрибут CLASS=. Но для начала надо задать сами варианты прописав в таблице стилей.
<STYLE>
<!--DIV.epig {text-align: justify; font-size: smaller; width: 130;}
DIV.pdps {font-style: italic; text-align: right;}
DIV.ab {-align: justify; text-indent: 2 em;}
</STYLE>
Далее задаем эти абзацы, данные имена можно образовать от имен самих абзацев, к примеру: эпиграф, подпись и абзац. Определяем эти
классы.
<DIV CLASS=”epig”>…………</DIV>
<DIV CLASS=”pdps”>…………</DIV>
<DIV CLASS=”ab”>…………</DIV>
Между прочим, другие элементы также могут иметь атрибут CLASS. Если надо, чтобы опредение класса было доступно всем элементам,
его можно определить так:
.pdps {font-style: italic; text-align: right;}
То есть, при определении нен указывается имя конкретного элемента, а указывается только имя класса, которое в любом случае начинается
с точки.
Атрибут ID позволяет применить стиль к отдельному элементу WEB-страницы с помощью листа стилей. Имя-идентификатор должно быть
уникальным.
<style>
P#commontext {font-style:italic;color:red}
</style>
<body>
<p id=”commontext”>проба id </p>
У нас также появилось сочетание, которое относится к комментариям <!-- -->, но в данном случае данная запись определяет законы
синтаксиса STYLE, а не HTML. Так что те браузеры, которые не понимают тег STYLE могут вывести все ее содержимое на экран монитора,
данная запись нужна, чтобы все было проинтерпретировано должным образом.
Внешние стилевые таблицы
Еще одно замечательное свойство стилевых
таблиц заключается в том, что с помощью
одной таблицы, находящейся в отдельном
файле, можно задавать стили для целого
набора веб-страниц.
Достоинства CSS
1
Способствует сохранению единого стиля
2
Представляет возможность быстро
изменить что-либо сразу во многих
файлах
Внешние стилевые таблицы
Для этого необходимо написать всю
страницу стилей в отдельном документе с
расширением .css (без тегов STYLE), а
затем подключить его во всей файлы.
Например, файл таблицы стилей
называется mainstyle.css, то в раздел
<HEAD> каждого из использующих ее
HTML-документов, необходимо вставить
следующую строку.
Внешние стилевые таблицы
<LINK REL=“StyleSheet”
HREF=“mainstyle.css” TYPE=“text/css”>
или
<STYLE TYPE=“text/css”> @import
url(mainstyle.css); </STYLE>
