Категории: ДомЗдоровьеЗоологияИнформатикаИскусствоИскусствоКомпьютерыКулинарияМаркетингМатематикаМедицинаМенеджментОбразованиеПедагогикаПитомцыПрограммированиеПроизводствоПромышленностьПсихологияРазноеРелигияСоциологияСпортСтатистикаТранспортФизикаФилософияФинансыХимияХоббиЭкологияЭкономикаЭлектроника |
Метод 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-файла. Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов. Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона 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в вашем браузере и вы увидите, что страница имеет красный фон. 2.3 ЦВЕТ И ФОН CSS В этом уроке вы научитесь, как использовать цвета и фон на ваших web-сайтах. Мы рассмотрим также продвинутые методы позиционирования и управления фоновым изображением. Будут разъяснены следующие CSS-свойства: · color · background-color · background-image · background-repeat · background-attachment · background-position · background
Цвет переднего плана : свойство '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.ru/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.
Например, следующий код фиксирует изображение.
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; }
h1 { color: #990000; background-color: #FC9804; }
Расположение фонового рисунка [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. 2.4 ШРИФТЫ CSS В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств: · font-family · font-style · font-variant · font-weight · font-size · font Семейство шрифта [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'. Сокращённая запись [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
4.5 ТЕКСТ CSS Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства: · text-indent · text-align · text-decoration · letter-spacing · text-transform · Отступы [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; }
2.6 ССЫЛКИ CSS Всё изученное в предыдущих уроках вы можете применять и для ссылок/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. Пример 1: Расстояние между буквами Расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки: a:hover { letter-spacing: 10px; font-weight:bold; color:red; }
Пример 1: UPPERCASE и lowercase
Мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте!
Пример 2: Удаление подчёркивания ссылок Обычный вопрос - как удалить подчёркивание ссылок? Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт. Вообще-то удалить подчёркивание ссылок очень просто. Свойство 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; } 2.7 ИДЕНТИФИКАЦИЯ И ГРУППИРОВАНИЕ ЭЛЕМЕНТОВ (CLASS И ID) Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов. Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке.
|
|||||||||||||||||||||||||
Последнее изменение этой страницы: 2016-07-23 lectmania.ru. Все права принадлежат авторам данных материалов. В случае нарушения авторского права напишите нам сюда... |