2017-10-25
620
Background-color
Background-image
Background-position
Background-repeat
Нужные значения дочерних свойств указываются через пробел, в любом порядке и по мере необходимости.
Как присвоить элементу или группе идентичных элементов индивидуальный стиль, отличный от основного, уже указанного в стилевом описании документа
Предположим в файле CSS к элементу <p> у нас применён следующий стиль:
p {color: #0000ff; font-size:14px}
Все параграфы синие и размер у них 14px, но нам надо сделать так чтобы некоторые из этих параграфов были розовые! И как быть??
На помощь приходят классы.
Для того чтобы выделить некоторые из параграфов розовым цветом, необходимо присвоить элементу определённое имя и вывести его тем самым в класс, в некую нестандартную, для страницы или сайта в целом, категорию.
Делается это так:
p.rose {color: #ff00ff; font: italic 16px Arial}
p - это элемент HTML (селектор) в данном случае наш параграф,.rose - это индивидуальное имя класса которое мы сами выдумали, оно может быть любым необязательно rose-розовый, точка между селектором и именем класса есть дань уважения к синтаксису принятому в CSS - теперь браузер поймет, что данный элемент p выведен в класс rose.
|
|
|
Ну что ж имя мы присвоили теперь нам необходимо в документе HTML указать теги (в нашем случае теги <p>) которым необходим индивидуальный стиль. Делается это с помощью атрибута class:
<p class="rose">Этот параграф использует имя класса rose и тем самым выделяется из основной массы</p>
Недостающие описания стиля выведенного в отдельный класс, элементы черпают из основного стилевого описания или же берут из свойств элемента "по умолчанию".
Идентификаторы они же id селекторы, весьма схожи с классами, с тем лишь отличием, что идентификатор может иметь одно единственное уникальное имя во всем документе. Идентификаторы, как правило, применяются в том случае, если возникает необходимость управлять стилем элемента динамически с помощью скрипта, обращаясь к его индивидуальному имени.
В файле CSS имя указывается со знаком решётки в его начале.
Например:
#block {color: #ff00ff; font: italic 16px Arial}
А к нужному элементу добавляется атрибут id="block" например
<p id="block">Параграф с идентификатором</p>
Для начала разберемся с самим понятием позиционирование. Позиционированием называют определение конкретного месторасположения на странице того или иного элемента (бокса). Позиционирование бывает абсолютным, относительным, фиксированным и статическим.
пример.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Позиционирование.</title>
</head>
<body>
<div style="float: left; background: #c00; border-style: double; padding: 5px; height: 1500px; width: 300px">
<div style="position: relative; left: 10px; top: 50px; background: #c0c; border-style: double; padding: 5px; width: 200px">Блок позиционирован относительно крёв элемента родителя.</div>
</div>
<div style="position: absolute; left:200px; top: 350px; background: #cc0; border-style: double; padding: 5px; width: 200px">Блок абсолютно позицонорован и выведен из общего потока, его положение задаётся от краёв окна браузера. Как видите данный блок может накладываться на другие элементы страницы.</div>
<div style="position: fixed; left: 150px; top: 150px; background: #0cc; border-style: double; padding: 5px; width: 200px">А это фиксированный блок, тоже выведен из общего потока однако при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.</div>
</body>
</html>
|
|
|
Итак, для того, что бы позиционировать какой либо элемент к нему применяют свойство position и одно из его возможных значений:
absolute - Абсолютное позиционирование элемента.
relative - Относительное позиционирование элемента.
fixed - Фиксированное позиционирование элемента.
static - Статическое позиционирование элемента. (Элемент отображаются как обычно.)
inherit - Наследует значение элемента родителя.
Абсолютно позиционированный элемент (position: absolute) выводится из общего потока и несмотря на другие элементы и их взаимное расположение, занимает указанное место на странице от края/краёв окна браузера. При таком способе позиционирования один элемент может накладываться поверх другого.
Для того чтобы позиционировать элемент от края/краёв окна браузера, нам понадобятся следующие свойства CSS:
bottom - Расстояние от нижнего края окна браузера.
left - Расстояние от левого края окна браузера.
right - Расстояние от правого края окна браузера.
top - Расстояние от верхнего края окна браузера.
Данные расстояния могут быть заданы в пикселях, процентах или любых других принятых единицах измерения CSS, значение по умолчанию - auto.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Абсолютное позиционирование.</title>
</head>
<body>
<div style="background: #0f0; border: #000000 2px solid; padding: 5px; margin: 10px; width: 300px; height: 200px;"><h1>Блок №1</h1></div>
<div style="background: #00f; border: #000000 2px solid; padding: 5px; margin: 10px; width: 500px; height: 100px;"><h1>Блок №2</h1></div>
<div style="position: absolute; left:200px; top: 100px; background: #f00; border: #000 2px solid; padding: 5px; width: 200px; height: 200px;"><h1>Блок №3</h1> Данный блок абсолютно позиционирован! <br><br> Блоки 1 и 2 никак не влияют на его месторасположение.</div>
</body>
</html>
Как видите, в примере третий блок вышел из общего потока элементов и живёт по своим собственным правилам, остальная разметка страницы никак не влияет на месторасположение данного блока.
Относительное позиционирование (position: relative) определяет место элемента относительно краёв элемента родителя и не выводится из общего потока.
Так же как и в случае с абсолютным позиционированием расстояния от края/краёв родительского элемента задаётся с помощью свойств: bottom, left, right, top.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Относительное позиционирование.</title>
<style type="text/css">
h1 {
color: #008000;
font-size:20px
}
div.blok1 {
background: #c0e4ff;
border: #000000 2px solid;
padding: 5px;
width: 500px;
height: 400px;
}
div.blok2 {
position: relative;
left: 150px;
background: #ffa0c5;
border: #000 2px solid;
padding: 5px; width: 250px;
height: 200px;
}
</style>
</head>
<body>
<div class="blok1">
<h1>Элемент родитель - блок №1</h1>
<div class="blok2">
<h1>Блок №2</h1>
Данный блок позиционирован относительно левого края элемента родителя.
</div>
</div>
</body>
</html>
В случае если элемент родитель явно не задан, то отчет ведётся от края/краёв окна браузера.
Фиксированное позиционирование (position: fixed) похоже на абсолютное, элемент выводится из общего потока, его координаты рассчитываются от краёв окна браузера, но при прокрутке страницы элемент не меняет своего положения.
|
|
|
Пример:
Файл style.css
h1 {
color: #800;
text-align: center;
font-size:30px
}
h2 {
color: #088;
text-align: center;
font-size:18px
}
div.blok1 {
background-image: url(fon.gif);
border: #000 2px solid;
padding: 5px;
width: 800px;
height: 4000px
}
div.blok2 {
position: fixed;
left: 250px;
top: 300px;
border: #080 6px double;
padding: 5px;
width: 300px
}
Файл index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Фиксированное позиционирование.</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="blok1">
<h1>Какая то страничка</h1>
</div>
<div class="blok2">
<h2>Фиксированный блок с навязчивой рекламой</h2>
<h1>Купи слона!!</h1>
Фиксированный блок, выведен из общего потока элементов, при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.
</div>
</body>
</html>
Псевдоклассы - это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.
Вот список всех псевдоклассов:
hover - Стиль элемента на который наведён курсор мыши.
active - Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
visited - Стиль для недавно посещённой ссылки.
link - Стиль для нечасто посещаемой ссылки.
focus - Стиль элемента находящегося в фокусе.
first-child - Стиль первого дочернего элемента.
lang - Определяет язык, который используется в фрагменте документа.
О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.
Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:
a:hover { color:#ff0000}
где:
a - элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover - после двоеточия собственно нужный нам псевдокласс.
{color:#ff0000} - ну и блок объявления стилей в фигурных скобках.
|
|
|
А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку - то она покраснеет.
Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.
Псевдокласс hover.
Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.
В качестве селектора псевдокласса может выступать не только какой либо элемент - тег, но и класс или идентификатор. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:
.menu:hover { color:#ff0000;}
Псевдокласс hover может быть применён к любому элементу, выводимому на экран, так в нашем примере, для того чтобы организовать подсветку строк таблицы мы применили его к тегу <tr>. Однако следует отметить, что браузер Internet Explorer 6 и его более ранние версии поддерживает псевдокласс hover только для ссылок - тег <a>, так что, к примеру, строки таблицы, при наведении на них курсора, в браузерах IE6 и ниже подсвечиваться не будут!
Рассмотрим сразу три псевдокласса созданных для работы со ссылками.
active - Стиль активной ссылки.
visited - Стиль для недавно посещённой ссылки.
link - Стиль для нечасто посещаемой ссылки.
Псевдокласс active присваивает ссылке определённый стиль в тот момент, когда эта ссылка активна, то есть в тот момент, когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Короче active - это стиль ссылки в момент клика по ней.
Браузеры некоторое время помнят, на какие ссылки нажимал пользователь в последнее время, так вот, псевдокласс visited указывает стиль ссылки, которая недавно посещалась пользователем.
Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a {...} и a:link {...} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.
Все три вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу - работать будет везде, кроме браузера Internet Explorer 6 и ниже.
Псевдокласс focus определяет стиль элемента, если тот находится в фокусе. Теперь собственно о том, что такое фокус?.. как в случае с оптикой и иллюзией, слово фокус в CSS обозначат, что некий объект, а точнее элемент, находится в центре внимания наблюдателя - пользователя. Такими элементами могут быть теги <a> <input> <select> и <textarea>.
VBScript.
Язык VBscript, так же как и JavaScript, используется для создания сценариев, как клиентских, так и серверных. Клиентские сценарии на VBScript интерпретируются только браузером Internet Explorer, а серверные используются на страницах ASP. Кроме того, VBScript очень близок к языкам Visual Basic и Visual Basic for Application (VBA). В большинстве случаев переделки программ для перевода с одного языка на другой оказываются минимальными. В HTML-документ сценарий на VBScript вставляется с помощью тэга < SCRIPT> с обязательным указанием атрибута LANGUAGE = (язык). В качестве значения этого атрибута следует указывать либо VBScript, либо VBS. Например,
< SCRIPT LANGUAGE = VBScript>
< SCRIPT LANGUAGE = VBS>
Если не указать язык сценария, то браузер будет предполагать, что сценарий написан на JavaScript и следовательно появятся сообщения об ошибках.
Сценарии на VBScript можно сохранять в текстовых файлах с расширением vbs и вставлять их в HTML-документ следующим образом:
< SCRIPT LANGUAGE = VBScript SRC = имя_файла.vbs>< /SCRIPT>
VBScript является регистронезависимым языком (в отличие от JavaScript). Это означает, что изменение регистра символов (с прописных на строчные и наоборот) в имени переменной приводит к одной и той же переменной. Например, variable, Variable и vaRiabLe — одинаковые переменные.
Принципы программирования сценариев на VBScript такие же, что и на JavaScript. Однако имеются весьма заметные отличия в синтаксисе и наборах встроенных средств.
Для вывода сообщения существует функция MsgBox, а для ввода — InputBox.
MsgBox-Выводит диалоговое окно с сообщением и набором кнопок; возвращает числовое значение, показывающее, какая кнопка нажата. Возможны две формы вызова:
