BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про CSS » Осовы CSS

Осовы CSS

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

Приветствую всех читателей и случайных посетителей моего блога. Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера - 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" type="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
Просмотр пошагового примера на картинках:

Основы CSS, примеры, уроки на блоге.

Основы CSS, CSS для начинающих, все на примере.

Основы CSS, сохраняем HTML файл,

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

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

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

Основы CSS, как сохранить файл CSS

Основы css, как сохранить файл CSS

Основы CSS, сохраняем CSS файл

Основы CSS, сохранить CSS

h2 – селектор

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

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

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

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

Результат.

Основы CSS, вид после обработки в CSS

Если у вас все получилось так, как у меня, можно усложнить задачу. В файле 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

Результат.

Основы CSS, результат CSS на браузере

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

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683