Продолжаю рассказывать как новичку побыстрому создать сайт, не изучая программирование.
Мы создали с вами 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" /> Сохраните файл и снова запустите файл в браузере, теперь вы видите более менее красивую страничку.
Если вы начнете нажимать на пункты меню "Услуги" и "Контакты", то браузер вам скажет, что файл не найден и это естественно ведь мы их не создавали, в следующей статье я расскажу как раз о создании этих файлов.