✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по CSS, CSS3 ›› Что такое CSS? Подключение CSS файла

Что такое CSS? Подключение CSS файла

Аббревиатура CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). Таблицы стилей предназначены для визуального оформления элементов веб-страницы. Как правило, CSS используется в связке с HTML, что является весьма эффективным «инструментом» при создании любого сайта. Именно поэтому, наряду с изучением HTML также рекомендуется изучить технологию CSS.

Что такое CSS? Подключение CSS файла

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

При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это заметно сократит Ваше время. Ведь Вы будете знать, что все стили находятся в одном месте и при необходимости всегда можно оперативно найти конкретный стиль и изменить его. Файл со стилями имеет расширение .css, название у него, как правило, style.css.

Подключение CSS файла

Как подключить таблицу стилей CSS к документу? Для подключения CSS файла существует несколько способов. Я расскажу о двух способах, которые наиболее часто используются при создании сайтов:

1. Связывание. Этот способ используется когда необходимо задать стили для всех страниц сайта в одном файле. Данный способ часто используется при создании сайта. Чтобы подключить таблицу стилей используется команда <link>, которую необходимо разместить в теле тега <head>.

<LINK REL=STYLESHEET TYPE="text/css" HREF="/css/styles.css">

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

2. Встраивание в теги документа.  При этом способе стиль для конкретного элемента страницы задается непосредственно в HTML коде. Например:

<div style="color: black; background-color: yellow; font-variant:small-caps"> Черный текст на желтом фоне, маленькими заглавными буквами.</div>

Или:

<span style="color: blue; background-color: yellow; font-variant:small-caps">Синий текст на желтом фоне, маленькими заглавными буквами.</span>

Здесь мы прописали стили соответственно для контейнеров <div> и <span>. Данные стили будут применяться исключительно для них.

Теперь давайте приведем пример таблицы стилей для сайта. Для этого создадим файл style.css, в котором пропишем стили для нашего сайта:

body {
font-family: Arial, Verdana, Sans-serif; /* Семейство шрифтов */
font-size: 12pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #000000; /* Цвет основного текста */
}
h1 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}

Здесь мы задали стили для тела страницы <body> и для заголовка <h1>. Аналогичным образом можно задать определенный стиль и для любых других элементов страницы веб-сайта.

Теперь подключим нашу таблицу стилей к сайту:

<html>
<head>
<title>Подключение CSS к сайту</title>
<link rel=STYLESHEET TYPE="text/css" HREF="/style.css">
</head>
<body>
<h1>Привет, Мир!</h1>
<p>Это моя первая страница со стилями CSS</p>
</body>
</html>

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

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

Оставить комментарий

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2016 © Siteblogger.ru
Рейтинг@Mail.ru