CSS (на англ. Cascading Style Sheets, на рус. Каскадные Таблицы Стилей) — это формальный язык, созданный для управления стилями внешнего вида веб-страниц.

При изучение HTML происходит некое разделение разработчиков на 2 класса. Первые считают, что язык гипертекстовой разметки документа прекрасно подходит для создания сайтов и ни каких других средств при этом не требуется. Вторые считают, что данного языка недостаточно даже для работы с простыми веб-страницами. Я соглашусь с последними, когда-то создание сайта чисто на HTML и было возможным, но все равно это была кропотливая и трудоемкая работа, зачастую все страницы приходилось редактировать отдельно. С созданием CSS такая необходимость отпала.

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

Я считаю, что преимуществ в использование Каскадных Таблиц Стилей очень много, а с выпуском версии CSS3 стало еще больше.

Кратко перечислю основные преимущества:

одновременное редактирование оформления сразу всех веб-страниц сайта. Это основное преимущество средств CSS над средствами HTML;
более чистый код. После воплощения идеи о разделение содержания и оформления, веб-страницы уменьшились в коде и весе, соответственно увеличилась скорость их загрузки;
более широкий спектр возможностей по оформлению. Дизайн сайтов c технологией CSS намного красивее;
возможность оформления стилей для различных устройств (компьютеры, планшеты, смартфоны и т.п.);
разделение на классы. CSS позволяет редактировать не только весь сайт, но и отдельные группы элементов в отдельных веб-страницах.

Посмотрим на Каскадные Таблицы Стилей в действие. Разберем на примере веб-страницы ниже:

Рисунок 1. Пример HTML страницы

Данная веб-страница создана с использованием языка HTML, никаких стилей она не содержит. Вот так выглядит ее HTML код:

1	Публикация Web-страницы в Интернете

Публикация Web-страницы

С помощью редактора Front Page Express можно за считанные
минуты создать простейшую Веб- страницу, особенно если
воспользоваться готовыми шаблонами. Когда такая страница
создана, встает вопрос о ее публикации.

Давайте добавим несколько стилей для нашей страницы с помощью CSS:

Рисунок 2. Пример страницы оформленной с помощью CSS

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

Рисунок 3. HTML код страницы с ссылкой на файл CSS

Как видно из примера, ни каких дополнительных атрибутов и тегов для оформления я не использовал вставил только ссылку на файл стилей: <link rel=»stylesheet» href=»style.css»> .

Взглянем на сам файл style.css, который содержит стиля оформления на рисунке 2:

body {
  background-color: #FAF0E6; /* Цвет фона веб-страницы */
  font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
  font-size: 13pt; /* Размер основного шрифта в пунктах  */
  color: #333; /* Цвет основного текста */ 
}
h1 {
  color: #87CEEB; /* Цвет заголовка */
  font-size: 26pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Начертание текста  */
}
p {
  text-align: justify; /* Выравнивание по ширине */
  margin-left: 60px; /* Отступ слева в пикселах */
  margin-right: 10px; /* Отступ справа в пикселах */
  border-right: 2px solid #00FFFF; /* Параметры линии слева */
  border-bottom: 2px solid #00FFFF; /* Параметры линии снизу */
  padding-right: 10px; /* Отступ от линии слева до текста  */
  padding-bottom: 10px; /* Отступ от линии снизу до текста  */
}

В данном файле описываются стили оформления тегов <body>, <H1>, <p>.

[Всего голосов: 0 Средний: 0/5]

3 комментария

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

Василий Блинов

28.04.2015 в 18:29

Я вот без опыта верстал свой блог, натыкал туда кодов, теперь задумываюсь нужны ли там некоторые строчки. Особенно в хедере, что-то не понятное))

Ответить
1. SamSebeWebmaster
  
  29.04.2015 в 13:58
  
  Вроде все в порядке))
  
  Ответить
Алексей

20.10.2015 в 17:15

Что скажите по урокам Димы Охрименко
По HMTL+CSS

Ответить