создание и продвижение сайтов

О проекте

Мы рады приветствовать на нашем портале pastukhova.com! Наша компания предлагает комплексные услуги по созданию интернет-сайтов с уникальным дизайном и интерфейсом. Удобные и изящные сайты-визитки и мощный многофункциональные порталы – мы можем всё! На нашем сайте представлены бесплатные готовые шаблоны сайтов, полезные статьи и советы из области сайтостроения, а также последние новости IT-индустрии и интернет-технологий. Веб-дизайн – это целое искусство, в котором есть своим мастера, ценители и бездарности. Последних лучше обходить стороной.

Реклама



webmarket / 

Урок 3

CSS означает Каскадный Лист Стилей. Для следующего шага нам потребуется создать текстовый документ, для этого подойдет WordPad или обычный блокнот. Для начала запишем строку:

/*mysite.ru/*/

Фактически то, что мы впишем в строку не особо важно, ее мы «окантовываем» звездочками, а также слешами - /* */. Это строка комментария, обычно туда записываются персональные заметки, которые позволяют быстрее разобраться в коде. Перейдем к написанию кода. В самом листе стилей код носит названия «Правила». Составляющими правил выступают атрибуты или селектора, а кроме этого, и объявления, которые складываются со свойств и значений. Попробуем увидеть это на примере:

p {color: #000;}

Эта строка обозначает то, что цвет текста всех абзацев – черный. Р в этом случае выступает в роли атрибута, а скобки – это и есть Правила для атрибута такого типа. Понятие color выступает свойством объявления, а «сетка» и нули – значение. Значение в данном случае обозначено шестнадцатеричным знаком, под которым понимается цвет. Для тех, кто работал с графическими программами, это станет понятным сразу. По идее, символов должно быть шесть, но для сокращения возможно писать меньше. Проблем с этим никогда не возникнет.

Правила такого типа можно размещать по-разному, столбцом, или в линейку – это не играет никакой роли. Но следует помнить два правила – ставьте двоеточие сразу после каждого нового свойства и точку с запятой после нового значения. Если выпустить из виду эти два нюанса, то вполне возможно некорректное отображение браузерами.

Теперь можно установить для страницы общие правила:

* {
margin: 0;
padding: 0;
border: 0;
}
body{
padding: 2% 0 0;
background: #fff;
color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#container {
width: 760px;
margin: 0 auto;
}

Уточним некоторые моменты:

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

Отступы – равны 0,
Поля – равны 0,
Рамка – равна 0.

Это мы сделали с целью, чтобы в ненужных местах не всплыли рамки, поля или отступы. Если упустить эти строки, то браузер может интерпретировать данные совсем не так, как задумано. Намного проще добавит все значения самому, где они необходимы. Их можно указать двумя способами – пикселями или процентами. Если значение равно нулю, то единицу измерения указывать не надо.

Правило 2. Тут мы обозначили тело страницы – мы отступили 2% от верхнего поля, а по обоим бокам и внизу значение оставили нулевым. Это подразумевает то, что страница будет подходить к верхнему полю не впритык, а отступать от него 2% полного размера окна. Стоит заметить важный факт – все значения вписываются одно за другим, без запятых. Точка с запятой вписывается только после последнего значения.

Для равномерного отступа с обеих сторон, можно задать только три значения, три, потому что отступ с правой и левой стороны одинаковый. Это будет выглядеть так - 2% 0 0, или если удобнее, то 15px 0 0 – это значение в пикселях. Ноль посредине обозначает одинаковый интервал отступа с обеих сторон. Рассмотрим на примерах:

  1. 5px 10px 15px 20px; — сверху отступ в 5 пикселов, справа 10, снизу 15, а слева 20.
  2. 5px 10px 15px; — сверху 5, с обеих сторон по 10, внизу 15.
  3. 5px 10px; — сверху и снизу по 5, с боков по 10.
  4. 5px; — отступ со всех сторон равен 5 пикселям.

В пунктах 2, 3 и 4 мы видим сокращенную подачу отступов.

Вернувшись к странице, мы видим – цвет фона – белый, шрифт – темно-серый (#333). Далее идут перечисления используемых шрифтов. Заметьте, если название шрифта складывается более, нежели из одного слова, то его необходимо отметить кавычками. Вот таким способом - "Times New Roman".

Третье правило. Тут начинается новое, а именно понятие container, которое используется с сеткой. Сеточка значит, что атрибут является уникальным. Конкретнее это означает, что тэг div и данный атрибут будут использованы на странице единожды. Понятие контейнер используется для помещения страницы в средину окна. Для контейнера мы четко указали отступы – верх и низ – 0, а по обоим бокам – auto. Это значит то, что какая бы не была страница размером – наша страничка всегда будет размещена по центру.

В принципе, для этого можно было бы использовать тэг body, но не все так просто – браузер бы обязательно отдал всю видимую область, а страничка размером в 760 пикселей, однозначно бы расположилась с левой стороны окна, что крайне нежелательно.

Некоторые разработчики используют автоподстройку под размер окна веб-страницы. Знайте – это неэффективно и некрасиво. Представьте, что будет с наполнением страницы, фотографиями или дизайном, если его растянуть с 14 до 22 дюймов? Как в худшую сторону изменяться пропорции и качество изображений? Вы правы, это действительно имеет неважный вид.


Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | Урок 8 | Урок 9 

email: info@pastukhova.com
copyright © 2003-2007 www.pastukhova.com
Rambler's Top100