Свойство 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.

Селектор id

 

Данный селектор применяется, если необходимо выделить один единственный элемент, уникальный, отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:

html- часть:

<Н1 id="firstheader" > Первый заголовок на странице </Н1>

css - часть:

#firstheader { color: red; font-weight: bold; text-align: center }

 

Как видите, в html-части вместо атрибута class употребляется атрибут ID, а в CSS - вместо точки употребляется знак #.

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

 

Допустим, у нас есть страница с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом (strong) слова. В случае необходимости сделать так, чтобы слова, в параграфе, которые выделены жирным, стали зеленого цвета, необходимо записать следующее выражение:

p strong {color:green }

 

Т.е. в начале P затем пробел, затем STRONG, а уже потом стиль. Читается эта строчка примерно так: Если внутри элемента P имеется элемент STRONG, то элементу strong присвоить стиль зеленого цвета.

А ниже приведена конструкция для ячейки таблицы.

 

td p strong {color:red;}