Авторизация
Регистрация
Войти как пользователь

   Сделать стартовой
   Добавить в избранное

Полезные службы:
  
 «С миру по нитке»
Он-лайн новости Мира  (2500)
Последние новости Тасс.ру
Статьи о нашем бытии  (2000)
НЛО и обитатели Космоса
Флаги Стран нашей Земли
 Библиотека мудрости
Технология Бессмертия
Медитации и упражнения
Притчи  (3812)
Сказки  (1916)
Головоломки  (1216)
Фантастика Отечественная
 Заработок в Интернете
Брокер трибунал
Доход от инвестирования
Основы AdSense-бизнеса
18 признаков идеальн.бизнеса
 Web-программирование
Регистрация сайта в каталогах
Учебники CSS,PHP,HTML,JS
Примеры JavaScript  (79)
CMS-программа SiteEdit
FAQ по программе SiteEdit
 Игры, отдых, общение
Рисунки моих друзей
Играем на фортепиано
Классический тест IQ
Игры Flash  (67)
Игры JavaScript  (60)
 Анкеты, опросы, инфо
Доска объявлений
Голосование
Информер Курса валют

Ссылки  Обмен ссылками



Новости RSS
Особое мнение : Дмитрий Муратов 09.04.2020 г. 19:08 Гости: Дмитрий Муратов Ведущ...
Особое мнение : Виктор Шендерович 09.04.2020 г. 17:08 Гости: Виктор Шендерович Вед...
Особое мнение : Александр Баунов 08.04.2020 г. 19:08 Гости: Александр Баунов Веду...
Особое мнение : Дмитрий Потапенко 08.04.2020 г. 17:08 Гости: Дмитрий Потапенко Вед...
Особое мнение : Особое мнение СПб 08.04.2020 г. 11:06 Гости: Владимир Гельман Веду...
Особое мнение : Дмитрий Быков 07.04.2020 г. 19:08 Гости: Дмитрий Быков Ведущие...
Особое мнение : Николай Усков 07.04.2020 г. 17:08 Гости: Николай Усков Ведущие...
Особое мнение : Особое мнение СПб 07.04.2020 г. 11:06 Гости: Марина Шишкина Ведущи...
Особое мнение : Алексей Венедиктов 06.04.2020 г. 19:06 Гости: Алексей Венедиктов Ве...
Особое мнение : Олег Сысуев 06.04.2020 г. 17:06 Гости: Олег Сысуев Ведущие: ...
 
   

Справочник по CSS

Справочник по CSS

Приложение создано на основе материалов, находящихся на сайте Справочник Web-языков www.spravkaweb.ru

Что такое CSS и как применить

Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Если до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.

Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов и следующего вида:

Это синий текст

А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:

P.bluetext { color: blue }

Эта строка обозначает, что мы определили для текста, находящегося внутри тега

и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

В результате в HTML-тексте у нас остануться только теги логического форматирования текста:

Это синий текст

Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги.

Вы можете переназначить цвета текста для всех тегов

. В этом случае мы не задаем имя стилевого класса:

P { color: blue }

Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:

.bluetext{ color: blue }

И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:

Это синий цвет

Это синий цвет

Это жирный синий текст

Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }

И теперь:

Этот текст будет синим

А этот - не будет!

Более того, вы можете встроить определение стиля прямо в тег:

Это синий текст

Это достигается при помощи атрибута style, который также поддерживают все теги HTML.

И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML.

#headerofdocument { font-size: 20pt }

Здесь мы задали размер шрифта 20 пунктов.

Это заголовок документа

Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:

P { color: blue; fotn-size: 9ptl; text-align: center }

Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги :

Тег

Этот текст останется красным.

Здесь установки, сделанные для текстового абзаца

, не будут перекрыты в дальнейшем.

Поддерживается IE начиная с 4.0

Единицы измерения CSS

В этой таблице перечислены все единицы измерения, поддерживаемые CSS.

Единица измерения

Обозначение

Высота буквы M текущего шрифта

em

Высота буквы x текущего шрифта

ex

Пикселы

px

Пункты

pt

Пики

pc

Дюймы

in

Миллиметры

mm

Сантиметры

cm

 

Фильтры

Пару вводных слов

Надо отметить, что фильтры отображаются только в браузерах Internet Explorer не ниже 4-ой версии.

Синтаксис:

"filter:имя_фильтра(параметр1=значение, параметр2=значение,...)"

Некоторые фильтры могут быть без параметров.

Фильтры деляться на статические и динамические. Статические фильтры меняют вид объекта, а сам он остается неподвижным. Динамические фильтры позволяют менять объект с задаваемой скоростью переключения кадров.
Далее будут мною описаны 18 статических и 19 динамических фильтра.

Фильтры применяют через параметр STYLE:
Возьмём картинку (img.gif) и применим к ней фильтр прозрачности:
- имеем ту же картинку, но полупрозрачную.

Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.
JavaScript:

...
STYLE="filter:blur(strength=10)"
OnMouseOver="javascript:Blur(20)"
OnMouseOut="javascript:Blur(-20)">

Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.

VBScript:
...

Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.

Поддержка свойств CSS различными браузерами

 

Свойства CSS

ПРИМЕЧАНИЯ

Internet Explorer

Opera7.5

Mozilla5 Firefox1

Свойства шрифта элементов сайта

Цвет шрифта [color]

 

+

+

+

Размер шрифта [font-size]

 

+

+

+

Толщина символов [font-weight]

 

 

 

 

Начертание [font-family]

Если указать URL(file), то шрифт автоматически установится на компьютер пользователя

+

+

+

Наклон [font-style]

 

+

+

+

Подчеркивание [text-decoration]

Значение "blink" работает по- разному в различных браузерах

+

+

+

Расстояние между буквами [letter-spacing]

Доступны отрицательные значения

+

+

+

Межстрочный интервал

 

+

+

+

Заглавные буквы [font-variant]

По-разному отображаются в различных браузерах

+

+

+

Преобразование шрифта

 

+

+

+

Свойства фона и цвет элементов сайта

Цвет фона [background-color]

 

+

+

+

Фоновое изображение [background-image]

 

+

+

+

Прокручивание фона [background-attachment]

Значение "fixed;" работает только  с тегом

+

+

+

Положение фонового изображения [background-position]

 

+

+

+

Повторение фонового изображения [background-repeat]

 

+

+

+

Положение фонового изображение по X

 

+

-

-

Положение фонового изображение по Y

 

+

-

-

Границы элементов сайта

Общее обрамление [border]

(Задает ширину, стиль и цвет всех четырех границ элемента одновременно)

+

+

-

Толщина обрамления [border-width]

 

+

+

+

Цвет обрамления [border-color]

 

+

+

+

Стиль обрамления [border-style]

 

+

+

+

Верхняя граница [border-top]

 

+

+

+

Нижняя граница [border-bottom]

 

+

+

+

Правая граница [border-right]

 

+

+

+

Левая граница [border-left]:

 

+

+

+

Позиционирование блоков (элементов) сайта

Внешние отступы [margin]

Доступны отрицательные значения

+

+

+

Тип контейнера [display]

 

+

+

+

Общая ширина [width]

 

+

+

+

Общая высота [height]

 

+

+

+

Метод позиционирования [position]

 

+

+

+

Выравнивание [float]

 

+

+

+

Смещения

Доступны отрицательные значения

+

+

+

Расположение [clear]

 

+

+

+

Координаты прямоугольника, в котором выводится содержимое элемента

Обычно применяется в области програм-мирования на Java Scripts

+

+

+

Поведение

 

+

+

+

Порядок вывода (наложения) элементов друг на друга [z-index]

Чем больше значение z-index, тем ближе к наблюдателю находится слой.

+

-

+

Расположение текста внутри элементов (блоков) сайта

Внутренний отступ [padding]

Значение работает в различных браузерах - по разному

+

+

+

Горизонтальное выравнивание текста [text-align]

 

+

+

+

Вертикальное выравнивание текста [vertical-align]

Обычно используется для вертикального выравнивания текста внутри  столбцов и ячеек таблиц, также работает для вертикального расположения маркеров (list-item) внутри блока

 

 

 

Смещение текста

 

+

+

+

Другие настройки элементов сайта

Маркер списка [list-style-type]

 

+

+

+

Маркер списка (изображение) [list-style-image]

 

+

+

+

Расположение маркеров

 

+

+

+

Обработка пробелов в элементах сайта

 

+

+

+

Вид курсора

Если указать URL(file), то возможно использовать любой Ваш курсор

+

+

-

Фильтры

Чтобы работало, бывает необходимо указать ширину и высоту объекта

+

-

-

Полосы прокрутки элементов сайта

Полосы прокрутки

Для того чтобы придать цвета основному скролу, установите соответствующие значения для тега

+

-

-

 

 
   
   
 
Последние новости

13.08.2012 Реки Титана оказались неожиданно молодыми

Реки Титана оказались неожиданно молодыми
Астрофизики проанализировали фотографии, полученные аппаратом "Кассини", и показали, что метановые реки на Титане необычно молоды, что говорит о ..

13.08.2012 Получены снимки далекого квазара-тяжеловеса в рекордном разрешении

Получены снимки далекого квазара-тяжеловеса в рекордном разрешении
Международная группа исследователей провела наблюдения удаленного квазара - активного ядра галактики. Отличительной особенностью нового исследования ..

12.08.2012 Спиральная структура ранней галактики озадачила астрономов

Спиральная структура ранней галактики озадачила астрономов
Астрономы при помощи телескопов "Хаббл" и "Кек" получили изображение ранней галактики, чье спиральное строение не соответствует современным ..

12.08.2012 В Китае нашли могилу генерала эпохи Троецарствия

В Китае нашли могилу генерала эпохи Троецарствия
Эпоха Троецарствия (также известная как Саньго) - период в истории Китая, ознаменовавшийся борьбой трех государств У, Шу и Вэй. Эти государства ..

11.08.2012 Астрономы предсказали судьбу Юпитера

Астрономы предсказали судьбу Юпитера
Астрономы предсказали, что ждет Юпитер после того, как Солнце исчерпает большую часть своего топлива, станет красным гигантом и увеличится в размерах ..

11.08.2012 "Хаббл" рассмотрел отдельные звезды в шаровом скоплении

Европейские астрономы, работающие с телескопом "Хаббл", опубликовали новые фото шарового скопления Messier 107. Снимки и их описание доступны на ..

10.08.2012 Черные дыры оказались способными к ядерному синтезу

Черные дыры оказались способными к ядерному синтезу
Физики-теоретики установили, что в аккреционных дисках черных дыр могут проходить реакции синтеза ядер лития-7. Работа опубликована в журнале ..

10.08.2012 Астрономы нашли пятую луну Плутона

Астрономы нашли пятую луну Плутона
Американские астрономы обнаружили пятую луну Плутона, сообщает Associated Press в среду, 11 июля, со ссылкой на NASA. Небесное тело диаметром от 10 ..

09.08.2012 К Стоунхенджу ограничат доступ туристов

К Стоунхенджу ограничат доступ туристов
Британские власти ограничат доступ туристов к Стоунхенджу. Это будет сделано в рамках проекта по улучшению туристической инфраструктуры вокруг ..

09.08.2012 Астрономы "взвесили" черную дыру средней массы

Астрономы
Астрономы, работающие с Австралийским компактным радиоинтерферометром, объявили, что им удалось получить независимые подтверждения того, что HLX-1 ..

08.08.2012 Люди начнут размножаться новым способом

Люди начнут размножаться новым способом
Американский ученый прочел в Москве грустную лекцию об эволюции человека.Во вторник в Политехническом музее профессор американского Института ..

08.08.2012 Земля пережила незаметный апокалипсис

Земля пережила незаметный апокалипсис
Ученые опубликовали доклад о состоянии климата в мире в прошлом году. 2011-й войдет в историю как год экстремальных климатических явлений, полагают ..

07.08.2012 50 тысяч лет назад умер последний неандерталец-европеец

50 тысяч лет назад умер последний неандерталец-европеец
Ранее считалось, что стабильная популяция неандертальцев Европы вымерла за сотни тысяч лет до появления современного человека, поэтому эти данные ..

06.08.2012 Нейтронный детектор на Южном полюсе может предсказывать солнечные бури

Нейтронный детектор на Южном полюсе может предсказывать солнечные бури
Солнечные бури очень трудно предсказывать, но необходимость в таких прогнозах не меньше, чем у обычных бурь. Похоже, новое приложение нейтронного ..

06.08.2012 Загробный мир майя

Загробный мир майя
Археологи считают, что нашли в Мексике вход в загробный мир майя. И хотя между учеными по поводу находки уже разгорелся спор, обе стороны говорят о ..
Все новости



Мер-ка-ба человека (Свет-дух-тело)



Если радио не работает
(не активен ползунок),
включите Flash в настройках браузера

 
контакты