Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Кемеровский государственный университет культуры и искусств

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

CSS очень много.doc

Скачиваний:

Добавлен:

01.05.2025

Размер:

1.1 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2425 / 2525

Параметр 'right'

Данный параметр определяет правый край элемента.

Примечание: Если параметр "position" имеет значение "static", то параметр "right" не оказывает влияния.

Наследование: нет.

Примеры:

В примере показано, как задать правый край элемента pre на 50 px влево от правого края окна:
pre
{
position: absolute;
right: 50px

}

В примере показано, как задать правое поле элемента pre на 50 px вправо от правого края окна:
pre
{
position: absolute;
right: -50px

}

Может принимать следующие значения:

Значение	Описание
auto	Позволяет браузеру вычислить правую позицию.
%	Задает правую позицию в % от значения правого края окна.
length	Задает правую позицию в px, см, и т.д. от правого края окна. Допускаются отрицательные значения.

Параметр 'top'

Данный параметр определяет верхний край элемента.

Примечание: Если параметр "position" имеет значение "static", то параметр "top" не оказывает влияния.

Наследование: нет.

Примеры:

В примере показано, как задать верхний край элемента pre на 50 px ниже верхнего края окна:
pre
{
position: absolute;
top: 50px

}

В примере показано, как задать верхний край элемента pre на 50 px выше верхнего края окна:
pre
{
position: absolute;
top: -50px

}

Может принимать следующие значения:

Значение	Описание
auto	Позволяет браузеру вычислить верхнюю позицию.
%	Задает верхнюю позицию в % от значения верхнего края окна.
length	Задает верхнюю позицию в px, см, и т.д. от верхнего края окна. Допускаются отрицательные значения.

Параметр 'vertical-align'

Данный параметр задает вертикальное выравнивание элемента.

Наследование: нет.

Примеры:

img

{

vertical-align: baseline

}

Может принимать следующие значения:

Значение	Описание
baseline	Элемент размещается на базовой строке родительского элемента.
sub	Выравнивает элемент как нижний индекс
super	Выраванивает элемент как верхний индекс
top	Вершина элемента выравнивается с вершиной самого высокого элемента в строке
text-top	Вершина элемента выравнивается с вершиной шрифта родительского элемента
middle	Элемент помещается в середине родительского элемента
bottom	Нижняя часть элемента выравнивается с самым нижним элементом в строке
text-bottom	Нижняя часть элемента выравнивается с минимальной нижней точкой родительского элемента
length
%	Выравнивает элемент в % от значения параметра "line-height". Допускаются отрицательные значения.

Параметр 'z-index'

Данный параметр задает порядковый номер элемента в стеке. Элемент с большим порядковым номером стека всегда находится перед элементом с меньшим порядковым номером стека.

Примечания:

Элементы могут иметь отрицательные порядковые номера стека.
Z-index работает только с теми элементами, которые были позиционированы не как static (например, position:absolute; )!

Наследование: нет.

Пример:

img

{

position:absolute

z-index: 1

}

Может принимать следующие значения:

Значение	Описание
auto	Порядковый номер элемента в стеке равен номеру родительского элемента
number	Задает порядковый номер элемента в стеке

Лекция 13. Псевдо-классы CSS

Псевдо-классы используются для создания специальных эффектов для некоторых элементов.

Примеры:

В примере показано, как выделить гиперссылку в документе цветом.
<html>
<head>
<style type="text/css">
a:link {color: #808080}
a:visited {color: #FFFF00}
a:hover {color: #00FF00}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><a href="index.php">This is a link</a></p>
<ol><b>Примечание:</b>
<li><i>a:hover ДОЛЖЕН следовать в определении CSS после <b>a:link</b> и
<b>a: visited!!</b></i></li>
<li><i>a:active ДОЛЖЕН следовать в определении CSS после <b>a:hover!!</b></i></li>
</ol>
</body>

</html>

В примере показано, как определить для гиперссылки другой стиль.
<html>
<head>
<style type="text/css">
a.color:link {color: #808000}
a.color:visited {color: #008080}
a.color:hover {color: #C0C0C0}
a.size:link {color: #808000}
a.size:visited {color: #008080}
a.size:hover {font-size: 250%}
a.background:link {color: #808000}
a.background:visited {color: #008080}
a.background:hover {background: #C0C0C0}
a.family:link {color: #808000}
a.family:visited {color: #008080}
a.family:hover {font-family: sans-serif}
a.line:link {color: #808000; text-decoration: none}
a.line:visited {color: #008080; text-decoration: none}
a.line:hover {text-decoration: line-through}
</style>
</head>
<body>
<p>Наведите курсор мыши на ссылки.</p>
<p><b><a class="line" href="index.php">Меняем оформление текста у ссылки</a></b></p>
<p><b><a class="size" href="index.php">Меняем размер у ссылки</a></b></p>
<p><b><a class="background" href="index.php">Меняем цвет фона у ссылки</a></b></p>
<p><b><a class="family" href="index.php">Меняем семейство шрифта у ссылки</a></b></p>
<p><b><a class="color" href="index.php">Меняем цвет у ссылки</a></b></p>
</body>

</html>

В примере показано, как можно использовать псевдо-класс :first-child.
<html>
<head>
<style type="text/css">
a:first-child
{
text-decoration:underline
}
</style>
</head>
<body>
<p>Посетите <a href="http://www.intuit.ru">Intuit</a> там много бесплатных курсов</p>
<p>Посетите <a href="http://www.intuit.ru">Intuit</a>
там есть бесплатные учебные программы</p>
</body>

</html>

В примере показано, как можно использовать псевдо-класс :lang.
<html>
<head>
<style type="text/css">
b:lang(fr)
{
quotes: "'" "'"
}
</style>
</head>
<body>
<p>Просто текст<b lang="fr">Выделенный текст:</b> Сам текст.</p>
</body>

</html>

Синтаксис псевдо-классов:

selector:pseudo-class {property: value}

Классы CSS также можно использовать с псевдо-классами:

selector.class:pseudo-class {property: value}

Анкерные псевдо-классы

Различные ссылки, на которые указывает курсор мыши, можно выводить различным образом в поддерживающих CSS браузерах:

a:link {color: #808080 } /* непосещенная ссылка*/

a:visited {color: #008000 } /* посещенная ссылка */

a:hover {color: #008080 } /* курсор мыши указывает на ссылку*/

a:active {color: #00FF00 } /* выбранная ссылка*/

Примечания:

Чтобы иметь эффект, a:hover ДОЛЖЕН следовать в определении CSS после a:link и a:visited!!
Чтобы иметь эффект, a:active ДОЛЖЕН следовать в определении CSS после a:hover!!
Имена псевдо-классов не зависят от регистра символов.

Псевдо-классы и классы CSS

Псевдо-классы можно объединять с классами CSS:

a.silver:visited {color: #C0C0C0 }

<a class="silver" href="index.php">Silver</a>

Если ссылка в приведенном выше примере была посещена, она будет выводиться серебряным цветом.

CSS2 - Псевдо-класс :first-child

Псевдо-класс :first-child соответствует определенному элементу, который является первым потомком другого элемента.

Примеры:

В данном примере селектор соответствует любому элементу h1, который является первым потомком элемента div, и делает отступ для первой строки первого параграфа внутри элемента div:
div h1:first-child
{
text-indent:50px

}

Этот селектор будет соответствовать первому параграфу внутри div в следующем коде:

<div>

<h1>

Первый заголовок в div.

Имеет отступ первой строки.

</h1>

<h1>

Второй заголовок в div.

Не имеет отступа.

</h1>

</div>

но он не будет соответствовать параграфу в следующем коде HTML:

<div>

<p>

Параграф внутри div.

</p>

<h1>Первый заголовок в div.

Не имеет отступа.

</h1>

</div>

В данном примере селектор соответствует любому элементу strong, который является первым потомком элемента div, и задает font-style как italic для первого strong внутри элемента div:
div:first-child strong
{
font-style: italic

}

В следующем коде HTML strong является первым потомком элемента div:

<div>Изучайте -- <strong>язык программирования</strong> C++.</div>

В данном примере селектор соответствует любому элементу b, который является первым потомком любого элемента, и задает text-decoration как none:
b:first-child
{
text-decoration: none

}

В следующем примере первый элемент b в коде HTML ниже является первым потомком параграфа и не будет подчеркиваться. Но второй элемент a в параграфе не является первым потомком параграфа и будет подчеркнут:

<p>

Посетите <b>www.intuit.ru</b> и выучите CSS!

Посетите <b><a href="http://www.intuit.ru">www.intuit.ru</a></b> и выучите HTML!

</p>

CSS2 - Псевдо-класс :lang

Данный псевдокласс позволяет определить специальные правила для различных языков. В следующем примере класс :lang определяет тип кавычек для элементов b с атрибутом lang со значением "fr":

<html>

<head>

b:lang(fr)

{

quotes: "'" "'"

}

</style>

</head>

<body>

<p>Просто текст <b lang="fr">Выделенный текст</b>

Остальной текст</p>

</body>

</html>

Псевдо-классы

Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

Псевдо-класс	Назначение	IE	F	N	W3C
:active	Добавляет специальный стиль активированному элементу	4	1	8	1
:focus	Добавляет специальный стиль элементу, когда элемент находится в фокусе	-	-	-	2
:hover	Добавляет специальный стиль элементу, когда указатель мыши находится над элементом	4	1	7	1
:link	Добавляет специальный стиль непосещенной ссылке	3	1	4	1
:visited	Добавляет специальный стиль посещенной ссылке	3	1	4	1
:first-child	Добавляет специальный стиль элементу, который является первым потомком некоторого другого элемента		1	7	2
:lang	Позволяет автору определить используемый в заданном элементе язык		1	8	2

Лекция 14. Псевдо-элементы CSS

Эти псевдо-элементы используются для добавления специальных эффектов в некоторые селекторы.

Примеры:

В примере показано, как добавить специальные эффекты к первой букве текста.
<html>
<head>
<style type="text/css">
h1:first-letter
{
color: #008080;
font-size: xx-large
}
</style>
</head>
<body>
<h1>Заголовок</h1>
</body>

</html>

В примере показано, как добавить специальные эффекты к первой строке текста.
<html>
<head>
<style type="text/css">
p:first-line
{
color: #808000;
font-variant: normal
}
</style>
</head>
<body>
<p>
Пример использования псевдо-элемента :first-line.<br>
Следующая строка в параграфе.
</p>
</body>

</html>

Синтаксис псевдо-элементов:

selector:pseudo-element {property: value}

Классы CSS также можно использовать с псевдо-элементами:

selector.class:pseudo-element {property: value}

Псевдо-элемент :first-line

Данный псевдо-элемент используется для добавления специальных стилей к первой строке текста в селекторе:

div {font-size: 5pt}

div:first-line {color: #808000; font-variant: normal}

<div>Текст, продолжающийся на две или большее количество строк </div>

В примере выше браузер выводит первую строку (длина определяется размером окна браузера), форматированную согласно псевдо-элементу "first-line".

Примечания:

Псевдо-элемент "first-line" можно использовать только с элементами уровня блока.
Следующие параметры применимы в псевдо-элементе "first-line":
- параметры шрифта
- параметры цвета
- параметры фона
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear

Псевдо-элемент :first-letter

Данный псевдо-элемент используется для добавления специального стиля первой букве текста в селекторе :

div {font-size: 20pt}

div:first-letter {font-size: 150%; float: right}

<div>Первое слово имеет специальный стиль</div>

Примечания:

Псевдо-элемент "first-letter" может использоваться только с элементами блочного уровня.
Следующие параметры применимы в псевдо-элементе "first-letter":
- параметры шрифта
- параметры цвета
- параметры фона
- параметры отступов
- параметры полей
- параметры границ
- text-decoration
- vertical-align (только если 'float' определен как 'none')
- text-transform
- line-height
- float
- clear

Псевдо-элементы и классы CSS

Псевдо-элементы можно объединять с классами CSS:

div.first:first-letter {color: #800000 }

<div class="first">Параграф статьи</div>

В примере выше первая буква всех элементов div, где class="first", будет красной.

Несколько псевдо-элементов

Несколько псевдо-элементов можно объединять:

div {font-size: 20pt}

div:first-letter {color: #808000; font-size: 150%}

div:first-line {color: #808080 }

<div>Текст текст текст</div>

В примере выше первая буква параграфа будет оливковой с размером шрифта 20pt. Остальная часть первой строки будет серой, а остаток параграфа будет иметь цвет по умолчанию.

CSS2 - Псевдо-элемент :before

Данный псевдо-элемент можно использовать для вставки некоторого содержимого перед элементом.

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

h5:before

{

content: url(song.wav)

}

CSS2 - Псевдо-элемент :after

Псевдо-элемент ":after" можно использовать для вставки некоторого содержимого после элемента.

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

h5:after

{

content: url(song.wav)

}

Псевдо-элементы

Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

Псевдо-элемент	Назначение	IE	F	N	W3C
:first-letter	Добавляет специальный стиль к первой букве текста	5	1	8	1
:first-line	Добавляет специальный стиль к первой строке текста	5	1	8	1
:before	Вставляет некоторое содержимое перед элементом		1.5	8	2
:after	Вставляет некоторое содержимое после элемента		1.5	8	2

Лекция 15. Типы носителей информации в CSS2

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

Типы носителей информации

Некоторые параметры CSS предназначены только для определенных носителей информации. (Например, параметр "voice-family" создан для звуковых агентов пользователей.)
Некоторые другие параметры можно использовать для различных типов носителей информации. (Например, параметр "font-size" можно использовать для экрана монитора и для печати на бумаге, но, возможно, с различными значениями.)

Что касается шрифтов, то документу обычно требуется на экране шрифт большего размера, чем на бумаге. Шрифты sans-serif легче читать на экране, а шрифты serif на бумаге.

Правило @media

Данное правило позволяет задать различные правила стилей для различных носителей информации в одной таблице стилей.

Стиль в следующем далее примере определяет для браузера вывод на экране шрифтом Times размером 30 пикселей. Но если страница будет печататься, то это будет сделано шрифтом Verdana размером 8 пикселей. Отметим, что степень жирности шрифта задана normal, как на экране, так и на бумаге:

<html>

<head>

<style>

@media screen

{

div.test {font-family: times,serif; font-size:30px}

}

@media print

{

div.test {font-family: verdana,sans-serif; font-size:8px}

}

@media screen,print

{

div.test {font-weight:normal}

}

</style>

</head>

<body>

...

</body>

</html>

Различные типы носителей информации

Замечание: Имена типов носителей информации не зависят от регистра символов.

Тип носителя информации	Описание
all	Используется для всех типов устройств носителей информации
aural	Используется для синтезаторов речи и звука
braille	Используется для устройств чтения азбуки Брайля для слепых
embossed	Используется для устройств печати азбуки Брайля для слепых
handheld	Используется для маленьких или карманных устройств
print	Используется для принтеров
projection	Используется для проецируемых изображений, таких как слайды
screen	Используется для экранов компьютера
tty	Используется для носителей информации, использующих шрифтовую сетку с фиксированным шагом, таким как телетайп и экранный терминал
tv	Используется для устройств телевизионного типа

Заключение

Этот учебник учит использовать CSS для управления стилем и компоновкой множества Web-сайтов одновременно.

Он учит использовать CSS для:

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

Чтобы лучше освоить CSS разберите приведенные примеры использования CSS и просмотрите справочник по CSS.

Теперь после изучения CSS, что дальше?

Следующий шаг состоит в изучении XHTML и JavaScript.

XHTML

XHTML является "новым" HTML. Самой последней рекомендацией HTML является HTML 4.01. HTML будет заменен XHTML, который является более строгой и ясной версией HTML.

JavaScript

Статический Web-сайт прекрасно подходит, когда надо просто показать простой контент.

JavaScript позволяет сделать Web-сайт более динамичным, т.е. реагирующим на события и взаимодействующим с пользователем и является самым популярным языком сценариев в Интернет и поддерживается всеми основными браузерами.

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2425 / 2525

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
10.04.201524.81 Кб176. Рабочий Блокнот.docx
#
09.11.2019146.43 Кб147ЛР(скорость звука).doc
#
10.04.20153.32 Mб15Bakhtin.doc
#
01.07.202536.93 Кб0bestreferat-48835.docx
#
15.03.2016180.22 Кб45B_3_V_15_Horovedenie_i_horovaya_aranjirovka.doc
#
01.05.20251.1 Mб1CSS очень много.doc
#
10.04.20151.16 Mб33DENISENKO1.pdf
#
03.09.20191.71 Mб7doc11.doc
#
15.03.2016147.46 Кб148Dvoynos_Analiz_khorovogo_proizvedenia.doc
#
10.04.20151.94 Mб225Eryomenko_uchebnik.pdf
#
28.04.20192.36 Mб10gorchakov_1.docx