-Поиск по дневнику

Поиск сообщений в Сергей_Прико

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 16.11.2009
Записей:
Комментариев:
Написано: 22

Записи с меткой css каскадная таблица стилей таблица стилей

(и еще 2 записям на сайте сопоставлена такая метка)

Другие метки пользователя ↓

css css каскадная таблица стилей css каскадная таблица стилей css каскадная таблица стилей таблица стилей javascript каскадная таблица стилей таблица стилей
Комментарии (0)

CSS(урок 8)

Дневник

Понедельник, 14 Декабря 2009 г. 12:03 + в цитатник
Группирование элементов (span и div)

Элементы и
используются для структурирования документа, часто совместно с атрибутами class и id.

В этом уроке мы подробно рассмотрим, как использовать и
, поскольку эти элементы HTML имеют важнейшее значение в CSS.
Группирование с помощью
Группирование с помощью

Группирование с помощью

Элемент можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, может использоваться для визуальных эффектов применимо к отдельным блокам текста.

Пример - цитата из Бенджамина Франклина:

Кто рано ложится и рано встаёт,
тот будет здоровым, богатым и умным




Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные красным цветом. Для этого мы можем отметить эти преимущества с помощью . Каждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей:

Кто рано ложится и рано встаёт,
тот будет здоровым,
богатым
и умным.




В CSS:

span.benefit {
color:red;
}


Разумеется, вы можете также использовать id для определения стиля -элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх -элементов, как мы говорили в прошлом уроке.
Группирование с помощью


В то время как используется в элементах уровня блока, как в предыдущем примере,
применяется для группирования одного или более блок-элементов.

Кроме этого отличия, группирование с помощью
работает более или менее аналогично. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности:



  • Франклин Д. Рузвелт

  • Гарри Трумэн

  • Джон Ф. Кеннеди

  • Линдон Б. Джонсон

  • Джимми Картер

  • Билл Клинтон






  • Дуайт Д. Эйзенхауэр

  • Ричард Никсон

  • Джэралд Форд

  • Роналд Рейган

  • Джордж Буш

  • Джордж У. Буш





В нашей таблице стилей мы можем использовать такое же группирование, как и раньше:

#democrats {
background:blue;
}

#republicans {
background:red;
}
Рубрики:  PHP , CSS, JAVASCRIPT

Метки:  
Комментарии (0)

Урок 6

Дневник

Понедельник, 14 Декабря 2009 г. 11:51 + в цитатник
Настроение сейчас - гуууддддддддддд

Урок 6: Ссылки

Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.
Что такое псевдокласс?

Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.

Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом . В CSS мы также можем использовать a в качестве селектора:

a {
color: blue;
}


Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.

a:link {
color: blue;
}

a:visited {
color: red;
}


Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.

Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.
Псевдокласс: link

Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.

В примере кода непосещённые ссылки - синие.

a:link {
color: #6699CC;
}

Показать пример
Псевдокласс: visited

Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.

a:visited {
color: #660099;
}

Псевдокласс: active

Псевдокласс :active используется для активных ссылок.

В примере активные ссылки имеют жёлтый фон.

a:active {
background-color: #FFFF00;
}

Псевдокласс: hover

Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.

Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:

a:hover {
color: orange;
font-style: italic;
}


Пример 1: Эффект при нахождении указателя над ссылкой

Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.
Пример 1a: Расстояние между буквами

Как вы помните из Урока 5, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

Показать пример
Пример 1b: UPPERCASE и lowercase

В Уроке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}


Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте!
Пример 2: Удаление подчёркивания ссылок

Обычный вопрос - как удалить подчёркивание ссылок?

Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.

Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из Урока 5, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.

a {
text-decoration:none;
}


Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}
Рубрики:  PHP , CSS, JAVASCRIPT

Метки:  

 Страницы: [1]