2020-05-12
94
Свойства width и height определяют соответственно ширину и высоту объекта в пикселах, миллиметрах, сантиметрах или процентах от значения, принятого по умолчанию. Применяются они в основном для задания геометрических размеров изображений различной величины в случаях, когда их необходимо выровнять по вертикали или горизонтали. Данные свойства можно использовать как вместе, так и по отдельности.
Пример:
IMG {
height: 80%;
width: 120px:
}
Свойство float указывает на расположение какого-либо объекта в окне браузера относительно других объектов, размещенных рядом. Оно может принимать одно из следующих значений:
none — расположение объекта по умолчанию,
left — расположение объекта слева или
right — расположение объекта справа.
Пример:
TD {float: left:}
Свойство clear описывает правила расположения других объектов вокруг данного элемента web-страницы. Принимает одно из следующих значений: none —расположение объектов по умолчанию, left — расположение слева, right —справа и, наконец, both — расположение с двух сторон.
|
|
|
Пример:
IMG {clear: both;}
Свойство white-space применяется для управления отображением пробелов и переносов между элементами html-документа или словами текста. Свойство может использовать одно из следующих значений:
normal — стандартное отображение текста, при котором несколько следующих подряд пробелов преобразуются в один,
рге — допускается отображение нескольких символов пробела подряд и, наконец,
nowrap — запрещен перенос строки в пределах действия элемента.
Пример:
Р {white-space: рге;}
Свойство display применяется для управления взаимным расположением текстовых строк и объектов на экране монитора. Может принимать одно из следующих значений:
· block — отображает перенос строки до и после объекта;
· list-item — переносит строку до и после объекта, а кроме того, добавляет в начало строки маркер, как в случае использования маркированного списка;
· inline —допускается отображение объекта на одной строке с другими элементами;
· none — объект не отображается.
Пример:
IMG {display: block;}
Классы
CSS является достаточно гибкой структурой, позволяющей описывать не только определенные параметры для каких-либо элементов таблицы стилей, но и назначать различные свойства одним и тем же ее элементам. Предположим, в тексте вашего html-документа встречается несколько вариантов расположения текста: часть абзацев позиционируется по всей ширине страницы, а часть — по ее левому краю. И в том и в другом случае для описания отрывков текста используется тег <Р>. Если вы назначите данному элементу те или иные свойства, представив его в качестве селектора в файле CSS, то все отрывки текста, помеченные в коде web-страницы тегом <Р>, будут представлены на экране одинаковым образом. Чтобы избежать этого, можно использовать в составе css-файла специальные кодовые объекты, называемые классами.
|
|
|
Существуют два метода использования классов.
В первом случае класс можно представить как придуманное программистом уникальное имя-идентификатор какого-либо перечня свойств, предваряющееся символом точки и записанное исключительно с применением символов латинского алфавита и цифр. Оно ставится между названием элемента и его описанием. В общем виде синтаксис записи такой функции выглядит следующим образом:
НАЗВАНИЕ ЭЛЕМЕНТА. имя класса {свойство: значение;}
Простым примером использования данной функции CSS может служить следующий отрывок текста css-файла:
P.myclass {text-align: justify;}
В этом случае именем класса у вас служит символьный определитель «myclass». Теперь, если вы вызовете в коде web-страницы тег форматирования абзаца с указанием имени класса, данному абзацу будут присвоены значения, определенные в описании элемента <Р>:
<BODY>
<Р CLASS="myclass">Teкст, отформатированный согласно директивам CSS</P>
<Р>Текст. отформатированный по умолчанию</Р>
</BODY>
Очевидно, что теперь текст, заключенный в первую пару тегов <Р> и </Р>, будет растянут по всей ширине окна браузера, а текст, заключенный во вторую пару этих тегов, останется отформатированным по умолчанию. Таким образом, вы можете придавать одним и тем же элементам разметки гипертекста различные свойства в пределах одного документа.
Во втором случае класс можно использовать без привязки к какому-либо конкретному элементу, правила записи директив CSS допускают такую возможность. В этом случае общий синтаксис описания класса будет выглядеть так:
.имя класса{свойство: значение;}
В качестве примера такого представления класса можно предложить следующий вариант описания свойств элементов web-страниц:
,myclass{color: green;}
Записав предложенную выше строку в файл CSS, вы можете вызывать класс с именем «myclass» из кода html-документа, присваивая его свойства любому тегу. Например, указав в html-коде директиву
<Р CLASS="myclass">TeKCT, отображаемый зеленым цветом </Р>
вы сделаете так, что выводимый в окне браузера текст будет отображаться зеленым шрифтом. В этом же документе вы можете применить такую команду:
<Н3 CLASS="myclass ">текстовый заголовок</Н3>
Заголовок третьего уровня также будет представлен на экране зеленым цветом. Очевидно, что каждый класс можно вызывать в пределах одной web-страницы неограниченное количество раз, равно как каждый файл CSS может содержать неограниченное количество классов.
Создавая классы CSS, следует помнить о том, что для одного элемента каскадной таблицы стилей может быть специфицирован только один класс. Например, запись
A.class-l.c1ass-2{text-decoration: none;}
является в корне неправильной. Учтите также, что для классов, равно как и для селекторов, справедливы свойства группировки и наследования.
Идентификаторы
В отличие от селекторов и классов, идентификаторы представляют собой кодовые объекты CSS, которые позволяют назначать свойства отдельным компонентам HTML без использования прочих стандартных методов. В файле CSS идентификатор обозначается знаком <#», а в документе HTML — атрибутом ID. Он имеет собственное имя, состоящее из цифр и символов латинского алфавита. Общий синтаксис записи идентификаторов можно представить в следующем виде:
НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение;}
Простым примером использования идентификатора может служить такой отрывок файла CSS:
P#qwerty{text-align: left:}
В html-коде web-страницы этот идентификатор можно вызвать с использованием атрибута ID:
<Р ID="qwerty">Teкст. позиционированный по левой границе экрана</Р> Очевидно, что тег <Р>, включающий атрибут ID, в качестве значения которого использовано имя идентификатора, наследует свойства последнего. Если же в записи этого тега вы не укажете данный атрибут, текст будет выровнен по умолчанию либо согласно другим директивам HTML или CSS. Идентификаторы также можно записывать без указания имени элемента, которому они соответствуют. Так, строка
|
|
|
#qwerty{color: #00FF00:}
создает идентификатор, который может использовать любой элемент HTML, например:
<Н1 ID="qwerty">Teкст заголовка</Н1>
Комментарии
Файл CSS может содержать введенные пользователем комментарии, поясняющие назначение тех или иных участков кода. Комментарии в стандарте CSS заключаются в последовательность символов «/» и «*» следующим образом:
/* текст комментария */
