Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.
Вскоре для этого стала использоваться другая технология - CSS (
Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.
Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.
CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке Web-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания Web-страниц, таких как:
Эти техники значительно увеличивают сложность разработки Web-страниц, предлагают ограниченную гибкость в их создании и управлении, а также создают трудности для людей ими не владеющих.
Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.
Перед началом верстки сайта, необходимо определится с инструментарием, который способен значительно облегчить работу с дизайном и версткой сайта. Для этого рекомендовано использовать Microsoft Expression Web (рис 4.1)являющийся частью пакета Microsoft Expression Studio, и который можно использовать вместе с Visual Studio 2008.
(рис 4.1) Интерфейс Microsoft Expression WebВ программу встроена система автоматической проверки написанного кода и разметки Web-страниц на соответствие принятым стандартам. Тут присутствуют
Всего существуют четыре способа, каждый имеет свои преимущества:
Вся информация, связанная с CSS, располагается в шапке HTML-документа и не контактирует с содержимым тэга <BODY>. Пример:
<HTML>
<STYLE TYPE="text/css">
<!--
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
-->
</STYLE>
<HEAD>
<TITLE>Вложенные стили</TITLE>
</HEAD>
<BODY>
<H1>Пример 1</H1>
<P>Пример 2</P>
</BODY>
</HTML>
Вложенные стили исполняются только для текущего HTML-документа. Когда Вы хотите добавить Стили только на единственную страницу, этот путь подходит как нельзя лучше.
Вместо размещения CSS-кода в каждой конкретной странице, Вы можете привязать множество HTML-документов к одному документу Стилей. Этот внешний CSS-файл установит правила для всех ваших Web-страниц. К примеру, если вы изменяете размер шрифта в документе Стилей, шрифт немедленно изменится на всех ваших страницах. Это очень удобно при поддержании большого сервера с большим количеством файлов.
Вместо тэга <STYLE>, используется <LINK> в пределах тэга <HEAD>:
<HTML> <HEAD> <TITLE>Ссыла на документ стилей</TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> <BODY> <H1>Пример 1</H1> <P>Пример 2</P> </BODY> </HTML>
Файл mystyles.css будет содержать это:
H1 { color: green;
font-family: impact }
P { background: yellow;
font-family: courier }
В итоге, ваш HTML-документ указывает серверу путь к CSS-файлу. Когда вы рассматриваете страницу в браузере, Вы увидите, как браузер отслеживает тэг <LINK> и загружает настройки страницы из CSS-файла. Этот же CSS-файл может применяться на неограниченном количестве HTML-документов, ссылающихся на него. Вы можете использовать относительные или абсолютные URL
с атрибутом HREF.
Аналогично выглядит импортирование стилей. Различие в том, что можно объединять импортированные стили со своими собственными, содержащимися внутри документа. Пример:
<HTML>
<STYLE TYPE="text/css">
<!--
@import url(mystyles.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>
<HEAD>
<TITLE>Импорт стилей</TITLE>
</HEAD>
<BODY>
<H1>Пример 1</H1>
<P>Пример 2</P>
</BODY>
</HTML>
Файл mystyles.css выглядит так:
H1 { color: green; font-family: times }
P { background: yellow; font-family: courier }
В этом примере браузер сначала импортирует стили из файла mystyles.css (строка @import всегда должна быть первой), а затем добавляет к этому вложенные команды стилей. На странице применяются и те, и другие стили.
И последний способ это добавление стилей непосредственно в строки HTML-документа.
Пример:
<HTML> <HEAD> <TITLE>Добавление стилей в строки web-страницы</TITLE> </HEAD> <BODY> <H1 STYLE="color: orange; font-family: impact"> Пример 1</P></H1> <P STYLE="background: yellow; font-family: courier"> Пример 2</P> </BODY> </HTML>
В данном примере не нужно добавлять стили в заголовок HTML-документа. Встроенные атрибуты стилей уже содержат всю необходимую информацию для браузера.
Однако данный метод имеет существенный недостаток, надо добавлять встроенный код стилей каждый раз, когда нужно их использовать. К примеру, каждый следующий тэг <H1> отображается по умолчанию, если ему не присвоить ряд свойств.
Селектор—это конструкция, позволяющая выбрать элемент, к которому будут применены данные стили.
Наиболее часто используются четыре вида селекторов:
ID ;Самый простой селектор. Если нужно применить стиль ко всем заголовкам первого уровня, то совершенно логично в качестве селектора использовать название элемента <Hl>. Например, чтобы все заголовки первого уровня были темно-серого цвета, выводились шрифтом Arial и имели расстояние между буквами 10 пикселей, пишется такой стиль:
H1 {color: #666; font-family: Arial; letter-spacing: 10рх}
Селектор в данном случае — H1.
Или, например, что бы все ссылки были оранжевого цвета с полужирным начертанием:
A {color: orange; font-weight: bold}
Здесь селектор - А.
Аналогичным образом в качестве селектора можно использовать любой элемент HTML. Проблемы возникают в том случае, если у нас есть одинаковые элементы, которые должны выводится по-разному. Например, если некоторые ссылки должны быть с подчеркиванием , а другие без. Одним из решений этой проблемы является селектор по классу.
Понятие класса в HTML ввели специально для поддержки селектора CSS. Существует специальный атрибут class, который можно использовать в любом элементе.
Проблему со ссылками можно решить введением нового класса. Ссылки в тексте будем считать обычными, а ссылки в меню особенными. Для особенных ссылок введем новый класс menu. HTML-код будет таким:
<table> <tr> <td> <а href="about.html" class="menu">О компании</а> <a href="services.html" сlass="menu">Услуги</а> <a href ="contact.html" class="menu">Контакты</a> </td> <td> <р>Основной текст с одинокой <а href="links.html"> ссылкой</а></р> </td> </tr> </table>
От обычных ссылок особенные отличаются атрибутом class="menu". Осталось написать стиль именно для этих ссылок. Селектор по классу формируется так: первым идет название элемента, затем — точка, а после — название класса. Например:
A.menu {text-decoration: none}
Название элемента можно опускать. Тогда будет подразумеваться, что данный стиль применяется ко всем элементам, которые имеют такой класс.
Данный тип селекторов практически аналогичен селекторам по классу. В HTML есть специальный атрибут id, который используется для поддержки селектора CSS. Единственное принципиальное отличие в том, что в одном HTML-документе может быть только один элемент с определенным ID, т.е. такой элемент является уникальным. Обычно селекторы по ID используются для блоков, но бывают и другие ситуации. Например, вы хотите, чтобы первый абзац в тексте выводился полужирным наклонным шрифтом. Естественно, на каждой странице такой абзац только один, так что можно ввести атрибут id:
<р id="first">Первый абзац</р> <р>Второй абзац</р>
После этого с помощью селектора по ID напишем стиль для первого абзаца:
P#first {font-style: italic; font-weight: bold}
Если в селекторе по классу для разделения названия элемента и класса используется точка, то для селектора по ID используется знак #. Название элемента можно опустить, и тогда данный стиль можно будет применять к любому элементу с идентификатором first.
В данном случае лучше записывать селектор полностью. Если опустить название элемента, то получится такой стиль:
#first {font-style: italic; font-weight: bold}
И уже совершенно непонятно, к чему этот стиль относится: то ли к первой ссылке, то ли к первому заголовку, то ли к первому абзацу.
Код:
<table>
<tr>
<td>
<а href="about.html" class="menu">О компании</а>
<a href ="services .html" class="menu">Услуги</a>
<a href ="contact.html" class="menu">Контакты</a>
</td>
<td>
<р>Основной текст с одинокой
<а href="links.html"> ссылкой</а>
</р>
</td>
</tr>
</table>
Здесь мы для задания отдельных стилей ссылкам в меню использовали классы, а лучше ввести блок с id="menu" и воспользоваться контекстным селектором:
<table>
<tr>
<td>
<div id="menu">
<a href="about.html">О компании</а>
<a href="services.html">Услуги</а>
<a href="contact.html">Контакты</a>
</div>
А стиль будет таким:
#menu A {text-decoration: none)
Тогда содержимое всех элементов <а>, находящихся внутри элемента с id="menu", будет выводиться без подчеркивания.
(рис 4.2) Синтаксис CSSТаким образом, стиль CSS (рис 4.2) состоит из селектора, который всегда располагается слева, и
Отдельное объявление в свою очередь состоит из свойства и его значения. Свойства обозначают вид стиля, который будет применен к элементу, выбранному с помощью селектора. Примеры свойств: color - задает цвет элемента, font-size - задает размер шрифта, border - задает рамку вокруг элемента.
Собственно, это практически все правила синтаксиса каскадных таблиц стилей. Можно добавить, что один стиль может содержать сколько угодно комбинаций свойств: значение и пары отделяются друг от друга точкой с запятой. CSS селекторы не зависят от регистра, поэтому названия селекторов могут быть написаны как прописными, так и строчными буквами. Например, селекторы h1 и H1 совершенно равноправны.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в 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 используется для ссылок на страницы, которые пользователь ещё не посещал.
В примере кода непосещённые ссылки - синие.
a:link {
color: #6699CC;
}
:visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.
a:visited {
color: #660099;
}
:active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.
a:active {
background-color: #FFFF00;
}
:hover используется для ссылок, над которыми находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
a:hover {
color: orange;
font-style: italic;
}
Модель форматирования. Чтобы правильно применять правила форматирования, следует представлять как в каскадных стилях происходит форматирование элементов, т.е. на что можно влиять и что можно изменять в отображении элемента. Модель форматирования CSS ориентирована на представление любого элемента html в окружении вложенных прямоугольных блоков.
(рис 4.3) Блоковая модель форматирования абзаца
none - определяет отображается или нет элементblock - элемент является блокомlist-item inline - встроенный элементЭлементы могут иметь еще свойство float: none, left, right
none - элемент не плавающийleft, right - элемент плавающий, сдвигается влево или вправо до поля отступа или границы другого блокового элемента.Элемент выводится при этом из нормального потока отображения и форматируется как блоковый элемент, а нормальный поток отображения будет обтекать его с правой или с левой стороны.
Блоковые элементы - это элементы, у которых свойство display = block или float, отличным от значения none. Их форматирование связано с установкой значений соответствующих параметров
(рис 4.4) Параметры, доступные в модели форматирования CSS для блоковых элементовГоризонтальное форматирование элемента определяется значениями 7 свойств:
margin-left margin-right - правое полеborder-left border-right - правая границаpadding-left padding-right - правый отступwidth - ширинаШирина элемента ( width ) - расстояние между левым и правым height ) - расстояние между внутренним верхом и низом.
Вертикальное форматирование блоковых, но не плавающих элементов. У них значения параметров "верхнее поле" и "нижнее поле" определяют минимальное расстояние до inline ). Они совместно с другими элементами используют область строки.
Свойства форматирования элементов.
Все доступные свойства форматирования элементов в документе html разбиты на 9 категорий:
@import, cursor, important Прежде чем приступить, советую вам прочитать статью Box-модель в CSS. В двух словах: каждый элемент в html - это прямоугольник, для которого можно указать величины внутренних и
Свойство position в CSS может принимать пять значений:
absoluterelativefixedstaticinheritЗначение static используется по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для его размещения определяются Box-моделью. Для таких элементов, свойства top, right, bottom и left будут игнорироваться. Для того, чтобы использовать эти свойства, позиционирование элемента должно быть абсолютным ( absolute ), относительным ( relative ) или фиксированным ( fixed ).
Значение inherit, как и во всех остальных свойствах CSS, используется для того, чтобы элемент использовал тоже самое значение, что и родительский элемент.
Абсолютное позиционирование удаляет элемент из общего потока документа. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none;. Если вы не хотите чтобы пространство для такого элемента заполнялось другими элементами, то вам надо придумать другой подход.
Вы устанавливаете расположение элемента с абсолютным позиционированием, используя свойства top, left, right и bottom. Вам достаточно указать два из них, top или bottom и left или right. Если ни одного свойства не указано, то устанавливается 0 для пары top - left.
Ключевой момент в абсолютном позиционировании - это понимание того, что является точкой отсчёта. Если свойству top указано значение 20px, то откуда их необходимо отсчитывать.
Ответ прост: такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static. Если такого элемента нет, то элемент позиционируется относительно основного документа. То есть при установке абсолютного позиционирования, CSS сообщает браузеру, чтобы он посмотрел на родительский элемент и, если его позиционирование не статическое, то надо выровнять текущий элемент относительно него.
margin. Однако есть одно существенное различие: соседние элементы, в случае использования позиционирования, не учитывают этот сдвиг.
Представьте себе это так: некое изображение сдвигается, а на его месте остаётся "призрак", все элементы располагаются относительно этого "призрака". Это позволяет нам накладывать элементы друг на друга.
Таким образом, элементы с относительным позиционированием, взяты из нормального потока элемента, но по-прежнему оказывают влияние на расположение соседних элементов, которые ведут себя так, что исходный элемент всё ещё находится в потоке документа.
В этом случае мы не должны задавать вопрос относительно чего здесь позиционируется элемент. Ответ всегда: нормальный поток документа. Очень похоже на то, что вы добавили внешний отступ к элементу, но в то же время не повлияли на соседние элементы.
Фиксированное позиционирование действует подобно абсолютному, с небольшими различиями.
Во-первых, элемент с фиксированным позиционированием всегда располагается относительно окна браузера, родительские элементы при этом игнорируются.
Второе отличие исходит из его названия. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.
Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.
Чем выше этот индекс тем выше на странице расположен элемент. С помощью него можно добиться, чтобы один элемент располагался поверх другого.
Color определяет цвет элемента. Под цветом в данном случае подразумевается цвет текста этого элемента. Если же нужно определить цвет элемента как блока (то есть фон), следует пользоваться свойством Background-Color.
a { color: yellow }
p { color: #050505 }
b { color: #AAA }
input { color: rgb(245,135,75) }
textarea { color: rgb(10%,30%,50%) }
Как всегда, впечатляет многообразие способов выражения мысли в CSS. Цвет можно задавать напрямую как RGB значение, или же посредством red скорее всего будет везде 0xFF0000, но с другой стороны какой-нибудь darkred или lightgreen уже не столь однозначен. Как видно, имена можно наугад выбирать из английских названий цветов, добавляя к ним еще приставки dark и light, то бишь темный и яркий. Ну а с RGB так вообще просто - числовые или процентные соотношения в свете красной, зеленой и голубой составляющей. На будущее - цвет в CSS везде задается одним из вышеприведенных способов.
Помимо обычных цветовых значений свойство background-color может принимать также значение transparent (установленное по умолчанию). В этом случае фон текста элемента цвета собственного не имеет, взамен используется подложка элемента уровнем выше (если он есть).
a {background-color: darkgreen; color: white }
body {background-color: #FFFFFF }
Задает фоновое изображение для элемента. Выглядит это так:
body { background-image: url("img/back.png") }
с документом ( scroll ).
body {background-image: url("img/sexy/girl/foto.png"); background-repeat: no-repeat;
background-attachment: scroll }
Определяет место начального заполнения или просто расположение фонового изображения. Изображение (само собой) начинает грузиться после загрузки всего документа. Поэтому для того, чтобы до этого славного момента страница выглядела бы более-менее культурно, рекомендуется задавать схожий (или хотя бы подходящий по дизайну) цвет фона с помощью background-color. Форматы изображений, поддерживаемый браузерами - GIF, PNG и JPEG отличаются друг от друга методами компрессии и областями применения. В анимации (там, где большая часть нарисована руками или мышью) рекомендуется использовать GIF или PNG - за счет лучшего соотношения сжатие/потеря качества по отношению к JPEG.
Вообще говоря, выражение потеря качества к форматам GIF и PNG вообще неприменимо - можно сказать, потеря цвета или цветовой палитры, поскольку собственно изображение при сжатии не меняется, преобразуется лишь его цветовая составляющая. Однако для фотографий, детализованных 3D-изображений и всего подобного лучше подходит JPEG, поскольку подмена цветовой палитры в таких изображениях неизбежно приведет к весьма заметной потере качества, а JPEG же использует довольно своебразный алгоритм сжатия, при котором изображение разбивается на цветовой и альфа (черно-белый канал), и проводящей их раздельное преобразование. Не вдаваясь в подробности, можно сказать, что при этом происходит весьма значительное сжатие изображение, приводящее к некоторым искажениям, называемым артефактами. Для фотографий при нежесткой степени компрессии такие артефакты не очень заметны в отличие от, скажем, скриншотов.
Позволяет установить заполнение (мощение) фоновым изображением. Очень полезное свойство, позволяющее маленьким изображением создать оригинальный фон страницы или элемента. Заполняться можно по вертикали ( repeat-y ), по горизонтали ( repeat-x ), в обоих направлениях ( repeat ) или не заполняться вообще ( no-repeat ).
body {
Таковое вот длинное название для определения своства прокрутки фонового изображения. Оно может быть фиксированным ( fixed ) или двигаться вместе разнообразно. Просто приведу примеры
top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% Это способ задания положения ключевыми словами или процентыми отступами (вначале отступ по X, затем по Y ). В одной строке указаны альтернативные варианты указания расположения. Помимо этого, можно использовать отступы в единицах (пикселях, ёкселях и иже с ними):
5px 10px 10em 2em 20ex 3px 15cm 15cm Выбирайте любой вариант по вкусу.
body {
background: background-color |
Цвет фона для страницы может выглядеть так:
body { background: black url("tile .gif") repeat }body { background: #A0A0A0 url("stones.png") repeat-x top right }body { background: white}
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.
Вскоре для этого стала использоваться другая технология - CSS (
Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.
Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.
CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке Web-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания Web-страниц, таких как:
Эти техники значительно увеличивают сложность разработки Web-страниц, предлагают ограниченную гибкость в их создании и управлении, а также создают трудности для людей ими не владеющих.
Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.
Перед началом верстки сайта, необходимо определится с инструментарием, который способен значительно облегчить работу с дизайном и версткой сайта. Для этого рекомендовано использовать Microsoft Expression Web (рис 4.1)являющийся частью пакета Microsoft Expression Studio, и который можно использовать вместе с Visual Studio 2008.
(рис 4.1) Интерфейс Microsoft Expression WebВ программу встроена система автоматической проверки написанного кода и разметки Web-страниц на соответствие принятым стандартам. Тут присутствуют
Всего существуют четыре способа, каждый имеет свои преимущества:
Вся информация, связанная с CSS, располагается в шапке HTML-документа и не контактирует с содержимым тэга <BODY>. Пример:
<HTML>
<STYLE TYPE="text/css">
<!--
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
-->
</STYLE>
<HEAD>
<TITLE>Вложенные стили</TITLE>
</HEAD>
<BODY>
<H1>Пример 1</H1>
<P>Пример 2</P>
</BODY>
</HTML>
Вложенные стили исполняются только для текущего HTML-документа. Когда Вы хотите добавить Стили только на единственную страницу, этот путь подходит как нельзя лучше.
Вместо размещения CSS-кода в каждой конкретной странице, Вы можете привязать множество HTML-документов к одному документу Стилей. Этот внешний CSS-файл установит правила для всех ваших Web-страниц. К примеру, если вы изменяете размер шрифта в документе Стилей, шрифт немедленно изменится на всех ваших страницах. Это очень удобно при поддержании большого сервера с большим количеством файлов.
Вместо тэга <STYLE>, используется <LINK> в пределах тэга <HEAD>:
<HTML> <HEAD> <TITLE>Ссыла на документ стилей</TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> <BODY> <H1>Пример 1</H1> <P>Пример 2</P> </BODY> </HTML>
Файл mystyles.css будет содержать это:
H1 { color: green;
font-family: impact }
P { background: yellow;
font-family: courier }
В итоге, ваш HTML-документ указывает серверу путь к CSS-файлу. Когда вы рассматриваете страницу в браузере, Вы увидите, как браузер отслеживает тэг <LINK> и загружает настройки страницы из CSS-файла. Этот же CSS-файл может применяться на неограниченном количестве HTML-документов, ссылающихся на него. Вы можете использовать относительные или абсолютные URL
с атрибутом HREF.
Аналогично выглядит импортирование стилей. Различие в том, что можно объединять импортированные стили со своими собственными, содержащимися внутри документа. Пример:
<HTML>
<STYLE TYPE="text/css">
<!--
@import url(mystyles.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>
<HEAD>
<TITLE>Импорт стилей</TITLE>
</HEAD>
<BODY>
<H1>Пример 1</H1>
<P>Пример 2</P>
</BODY>
</HTML>
Файл mystyles.css выглядит так:
H1 { color: green; font-family: times }
P { background: yellow; font-family: courier }
В этом примере браузер сначала импортирует стили из файла mystyles.css (строка @import всегда должна быть первой), а затем добавляет к этому вложенные команды стилей. На странице применяются и те, и другие стили.
И последний способ это добавление стилей непосредственно в строки HTML-документа.
Пример:
<HTML> <HEAD> <TITLE>Добавление стилей в строки web-страницы</TITLE> </HEAD> <BODY> <H1 STYLE="color: orange; font-family: impact"> Пример 1</P></H1> <P STYLE="background: yellow; font-family: courier"> Пример 2</P> </BODY> </HTML>
В данном примере не нужно добавлять стили в заголовок HTML-документа. Встроенные атрибуты стилей уже содержат всю необходимую информацию для браузера.
Однако данный метод имеет существенный недостаток, надо добавлять встроенный код стилей каждый раз, когда нужно их использовать. К примеру, каждый следующий тэг <H1> отображается по умолчанию, если ему не присвоить ряд свойств.
Селектор—это конструкция, позволяющая выбрать элемент, к которому будут применены данные стили.
Наиболее часто используются четыре вида селекторов:
ID ;Самый простой селектор. Если нужно применить стиль ко всем заголовкам первого уровня, то совершенно логично в качестве селектора использовать название элемента <Hl>. Например, чтобы все заголовки первого уровня были темно-серого цвета, выводились шрифтом Arial и имели расстояние между буквами 10 пикселей, пишется такой стиль:
H1 {color: #666; font-family: Arial; letter-spacing: 10рх}
Селектор в данном случае — H1.
Или, например, что бы все ссылки были оранжевого цвета с полужирным начертанием:
A {color: orange; font-weight: bold}
Здесь селектор - А.
Аналогичным образом в качестве селектора можно использовать любой элемент HTML. Проблемы возникают в том случае, если у нас есть одинаковые элементы, которые должны выводится по-разному. Например, если некоторые ссылки должны быть с подчеркиванием , а другие без. Одним из решений этой проблемы является селектор по классу.
Понятие класса в HTML ввели специально для поддержки селектора CSS. Существует специальный атрибут class, который можно использовать в любом элементе.
Проблему со ссылками можно решить введением нового класса. Ссылки в тексте будем считать обычными, а ссылки в меню особенными. Для особенных ссылок введем новый класс menu. HTML-код будет таким:
<table> <tr> <td> <а href="about.html" class="menu">О компании</а> <a href="services.html" сlass="menu">Услуги</а> <a href ="contact.html" class="menu">Контакты</a> </td> <td> <р>Основной текст с одинокой <а href="links.html"> ссылкой</а></р> </td> </tr> </table>
От обычных ссылок особенные отличаются атрибутом class="menu". Осталось написать стиль именно для этих ссылок. Селектор по классу формируется так: первым идет название элемента, затем — точка, а после — название класса. Например:
A.menu {text-decoration: none}
Название элемента можно опускать. Тогда будет подразумеваться, что данный стиль применяется ко всем элементам, которые имеют такой класс.
Данный тип селекторов практически аналогичен селекторам по классу. В HTML есть специальный атрибут id, который используется для поддержки селектора CSS. Единственное принципиальное отличие в том, что в одном HTML-документе может быть только один элемент с определенным ID, т.е. такой элемент является уникальным. Обычно селекторы по ID используются для блоков, но бывают и другие ситуации. Например, вы хотите, чтобы первый абзац в тексте выводился полужирным наклонным шрифтом. Естественно, на каждой странице такой абзац только один, так что можно ввести атрибут id:
<р id="first">Первый абзац</р> <р>Второй абзац</р>
После этого с помощью селектора по ID напишем стиль для первого абзаца:
P#first {font-style: italic; font-weight: bold}
Если в селекторе по классу для разделения названия элемента и класса используется точка, то для селектора по ID используется знак #. Название элемента можно опустить, и тогда данный стиль можно будет применять к любому элементу с идентификатором first.
В данном случае лучше записывать селектор полностью. Если опустить название элемента, то получится такой стиль:
#first {font-style: italic; font-weight: bold}
И уже совершенно непонятно, к чему этот стиль относится: то ли к первой ссылке, то ли к первому заголовку, то ли к первому абзацу.
Код:
<table>
<tr>
<td>
<а href="about.html" class="menu">О компании</а>
<a href ="services .html" class="menu">Услуги</a>
<a href ="contact.html" class="menu">Контакты</a>
</td>
<td>
<р>Основной текст с одинокой
<а href="links.html"> ссылкой</а>
</р>
</td>
</tr>
</table>
Здесь мы для задания отдельных стилей ссылкам в меню использовали классы, а лучше ввести блок с id="menu" и воспользоваться контекстным селектором:
<table>
<tr>
<td>
<div id="menu">
<a href="about.html">О компании</а>
<a href="services.html">Услуги</а>
<a href="contact.html">Контакты</a>
</div>
А стиль будет таким:
#menu A {text-decoration: none)
Тогда содержимое всех элементов <а>, находящихся внутри элемента с id="menu", будет выводиться без подчеркивания.
(рис 4.2) Синтаксис CSSТаким образом, стиль CSS (рис 4.2) состоит из селектора, который всегда располагается слева, и
Отдельное объявление в свою очередь состоит из свойства и его значения. Свойства обозначают вид стиля, который будет применен к элементу, выбранному с помощью селектора. Примеры свойств: color - задает цвет элемента, font-size - задает размер шрифта, border - задает рамку вокруг элемента.
Собственно, это практически все правила синтаксиса каскадных таблиц стилей. Можно добавить, что один стиль может содержать сколько угодно комбинаций свойств: значение и пары отделяются друг от друга точкой с запятой. CSS селекторы не зависят от регистра, поэтому названия селекторов могут быть написаны как прописными, так и строчными буквами. Например, селекторы h1 и H1 совершенно равноправны.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в 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 используется для ссылок на страницы, которые пользователь ещё не посещал.
В примере кода непосещённые ссылки - синие.
a:link {
color: #6699CC;
}
:visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.
a:visited {
color: #660099;
}
:active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.
a:active {
background-color: #FFFF00;
}
:hover используется для ссылок, над которыми находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
a:hover {
color: orange;
font-style: italic;
}
Модель форматирования. Чтобы правильно применять правила форматирования, следует представлять как в каскадных стилях происходит форматирование элементов, т.е. на что можно влиять и что можно изменять в отображении элемента. Модель форматирования CSS ориентирована на представление любого элемента html в окружении вложенных прямоугольных блоков.
(рис 4.3) Блоковая модель форматирования абзаца
none - определяет отображается или нет элементblock - элемент является блокомlist-item inline - встроенный элементЭлементы могут иметь еще свойство float: none, left, right
none - элемент не плавающийleft, right - элемент плавающий, сдвигается влево или вправо до поля отступа или границы другого блокового элемента.Элемент выводится при этом из нормального потока отображения и форматируется как блоковый элемент, а нормальный поток отображения будет обтекать его с правой или с левой стороны.
Блоковые элементы - это элементы, у которых свойство display = block или float, отличным от значения none. Их форматирование связано с установкой значений соответствующих параметров
(рис 4.4) Параметры, доступные в модели форматирования CSS для блоковых элементовГоризонтальное форматирование элемента определяется значениями 7 свойств:
margin-left margin-right - правое полеborder-left border-right - правая границаpadding-left padding-right - правый отступwidth - ширинаШирина элемента ( width ) - расстояние между левым и правым height ) - расстояние между внутренним верхом и низом.
Вертикальное форматирование блоковых, но не плавающих элементов. У них значения параметров "верхнее поле" и "нижнее поле" определяют минимальное расстояние до inline ). Они совместно с другими элементами используют область строки.
Свойства форматирования элементов.
Все доступные свойства форматирования элементов в документе html разбиты на 9 категорий:
@import, cursor, important Прежде чем приступить, советую вам прочитать статью Box-модель в CSS. В двух словах: каждый элемент в html - это прямоугольник, для которого можно указать величины внутренних и
Свойство position в CSS может принимать пять значений:
absoluterelativefixedstaticinheritЗначение static используется по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для его размещения определяются Box-моделью. Для таких элементов, свойства top, right, bottom и left будут игнорироваться. Для того, чтобы использовать эти свойства, позиционирование элемента должно быть абсолютным ( absolute ), относительным ( relative ) или фиксированным ( fixed ).
Значение inherit, как и во всех остальных свойствах CSS, используется для того, чтобы элемент использовал тоже самое значение, что и родительский элемент.
Абсолютное позиционирование удаляет элемент из общего потока документа. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none;. Если вы не хотите чтобы пространство для такого элемента заполнялось другими элементами, то вам надо придумать другой подход.
Вы устанавливаете расположение элемента с абсолютным позиционированием, используя свойства top, left, right и bottom. Вам достаточно указать два из них, top или bottom и left или right. Если ни одного свойства не указано, то устанавливается 0 для пары top - left.
Ключевой момент в абсолютном позиционировании - это понимание того, что является точкой отсчёта. Если свойству top указано значение 20px, то откуда их необходимо отсчитывать.
Ответ прост: такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static. Если такого элемента нет, то элемент позиционируется относительно основного документа. То есть при установке абсолютного позиционирования, CSS сообщает браузеру, чтобы он посмотрел на родительский элемент и, если его позиционирование не статическое, то надо выровнять текущий элемент относительно него.
margin. Однако есть одно существенное различие: соседние элементы, в случае использования позиционирования, не учитывают этот сдвиг.
Представьте себе это так: некое изображение сдвигается, а на его месте остаётся "призрак", все элементы располагаются относительно этого "призрака". Это позволяет нам накладывать элементы друг на друга.
Таким образом, элементы с относительным позиционированием, взяты из нормального потока элемента, но по-прежнему оказывают влияние на расположение соседних элементов, которые ведут себя так, что исходный элемент всё ещё находится в потоке документа.
В этом случае мы не должны задавать вопрос относительно чего здесь позиционируется элемент. Ответ всегда: нормальный поток документа. Очень похоже на то, что вы добавили внешний отступ к элементу, но в то же время не повлияли на соседние элементы.
Фиксированное позиционирование действует подобно абсолютному, с небольшими различиями.
Во-первых, элемент с фиксированным позиционированием всегда располагается относительно окна браузера, родительские элементы при этом игнорируются.
Второе отличие исходит из его названия. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.
Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.
Чем выше этот индекс тем выше на странице расположен элемент. С помощью него можно добиться, чтобы один элемент располагался поверх другого.
Color определяет цвет элемента. Под цветом в данном случае подразумевается цвет текста этого элемента. Если же нужно определить цвет элемента как блока (то есть фон), следует пользоваться свойством Background-Color.
a { color: yellow }
p { color: #050505 }
b { color: #AAA }
input { color: rgb(245,135,75) }
textarea { color: rgb(10%,30%,50%) }
Как всегда, впечатляет многообразие способов выражения мысли в CSS. Цвет можно задавать напрямую как RGB значение, или же посредством red скорее всего будет везде 0xFF0000, но с другой стороны какой-нибудь darkred или lightgreen уже не столь однозначен. Как видно, имена можно наугад выбирать из английских названий цветов, добавляя к ним еще приставки dark и light, то бишь темный и яркий. Ну а с RGB так вообще просто - числовые или процентные соотношения в свете красной, зеленой и голубой составляющей. На будущее - цвет в CSS везде задается одним из вышеприведенных способов.
Помимо обычных цветовых значений свойство background-color может принимать также значение transparent (установленное по умолчанию). В этом случае фон текста элемента цвета собственного не имеет, взамен используется подложка элемента уровнем выше (если он есть).
a {background-color: darkgreen; color: white }
body {background-color: #FFFFFF }
Задает фоновое изображение для элемента. Выглядит это так:
body { background-image: url("img/back.png") }
с документом ( scroll ).
body {background-image: url("img/sexy/girl/foto.png"); background-repeat: no-repeat;
background-attachment: scroll }
Определяет место начального заполнения или просто расположение фонового изображения. Изображение (само собой) начинает грузиться после загрузки всего документа. Поэтому для того, чтобы до этого славного момента страница выглядела бы более-менее культурно, рекомендуется задавать схожий (или хотя бы подходящий по дизайну) цвет фона с помощью background-color. Форматы изображений, поддерживаемый браузерами - GIF, PNG и JPEG отличаются друг от друга методами компрессии и областями применения. В анимации (там, где большая часть нарисована руками или мышью) рекомендуется использовать GIF или PNG - за счет лучшего соотношения сжатие/потеря качества по отношению к JPEG.
Вообще говоря, выражение потеря качества к форматам GIF и PNG вообще неприменимо - можно сказать, потеря цвета или цветовой палитры, поскольку собственно изображение при сжатии не меняется, преобразуется лишь его цветовая составляющая. Однако для фотографий, детализованных 3D-изображений и всего подобного лучше подходит JPEG, поскольку подмена цветовой палитры в таких изображениях неизбежно приведет к весьма заметной потере качества, а JPEG же использует довольно своебразный алгоритм сжатия, при котором изображение разбивается на цветовой и альфа (черно-белый канал), и проводящей их раздельное преобразование. Не вдаваясь в подробности, можно сказать, что при этом происходит весьма значительное сжатие изображение, приводящее к некоторым искажениям, называемым артефактами. Для фотографий при нежесткой степени компрессии такие артефакты не очень заметны в отличие от, скажем, скриншотов.
Позволяет установить заполнение (мощение) фоновым изображением. Очень полезное свойство, позволяющее маленьким изображением создать оригинальный фон страницы или элемента. Заполняться можно по вертикали ( repeat-y ), по горизонтали ( repeat-x ), в обоих направлениях ( repeat ) или не заполняться вообще ( no-repeat ).
body {
Таковое вот длинное название для определения своства прокрутки фонового изображения. Оно может быть фиксированным ( fixed ) или двигаться вместе разнообразно. Просто приведу примеры
top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% Это способ задания положения ключевыми словами или процентыми отступами (вначале отступ по X, затем по Y ). В одной строке указаны альтернативные варианты указания расположения. Помимо этого, можно использовать отступы в единицах (пикселях, ёкселях и иже с ними):
5px 10px 10em 2em 20ex 3px 15cm 15cm Выбирайте любой вариант по вкусу.
body {
background: background-color |
Цвет фона для страницы может выглядеть так:
body { background: black url("tile .gif") repeat }body { background: #A0A0A0 url("stones.png") repeat-x top right }body { background: white}
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.