Сайт поможет начинающему web-мастеру в создании вашей первой html-страницы. А более опытному мастеру, возможно, напомнит о каких то деталях. Основная тематика сайта - создание сайтов, HTML, web-программирование.

Осваиваем технологию CSS. Вводный урок

Автор admin | Дата: 08.11.2008

Нашел интересный поисковый запрос “теги css”. Видимо, человек ранее не знакомый с технологией стилей, решил ее попробовать и начал искать информацию в интернете. Я думаю, он нашел все, что искал, но для новых вебмастеров, которые устали применять старые теги, например, FONT и решили все же потратить время на излучение CSS написана эта статья.

Начнем с того, что CSS – это не язык программирования, впрочем, как и HTML. Возможно поэтому, конструкции CSS можно просто запомнить, если часто с ними работать. Далее, если вы освоили язык верстки HTML, каскадные стили таблиц (CSS) вам также будет освоить проще.

Ну, от небольшого отступления перейдем к практике. Первое, что вам необходимо запомнить, это как присоединять стили к своему html-документу. Просто. Стили можно прописать прямо в заголовке страницы с вашими HTML тегами. Например

<html>
<head>
<title>Осваиваем CSS. Урок первый </title>
<style>
A {color: #000; text-decoration: underline}
</style>
</head>
<body>
Текст-текст
</body>
</html>

Напомню, что статью стоит изучать скорее тем, кто хоть немного знакомом с HTML и его тегами, т.к. без этих знаний учить CSS как минимум рано, ведь вам все время придется думать, что этот за тег, а этот за что отвечает. )

Итак, в нашем примере стили начинаются с тега <style> и заканчиваются тегом </style>. Т.е. вы, скорее всего уже догадались, что это обычные теги html.

В нашем примере, мы описали стиль ССЫЛОК. Само описание началось с открывающей фигурной скобки – { и закончилось соответственно закрывающей фигурной скобкой – }

Color: #000
Здесь мы отметили, что на данной странице все ссылки будут черного цвета.
Также вы могли заменить #000, на #000000 или на black.

Text-decoration: underline
Здесь мы указали, что все ссылки помимо того, что будут черными, так еще и подчеркнутыми. Данный параметр может принимать значение none и некоторые другие.

Второй способ, подключения стилей имеет следующий вид

<html>
<head>
<title>Осваиваем CSS. Урок первый </title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
Текст-текст
</body>
</html>

В этом случае, вам нужно создать файл style.css и вставить туда

A {color: #000; text-decoration: underline}

Все. Но, у многих возникают ошибки с сохранением документа. Поэтому опишу этот момент подробнее. А заодно опишу и то, как вообще сохранять html страницы.

1. Создаем текстовый документ

Осваиваем CSS

2. Вставляем в него наше описание для ссылок, а именно
A {color: #000; text-decoration: underline}

Осваиваем CSS

3. Сохраняем наш CSS-файл

Осваиваем CSS

Обратите внимание на то, что в строке “Тип файла”, мы указали “Все файлы”. А в строке имя файла, название нашего стилевого файла заканчивается расширением .css

4. Готово. Вот и закончился первый урок по CSS.
Далее будем разбирать остальные стили, ведь их очень и очень много.





Rambler's Top100

© 2008 HtmlGuide.ru. Все права защищены.
Design by Luka Cvrk