Как вставить стили в документ
advertisement
Как вставить стили в документ
Есть два варианта
Первый вариант: стили непосредственно в документе
<html>
<head>
<style type="text/css">
p, td, div, ...
{ font-family: Verdana, Tahoma;
font-size:12pt;
...}
тэг
{ описание }
</style>
</head>
<body>
...
</body>
</html>
где p, td, div, ... – текстовые теги, используемые на странице.
Неудобен тем, что при любом изменении в стилях – следует изменять во всех документах, где стили применяются.
Второй вариант: стили в подключаемом файле
Базовый лист стилей
создаем файл "style.css":
p, td, div, ...
{ font-family: Verdana, Tahoma;
font-size:12pt;
... }
тэг
{ описание }
а в документ вставляем привязку к файлу с листом стилей:
<html>
<head>
<link rel="stylesheet"
href="style.css"
type="text/css">
</head>
<body>
...
</body>
</html>
удобен тем, что при желании что-либо из стилей изменить — нужно изменить только в один документ – style.css.
Альтернативные листы стилей
Мозилла понимает несколько разных файлов стилей и умеет их переключать. Эти файлы называют «альтернативными
файлами стилей».
Для реализации нужно создать несколько файлов с разным стилевым оформлением, а в документ прописать:
<html>
<head>
<link rel="stylesheet"
href="style.css"
type="text/css">
<link rel="alternate stylesheet"
href="styleBlack.css"
type="text/css"
title="Черная ночь">
<link rel="alternate stylesheet"
href="styleBlue.css"
type="text/css"
title="Голубая Лагуна">
</head>
<body>
...
</body>
</html>
Указание размера шрифта
Чтобы указать размер шрифта на странице, следует использовать такую конструкцию:
font-size: ЧислоВеличина
Например:
p, div, td {font-size:10px;}
Что означают все эти em, ex,...?
% - процент - процент от стандартной высоты шрифта в браузере
em - ems - высота используемого элементом шрифта
ex - x-height - ширина буквы «х» используемого шрифта
px - pixels - пикселы
in - inches - дюймы
cm - cantimeters - сантиметры
mm - milimeters - миллиметры
pt - points - точка. 1pt = 1/72in
pc - picas - 1pc = 12pt
Распространено использование %, em, pt, px.
Можно ли управлять смещением (в пикселях) картинки в ячейке средствами
HTML?
Ответ: можно.
hspace - отступы по горизонтали
vspace - отступы по вертикали
Пример:
<img src="..." ... vspace="5">
но будет более по-пацански и грамотнее, если использовать css:
margin-top,
margin-bottom,
margin-left,
margin-right
Пример:
<img src="..." ... style="margin-top:5px; margin-bottom:15px">
Расположение фонового рисунка в документе
Как расположить фоновый рисунок в html-странице? Да легко.
Чтобы поместить в определенне место документа фоновый рисунок, скажем, только в левом верхнем углу ячейки или
прямо посередине страницы – используйте CSS.
Синтаксис в документе:
<тег style="background: картинка вертикаль горизонталь размножение цвет прокрутка">
Синтаксис в листе стилей:
тег
{ background-image: url();
background-position: положение;
background-repeat: размножение;
background-color: цвет;
background-attachment: прокрутка;
}
Значения:
1. «тег» –
Ваш текстовый тег, например, body, table, td, div, blockquote или даже p, вобщем, куда Вы захотите вставить
фоновый рисунок.
В этом случае стиль будет применяться везде, где Вы будете использовать указанный тег.
Или Ваш класс: .class-for-fon.
В этом случае для применения стиля присвойте тегу класс: <p class="class-for-fon">
2. «url()» – background-image –
Путь (url) к картинке, которую Вы хотите разместить в качестве фона, например, url(../pic/fon.jpg).
3. «вертикаль» – background-position –
Положение картинки, задаваемое значение по вертикали:
top
center
bottom
4. «горизонталь» – background-position –
Положение картинки, задаваемое значение по горизонтали:
left
center
right
5. «размножение» – background-repeat –
Значение направления, по которому будет размножаться фоновый рисунок:
repeat
repeat-x
repeat-y
no-repeat
6. «цвет» – background-color –
Цвет фона. Рекомендуется указывать в той гамме, что и фоновая картинка, если она размножена по всей странице.
7. «прокрутка» – background-attachment –
Значение, которое определяет, будет ли фоновая картинка зафиксирована в окне брайзера или будет прокручиваться
вместе с документом. По умолчанию значениеscroll. Не рекомендуется использовать по причине «торможения» при
прокрутке.
fixed
scroll
Пример:
Размножим фоновую картинку (например, градиент) в ячейке таблицы по вертикали слева:
<table>
<tr>
<td style="background:
url(pic/bg.jpg)
left
repeat-y
#CCCC99">
Джунгарский хомяк. Размером вдвое меньше золотистого
хомячка (с крупную мышь) джунгарский хомячок подкупает
удивительно милым обликом пушистого, добродушного,
почти бесхвостого увальня. Летом эти зверьки сероватые, с
темной полосой вдоль хребта и светлым брюшком. Зимой,
особенно при содержании в прохладных помещениях,
хомячки становятся почти белыми, с серебристо-серым
хребтом. Манерой набивать защечные мешки и запасать
корм, а также пользоваться передними лапками, как
руками, похожи на золотистого хомячка. Но джунгарские хомячки гораздо живее и активнее.
Выпускать этих мелких сумеречных зверьков в комнату не рекомендуется: слишком велик риск
что они одичают, потеряются или будут раздавлены. Продолжительность жизни зверьков
около трех лет. В природных условиях этот хомячок обитает в степной и полупустынной зонах
Западной Сибири и Средней Азии. Но за последние годы зверьки получили прописку в
вивариях научных учреждений и в живых уголках любителей.
(http://www.ptichka.ru/)
А картинка с фоном – вот:
</td>
</tr>
</table>
Можно, конечно, вышепредложенный пример было описать и так:
<td style="
background-image: url(pic/bg.jpg);
background-position: left;
background-repeat: repeat-y;
background-color: #CCCC99;
background-attachment: scroll;
">
Оба варианта верны и работают в браузерах вплоть до Нетскейпа 4.7 :)
Так зачем платить больше? :)
Стили границы (border)
Описание с помощью css границ у текстовых элементов и возможность их регулирования
В файле .css запись выглядит так:
.class { рамка_где: размер цвет тип }
Разберем как велосипед на запчасти:
.class – название класса.
Значения рамка_где:
border-right
border-left
border-bottom
border-top
Для описания всех границ сразу – используйте border.
Значения тип:
none
dotted
dashed
solid
double
groove
ridge
inset
outset
–
–
–
–
–
–
–
–
–
линия отсутствует
пунктир
штрих-пунктир
непрерывная
двойная непрерывная
трехмерная борозда
трехмерный гребень
трехмерная врезка
трехмерный орнамент
Пример:
.right
{ border-right: 1px #808080 dotted}
.left
{ border-left: 1px #808080 dotted}
.bottom
{ border-bottom: 1px #808080 dotted}
.top
{ border-top: 1px #808080 dotted}
.topbottom { border-top: 1px #808080 dotted;
border-bottom: 1px #808080 dotted }
Синтаксис в документе:
<p class="top">штрихованная рамка сверху</p>
Пример:
Штрихованная рамка снизу и сбоку
Выглядит так:
border-right dotted
border-top dashed
border-right dashed
border-top solid
border-right solid
border-top double
border-right double
border-top groove
border-right inset
border-top ridge
border-right outset
border-top inset
border-right groove
border-top outset
border-right ridge
border-top dotted
Или вот так:
border-top: gray dashed; border-bottom: gray solid; border-left: gray groove; border-right:
gray dotted
NB: значения ширины, высоты, положения текстового дескриптора, а также значения цвета, толщины и типа самой
рамки можно указывать сколь угодно желаемые.
Главное, чтобы браузеры понимали правильно :) Или хотя бы вообще понимали.
Как задать стили для ссылки
Ссылки - один из главных атрибутов web-странички, поэтому, естесственно, хочется сделать их красивыми, цветными,
не подчеркнутыми, да и чтобы при наведении меняли цвет и становились подчеркнутыми, вобщем, желаний - уйма.
Вопрос: как реализовать? Ответ: с использованием CSS.
Для этого нужно создать файл листа стилей, к примеру, style.css и в нем определить стили для:
1.
непосещенной ссылки (a:link);
2.
посещенной ссылки (a:visited);
3.
активной ссылки (a:active);
4.
ссылки, на которую наводится мышь (a:hover):
Например:
a:link
{
text-decoration: none;
color: #6699CC; }
a:visited
{
text-decoration: none;
color: #336699; }
a:active {
text-decoration: underline;
color: #ff0000; }
a:hover {
text-decoration: underline;
color: #ff0000; }
В документ стили вставлять уже умеем :) см. статью «Как вставить стили в документ»
Каким способом еще отдекорить текст ссылки тоже умеем :) см. статью «Оформление текстовых элементов»
В данном примере на всех страницах сайта:
1.
непосещенная ссылка будет голубого цвета и подчеркнутая;
2.
посещенная ссылка будет синего цвета и подчеркнутая;
3.
активная ссылка будет красного цвета и неподчеркнутая;
4.
ссылка, на которую наводится мышь, - будет красного цвета и неподчеркнутая.
Как создать несколько классов для ссылки
Бывает так, что на одной страничке необходимо разукрасить ссылки разными цветами.
Для этого нужно в файле листа стилей определить для ссылки несколько классов, например, class1 и class2:
a.class1:link
a.class1:visited
a.class1:active
a.class1:hover
{
{
{
{
color:#CC6633
color:#CC6633
color:#CC6633
color:#CC6633
}
}
}
}
a.class2:link
a.class2:visited
a.class2:active
a.class2:hover
{
{
{
{
color:#999966
color:#999966
color:#999966
color:#999966
}
}
}
}
...
В самом документе пишем:
<ol>
<li><a class="class1" href="URL">Десять причин,
почему бутылка водки лучше,
чем женщина</a></li>
<li><a class="class2" href="URL">Баллада о
черном суппорте</a></li>
</ol>
Выглядеть будет так:
1.
Десять причин, почему бутылка водки лучше, чем женщина
2.
Баллада о черном суппорте
В описание класса ссылки можно добавить: стиль шрифта, размер шрифта, подчеркивание, отступы от края, границу все, что пожелаете :)
Например:
a.class3:link, a.class3:visited {
color:#336699;
font-family:'Comic Sans MS';
font-size:20px;
text-decoration:none;
background-color:#cccccc;
padding:10px;
border:1px solid #666666; }
a.class3:hover {
color:#cccccc;
font-family:'Comic Sans MS';
font-size:20px;
text-decoration:none;
background-color:#336699;
padding:10px;
border:1px solid #000033; }
a.class3:active {
color:#ffffff;
font-family:'Comic Sans MS';
font-size:20px;
text-decoration:underline;
background-color:green;
padding:10px;
border:1px solid #000033; }
В самом документе пишем:
<p><a class="class3" href="URL">Наведи на меня и нажми!</a></p>
Выглядеть будет так:
Наведи на меня и нажми, но не отпускай!
Определение стиля ссылок по умолчанию для различных тэгов
Можно определить стиль ссылок по умолчанию к, например, заголовкам, параграфу, нумерованному списку или
любому текстовому тегу:
h1
h1
h1
h1
p
p
p
p
a:link { color:green }
a:visited { color:green }
a:hover { color:olive }
a:active { color:firebrick }
a:link { color:darkgoldenrod }
a:visited { color:darkgoldenrod }
a:hover { color:orchid }
a:active { color:firebrick }
ol
ol
ol
ol
a:link { color:royalblue }
a:visited { color:royalblue }
a:hover { color:steelblue }
a:active { color:firebrick }
ol
ol
ol
ol
a.two:link { color:yellowgreen }
a.two:visited { color:yellowgreen }
a.two:hover { color:seagreen }
a.two:active { color:firebrick }
В самом документе пишем:
<h1>Пример <a href="URL">ссылки по умолчанию</a> в заголовке</h1>
<p>Пример <a href="URL">ссылки по умолчанию</a> в параграфе</p>
<ol>
<li>Пример <a href="URL">ссылки по умолчанию</a> в списке</li>
<li>Пример <a class="two" href="URL">ссылки с классом</a> в списке</li>
</ol>
Выглядеть будет так:
Пример ссылки по умолчанию в заголовке
Пример ссылки по умолчанию в параграфе
1.
Пример ссылки по умолчанию в списке
2.
Пример ссылки с классом class="two" в списке
Стили оформления текстовых элементов
Синтаксис:
<p style="text-decoration:значение">линия над текстом</p>
Значения:
none
underline
overline
line-through
blink
-
отсутствие оформления
подчеркивание
линия над текстом
перечеркивание
мерцание (работает не везде)
Выглядит так:
1.
2.
3.
4.
линия над текстом
линия под текстом
линия посередине текста (перечеркнутый текст)
мерцающая гадость, которая не везде работает :)
Как сделать тексту тень
Есть еще такая штука, как text-shadow - эффект затенения текста.
Синтаксис:
<p style="text-shadow: 1-значение 2-значение 3-значение цвет">текст с тенью</p>
Первое значение - расстояние по горизонтали вправо от текста (отрицательное значение - влево от текста).
Второе значение - расстояние по вертикали вниз от текста (отриуательное значение - вверх от текста).
Третье значение - радиус нерезкости тени текста.
Может содержать несколько вариантов значений, которые следует отделять друг от друга запятыми. В каждом
отдельном значении теневых эффектов обязательно должны быть значения смещения и возможны такие значения, как
радиус нерезкости и цвет.
Пример:
<p style="text-shadow:
2px 2px 1px red,
4px 4px 1px green">текст с тенью</p>
Выглядит так:
текст с красной, а потом желтой тенью
зеленый текст с серой тенью
Все может быть, и если вдруг тень не появляется - нечего пенять на браузер - он никому не должен показывать то,
чего не умеет :)
Есть, конечно, извращенный вариант - сделать иммитацию тени через позиционирование блочного элемента div со
сдвигом, но... бррр...
Как сделать вертикальную линию без использования графики
Используйте css. Причем существует два способа: один – через border, другой – через background-color.
Не используйте так, как рассказано в третьем пункте второго варианта :)
Применимо к текстовым тегам типа td, p, div...
Вариант первый
Синтаксис через border:
border-left:1px solid red
или
border-right:1px solid red
Размер и цвет указывайте по желанию :)
Например, верткальная черта слева, по умолчанию - без указания конкретного значения высоты:
код:
<div style="border-left:1px solid red; padding:5px">
То же самое – справа:
код:
<p style="border-left:1px solid red; padding:5px">
Вариант второй
Используйте таблицы или таблицы c css-сом.
1. border:
-
Это Бля Агапова!
Здравствуй, Бля Агапова, хуле ты хотела?
Ой, простите, Елена Вячеславовна, я вместо «Ю» нечаянно «Б» поставила... :-[
Да ничего страшного, я в слове «что» тоже опечаталась... :)
Код:
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td style="border-left:1px #f1b38c solid">&nbsp;</td>
<td style="border-left:9px #ea926c solid">&nbsp;</td>
<td style="border-left:19px #e78053 solid">&nbsp;</td>
<td style="border-left:29px #e5753f solid">&nbsp;</td>
<td style="border-left:39px #d86935 solid">&nbsp;</td>
</tr>
</table>
Для достижения желаемого результата - играйтесь с шириной и цветом бордера :)
2. background-color:
Если у вас нет отца, то щелкните правой кнопкой мыши на рабочем столе, и выберите «создать
папку» :)
Код:
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td style="background-color:#8c60aa;"> </td>
<td style="background-color:#9f74b4; width:10px">&nbsp;</td>
<td style="background-color:#b489bf; width:20px">&nbsp;</td>
<td style="background-color:#c094c5; width:30px">&nbsp;</td>
<td style="background-color:#eedbec; width:40px">&nbsp;</td>
</tr>
</table>
Для достижения желаемого результата - играйтесь с:
background-color
cellpadding
cellspacing
width
height
3. Таблицы без использования css, с bgcolor
деталь: этот вариант не валиден с точки зрения w3c :)
Почему мужчины смеются над блондинками?
Она: ответь мне, только честно, да или нет, хорошо?
Он: спрашивай
Она: почему мужчины смеются над блондинками?
Он: да
Код:
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td bgcolor="#000000"> </td>
<td bgcolor="#333333" width="10">&nbsp;</td>
<td bgcolor="#666666" width="20">&nbsp;</td>
<td bgcolor="#999999" width="30">&nbsp;</td>
<td bgcolor="#aaaaaa" width="40">&nbsp;</td>
</tr>
</table>
В обоих вариантах можно по желанию указать параметры в пикселях, сантиметрах или шинанайдаопах.
margin и padding
margin - это расстояние от внутренней границы внешнего элемента (например, окна, ячейки, дива...) до внешней
границы внутреннего элемента.
padding - это расстояние от внутренней границы элемента до содержимого.
margin
padding