Границы справа слева сверху и снизу отдельно.

Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними "коллегами по цеху" список которых приведён ниже:

border-bottom - Определяет стиль, цвет и ширину нижней границы элемента.

· border-bottom-color - Устанавливает цвет нижней границы элемента.

· border-bottom-style - Определяет стиль нижней границы элемента.

· border-bottom-width - Определяет ширину нижней границы элемента.

border-left - Определяет стиль, цвет и ширину левой границы элемента.

· border-left-color - Устанавливает цвет левой границы элемента.

· border-left-style - Определяет стиль левой границы элемента.

· border-left-width - Определяет ширину левой границы элемента.

border-right - Определяет стиль, цвет и ширину правой границы элемента.

· border-right-color - Устанавливает цвет правой границы элемента.

· border-right-style - Определяет стиль правой границы элемента.

· border-right-width - Определяет ширину правой границы элемента.

border-top - Определяет стиль, цвет и ширину верхней границы элемента.

· border-top-color - Устанавливает цвет верхней границы элемента.

· border-top-style - Определяет стиль верхней границы элемента.

· border-top-width - Определяет ширину верхней границы элемента.

Не буду описывать каждый из них, думаю и так понятно, что дело обстоит, так же как и с их сородичами, свойствами border-style, border-width и border-color, кроме того факта, что в данном случае свойства указываются для одной из сторон границы элемента.

Приведу пример:

<!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">
div{
border-left: 10px solid #008000;
background: #c6f2de;
}
</style>
</head>
<body>
<div>
<p>В этом примере у контейнера div мы обозначили только его левую границу с помощью свойства border-left написав:</p>
div{<br>
border-left: 10px solid #008000;<br>
background: #c6f2de;<br>
}
<p>Такого же результата можно было бы добиться прописывая свойства стиля, толщины и цвета для левой границы элемента отдельно.</p>
<p>Это выглядело бы вот так:</p>
div{<br>
border-left-color: #008000;<br>
border-left-style: solid;<br>
border-left-width: 10px;<br>
background: #c6f2de;<br>
}
<p>Кстати Вам этот блок ничего не напоминает? :)</p>
</div>
</body>
</html>

Border

Свойство border - базовый атрибут одновременно определяет стиль, цвет и толщину границы элемента.

Так как атрибут border является базовым, значения родственных свойств указываются в любом порядке через пробел.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>border</title>
<style type="text/css">
div{
border: RGB(25, 125, 25) 6px ridge;
}
</style>
</head>
<body>
<div>
<h3>А знаете ли Вы что:</h3>
<p>Слон - символ положительного характера - используется в Азии как царское верховное животное и высоко ценится за ум и хитрость.</p>
... ... ...
</div>
</body>
</html>

Однако если Вы хотите присвоить разные свойства различным сторонам границы элемента или только одной из них, пользуйтесь свойствами border-bottom, border-left, border-right, border-top.

Границы таблицы.

Свойство CSS border-collapse определяет стиль отображения границ таблицы.

По умолчанию каждая ячейка таблицы имеет собственную рамку (ну если конечно использован атрибут HTML border или одноимённое свойство CSS), так вот в местах соприкосновения ячеек образуется двойная линия, border-collapse заставляет браузер анализировать таковые места и поступать с ними согласно присвоенному значению данному свойству.

Внешний вид границ таблицы может принимать следующий вид:

· separate - ячейки таблицы отделены друг от друга (по умолчанию).

· collapse - ячейки таблицы не имеют промежутков между собой.

· inherit - свойства наследуются у родителя элемента. (работает далеко не во всех браузерах.)

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Стиль таблицы</title>
</head>
<body>
<table cellpadding="5" border="5">
<caption>Таблица с бордюром по умолчанию</caption>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
</table>
<hr>
<table cellpadding="5" border="5" style="border-collapse: collapse">
<caption>А эта таблица использует свойство CSS border-collapse с значением collapse</caption>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
</table>
</body>
</html>

Свойство border-collapse применяется только к тегу <table> и элементам, у которых атрибут display имет значение table или inline-table.О свойстве display расскажу в отдельной главе.

Полезные советы:

· Довольно часто слышу вопрос: - "Как сделать вертикальную линию, по аналогии с тегом <hr> - горизонтальная разделительная линия?".

Один из способов решения данной задачи является использование блока "пустышки" нужных размеров с левым или правым бордюром (свойства: border-left или border-right) необходимого стиля, который собственно и будет выступать в роли вертикальной линии.

Глава 6

Классы и идентификаторы.

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

Теперь, когда Вы уже познакомились с некоторыми свойствами CSS, поняли принцип построения и внедрения CSS в HTML, настал час и необходимость поговорить о CSS классах и идентификаторах, так как дальнейшее обучение, хоть и представляется возможным, но не раскроет в полной мере все возможности CSS.

Классы CSS.

Начнём с классов..

Как присвоить элементу или группе идентичных элементов индивидуальный стиль, отличный от основного, уже указанного в стилевом описании документа? Не знаю задавались Вы этим вопросом или нет, но рано или поздно на него необходимо найти ответ.

Итак.. предположим в файле 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>

Ну и пример:

<!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">
body {background-color: #c5ffa0}
p {color: #0000ff; font-size:14px}
p.rose {color: #ff00ff; font: italic 16px Arial}
</style>
</head>
<body>
<p>На этом сайте Вы найдёте любую информацию о слонах.</p>
<p>У нас Вы можете по выгодным ценам приобрести лучших слонов!!</p>
<p>Только у нас Вы можете взять любых слонов на прокат!!</p>
<p class="rose">Специальное предложение для девушек! Розовые слоны!! только у нас!!!</p>
</body>
</html>

В данном примере класс "rose" может быть присвоен только параграфу - элементу p. Для того чтобы данное стилевое описание могло распространятся на все элементы, в файле CSS (или между тегами <style></style> в заголовке документа) элемент явно не указывается и синтаксис приобретает следующий вид:

.rose {color: #ff00ff}

Теперь указав в любом элементе class="rose" он примет стиль данного класса.

Пример:

<!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">
body {background-color: #c5ffa0}
h1 {color: #0000ff; font-size:22px}
p {color: #008000; font: italic 16px Arial}
span {color: #0080ff; font-size:12px}
.rose {color: #ff00ff}
</style>
</head>
<body>
<h1>Это заголовак с основным стилем CSS</h1>
<h1 class="rose">А этот заголовок использует class="rose"</h1>
<hr>
<a href="#" title="Обыкновенная ссылка">Это ссылка по умолчанию</a><br>
<a href="#" title="Розовая ссылка" class="rose">А эта ссылка использует class="rose"</a><br>
<hr>
<span>Этот строковый блок использует основной стиль</span><br>
<span class="rose">А этот класс rose</span>
<hr>
<p>Параграф без указания класса</p>
<p class="rose">Параграф с указанием класса</p>
</body>
</html>

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

Например, заголовок <h1 class="rose"> был синим, а стал розовым, но при этом сохранил свой размер 22 пикселя, так как в нашем классе rose никаких разговоров о размере шрифта не шло.. мы лишь "договорились" с браузером, что элементы из группы rose будут розовыми.

Идентификаторы

Идентификаторы они же 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>
<style type="text/css">
body {background-color: #c5ffa0}
p {color: #0000ff; font-size:14px}
#rose {color: #ff00ff; font: italic 16px Arial}
</style>
</head>
<body>
<p>Это обыкновенный параграф</p>
<p id="rose">А этот параграф уникальный</p>
</body>
</html>

Ну так в чем же отличие между классом и идентификатором?

Покажу на примере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Идентификаторы и скрипты</title>
<script>
function show_hide(id){
var item = document.getElementById(id);
if (item.style.display == 'none') {item.style.display = 'block';}
else item.style.display = 'none';
}
</script>
</head>
<body>
<div id="block" style="display:none">
<h2 style="color: #ff00ff">А вот и я!!</h2>
<img src="rosemammoth.gif">
</div>
<a href="javascript:show_hide('block')" title="Развернуть/Свернуть" style="color: #ff00ff">Нажми на меня!!</a>
<hr>
<div id="block1" style="display:none">
<h2 style="color: #0000ff">А здесь я!!</h2>
<img src="mammoth.jpg">
</div>
<a href="javascript:show_hide('block1')" title="Развернуть/Свернуть" style="color: #0000ff">И на меня нажми!!</a>
</body>
</html>

Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки <div> с уникальными именами "block" и "block1" (скрывать и показывать его по нажатии на ссылку), и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать, как скрипт может обращаться к блоку через атрибут id. А вот с помощью классов мы бы не достигли такого результата.

Ну, думаю, объяснил кое как..

Полезные советы:

· При построении CSS будьте логичны, соблюдайте "значимость" элементов и их порядок, так же как они вложены друг в друга в HTML коде.

Например:

body {сначала опишите стиль страницы в целом}
div {потом её отдельных частей - блоков}
a {затем ссылок}
h1.-.h6 {далее заголовков}
p {и в конце параграфов}

Для чего это нужно?

Ну во-первых, просто для удобного чтения и "навигации" по CSS описанию. Когда Вам потребуется найти какой ни будь элемент Вы уже изначально будете представлять где он приблизительно находится в начале, середине, или конце..

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

Что увидит (сначала увидит) пользователь при "неправильном" построении CSS? Красивый шрифт, беспорядочно разбросанный в окне браузера? Или нормальное построение, но без красивого шрифта? - Это уже решать Вам!

· При использовании классов и идентификаторов придумывайте им осмысленные информативные имена. Варианты тапа: .aaa .123 #abc #cba приведут к путанице!, я уж не говорю о том, что возможно в Вашем коде будет разбираться посторонний человек. Придумайте свою "систему" названий и не нарушайте её, так Вы сэкономите собственное время и затраченные усилия.

Глава 7

Размеры элемента.

Блоки и строки.

Прежде чем говорить о работе с размерами элементов их расположении, полях и отступах, расскажу немного о самих элементах, точнее об их типах.

Все элементы (теги) можно разделить на две категории: Блочные и строковые.

Чем они отличаются?

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

К блочным (block) элементам относятся:
<div>, <dl>, <form>, <h1>- <h6>, <hr>, <noscript>, <ol>, <p>, <pre>, <table>, <ul>…

К строчным (inline) элементам относятся:
<a>, <br>, <cite>, <code>, <em>, <img>, <input>, <label>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>…

Основные отличия от элементов строкового и блочного типа заключаются в том что:

Боксовые элементы могут содержать в себе другие элементы, как блочного, так и строкового типа. Строчные же элементы могут включать в себя только строчные элементы.

На примере:

<div>
<b>Это <i>правильная строка</i> в блоке</b>
</div>

<i><b>
<div>А это неправильная толи строка толи блок. Так лучше не делать!!</div>
</b></i>

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

По умолчанию блочные элементы имеют ширину 100% и тем самым оставляют за собой все пространство по горизонтали, у строковых же элементов ширина определяется содержанием.

Думаю, на примере будет понятнее.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Блочные и строковые элементы</title>
</head>
<body>
<p style="background-color: #00ffff;">Параграф</p>
<p style="background-color: #00ff00;">Параграф</p>
<p style="background-color: #ffff00;">Параграф</p>
<hr>
<span style="background-color: #00ffff;">Строка</span>
<span style="background-color: #00ff00;">Строка</span>
<span style="background-color: #ffff00;">Строка</span>
<hr>
<div style="background-color: #00ffff;">Блок</div>
<div style="background-color: #00ff00;">Блок</div>
<div style="background-color: #ffff00;">Блок</div>
</body>
</html>

Предыдущая 1 2 345 6 7 8 9 Следующая

Не нашли, что искали? Воспользуйтесь поиском по сайту: