Селекторы по id
ID – это уникальный идентификатор. В нем используется символ решетка (#), которая ставится перед значением элемента.
Создадим уникальный индентификатор ID, который отвечает за красный цвет.
#red {color:red} h1#blue {color:blue} |
Мы задали два идентификатора ID. Первый - красного цвета - можно использовать с любым элементом, второй же (синий) может быть применен только к классам заголовка первого уровня.
В теле документа напишите:
<P ID=red> Этот абзац красного цвета <H1 ID=blue> А этот заголовок первого уровня голубого цвета |
Контекстные селекторы
Применяются, когда одни теги приходится вкладывать в другие. Например, надо, чтобы все слова в абзаце, выделенные курсивом, были красного цвета. Тогда можно написать:
P I {color:red} |
Теги в этом случае пишутся через пробел.
В документе напишем так:
<p> Это вот у нас абзац обыкновенный <i>а эти слова написаны красным курсивом</i> а дальше опять обыкновенный абзац. |
Если требуется сделать выделенный красным курсив не в абзацах, а во всех заголовках таблиц, то в стилях можно написать так:
TABLE TH I {color:red} |
В документе напишем же так:
<TABLE border=5> <TR> <TH> Вот такое у нас <I>выделенное место</I> в заголовке </TH> </TR> <TR> <TD>тут обыкновенная ячейка</TD> <TD>и тут <i>обыкновенная</i> ячейка</TD> </TR> </TABLE> |
Сохраните изменения в файле tab.html и просмотрите результат в браузере.
Псевдоклассы
С помощью средств CSS можно переопределить цвета ссылок. Есть четыре состояния ссылок:
link - цвет еще не посещенной ссылки;
active - это когда на ссылку нажали;
visited - цвет посещенной ссылки;
hover - когда только навели мышкой на ссылку и думают – интересно, что будет дальше?
Для каждого состояния ссылки выберем свой фон: #333; #666; #ccc и #999. Пусть активные ссылки будут жирными без подчеркивания. Оставим подчеркивание только у наведенной ссылки.
<html> <head> <STYLE type="text/css"> A:link {font-family: Arial; font-size: 14pt; COLOR: #1EE6DF; text-decoration: none; background-color:#333} A:visited {font-family: Caption; font-size: 14pt; COLOR: #6CEAB3; text-decoration:none; background-color:#666} A:active {font-family: Caption; font-size: 14pt; COLOR: #C5EB14; text-decoration: none; background-color:#999} A:hover {font-family: Arial; font-size: 14pt; font-weight: bold; COLOR: #1F4292; text-decoration: underline; background-color:#ccc} </STYLE> </head> <body> <a href="#">Вот какая красивая ссылка!</a> </body> </html> |
Сохраните изменения и просмотрите результат в браузере.
BACKGROUND
С помощью background можно установить цвет, положение, изображение, привязку и повторяемость.
Background-color
<HTML> <HEAD> <TITLE>BACKGROUND-COLOR</TITLE> <STYLE type="text/css"> H4{background-color:yellow} LI{background-color:silver} P{background-color:red} </STYLE> </HEAD> <BODY> <h4>Стихотворение о пропавшей собачке</h4> <p>Старушка сдавала в багаж: <ul> <li>диван <li>чемодан <li>саквояж... </ul> Вот какой стишок!!! </BODY> </HTML> |
Сохраните документ под именем back.html и просмотрите результат в браузере.
Background-image
Пусть есть три картинки, сохраненные в папке image под именами 1.jpg; 2.jpg и 3.jpg:
|
|
|
1 |
2 |
3 |
Внесите изменения в файл back.html. Просмотрите результат в браузере.
H4{background-image:url(image/1.jpg)} LI{background-image:url(image/2.jpg)} P{background-image:url(image/3.jpg)} |
Background-repeat
Это свойство определяет, будет ли фоновое изображение заполнять все пространство (repeat - по умолчанию), либо не будет размножаться вообще (no-repeat), либо размножится только по горизонтали (repeat-x), или по вертикали (repeat-y).
Пусть для общего фона будет у нас нежно-салатовый цвет и картинка ris.gif:
Внесите
изменения. Просмотрите результат
в браузере.
<HTML> <HEAD> <TITLE>BACKGROUND-IMAGE</TITLE> <STYLE type="text/css"> BODY{background-color:#CCFFCC; background-image:url(image/ris5.gif); background-repeat:repeat-y} H2{background-image:url(image/ris1.jpg); background-repeat:repeat-x} LI{background-image:url(image/ris3.jpg)} P{background-image:url(image/ris2.jpg); background-repeat:repeat-y} </STYLE> </HEAD> <BODY> <center><h2>Стихотворение о пропавшей собачке</h2></center> <p>Старушка сдавала в багаж:</p> <ul> <li>диван <li>чемодан <li>саквояж... </ul> <p> Вот какой стишок!!! Если помните, то этой бедной старушке вместо ее белой, маленькой и пушистой болонки, подсунули беспородного, лохматого и здорового пса! Вот как работает таможня! </p> </BODY> </HTML> |
Background-position
Это свойство позволяет расположить фоновый рисунок в точно заданном месте. Оно может быть задано и в числах, и в процентах, и в словосочетаниях top, center, bottom, left или right
Рассмотрим это на примере таблицы. Пусть у нас фон состоит из картинки fon.gif, которая находится в папке "image":
Таблица:
td style="background-image:url(image/fon.gif); background-repeat:no-repeat" |
Это ячейка таблицы, в которой фон задан без повторений. Он прилип к левому верхнему углу ячейки. |
td style="background-image:url(image/fon.gif); background-repeat:no-repeat; background-position:100px 20px" |
Это ячейка таблицы, в которой фон отстоит от верхнего угла ячейки на 100px вправо по горизонтали и на 20px вниз по вертикали. |
td style="background-image:url(image/fon.gif); background-repeat:no-repeat; background-position:50% 30%" |
Это ячейка таблицы, в которой фон отстоит от верхнего угла ячейки на 50% вправо по горизонтали и на 30% вниз по вертикали. |
td style="background-image:url(image/fon.gif); background-repeat:no-repeat; background-position:top" |
Это ячейка таблицы, в которой фон выровнен по верхнему краю. |
td style="background-image:url(image/fon.gif); background-repeat:no-repeat; background-position:bottom" |
А тут - по нижнему!!! |
td style="background-image:url(image/fon.gif); background-repeat:no-repeat; background-position:left" |
Слева. |
td style="background-image:url(image/fon.gif); background-repeat:no-repeat; background-position:right" |
Справа. |
td style="background-image:url(image/fon.gif); background-repeat:no-repeat; background-position:center" |
Голова в самом центре ячейки. |
BORDER
Свойство BORDER устанавливает цвет (border-color), ширину границы (border-width) и стиль границы (border-style) как для всех четырех границ блока (элемента), так и для каждой его стороны:
border-color – цвет границы (например border-color:blue или border-color:#039 или border-color:rgb(51,51,255))
Стили рамок:
dashed - прерывистая линия |
|
<P STYLE="border-style:dashed"> вокруг блока текста - прерывистая линия</p> |
вокруг блока текста - прерывистая линия |
dotted - пунктирная линия |
|
<P STYLE="border-style:dotted"> вокруг блока текста - пунктирная линия</p> |
вокруг блока текста - пунктирная линия |
double - двойная линия |
|
<P STYLE="border-style:double"> вокруг блока текста - двойная линия</p> |
вокруг блока текста - двойная линия |
groove - углубленная трехмерная рамка |
|
<P STYLE="border-style:groove"> вокруг блока текста - углубленная трехмерная рамка</p> |
вокруг блока текста - углубленная трехмерная рамка |
inset - углубленная рамка |
|
<P STYLE="border-style:inset"> вокруг блока текста - углубленная рамка</p> |
вокруг блока текста - углубленная рамка |
outset - выпуклая рамка |
|
<P STYLE="border-style:outset"> вокруг блока текста - выпуклая рамка</p> |
вокруг блока текста - выпуклая рамка |
ridge - выпуклая трехмерная рамка |
|
<P STYLE="border-style:ridge"> вокруг блока текста - выпуклая трехмерная рамка</p> |
вокруг блока текста - выпуклая трехмерная рамка |
solid - сплошная линия рамки |
|
<P STYLE="border-style:solid"> вокруг блока текста - сплошная линия рамки</p> |
вокруг блока текста - сплошная линия рамки |
none - рамка отсутствует |
|
<P STYLE="border-style:none"> вокруг блока текста - рамка отсутствует</p> |
вокруг блока текста - рамка отсутствует |
Свойство border-width позволяет определить толщину рамки. Толщина может задаться как словами: thin, medium, thick, что соответствует 2 px, 4 px и 6 px, так и числовым значением с размерными единицами.
Бордюры можно задать как для всех сторон, так и для каждой стороны блока. Для этого существуют еще несколько свойств:
border-top
border-right
border-bottom
border-left
Например:
<p style="border-top:4px inset red; border-right:8px outset yellow; border-left:6px solid blue; border-bottom:4px dotted green"> Мы задали в свойствах - верхняя граница толщиной 4 px, утопленная рамка красного цвета; правая сторона - толщиной 8 px, выдавленная рамка желтого цвета; а левая - толщиной 6 px, голубая рамка сплошной линией. Нижняя - толщиной 4 px, пунктирная и зеленая. </p> |
И вот результат:
Мы задали в свойствах - верхняя граница толщиной 4 px, утопленная рамка красного цвета; правая сторона - толщиной 8 px, выдавленная рамка желтого цвета; а левая - толщиной 6 px, голубая рамка сплошной линией. Нижняя же - толщиной 4 px, пунктирная и зеленая.