Вынесение описания стилей во внешний файл.

⇐ ПредыдущаяСтр 7 из 7

Диапазон его воздействия простирается на все файлы, в которые включено описание. Это способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется изменить внешний вид сайта, то будет достаточно скорректировать лишь один этот файл. Сравните его с предыдущими способами. В одном из них придется менять описание на каждой страничке, а в другом даже более того - около каждого тега, что, разумеется, совершенно не вдохновляет.

Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):

.header { text-align : center; font-size : 27pt;}.red { color :red; }p { text-align : center; font-size : 12pt;}

А потом ссылка на него внедряется в документ при помощи тега <link>:

Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им.

Каскадность стилей

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

Например, мы определили во внешнем стилевом файле, что текст в теге должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.

Синтаксис CSS

Описание каждого класса делается при помощи конструкции, подобной этой:

.small { font-size: 9pt; }

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

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

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

Существуют универсальные классы и, так называемые, теговые классы:

p.small { font-size: 9pt; }

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

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

p, td { font-size: 9pt; color:green;}

Такой прием называется группировкой, и в данном случае мы определили и для , и для <td> одинаковый размер и цвет текста.

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

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

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

a { text-decoration: none; }a:hover { text-decoration: underline;}

Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.

А вот и другой пример псевдокласса - определение буквицы вначале абзаца:

p:first-letter { font-size: 200\%; font-weight: bold; }

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

Примечания

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

/* Этот текст является комментарием */

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

Основные параметры CSS

Все параметры, используемые для определении стиля, условно можно разделить на несколько больших групп:

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

Основные параметры шрифта

font-weight: [bold|normal|number] - жирность шрифта
font-style: [normal|italic|oblique] - наклон шрифта
font-size: number - размер шрифта
font-family: name - гарнитура шрифта
color:number - цвет шрифта
background-color: number - цвет подложки
background: url - текстурная подложка

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

A:active{} Таблица стилей для активных ссылок (при нажатии)
A:link{} Таблица стилей для собственно ссылок
A:visited{} Таблица стилей для посещённых ссылок
A:hover {} Таблица стилей для ссылок при наведении указателя мыши

Основные параметры абзаца (и Элементов типа "Box")

text-align: [left|right|center|justify] - выравнивание
text-indent: number - отступ красной строки
line-height: number -интерлиньяж
letter-spacing: number - трекинг
padding-left: number - отступ от текста слева
padding-right: number - отступ от текста справа
padding-top: number - отступ от текста сверху
padding-bottom: number - отступ от текста снизу
margin-left: number - отступ от границы слева
margin-right: number- отступ от границы справа
margin-top: number - отступ от границы сверху
margin-bottom: number - отступ от границы снизу

Единицы измерения в CSS

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

относительный размер в процентах (%)
относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)
абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), пикселях (px), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)
абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in) абсолютный в пикселях (px)

Задание цвета в CSS

Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:

при помощи названия цвета: yellow, red, green, grey,..
шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..
десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..

Примеры описания таблицы стилей:

.epigraph { font-size: 12pt; font-style: italic; text-align: right; color: rgb(127,127,0);} p.big { font-size: 16px; font-weight: bold; color: #ff0000;} .menu { font-weight: bold; font-size: 9pt; font-family: arial, helvetica, sans-serif;} a:hover { color: #b63a3a; text-decoration: none;}

Несколько простых правил

Фон

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

Картинки

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

Шрифты

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

Стиль

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

Дата добавления: 2019-02-12; просмотров: 268; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 2 3 4 5 67

Мы поможем в написании ваших работ!