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

⇐ ПредыдущаяСтр 4 из 9Следующая ⇒

Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами 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 Следующая ⇒