Свойство text-indent

Это свойство служит для создания отступов первой строки, другими словами абзацев. Значение лучше задавать в пикселях, это будет более практично и универсальнее.

p { text-indent: 40px; }

Однако можно задать и в процентах от общей длины базовой строки (строки без отступа)

p { text-indent: 20%;}

Свойство text-transform

C помощью этого свойства, можно видоизменять текст, а именно менять большие буквы на маленькие или наоборот. Может принимать такие значения:

capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"панфилов родион генадиевич" станет "Панфилов Родион Генадиевич". Это может пригодиться не только для ФИО, но и целых предложений.

uppercase - переводит все буквы в заглавные. Например: "текст в css" станет "ТЕКСТ В CSS".

lowercase - переводит все буквы в прописные. Например: "TRANSFORM" станет "transform".

none - не производит смены регистра; это значение используется по умолчанию.

Если, данный параметр не указан, то значение примет вид none.

Свойство letter-spacing

C помощью этого свойства можно изменять расстояние между буквами. Значение лучше всего указывать в пикселях.

h1 { letter-spacing: 10px;}

p{ letter-spacing :4px; }

В примере выше для заголовков установлен интервал между буквами в 10px, а для параграфов в 4px;

Свойство WORD-SPACING

Позволяет изменять расстояние между словами. Значение также лучше задавать в пикселях.

h1 { word-spacing: 20px;}

p{ word-spacing :10px; }

Оформление ссылок в css

A:link { ... стиль оформления обычной ссылки... }

A:active { ... стиль оформления ссылки в момент нажатия... }

A:visited { ... стиль оформления посещенной ссылки... }

А:hover { ... стиль оформления ссылки, на которую наведен указатель мыши ... }

a:link { color: blue; }

a:visited { color:gray; }

a:hover { color:red; text-decoration:none; }

a:active { color:green; text-decoration:none; }

В примере выше text-decoration обозначает отсутствие подчеркивания.

Кроме того, оформление ссылок не сводится только к указанию цвета ссылок и подчеркнутости, также там может присутствовать наличие или отсутствие жирности, курсива, выделение цветом и т.д.

Типы селекторов в css

Селектор служит для того, чтобы однозначно определить элемент в HTML документе, к которому мы хотим применить тот или иной стиль CSS .

Существуют следующие виды селекторов.

Селектор по элементу;

Селектор по классу;

Селектор по id;

Контекcтный селектор.

Селектор по элементу

В качестве селектора может быть использовано непосредственно имя HTML элемента (ID или класс), к которому мы хотели применить данный стиль. Т.е., написав, класс например для элемента параграф (Р), все параграфы на странице приобретут стиль данного класса.

P {

font-size: 12px;

color: #ffffff;

}

В случае, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем необходимо применять селектор по классу.

Селектор по классу

Класс в стилевом файле обозначается знаком «.», т.е. сначала ставится точка, затем сразу, без пробела, указывается имя класса, и затем в фигурных скобках стиль. Например:

.green {

font-size: 12px; color:green;

}

Для того, чтобы применить данный стиль к определенному параграфу в документе, необходимо записать следующее:

<P class ="green"> ... текст параграфа ... </P>

Указывается сначала базовый стиль для всех параграфов (селектор по элементу), создается для него специальный стиль (селектор по классу) и присваивается этому параграфу. Соответственно, классы отличаются по оформлению блоков.

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

Чтобы класс действовал только на определенный элемент (например параграф) нужно указать название элемента перед точкой:

P.green {color:green;}

Теперь класс green не будет действовать ни на что другое, кроме элемента P.