23:17 

Цвета и декор

designers.
Не ищи меня в других. Меня там нет.
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: ЧИСЛОpx;}
Аналог 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: ЧИСЛО%; }



URL записи

@темы: HTML, CSS, Полезное для работы с diary-дизайном, Полезное для работы с diary

URL
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

PAY_design

главная