Как вставить стили в документ Есть два варианта Первый вариант: стили непосредственно в документе <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