Мир Фантастики

Fan-Tv
Главная | Регистрация | Вход Приветствую Вас Гость | RSS

Меню сайта
Основное меню сайта
Новости сайта
Возмездие:
1сезон
Март-2015

Звездные врата:
Звездные врата
Февраль-2016

Звездные врата:1-й отряд(SG-1)

SG-1.1сезон(Дети богов)
Июль-2015
Друзья сайта
Рекомендованный Браузер
Mozilla Firefox

Поиск
Поиск

Календарь
Календарь
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031

Архив записей
Наш опрос
Оцените мой сайт
Всего ответов: 1
Мини Чат
Мини-чат

Статистика
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Вход на сайт

Теги CSS и их значение(свойства таблицы CSS)!

страница 3

 



Еще страницы -Теги CSS- стр 1..стр 2..стр 3..стр 4..стр 5..стр 6..стр 7..

                                                                        стр 8..стр 9..стр 10...

 

Способы применения стилей CSS

 

 

Как мы уже знаем, для физического форматирования текста применяются тэги <font>, <b>, <i> и т.д. и множество различных атрибутов (size, color, height, width и т. п.). Для изменения формата текста мы вынуждены вставлять эти тэги снова и снова, что сильно увеличивает размер страниц и, как следствие, долгая загрузка этих самых страниц пользователем.

 

Каскадные таблицы стилей CSS позволяют назначить собственный стиль визуального представления любому тэгу HTML, в том числе тэгу <body>. Если стиль задан для тэга <body>, он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тэга-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать тэги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать некий стиль для тэга <body>, и все абзацы на странице будут отображены в соответствии с этим стилем. Удобно, не правда, ли? Но как же это сделать?

 

Существует несколько способов применения таблиц стилей CSS. Рассмотрим это поподробнее:

 

Например, мы хотим, чтобы все абзацы отображались шрифтом Arial, размером в 11 пунктов синим цветом и выровнены по ширине страницы. Для этого зададим некий стиль отображения для тэга <body> с помощью атрибута style. Выглядеть это будет следующим образом:


<body style="font-family: "Arial", serif; font-size:11pt; color: blue; text-align: justify;">

В результате, все абзацы будут отформатированы указанным способом. Так что все абзацы будут отражаться так, как мы захотели, а код не будет засорен тэгами, типа <font>. Значение serif атрибута font-family означает, что у нас применяется шрифт с засечками. Т.е. если у пользователя вдруг не окажется вышеуказанного шрифта, браузер подставит другой шрифт с засечками и отображение страницы будет максимально приближено к тому, что мы задумали. А что если нам необходимо изменить формат какого либо абзаца? Тогда, например, в тэг абзаца <p> можно вставить свой стиль, используя атрибут style. Данный способ называется Переопределение стиля в элементе разметки и применяется только к одному тэгу на одной странице. А если нам необходимо изменить заголовки, способы начертания и т.д. Присваивать стили каждому тэгу? Несколько неудобно. Для этого существуют способы задания стилей всевозможным тэгам только один раз и которые будут воздействовать на всю страницу или целиком на весь сайт.

 

Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания красного цвета. Для этого нам понадобится создать в «голове» страницы (внутри тэга <head>) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тэг-контейнер таблицы стилей, начинающийся парным тэгом <style>. Внутри этого тэга мы вольны задать любое количество правил CSS, состоящих из селектора (названия тэга HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки.

 

Пример:

<head>
...
<style>    
<!-- открывающий тэг таблицы стилей -->
body {     <!-- селектор и открывающая фигурная скобка -->
font-family: 'Times New Roman', serif;    <!-- определение шрифта с засечками -->
font-size: 12pt;    <!-- размер шрифта -->
color: darkgreen;    <!-- цвет шрифта -->
}    <!-- закрывающая фигурная скобка -->
h1 {
font-family: Arial, sans-serif;    
<!-- определение шрифта без засечек -->
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: red;
font-weight: bold;
font-style: italic;
}
</style>    
<!-- закрывающий тэг таблицы стилей -->
...
</head>

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

 

Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным – .css).

 

Пример:

body {    <!-- селектор body -->
font-family: 'Times New Roman', serif;    <!-- шрифт с засечками -->
font-size: 12pt;    <!-- размер шрифта -->
color: darkgreen;    <!-- цвет шрифта -->
}
h1 {    
<!-- селектор h1 -->
font-family: Arial, sans-serif;    <!-- шрифт без засечек -->
font-size: 16pt;
color: green;
font-weight: bold;    
<!-- стиль начертания - жирный -->
}
h2 {    
<!-- селектор h2 -->
font-family: Arial, sans-serif;
font-size: 14pt;
color: red;
font-weight: bold;
font-style: italic;    
<!-- стиль начертания - курсив -->
}
 

Обратите внимание:

Тэги <style> внутри файла таблицы стилей не используются – расширение .css явно указывает браузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тэгами <head> следующую строку:


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

 

В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла – .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.

 

Обратите внимание на то, что стили, прописанные для отдельных элементов страницы с помощью атрибута style и внедренные стили (стили, прописанные в «голове» страницы внутри тэга-контейнера <style>) имеют преимущество перед связанными стилями при анализе страницы броузером. Следовательно, при использовании связанных стилей мы всегда имеем возможность переназначить стиль именно для данного конкретного элемента страницы.

 

Для импортирования файла таблицы стилей (в том числе с другого сервера) мы должны прописать в любом месте между тэгами <head>внутри тэга-контейнера <style> следующую строку:

 

Пример:

<head>
...
<style>
...
@import: url (my.css);
...
</style>
...
</head>

 

Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер <style> любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице. Эти правила, как вы помните, будут называться внедренными. Внедренные правила приоритетнее импортированных при анализе страницы браузером, именно поэтому они могут корректировать стили, импортированные извне. В целом, браузер расставляет приоритеты таблиц стилей следующим образом:

 

1) встроенные стили (встроенные с помощью атрибута style непосредственно в теги документа) – наивысший приоритет, будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;

 

2) внедренные стили (перечисленные в теге-контейнере <style> в «голове» документа) – чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);

 

3) импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в теге-контейнере <style>) – еще меньший приоритет, будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;

 

4) связанные стили (стили, присоединенные к html-файлу посредством тега <link>) – наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.

 

Таким образом, зная, в какой последовательности браузер анализирует таблицы стилей, мы можем задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово «каскадные» в названии CSS (cascading style sheets) – несколько таблиц стилей, присоединенных к html-файлу, прокатываются через анализатор (браузер) неким «каскадом» в порядке их приоритетности.

 

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

 

Допустим, мы хотим создать страницу, на которой будет два вида абзацев <p>, причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы – интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Если бы нам пришлось это делать теми средствами CSS, которые мы рассмотрели выше, то пришлось бы создавать две различные таблицы стилей. К счастью, в этом нет необходимости. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:

 

Пример:

<html>
<head>
<style>
...
p.ask {    <!--
тэг абзаца и его имя-->
font-style: italic;    <!--наклонный шрифт-->
font-weight: bold;    <!--жирный шрифт-->
font-family: Arial, sans-serif;    <!--шрифт без засечек-->
font-size: 10pt;    <!--размер шрифта-->
color: gray;    <!--цвет шрифта-->
margin-left: 15px    <!--отступ абзаца-->
}
p.answer {
font-family: 'Times New Roman', serif;
font-size: 12 pt; color: red;
margin-left: 15px
}
</style>
...
</head>
<body>
...
<p class="ask">Вопрос журналиста</p>
<p class="answer">Ответ интервьюируемого</p>
...
</body>
</html>

 

Результат:

Вопрос журналиста

Ответ интервьюируемого

 

В приведенном примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным, курсивного начертания, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов красного цвета. Важно не забывать прописывать параметр class различным классам абзацев непосредственно в коде html. Вы можете создавать любое количество классов для любых элементов страницы.

 

Возьмем другой случай. Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление посредством CSS. На этот случай в каскадных таблицах стилей имеется возможность присвоения уникальным элементам идентификаторов (id). Наиболее часто идентификаторы используются для элементов форм, которые в спецификации HTML 4.0 имеют полную либо ограниченную поддержку CSS (в зависимости от элемента). Вот пример назначения идентификатора и правил CSS таким элементам:

 

Пример:

<html>
<head>
...
<style>
input#green {color: green;}    <!--
определение идентификатора - зеленый цвет-->
input#red {color: red;}    <!--определение идентификатора - красный цвет-->
</style>
...
</head>
<body>
...
<form>    <!--
определение формы-->
<p>Текст, вводимый в это поле, будет отображен зеленым цветом:
<input type="text" id="green" name="info1" size="20"></p>    <!--
применение идентификатора - текстовое поле, идентификатор, имя поля, размер-->
<p>Текст, вводимый в это поле, будет отображен красным цветом:
<input type="text" id="red" name="info2" size="20"></p>
</form>    <!--
закрытие формы-->
...
</body>
</html>

 

Результат:

Текст, вводимый в это поле, будет отображен зеленым цветом:  

Текст, вводимый в это поле, будет отображен красным цветом:  

 

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

 

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

 

Пример:

h3 {
color: red;
background-color: gray;
}
p {
color: black;
}
em {
color: black;
background-color: silver;
}

 

Предположим, мы хотим также выделить какие-то слова в заголовке посредством того же тега <em>, но нас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Мы хотим выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое мы для этого добавим в таблицу стилей, будет выглядеть так:


h3 em {
color: #CC0000;
background-color: gray;
}

 

А вот пример кода страницы с использованием этого контекстного селектора:


<html>
<head>
...
<style>
h3 {    <!--
текст заголовка-->
color: red;    <!--цвет шрифта - красный-->
background-color: gray;    <!--цвет фона - серый-->
}
p {    <!--
абзац-->
color: black;    <!--цвет шрифта - черный-->
}
em {    <!--
выделение-->
color: black;    <!--цвет шрифта - черный-->
background-color: silver;    <!--цвет фона - серебристый-->
}
h3 em {    <!--
заголовок с выделением-->
color: #CC0000;    <!--цвет шрифта-->
background-color: gray;    <!--цвет фона выделения-->
}
</style>
...
</head>
<body>
...
<h3>Это – заголовок второго уровня с <em>выделенным</em> словом</h3>
<p>А это – обычный абзац с <em>выделенными словами</em>
</p>
...
</body>
</html>

 

Результат:

Это – заголовок третьего уровня с выделенным словом

А это – обычный абзац с выделенными словами

 

 

Свойства шрифта в таблицах CSS 

 

 

В этой главе мы рассмотрим свойства шрифтов в каскадных таблицах стилей (CSS) и их значения.

 

Шрифтам в проектировании сайта необходимо уделять особое внимание. Т.к. пользователи используют различные браузеры - некоторые шрифты могут не отображаться вообще. Для кириллических шрифтов наиболее пригодны всего три семейства шрифтов - serif (обычно Times или другой шрифт с засечками), sans-serif - (Arial, Helvetica или другой шрифт без засечек) и monospace - (Courier). Управлять свойствами шрифта в таблицах стилей можно применяя следующие атрибуты:


font-family: - указывает имя шрифта или шрифтового семейства, используемого в элементе страницы.
В качестве значения этого атрибута задается либо непосредственно имя нужного шрифта, либо одно из пяти предопределенных значений - serif, san-serif, cursive, fantasy, monospace, задающих имя шрифтового семейства. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае Web-обозреватель сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в кавычки.

Пример:

font-family:" Times New Roman",sans-serif;    <!--имя шрифта, без засечек-->
 

font-weight - задает "жирность" шрифта, используемого в элементе страницы.
"Жирность" может быть задана тремя способами. Во-первых, предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. Во-вторых, относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. И, в-третьих, одним из девяти значений от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному - 700.
font-weight: normal; - обычный;
font-weight: lighter; - светлее;
font-weight: bold; - жирный;
font-weight: bolder; - жирнее;
font-weight: от 100 до 900 - любое значение, кратное 100 (200,700).

Пример:

font-weight: normal;    <!--жирность - обычный-->
 

font-size - задает размер шрифта, используемого в элементе страницы.
Возможно задание либо абсолютного размера шрифта в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя.
font-size: 200% - относительная величина (проценты)
font-size: 150px - размер в пикселях
font-size: 300pt - размер в пунктах
Также доступны девять определенных значений.
font-size: {xx-small, x-small, small, medium, large, x-large, xx-large} - задают один из семи размеров шрифтов, поддерживаемых HTML
font-size: {smaller, larger} - задают размер шрифта, который на размер либо больше, либо меньше родительского шрифта соответственно

Пример:

font-size: 12pt;    <!--12 пунктов-->
 

font-style - задает начертание шрифта.
font-style: normal; - задает обычный вид шрифта (используется по умолчанию);
font-style: italic - курсивное начертание;
font-style: obligue - наклонное начертание (легкий наклон нормального шрифта)

Пример:

font-style: italic;    <!--курсив-->
 

font-variant - задает вид малых букв шрифта, используемого в элементе страницы.
font-variant: normal; - задает обычный вид малых букв шрифта (используется по умолчанию);
font-variant: small-caps; - делает их такими же, как большие буквы, только меньшего размера (капитель).

Пример:

font-variant: normal;    <!--обычный вид-->
 

font - задает параметры шрифта элемента страницы.
Заменяет атрибуты font-family, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке.
Значение по умолчанию - "Times New Roman", medium, normal, normal, normal
 
 
Copyright MyCorp © 2024
Конструктор сайтов - uCoz