Приведем пример таблицы стилей — создадим файл 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 более детально.

- Расширение (формат) - это символы в конце файла после последней точки.
- Компьютер определяет тип файла именно по расширению.
- По умолчанию Windows не показывает расширения имен файлов.
- В имени файла и расширении нельзя использовать некоторые символы.
- Не все форматы имеют отношение к одной и той же программе.
- Ниже находятся все программы с помощью которых можно открыть файл CSS.

Многие пользователи MS Windows давно успели заметить, что стандартный блокнот - это довольно неудобная в своем использовании программа. Заменой ей может стать данный бесплатный редактор текстовых файлов, обеспечивающий поддержку синтаксиса большого количества языков программирования. Программа содержит в себе довольно широкий набор опций и отличается минимальным потреблением ресурсов процессора. Программа делает возможным одновременный просмотр нескольких документов сразу и редактирование их, без закрытия лишних окон. Доступной стала и такая опция, как редактирование одного и того же документа в разных местах, что очень удобно...

Notepad2 – простое приложение, позволяющее печатать и редактировать текст. Она поможет в создании HTML-страниц, программировании на различных языках (CSS, Java, JavaScript, Python, SQL, Perl, PHP) так как способна подсвечивать код. Программа построена по принципу простого блокнота, она маловесна и компактна. Этот текстовый редактор проверяет все скобки на наличие пары, поддерживает авто отступы. Программа Notepad2 не только поддерживает кодировки ASCII и UTF-8, но и умеет их конвертировать. Позволяет откатывать нежелательные операции на много уровней назад. Поддерживает блочное выделение элементов текста и имеет нумерованные ст...

Одна из лучших программ создания веб аппликаций для WEB 2.0 разработчиков. Включает в себя удобный и простой интерфейс работы, удобные редакторы HTML, PHP, Ruby, CSS, Python и JavaScript, поддерживает HTML5, имеет встроенный Дебагер, с широким спектром возможностей, поддержка различных браузеров, таких как Mozilla Firefox, Opera, Google Chrome, Internet Explorer и Safari, оперативно поддерживает все новые технологии, такие как Adobe AIR и даже разработка под IPhone 5. Справочная система довольно богатая и без сомнений это правильный выбор для любого разработчика. Программа работает на платформе Eclipse и имеет массу плагинов чт...

Bluefish – мощная программа для программирования и веб-разработки. Имеет множество функций для разработки сайтов, скриптов а так же программных кодов. Программа работает на большой скорости, может загрузить сотни файлов в считанные секунды. Без каких либо проблем откроет более 500+ документов одновременно. Есть очень полезные функции, как хороший поиск по файлам а так же без лимитные функции «Отмена» и «Повтор». Автоматическое восстановление при незапланированном выключение. Интеграция внешних программ и внешних фильтров. Поддержка языка, а именно справочная информация онлайн. Программа в разработке, но уже поддерживает 17 язык...

PSPad – весьма полезный редактор программного кода, подходящий для программистов-кодеров, которые пишут на нескольких языках. Подойдёт тем, кому нужна подсветка программного кода. Может легко заменить популярные инструменты. PSPad докажет свою ценность при работе с синтаксисом сложного кода. Он был создан, чтобы помочь всем типам пользователей. Программа поставляется с впечатляющим списком шаблонов. Есть функции, как подсветка синтаксиса, записи макросов либо поиск и функция замены, которые являются общими для подобных приложений. Он поставляется с редактором HEX, клиентом FTP, так что пользователь может редактировать код прямо...

Komodo Edit - удобный редактор кода, поддерживающий широкий спектр различных языков программирования. Программа дает пользователям возможность работать сразу с несколькими файлами, писать код станет более эффективно с использованием функции автозаполнения, подсказок. Приложение позволяет автоматически выделять переменные при их выборе. С помощью редактора можно просматривать файлы на других программных языках. Программа поддерживает окраску синтаксиса, отступы. Может проверять параметры синтаксиса, сниппеты, используемые для хранения кода исходного столбца. Имеет режим простого редактирования и поддерживает перетаскивание элеме...

В интернете очень много программ, позволяющих редактировать исходный код другой программы, файла и др. Однако большинство из подобных программ являются всего лишь текстовым редактором наподобие блокнота. Отличаются они от вышеуказанного редактора лишь тем, что имеют подсветку синтаксиса. Однако в некоторых случаях, такого функционала программы оказывается недостаточно. Программисту бывает необходимо быстро находить различные части документа. И вот, наконец-то, в появилась программа, позволяющая решить эту проблему. Программа называется SynWrite. Её отличительная особенность – наличие навигационной панели с деревом, котор...

FileOptimizer – удобное приложение для сжатия файлов, созданное одной из независимых команд программистов. Данное приложение отличается улучшенными алгоритмами сжатия и высокой скоростью работы. Программа позволяет сжимать файлы практически всех типов, включая архивы, текстовые форматы, форматы изображений и т.п. Также, данная программа может работать со скриптами, а также через командную строку, что будет особенно полезно опытным пользователям. Для начинающих пользователей же, всё очень просто. Программа интегрируется в контекстное меню, что позволяет очень быстро сжимать файлы, находящиеся на любом диске и в любой папке.

RJ TextEd - редактор кода, который можно использовать для создания html страниц, либо для написания других программ или работы с php. Отличительной особенностью программы является наличие предварительного просмотра получаемой веб-страницы в одном из браузеров. Причем все вводимые изменения будут тут же видимы в самом браузере. В качестве такого просмотрщика можно использовать и внутренний браузер. Однако создавать веб-страницу в таком редакторе не очень удобно, поскольку все необходимые для этого функции находятся в разных местах. Зато в php данный редактор показывает себя отлично. При работе с любым кодом, вы можете при...

Safari - браузер, разработанный знаменитой компанией Apple, работающий, при этом, с операционной системой Windows. Данный обозреватель является простым и быстрым, обладающим полным функционалом для полноценной работы в Интернет. Браузер имеет встроенный поиск, средства для чтения RSS, систему избранного и модуль для автоматического заполнения форм на сайте. Как и вся продукция Apple, браузер имеет свои уникальные особенности, выгодно отличающие его ото всех конкурирующих продуктов. Так, Safari является одним из наиболее быстрых браузеров, при этом, имеющий обширный функционал. Так, например, в его состав входит надёжный блокира...

Free Opener - достаточно функциональный просмотрщик самых популярных файлов, включая архивы Winrar, документы Microsoft Office, PDF, документы Photoshop, торрент файлы, иконки, веб страницы, текстовые документы, аудио и видео файлы, графические файлы в том числе и Flash и многое другое. Количество поддерживаемых файлов превышает семидесяти. В программе отсутствуют привычные нам настройки и опции за исключением смена дизайна. Также необходима отметить, что отсутствует русский язык, но учитывая простоту, не стоит недооценивать программу. Free Opener - это универсальная и очень удобная программа для чтения различных типов файлов.

Polarity - полезный веб-браузер, позволяющий серфить по различным веб-сайтам. Имеет закладки для любимых страниц. Программа основана на движках Trident и Chromium, что обеспечивает быстрый, безопасный веб-серфинг для пользователей. После первого запуска обозревателя, программа предложит выбрать любимую поисковую систему, обеспечивая несколько популярных вариантов. Первоначальные настройки могут быть в дальнейшем изменены как угодно. Инструменты приватности позволяют просматривать любые страницы, не беспокоясь об истории, кэше либо куки-файлах. Вся информация, полученная в этом режиме, удаляется безвозвратно. Веб-обозреватель и...

Файл CSS поврежден

Если после установки необходимой программы из списка, Вы по-прежнему не можете открыть файл с расширением CSS, поводом может быть его повреждение. Решением может быть нахождение новой копии файла CSS, который Вы собираетесь открыть

Расширение файла CSS не связано с соответствующим приложением

В таком случае проще всего воспользоваться встроенными в операционную систему инструментами для связи файла CSS с приложениями для его обслуживания. Нажмите дважды на файл, которой не можете открыть, - операционная система покажет список программ, которые вероятнее всего совместимы с Вашим файлом CSS. Выберите одну из них, либо укажите на диске место, в котором Вы установили одно из предложений из нашего списка. Система Windows должна открыть файл CSS с помощью предварительно установленной программы.

Запись, касающаяся файла CSS в "Реестре Системы Windows" удалена либо повреждена

Файл 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. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?

1. font-color
2. color
3. font-family
4. font-size

2. Что такое стиль?

1. Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
2. Язык разметки гипертекстовых документов.
3. Набор правил форматирования элементов веб-страницы.
4. Метод преобразований текстовых документов в HTML.
5. Технология, представляющая собой разные приёмы для вёрстки HTML-кода.

3. Как расшифровывается аббревиатура CSS?

1. Colorful Style Sheets
2. Cascading Style Sheets
3. Computer Style Sheets
4. Creative Style Sheets
5. Common Style Sheets

Ответы

2. Набор правил форматирования элементов веб-страницы.