|
Короткий курс по изучению CSS предназначен для чайников ( начинающих).
Прежде чем мы приступим к изучению основам CSS, давайте проанализируем, что такое CSS и куда его можно применить.
CSS - это Каскадные Таблицы Стилей. CSS применяется для дизайна и построение сайта. В CSS файле хранятся все настройки дизайна сайта.
Самый огромный плюс в CSS, это быстрота в изменений дизайна. Вы явно меня не поняли что я хотел этим сказать? Давайте рассмотрим на примере.
Ваш сайт сделан на HTML, который состоит из 10-ка тысяч страниц. Чтобы поменять дизайн сайта или изменить шрифт, размер текста и т.д. вам бы пришлось вносить изменение в каждую страницу, а это не 2-е и не 20-ть страниц а 10 000  . С CSS всё намного проще. Вы создаёте один файл CSS и привязываете его ко всем страницам HTML. При изменение шрифта, размера текста, дизайна вам нужно внести изменение лишь в один файл CSS как на всех остальных 10 000 страницах написанных на HTML поменяются автоматически. Это экономия времени и ваших сил.
Чтобы начать изучать основы CSS, вам нужно знать HTML.
Основы CSS
CSS файл пишется в обычном Windows-блокноте так как и HTML и имеет расширение «.css ».
В CSS нет тэгов и атрибутов так как в HTML.
CSS состоит из ПРАВИЛ.
В ПРАВИЛЕ есть:
- селекторы
(select с английского – выбор)
- блоки объявления стилей.
Давайте рассмотрим пример:
h2
{color:#000000;
font-size:25px; }
h2 - селектор,
Всё что находиться в фигурные скобках { } это блок объявления стилей который наз. - ПРАВИЛО.
В этом правиле определяются свойства для всех заголовков с тэгом «h2»:
• размер шрифта = 25 пикселей
• цвет шрифта #000000
Теперь на всех страничках нашего сайта тег «h2» будет присвоено это правило, даже если потом вы создадите новые страницы все равно на новых страничках будет присвоено к тэгу h2 это правило.
Как объединить HTML с CSS файлом.
Для этого служит специальный тэг
<link rel="stylesheet" type="text/css" hrеf="style.css">
- style.css – это имя файла и путь к css файлу.
Файл может хранится как в отдельной папке, так и вместе с файлом index.html .
Пример – основы CSS.
Создайте HTML(скопируйте и вставьте код в Windows-блокнот). Сохраните как «Index.html»
<html>
<head>
<title>Сайт о шикарных автомобилях</title>
<link rel="stylesheet" type="text/css" hrеf="style.css">
</head>
<body>
<h2>Приветствую Вас на сайте</h2>
</body>
</html> |
|
Создайте CSS (скопируйте и вставьте код в Windows-блокнот). Сохраните как «style.css».
Находится файл «style.css» должен в месте с «Index.html».
h2
{color:#F34B10;
font-size:30px; } |
|
Результат:
Чтобы вы лучше поняли принцип работы CSS сделайте самостоятельно такие действие:
поменяйте правило в файле «style.css». Например в font-size:30px; , поменяйте размер. В место 30px поставьте 103px.
Теперь на всех страницах вашего сайта тег «h2» будут действовать эти правила.
В курсах CSS, мы рассмотрим такие темы как:
1. Основы CSS
2. Цвета в CSS
3. картинки в CSS |
4. Текст в CSS |
5. Шрифты в CSS |
6. Списки в CSS |
7. Цвет ссылки в CSS |
8. Селекторы в CSS |
9. Блоки в CSS |
10. Высота и ширина блоков в CSS |
11. Позиционирование в CSS |
12. Всплывающие блоки - "Поплавки" |
13. Свойство z-index
(слои на CSS) |
дальше. - Цвета в CSS
НОВОСТИ САЙТА
------------------------------------------------------------------------
22/01/2012 – Вы можете отправить WebMoney разработчикам сайта nocrisise.ru – от 0,01$ с
текстом -
«спасибо за сайт nocrisise.ru »
Не забудьте в тексте указать рабочий e-m@il и Имя - вас ждёт Бонус.
Отправь от 0,01$ с текстом на WebManey: Z317847961173
------------------------------------------------------------------------
|
- - -