CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). CSS представляет собой совокупность параметров, с помощью которых отображается тот или иной элемент на веб-странице. Эти параметры могут указываться, как в отдельном файле, так и быть прописаны непосредственно в HTML-коде страницы. Например, на нашей веб странице могут быть такие элементы: заголовок статьи, абзацы, цитаты, сноски, картинки, видео ролики, ссылки. Можно задать конкретный стиль отображения — размер, цвет, толщину рамок и др.
При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это заметно сократит время — когда знаешь место нахождения таблицы стилей, всегда можно оперативно найти конкретный стиль и отредактировать. Файл стилей имеет расширение .css , название у него, как правило, style.css .
Подключение CSS файла
Для подключения CSS файла существует несколько способов. Мы расскажем о двух способах, которые наиболее часто используются при создании сайтов:
1. Связывание. Этот способ используется когда необходимо задать стили для всех страниц сайта в одном файле. Данный способ часто используется при создании сайта. Чтобы подключить таблицу стилей используется команда , которую необходимо разместить в теле тега
.Первые два свойства указывают браузеру, что на сайте используется CSS, затем указывается адрес файла со стилями.
2. Встраивание в теги документа. При этом способе стиль для конкретного элемента страницы задается непосредственно в HTML коде. Например:
Здесь мы прописали стили соответственно для контейнеров
Приведем пример таблицы стилей — создадим файл 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; /* Нормальное начертание текста */ }
Здесь мы задали стили для тела страницы
и для заголовка. Также можно задать конкретные стили для любых других элементов страницы веб-сайта.
Теперь подключим нашу таблицу стилей к сайту:
Подключение CSS к сайту Привет, Мир!
Это моя первая страница со стилями CSS
Таким образом, мы разобрались, что такое CSS, зачем данная технология используется, научились подключать стили к сайту. Данный урок является, своего рода, введением в каскадные таблицы стилей. В других уроках мы будем говорить о технологии CSS более детально.
Самой частой причиной проблем с раскрытием файла CSS является просто отсутствие соответствующих приложений, установленных на Вашем компьютере. В таком случае достаточно найти, скачать и установить приложение, обслуживающее файлы в формате CSS - такие программы доступны ниже.
Поисковая система
Введите расширение файла
Помощь
Подсказка
Необходимо учесть, что некоторые закодированные данные из файлов, которые наш компьютер не читает, иногда можно просмотреть в Блокноте. Таким образом мы прочитаем фрагменты текста или числа - Стоит проверить, действует ли этот метод также в случае файлов CSS.
Что сделать, если приложение со списка уже было установлено?
Часто установленное приложение должно автоматически связаться с файлом CSS. Если это не произошло, то файл CSS успешно можно связать вручную с ново установленным приложением. Достаточно нажать правой кнопкой мышки на файл CSS, а затем среди доступных выбрать опцию "Выбрать программу по умолчанию". Затем необходимо выбрать опцию "Просмотреть" и отыскать избранное приложение. Введенные изменения необходимо утвердить с помощью опции "OK".
Программы, открывающие файл CSS
Windows
Mac OS
Linux
Почему я не могу открыть файл CSS?
Проблемы с файлами CSS могут иметь также другую почву. Иногда даже установление на компьютере программного обеспечения, обслуживающего файлы CSS не решит проблему. Причиной невозможности открытия, а также работы с файлом CSS может быть также:
Несоответственные связи файла CSS в записях реестра
- повреждение файла CSS, который мы открываем
- инфицирование файла CSS (вирусы)
- слишком маленький ресурс компьютера
- неактуальные драйверы
- устранение расширения CSS из реестра системы Windows
- незавершенная установка программы, обслуживающей расширение CSS
Устранение этих проблем должно привести к свободному открытию и работе с файлами CSS. В случае, если компьютер по-прежнему имеет проблемы с файлами, необходимо воспользоваться помощью эксперта, который установит точную причину.
Мой компьютер не показывает расширений файлов, что сделать?
В стандартных установках системы Windows пользователь компьютера не видит расширения файлов CSS. Это успешно можно изменить в настройках. Достаточно войти в "Панель управления" и выбрать "Вид и персонализация". Затем необходимо войти в "Опции папок", и открыть "Вид". В закладке "Вид" находится опция "Укрыть расширения известных типов файлов" - необходимо выбрать эту опцию и подтвердить операцию нажатием кнопки "OK". В этот момент расширения всех файлов, в том числе CSS должны появится сортированные по названию файла.
После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).
Рис. 1.2. Веб-страница, созданная на HTML и CSS
Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).
Пример 1.1. Исходный код документа
HTML5 CSS 2.1 IE Cr Op Sa Fx
Флексагон
Флексагон представляет собой бумажную фигуру, которая имеет три и более стороны. Поначалу кажется, что это невозможно, но вспомните ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги, и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. Перегибая флексагон, по очереди будем наблюдать все его поверхности.
Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css . Содержимое этого файла показано в примере 1.2.
Пример 1.2. Содержимое стилевого файла style.css
Body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */ font-size: 11pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #333; /* Цвет основного текста */ } h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ } p { text-align: justify; /* Выравнивание по ширине */ margin-left: 60px; /* Отступ слева в пикселах */ margin-right: 10px; /* Отступ справа в пикселах */ border-left: 1px solid #999; /* Параметры линии слева */ border-bottom: 1px solid #999; /* Параметры линии снизу */ padding-left: 10px; /* Отступ от линии слева до текста */ padding-bottom: 10px; /* Отступ от линии снизу до текста */ }
В файле style.css как раз и описаны все параметры оформления таких тегов как
,и
Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом
, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление» , как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля» (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
- font-color
- color
- font-family
- font-size
2. Что такое стиль?
- Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
- Язык разметки гипертекстовых документов.
- Набор правил форматирования элементов веб-страницы.
- Метод преобразований текстовых документов в HTML.
- Технология, представляющая собой разные приёмы для вёрстки HTML-кода.
3. Как расшифровывается аббревиатура CSS?
- Colorful Style Sheets
- Cascading Style Sheets
- Computer Style Sheets
- Creative Style Sheets
- Common Style Sheets
Ответы
2. Набор правил форматирования элементов веб-страницы.
Наиболее часто встречаемой проблемой, из-за которой пользователи не могут открыть этот файл, является неверно назначенная программа. Чтобы исправить это в ОС Windows вам необходимо нажать правой кнопкой на файле, в контекстном меню навести мышь на пункт "Открыть с помощью", а выпадающем меню выбрать пункт "Выбрать программу...". В результате вы увидите список установленных программ на вашем компьютере, и сможете выбрать подходящую. Рекомендуем также поставить галочку напротив пункта "Использовать это приложение для всех файлов CSS".
Другая проблема, с которой наши пользователи также встречаются довольно часто - файл CSS поврежден. Такая ситуация может возникнуть в массе случаев. Например: файл был скачан не польностью в результате ошибки сервера, файл был поврежден изначально и пр. Для устранения данной проблемы воспользуйтесь одной из рекомендаций:
- Попробуйте найти нужный файл в другом источнике в сети интернет. Возможно вам повезет найти более подходящую версию. Пример поиска в Google: "Файл filetype:CSS" . Просто замените слово "файл" на нужное вам название;
- Попросите прислать вам исходный файл еще раз, возможно он был поврежден при передаче;
У вас есть проблема с открытием.CSS-файлов? Мы собираем информацию о файловых форматах и можем рассказать для чего нужны файлы CSS. Дополнительно мы рекомендуем программы, которые больше всего подходят для открытия или конвертирования таких файлов.
Для чего нужен файловый формат.CSS?
Происходя от стандартного короткого обозначения каскадных таблиц стилей (Cascading Style Sheets, CSS), файловое расширение .css представляет тип файлов "Таблица стилей CSS" (.css ). Как одна из ключевых веб-технологий, созданная и поддерживаемая Консорциумом Всемирной паутины (W3C), CSS отвечает за презентационную сторону документов HTML/XHTML/XML и позволяет создателям веб-ресурсов полностью отделить структуру от внешнего вида. Таблицы стилей CSS используются во всех грамотно построенных веб-сайтах, а кроме того — для настройки внешнего вида браузеров и прочих настольных/мобильных приложений.
Файл .css является таблицей стилей CSS. Это простой текстовый файл, в котором собраны правила форматирования CSS, сгруппированные в соответствии с селекторами (HTML-тегами и др.) и применяемые к ним каскадно. Таблицы стилей CSS могут внедряться в тело веб-документов или подключаться в качестве внешних файлов .css посредством тега . Обычно к странице подключаются сразу несколько таблиц стилей, определяющих различные варианты представления (мобильный экран, печать). Любой файл с таблицей стилей CSS можно открыть и отредактировать в простейшем текстовом редакторе. Большинство, однако, отдает предпочтение мощным универсальным или специальным CSS-редакторам с подсветкой синтаксиса и встроенной справкой.