CSS словарь.
Постоянно пополняющийся справочник по основным свойствам CSS и всему, что с ними связано.
Курсивом выделены значения по умолчанию.
Красным выделены примеры.
Общее:
- селектор—любой элемент, определяемый при помощи css: тег (body), класс (.class1), ID (#mainlogo).
- декларация—совокупность свйоств и значений селектора; все, что находится внутри фигурных скобок ({})
- свойство—отдельный параметр, определяющий какое-либо свойство селектора (извините за тавтологию =] ).
Единицы измерения:
- in—Дюймы
- pt—Пункты (типографические)
- px—Пикселы
- cm—Сантиметры
- pc—Пика
- em—Высота кегльной площадки шрифта (или длина тире «—»)
- mm—Миллиметры
- ex—Высота строчной буквы «x» в шрифте
- %—Проценты
Если величина равна нулю, единицы измерения можно не задавать.
Свойства шрифта:
Позволяют использовать сокращенную запись.
- font-family—название шрифта или семейства шрифтов.
body{font-family: "Times New Roman", sans-serif;}
Если имя шрифта содержит пробелы, его следует заключать в кавычки.
- font-style—стиль начертания шрифта: normal—обычный шрифт, italic—курсив, oblique—наклонный.
body {font-style: italic;}
- font-variant—варианты начертания шрифта: normal—обычный, small-caps—«маленькие прописные»
body {font-variant: small-caps;}
- font-weight—«жирность шрифта»: normal—обычный, bold—полужирный, bolder—толще окружающего текст, lighter—тоньше окружающего текста.
body {font-weight: bolder;}
- font-size—размер шрифта, задаётся в любых единицах.
body {font-size: 150px;}
Свойства текста:
- text-decoration—эффекты оформления текста: none—нет эффектов, underline—подчеркивание, line-through—зачеркивание, overline—надчеркивание.
a:visited {text-decoration: line-through;}
- text-transform—трансформации текста: none—без изменений, capitalize—первая буква каждого слова становится заглавной, uppercase—все буквы заглавные, lowercase—все буквы прописные.
a {text-transform: uppercase;}
- text-align—выравнивание текста: left—по левому краю, center—по центру (аналогично тегу <center>), right—по правому краю, justify—по ширине колонки.
h1 {text-align: center;}
- text-indent—задает величину отступа красной строки текста, измеряется в любых единицах.
p {text-indent: 0.5em;}
- line-height—высота строки, задается в любых единицах.
p {line-height: 150%;}
- word-spacing—расстояние между словами в тексте, измеряется в любых единицах, можно использовать отрицательные значения.
p {word-spacing: -1em;}
- letter-spacing—интервалы между буквами, измеряется в любых единицах.
a {letter-spacing: 30px;}
Цвет и фон:
Позволяют использовать сокращенную запись.
- color—цвет элемента.
p {color: #DDFFEE;}
- background-color—цвет фона элемента.
p {background-color: #F7F7F7;}
- background-image—фоновое изображение: none—нет фонового изображения, url(http://adress.com/img.jpg)—абсолютный или относительный путь до изображения.
p {background-image: url(http://adress.com/img.jpg);}
- background-attachment—поведение фонового изображения: scroll—прокручивается вместе со страницей, fixed—не прокручивается.
body {background-attachment: fixed;}
- background-position—позиция фона относительно окна браузера, задаётся в любых величинах или при помощи ключевых слов: top, center, bottom, left, center, right.
body {background-position: center left;}
- background-repeat—повторение фонового рисунка: repeat—фон повторяетяс как обычно—мозаикой, repeat-x—повтор идет вдоль оси x, repeat-y—вдоль оси y, no-repeat—фон не повторяется.
body {background-repeat: repeat-x;}
Границы:
Позволяют использовать сокращенную запись.
- border-width—толщина линий рамки, измеряется в любых единицах или при помощи ключевых слов: thin—тонкая, medium—средняя, thick— толстая.
- border-color—цвет рамки.
- border-style—тип линий рамки: none—рамка отсутствует, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset—описать их трудно, поэтому советую просто поэксперементировать.
- border-collapse—тип отрисовки границ: separate, collapse—различие состоит в том, что если промежутки между ячейками не заданы, в первом случае границы между ячейками будут удваиваться, а во втором—нет.
Отдельно от остальных может использоваться только border-collapse, остальные должны быть все вместе.
Отступы:
Позволяют использовать сокращенную запись.
- margin—внешний отступ элемента, расстояние от границы элемента до следующего элемента, просвечивает через себя фон родительского элемента, измеряется любыми единицами.
p {margin: 1em;} = p {margin-left: 1em; margin-top: 1em; margin-right: 1em; margin-bottom: 1em;}
- padding—внутренний отступ, расстояние от содержимого элемента до его границы, покрыт фоном элемента, измеряется любыми единицами.
p {padding: 5px;} = p {padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px;}
Естественно, значения left, top, right и bottom для отступов могут не совпадать между собой:
body {padding-top: 1em; padding-right: 30px; padding-bottom: 40pt; padding-left: 10ex;}
Размеры:
- width—ширина элемента, задается всеми единицами, если не задана—подбирается автоматически.
p {width: 500px;}
- height—высота элемента, задается всеми единицами, кроме процентов, если не задана—подбирается автоматически.
td {height: 100px}
Псевдо-элементы:
- :first-letter—стиль для первой буквы элемента.
p:first-letter {color: #FF0000; font-size: 150%;}
- :first-line—стиль первой строки.
p:first-line {color: #00FF00;}
- :hover—стиль для элемента, на который наведена мышь.
p:hover {background-color: #FF0000; color: #FFFFFF;}
- :active—на элементе нажата и еще не отпущена мышь.
a:active{background-color: #FFFFFF; color: #FF0000;}
- :visited—стиль для посещенной ссылки.
a:visited {text-decoration: line-through; color: #EEEEEE;}
- :link—стиль для еще не посещенной ссылки
a:link {color: #0000FF; text-decoration: underline;}
IE воспринимает :hover и :active, только для ссылок.
Позиционирование:
- position—способ позиционирование элемента: static—объект располагается как обычно, absolute—координаты отсчитываются от страницы, relative—отсчет идет от места, на котором должен стоять объект, fixed—отсчет идет как в absolute, но при прокручивании объект остается на месте, а не двигается со страницей. Если не задано—позиционируется как обычно.
- top, left, right, bottom—свойства, задающие координаты спозиционированного объекта, требуют задания position.
#logo {position: absolute; top: 0; left: 10%;}
Сокращенные записи:
- в случае, если свойство может применятся по-разному к различным сторонам (padding, margin), то вместо того, чтобы писать значения для каждой стороны, можно воспользоватся краткой записью. Возьмем один из старых примеров:
body {padding-top: 1em; padding-right: 30px; padding-bottom: 40pt; padding-left: 10ex;} = body {padding: 1em 30px 40pt 10ex;}.
Поясню: когда мы записываем значения в кратком виде, мы сначала указываем общее навзание свойства (padding), затем указываем значения в порядке top, right, bottom, left, обяательно укзаывая единицы измерения (кроме случаем, когда значение равно нулю).
Чтобы лечге было запомнить, можно использовать слово TRouBLed—мне помогло.
- так же краткую запись можно использовать для определения свойств шрифта, границ и фона. Поясню на примерах:
body {font: bold 30px} выдаст нам полужирный 30-ти пиксельный шрифт, а
h1 {font: italic bold 150%;} —полужирный курсивный заголовок с размером шрифта 150% от обычного. Единственное, что следует учесть—font-face лучше указывать отдельно, так как в краткой записи не всегда он воспринимается корректно.
Ситуация с фоном аналогична ситуации со шрифтами—просто собираете все значения под одно общее свойство—background.
Что касается границ, то здесь неколько иначе. Если нужно задать одинаковую рамку для всех границ, то можно поступить так же как и со шрифтами, но в случае необходимости задать разные границы для каждой стороны, придется указывать их отдельно, например
p {border: 1px solid #F0F0F0;} даст нам серую однопиксельную рамку со всех сторон абзаца.
p {border-left: 1px solid #FF0000; border-right: 3px solid #00FF00; border-top: 2px solid #F0F0F0; border-bottom: none;} в свою очередь, даст нам разноцветную границу сверху и по сторонам, но снизу границы не будет.
- краткая запись так же может применятся к цветам—если это «чистый» цвет из палитры безопасных цветов, можно, к примеру, вместо #CC66FF писать просто #C6F. Экономия небольшая, но всё же.
скачать css словарь
