Введение в CSS

так:

 

100

sample text - 200

sample text - 300

sample text - 400

sample text - 500

sample text - 600

sample text - 700

sample text - 800

sample text - bold

sample text - bolder

sample text - lighter

sample text - normal

 

Font-Size

 

Размер шрифта. Может

указываться аж в четырех 

вариантах - собственно пунктов 

высоты, процентов 

относительно высоты элемента

HTML по умолчанию, уменьшения-

увеличения размера 

относительно этого же

дефолтного размера и 

именованного размера. И опять,

использование именованного

размера является скорее всего 

наиболее предпочтительным из

всех этих вариантов. И по той  же

причине - проблемам 

совместимости. На самом деле, у 

пользователя может стоять

разрешение 1600 на 1200, при 

этом шрифт размера 9,

выглядящий у Вас (на экране 17"

с разрешением 1024x768) очень 

даже крупно, будет у этого 

разнесчастного обладателя

мощного монитора выглядеть,

мягко говоря, мелко. Таким 

образом имеем обозначения:

 

xx-small,x-

small,small,medium,large,x-

large,xx-large

b { font-size:xx-large }

 

Нотация сильно смахивает на

набор одежды для всех весовых 

категорий, от сверхлайтов до

супертяжей, ну да и пусть.

Правда, по точности размеров на

разных браузерах ситуация

сравнима с замечательными

размерами изделий китайских 

рукотворных швейных 

мастерских. Может подойти 

любой - от S до XXL. Ну, я 

отвлекся. Так вот. Другие

варианты

 

h2 {font-size: 150%} /* заголовок 

в полтора раза выше

стандартного размера */ div {font-

size: smaller} /* раздел чуть

меньше */ div {font-size: larger} /*

раздел чуть больше */ li {font-

size:12px} /* элемент списка 

ровно в 12 пикселей */ p {font-

size:5ex} /* параграф размером 

ровно 5 ёкселей ;) */

 

Пару слов о "ёкселях". Это такой

размер, где каждый юнит -

высота буквы 'x'. Подробнее о 

размерах будет рассказано

позднее, будут приведены все 

возможные примеры 

разнообразных размеров. А пока -

как выглядит параграф высотой в 

пять этих самых exелей.

 

Просто параграф...

 

Как видно, один ёксель - не так 

уж и мало. По сравнению с 

пикселем.

 

Настало время нашим изысканиям

подвести итог. Рассмотрим

последний атрибут и - спать.

 

Font

 

Самый что ни на есть общий 

шрифтовый атрибут. В него (как 

и в почти все другие

классифицируемые свойства

CSS) разработчики ухитрились 

впихнуть все 

вышерассмотренное. Выглядят

же эти  сельди в бочке так:

 

/* font: [ font-style | font-variant |

font-weight | font-size font-family]

*/

 

span {font: italic small-caps bold x-

small "Arial Narrow" arial sans-serif} i

b {font: normal; font-style:normal}

div {font: oblique normal bold}

 

Первый  пример: font: italic small-

caps bold x-small "Arial Narrow" Arial

sans-serif

Второй  пример

 

Любое из свойств  в данном

случае указывать необязательно.

Главное - соблюдать порядок. В 

случае неоднозначности 

(например normal для наклона и 

normal для веса) лучше 

использовать отдельные 

описание. Надежнее так.

Надежнее, чем с двумя 

китайскими парашютами прыгать.

 

 

Предыдущий Шаг | Следующий

Шаг | Оглавление

Автор Аванесов Самвел.

 

 

 

Шаг 4 - Форматирование

текста

 

 

Это набор атрибутов, связанный 

с выравниванием, отступом,

расстоянием между словами,

символами и т.д. В общем, меню

Формат-Абзац MS Word. Ну что,

начнем по порядку.

 

Text-Align

 

Определяет выравнивание

текста. Существует четыре типа

- по левому краю (left), по 

правому (right), по центру

(center) и заполнение (justify).

Justify означает, что текст 

будет равномерно заполняет 

доступное пространство по

ширине. Было время, когда эту

опцию не поддерживали

некоторые браузеры, но

современные их версии на счет

этого типа выравнивания

никаких претензий не

высказывают.

 

body {text-align: justify } p {text-

align:left }

 

Text-Indent

 

Позволяет менять отступ первой

строки элементов типа <p>,

<div>. Может задаваться как  в 

числовом выражении, так и в 

процентах. В данном случае

проценты высчитываются от

ширины элемента, содержащего 

данный.

 

span {text-align: right; text-

indent:10ex};

 

Calculation is done with `BIGINT' or

`DOUBLE' (both are normally 64

bits long). It depends on the

function which precision one gets.

The general rule is that bit functions

are done with `BIGINT' precision,

`IF', and `ELT()' with `BIGINT' or

`DOUBLE' precision and the rest

with `DOUBLE' precision. One

should try to avoid using unsigned

long long values if they resolve to be

bigger than 63 bits (

9223372036854775807) for

anything else than bit fields. MySQL

Server 4.0 has better `BIGINT'

handling than 3.23.

 

Line-Height

 

Определяет расстояние между

базовыми строками текста. При 

использовании числа (не ex и px,

а обычных чисел) расстояние

вычисляется как произведение

высоты шрифта на данное

значение. При использовании 

процентных мер высота строки

берется как приведенный

процент от исходной строки.

 

p {line-height:2; font-style:italic;

margin-left:20%; text-indent: 20px}

 

`mysqld_safe' redirects all messages

from `mysqld' to the `mysqld' log.

One problem with this is that if you

execute `mysqladmin refresh' to

close and reopen the log, `stdout'

and `stderr' are still redirected to

the old log. If you use `--log'

extensively, you should edit

`mysqld_safe' to log to

`'hostname'.err' instead of

`'hostname'.log' so you can easily

reclaim the space for the old log by

deleting the old one and executing

`mysqladmin refresh'.

 

Vertical-Align

 

Контролирует вертикальное

линейных (inline) элементов,

таких как <em>, <b>. Линейным

элемент считается тогда, когда 

до и после него не добавляется 

никаких знаков переноса строки,

то есть не создается новый 

абзац, в противоположность 

блочным элементам, для 

которых новый абзац создается.

Так вот. Линейные элемент по

умолчанию выравнивается по

базовой строке внешнего (то

бишь содержащего данный)

элемента. Ну почему бы это не

изменить? А? Сказано - сделано.

 

Внешний Текст vertical-align:top

Внешний Текст vertical-

align:bottom

Внешний Текст vertical-align:middle

Внешний Текст vertical-align:sub

Внешний Текст vertical-align:super

Внешний Текст vertical-align:text-

top

Внешний Текст vertical-align:text-

bottom

 

По умолчанию vertical-align имеет

значение baseline. Другие

значения означают

соответственно:

 

top- выравнивает верх элемента 

по самому высокому элементу

родителя

bottom- выравнивает низы 

элементов

middle- середины

sub- элемент выводится, как 

нижний индекс (субскрипт)

super- элемент выводится как 

верхний индекс (суперскрипт)

text-top- сравнивает верхнюю 

границу элемента с верхней 

линией шрифта родителя

text-bottom- то же самое для 

нижней линии

 

Кроме вышеперечисленных, этот

атрибут CSS может принимать 

также и процентное значение. В 

этом случае элемент 

поднимается (или опускается,

если значение отрицательно,

например -20%) над своей 

базовой линией. Процент берется 

от высоты линии (line-height

элемента).

 

Word-Spacing, Letter-Spacing

 

Оба этих атрибута обозначает

ровно то, что и должны -

расстояние между отдельными

словами и буквами. Могут 

принимать значение normal (то

есть без изменений) и любое 

числовое или процентное

значение. Выглядит все это так:

 

p {color:green; word-spacing:2em;

letter-spacing:0.5ex}

 

Ну или чуть менее страшно, все 

зависит от усердия.

 

Text-Decoration

 

Выделение (еще можно сказать 

украшение, но слишком уж

корявая калька получается)

текста. Под выделением здесь 

понимается - подчеркивание,

надчеркивание, перечеркивание,

мигание или отсутствие оных.

Выглядит оно так:

 

li {text-decoration:overline}

li {text-decoration:underline}

li {text-decoration:lin-through}

li {text-decoration:blink}

li {text-decoration:none}

 

Мигать на IE текст отказывается,

во всяком случае на версии 6.0.

На Опере же мигает исправно,

раз в секунду. В любом случае я 

не думаю, что использование 

такого выделения является

большой дизайнерской находкой,

а отсутствие - потерей.

 

Text-Transformation

 

Текст можно преобразовывать -

приводить все его буквы к 

заглавному виду, или все к 

строчному, или делать

прописной первую букву 

каждого слово. Отбросив как 

всегда неуместный вопрос

"зачем?", делаем:

 

capitalize

uppercase

lowercase

none

 

 

Предыдущий Шаг | Следующий

Шаг | Оглавление

Автор Аванесов Самвел.

 

 

 

Шаг 5 - Цвета и фон

 

 

Color

 

Определяет цвет элемента. Под 

цветом в данном случае

подразумевается цвет текста

этого элемента. Если же нужно 

определить цвет элемента как 

блока (то есть фон), следует

пользоваться свойством 

Background-Color.

 

a { color: yellow } p { color: #

050505 } b { color: #AAA } input {

color: rgb(245,135,75) } textarea {

color: rgb(10%,30%,50%) }

 

Как всегда, впечатляет

многообразие способов

выражения мысли в CSS. Цвет

можно задавать напрямую как 

RGB значение, или же 

посредством именованной 

константы. Использовать

константы с одной стороны 

удобно, так как не нужно 

запоминать неудобоваримые

шестнадцатеричные числа, но с 

другой стороны не очень 

надежно, поскольку в принципе

задание константы на разных

системах и браузерах разное.

Нет, конечно же, red скорее всего 

будет везде 0xFF0000, но с 

другой стороны какой-нибудь

darkred или lightgreen уже не 

столь однозначен. Как видно,

имена можно наугад выбирать из

английских названий цветов,

добавляя к ним еще приставки 

dark и light, то бишь темный и 

яркий. Ну а с RGB так вообще

просто - числовые или 

процентные соотношения в свете 

красной, зеленой и голубой 

составляющей. На будущее -

цвет в CSS везде задается одним

из вышеприведенных способов.

 

Background-Color

 

Помимо обычных цветовых

значений свойство background-

color может принимать также 

значение transparent

(установленное по умолчанию).

В этом случае фон текста

элемента цвета собственного не

имеет, взамен используется

подложка элемента уровнем 

выше (если он есть).

 

a {background-color: darkgreen;

color: white } body {background-

color: #FFFFFF }

 

Background-Image

 

Задает фоновое изображение  для 

элемента. Выглядит это так:

 

body { background-image:

url("img/back.png") }

 

Изображение (само собой)

начинает грузиться после 

загрузки всего документа.

Поэтому для того, чтобы до

этого славного момента 

страница выглядела бы более-

менее культурно, рекомендуется 

задавать схожий (или хотя бы

подходящий по дизайну) цвет

фона с помощью background-

color. Форматы изображений, 

поддерживаемый браузерами -

GIF, PNG и JPEG отличаются друг 

от друга методами компрессии и 

областями применения. В 

анимации (там, где большая 

часть нарисована руками или

мышью) рекомендуется 

использовать GIF или PNG - за

счет лучшего соотношения 

сжатие/потеря качества по

отношению к JPEG.

 

Вообще говоря, выражение 

потеря качества к форматам GIF

и PNG вообще неприменима -

можно сказать, потеря цвета или 

цветовой палитры, поскольку

собственно изображение при 

сжатии не меняется,

преобразуется лишь его цветовая

составляющая. Однако для 

фотографий, детализованных 3D-

изображений и всего подобного 

лучше подходит JPEG, поскольку 

подмена цветовой палитры в 

таких изображениях неизбежно

приведет к весьма заметной

потере качества, а JPEG же

использует довольно

своебразный алгоритм сжатия,

при котором изображение 

разбивается на цветовой и альфа 

(черно-белый канал), и 

проводящей их раздельное

преобразование. Не вдаваясь в

подробности, можно сказать, что 

при этом происходит весьма

значительное сжатие

изображение, приводящее к 

некоторым искажениям,

называемым артефактами. Для 

фотографий при нежесткой 

степени компрессии такие 

артефакты не очень заметны в

отличие от, скажем, скриншотов.

 

Background-Repeat

 

Позволяет установить

заполнение (мощение) фоновым 

изображением. Очень полезное

свойство, позволяющее 

маленьким изображением создать 

оригинальный фон страницы или 

элемента. Заполняться можно по

вертикали (repeat-y), по

горизонтали (repeat-x), в обеих 

направлениях (repeat) или не

заполняться вообще (no-repeat).

 

body { background-image:

url("img/tile.png"); background-

repeat: repeat }

 

Background-Attachment

 

Таковое вот длинное название

для определения своства

прокрутки фонового

изображения. Оно может быть

фиксированным (fixed) или 

двигаться вместе с документом

(scroll).

 

body {background-image:

url("img/sexy/girl/foto.png");

background-repeat: no-repeat;

background-attachment: scroll }

 

Baackground-Position

 

Определяет за место начального

заполнения или просто

расположение фонового

изображения. Может задаваться

весьма разнообразно. Просто

приведу примеры

 

top left = left top = 0% 0%

top = top center = center top = 50

% 0%

right top = top right = 100% 0%

left = left center = center left = 0%

50%

center = center center = 50% 50%

right = right center = center right =

100% 50%

bottom left = left bottom = 0%

100%

bottom = bottom center = center

bottom = 50% 100%

bottom right = right bottom = 100

% 100%

 

Это способ задания положения 

ключевыми словами или 

процентыми отступами (вначале 

отступ по X, затем по Y). В одной 

строке указаны альтернативные

варианты указания

расположения. Помимо этого,

можно использовать отступы в 

единицах (пикселях, ёкселях и

иже с ними):

 

5px 10px

10em 2em