Приветствую всех читателей и случайных посетителей моего блога. Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера - 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.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274712 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222617 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187980 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
Добавить комментарий
Метки: css, для начинающих, основы
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐