Как улучшить CSS. Сокращенные CSS свойства

Font

Используйте:

font: italic small-caps bold 1em/1.5em serif

…вместо

font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
font-family: serif

Порядок записи:

font:style variant weight size line-height font-family 

Такая сокращенная запись будет работать, если указаны font-size и font-family. Если их опустить то правило проигнорируется. Если не указывать font-weight, font-style или font-variant, то им присваивается значение normal, так что учтите это.

Background

Используйте:

background: #fff url(image.gif) no-repeat fixed top left

…вместо

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top left;

Порядок записи:

background: color image repeat attachment position

Если опустить любое из этих значений, ему будет присвоено значение по умолчанию. Если не указывать значение background-position, фоновое изображение будет расположено в левом верхнем углу контейнера и затем продублировано по горизонтали и вертикали.

Lists

Используйте:

list-style: disc outside url(image.gif)

…вместо

list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Порядок записи:

list-style: position image 

Если не указывать любое из этих значений, ему будет присвоено значение по умолчанию.

Margin & padding

Есть несколько вариантов сокращений для внешних и внутренних отступов, в зависимости от количества сторон контейнера с одинаковыми значениями margin или padding.

4 разных значения

Используйте:

margin: 2px 1px 3px 4px (top, right, bottom, left)

…вместо

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

3 разных значения

Используйте:

margin: 5em 1em 3em (top, right и left, bottom)

…вместо

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

2 разных значения

Используйте:

margin: 5% 1% (top and bottom, right and left)

…вместо

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

1 значение

Используйте:

margin: 0 (top, bottom, right and left)

…вместо

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

Приведенные выше правила также применяются для padding и border.

Border

Используйте:

border: 1px solid #000

…вместо

border-width: 1px;
border-style: solid;
border-color: #000

Используйте:

border-right: 1px solid #000

…вместо

border-right-width: 1px;
border-right-style: solid;
border-right-color: #000

(можете заменить right на top, bottom или left.)

Приведенные выше правила могут быть без труда объединены с аналогичными правилами для margin и padding. Посмотрите на этот контейнер:

Такие границы можно получить так:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

А можно добится того же используя:

border: 8px solid #336;
border-width: 10px 8px 8px 10px;
border-color: #ccf #336 #336 #ccf

Вывод

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

Перевод: http://www.alexilin.ru/

Источник: CSS shorthand properties

Далее...

htmlbook.ru - Теги HTML

A

Тег A является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь.

ABBR

Тег ABBR указывает, что последовательность символов является аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы.

ACRONYM

Элемент ACRONYM указывает, на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово.

ADDRESS

Тег ADDRESS предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д.

AREA

Каждый элемент AREA определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением.

B

Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

BASE

Элемент BASE определен внутри контейнера HEAD и инструктирует браузер относительно полного базового адреса текущего документа.

BASEFONT

Тег BASEFONT предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега FONT, в котором можно переопределить параметры оформления текста.

BDO

Тег BDO устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево.

BGSOUND

Тег BGSOUND определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии.

BIG

Тег BIG увеличивает размер шрифта на единицу по сравнению с обычным текстом.

BLOCKQUOTE

Тег BLOCKQUOTE предназначен для выделения длинных цитат внутри документа. Текст отображается как выровненный блок с отступами слева и справа, а также с отбивкой сверху и снизу.

BODY

Элемент BODY предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

BR

Тег BR устанавливает перевод строки в месте, где этот тег встречается.

BUTTON

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

CAPTION

Тег CAPTION предназначен для создания заголовка к таблице. Такой заголовок представляет собой текст, отображаемый перед таблицей и описывающий ее содержание.

CITE

Тег CITE помечает текст как цитату или сноску на другой материал. Браузеры обычно устанавливают текст внутри контейнера CITE курсивом.

CODE

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

COL

Тег COL задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.

COLGROUP

Тег COLGROUP предназначен для задания ширины и стиля одной или нескольких колонок таблицы.

DD

Тег DD входит в тройку элементов DL, DT, DD, предназначенных для создания списка определений.

DEL

Тег DEL используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.

DFN

Тег DFN применяется для выделения терминов при их первом появлении в тексте.

DIV

Элемент DIV является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.

DL

Тег DL входит в тройку элементов DL, DT, DD, предназначенных для создания списка определений.

DT

Тег DT входит в тройку элементов DL, DT, DD, предназначенных для создания списка определений.

EM

Тег EM предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

EMBED

Элемент EMBED используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

FIELDSET

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

FONT

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

FORM

Тег FORM устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером.

FRAME

Тег FRAME определяет свойства отдельного фрейма, на которые делится окно браузера.

FRAMESET

Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега FRAME.

H1...H6

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.

HEAD

Тег HEAD предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.

HR

Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера.

HTML

Тег HTML является контейнером, который заключает в себе все содержимое веб-страницы, включая теги HEAD и BODY.

I

Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

IFRAME

Тег IFRAME создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

IMG

Тег IMG предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG.

INPUT

Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем.

INS

Тег INS предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.

KBD

Тег KBD используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере KBD моноширинным шрифтом.

LABEL

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

LEGEND

Тег LEGEND применяется для создания заголовка группы элементов формы, которая определяется с помощью тега FIELDSET.

LI

Тег LI определяет отдельный элемент списка. Внешний тег UL или OL устанавливает тип списка — маркированный или нумерованный.

LINK

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

MAP

Тег MAP служит контейнером для элементов AREA, которые определяют активные области для карт-изображений.

MARQUEE

Тег MARQUEE создает бегущую строку на странице. На самом деле содержимое контейнера MARQUEE не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д.

META

META определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.

NOBR

Уведомляет браузер отображать текст без переносов.

NOEMBED

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

NOFRAMES

Содержимое тега NOFRAMES отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать. Браузеры, которые работают с фреймами, полностью игнорируют содержимое тега NOFRAMES.

NOSCRIPT

Контейнер NOSCRIPT показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем.

OBJECT

Элемент OBJECT сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает.

OL

Тег OL устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега LI.

OPTGROUP

Тег OPTGROUP представляет собой контейнер, внутри которого располагаются теги OPTION объединенные в одну группу.

OPTION

Тег OPTION определяет отдельные пункты списка, создаваемого с помощью контейнера SELECT. Ширина списка определяется самым широким текстом, указанным в теге OPTION.

P

Определяет текстовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.

PARAM

Тег PARAM предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов APPLET или OBJECT.

PRE

Элемент PRE определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.

Q

Тег Q используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

SAMP

Элемент SAMP используется для отображения текста, который является результатом вывода компьютерной программы или скрипта.

SCRIPT

Тег SCRIPT предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке.

SELECT

Тег SELECT позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором.

SMALL

Тег SMALL уменьшает размер шрифта на единицу по сравнению с обычным текстом.

SPAN

Тег SPAN предназначен для определения встроенных элементов документа.

STRIKE

Тег STRIKE отображает текст как перечеркнутый. Этот тег аналогичен тегу S, который имеет сокращенную форму записи.

STRONG

Тег STRONG предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

STYLE

Тег STYLE применяется для определения стилей элементов веб-страницы.

SUB

Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

SUP

Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

TABLE

Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.

TBODY

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

TD

Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.

TEXTAREA

Поле TEXTAREA представляет собой элемент формы, для создания области, в которую можно вводить несколько строк текста.

TFOOT

Элемент TFOOT предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.

TH

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

THEAD

Элемент THEAD предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.

TITLE

Определяет заголовок документа. Элемент TITLE не является частью документа и не показывается напрямую на веб-странице. Обычно текст заголовка отображается в левом верхнем углу окна браузера.

TR

Тег TR служит контейнером для создания строки таблицы.

TT

Контейнер TT отображает текст моноширинным текстом. Этот тег относится к группе тегов физического форматирования.

UL

Тег UL устанавливает маркированный список. Каждый элемент списка должен начинаться с тега LI.

VAR

Тег VAR используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере VAR курсивным начертанием.

Материал предоставлен htmlbook.ru

Далее...

htmlbook.ru - Свойства CSS

Цвет и фон

background

Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

background-attachment

Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

background-color

Устанавливает фоновый цвет элемента.

background-image

Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью.

background-position

Задает начальное положение фонового изображения, установленного с помощью параметра background-image.

background-repeat

Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

color

Определяет цвет текста элемента.

Границы

border

Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

border-bottom

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

border-bottom-color

Устанавливает цвет границы внизу элемента.

border-bottom-style

Устанавливает стиль границы внизу элемента.

border-bottom-width

Задает толщину границы внизу элемента.

border-color

Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.

border-left

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

border-left-color

Задает цвет границы слева от элемента.

border-left-style

Устанавливает стиль границы слева от элемента.

border-left-width

Задает толщину границы слева от элемента.

border-right

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

border-right-color

Задает цвет границы справа от элемента. Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB.

border-right-style

Устанавливает стиль границы справа от элемента.

border-right-width

Устанавливает толщину границы справа от элемента.

border-style

Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

border-top

Одновременно задает толщину, стиль и цвет границы сверху элемента.

border-top-color

Задает цвет границы сверху элемента.

border-top-style

Устанавливает стиль границы сверху элемента.

border-top-width

Устанавливает толщину границы сверху элемента.

border-width

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.

Шрифт

font

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

font-family

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

font-size

Определяет размер шрифта элемента, который может быть установлен несколькими способами.

font-style

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

font-variant

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

font-weight

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Также допустимо использование ключевых слов.

Текст

letter-spacing

Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут.

line-height

Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.

text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

text-decoration

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

text-indent

Устанавливает величину отступа первой строки блока текста (например, для параграфа P). Воздействия на все остальные строки не оказывается.

text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.

vertical-align

Выравнивает элемент по вертикали относительно своего родителя или окружающего текста.

white-space

Параметр white-space устанавливает, как отображать пробелы между словами.

word-spacing

Устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно.

Списки

list-style

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

list-style-image

Устанавливает адрес изображения, которое служит в качестве маркера списка. Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.

list-style-position

Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка и inside — маркер обтекается текстом.

list-style-type

Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег UL) и нумерованного (тег OL).

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

clear

Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

clip

Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник.

display

Многоцелевой атрибут, который определяет, как элемент должен быть показан в документе.

float

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

height

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег IMG. Высота не включает толщину границ вокруг элемента, значение отступов и полей.

overflow

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним.

width

Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Позиционирование

bottom

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

left

Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.

position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

right

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

top

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.

z-index

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

Отступы

margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

margin-bottom

Устанавливает величину отступа от нижнего края элемента.

margin-left

Устанавливает величину отступа от левого края элемента.

margin-right

Задает величину отступа от правого края элемента.

margin-top

Устанавливает величину отступа от верхнего края элемента.

Поля

padding

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

padding-bottom

Устанавливает значение поля от нижнего края содержимого элемента.

padding-left

Устанавливает значение поля от левого края содержимого элемента.

padding-right

Задает значение поля от правого края содержимого элемента.

padding-top

Задает величину поля от верхнего края содержимого элемента.

Таблицы

border-collapse

Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии.

border-spacing

Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.

table-layout

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

Интерфейс

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Важность

!important

Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стилевого параметра.

Псевдоэлементы

after

Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. Псевдоэлемент after работает совместно с атрибутом content.

before

Псевдоэлемент before применяется для отображения желаемого контента до элемента, к которому он добавляется. before работает совместно с атрибутом content.

Материал предоставлен: htmlbook.ru

Далее...

Шаблоны для Blogger

Далее...

Flowers Blogger Templates - чудо шаблон!!!

Шаблон очень качественный как в отношении графики, так и валидности кода.

Если бы я столько не намучилась со своим, обязательно выбрала бы этот!!!

Оригинальный дизайн created by DezinerFolio

Посмотреть демо-версию

Загрузить шаблон

Далее...

Словарь тегов HTML

Первые Шаги - Словарь тэгов.

Тэг

Назначение и атрибуты, рассматриваемые в учебнике

Ступеньки

A

ссылка href="другой_документ.html" - путь к документу target=_blank - открывает ссылку в новом окне name="anchor1" - имя закладки title="Ваша подсказка" - подсказка к ссылке (текстовой)

13, 15, 17, 18, 19 16 20 14

---

AREA

определяет геометрические области внутри карты и ссылки для них shape="rect" (circle, poly) - тип области coords="x1,y1,..." - координаты области alt="описание" - описание, подсказка href="document.html" - ссылка

17, 18, 19

---

B

выделение текста полужирным шрифтом

8

---

BIG

выделение текста более крупным шрифтом, чем основной

8

---

BODY

тело документа, обязательный тэг text="#cc0000" - задает цвет текста всего документа bgcolor="#000000" - задает цвет фона документа background="картинка.jpg" - задает фоновую картинку link="#ff9999" - задает цвет ссылки alink="#ff9999" - задает цвет активной (нажатой) ссылки vlink="#ff9999" - задает цвет посещенной ссылки topmargin="0" - ширина верхнего и нижнего полей документа для IE leftmargin="0" - ширина левого и правого полей документа для IE marginheight="0" - ширина верхнего и нижнего полей документа для NN marginwidth="0" - ширина левого и правого полей документа для NN

3 4 5 11 13 31

---

BR

принудительный перенос текста на другую строку clear="all" (left, right) - завершение обтекания текстом объекта

12

---

CENTER

центрирование текста и объектов

6

---

DIV

выравнивание текста и объектов align="center" - центрирование align="right" - выравнивание по правому краю документа align="left" - выравнивание по левому краю документа align="justify" - выравнивание по обоим краям документа

6

---

EMBED

внедрение объектов в документ src="mult.swf" - указывает местоположение объекта type="application/x-shockwave-flash" - тип подгружаемого объекта width="500" - ширина объекта height="100" - высота объекта align="left" - выравнивание vspace="10" - расстояние от объекта до текста по вертикали hspace="30" - расстояние от объекта до текста по горизонтали hidden=”true” (false) - отображать указанный объект (да/нет) pluginspace=”http://…” - путь к плагину

43

---

FONT

управление шрифтами color="#cc0000 - задает цвет для блока текста size="+0" - задает размер шрифта текста (от -2 до +4) face="Arial" - задает определенный тип шрифта

4 7 9

---

FRAME

определяет содержимое и вид одного фрейма marginheight="0" - ширина верхнего и нижнего полей фрэйма marginwidth="0" - ширинау левого и правого полей фрэйма scrolling="yes" (no, auto) - линейка прокрутки name="window-1" - имя фрейма noresize - запретить посетителю менять размеры фреймов

35, 36, 37, 38, 39, 40

---

FRAMESET

определяет макет основного окна в виде прямоугольных пространств rows="100,200,*" - определяет расположение горизонтальных фреймов cols="10%,20%,70%" - определяет расположение вертикальных фреймов border - определяет ширину рамок фрэймов в пикселах

35, 36, 37, 38, 39, 40

---

Hx

заголовки (H1, H2, H3, H4, H5, H6)

7

---

HEAD

голова документа, обязательный тэг

3

---

HR

линия align="right" (center или left) width="30%" (ширина линии в процентах) size="6" (толщина линии) NoShade (отмена объемности) color="cc0000" (цвет линии, только в IE)

30

---

HTML

указывает на тип документа, обязательный тэг

2

---

I

выделение текста курсивом

8

---

IFRAME

"плавающий" фрейм src="ancorpri.html" - путь к подгружаемому документу width="300" - вширина "плавающего" фрейма height="250" - высота "плавающего" фрейма scrolling="auto" (yes, no) - полоса прокрутки frameborder="1" (0) - отображать или нет границы фрейма

41

---

IMG

подгрузка изображений (картинок) Border="5" - рамка покруг картинки width="500" - ширина картинки height="100" - высота картинки align="left" - расположение текста по отношению к картинке vspace="10" - расстояние от картинки до текста по вертикали hspace="30" - расстояние от картинки до текста по горизонтали alt="описание" - описание картинки usemap="#karta1" - ссылка на карту

10, 11, 12 17, 18, 19

---

LI

определяет элемент списка

32, 33

---

LINK

вводит в документ внешние таблицы стилей href=”http://…” – пусть к файлу со стилями rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. type="text/css" – тип содержимого, подгружаемой информации.

45

---

MAP

определяет клиентскую навигационную карту name="karta1" - имя карты

17, 18, 19

---

MARQUEE

бегущая строка текста (только IE) bgcolor - цвет фона бегущей строки height - высота строки width - ширина строки behavior="scroll" обычная прокрутка behavior="slide" - строка пробегает до края и останавливается behavior="alternate" - строка будет двигаться от края к краю scrollamount="1" (1-10) - скорость движения строки direction="left" (right, up, down) - движение влево (вправо, вверх, вниз)

34

---

OL

упорядоченные списки type="I" (i, 1, a, A) - стиль элемента списка

33

---

OBJECT

общее внедрение объектов в документ data="sobaka.jpg" - указывает местоположение данных для объекта type="image/jpeg" - тип содержимого для данных, указанных в data (тип объекта)

42

---

P

параграф, выравнивание текста и объектов align="center" - центрирование align="right" - выравнивание по правому краю документа align="left" - выравнивание по левому краю документа align="justify" - выравнивание по обоим краям документа

6

---

PRE

форматированный текст

8

---

S

перечеркнутый текст

8

---

SCRIPT

внедрение скриптов в документ type="text/javascript" - тип содержимого / язык скрипта src="http://site.ru/put_k_sciptu/" - путь к внедряемому скрипту

46

---

SMALL

выделение текста более мелким шрифтом, чем основной

8

---

STRIKE

перечеркнутый текст

8

---

STYLE

информация о стиле в заголовке type="text/css" - тип содержимого

45

---

SUB

нижний индекс

8

---

SUP

верхний индекс

8

---

TABLE

таблица bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки) background="картинка.gif" - задает фоновый рисунок width="50" или width="50%"- ширина таблицы height="45" или height="45%"- высота таблицы cellspacing="5" - расстояние между ячейками cellpadding="5" - расстояние внутри ячеек border="3" - задает толщину рамки таблицы bordercolor="#000000" - задает цвет рамки таблицы

21, 22, 23, 24, 25, 26, 27, 28

---

TD

ячейка данных таблицы bgcolor="#FFCC33" - цвет фона background="картинка.gif" - задает фоновый рисунок width="50" или width="50%"- ширина height="45" или height="45%"- высота align="center" (right, left) - горизонтальное выравнивание содержимого valign="middle" (top, bottom) - вертикальное выравнивание содержимого colspan="2" - растянуть ячейку на несколько стобцов rowspan="2" - растянуть ячейку на несколько рядов cellspacing="5" - расстояние между ячейками

21, 22, 23, 24, 25, 26, 27, 28

---

TITLE

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

3

---

TR

строка таблицы bgcolor="#FFCC33" - цвет фона background="картинка.gif" - задает фоновый рисунок width="50" или width="50%"- ширина height="45" или height="45%"- высота

21, 22, 23, 24, 25, 26, 27, 28

---

TT

шрифт пишущей машинки (моноширинный)

8

---

U

подчеркнутый текст

8

---

UL	неупорядоченные списки type="disk" (circle, square) - стиль элемента списка

Далее...

Кнопки закладок в блоге

Социальные закладки - это один из элементов новомодной концепции Web 2.0
По сути, это сервисы, которые предлагают хранить закладки на интересные интернет-страницы не на локальном компьютере, а в сети. И не просто хранить, а и обмениваться ими. Все в точности с постулатами: "контент должен создаваться самими пользователями" и "пользователи должны объединятся в социальные сети".
Чем это выгодно блоггеру?
Вы бесплатно получаете ссылки на ваш блог с других сайтов. И чем лучше вы пишите, тем больше будет ссылок. А это всегда хорошо.
Но для того, чтобы читатели сохранили закладку на ваш блог на одном из сервисов социальных закладок, необходимо одно из двух: или предустановленный плагин в браузере читателя (а вы никогда не узнаете, есть он или нет), или специальная панель с кнопками в вашем блоге.

Сейчас уже практически не встретишь блогов, в которых не было бы тех или иных панелей социальных закладок. Поэтому, если и вы хотите такую же "фичу" у себя в блоге, предлагаю одну из них:

ОднаКнопка.ru
Позволяет добавить закладку на 10 сервисов: БобрДобр, Memori, Яндекс.Закладки, Мистер Вонг, МоеМесто.ru, RuMarkz, Scoop, 100zakladok.ru, del.ici.ous, Google bookmarks.
В наличии 3 варианта панели: простая, выпадающее меню, все кнопки в строку (как у меня в блоге).
Установка очень проста:
1. Копируете на сайте код. Первую его часть вставляете в код шаблона прямо перед тегом (найдите с помощью Ctrl+F)


2. Сохраняете шаблон.

3. Заходите в меню "Настройки" Панели управления вашего блога. Выбираете "Форматирование".

4. Вставляете вторую часть кода (скопируйте код в кодировке UTF-8) в поле меню "Шаблон сообщения".

Теперь панель будет появляться в каждом вашем посте. Вы можете менять ее расположение относительно текста: сверху, снизу. Для этого при создании сообщения перейдите в HTML-редактор вашего поста и вставьте код, который по умолчанию находится снизу, в нужное вам место.

А вот так это выглядит на сайте http://odnaknopka.ru/get/

Самая простая кнопка

Кнопка с выпадающим меню

Иконки всех сервисов в строку

На сайте

Blogger

В блоге

WordPress

" type="hidden">

Или измените шаблон сообщения (`Настройки` -> `Форматирование` -> `Шаблон сообщения`) и добавьте код:

Теперь одна кнопка будет появляться в каждом вашем посте.

Вот и все.
Сайт оригинала статьи Автор Рома
Далее...

Gradient Image Maker

Gradient Image Maker

Градиент изображения используются повсеместно в веб-дизайне, то есть в качестве фона, кнопок, слоев, в качестве тени и других интересных визуальных эффектов и т.д. Мы создали этот интерактивный инструмент, который позволяет безболезненно создать градиент изображения от 3 видов, мгновенный предварительный просмотр, чтобы получать именно то, что Вы имели в виду. Наслаждайтесь!

Select color:

Select Gradient Type: Gradient Width: Gradient Height: Top color:Left color:Left upper color: ____ Bottom color:Right color:Left bottom color: ____ Right top color: ____ Right bottom color: ____ Image Output format: JPG: Smaller file size than PNG for 4 vertex gradients, plus wider browser support. PNG: Much smaller file size than JPG for horizontal or vertical gradients.', this, event, '150px')">[?] JPEG PNG

Далее...

Drop down/ Overlapping Content script

Dynamic Drive DHTML Scripts- Drop down/ Overlapping Content script:
Автор: Dynamic Drive
Примечание: Скрипт переписан 22 ноября, 07 "для различных усовершенствований.

Описание: Этот скрипт позволяет отображать содержание в плотных районах на вашей странице, в сбросив его вниз, в тем, когда курсор мыши над ролики якорного элемента. Содержание временно совпадает ничего под ним. Почему бы не добавить еще один аспект на веб-страницу создать больше пространства. Крайне удобно для отображения окна поиска, дополнительные ссылки и т.д. в плотных области, таких, как боковой колонке страницы. Содержание раскрыть/ дублировать в каждом случае это просто содержащиеся внутри произвольного DIV на странице для удобства настройки.

Этот скрипт поддерживает четыре различных направления позиции - "левом нижнем", "правой снизу", "- в верхней левой" и "правой верхней" в раскрывающемся содержание. Вы также можете настроить скорость выпадающей анимации для каждого сценария. Cool!
(машинный перевод с английского Google)
Далее...

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

Закачать!!!

CSS Tab Designer 2.0 [ Freeware ]

Download [ Setup Size : 1.35 MB ]

PPC Keyword Generator 1.0 [ Freeware ]

Download [ Setup Size : 1.08 MB ]

Code Export 1.0 [ Freeware ]

• RTF Convertor [ Setup Size : 1.75 MB ]
• Doc Convertor [ Setup Size : 1.76 MB ]
• Text Code Export [ Setup Size : 1.77 MB ]
• HTML Code Export [ Setup Size : 1.84 MB ]
• C++ Code Export [ Setup Size : 1.90 MB ]
• C# Code Export [ Setup Size : 1.92 MB ]
• Java Code Export [ Setup Size : 1.92 MB ]

Далее...

Анимашки « Смайлики « RC-MIR.com - smiles

Анимашки « Смайлики « RC-MIR.com - smiles:

3D		Breath of fire
	Diddli/Pimboli		Алфавит
	Ангелы		Бабочки
	Блестяшки (Glitter)		Военные
	Глаза		Гламурные
	Деньги		Дети
	Драконы		Другие животные
	Еда		Звезды
	Зима		Зодиак
	Имена		Инопланетяне
	Кitty		Капельки
	Книги		Компьютеры
	Космос		Кошечки
	Куколки		Линии
	Любовь		Люди
	Мишки		Музыка
	Мультяшки		Мышки
	Надписи		Напитки
	Недвижимость		Огонь
	Погода		Праздники
	Птицы		Религия
	Свечи		Сердечки
	Сладкие		Собачки
	Спорт		Страшилки
	Существа		Техника
	Транспорт		Флаги
	Цветы		Часы
	Черти		Эльфы
	Другие

Далее...