Дизайн сайта CSS

Дизайн сайта, работа с таблицей стилей stile.css

дизайн сайта ксс
css таблица стилей
В предыдущей статье я рассказал из чего состоит html страница, зачем нужны и что означают теги, в которые заключена информация на странице. Подробнее смотрите статьи в разделе "Делаем сайт". Но вы наверно уже знаете как устроена страница и знаете что все тексты, заголовки, и элементы заключены в теги. Теперь разберем как задавать этим тегам (контейнерам) размеры, фон, цвет текста, размеры и позиционирование на странице. Ниже снова пример уже знакомой по прошлой статье шаблонной страницы.

В этой html странице есть запись <link href="style.css" rel="stylesheet" media="all">, которая указывает что стили для отображения контейнеров находятся в файле style.css, в нем мы будем задавать красоту этой странице.

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" media="all">
<meta name="description" content="Краткое описание содержания статьи">
<meta name="keywords" content="ключевые слова">
<title>Заголовок страницы,</title>
</head>
<body>
<header>
<container>
<hgroup>
<h1><a href="/">Заголовок сайта</a></h1>
<h2>Краткое описание, подзаголовок сайта</h2>
</hgroup>
<nav>
<ul>
<li><a href="page1.php">раздел1</a></li>
<li><a href="page2.php">раздел2</a></li>
<li><a href="page3.php">раздел3</a></li>
<li><a href="page4.php">раздел4</a></li>
</ul>
</nav>
</div>
</header>
<aside class="saitbar">
боковая колонка, здесь можно размещать например ссылки на последние статьи, сделать фото-галерею, вставить рекламу и прочее. </aside>
<main>
<section>
<article class="tekstblok">
<h1>заголовок</h1>
Здесь размещается текст статьи, ниже для примера код для вставки в статью различных изображений. <figure>
<img src="images/1.jpg" alt="описание, что изображено на картинке, не видно пользователям" ></>
<figcaption>заголовок описание к изображению</figcaption>
</figure>
</main>
</article>
<footer>
Подвал сайта, здесь можно разместить информацию о статистике, дополнительный список разделов, или еще что. </footer>
</container>
</body>
</html>

Содержание файла style.css

Чтобы быстро менять дизайн сайта, стили для отображения выносят в отдельный файл (текстовый документ) в котором прописывают стили CSS. Этот файл можно располагать где угодно, хоть в корневой папке сайта, хоть в отдельной папке, главное правильный путь до файла. Ниже содержимое такого файла.

body { margin-left: auto;margin-right: auto; width: 930px; font-size: 12px; color: #363636; font-family: Arial; line-height: 1.2; background:url(images/fon2.jpg); }

a:link { color: #0000ff ;}
a:visited { color: #0000ff ; }
a:hover { color: #0000ff;}


container { width: 930px; padding: 0px ; margin: 0px; background-color: #fff; border: 2px solid #778899;}
header { width:930px; float:left; padding: 0px ; margin: 0px ; background:url(images/fon2222222.jpg) ; border-bottom: 4px solid #778899; }
header h1 { padding: 20px; margin: 0px; color: #B03060;}
header h2 { text-align:left; padding: 20px; margin: 0px; color: #B03060;}
header a {color: #0000ff; }


nav {width: 910px; float:left; margin: 0px; padding: 10px; border-radius: 10px; }
li {float:left;margin: 1px; padding: 6px; background-color: #F8F8FF; border-radius: 6px; }
ul {float:left; list-style-type: none; margin: 0px; padding: 0px; }
ul a { font-size: 16px; color: #0000ff;}


.saitbar { padding: 10px ;margin: 5px; margin-top:10px; width:220px ; float:right; color: #778899; background-color: #fff ; border-radius: 10px;}

.tekstblok {width:640px; padding: 15px ; margin-bottom: 10px; margin-top: 10px; float:left; background-color: #fff ; border-radius: 0px 10px 10px 0px; border: 2px solid #dcdcdc; }
.tekstblok h1, h2, h3 { text-align:center; color: #B03060;}
.figure_staty { margin: 10px 10px 0px 0px; padding-bottom: 15px ; background-color: #fff ; }
figcaption { font-size: 10px; color: #778899;}

footer {width:890px; float:left; padding: 20px ; margin: 0px ; color: #fff; background-color: #778899;border-bottom: 4px solid #B03060;}

Теперь разберем все записи в файле stile.css по порядку

body { margin-left: auto;margin-right: auto; width: 930px; font-size: 12px; color: #363636; font-family: Arial; line-height: 1.2; background:url(images/fon2.jpg); }

Первая запись для контейнера body, здесь указываются стили для отображения всего html документа, то есть всей страницы. В скобках первая запись margin-left: auto;margin-right: auto; width: 930px; которая указывает что ширина страницы 930 пикселей, а margin-left: auto; и margin-right: auto; это отступы от левой и правой части экрана, тоесть выравнивание страницы по середине экрана.

Далее идет запись font-size: 12px; color: #363636; она означает что размер текста 12 пикселей, а его цвет #363636. По умолчанию, если ничего не писать, то цвет текста #000000, то есть черный, а размер текста зависит от установленного по умолчанию в браузерах. Вообще в браузерах по умолчанию пприменяются свои стили, если не указаны стили к странице, то ссылки подчеркнуты, выделяются синим цветом, текст и контейнеры прижимаются к левому краю и т.д.

Запись font-family: Arial; line-height: 1.2; означает что шрифт текста на странице Arial , а отступы между строчками 1.2 , то есть 1.2раза больше чем высота текста.

Запись background:url(images/fon2.jpg); указывает фон страницы, в скобках указан путь до фоновой картинки, которая как видно лежит в папке images и называется fon2.jpg

Далее записаны строчки, в которых записаны стили для отображения стилей для ссылок на странице.

a:link { color: #0000ff ;}
a:visited { color: #0000ff ; }
a:hover { color: #0000ff;}


Запись a:link задает цвет ссылки, a:visited задает цвет посещенной ссылки, a:hover задает цвет ссылки при наведении курсора мышки и при нажатии. Цвет здесь #0000ff для всех трех значений синий, но можно поставить любой цвет, назначить размер текста, фон, и пр.

Далее идет контейнер для всего содержимого страницы

container { width: 930px; padding: 0px ; margin: 0px; background-color: #fff; border: 2px solid #778899;}

Ширина таже что и для тела body 930px, запись padding: 0px ; margin: 0px; означает что отступы внешние и внутренние равны нулю. Запись background-color: #fff; border: 2px solid #778899; означает цвет фона #fff белый, а бордюр шириной 2 пикселя и цветом #778899.

Думаю смысла нет описывать все контейнеры так как смысл принцип и так понятен. Опишу в общем некоторые моменты. Как вы наверное догадались если писать стиль для контейнера, то просто пишем в таблице style.css его название и в скобках указываем все что нам нужно. Если нужно для одного и того же названия блока использовать разные стили, то блоку можно присвоить класс. Например <aside class="saitbar"> означает что для контейнера aside в таблице стилей указан стиль .saitbar . Когда указывается стиль отображения для блока, то он начинается с точки.

Так же стили можно задавать еще так, например вы создали на странице новый контейнер <div id="box">, эта запись указывает что идентификатор для стилей этого контейнера box, в таблице стилей он должен начинаться с символа решотки #box { }, и в скобках так же к этому контейнеру прописываются стили.

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

Этот домен продается здесь: telderi.ru, и еще много других