Основы CSS для полного новичка

Вторая статья цикла для полного новичка. Первая была «Основы HTML для полного новичка»

CSSCSS – В переводе с английского означает – «Каскадные таблицы стилей». Так как это статейка для полных новичков то я себе позволю вольные определения.

Это технология, которая дополняет возможности html по оформлению внешнего вида веб – страниц.

Идея была в том, что бы отделить содержимое (текст, картинки) от внешнего вида этого содержимого.

Вроде получилось запутано, но сейчас попробую объяснить.

Например:

  • html содержит в себе основные способы оформления текста – жирный, курсив, подчеркнутый.
  • CSS же содержит в себе то, что есть в html и многое другое. Можно задать цвет, размер, шрифт, рамку и еще много чего. С его помощью можно расставлять объекты на странице (изображения, текст) так как вам этого хочется, выравнивать относительно друг друга, налаживать один объект на другой (в html таких возможностей нет). Создавать сложные меню и еще огромное множество возможностей.

Где же все это богатство находиться?

Либо в самом html документе (что не особо удобно) либо в отдельном файле с расширением “.css”. Он, как и html документ является обычным текстовым файлом, поэтому может редактироваться тем же блокнотом из Microsoft Windows.

Слышу возмущение, что может быть удобного в отдельном файле? Только путаница появилась.

Давайте взглянем на примеры:

Стили внутри HTML
HTML страница Результат
<html>
<head>
<title>веб</title>
</head>
<body>
<p style="background:#C00; font:Verdana; color:#CCC">Привет</p>
<p>Мои друзья</p>
<p style="background:#C00; font:Verdana; color:#CCC">Как дела</p>
</body>
</html>
Результат

Стили отдельно в файле style.css
HTML страница style.css Результат
<html>
<head>
<title>веб</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p style="text">Привет</p>
<p>Мои друзья</p>
<p style="text">Как дела</p>
</body>
</html>
.text{
background:#C00;
font:Verdana;
color:#CCC;
}
Результат


Как видите, во втором случае у нас в разделе head появился еще один параметр link (c англ. связь), он присоединяет css файл, из которого будут браться стили.

Слышу вопрос: « и где здесь выигрыш?» Особого выигрыша в количестве написанного нет. Зато теперь у нас два файла, когда все можно было уместить в одном!

А теперь представьте, что на вашем сайте 10 листов с огромным количеством текста. И большим количеством всяких украшений.

И вы вдруг решили, что красный фон раздражает. И теперь что бы его поменять, вам нужно будет найти все абзацы, где задан этот фон и заменить новым. А если вы используете несколько разных фонов, тогда вам нужно будет еще присматриваться, что бы найти именно красный и не затронуть другие.

Во втором же случае вам нужно поменять всего одну строку. И на всем сайте исправиться нужный вам фон. Да и размер html документа будет куда меньше.

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

Но, к сожалению, есть в этой технологии и ложка дегтя. Разные браузеры могут по-разному понимать одни и те же css команды.

То, что будет работать в Firefox, может не работать в Internet Explorer. И это настоящая головная боль даже для опытного веб разработчика. Так как приходиться изощряться для того что бы ваш сайт хорошо смотрелся хотя бы в основных браузерах.

Виновата в этом, конечно же, не сама технология css. А разработчики веб – браузеров. Которые не хотят соответствовать стандартам, а пытаются выделится. В итоге это только прибавляет головной боли веб-мастерам.

Особо худо дела обстоят с детищами Microsoft. Internet Explorer 6, 7 вообще являются моральными уродами в этом плане. И только с Internet Explorer 8 Microsoft начала вставать на путь истинный и более менее приравнялась к стандартам.

Кстати подобные стили поддерживает известный всем Microsoft Word. Если с самого начала все правильно оформлять. То потом в несколько нажатий кнопок можно поменять внешний вид документа размером даже в 500 страниц.

На этом все. Удачи!!! С уважением Тригуба Сергей

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев2 комментария

Спасибо за статьи. Но было бы не плохо, если бы Вы рассматривали CSS на примере создания нескольких страниц (с навигацией, картинками, списками и прочее). Это было бы супер!!

    Тогда пример получился бы очень сложным для понимания. Так как было бы много кода.

    А новичков это только запутает.

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет