1 Урок. Подготовка html-файлов для подключения CSS.
Автор: Андрей Краснокутский
Дата: 2009-02-12
Как подготовить web-страницу к подключению каскадной таблицы стилей?
Итак, давайте приступим к изучению CSS – каскадных таблиц стилей.
Как было отмечено ранее, с помощью CSSможно разделить HTML-код веб-страницы и дизайн страницы, т.е. изменением кода файла style.cssможно координально изменить внешний вид всех документов (web-страниц), к которым привязана данная таблица стилей. Но для этого необходимо подготовить код страницы соответствующим образом, т.е. убрать из кода страницы все теги с их параметрами определяющие внешний вид текста, рамки, вставки картинок и т.д. после этого этим элементам придается необходимый вид путем прописки соответствущих классов в каскадной таблице стилей. Вот этим мы сейчас и займемся.
В прошлых уроках по созданию сайта на HTML мы остановились с Вами на создании простого сайта посвященного автомобильной тематике . Сейчас мы его возьмем за основу и будем изменять дизайн этого сайта с помощью CSS и одновременно на практике будем учиться применять CSS.
В корневой папке (где лежат все файлы Вашего сайта) создаём файлик style.css (пока еще пустой). Создается такой файл, простым переименованием текстового файла, т.е. создаем текстовый документ с расширением .txt далее Переименовать и даёте новое имя и расширение, получается style.css .
В файле style.css и будут прописаны все правила по форматированию текста и элементов web-страницы - это и есть файл каскадной таблицы стилей.
Чтобы привязать данный файл стилей к конкретному web-странице (html документу), в этом документе между тегами <head> </head> прописывается вот такой код:
Далее берем исходный код документа и "очищаем" его (убираем теги форматирования) в результате получаем следующий листинг:
Листинг 1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Автомобили со всего мира</title>
<meta name="keywords" content="автомобили, легковые, гараж, автопутешествия, гараж ">
<meta name="description" content="все что вы хотите знать про современные автомобили">
<h2 align="center">Обзор автомобилей Mercedes 2008 года.</h2>
<p align="justify">Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете много полезной и интересной информации.</p>
<p align="justify">Нынешний год - пора обновления модельного ряда. Оно продолжится по
меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный SUV. Первая жертва: из прайс-листов вычеркнута - модель Sportcoupe 2000 года рождения, с весны его заменит прямой наследник - CLC.</p>
<p align="justify">Компактный «спорткар» помимо нового имени получил обновленную внешность и усовершенствованную механику. Он, как и Sportcoupe, создан на базе седана С-класса прошлого поколения. Производиться CLC будет на том же бразильском заводе, и цена, как у предшественника, будет довольно привлекательной - порядка 28 000 евро.</p>
<p align="justify">Переходя от Sportcoupe к CLC, мерседесовские инженеры
усовершенствовали и заменили более 1100 элементов. Из значимых изменений, которыми может похвастать CLC, отметим более «короткий» руль, значительно облегчающий управление, современную информационную систему, спутниковый навигатор с картами на DVD и на жестком диске. Внешне CLC можно узнать по новому дизайну передней части, который роднит новинку с новым С-классом. Сзади изменился дизайн крышки багажника,
обновилась форма фонарей.</p>
<p align="justify">Из двигателей CLC предлагает четыре четырехцилиндровых (три бензиновых и дизель) мощностью от 122 до 184 л.с. и две V-образных бензиновых «шестерки» -204 и 272 л.с. Сильнее других изменился 1,8-литровый мотор, который устанавливается на версию CLC 200 Kompressor: его мощность поднялась на 20 сил (до 184 л.с), а расход на 100 км по сравнению с предыдущей модификацией сократился почти на 1 л. Серийно все двигатели агрегатируются с шестиступенчатой «механикой», но на версиях с четырехцилиндровым двигателем можно заказать и пятидиапазонный «автомат». Семидиапазонный 7G-Tronic будет доступен с моторами V6. Оборудование салона достойно великой марки, причем все - от навигатора до систем безопасности - основано исключительно на проверенных решениях. В салонах российских дилеров автомобиль появится во втором полугодии.</p>
<p align="justify"><a href="tex_opis.php" target="blank" title="Технические характеристики автомобиля">Технические характеристики автомобиля</a></p>
Вот что у нас получилось после "очистки кода". Что же изменилось по сравнению с преведущим вариантом? Первое что бросается в глаза: исчезла рамка вокруг сайта, далее изменился цвет шрифта на странице и звет заголовка, изменился цвет поля меню (левой колонки), исчез фоновый цвет (сзади странички). Т.е. мы убрали все теги форматирования из кода.
Таким же образом "очищаем" другие странички нашего тестового сайта, а именно: bmw.html , audi.html , toyota.html , reno.html . И прописываем (привязывает) к этим файлам между тегами <head> </head> нашу таблицу стилей style.css .
Если Вы пишете код для нового сайта, то естественно ничего очищать не требуется, обычно дизайн (заполнение таблицы стилей) и код разметки HTML-страницы пишется паралельно.
Если Вам не понятно что мы сделали, то рекомендую вернуться назад и еще раз внимательно изучить первые уроки по HTML , кроме того открыть в блокноте исходный код и сравнить его с кодом файла, который мы написали в последнем уроке по HTML.
На этом подготовка закончена, в следующем уроке начнём заполнять нашу таблицу стилей style.css сейчас она пустая.
"На этом подготовка закончена, в следующем уроке начнём заполнять шашу таблицу стилей style.css сейчас она пустая."
Исправьте, пожалуйста, опечатку вместо "шашу таблицу" поставьте "нашу таблицу"
Комментарии добавил(а): Любовь Петровна Дата: 2011-03-31
Дмитрий, не следует быть слишком жестоким.
Андрей Анатольевич - человек очень занятый,
он - зам. директора на крупном предприятии.
Надо еще сказать ему "спасибо" за то, что он
находит время обучать нас, ничего не имея взамен. Подумайте, прежде чем писать.
Комментарии добавил(а): АндрейК Дата: 2011-03-31
Спасибо Дмитрий, ошибки исправил. И Вам спасибо Любовь Петровна, только до зам.директора я еще пока увы не дорос. А подробнее про меня здесь: http://www.luksweb.ru/about.php
Комментарии добавил(а): Ирина Васильевна Дата: 2013-12-29
Нажимаю на ссылку Технические характеристики, получается тарабарщина.Сбивает с толку php. Перепробовала массу вариантов, вот последний код ссыки, помогите найти ошибку: <html>
<head>
<link rel=stylesheet type="text/css"href="style.css">
<title>Техническoе описание автомобиля </title>
</head>
<body><p><h3>Здесь вы найдете все технические описания автомобиля</h3></p></body>
<a href="index.php"target="blank"title "Автомобили со всего мира">Главная страница</a>
</html>
Комментарии добавил(а): Ирина Васильевна Дата: 2014-01-02
Объясните пожалуйста, как должен выглядеть код с php, который Вы даете в этом уроке.При ссылке на tex_opis.php с главной страницы у меня открывается не текст, а код.
Комментарии добавил(а): АндрейК Дата: 2014-01-04
Ирина Васильевна если Вас интересует PHP то смотрите уроки по PHP здесь: http://www.luksweb.ru/view_cat.php?cat=12