Осовы CSS

2012-10-11 / Вр:22:33 / просмотров: 12414

Приветствую всех читателей и случайных посетителей моего блога. Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера - CSS.
CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в себе правила для группы или одиночного элемента. CSS используют для изменения внешнего вида дизайна сайта (цвет, размер текста, фон и др.).

Одним действием в CSS файле вы можете поменять на всех страницах вид заголовка, цвет и размер текста, фон и т.д. Я думаю, вы поняли, для чего нужен CSS.
Преимущество CSS не только в быстрых изменениях файла, но и в быстрой загрузке сайта.

Давайте перейдем к основам CSS.
CSS файл имеет расширение *.css. Часто веб-мастера присваивают CSS файлу имя style (style.css).
CSS файл тесно связан с HTML. Другими словами, это можно объяснить так: CSS без HTML работать не будет.

Предлагаю для общего понимания рассмотреть пример, как можно объединить HTML с CSS файлом.

Во всех файлах html между тегами <head></head> должно быть прописано следующее:

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

style.css – это имя css файла. Здесь можно указать и путь к css файлу. Например css/style.css . Это означало бы, что в папке css содержится файл style.css .
Как вы уже поняли, файл *.css может храниться вместе с файлами *.html, так и в отдельной папке.

Смотрим пример и закрепляем все то, что я вам рассказал.

Откройте стандартный блокнот Windows, Notepad++ или AkelPad. Скопируйте код снизу или перепишите его вручную.

<html>
<head>
<title> основы CSS </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Приветствую Вас на блоге bloggood.ru </h2>
</body>
</html>

Сохраните как index.html
Просмотр пошагового примера на картинках:

Теперь в блокнотике Windows, Notepad++ или AkelPad создайте новый файл с такими данными

h2
 {
 color:#cc0000;
 font-size:35px;
 }

Сохраните этот файл как style.css и сохраните так, чтобы файл style.css находился в одной директории или в папке с файлом index.html. Просмотр пошагового примера на картинках:

h2 – селектор

{здесь задается правило или стиль для селектора; }

Теперь всем файлам, где есть тег <h2> будет присвоен этот стиль, размер и цвет шрифта.

• цвет шрифта # cc0000

• размер шрифта = 35px

Результат.

Если у вас все получилось так, как у меня, можно усложнить задачу. В файле index.html пропишите следующее:

<html>
<head>
<title> основы CSS </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Приветствую Вас на блоге bloggood.ru </h2>
<p>Мы изучаем основы CSS </p>
</body>
</html>

Сохраните файл.

В файле style.css пишем:

h2
{
color:#ffffff;
font-size:30px;
}
p
{
color:#cccccc;
font-size:19px;
}
body
{
background-image:url(fon.jpg);
}

Теперь всем файлам, где есть тег <h2> будет присвоен

• цвет шрифта # ffffff

• размер шрифта = 30px

всем файлам, где есть тег <р> будет присвоен

• цвет шрифта # cccccc

• размер шрифта = 19px

Также всему сайту будет присвоена фоновая картинка fon.jpg.

Разместите фоновую картинку fon.jpg вместе с остальными файлами
index.html и style.css так, как на примере снизу:

Результат.

Вот я вам вкратце рассказал об основах css. Буду и дальше расписывать в своем блоге bloggood.ru о стилях css. Подписывайтесь на новости RSS и будьте в центре обновлений постов на блоге.

С уважением блогер webmasterok2009.