Открываем у себя, смотрим, тестируем...
Если, что не так, сильно не пинайте. Я старался...
Осознаю, что данная тема не новая, но тем не менее...
html
- Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slider</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Основной блок -->
<div id="main">
<!-- Блок меню -->
<div id="menu">
<ul>
<li><a href="#one">1</a></li> <!-- Цепляем якорь к блокам с контентом(div#one, div#two...) -->
<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
<li><a href="#six">6</a></li>
</ul>
</div>
<!-- Блок с вкладками -->
<div id="block">
<div id="one">
Если Вы уже прошли курс обучения по учебнику HTML (http://webremeslo.ru/html/glava0.html) или же хорошо знакомы с HTML почерпнув необходимые знания из других источников, то настало время взяться за изучение CSS. CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.
</div>
<div id="two">
Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился! Приведу ряд доводов в пользу использования CSS: HTML в чистом виде имеет весьма ограниченный набор инструментов не позволяющий решать те или иные дизайнерские и функциональные задумки веб-мастера. Ну вот хотя бы, к примеру, взять больной вопрос всех начинающих веб-ремесленников "Как убрать подчеркивание ссылки?" или "Как сделать чтобы наведя курсором на эту самую ссылку она меняла цвет и подсвечивалась?" с помощью одного HTML этого никак не сделать!! А сколько их еще таких "больных вопросов"? - тьма.. Тут то и приходит на помощь CSS, который решает большинство задач касающихся дизайна сайта.
</div>
<div id="three">
Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта?
</div>
<div id="four">
Допустим: все заголовки делать красным цветом, параграфы писать курсивам, ссылки не подчёркивать :) фон на всех страницах залить зелёным, и т. д. … а потом просто заставить эти 100 страниц HTML обращаться к файлу CSS и черпать из него нужную информацию? Теперь когда Вам вздумается, к примеру, перекрасить все заголовки из красного в зеленый, Вам ненужно открывать все 100 страниц находить в них теги и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.
</div>
<div id="five">
Ввиду того, что CSS позволяет выносить повторяющиеся стилевые описания одних и тех же элементов в один файл происходит значительная "разгрузка" документов HTML, а это экономия объема, трафика, времени, денег.. HTML код становится лёгким, удобным для чтения и редакции.
</div>
<div id="six">
Ну как? Заинтриговал? Если да то рекомендую перейти к непосредственному изучению CSS. В главах этого учебника Вы научитесь внедрять каскадные таблицы стилей на страницы Вашего сайта, познакомитесь с основными стилевыми свойствами элементов на примере создания сайта с использованием CSS, вникните в тонкости и хитрости дела. Если Вы уже знакомы c каскадными таблицами стилей и Вас интересует исключительно справочная информация, то предлагаю заглянуть в справочник CSS (http://webremeslo.ru/spravka/spravka4.html) где собранны и кратко описаны свойства CSS и их возможные значения.
</div>
</div>
</div>
</body>
</html>
CSS
- Код: Выделить всё
body, html, div, ul{margin:0; padding:0;}
#main{
width:500px; /*Стилизуем основной блок*/
height:280px;
background:white;
border:5px double #000;
margin:0 auto;
margin-top:50px;
}
#menu{
width:100%; /*Стилизуем блок меню*/
height:30px;
background:rgb(30%, 70%, 50%);
}
#menu ul{
list-style:none;
}
#menu ul li{
float:left;
font-weight:bold;
text-align:center;
}
#menu ul li a{
display:block;
width:73px;
height:20px;
text-decoration:none;
background:black;
margin:3px 0 0 5px;
color:#fff;
border:2px solid silver;
}
#menu ul li a:hover{background:white; color:#000; border:2px solid black;}
#block {
overflow:hidden;/*Скрываем все, что превышает height:250px;.*/
height:250px;
}
#block div{
padding:10px;
height:230px; /*Высота блока родителя(#block)-20px(padding 10px сверху и 10px снизу). Ширину не вычитаем, так как она явно не задана.*/
text-align:justify; /*Как следствие, будет отображаться содержимое только каждого отдельно взятого элемента */
font-size:15px;
background:black;
color:#fff;
}
Валидный код: xhtml и css.
Кроссбраузерно, включая IE6.(Проблема возникла только с оперой версии 9.65, но возможно она у меня "битая").
Единственное, что у меня не получилось сделать(из задуманного) - это активные вкладки на css. Если у кого-то есть мысли как это сделать без javascript и jquery, пишите.
С уважение, Александр
P.S. Я прекрасно осознаю, что то-же самое можно реализовать с помощью jquery(и будет работать гораздно эффектней), но я преследовал другую цель - показать возможности css.
Не стесняемся, пишем отзывы.
