Webik Diz

CSS словарь

Nikola — Wed, 15 Aug 2012 08:42:22 GMT

Свойства фона

background-position - задает стартовую позицию фонового изображения.
background - объединяет в себе все свойства, которые используются для определения фона страницы.
background-attachment - определяет является ли фоновое изображение фиксированным или прокручивается вместе со страницей.
background-color - задает цвет фона для элемента.
background-image - определяет используемое изображение фона для элемента.
background-repeat - определяет как повторять фоновое изображение.

Свойства границ

border-bottom-width -задает ширину нижней границы элемента.
border-left-width - задает ширину левой границы элемента.
border-left-style - задает стиль левой границы элемента.
border-left-color - задает цвет левой границы элемента.
border-left - объединяет в себе все свойства, которые используются для определения левой границы (рамки) элемента.
outline-color - задает цвет внешней границы элемента.
border-collapse - способно удалять двойные линии (границы) на месте стыка ячеек таблицы.
border-width - задает ширину для четырех границ.
border-top-width - задает ширину верхней границы элемента.
border-top-style - задает стиль верхней границы элемента.
outline-style - задает стиль внешней границы элемента.
border-right - объединяет в себе все свойства, которые используются для определения правой границы (рамки) элемента.
border-right-color - задает цвет правой границы элемента.
border-right-style - задает стиль правой границы элемента
border-bottom-color - задает цвет нижней границы элемента.
border-bottom - объединяет в себе все свойства, которые используются для определения нижней границы (рамки) элемента.
border - объединяет в себе все свойства, которые используются для определения границы (рамки) элемента.
border-color - задает цвет для четырех границ.
outline - задает внешнюю границу вокруг элементов
border-top-color - задает цвет верхней границы элемента.
border-top - объединяет в себе все свойства, которые используются для определения верхней границы (рамки) элемента.
border-style - задает стиль для четырех границ.
border-spacing - задает расстояние между границами ячеек в таблице
border-right-width - задает ширину правой границы элемента.
outline-width - задает ширину внешней границы элемента.

Свойства размера

min-width - определяет минимальную ширину элемента.
max-width - определяет максимальную ширину элемента.
min-height - определяет минимальную высоту элемента.
height - определяет высоту элемента.
width - определяет ширину элемента.
max-height - определяет максимальную высоту элемента.

Свойства шрифта

font-size - задает размер шрифта.
font-weight - определяет толщину символов в тексте.
font-style - задает стиль шрифта для текста.
font-family - задает шрифт для элемента.
font - бъединяет в себе все свойства, которые используются для определения шрифта.
font-variant - определяет должен ли текст отображаться капительными буквами или нет.

Свойства генерированного контента

quotes - задает тип кавычек, которые используются для вставленных цитат.
counter-reset - создает или сбрасывает один или несколько счетчиков.
counter-increment - используется для увеличения значения счетчика приращений
content - предназначено для вставки сгенерированного контента

Свойства списка

list-style - объединяет в себе все свойства, которые используются для определения внешнего вида списка.
list-style-position - определяет место расположение маркера списка.
list-style-type - определяет тип маркера в списке.
list-style-image - заменяет маркер списка изображением.

Свойства отступов

margin-top - определяет верхний отступ для элемента.
margin-right - определяет правый отступ для элемента.
margin-bottom - определяет нижний отступ для элемента.
margin-left - определяет левый отступ для элемента.
margin - задает все свойства отступов в одной строке.

Свойства полей

padding-top - задает верхнее поле для элемента.
padding-right - задает правое поле для элемента.
padding-left - задает левое поле для элемента.
padding-bottom - задает нижнее поле для элемента.
padding - задает все свойства полей в одной строке.

Свойство позиционирования

top - устанавливает положение верхнего края содержимого элемента без учета толщины рамок и отступов.
cursor - определяет тип курсора при наведении мішки на элемент.
display - определяет, как элемент должен быть показан в документе.
visibility - способно сделать любой видимым или невидимым.
right - устанавливает положение правого края содержимого элемента.
z-index - управляет расположением элемента по z-оси
float - определяет по какой стороне будет выравниваться объект. Остальные элементы будут обтекать его с других сторон.
clip - позволяет определить область позиционированного элемента, в которой будет показано его содержимое.
left - устанавливает положение левого края содержимого элемента
clear - устанавливает с какой стороны элемента запрещено обтекание другими элементами.
overflow - управляет отображением содержания блочного элемента
bottom - устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.
position - используется для позиционирования элемента.

Свойства таблицы

caption-side - задает расположение заголовка (подписи) таблицы.
empty-cells - позволяет определить показывать границы и фон пустых ячеек или нет.
table-layout - позволяет определить алгоритм разметки таблицы.

Свойства текста

vertical-align - задает вертикальное выравнивание элемента.
word-spacing - уменьшает или увеличивает пробелы между словами.
white-space - определяет отображение пробелов между словами.
text-align - определяет горизонтальное выравнивание текста в элементе.
text-indent - определяет отступ первой строки в текстовом блоке.
text-decoration - определяет оформление текста.
direction - позволяет задать направление отображения текста.
line-height - определяет высоту строки.
letter-spacing - увеличивает или уменьшает расстояние между буквами в тексте.
color - позволяет задать цвет текста.
text-transform - контролирует в тексте выделение заглавными буквами.

CSS Псевдоклассы/элементы

:lang - добавляет стиль к элементу со специальным атрибутом lang.
:hover - добавляет стиль к элементу при наведенной мышкой.
:active - добавляет стиль к активному элементу.
:first-child - добавляет стилевое оформление к первому дочернему элементу селектора
:visited - добавляет стиль к посещенной ссылке.
:after - добавляет контент после элемента.
:before - добавляет контент до элемента.
:focus - добавляет специальный стиль к элементу, который получает фокус.
:first-line - добавляет стилевое оформление к первой строке текста.
:first-letter - добавляет стилевое оформление к первой букве текста.
:link - добавляет стиль к непосещенной ссылке.

Основные теги html (общие черты)

Nikola — Sun, 12 Aug 2012 18:02:10 GMT

HTML-документ является обычным текстовым файлом, и именно поэтому для написания HTML кода (создание веб-сайта) подойдет любой текстовый редактор, ну например, Notepad (Блокнот), данная программа входит в стандартный набор программ Windows. Большинство Вебмастеров уверяют Нас в том, что данный редактор является самым лучшим, поверьте Мне, это не так. Существует целый класс HTML редакторов, специализированных для создания отдельных веб-страниц и сайтов целиком. Если же Все Ваши старания сводятся к тому, чтобы написать пару простеньких веб-страниц, то Блокнот, будет самым лучшим вариантом. В противном случае (Вы решили написать не просто сайт, а мего проект) воспользуйтесь специализированными редакторами.

Итак теперь перейдем непосредственно к основным тегам. Все веб-страницы, начинаются с самого главное тэга - . Этот тэг описывает ваш текстовый документ как страницу, выполненную в формате HTML. Далее следует тэг , если дословно перевести, то HEAD с английского переводится как "голова". Здесь записывают все основные параметры, мета-теги, ссылки на обращение к стилям и тому подобное. Внутри раздела располагают тег - здесь записывается название страницы. Оно будет отображено в строке заголовка, окна Вашего браузера. После </HEAD> (закрытие "головы") Мы должны прописать раздел <BODY> - указывает на начало тела веб-страницы. В данном разделе размещаются все тексты, картинки, видео, программы и тому подобное, которое увидят посетители Вашего ресурса. <br /><br /> Пример простейшего html документа: <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><HTML>   <br />   <HEAD>   <br />   <TITLE>   <br />   Основные тэги в HTML | Вмастеру.ру   <br />


   Здесь будут ссылки, текст, картинки, видео и все в этом роде.

iLight код и редактирование

Nikola — Mon, 05 Mar 2012 11:09:50 GMT

Думаю всем нравится лайтбокс. Но оно кажется слишком простым. Вот решил слегка изменить его, придать более красивый вид и плавную анимацию. И дал галерее новое название iLight.

iLight - инструмент для того, чтобы вывести на экран изображения, контент html, карты, и видео в стиле "лайтбокса", плавающие на веб-страницах. Используя iLight, авторы веб-сайта могут продемонстрировать широкий выбор носителей во всех главных браузерах, не проводя пользователей далеко от соединяющейся страницы.

Возможности:
- Может изображения на дисплее, элементы HTML, фильмы SWF, Карты, и запросы Аякса
- Настраиваемая посредством настроек и CSS
- Группы связали элементы с кнопками навигации
- Удивительные и сладкие анимации
- Много тем оформления!

Журнал изменений:

Code

1.4.0 (25 декабря 2010)
* Добавленные опции перехода
* Добавленное "перемещение" param
* Добавленный "flashvars" param
* Вы можете использовать % по ширине и высоту
* Исправленная ошибка с флэш-памятью в Chrome 7 и 8
* Фиксированный zIndex в и бело-зеленых темах по умолчанию
* Исправленная ошибка в 'минималистской' теме
* Добавленная тема 'развития'
* Добавленная 'темная развитием' тема

1.3.6 (30 октября 2010)
* исправленная ошибка IE8
* Исправленная ошибка с изображениями GIF
* "изменять размеры" функция не перезагружает контент больше

1.3.5 (26 октября 2010)
* исправленная ошибка IE8

1.3.4 (09 октября 2010)
* Исправлял пустую ошибку заголовка

1.3.2 (18 сентября 2010)
* Добавленный videopress.com видео поддержка
* исправленная Ошибка IE7

1.3.1 (06 сентября 2010)
* Фиксированная проблема совместимости с jQuery 1.3

1.2.5 (26 2010)
* Исправлял ошибку высоты строки Safari

1.2.4 (21 2010)
* Фиксированные полосы прокрутки ошибки в iframes и видео

1.2.3 (19 2010)
* Исправленная ошибка иногда заключительный лайтбокс не скрывает фон
* Добавленное jQuery обнаружение версии
* Добавленная 'классическо-темная' тема

1.2.2 (16 2010)
* Восстановление 'максимизирует' кнопку, когда вы щелкаете по кнопкам галереи
* Добавленная 'минималистская' тема

1.2.1 (10 2010)
* Фиксированная функция 'встряски'
* Добавленная 'классическая' тема

1.2 (02 2010)
* Добавленный megavideo.com видео поддержка
* Добавленный gametrailers.com видео поддержка
* Добавленный collegehumor.com видео поддержка
* Добавленная ustream.tv видео поддержка
* Добавленная twitvid.com видео поддержка
* Исправленная ошибка в Оверлеи, когда лайтбокс закрывается
* Шоу скрытый встроенный контент
* Фиксированная медленная анимация с Internet Explorer
* Добавленная совместимость к изображениям.tiff
* Добавленная поддержка iframe
* Добавленная Google Maps и поддержка Карт Bing

1.1 (28 июля 2010)
* События Keyboard теперь обработаны.
* ошибка Переполнения в контенте html исправлена.

1.0 (11 июля 2010)
* Первая версия

Установка:

1. Залейте папки images, js, css себе на сайт. Обратите внимание что в папках images и css присутствуют ещё несколько папок соответствующих вариантам оформления. Выберите понравившийся и залейте содержимое в нужную папку.

2. Добавьте следующие строки в :

Code

Использование:

Одиночные изображения

Code

Галерея

Code

Размер

Code

В новой вкладке

Code

Текст

Code

Flash

Code

Видео

Code

Основные теги html

Nikola — Mon, 05 Mar 2012 10:09:59 GMT

Основные теги

- Указывает программе просмотра страниц что это HTML документ.

- Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.

- Определяет видимую часть документа

Теги оглавления

- Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

- Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

- Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

- Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.

- Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.

- Устанавливает цвет гиперссылок при нажатии.

Теги для форматирования текста

- Обрамляет предварительно отформатированный текст.

- Создает САМЫЙ БОЛЬШОЙ заголовок

- Создает самый маленький заголовок

- Создает жирый текст

- Создает наклонный текст

- Создает текст - имитирующий стиль печатной машинки.Используется для цитат, обычно наклонный текст.

- Используется для выделения из текста слова (наклонный или жирный текст)

- Используется для выделения наиболее выжных частей текста (наклонный или жирный текст)

- Устанавливает размер текста в пределах от 1 до 7.

- Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

- Создает гиперссылку на другие документы или часть текущего документа.

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

- Отмечает часть текста как цель для гипперссылок в документе.

- Создает гиперссылку на часть текущего документа.

Форматирование

- Создает новый параграф

- Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center

- Вставляет перевод строки.

- Создает отступы с обеих сторон текста.

Создает список определений.

- Определяет каждый из терминов списка

- Описывает каждое определение

- Создает нумерованный список

- Определяет каждый элемент списка и присваивает номер

- Создает ненумерованный список

- Предваряет каждый элемент списка и добавляет кружок или квадратик.

- Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей

Графические элементы

- Добавляет изображение в HTML документ

- Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

- Устанавливает толщину рамки вокруг изображения

- Добавляет в HTML документ горизонтальную линию.

Устанавливает высоту(толщину) линии

- Устанавливает ширину линии, можно указать ширину в пикселах или процентах.

- Создает линию без тени.

- Задает линии определенный цвет. Значение RRGGBB.

Таблицы

- Создает таблицу.

- Определяет строку в таблице.

- Определяет отдельную ячейку в таблице.

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

Атрибуты таблицы

- Задает толщину рамки таблицы.

- Задает расстояние между ячейками таблицы.

- Задает расстояние между содержимым ячейки и ее рамкой.

- Устанавливает ширину таблицы в пикселах или процентах от ширины документа.

или или

- Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
- Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.	- Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)	- Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1) Доступно только для пользователей - Не позволяет программе просмотра делать перевод строки в ячейке таблицы. Кадры - Предваряет тег в документе, содержащем кадры; - Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров. - Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров. - Определяет единичный кадр или область в таблице кадров. - Определяет, что будет показано в окне браузера если он не поддерживает кадры. Атрибуты кадров - Определяет какой из HTML документов будет показан в кадре. - Указывает Имя кадра или области, что позволяет перенаправлять информацию в этот кадр или область из других кадров. - Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1. - Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1. - Указывает будет-ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. - Препятствует изменению размеров кадра. Формы Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы. - Создает формы - Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. - Указывает каждый отдельный элемент меню - Создает ниспадающее меню Указывает каждый отдельный элемент меню - Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. - Создает checkbox. За тегом следует текст. - Создает radio кнопку. За тегом следует текст. - Создает строку для ввода текста. Параметром Size указывается длина в символах. - Создает кнопку "Принять" - Создает кнопку "Принять" - для этого используется изображение Создает кнопку "Отмена"