Цвета и декор02.03.2010 в 13:31
Пишет
La mignonne:
Цвета и декорУчимся менять цвета в css и html
Декорируем ссылки и текст
Полезные ссылочки:Цвета и их названия -
тут и
тутПодобрать текст под фон страницы -
тут (c)1. Цвет и оформление выделенных ссылок (при наведении курсора)
A:hover {color: #ЦВЕТ;} 2. Цвет и оформление видимых ссылок
a {color: #ЦВЕТ;} 3. Изменить цвет отдельной ссылки
#ССЫЛКА a {color: #ЦВЕТ;}Можно изменить цвет ссылок только в одном блоке меню таким же образом. Для этого нужно вместо названия ссылки вписать название блока.
Названия ссылок и блоков меню ищем
тут Далее4. Изменить цвет заглавных первых букв
p:first-letter {color:#ЦВЕТ;}
5. Цвет названия дневника
#side h1 a {color: #ЦВЕТ;}
Цвет названия днева для блочного диза
.block_design #side h1 a {color: #ЦВЕТ;}
6. Цвет имени пользователя
#authorName {color: #ЦВЕТ;}
Для html
Задать цвет ссылки и текста можно следующим кодом
<font color="ЦВЕТ">ТЕКСТ/ССЫЛКА</font>
А теперь перейдем к декору ссылок и текста
1. text-decoration
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
#ССЫЛКА/БЛОК {text-decoration: NONE;}
Значения:
blink - устанавливает мигающий текст (пример)
line-through - создает перечеркнутый текст (пример)
overline - линия проходит над текстом (пример)
underline - устанавливает подчеркнутый текст (пример)
none - отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Аналог html
<u>текст</u> - подчеркивание
<s>текст</s> - перечеркнутый текст
2. font-size
Определяет размер шрифта элемента.
#ССЫЛКА/БЛОК {font-size: ЧИСЛО}
Аналог html
<font size="ЧИСЛО">ТЕКСТ</font>
3. font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие.
#ССЫЛКА/БЛОК {font-family: "ШРИФТЫ";}
Аналог html
<font face="ШРИФТ">ТЕКСТ</font>
4. font-style
Определяет начертание шрифта — обычное, курсивное или наклонное.
#ССЫЛКА/БЛОК {font-style: НАЧЕРТАНИЕ;}
Значения:
normal - обычное начертание текста.
italic - курсивное начертание.
oblique - наклонный шрифт. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
Аналог html
<i>текст</i> - наклонный текст/курсив
5. font-weight
#ССЫЛКА/БЛОК {font-weight: НАСЫЩЕННОСТЬ;}
Значения:
bold — полужирное
bolder — жирное
lighter — светлое
normal — нормальное начертание.
Убрать жирность ссылок (мой дневник, все дневники и пр. - уже заложенная в коде жирность)
#ССЫЛКА b {font-weight: normal}
Аналог html
<b>текст</b> - жирный текст
6. font-variant
Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью.
#ССЫЛКА/БЛОК {font-variant: NORMAL;}
Значения:
normal - оставляет регистр символов исходным, заданным по умолчанию.
small-caps - модифицирует все строчные символы как заглавные уменьшенного размера
7. border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
#ССЫЛКА/БЛОК {border: ЧИСЛОpx СТИЛЬ ЦВЕТ;}
Число - это ширина рамки
Стиль - значения и пример смотрим тут
Цвет - цвет рамки
Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами
border-top - верхняя рамка
border-bottom - нижняя рамка
border-left - левая рамка
border-right - права рамка
8. first-letter
Этот тег нам уже знаком - мы меняли с помощью него цвет первого символа в тексте. Н ос помощью него также можно поменять и шрифт, размер первого символа.
А еще его можно применять не только в тексту записи, а к любому блоку.
БЛОК/ЭЛЕМЕНТ:first-letter {font-family: ШРИФТ; font-size: ЧИСЛО%; }