С чего начать подключение к CSS
С чего начать?
Страницы сайта полностью состоят из различных тегов, имеющих разные свойства. Все теги в HTML обязательно должны быть заключены в угловые скобки, также для основной массы тегов обязательно должен быть закрывающий тег.
Для примера возьмем самый главный тег, который указывает браузеру на начало HTML-документа HTML.
Для этого тега обязательно должен быть закрывающий тег, который указывает на то, что документ закончен.
Все остальные теги должны располагаться внутри этих тегов.
Пример:
<HTML><!-- Начало HTML документа (открывающий тег) -->
<HEAD>
<TITLE>Заголовок страницы</TITLE>
</HEAD>
<BODY>
...Тут располагается тело страницы...
</BODY>
</HTML><!-- Конец HTML документа (закрывающий тег) -->
Как вы видите в примере выше - у каждого тега есть закрывающий тег в котором используется слеш (косая черта). Слеш обязательно должен находится перед названием тега (не после).
Скачать полный список тегов имеющихся в HTML с их описанием а также справочник свойств CSS вы можете ЗДЕСЬ.
Создаем простую HTML страницу.
Для удобства нам потребуется создать на компьютере отдельную папку. Название папки любое, например Site.
Далее создадим в этой папке текстовый документ, и назовем его index.html
Откройте index.html в блокноте, и вставьте в него следующие строки, как есть:
<HTML>
<HEAD>
<TITLE>Новая страница</TITLE>
</HEAD>
<BODY>
Это пример простейшей страницы с одной ссылкой.
<br/>
<a href="http://css-standart.ru">Название ссылки</a>
</BODY>
</HTML>
Сохраняем изменения и открываем index.html в браузере.
Мы видим совершенно примитивную страницу, где немного текста и одна ссылка.
Нажав в ссылку - вы попадете на главную страницу нашего сайта, т.к. в URL ссылки как вы уже наверное заметили прописан адрес http://css-standart.ru .
Подключаем CSS
Теперь попробуем слегка изменить оформление нашей страницы с помощью CSS.
В этой же папке создадим новый текстовый документ и назовем его style.css .
Далее в index.html внутри тега HEAD нам потребуется прописать путь к файлу style.css .
Пример:
<HTML>
<HEAD>
<TITLE>Новая страница</TITLE>
<LINK href="style.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY>
Это пример простейшей страницы с одной ссылкой.
<br/>
<a href="http://css-standart.ru">Название ссылки</a>
</BODY>
</HTML>
Откройте style.css в блокноте, и вставьте в него следующие строки, как есть:
body{
text-align:center; /* выравниваем содержимое по центру */
background-color:#99FFCC; /* указываем цвет фона */
font-family:Georgia, Times, serif; /* указываем шрифт текста */
font-size:20px; /* указываем размер шрифта */
color:#996600; /* указываем цвет текста */
}
a {
font-family:Verdana, Arial, Helvetica, sans-serif; /* указываем шрифт ссылки */
font-size:28px; /* указываем размер текста ссылки */
color:#999933; /* указываем цвет ссылки */
text-decoration:none; /* убираем подчеркивание */
}
a:hover{
text-decoration:underline; /* добавляем подчеркивание при наведении мыши */
}
- сохраняем оба файла и обновляем страницу браузера.
Если вы все сделали правильно - увидите как сильно изменилась страница, если вы не видите изменений - значит гдето допустили ошибку, перепроверьте правильность кода.
Можете поэксперементировать, вставляя в страницу какие-нибудь теги, руководствуясь справочником HTML и CSS, который вам было предложено скачать (выше). Проверяйте изменения, обновляя страницу в браузере и не забывая предварительно сохранять изменения в index.html и style.css.
|
| Категория: Мои статьи | Добавил: moderator (01.03.2009)
|
| Просмотров: 504
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
