|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах. Внешняя таблица стилей это просто текстовый файл с расширением.css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы. Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода: < link rel=" stylesheet" type=" text/css" href=" style/style.css" />Обратите внимание, как указан путь к вашей таблице стилей атрибутом href. Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами < head> и < /head>. Например, так: < html> < head> < title> My document< /title> < link rel=" stylesheet" type=" text/css" href=" style/style.css" /> < /head> < body> ...Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей. Давайте посмотрим, как это сделать. Попытайтесь сделать это сами Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания: Default.htm < html> < head> < title> Мой документ< /title> < link rel=" stylesheet" type=" text/css" href=" style.css" /> < /head> < body> < h1> Моя первая таблица стилей< /h1> < /body> < /html>Style.css body { background-color: #FF0000; }Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm" ) Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей! Переходите в следующий урок, где мы рассмотрим некоторые из свойств CSS. Урок 3: Цвет и фон В этом уроке вы научитесь, как использовать цвета и фон на ваших web-сайтах. Мы рассмотрим также продвинутые методы позиционирования и управления фоновым изображением. Будут разъяснены следующие CSS-свойства:
Цвет переднего плана: свойство 'color' Свойство color описывает цвет переднего плана элемента. Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом < h1>. В нижеприведённом коде цвет элемента < h1> устанавливается красным. h1 { color: #ff0000; }
Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов (" red" ) или rgb-значения (rgb(255, 0, 0)). Свойство 'background-color' Свойство background-color описывает цвет фона элемента. В элементе < body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу < body>. Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам < body> и < h1>. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
Заметьте, что устанавливает два свойства для < h1>, разделяя их точкой с запятой. Фоновые изображения [background-image] CSS-свойство background-image используется для вставки фонового изображения. Ниже мы используем в качестве фонового изображение бабочки. Вы можете загрузить это изображение и использовать его на вашем компьютере (щёлкните правой клавишей мыши на изображении и выберите " сохранить изображение как/save image as" ), либо вы можете использовать другое изображение.
Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге < body> и укажите местоположение рисунка. body { background-color: #FFCC66; background-image: url(" butterfly.gif" ); } h1 { color: #990000; background-color: #FC9804; }
NB: Обратите внимание, что мы специфицируем место, где находится файл как url(" butterfly.gif" ). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя, например, url("../images/butterfly.gif" ), или даже на файлы в Internet, указывая полный адрес файла: url(" http: //www.html.net/butterfly.gif" ). Повторение/мультипликация фонового изображения [background-repeat] Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим. В таблице указаны четыре значения background-repeat.
Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код: body { background-color: #FFCC66; background-image: url(" butterfly.gif" ); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
Блокировка фонового изображения [background-attachment] Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы. В таблице указаны два значения background-attachment. Щёлкните на примере, чтобы почувствовать разницу между scroll и fixed.
Например, следующий код фиксирует изображение.
Расположение фонового рисунка [background-position] По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана. Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера. Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:
В примере кода фоновое изображение располагается в правом нижнем углу экрана: body { background-color: #FFCC66; background-image: url(" butterfly.gif" ); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }
Сокращённая запись [background] Свойство background входит в состав всех свойств, перечисленных в этом уроке. С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц. Например, посмотрите на эти строки: background-color: #FFCC66; background-image: url(" butterfly.gif" ); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;Используя background, того же результата можно достичь одной строкой кода: background: #FFCC66 url(" butterfly.gif" ) no-repeat fixed right bottom;Порядок свойств этого элемента таков: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере: background: #FFCC66 url(" butterfly.gif" ) no-repeat;то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left. Резюме В этом уроке вы уже познакомились с техникой, отсутствующей в HTML. Ещё интереснее будет в следующем уроке, где мы рассмотрим широкие возможности CSS при описании шрифтов. Урок 4: Шрифты В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств:
Семейство шрифта [font-family] Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий. Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее. Family-name Пример family-name (часто называемое просто " шрифт" ) это, например, " Arial", " Times New Roman" или " Tahoma". Generic family Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без " засечек/feet". Разницу можно также проиллюстрировать так:
При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты. Список шрифтов может выглядеть так: h1 {font-family: arial, verdana, sans-serif; } h2 {font-family: " Times New Roman", serif; }
Заголовки < h1> будут отображаться шрифтом " Arial". Если он не установлен на пользовательской машине, будет использоваться " Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif. Обратите внимание, что имя шрифта " Times New Roman" содержит пробелы, поэтому указано в двойных кавычках. Стиль шрифта [font-style] Свойство font-style определяет normal, italic или oblique. В примере все заголовки < h2> будут показаны курсивом italic. h1 {font-family: arial, verdana, sans-serif; } h2 {font-family: " Times New Roman", serif; font-style: italic; }
Вариант шрифта [font-variant] Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:
Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра. h1 {font-variant: small-caps; } h2 {font-variant: normal; }
Вес шрифта [font-weight] Свойство font-weight описывает, насколько толстым, или " тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта. p {font-family: arial, verdana, sans-serif; } td {font-family: arial, verdana, sans-serif; font-weight: bold; }
Размер шрифта [font-size] Размер шрифта устанавливается свойством font-size. Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры: h1 {font-size: 30px; } h2 {font-size: 12pt; } h3 {font-size: 120%; } p {font-size: 1em; }
Есть одно отличие в указанных единицах измерения: ' px ' и ' pt ' дают абсолютное значение размера шрифта, а ' % ' и ' em ' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как ' % ' или ' em '. Вот иллюстрация того, как настроить размер шрифта в Mozilla Firefox и Internet Explorer. Попробуйте сами - прекрасное свойство, как вы полагаете?
Сокращённая запись [font] Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле. Например, вот четыре строки описания свойств шрифта для < p>: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }Используя сокращённую запись, код можно упростить: p { font: italic bold 30px arial, sans-serif; }Порядок свойств font таков: font-style | font-variant | font-weight | font-size | font-family Резюме Вы познакомились с некоторыми свойствами шрифтов. Помните, что одной из важных возможностей при использовании CSS является то, что вы можете изменить шрифт для всего web-сайта всего за несколько минут. CSS экономит время и облегчает вам жизнь. В следующем уроке мы разберёмся с текстом. Урок 5: Текст Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:
Отступы [text-indent] Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам < p>: p { text-indent: 30px; }
Выравнивание текста [text-align] CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify. В примере текст заголовочных ячеек таблицы < th> выравнивается вправо, а в ячейках данных < td> - по центру. Кроме того, нормальные параграфы - justify: th { text-align: right; } td { text-align: center; } p { text-align: justify; }
Декоративный вариант [text-decoration] Свойство text-decoration позволяет добавлять различные " декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере < h1> подчёркнуты, < h2> - имеют черту над текстом, а < h3> - перечёркнуты. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
Интервал между буквами [letter-spacing] Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах < p> и 6px - в заголовках < h1>, то используется такой код: h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }
Трансформация текста [text-transform] Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде. Например, слово " headline" можно показать " HEADLINE" или " Headline". Имеются четыре возможных значения text-transform: capitalize Капитализирует каждое слово. Например: " john doe" станет " John Doe". uppercase Конвертирует все символы в верхний регистр. Например: " john doe" станет " JOHN DOE". lowercase Конвертирует все символы в нижний регистр. Например: " JOHN DOE" станет " john doe". none Трансформации нет - текст отображается так же, как в HTML-коде. Для примера мы используем список имён. Все имена выделены с помощью < li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром. Видите, HTML-код в этом примере в действительности записан в нижнем регистре. h1 { text-transform: uppercase; } li { text-transform: capitalize; }
Резюме В течение трёх последних уроков вы вы изучили несколько CSS-свойств, но их - множество. В следующем уроке мы рассмотрим работу со ссылками. Урок 6: Ссылки Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы. Что такое псевдокласс? Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга. Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом < a>. В CSS мы также можем использовать a в качестве селектора: a { color: blue; }Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок. a: link { color: blue; } a: visited { color: red; }Используйте |a: link| и |a: visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a: active, и a: hover, когда указатель - над ссылкой. Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями. Псевдокласс: link Псевдокласс: link используется для ссылок на страницы, которые пользователь ещё не посещал. В примере кода непосещённые ссылки - синие. a: link { color: #6699CC; }
Псевдокласс: visited Псевдокласс: visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые. a: visited { color: #660099; }
Псевдокласс: active Псевдокласс: active используется для активных ссылок. В примере активные ссылки имеют жёлтый фон. a: active { background-color: #FFFF00; }
Псевдокласс: hover Псевдокласс: hover используется для ссылок, над которыми находится указатель мыши. Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так: a: hover { color: orange; font-style: italic; }
Пример 1: Эффект при нахождении указателя над ссылкой Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса: hover. Пример 1a: Расстояние между буквами Как вы помните из Урока 5, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки: a: hover { letter-spacing: 10px; font-weight: bold; color: red; }
Пример 1b: UPPERCASE и lowercase В Уроке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке: a: hover { text-transform: uppercase; font-weight: bold; color: blue; background-color: yellow; }
Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте! Пример 2: Удаление подчёркивания ссылок Обычный вопрос - как удалить подчёркивание ссылок? Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт. Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из Урока 5, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none. a { text-decoration: none; }Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов. a: link { color: blue; text-decoration: none; } a: visited { color: purple; text-decoration: none; } a: active { background-color: yellow; text-decoration: none; } a: hover { color: red; text-decoration: none; }
Резюме В этом уроке вы узнали о том, что такое псевдоклассы, используя некоторые свойства из предыдущих уроков. Это должно показать вам, какие возможности заложены в CSS. В следующем уроке мы научим вас определять свойства конкретных элементов и групп элементов. Урок 7: Идентификация и группирование элементов (class и id) Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов. Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке. |
Последнее изменение этой страницы: 2017-03-14; Просмотров: 383; Нарушение авторского права страницы
