Вынесение описания стилей во внешний файл.
Диапазон его воздействия простирается на все файлы, в которые включено описание. Это способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется изменить внешний вид сайта, то будет достаточно скорректировать лишь один этот файл. Сравните его с предыдущими способами. В одном из них придется менять описание на каждой страничке, а в другом даже более того - около каждого тега, что, разумеется, совершенно не вдохновляет.
Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):
.header { text-align : center; font-size : 27pt;}.red { color :red; }p { text-align : center; font-size : 12pt;}А потом ссылка на него внедряется в документ при помощи тега <link>:
<head> .... <link rel="stylesheet" type="text/css"href="css/mystyle.css" title="MyStyleSheet"> .... </head>Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им.
Каскадность стилей
Каскадность заключается в том, что стили могут переопределяться. Приведенный выше список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный.
Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.
|
|
Синтаксис CSS
Описание каждого класса делается при помощи конструкции, подобной этой:
.small { font-size: 9pt; }Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках перечисляются все необходимые параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот еще один пример, в котором используется более длинное описание:
Заметьте, что имя класса начинается с точки и таким образом опредяет универсальный класс, т.е. такой, который может быть применен к любому тегу. И делается это при помощи следующей конструкции:
<p class=small>Накладываем стиль на этот текст</p>Существуют универсальные классы и, так называемые, теговые классы:
p.small { font-size: 9pt; }Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован.
Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля достаточно перечислить их через запятую:
|
|
Такой прием называется группировкой, и в данном случае мы определили и для <p>, и для <td> одинаковый размер и цвет текста.
В случае переопределения существующих тегов, в описании стиля можно указывать не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные параметры примут значения по умолчанию, которые для разных тегов различны.
Псевдоклассы
В CSS есть такое понятие как псевдокласс. В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть и возможно лишь в определенном состоянии. Чтобы было понятнее, давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно распространенный, и его можно наблюдать в том числе и на этом сайте. Вот фрагмент таблицы стилей, который позволяет достигать вышеописанного эффекта:
a { text-decoration: none; }a:hover { text-decoration: underline;}Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.
А вот и другой пример псевдокласса - определение буквицы вначале абзаца:
|
|
Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.
Примечания
Как и в любом достаточно сложном языке, при создании таблицы стилей можно пользоваться комментариями. Их формат аналогичен классическому 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; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!