штрихованная рамка сверху
Пример: Штрихованная рамка снизу и сбоку Выглядит так: border-right dotted border-right dashed border-right solid border-right double border-right inset border-right outset border-right groove border-right ridge border-top dashed border-top solid border-top double border-top groove border-top ridge border-top inset border-top outset border-top dotted Или вот так: border-top: gray dashed; border-bottom: gray solid; border-left: gray groove; border-right: gray dotted NB: значения ширины, высоты, положения текстового дескриптора, а также значения цвета, толщины и типа самой рамки можно указывать сколь угодно желаемые. Главное, чтобы браузеры понимали правильно :) Или хотя бы вообще понимали. */ .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 } /* ССЫЛКИ: Ссылки - один из главных атрибутов 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 { color:#CC6633 } a.class1:visited { color:#CC6633 } a.class1:active { color:#CC6633 } a.class1:hover { color:#CC6633 } a.class2:link { color:#999966 } a.class2:visited { color:#999966 } a.class2:active { color:#999966 } a.class2:hover { color:#999966 } ... В самом документе пишем: В описание класса ссылки можно добавить: стиль шрифта, размер шрифта, подчеркивание, отступы от края, границу - все, что пожелаете :) Например: 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; } В самом документе пишем: Определение стиля ссылок по умолчанию для различных тэгов: Можно определить стиль ссылок по умолчанию к, например, заголовкам, параграфу, нумерованному списку или любому текстовому тегу: h1 a:link { color:green } h1 a:visited { color:green } h1 a:hover { color:olive } h1 a:active { color:firebrick } p a:link { color:darkgoldenrod } p a:visited { color:darkgoldenrod } p a:hover { color:orchid } p a:active { color:firebrick } ol a:link { color:royalblue } ol a:visited { color:royalblue } ol a:hover { color:steelblue } ol a:active { color:firebrick } ol a.two:link { color:yellowgreen } ol a.two:visited { color:yellowgreen } ol a.two:hover { color:seagreen } ol a.two:active { color:firebrick } В самом документе пишем:Пример ссылки по умолчанию в параграфе
линия над текстом
Значения: none - отсутствие оформления underline - подчеркивание overline - линия над текстом line-through - перечеркивание blink - мерцание (работает не везде) Как сделать тексту тень Есть еще такая штука, как text-shadow - эффект затенения текста. Синтаксис:текст с тенью
Первое значение - расстояние по горизонтали вправо от текста (отрицательное значение - влево от текста). Второе значение - расстояние по вертикали вниз от текста (отриуательное значение - вверх от текста). Третье значение - радиус нерезкости тени текста. Может содержать несколько вариантов значений, которые следует отделять друг от друга запятыми. В каждом отдельном значении теневых эффектов обязательно должны быть значения смещения и возможны такие значения, как радиус нерезкости и цвет. Пример:текст с тенью
Выглядит так: текст с красной, а потом желтой тенью зеленый текст с серой тенью Все может быть, и если вдруг тень не появляется - нечего пенять на браузер - он никому не должен показывать то, чего не умеет :) Есть, конечно, извращенный вариант - сделать иммитацию тени через позиционирование блочного элемента div со сдвигом, но... бррр... */ /* Как сделать вертикальную линию без использования графики Используйте css. Причем существует два способа: один – через border, другой – через background-color. Не используйте так, как рассказано в третьем пункте второго варианта :) Применимо к текстовым тегам типа td, p, div... Вариант первый Синтаксис через border: border-left:1px solid red или border-right:1px solid red Размер и цвет указывайте по желанию :) Например, верткальная черта слева, по умолчанию - без указания конкретного значения высоты: код:Вариант второй Используйте таблицы или таблицы c css-сом. 1. border: - Это Бля Агапова! - Здравствуй, Бля Агапова, хуле ты хотела? - Ой, простите, Елена Вячеславовна, я вместо «Ю» нечаянно «Б» поставила... :-[ - Да ничего страшного, я в слове «что» тоже опечаталась. .. :) Код: