11.07.2012

Теория по CSS


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


Шрифт

font-size -  размер шрифта (font-size: размер шрифта в пикселях (px), в процентах (%) и т. д.)

font-family – шрифт для элемента (font-family: имя_шрифта)

font-weight – толщина шрифта (font-weight: bold или normal и т. п.)

font-style – стиль шрифта (font-style: normal (нормальный) или italic (курсив) и т. п.)

font – объединение всех свойств для шрифта (font: стиль_шрифта (необязательно) размер семейство)

Размер

width – ширина элемента (width: значение в пикселях, процентах и т.п.)

height – высота элемента (аналогично width)

max-width – максимальная ширина элемента (по аналогии)

min-width – минимальная ширина элемента (так же как и width)

max-height – максимальная высота элемента;

min-height – минимальная высота;

Свойства текста

text-align – горизонтальное выравнивание (text-align: по центру (center) или по ширине (justify) или по левому краю (left) и т. д.)

vertical-align – вертикальное выравнивание;

line-height – высота строки (line-height: в пикселях (px), в процентах (%) и т.д.) Также можете использовать множитель: например, значение 1.5 означает полуторный интервал между строками:

color – цвет текста (color: цвет). Цвета могут задавать по-разному:

используя название (red, green, white и т.д.);
по шестнадцатеричному значению, перед кодом не забудьте ставить символ решетки.

letter-spacing – увеличение / уменьшение расстояния между буквами (letter-spacing: значение (в пикселях и т.п.) | normal – нормальный интервал):

text-transform – выбор написания слова заглавными/строчными буквами (text-transform: lowercase (все буквы будут строчными) | uppercase (все символы будут заглавными)


Фон

background – фон страницы (background: [background-attachment || background-color || background-image || background-position || background-repeat], ни одно свойство не обязательное, поэтому можно использовать лишь то, что необходимо):

background-position – стартовая позиция фона страницы (background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение]):

background-color – цвет фона (background-color: цвет);

background-attachment – фон страницы фиксированное или прокручивается вместе с “ползунком” (background-attachment: fixed | scroll)

background-image – изображение фона (background-image: url (путь к файлу)):

background-repeat – повторение фонового изображения (background-repeat: no-repeat | repeat | repeat-x | repeat-y )


Позиции

float — определение выравнивания объекта (float: left | right)

float: left;
Выше приведен пример обтекания по правому краю.

visibility – возможность сделать любой объект видимым или невидимым (visibility: visible | hidden):

Границы

border – рамка (граница) элемента (толщина стиль цвет_рамки):

solid – сплошная рамка

dotted – точечная

dashed – пунктирная

Остальные виды рамок, которые перечислены ниже, работают аналогичным способом.

border-top – верхняя рамка

border-right – правая рамка

border-bottom – нижняя рамка

border-left – левая рамка

Отступы

margin – величина отступа (сверху, справа, снизу и слева соответственно);

margin-top – верхний отступ;

margin-right – правый отступ;

margin-bottom – нижний отступ;

margin-left – левый отступ;

Поля

padding – свойства поля (сверху, справа, снизу и слева соответственно);

padding-top – верхнее поле

padding-right – правое поле

padding-bottom – нижнее поле

padding-left – левое поле

Псевдоклассы

:hover – стиль объекта при наведении мышкой (элемент:hover { ... })

:visited – стиль посещенной ссылки (A:visited { ... })


Комментариев нет:

Отправить комментарий