Границы:
Позволяют использовать сокращенную запись.
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. Экономия небольшая, но всё же