Введение в CSS

Введение в CSS

css

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

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

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

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

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

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

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

Пример HTML страницы

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

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

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

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

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

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

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

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

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

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

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

 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>.

Дата обновления: 31.05.2016 — 13:09

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

Добавить комментарий
  1. Василий Блинов

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

    1. SamSebeWebmaster

      Вроде все в порядке))

  2. Алексей

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

SamSebeWebmaster.ru © 2016, все права защищены.