Основы CSS для начинающих вебмастеров

Приветствую всех посетителей сайта! Недавно мы ознакомились с html-языком, теперь пришла пора осваивать CSS. Что это такое и зачем оно нужно? Давайте обо всем по порядку. 

Итак, CSS (Cascading Style Sheets или каскадные таблицы стилей) - это набор параметров форматирования элементов документа или веб-страницы, позволяющий изменить их внешний вид. 

Безусловно, внешний вид элементов можно менять и с помощью html, но CSS дает больше удобств и возможностей для форматирования. CSS работает с шрифтами, цветом, ссылками, полями, строками, высотой, шириной, границами, фоновыми изображениями, позиционированием элементов и т.д. 

И согласитесь, когда все эти параметры страницы хранятся в определенном месте и легко добавляются к любому тегу, это намного удобнее, чем редактирование html-разметки, это во-первых. 

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

К тому же, на сегодняшний день, CSS поддерживается всеми браузерами без исключения. Третья версия CSS3 в старых браузерах может и не отображаться, но первая и вторая версии поддерживаются однозначно, а это значит, что любая веб-страница, отформатированная с помощью css, будет корректно отображаться любым браузером.








                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
2010 - 2017 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
ПОДРОБНЕЕ

Уроки по CSS для новичков

Обычно файл со стилями хранится в корневой папке сайта и к странице подключается единственной строчкой кода:

<link rel="stylesheet" href="style.css">, где style.css - название этого файла и его расположение в серверной папке. 

Т.е. данная строка кода ссылается на внешний файл с описанием стилей под именем style.css, в котором прописаны все параметры оформления используемых на странице тегов <body>, <h1>, <p> и т.д. При этом сами теги в коде HTML пишутся как обычно, ссылка лишь указывает браузеру, что он должен использовать правила отображения данного HTML-документа из указанного CSS-файла. 

Одновременно несколько HTML-документов могут ссылаться на одну таблицу стилей, т.е. один CSS-файл можно использовать для управления отображением множества HTML-документов, что очень удобно при верстке сайта.

Главные преимущества CSS:

 - более чистый код, который быстрее загружается, оптимизирован под поисковые системы и который легче поддерживать;

 - управление отображением множества документов с помощью одной таблицы стилей, общий дизайн для всех страниц;

 - возможность создания респонсивных сайтов, которые адаптивно отображаются на мониторе и мобильных гаджетах;

 - более точный контроль над внешним видом страниц (позиционирование, размер, поля и т.д.) ;

 - дополнительные возможности оформления, например, CSS позволяет убрать подчеркивание у ссылок или создать "липкое" меню, которое следует за скроллингом. 

Синтаксис CSS

У CSS достаточно простой синтаксис. Таблица любых стилей состоит из набора правил, каждое из которых состоит из одного или нескольких селекторов, разделенных запятыми и блока определений. Блок определений обрамляется фигурными скобками и состоит из набора свойств и их значений.

Например:

p {
font-family: "Compact", sans-serif;
  }
h2 {
font-size: 110 %;
color: blue;
background: gray;
       } 
p#paragraph1 {
margin: 0;
  }
a:hover {
text-decoration: none;
  }

Выше приведено четыре правила с селекторами p, h2,  p#paragraph1, a:hover. Согласно первому правилу элементы p (параграфы)  будут отображаться шрифтом Compact, или каким-либо другим шрифтом с засечками  из серии sans-serif, если Compact недоступен.

Второе правило задает стиль для заголовков h2,исходя из которого заголовок второго уровня будет отображаться синим цветом на сером фоне с увеличенным кеглем.

Третье  правило будет применяться только к элементам p, атрибут id (идентификатор) которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Четвертое правило определяет стиль hover для элементов a. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило убирает подчеркивание, когда курсор мыши находится над этими элементами.

Чтобы знать, какие правила задавать элементам на странице сайта, следует изучить CSS-учебник, который можно скачать ниже. С его помощью вы освоите или хотя бы ознакомитесь с возможностями форматирования веб-страницы с помощью CSS и сможете управлять исходным кодом в соответствии со своими потребностями.

Скачать учебник по CSS бесплатно

В учебнике 35 страниц, каждая из которых освещает отдельное свойство CSS, написано доступно и самое главное, с примерами. Вот образец одной из страниц, где показано, как делается выравнивание текста по разному краю средствами css.





Не забудь заглянуть в свою почту и подтвердить подписку!
Для ускорения и облегчения процесса верстки сайта на этапе css вам может пригодиться онлайн генератор flex. Это бесплатный сервис, готовый помочь вам с оформлением стилей любого элемента. Генератор позволяет настроить стили как блочных, так и строчных элементов, задать им фиксированные размеры или сделать "резиновыми", произвести выравнивание и задать отступы. Визуальный просмотр позволяет сразу увидеть внесенные изменения, полученный код тут же можно скопировать без всяких ограничений.

На этом материал завершен, осваивайте стили css, чтобы уверенно редактировать любой код под себя. Ведь зачастую при установке разных красивостей на сайт типа слайдера, галереи, меню, приходится вносить правки в стили, чтобы вписать их в дизайн своего сайта, и без знаний хотя бы основ css, приходится туго. Поэтому, чтобы не обращаться за сторонней помощью, а самостоятельно править стили, скачайте учебник и ознакомьтесь с основами.


До новых встреч! С ув. Светлана (SvetLana_TSV).


Учебник по CSS для новичков-чайников