Введение в CSS
"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог
info@site-on.net
от практика с многолетним опытом." — блог
info@site-on.net
Всем доброго времени суток! В прошлых статья мы разобрались из чего же состоит сайт в принципе, заглянули в основы HTML и даже успели создать свою первую веб-страницу. Сегодня нас ожидает погружение в настоящую революцию в мире вёрстки – изучение каскадных таблиц стилей (CSS).
Недооценить мощь и простоту этого инструмента при вёрстке сайта просто невозможно. Каскадные таблицы стилей позволяют нам за считанные секунды полностью изменить дизайн всех страниц нашего сайта. Не смотря на всю простоту, я считаю это поистине гениальным творением :) Всё гениальное – просто.
Что ж, хватит предисловий, хотя и заслуженных, а лучше приступим к изучению самого механизма использования CSS (Cascading Style Sheets). Для этого в корне нашего сайта или в специально отведённой под стили папке (как вам удобней) создадим всё тот же простой текстовый документ. Только на этот раз мы поменяем его расширение с .txt на .css Имя вашего файла со стилями может быть любым, например, 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> </head> <body> И здесь пишем любой интересующий нас текст. </body> </html>
Только в этот раз мы задействуем одну из возможностей «головы» сайта, о которой я рассказывал в предыдущей статье, а именно – подключим нашу таблицу стилей 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 всё тоже довольно просто, но всё же рассказать здесь есть о чём.
Начнём с простого и сразу на примерах. Допустим нам нужно поменять фон всего нашего сайта. Для этого смотрим, какой тег самым первым открывается и самым последним закрывается, естественно – 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.
Пожалуйста, прокомментируйте, как Вам моя статья?