Введение в CSS

CSS (на англ. Cascading Style Sheets, на рус. Каскадные Таблицы Стилей) — это формальный язык, созданный для управления стилями внешнего вида веб-страниц.
При изучение HTML происходит некое разделение разработчиков на 2 класса. Первые считают, что язык гипертекстовой разметки документа прекрасно подходит для создания сайтов и ни каких других средств при этом не требуется. Вторые считают, что данного языка недостаточно даже для работы с простыми веб-страницами. Я соглашусь с последними, когда-то создание сайта чисто на HTML и было возможным, но все равно это была кропотливая и трудоемкая работа, зачастую все страницы приходилось редактировать отдельно. С созданием CSS такая необходимость отпала.
Преимущества использования CSS
Я считаю, что преимуществ в использование Каскадных Таблиц Стилей очень много, а с выпуском версии CSS3 стало еще больше.
Кратко перечислю основные преимущества:
- одновременное редактирование оформления сразу всех веб-страниц сайта. Это основное преимущество средств CSS над средствами HTML;
- более чистый код. После воплощения идеи о разделение содержания и оформления, веб-страницы уменьшились в коде и весе, соответственно увеличилась скорость их загрузки;
- более широкий спектр возможностей по оформлению. Дизайн сайтов c технологией CSS намного красивее;
- возможность оформления стилей для различных устройств (компьютеры, планшеты, смартфоны и т.п.);
- разделение на классы. CSS позволяет редактировать не только весь сайт, но и отдельные группы элементов в отдельных веб-страницах.
Посмотрим на Каскадные Таблицы Стилей в действие. Разберем на примере веб-страницы ниже:
Данная веб-страница создана с использованием языка HTML, никаких стилей она не содержит. Вот так выглядит ее HTML код:
1 | Публикация Web-страницы в Интернете |
Публикация Web-страницы
С помощью редактора Front Page Express можно за считанные
минуты создать простейшую Веб- страницу, особенно если
воспользоваться готовыми шаблонами. Когда такая страница
создана, встает вопрос о ее публикации.
Давайте добавим несколько стилей для нашей страницы с помощью CSS:
Вот такое несложное оформление я смог настроить за несколько минут. Сначала посмотрим на HTML код нашей веб-страницы:
Как видно из примера, ни каких дополнительных атрибутов и тегов для оформления я не использовал вставил только ссылку на файл стилей: <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>.
Я вот без опыта верстал свой блог, натыкал туда кодов, теперь задумываюсь нужны ли там некоторые строчки. Особенно в хедере, что-то не понятное))
Вроде все в порядке))
Что скажите по урокам Димы Охрименко
По HMTL+CSS