Как создать сайт, не используя языки программирования 2

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

Мы создали с вами html страничку, но выглядит она не красиво, сейчас будем исправлять это с помощью таблицы стилей css. Для этого в той же папке сайт, создайте текстовый файл style, измените у него разрешение на css, т.е у вас будет файл style.css Кстати если вы скачали как я и советовал notepad++, то вам будет проще создать этот файл с помощью него, выбрав вверху файл - новый, а затем файл - сохранить как.

В этом файле мы будем писать стили для нашего сайта, как и в прошлый раз вставьте код в файл style.css, а ниже я дам пояснение, что в содержится в этом коде. Сразу сделаю оговорку, я расскажу вам не о всех свойствах, а только о тех, что содержатся в нашем коде: display, width, margin и.т.д. Погуглив по теме css вы узнаете, что таких свойств очень много и если грамотно их применять, то можно сделать офигительно красивый сайт.

body{
	display: block;
	width: 1000px;
	margin: 0 auto;
}
.logo {
    display: inline-block;
    font-size: 20px;
    width: 200px;
}
ul {
    display: inline-block;
}
li {
    list-style: none;
    display: inline-block;
    margin-right: 20px;
    font-size: 18px;
}
a {
    text-decoration: none;
    color: #000;
	padding:10px;
}
a:hover{
	background:#000;
	color:#fff;
}
h1{
	text-align:center;
}
.content{
	display:block;
	font-size:18px;
	background:yellow;
	padding:10px;
	border:1px solid;
}

Самым первым у нас идет элемент body, в таких вот {} скобках для него прописаны стили display: block; - означает, что это блочный элемент, width: 1000px; - ширина элемента, если ее не указать, то у элементов с display: block ширина будет 100%, margin: 0 auto; - выравнивает элемент по центру страницы.

Для селектора logo мы указали display: inline-block;, inline-block нужен для того, чтобы элементы размещались рядом если у нас будет block, то элементы будут идти друг под другом. font-size - служит для указания размера шрифта этого элемента, ширину мы задали в 200 пикселей.

Затем оформляем наше меню, с ul я думаю вам уже понятно, у li list-style: none; убирает маркеры рядом с текстом, margin-right задает правый отступ. У ссылки "a", мы убираем нижнее подчеркивание с помощью text-decoration: none; указываем черный цвет шрифта - color: #000; и делаем внутренний отступ padding:10px; Ниже идет a:hover к "a" добавился :hover он нужен для написания стилей при наведении, background:#000; - указывает черную заливку элемента, color:#fff; - указывает белый цвет шрифта. Теперь при наведении на ссылку элемент будет заливаться черным цветом с белым шрифтом.

У h1 указываем text-align:center; - выравнивание текста по центру. У content добавилось кое что новенькое border:1px solid; - обводка элемента размером 1 пиксель.

Сохраните ваш файл и запустите index.html с помощью браузера, запустив вы с ужасом поймете, что опаньки ничего не изменилось. Чтобы изменения вступили в силу вам надо взять шаманский бубен и бегать вокруг стула одновременно бив в этот бубен. Ладно, если серьезно вам надо просто отредактировать файл index.html, а именно перед title добавить подключение файла со стилями <link href="style.css" media="screen" rel="stylesheet" type="text/css" /> Сохраните файл и снова запустите файл в браузере, теперь вы видите более менее красивую страничку.

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