УРОКИ CSS для начинающих. Базовый курс.


Урок 2. Создаём файл для таблиц стилей и привязываем его к Веб-странице.

В курсе по HTML мы создали сайт "Всё о собаках" - на нём и будем упражняться в каскадных таблицах стилей.

Перво-наперво создадим файл, куда будем прописывать таблицы стилей.

Открываем "Блокнот" и сохраняем файл через "Файл" - "Сохранить файл" в папку с сайтом, созданным при изучении HTML. Имя файлу даём style.css. Обратите внимание, что файлы с таблицами стилей имеют расширение .css.

Следующий шаг - привязка файла стилей к страницам сайта.

Для этого в html-коде между тегами <head> и </head> пишем следующую строку:

<link rel=stylesheet type="text/css" href="style.css">

В этой строке атрибут href="style.css" указывает на наш файл с таблицами стилей. В данном случае файл стилей находится в одной папке с остальными файлами сайта. Если бы он помещался в отдельной папке, тогда нужно было бы указать полный путь к файлу, как это делается при вставке в html-код рисунков.

Итак, вставьте приведённую выше строку в код каждой страницы сайта. Для главной страницы "шапка" кода выглядит теперь так (напомню: новые фрагменты кода выделены таким цветом):

Листинг 2.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">
<meta name="description" content=" Всё о собаках ">
<meta name="keywords" content= "собаки, породы, выбор щенка, воспитание, дрессировка, кормление, выставки собак">
<title>
Сайт о собаках</title>
<link rel=stylesheet type="text/css" href="style.css">
<style type="text/css"><!—
body{margin:0px;padding:0px;}-->
</style>
</head>

Перейти к третьему уроку>>>>>>>

Важно! Те уроки по CSS, что выложены на нашем сайте - это очень далеко не всё, что следует знать по каскадным таблицам стилей. К тому же, web-технологии постоянно развиваются! Поэтому рекомендую скачать бесплатно видеоуроки по CSS, в которых вы найдёте много нового, соответствующего современным стандартам сайтостроения.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:


Комментарий добавил(а): Макс
07-11-2011
21 час. 12 мин.

Комментарий:
Я слышал что с помощью dreamweaver можна создовать хорошие сайты это правда???

Ответ: Здравствуйте, Макс. Абсолютная правда. В Macromedia Dreamweaver (или Adobe Dreamweaver) создавать сайты удобно тем, что в этих редакторах есть практически весь набор необходимых инструментов для работы не только с html, но и css, php, javascript... А также подсветка кода, автоматическая вставка html-тегов, подсказки по php-функциям и много чего ещё, о чём большинство даже не догадывается. Есть в программе и несколько готовых шаблонов сайтов, если кому-то не охота придумывать самому, однако эти шаблоны требуют некоторой доработки (ну, хотя бы дизайна). В этих программах удобно управлять сайтами, если их несколько... В общем, удобные программы. Хотя и не без недостатков. Но достоинства всё же перевешивают.

Новые статьи

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта




89 - 1 - 62