Что такое CSS? Для чего он нужен? Почему его должен знать КАЖДЫЙ НАЧИНАЮЩИЙ ВЕБМАСТЕР?

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

Не скажу, что я гуру CSS, но отредактировать шаблон WordPress под себя в принципе смогу.  Да, CSS сложнее, чем HTML, об основах которого я недавно писал в статье:(Основы HTML новичкам), но как говорится нет ничего невозможного, поставьте цель изучить CSS, определите сроки ее выполнения и, я не сомневаюсь, Вы быстро добьетесь ее и ответите для себя на вопрос что такое css.

Что такое CSS и для чего его нужно изучать?

CSS это аббревиатура от Cascading Style Sheets — Каскадные таблицы стилей. Объяснить что это такое и будет целью моей сегодняшней статьи.

Итак, как я писал в своих прошлых статьях, язык разметки гипертекста (HTML) используется для того, чтобы сделать каркас страницы, обозначить абзацы, организовать таблицы и списки.

Вот пример простого каркаса HTML страницы:

Если вы скопируете этот код и вставите в пустой файл с расширением .html , то увидите следующую картину:

Мы видим появился абзац, картинка, таблица, список и ссылка. Все перечисленные элементы идут по порядку и прижаты к верхнему левому краю. Это стандартная позиция для всех элементов HTML. В этом же документе мы можем прописать цвет шрифта(color), форматирование таблицы, фон страницы(background), внешний вид списков и ссылки через атрибуты HTML . В результате мы получим немного улучшенную версию исходной web-страницы. Надеюсь до этого момента было все понятно. Но представим на минуту, что Ваш сайт состоит не из 10-20 страниц, в которых Вы сможете менять шрифт или фон самостоятельно, а из 100-200 web-страниц!!! Представьте, что на каждой Вашей странице есть таблица или список и Вы захотели изменить ширину таблицы.

Прописав для первых 10 таблиц свойство width(ширина), я уверен, что когда Вы подумаете что еще рутинной работы на 190 страниц, то весь энтузиазм резко пропадет!

А для того чтобы не прописывать оформление каждого элемента на  всех web страницах и был разработан формальный язык, описывающий внешний вид web-документа — CSS. С его помощью мы может просто указать, что для всех таблиц использовать ширину в 500 пикселей, и когда Вы будите создавать новую таблицу, то она автоматически станет 500 пикселей по ширине. Удобно, не правда ли?

Однако оформление элементов на странице это лишь крупинка того, что можно вытворять при помощи CSS. Забегая вперед, скажу, что на CSS можно делать дивовую( от названия тега блочного элемента <div>) верстку, всплывающие подсказки, выпадающие меню и т.д.

Отвечая на вопрос: «Для чего нужно изучать CSS?», я покажу Вам два слайда, как я изменил внешнее оформление моего блога при помощи CSS:

Изменения коснулись практически всех элементов сайта: начиная от шапки и заканчивая футером. Не сказать, что получился шедевр, но для новичка вполне, я думаю не плохо.  Обладать начальными знаниями CSS необходимо тем, кто хочет создать свой сайт или блог. Я рекомендую такую схему обучения для новичков:

1. Начинайте с осваивания языка гипертекста HTML
2. Закончив HTML приступайте к CSS. Если язык гипертекста дался Вам легко, то и CSS не вызовет затруднений. Однако как я уже говорил, CSS сложнее, в нем есть тонкие моменты, котором нужно уделить особое внимание. Изучив одну тему, не стремитесь охватить сразу все, а лучше закрепите прошедший материал, сделайте пару примеров. Почему я это советую?  Все дело в том, что когда я сам начинал CSS я отнесся к нему не с должным вниманием, что называется изучил на лету. Но потом спустя время оказалось, что я !половину всего изученного забыл. Не повторяйте моих ошибок и подходите к этому делу серьезно.

Да, можно сделать сайт на бесплатном хостинге или какой-либо блог-платформе с предустановленными темами оформления, однако в таком случае ваш сайт будет похож на сотни других, что я думаю не очень хорошо. По моему опыту могу сказать, что месяца ежедневых занятий хватит для того, чтобы разобраться  с основами каскадных таблиц стилей.

Как подключить CSS в HTML? Разбираемся с базовыми понятиями: селектор, свойство, правило

Для того, чтобы состыковать CSS и HTML можно воспользоваться 3 способами:

1. Использование атрибута Style внутри тега
2. Прописывание правил CSS внутри тега <HEAD>
3. Вынос стилей в отдельный файл

Первый способ:

Как видите, внуть тега h1 мы прописали атрибут style и указали что цвет текста у абзаца будет красного цвета.  Вообще синтаксис CSS таков:

Думаю, на схеме все понятно: сначала идет элемент, которому мы присваиваем правила, далее открывающая фигурная скобка, внутри которой мы прописываем правила(color, font) и ставим знак двух точек после чего следует значение этого свойства(red, 16px Tahoma) и фигурные скобки закрываются. Все!!! Оказалось не так сложно, как на первый взгляд!!! Попробуйте сами вписать эти правила и посмотрите, что получится.

Второй способ:

В этот способ удобен тем, что о одном документе(файле) сразу и стили и каркас, однако вебмастера не советуют так делать, по причине того, нагромождение стилей замедляет открытие страницы, да и поисковые системы не «любят» много кода на странице.

Третий способ:

Внутри тега <HEAD> прописывается строка как на скриншоте, далее создается файл с названием style.css и в него уже прописываются все свойства. Это метод подключения стилей самый популярный, пользуясь этим методом мы убиваем сразу двух зайцев: очищаем страницу от лишнего кода и создаем удобство для редактирования html документа. В атрибуте href прописываем абсолютный или относительный путь к файлу со стилями, а атрибуты type и rel являются стандартными.

Этими тремя методами Вы можете пользоваться, когда работаете над внешним видом сайта.