| font-family | шрифт текста |
|---|---|
| Arial, Lucida, Impact, "Times New Roman", Courier New, Tahoma, Comic Sans, Verdana, Georgia, Garamond | наименование шрифта, либо набора шрифтов |
| Можно задать через запятую несколько шрифтов и если на компьютере пользователя
отсутствует какой либо из шрифтов, то будет выбран следующий указанный шрифт. Шрифты в именах которых
есть пробелы, указываются в кавычках(""). Название семейства шрифтов всегда указывается без ковычек.
Если на компьютере отсутствует указанный шрифт, то будет выбран шрифт браузера по умолчанию. Шрифты по умолчанию присутствующие в следующих ОС: Windows: Arial, Lucida, Impact, Times New Roman, Courier New, Tahoma, Comic Sans, Verdana, Georgia, Garamond Mac: Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans, Geneva, Baskerville, Andale Mono | |
| font-size | размер шрифта |
| px | пикселы |
| pt | пункты составляют 1/72 часть дюйма |
| in | дюймы |
| cm | сантиметры |
| mm | миллиметры |
| pc | пики составляют шестую часть дюйма |
| em | относительная единица измерения, соответствует размеру шрифта, используемому в системе (браузере)пользователя,
или размеру шрифта родительского элемента, если он отличается от используемого пользователем (1em - 100% от шрифта по умолчанию, 0.9em - 90% от шрифта по умолчанию, 1.1em - 110% от шрифта по умолчанию) |
| ex | размер строчной буквы x шрифта браузера пользователя(1ex задается по аналогии с em) |
| % | проценты от размера шрифта браузера пользователя (100%, 55%, 120%) |
Пики и пункты рекомендуется применять только в документах предназначенных для печати, т. к. в документе для просмотра они могут отображать размер шрифта неправильно. Пикселы не позволяют менять пользователю размер шрифта в отличии от em, ex, %. | |
| Изменение размера шрифта с помощью ключевых слов: Задается посредством ключевых слов с абсолютными и относительными значениями. | |
| xx-small | меньше--- |
| x-small | меньше-- |
| small | меньше- |
| medium | соответствует размеру шрифта, используемому в браузере пользователя |
| large | больше+ |
| x-large | больше++ |
| xx-large | больше+++ |
Ключевые слова можно использовать для задания размеров шрифта относительно друг друга: p {font-size: medium;} em {font-size: larger;} текст параграфа текст em текст параграфа В данном случае текст выделенный em будет увеличен относительно текста параграфа к которому применено свойство medium. Позволяют пользователю менять размеры шрифта. | |
| color | цвет шрифта |
| red | представление ключевыми словами. |
| #ff000 | представление в виде трёх пар шестнадцатеричных цифр. |
| opacity | прозрачность |
| значение от 0 до 1 | 0.5 |
| font-weight | толщина шрифта |
| normal | значение по умолчанию 400 |
| bold | полужирное начертание |
| bolder | жирное начертание |
| lighter | светлое начертание |
| Толщина задается от 100 до 700 с шагом 100 | |
| font-style | толщина шрифта |
| normal | обычный |
| italic | курсивный |
| oblique | похожий на курсив |
| inherit | наследовать родительский стиль |
| text-decoration | украшение шрифта |
| none | без украшений |
| underline | подчеркивание |
| line-through | надчеркивание |
| blink | зачеркивание |
| inherit | мерцающий текст |
| font-variant | вид строчных букв шрифта |
| normal | обычный стиль |
| small-caps | прописаны |
| inherit | наследовать родительский стиль |
| text-transform | начертание шрифта |
| capitalize | преобразовать к верхнему регистру первую букву каждого слова |
| uppercase | преобразовать текст к верхнему регистру |
| lowercase | преобразовать текст к нижнему регистру |
| none | ничего |
| inherit | наследование |
| text-transform | задает высоту строки текста |
| capitalize | преобразовать к верхнему регистру первую букву каждого слова |
| uppercase | преобразовать текст к верхнему регистру |
| lowercase | преобразовать текст к нижнему регистру |
| none | ничего |
| inherit | наследование |
| line-height | начертание шрифта |
| normal | стиль по умолчанию |
| значение | См. таблицу. При отсутствии указания единицы измерения, заданное значение умножается на величину текщего шрифт |
| inherit | наследование |
| white-space | позволяет изменить регистр символов текста |
| normal | последовательности пробелов преобразуются в один пробел, переводы строк преобразуются в пробел. Web-обозреватель сам разбивает текст на строки, чтобы вместить его в свое окно по ширине. Вывод текста блочных элементов в соответствии с правилами по умолчанию. |
| pre | последовательности пробелов и переводы строк сохраняются, текст выводится в таком виде, как записан в html коде. web- обозреватель не разрывает текст на строки. |
| nowrap | последовательности пробелов преобразуются в один пробел, переводы строк преобразуются в пробелы. Web- обозреватель сам не разрывает текст на строки. |
| pre-wrap | последовательность пробелов и переводы строк сохраняются. Web-обозреватель может разрывать слишком длинные строки, дабы избежать прокрутки. |
| pre-line | последовательность пробелов преобразуется в один пробел, переводы строк сохраняются. Web-обозреватель может разрывать слишком длинные строки. |
| inherit | наследование |
| vertical-align | вертикальное выравнивание текста |
| baseline | задает выравнивание базовой линии текста по базовой линии текста родительского элемента. значение по умолчанию. |
| sub | выравнивает базовую линию фрагмента текста по базовой линии нижнего индекса родительского элемента |
| super | выравнивает базовую линию фрагмента текста по базовой линии верхнего индекса родительского элемента |
| top | выравнивает верхний край фрагмента текста по верхнему краю родительского элемента |
| text-top | выравнивает верхний край фрагмента текста по верхнему краю текста родительского элемента |
| middle | выравнивание центра фрагмента текста по центру родительского элемента |
| bottom | выравнивает нижний край фрагмента текста по нижнему краю родительского элемента |
| text-bottom | выравнивает нижний край фрагмента текста по нижнему краю текста родительского элемента |
| text-shadow | задает тень текста |
| text-shadow: | цвет | горизонтальное | смещение | вертикальное | смещение размытие text-shadow: black 0px 0px 10px |
| background-color | задает цвет фона |
| transparent | убирает фон web-страницы |
| цвет | выбор цвета (background-color:red) |
| inherit | наследование |
| background-image | задает фон в виде изображения |
| none | убирает фон web-страницы |
| ссылка на изображение | url("/image.jpg") |
| inherit | наследование |
| background-repeat | задает способ вывода фонового изображения |
| no-repeat | убирает повторение web-страницы |
| repeat | повторяется по горизонтали и вертикали |
| repeat-x | повторяется по горизонтали |
| repeat-y | повторяется по вертикали |
| background-position | позиционирует фоновое изображение |
| left | по левому краю |
| centr | по центру |
| right | по правому краю |
| top | верх |
| buttom | низ |
| числовое значение | x y |
| background-attachment | перемещение фонового изображения |
| scroll | прокручивание фона вместе с содержимым |
| fixed | фиксация изображения |
| text-align | горизонтальное выравнивание текста |
| left | по левому краю |
| center | по центру |
| right | по правому краю |
| justify | верх |
| inherit | полное выравнивание |
| text-indent | создать отступ для первой строки каждого абзаца |
| text-indent:5mm | табл |
| list-style-type | задает вид нумерации или маркеров у списков |
| disc | маркер в виде черного кружка |
| circle | маркер в виде светлого кружка |
| square | маркер в виде квадрата (может быть как светлым, так и темным) |
| decimal | нумерация арабскими цифрами |
| decimal-leading-zero | нумерация арабскими цифрами от 01 до 99 с начальным нулем |
| lower-roman | нумерация маленькими римскими цифрами |
| upper-roman | нумерация большими рамками цифрами |
| lower-greek | нумерация маленькими греческими буквами |
| lower-alpha и lower-latin | нумерация маленькими латинскими буквами |
| upper-alpha и upper-latin | нумерация большими латинскими буквами |
| armenian | нумерация армянскими цифрами |
| georgian | нумерация грузинскими цифрами |
| none | отсутствие нумерации |
| list-style-image | задает вид нумерации в виде указанного изображения |
| none | нет |
| url | адрес list-style-image: url(bullet.gif); |
| inherit | наследование |
| list-style-position | указывает местоположение маркера или нумерации в пункте списка |
| inside | маркер |
| outside | маркер в виде светлого кружка |
| inherit | маркер в виде квадрата (может быть как светлым, так и темным) |
| visibility | указывает ,будет ли элемент отображаться на странице |
| visible | элемент отображается на веб странице |
| hidden | элемент не отображается на веб-странице, однако под него отводится место. |
| collapse | элемент не отображается, под него не отводится место, возможно работает не во всех браузерах и не со всеми элементами |
| display | позволяет задать тип элемента:блочный, встроенный, пункт списка |
| none | элемент не отображается на веб странице |
| inline | встроенный элемент |
| block | блочный элемент |
| inline-block | блочный элемент, который будет обтекаться другими блоками |
| list-item | пункт списка |
| run-in | встраивающийся элемент. Если за таким элементом следует блочный элемент, то он становится частью этого элемента |
| table | таблица |
| inline-table | таблица оформленная как встроенный элемент |
| table-caption | заголовок таблицы |
| table-colum | столбец таблицы |
| table-colum-group | группа столбцов таблицы |
| table-header-group | секция заголовка таблицы |
| table-row-group | секция тела таблицы |
| table-footer-group | секция завершения таблицы |
| table-row | строка таблицы |
| table-cell | ячейка таблицы |
| cursor | устанавливает вид курсора при наведение его на элемент |
| auto | веб обозреватель автоматически управляет курсором мыши |
| none | курсор мыши не отображается |
| help | стрелка с вопросительным знаком |
| pointer | указывающий перст |
| progress | стрелка с небольшими песочными часами |
| wait | песочные часы |
| text | текстовый курсор |
| developer.mozilla.org/en/CSS/cursor | больше атрибутов |
| задание высоты и ширины элемента | |
| width | ширина |
| height | высота |
| min-width | минимальная ширина, min-height - минимальная высота |
| max-width | максимальная ширина, max-height - максимальная высота |
| float | задает по какому краю родительского элемента будет выравниваться данный элемент |
| left | левый край |
| right | правый край |
| none | обычное поведение элемента |
| inherit | наследование |
| clear | позволяет расположить элемент ниже предыдущего |
| left | элемент должен расположиться ниже всех элементов у которых атрибут стиля float равен left |
| right | ниже float равен right |
| both | ниже float равен right, left |
| none | обычное поведение |
| установка высоты, ширины и поведения элемента при переполнении | |
| overflow | overflow |
| overflow-x | overflow |
| overflow-y | overflow |
| visible | высота контейнера увеличится, чтобы вместить содержимое (обычное поведение) |
| hidden | не помещающееся содержимое в контейнер будет обрезано |
| scroll | в контейнере появится полосы прокрутки, даже если в них нет нужды |
| auto | полосы прокрутки появятся при необходимости |
| внутренние отступы элемента | |
| padding | padding |
| padding-left | padding-left |
| padding-right | padding-right |
| padding-top | padding-top |
| padding-bottom | padding-bottom |
| отступы между ячейками | |
| border-spacing | задает отступы между ячейками |
| толщина рамки | |
| border-width | задает толщину рамки |
| border-left-width | толщина левой рамки |
| border-right-width | толщина правой рамки |
| border-top-width | толщина верхней рамки |
| border-bottom-width | толщина нижней ячейки |
| возможные значения: | |
| thin | тонкая |
| medium | средняя |
| thick | толстая |
| inherit | наследие |
| цвет рамки | |
| border-color | общий цвет рамки |
| border-left-color | цвет левой рамки |
| border-right-color | цвет правой рамки |
| border-top-color | цвет верхней рамки |
| border-bottom-color | цвет нижней рамки |
| transparent | задает прозрачный цвет, сквозь который будет просвечивать фон родительского элемента |
| стиль рамки | |
| border-style | общий стиль |
| border-left-style | стиль левой рамки |
| border-right-style | стиль правой рамки |
| border-top-style | стиль верхней рамки |
| border-bottom-style | стиль нижней рамки |
| возможные значения: | |
| none и hidden | рамка отсутствует |
| dotted | пунктирная линия |
| dashed | штриховая линия |
| solid | сплошная линия |
| double | двойная линия |
| groove | вдавленная трехмерная линия |
| ridge | выпуклая трехмерная линия |
| inset | трехмерная выпуклость |
| outset | трехмерное углубление |
| задать три параметра рамок: толщина, стиль, цвет | |
| border | для всей рамки |
| border-left | для левой рамки |
| border-right | для правой рамки |
| border-top | для верхней рамки |
| border-bottom | для нижней рамки |
| пример: td (border:20px solid black) ячейки таблицы будут обрамлены рамкой сплошной, черной рамкой толщиной 20px | |
| outline-width | задает выделение для рамки |
| thin | тонкая |
| medium | средняя |
| thick | толстая |
| inherit | наследие |
| outline-color - задает цвет для рамки | |
| thin | тонкая |
| medium | средняя |
| thick | толстая |
| inherit | наследие |
| outline-style, outline-left-style, outline-right-style, outline-top-style, outline-bottom-style - задает стиль выделений | |
| none и hidden | рамка отсутствует |
| dotten | пунктирная линия |
| dashed | штриховая линия |
| solid | сплошная линия |
| double | двойная линия |
| groove | вдавленная трехмерная линия |
| ridge | выпуклая трехмерная линия |
| inset | трехмерная выпуклость |
| outset | трехмерное углубление |
| outline:толщина стиль цвет - позволяет задать все три параметра для рамки выделения | |
| vertical-align - вертикальное выравнивание ячеек таблиц | |
| top | по верхнему краю краю |
| middle | по центру |
| bottom | по нижнему краю |
| table-layout - задает параметры растяжения ячеек при переполнении | |
| auto | автоматическая растяжка |
| fixed | фиксированный размер, доп параметры можно задать overflow |
| bottom | по нижнему краю |
| caption-side - указывает местоположение заголовка таблицы, относительно самой таблицы | |
| top | над таблицей |
| bottom | под таблицей |
| empty-cells - указывает как обозреватель будет выводить пустые ячейки | |
| show | пустые ячейки будут выводиться на экран |
| hide | пустые ячейки не будут выводиться на экран |