CSS в отдельном внешнем файле.

⇐ ПредыдущаяСтр 2 из 9Следующая ⇒

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

body {background-color: #c5ffa0}
a {color: #000060; font-weight: bold; }
a: hover {color: #ff0000; font-weight: bold; text-decoration: none}
h1 {color: #0000ff; font-size: 18px}
h2 {color: #ff00ff; font-size: 16px}
p {color: #600000; font-size: 14px}

О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css ).

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега < link> (связь). Тег < link> многоцелевой и служит для " связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег < link> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как < link> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами < head> < /head> и не выводится браузерами на экран.

Тег < link> имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

shortcut icon - Определяет, что подключаемый файл является иконкой.

stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.

application/rss+xml - Файл в формате XML для описания ленты новостей.

type - MIME тип данных подключаемого файла.

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

< link rel=" stylesheet" href=" mystyle.css" type=" text/css" >

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type=" text/css"

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

Пример:

Файл mystyle.css
body {background-color: #c5ffa0}
a {color: #000060; font-weight: bold; }
a: hover {color: #ff0000; font-weight: bold; text-decoration: none}
h1 {color: #0000ff; font-size: 18px}
h2 {color: #ff00ff; font-size: 16px}
p {color: #600000; font-size: 14px}

Файл index.html
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> каскадная таблица стилей< /title>
< link rel=" stylesheet" href=" mystyle.css" type=" text/css" >
< /head>
< body>
< h2> Меню: < /h2>
< a href=" index.html" > Всё о слонах.< /a>
< a href=" elephant.html" > Купить слона.< /a>
< a href=" elephant1.html" > Взять слона на прокат.< /a>
< hr>
< h1> Всё о слонах< /h1>
< p> На этом сайте Вы найдёте любую информацию о слонах.< /p>
< /body>
< /html>

Файл elephant.html
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> каскадная таблица стилей< /title>
< link rel=" stylesheet" href=" mystyle.css" type=" text/css" >
< /head>
< body>
< h2> Меню: < /h2>
< a href=" index.html" > Всё о слонах.< /a>
< a href=" elephant.html" > Купить слона.< /a>
< a href=" elephant1.html" > Взять слона на прокат.< /a>
< hr>
< h1> Купить слона< /h1>
< p> У нас Вы можете по выгодным ценам приобрести лучших слонов!! < /p>
< /body>
< /html>

Файл elephant1.html
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> каскадная таблица стилей< /title>
< link rel=" stylesheet" href=" mystyle.css" type=" text/css" >
< /head>
< body>
< h2> Меню: < /h2>
< a href=" index.html" > Всё о слонах.< /a>
< a href=" elephant.html" > Купить слона.< /a>
< a href=" elephant1.html" > Взять слона на прокат.< /a>
< hr>
< h1> Взять слона на прокат< /h1>
< p> Только у нас Вы можете взять любых слонов на прокат!! < /p>
< /body>
< /html>

В примере выше, " сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его " разгрузили" и сделали дизайн всего сайта " мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

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

Полезные советы:

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

Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.

Используйте тег < style> со стилевым описанием, в том случае, если страница должна иметь индивидуальный дизайн в корни отличный от других страниц сайта.

В большинстве случаев разумно выносить каскадную таблицу стилей в отдельный css файл.

Глава 2

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

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

Ну поехали..

Выравнивание текста.

Если Вы помните, из курса HTML, для того что бы выровнять текст, например по центру экрана, мы применяли к тегу содержащему в себе текст атрибут align (выравнивание) и одно из его возможных значений center (по центру)

Запись имела такой вид:

< p align=" center" > текст по центру< /p>

В CSS данную задачу берет на себя свойство text-align, которое выравнивает текстовое содержание относительно элемента родителя (например, блока div ) или же окна браузера.

text-align (так же как и htmlловский атрибут align ) имеет следующие значения:

left - Выровнять текст по левому краю элемента (по умолчанию).

right - Выровнять текст по правому краю.

center - Выровнять текст по центру.

justify - Выровнять текст по обоим краям.

Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:

< p style=" text-align: center" > текст по центру < /p>

- это в этом случае если мы, с помощью атрибута style, внедряем CSS непосредственно в HTML тег.

А вот в примере ниже используется тег < style> в заголовке документа:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Выравнивание текста< /title>
< style type=" text/css" >
h1 { text-align: center }
p { text-align: justify }
< /style>
< /head>
< body>
< h1> Всё о слонах< /h1>
< p> Слон - самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4, 2 метра, что на метр выше среднего Африканского слона.< /p>
< p> Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон - " животное, которое превосходит всех других в остроумии и интеллекте".< /p>
< /body>
< /html>

Оформление текста.

Свойство text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста.

Возможные значения:

blink - Текст будет мигать.

line-through - Делает текст перечеркнутым.

overline - Надчёркивание текста.

underline - Подчеркивание текста.

none - Текст без оформления.

Пишется так:

< a href=" index.html" style=" text-decoration: none" > Ссылка без подчёркивания< /a>

Пример:

Файл mystyle.css

h1 {text-align: center}
h3 {text-align: left; text-decoration: underline }
a {text-decoration: underline }
a: hover {text-decoration: none }
p {text-align: justify}

Файл index.html

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Оформление текста< /title>
< link rel=" stylesheet" href=" mystyle.css" type=" text/css" >
< /head>
< body>
< h3> Меню: < /h3>
< a href=" index.html" > Всё о слонах.< /a> < br>
< a href=" elephant.html" > Купить слона.< /a>
< hr>
< h1> Всё о слонах< /h1>
< p> Слон - самое крупное … … …< /p>
< p> Слоны являются … … …< /p>
< /body>
< /html>

Обратите внимание на внешний файл CSS в нем мы " декорировали" ссылку элемент < a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег < a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a: hover {text-decoration: none}

Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться " живым".

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

Отступ первой строки.

Свойство text-indent - задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает " красную строку".

Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS.

В примере ниже расстояние отступа от левого края задаётся в пикселях (px):

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Красная строка< /title>
< style type=" text/css" >
h1 {text-align: center}
p {text-align: justify; text-indent: 20px }
< /style>
< /head>
< body>
< h1> Всё о слонах< /h1>
< p> Слон - самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4, 2 метра, что на метр выше среднего Африканского слона.< /p>
< p> Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон - " животное, которое превосходит всех других в остроумии и интеллекте".< /p>
< /body>
< /html>

Трансформация текста

Своийство text-transform трансформирует символы в указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.

Значения:

none - Текст отображается без каких-либо изменений.(по умолчанию)

capitalize - Каждое слово в тексте отображается с заглавного символа.

lowercase - Все символы преобразуются в нижний регистр.

uppercase - Все символы преобразуются в верхний регистр.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Трансформация текста< /title>
< /head>
< body>
< p style=" text-transform: capitalize " > союз советских социалистических республик< /p>
< p style=" text-transform: lowercase " > СССР ссср< /p>
< p style=" text-transform: uppercase " > ссср СССР< /p>
< /body>
< /html>

Вертикальное выравнивание

Вертикальное выравнивание текста в строке устанавливает свойство vertical-align

Возможные значения свойства vertical-align:

baseline - Выравнивает базовую линию элемента по базовой линии родителя.

bottom - Выравнивает элемент по нижней части строки.

middle - Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.

sub - Нижний индекс (размер шрифта не меняется).

super - Верхний индекс (размер шрифта не меняется).

text-bottom - Нижняя граница элемента выравнивается по нижнему краю строки.

text-top - Верхняя граница элемента выравнивается по верхнему краю строки.

top - Выравнивает элемент по верхней части строки.

Базовая линия - это линия, на которой располагаются " сидят" символы в текстовой строке, Например буква " А" сидит прямо на этой линии, а вот строчная буква " у" сидит на ней же, но свесив ноги..

Взгляните на рисунок с разметкой строки:

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

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Вертикальное выравнивание текста< /title>
< /head>
< body>
< font size=" +3" > А и Б < /font>
< span style=" vertical-align: +5px " > сидели на трубе < /span>
< span style=" vertical-align: bottom " > А упало < /span>
< span style=" vertical-align: top " > Б пропало.. < /span>
< span style=" vertical-align: 50% " > что осталось на трубе? < /span>
< hr>
формула воды: H< span style=" vertical-align: sub " > 2< /span> O
< hr>
< span> н< /span>
< span style=" vertical-align: -10px " > а< /span>
< span style=" vertical-align: -20px " > и< /span>
< span style=" vertical-align: -30px " > с< /span>
< span style=" vertical-align: -40px " > к< /span>
< span style=" vertical-align: -50px " > о< /span>
< span style=" vertical-align: -60px " > с< /span>
< span style=" vertical-align: -70px " > о< /span>
< span style=" vertical-align: -80px " > к< /span>
< /body>
< /html>

Пробелы и перенос строки.

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

Свойство white-space имитирует работу тега < pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.

Может иметь следующие значения:

normal - текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)

nowrap - запрещает автоматический перенос строки.

pre - показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Пробелы и перенос строки< /title>
< /head>
< body>
< p style=" white-space: pre " >
Слон.

Дали туфельки слону.
Взял он туфельку одну
И сказал: - Нужны пошире,
И не две, а все четыре!

С. Я. Маршак.
< /p>
< hr>
< p style=" white-space: nowrap " >
Это длинный предлинный текст, который вряд ли полностью поместится в одной строчке, по умолчанию в нужном месте, браузер перенес бы его на следующую строку, однако мы принудительно запретили это делать, с помощью значения nowrap свойства white-space. Так что теперь, по всей вероятности, в окне браузера появиться горизонтальная полоса прокрутки.. и зачем, спрашивается, мы это сделали?
< /p>
< /body>
< /html>

При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег < br>

Расстояние между словами.

Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.

Значения:

normal - Нормальное расстояние. (по умолчанию)

px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Расстояние между словами< /title>
< /head>
< body>
< p align=" left" style=" word-spacing: 10px " > Расстояние между словами равно десяти пикселям< /p>
< p align=" left" style=" word-spacing: -10px " > Расстояние между словами может иметь отрицательное значение< /p>
< /body>
< /html>

Межсимвольное расстояние.

А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:

normal - Нормальное расстояние. (по умолчанию)

px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Расстояние между символами< /title>
< /head>
< body>
< p style=" letter-spacing: 5px " > Расстояние между буковками равно пяти пикселям< /p>
< p style=" letter-spacing: -3px " > А здесь буквы, из за отрицательного значения, будут наплывать друг на друга< /p>
< /body>
< /html>

Интерлиньяж

Интерлиньяж - это расстояние между строками текста.

Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:

normal - Норма (по умолчанию).

% - Проценты. за сто процентов берется высота шрифта

0.5 - Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 - двойному.

px - Пиксели и любые другие единицы измерения, принятые в CSS.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Интерлиньяж< /title>
< /head>
< body>
< div style=" line-height: 150% " >
строка первая < br> строка вторая < br> строка третья < br> строка четвертая < br> строка пятая
< /div>
< hr>
< div style=" line-height: 0.5 " >
строка первая < br> строка вторая < br> строка третья < br> строка четвертая < br> строка пятая
< /div>
< hr>
< div style=" line-height: 25px " >
строка первая < br> строка вторая < br> строка третья < br> строка четвертая < br> строка пятая
< /div>
< /body>
< /html>

Полезные советы:

· При декорировании текста, свойство - text-decoration, будьте благоразумны используя подчеркивание текста это может ввести в заблуждение посетителя страницы, он может подумать, что данный текст является ссылкой.

· А Вам точно нужно использовать значение nowrap свойства white-space, запрет переноса строки? Появление горизонтальной полосы прокрутки мало кого вдохновляет..

· Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.

Глава 3

Свойства шрифта.

В предыдущей главе мы рассмотрели свойства текста, в этой поговорим о том что можно сделать с шрифтом используя инструменты CSS.

Стиль шрифта

Свойство font-style, в зависимости от выбранного значения, определяет стиль шрифта.

Шрифт может иметь следующие стили:

normal - обычный (по умолчанию)

italic - курсив

oblique - наклонный

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Стиль шрифта< /title>
< /head>
< body>
< p style=" font-style: italic " > это курсив< /p>
< p style=" font-style: oblique " > а это наклонный текст< /p>
< p style=" font-style: normal " > И чем спрашивается, они отличаются? < /p>
< /body>
< /html>

Чем отличается курсив от наклонного текста? Курсив - это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст - это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.

Начертание шрифта

Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными.

Значения:

normal - нормальный (по умолчанию)

small-caps - все буквы заглавные и уменьшенные

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Все буквы заглавные< /title>
< /head>
< body>
< p style=" font-variant: small-caps " > Купи слона!! < /p>
< /body>
< /html>

Размер шрифта

Свойство CSS font-size - определяет размер шрифта.

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

значения абсолютного размера шрифта:

xx-small - очень очень маленький

x-small - очень маленький

small - маленький

medium - средний

large - большой

x-large - очень большой

xx-large - очень очень большой

значения относительного размера шрифта:

larger - больше чем размер шрифта родительского элемента

smaller - меньше чем размер шрифта родительского элемента

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Размер шрифта< /title>
< /head>
< body>
< div style=" font-size: 18px; background-color: #ecfef2; border: 5px double #245404" >
< p> Размер шрифта родительского элемента (блока DIV) равен 18 пикселям< /p>
< p style=" font-size: larger " > Этот шрифт будет крупнее относительно элемента родителя< /p>
< p style=" font-size: smaller " > А этот шрифт будет мельче относительно элемента родителя< /p>
< /div>
< p style=" font-size: 14px; " > В блоке ниже размер штифта элемента родителя огромен (60 пунктов), однако дочерние параграфы расположенные в нём имеют собственное абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.< /p>
< div style=" font-size: 60pt; background-color: #ecfef2; border: 5px double #245404" >
< p style=" font-size: xx-small " > xx-small - очень очень маленький< /p>
< p style=" font-size: x-small " > x-small - очень маленький < /p>
< p style=" font-size: small " > small - маленький < /p>
< p style=" font-size: medium " > medium - средний< /p>
< p style=" font-size: large " > large - большой< /p>
< p style=" font-size: x-large " > x-large - очень большой< /p>
< p style=" font-size: xx-large " > xx-large - очень очень большой< /p>
< /div>
< /body>
< /html>

Жирность шрифта

Свойство font-weight - определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:

normal - обычный шрифт

bold - полужирный шрифт

bolder - жирный шрифт

lighter - тонкий шрифт

А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300... 900) где значение 100 тонкий шрифт, а 900 - сверх жирный.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Жирность шрифта< /title>
< /head>
< body>
< div style=" font-size: 18pt" >
< p style=" font-weight: bolder " > жирный шрифт< /p>
< p style=" font-weight: lighter " > тонкий шрифт< /p>
< p style=" font-weight: 600 " > жирность шрифта равна 600< /p>
< /div>
< /body>
< /html>

Семейство шрифта

Атрибут CSS font-family - указывает одно, два или три имени шрифта из библиотеки шрифтов.

Возможность указывать до трёх имен шрифтов через запятую используется разработчиками во избежание возможных проблем связанных с отсутствием, по тем или иным причинам, указанных имен в библиотеке шрифтов на компьютере пользователя.

Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana; } - будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.

Если же браузер не найдёт в библиотеке шрифтов пользователя ни одного шрифта из указанных то он будет использовать тот шрифт который указан в его настройках " по умолчанию"

Однако также можно указать браузеру не только какой то конкретный шрифт, но и обозначить предпочтительное семейство шрифтов из перечисленных ниже возможных

serif - шрифты с засечками

sans-serif - рубленые шрифты

cursive - курсивные шрифты

fantasy - декоративные шрифты

monospace - моношириные шрифты

Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif; } то это будет значить что если вдруг не окажится шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif - рубленых шрифтов.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Семейство шрифта< /title>
< style type=" text/css" >
h3 {font-family: Times New Roman, Verdana, sans-serif; }
p {font-family: Monotype Corsiva, Verdana; }
span {font-family: Comic Sans MS; }
< /style>
< /head>
< body>
< h3> Купи слона< /h3>
< p> У нас Вы можете по < span> выгодным ценам< /span> приобрести лучших слонов!! < /p>
< /body>
< /html>

Прараметры шрифта

Вы наверняка обратили внимание на тот факт, что все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт).. font -family, font -size и т.д..

Так вот это неспроста.. дело в том, что все эти свойства являются " дочерними" базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.

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

Font-style

Font-variant

Font-weight

Font-size

Font-family

Для более детального ознакомления с возможными параметрами смотрите каждый атрибут отдельно.

Предположим нам необходимо написать стилевое описание шрифта для тега < span> и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial

Все это можно осуществить, написав следующие:

span{
font-style: italic;
font-weight: bolder;
font-size: 20px;
font-family: Arial
}

А можно обойтись всего одной строчкой используя базовый атрибут font.

Вот так:

span{font: italic bold 20px Arial}

Мы просто перечислили нужные нам параметры " марки" font. Согласитесь, по-моему, так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Параметры шрифта< /title>
< style type=" text/css" >
span{ font: italic bold 20px Arial }
< /style>
< /head>
< body>
< span> Этот текст написан курсивом, он жирный, имеет размер 20 пикселей и использует шрифт Arial< /span>
< /body>
< /html>

Полезные советы:

Используйте базовый атрибут font если необходимо применить к шрифту элемента более одного свойства.

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

Не стоит использовать огромные и малюсенькие шрифты, это напрягает, ищите золотую середину. Так же не стоит злоупотреблять декоративными шрифтами, конечно, все эти закорючки весьма красивы, но читать длинный текст с таким шрифтом невыносимо. Выделяйте жирным только те фразы и выражения, на которых хотели бы произвести акцент, а курсивом " особые места" в тексте, к примеру, цитаты или афоризмы.

По мнению психологов, в длинном тексте должно использоваться не менее двух шрифтов, но и не более четырёх.. Причем выделение текста " особым" шрифтом должно иметь систематический характер.. Например все заголовки одним шрифтом, " основной текст" вторым, и " особый текст" третьим.

Глава 4

Цвет и фон.

В этой главе мы поговорим о том, как с помощью CSS присвоить цвет элементу и его фону, а так же о том, как использовать рисунок в качестве фона элемента и управлять его положением.

Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему: " Цвета в Интернете"

Цвет в CSS может быть задан тремя методами:

Именным значением, например: red - красный.

Значением цвета RGB, например: RGB(255, 0, 0) - опять таки красный.

Шестнадцатеричным значением цвета RGB, например: #ff0000 - всё тот же красный.

С именным значением цвета всё понятно black - черный, green - зелёный, olive - оливковый и т.д. (полную палитру базовых красок, т.е. цветов для которых зарезервированы именные значения, смотрите здесь: (http: //www.webremeslo.ru/spravka/spravka1.html) )

Однако по понятным причинам не для всех оттенков цветов зарезервировано индивидуальное имя. Когда возникает необходимость в использовании какого либо " нестандартного" цвета необходимо определить его значение RGB, (Red, Green, Blue ) сочетание красного, зеленого и синего цвета в числовом выражении. Каждый оттенок из основных цветов в системе RGB может выражаться в числе от 0 до 255.

Например, черный цвет будет иметь значение 0, 0, 0 то есть отсутствие всякого цвета.. белый - значение 255, 255, 255 теоретически если смешать основные цвета должен получится белый, а вот например классический синий цвет имеет значение 0, 0, 255 то есть на " мольберте" присутствует только синий. На рисунке наглядно показано, что происходит с красками если их смешать, так смешивая оттенки основных цветов можно добиться любого цвета из видимого спектра.

Однако в большинстве случаев " веб краски" имеют шестнадцатеричное выражение десятичного значения RGB.

В шестнадцатеричном исчислении цифры от 10 до 15 заменены латинскими буквами и числовой ряд приобретает следующий вид:

A, B, C, D, E, F.

Числа больше 15ти в шестнадцатеричной системе образуются путём объединения двух и более чисел в одно. Так, например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе.

Значит, для того чтобы выразить нужный оттенок в шестнадцатеричном виде, нам понадобиться три пары чисел, где первая пара - значение красного цвета, вторая пара значение зелёного и третья пара синего цвета. Так, например, тот же классический синий в шестнадцатеричном выражении будет выглядеть так: #0000FF. Знак решётки перед числом ставится для указания того что данное число является шестнадцатеричным, например в числе #808000 нет латинских букв однако со знаком решётки понятно что оно шестнадцатеричное и выражает собой оливковый цвет.

И еще.. выражая цвет в шестнадцатеричном виде можно обойтись тремя числами, которые затем будут дублироваться, например запись #DAF будет сокращённой формой #DDAAFF.

Фух.. затянул я с водной частью давайте же наконец учить CSS..

Цвет элемента.

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

Как уже сказано выше цвет в CSS может быть задан следующими методами:

#ff0000 - шестнадцатеричное значение цвета RGB.

red - именное значение цвета.

RGB(255, 0, 0) - значение цвета RGB.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Цвет элемента< /title>
< /head>
< body>
< div style=" color: red " > Блок 1< /div>
< div style=" color: #ff0000 " > Блок 2< /div>
< div style=" color: RGB(255, 0, 0) " > Блок 3< /div>
< /body>
< /html>

Цвет фона элемента.

А вот свойство background-color - определяет цвет фона элемента.

Цвет фона может иметь следующие значения:

#ff0000 - шестнадцатеричное значение цвета RGB.

red - именное значение цвета.

RGB(255, 0, 0) - значение цвета RGB.

transparent - прозрачный фон. (по умолчанию)

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Цвет фона элемента< /title>
< /head>
< body style=" background-color: #fffacd " >
< div style=" background-color: white " > Белый блок< /div>
< div style=" background-color: #0000ff " > Синий блок< /div>
< div style=" background-color: RGB(255, 0, 0) " > Красный блок< /div>
< div style=" background-color: transparent " > Прозрачный блок< /div>
< /body>
< /html>

Фоновое изображение.

Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства: background-image.

Возможные значения background-image:

url - путь к файлу с изображением.

none - изображение отсутствует. (по умолчанию)

Для того чтобы сделать некую картинку фоном для элемента необходимо указать к ней путь согласно следующего синтаксиса url(путь к файлу/имя файла). Путь к файлу указывается в том случае, если рисунок находится в другой папке.

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

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Фоновое изображение< /title>
< style type=" text/css" >
body{
background-image: url(fon.jpg);
}
div{
background-image: url(fon1.gif);
border: 5px double #245404;
height: 250px;
}
p{
text-align: center;
color: #008040;
font: bold 24px Arial;
}
< /style>
< /head>
< body>
< p> Страница с фоновым изображением< /p>
< div> < p> Блок с фоновым изображением< /p> < /div>
< /body>
< /html>

Если рисунок не заполняет собой весь фон элемента, то он выкладывается " плиткой".

⇐ Предыдущая 123 4 5 6 7 8 9 Следующая ⇒