Sefirut.ru Каталог статей Уроки по html/css Разное

CSS-свойства для работы с текстом

• font: bold 16px/30px sans-serif - наиболее удобная сокращенная форма для указания: font-weight/font-style(bold/italic), font-size(16px), line-height(30px) и перечня семейства шрифтов, т.е font-family (или же конкретного шрифта, в данном случае sans-serif). Указание высоты строки (line-height) часто используется для выравнивания однострочного текста по центру вертикали блока (например в меню).
• font-variant: small-caps - посути, практически безполезное свойство, которое изменяет все строчные буквы на манер прописных, немного меняя их размер и форму.
• letter-spacing: 3px - это свойство CSS разуплотняет глагне увеличивает или уменьшает расстояние между буквами текста. При создании надписей из одних заглавных букв, рекомендуют немного увеличивать это расстояние для удобочитаемости текста. По умолчанию значение равно нулю.
• white-space: nowrap - свойство позволяет избавиться от отголосков прошлого при использовании тега <nobr>, т.е строка такого текста никогда автоматически не перескочит на другую строку при наличии разрывных символов. Кроссбраузерно только при указании доктайпа, иначе в IE6 - не пашет.
• word-spacing: 3px - работает аналогично letter-spacing, только не для букв, а для целых слов.
• text-align: justify - выравнивание текста и других объектов, внутри блочного HTML-элемента. Доступные значения для выравнивания: по левому краю (left), по правому краю (right), по центру (center), по ширине (justify).
• text-decoration: underline - с этим свойством первое знакомство происходит при первом использовании ссылок. Этот аттрибут декорирования текста отвечает за линию, идущую снизу (underline), сверху (overline) или по центру текста (line-through). Последнее можно использовать вместо HTML-тега <strike>. У этого свойства есть еще значение «blink», но по большому счету это не кроссбраузерный бесполезный хлам. Также есть одна интересная особенность этого свойства: значением может быть сразу несколько возможных вариантов (через пробел). Т.е чтобы сделать текст подчеркнутым одновременно сверху и снизу, нужно указать «text-decoration: underline overline».
• text-transform: uppercase - тут всё просто, свойство трансформирует буквы текста в строчные (ABC) или прописные (abc). Также можно указать значение capitalize, при котором каждая первая буква слов будет начинаться с заглавной буквы.
• text-shadow:1px 1px 3px black - в последнее время современные браузеры начинают понимать это свойство, для создания тени у текста. Параметры, указываемые в этом свойстве означают: первое и второе значения (1px) - это отступ будущей тени от верхнего и левого края текста, третье значение (3px) - радиус размытия тени, ну и последее, четвертое значение, как вы уже догадались, цвет тени. Это свойство работает далеко не во всех браузерах. Привожу список браузеров, в которых я проверял и оно работает: Opera 10+, Firefox 3+, Safari 3+, Google Chrome, Internet Explorer 8.
• text-indent: 25px - свойство блочных элементов, создающее пробельный отступ в первой строке текста блока. Если нужно сделать отступ для всех строк текста, то тут уже нужен padding, но об этом ниже.
• vertical-align: middle - свойство позволяет управлять вертикальным выравниванием строчных элементов, относительно друг друга.
• color: silver - самое простое CSS-свойство для указания цвета текста. Допустимые значения для указания цвета: шестнадцатиричное значение #FF00EE, rgb(255, 0, 238) и указание зарезервированных слов для обозначения цвета, например «gray», «red», итд. В случае использования значения в виде #RRGGBB, возможна краткая запись цвета, при условии, что каждая составляющая имеет симметричную запись, например: #aa11ff можно записать как #a1f.
• cursor: pointer - меняем курсор указателя мыши при наведении на текст. Помимо стандартных значений, возможно указание курсора в виде файла (*.cur), но это далеко не кроссбраузерно и мало где используется.

CSS-свойства для работы фоновым изображением

• background:black url(images/bgc.png) no-repeat left top - наиболее удобная сокращенная форма записи аттрибутов бэкграунда в CSS. Параметры в значении (слева на право): background-color, background-image, background-repeat, background-position.
• background-attachment: fixed - это свойство позволяет зафиксировать позицию фоновой картинки так, что она всегда будет оставаться на одном месте при прокрутке страницы ползунками (скроллбар). К сожалению, традиционно пиняемый IE 6(и возможно даже 7) не поддерживают его подобающим образом.

CSS-свойства для работы с рамками, отступами и размерами блоков

• border: 3px double gray - краткая запись свойств, для указания толщины (border-width), стиля (border-style) и цвета (border-color) обрамляющей рамки блочного HTML-элемента. Это свойство меняет размеры блока во всех браузерах, кроме IE 6(7). Т.е при указании рамки в IE - рамка создается за счет заполнения пространства блока изнутри, а в остальных браузерах - снаружи. Возможно, это как-то связанно с блочной моделью и параметром разметки hasLayout.
• outline: none - свойство подобно border (имеет схожую запись), за исключением того что рамка не занимает никакого места и не влияет на размеры блоков. Не кроссбраузерно. Впервые я повстречал это свойство в браузерах Safari, там в элементах формы по умолчанию на псевдо-класс :focus стоит подсветка этих HTML-элементов через outline.
• margin: 10px 20px 30px 40px - свойство для задания внешних отступов для элемента. Краткая запись приводиться для всех 4 сторон блока (слева на право): верх, правая сторона, низ, левая сторона. Возможна краткая запись из 2 значений, когда параллельные отступы должны быть одинаковыми, например: «margin:20px 10px» означает тоже самое что и «margin:20px 10px 20px 10px». Внимание! Это свойство внезапно иногда может, самым непредвиденным образом, увеличивать размеры внешнего (родительского) блока.
• padding: 10px 25px - аналогично margin, только отступ от границ HTML-блока будет внутренним (inside).
• width: 100% - одно из самых часто используемых свойств, для задания ширины блочного элемента. Значения могут быть заданы в чем угодно (px, %, em). По умолчанию значение auto - только с этим значение свойство padding не будет изменять фактический размер блока.
• height: 400px - аналогично width, только для задания высоты блока.
• [max/min]-[height/width]: 100px - свойства для задания минимально и максимально допустимых значений ширины и высоты блочного элемента. Это полезно когда вы создаете резиновую верстку сайта и необходимо учесть минимальный размер ширины сайта (иначе будет «расчлененка» и всё поплывёт), например: min-width:1000px. Не работает в Interner Explorer 6, но его можно эмулировать в JS через expression следующим образом: width:expression((document.documentElement.clientWidth || document.body.clientWidth) < 1000? "1000px": "auto");

Наиболее важные CSS-свойства

• position: absolute - очень важное свойство, отвечающее за тип позиционирования элемента на странице. По умолчанию имеет значение static. Остальные значения: «absolute» — абсолютное позиционирование не влияющее на обтекание текущего элемента всеми остальными HTML-элементами на странице; «relative» — относительное позиционирование элемента, это значение оказывает влияние на свойства left/top/right/bottom и также на внутренние элементы с абсолютным позиционированием; «fixed» — фиксированная позиция элемента на странице, подобна абсолютной, только не зависит от прокрутки (скроллировании) страницы. Значение «fixed» не работает в IE 6, но есть хитрый способ, как можно его заменить при помощи absolute, подробнее читайте на design.ru в техногрете).
• left/top/bottom/right: 50px - свойства для задания отступа от соответствующих сторон внешнего окружения. Свойства имеют актуальность при указании позиционирования (position), отличного от static.
• float: left - это крайне важное свойство влияет не обтекание элементов в общей разметке HTML-элементов. Имеет значения left и right, при котором любой элемент становится «плавающим» и выравнивается по соответствующей стороне родительского элемента, при этом обладая всеми свойствами блочного элемента (или любого другого). Часто используется при блочной (безтабличной, div) верстке макетов.
• clear: both - свойство регулирующее движение пешеходов на светофорах обтекание элементов на странице. Может служить заменой для <br clear="all">. Частое применение: рядом с элементами с float:left/right или при указании align="left/right" у HTML-тега <img>.
• z-index: 1000 - индекс (позиция расположения) элементов в порядке наложения друг на друга, при использовании позиционирования со значениями absolute или relative. Чем больше параметр (число) — тем выше будет находиться слой (на переднем плане).
• overflow: auto - также очень полезное свойство, для оперирования отображением объектов, выходящих за допустимые размеры внешнего родительского блока. По умолчанию имеет значение visible. Остальные значения: «hidden» — выходящие внутренние элементы будут скрыты и обрезаны; «auto» — когда внутренние элементы будут выходить за пределы размера родительского блока, появятся полосы прокрутки (выглядит как-будто вставка была сделана через iframe); «scroll» — наиболее редко применяемое значение, пока столкнулся с его реальной необходимостью только в IE 6(7): оно убирает внутренние отступы у элементов формы (кнопок).
• display: list-item - еще одно, важнейшее свойство CSS, определяющее конечный «каркас» HTML-элемента. Основные значения при его использонии: block (блочный элемент); inline (строчный элемент); inline-block (строчный элемент, обладающий большинством свойств блочного элемента) - не работает в ранних версиях FF (но есть похожая замена в виде display:-moz-inline-box); list-item — эмуляция элемента списка. Дополнительные значения для эмуляции таблицы: table, table-row, table-cell и некоторые другие (не поддерживаются в IE 6,7).
• visibility: hidden - скрывает или показывает элемент на странице. Главное отличие, visibility:hidden от display:none в том, что display скрывает объект со страницы полностью, а visibility оставляет его размеры в общем потоке обтекания элементов.
• opacity: 0.5 - свойство задает прозрачность для элемента, значения могут быть дробными, диапазон от 0 (не виден) до 1 (виден). При этом, например, если мы установим значение в 0, но элемент будет находиться на странице, будет влиять на позиционирование соседних элементов и будет обладать интерактивностью. Т.е фактически opacity:0; это visibility:hidden + интерактивность элемента. Свойство принадлежит к CSS уровню 3, и для кроссбраузерности рекомендуется его использовать следующим образом: -moz-opacity:.8 /* Mozilla */; -webkit-opacity: .8/* Safari, Konqueror */; opacity:.8 /* Остальные браузеры */; filter:alpha(opacity=80) /* IE 6,7 */

СSS-свойства для работы с таблицами

• table-layout: fixed - cвойство управляет алгоритмом, используемым для размещения ячеек, строк и столбцов таблицы. Бытует мнение, что при указании значения «fixed» на таблицу, её обработка, построение и вывод в браузере осуществляется гораздо быстрее. Полезно при верстке таблиц с большим объемом данных.
• vertical-align: top - это свойство уже описывалось в разделе CSS-свойств для работы со шрифтами, но его основное назначение заключается в управлении выравниванием содержимого ячейки таблицы по вертикали.
• empty-cells: hide - свойство, определяющее видимость ячеек таблицы. Если для этого свойства установлено значение «show», вокруг пустых ячеек отображается граница (как вокруг обычных ячеек).
• border-collapse: collapse - свойство позволяет выбрать модель границ таблицы. Значение «separate» означает модель с отдельными границами, когда «collapse» задает модель с пересекающимися границами ячеек таблицы.
• border-spacing: 10px 20px - при использовании модели ячеек таблицы, когда у каждой ячейки свои границы (border-collapse: separate), это свойство определяет значение расстояния между соседними ячейками. Значение этого свойства может быть одним числом, задающее отступы по горизонтали (10px) и вертикали (20px), или же два, как в приведенном примере.

СSS-свойства для работы со списками

• list-style:square outside url(images/bull.png) - сокращенная запись для основных свойств списка: list-style-type (square/circle/decimal/etc..), list-style-position (inside/outside) и list-style-image. Каждое значение, начиная справа, может быть опущено при необходимости.
• counter-increment: id increment - свойство для создания более гибкого списка элементов, позволяющее выделить главы, подразделы, итд. Первое значение «id» идентификатор счетчика, значение которого каждый раз увеличивается при вхождении элемента на приращение, равное второму параметру значения этого свойства, в данном примере это «increment» (по умолчанию = 1). Не работает в IE 6,7.
• counter-reset: id value - свойста для сброса значения счетчика, заданного при помощи counter-increment, где «id» - идентификатор счетчика, а «value» - обнуляемое значение (по умолчанию = 0). Не работает в IE 6,7.

Специфичные свойства CSS

• clip: rect(0 100px 100px 0) - наиболее редко используемое свойство, позволяющее выделить видимую прямоугольную область HTML-элемента. Всё что находиться за пределами указанной области, будет скрыто. Работает только при абсолютном позиционировании элемента (или же fixed). Задаваемое значение: clip(top right bottom left), где top и left задают начальную координату видимости, а right и bottom, соответственно, конечную координату. Например, в приведенном примере будет отображена область (100x100) с координатами (0,0) и (100,100). Если нам, к примеру, потребуется сместить видимый квадрат вниз на 20px, то для правильной работы нужно будет менять два значения: для «top» (20px) и для «bottom» (bottom + 20px).
• content: строка | counter(id-счетчика) | url(адрес-картинки) | attr(значение-аттрибута) | итд. - очень полезное и удобное свойство, которое к сожалению, пока, браузеры поддерживают плохо и не в соответствии со спецификацией CSS 3. Например IE 6,7 его вообще не понимают. Остальные браузеры (большинство) поддерживают его только при наличии псевдо-класса :after или :before при создании описании CSS-стилей для элемента, итд. «Подводные камни» при использовании этого свойства, чтобы выжать максимальную из него пользу, еще сулят много преград, ибо.