Введение в CSS

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
30.03.2013

Всем доброго времени суток! В прошлых статья мы разобрались из чего же состоит сайт в принципе, заглянули в основы HTML и даже успели создать свою первую веб-страницу. Сегодня нас ожидает погружение в настоящую революцию в мире вёрстки – изучение каскадных таблиц стилей (CSS).

Недооценить мощь и простоту этого инструмента при вёрстке сайта просто невозможно. Каскадные таблицы стилей позволяют нам за считанные секунды полностью изменить дизайн всех страниц нашего сайта. Не смотря на всю простоту, я считаю это поистине гениальным творением :) Всё гениальное – просто.

Что ж, хватит предисловий, хотя и заслуженных, а лучше приступим к изучению самого механизма использования CSS (Cascading Style Sheets). Для этого в корне нашего сайта или в специально отведённой под стили папке (как вам удобней) создадим всё тот же простой текстовый документ. Только на этот раз мы поменяем его расширение с .txt на .css Имя вашего файла со стилями может быть любым, например, style.css

введение в cssфайл css

Итак, пока что он будет пустой, а мы вернёмся к нашему макету веб-страницы, которую мы научились создавать на прошлом уроке. Вот он:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Как создать веб страницу?</title>
</head>
<body>
И здесь пишем любой интересующий нас текст.
</body>
</html>

Как подключить внешний файл CSS?

Только в этот раз мы задействуем одну из возможностей «головы» сайта, о которой я рассказывал в предыдущей статье, а именно – подключим нашу таблицу стилей CSS. Для этого между открывающим и закрывающим тегом head (лучше сразу после тега title) напишем такую строку:

<link rel="stylesheet" href="/ваш_путь_до/style.css" type="text/css" />
В моём блоге это строка выглядит так:
<link rel="stylesheet" href="/blog/style.css" type="text/css" />
, где полный адрес к файлу стилей выглядит так: http://site-on.net/blog/style.css В итоге имеем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Как создать веб страницу?</title>
<link rel="stylesheet" href="/ваш_путь_до/style.css" type="text/css" />
</head>
<body>
И здесь пишем любой интересующий нас текст.
</body>
</html>

Отлично, теперь мы можем воротить нашим сайтом как захотим! Для этого зайдём в наш файл стилей style.css, используя специальный редактор вроде Sublime Text 2 или просто блокнот Windows. В CSS всё тоже довольно просто, но всё же рассказать здесь есть о чём.

Примеры использования основ CSS на практике

Начнём с простого и сразу на примерах. Допустим нам нужно поменять фон всего нашего сайта. Для этого смотрим, какой тег самым первым открывается и самым последним закрывается, естественно – body (для абсолютно всех сайтов :)). Чтобы задать определённому тегу нужный нам стиль, мы просто пишем его имя с начала строки, затем открываем фигурную скобку и пишем, что нам от него надо, закрываем фигурную скобку. Пример:

body  {background: red }

Вот и всё, незабываем сохранить изменения в файле style.css и перезагружаем нашу страницу в браузере, фон стал красным. Если фон не стал красным, значит вы неверно указали путь к вашему style.css Теперь пару замечаний: во-первых, для начала не нужно писать всё в одну строку, тоже самое гораздо понятней и наглядней будет записать так:

body{
background:red
}

Второе - где хотите, там и ставьте пробелы. То есть можно и так написать:

body[пробел]{[пробел]background:[пробел]red[пробел]}

Лично я пробелы не ставлю, чтобы не тратить время и не ставить лишних символов. 1 символ = 1 байт ;) По поводу пробелов (табуляций) и enter’ов – каждый лишний пробел и перенос строки, это плохо, так как увеличивает вес документа, но после окончания разработки сайта вы можете «откомпрессить» все ваши файлы, используя специальные сервисы.

Теперь мы хотим, чтобы шрифт на всём сайте за считаные секунды изменился на синий, да ещё и стал полужирным. При этом нам даже не понадобиться тег strong:

body {
background: red;
font-weight: 700; /*вместо цифры 700 можно было написать слово bold, но в нём аж на 1 символ больше :) */
color: blue;
}

Ага, обратили внимание, что важно? После каждого свойства ставится точка с запятой! Но если свойство идёт в конце списка, в нашем случае это color, то ставить ; не обязательно. Однако мы с вами люди строгие, и поэтому всё равно её поставим, тем более, что зачастую через пару дней нам захочется что-нибудь добавить после color… И вот мы добавили новые свойства, а всё перестало работать, и начинаем искать ошибку, тратить драгоценное время, думаем, что наверное ошибка в новых свойствах (может мы попросту опечатку сделали или задали неверное значение?), а дело то в том, что перед тем как дописать что-то новое, забыли после старого поставить точку с запятой. Вывод: даже в конце всегда ставим ;

Теперь, после всего того, что вы здесь узнали, настоятельно рекомендую вам найти любой справочник CSS (их я рекомендовал здесь) и ознакомится хотя бы со списком всех свойств (оглавлением), если вы знаете английский, то просто пробежавшись глазами по всему списку, вы уже подчеркнёте и отложите в памяти много свойств, которые могут вам понадобится.

Помните: в нашем деле не нужно ничего знать на память (это придёт с опытом само по себе), а главное знать, куда подсмотреть ;)

Теперь рассмотрим что-нибудь новенькое. В HTML один тег может быть вложен в другой, тоже самое и здесь, например, если мы в CSS напишем что-нибудь вроде этого:

div p{
color:blue;
}

То это будет означать, что данное свойство (синий цвет текста) будет применено ТОЛЬКО к тегу параграфов

<p>
Которые находятся внутри блоков
<div>
Например, как здесь:
<p>просто текст</p>
<table><p>просто текст</p></table>
<div><p>синий текст</p></div>

Примечание:

div – это элемент блочной вёрстки, просто представьте себе невидимую фигуру прямоугольной или квадратной формы, а если мы зададим ей через CSS фон или бордюр (рамку), то и представлять не придётся – мы всё увидим своими глазами.

То есть такая запись: тег1[пробел]тег2 расшифровывается как – если тег2 вложен в тег1 на ЛЮБУЮ глубину, то к тегу2 применить следующие свойства…

Вот это я называю настоящей магией :) И хоть вы сделаете 4 уровня вложенности, будет работать и для четырёх.

А раз вам всё понятно (я очень на это надеюсь), то вот вам разминка для ума: стандартным или красным цветом будет текст внутри тега <a> в примере ниже?

<style>
a{
color:red;
}
</style>
<div><p><a>каким цветом текст?</a></p></div>





Правильный ответ: красным. Потому как у нас не задано никаких условий. У нас написано просто: если тег <a>, то цвет красный, это значит, что текст этого тега будет красным всегда, где бы наш тег ни находился.

На сегодня всё, а в следующей части, мы поговорим о наследовании в CSS.

С уважением, .
Пожалуйста, оцените эту статью
Средняя оценка: 5 из 5 (проголосовало: 18)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Ваш email:
Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Пожалуйста, прокомментируйте, как Вам моя статья?
Имя:
Комментарий:

Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

Подписаться на новые комментарии:

E-mail:


Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:
Подписаться на новые комментарии без комментирования - Email:
Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:

27.07.2014 08:39:36 Владимир:
Спасибо, понравилось, главное, что как чайнику мне все описанное понятно стало)
27.07.2014 09:27:40 Сергей отвечает:
Значит не зря старался :)

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


11.11.2014 06:59:44 Дима:
Ну как раз то, что искал. Вот по этой теме и был вопрос.

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


26.02.2015 16:13:41 Дмитрий:
Сергей, привет из Беларуси!
Отличные уроки, и подача материала. Ты крут!)

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


19.01.2016 13:24:18 Андрей Федоренко:
Здравствуйте, Сергей! В браузере Гугл Хром всё работает. А в Мозилле, почему-то, только текст на белом фоне, хотя я изменил цвет фона и текста. В чём может быть проблема?

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

Использую для работы
Мои расширения
Свежие статьи
Рекомендую
Горячо обсуждаемые
Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:
Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
© site-on.net
Шрифт: +стандартно-