Какое расширение у файла стилей сайта
Главная проблема — известить Марию, чтобы она лично как можно скорее заявила на весь мир о РТБСМ.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Файл стилей style.css — это файл, в котором заданы значения параметров отображения информации, присущие выбранному шаблону. В число этих параметров входят длина и ширина множества полей шаблона, размеры, цвет и толщина различных рамок, используемые шрифты и многие другие параметры.
В используемом шаблоне есть несколько CSS-файлов, которые тоже оказывают влияние на отображение страниц сайта. Чтобы успешно переделывать CSS-файлы, надо изучать Приоритеты стилей в CSS, что достаточно сложно и утомительно. К тому же нужно докопаться до тех функций шаблона, которые вызывают вспомогательные CSS-файлы.
К счастью, существует замечательное правило !important, которое используется тогда, когда нужно, чтобы свойство непременно было применено к элементу независимо от того, в каком селекторе и в каком месте CSS-кода свойство задано. Синтаксис этого правила таков: селектор
Первостепенная важность файла style.css подчёркивается тем, что при отображении любой страницы сайта этот файл прочитывается всегда сразу после файла с текстом страницы. В этом можно наглядно убедиться в сервисе PingDom, протестировав им любую страницу сайта. Вспомогательные CSS-файлы постараюсь не затрагивать без острой необходимости.
Через некоторое время после создания сайта, когда поймёте, что сайт нерационально использует ширину экрана современных компьютеров, плохо формирует таблицы и обладает рядом других недостатков, неизбежно возникнет проблема существенной переделки шаблона.
Многое можно изменить, внеся изменения именно в файл стилей style.css Нужно только умудриться разобраться в содержании этого файла, что является весьма нелёгкой задачей.
Приходится держать на сервере хостинга несколько вариантов файла стилей:
- исходный файл style_0.css длиной 23-ри килобайта, который пришёл вместе с шаблоном;
- комментируемый на русском языке файл style_comm.css, в который желательно вносить комментарии ко всем вносимым изменениям, чтобы всегда можно было вспомнить то, в чём смогли разобраться и переделать, а потом благополучно забыли;
- рабочий файл стилей style.css, из которого удалены все комментарии и все лишние пробелы, что существенно сокращает его длину и способствует улучшению скоростных показателей сайта.
Например, рабочий файл стилей этого сайта имеет длину 17-ть килобайт на сервере хостинга и 4,5 килобайта согласно данным сервиса PingDom (при формировании страницы сайта на сервере хостинга происходит автоматическое уплотнение файла стилей). До создания рабочего файла стилей style.css было не 4,5 килобайт, а более 5-ти килобайт.
Считать ли существенным выигрыш примерно 10-ти процентов? Загляните в рекомендации сервиса PageSpeed — он выдаёт множество рекомендаций, которые дают выигрыш в пределах от 5-ти до 10-ти процентов. Решайте сами в каждом конкретном случае, ибо даже 5-ть % дадут разный эффект при оптимизации файла длиной 10-ть килобайт и файла длиной 1210-ть килобайт (такую и даже бОльшую длину могут иметь файлы изображений).
А оптимизировать файл стилей style.css этот сервис призывает первым делом и буквально при анализе каждой страницы сайта!
Множество конкретных рекомендаций по внесению изменений в файл стилей style.css уже разбросаны по страницам раздела Сайт — не вижу смысла выискивать их и переносить на эту страницу: там они полезнее.
Замечу лишь, что считаю рациональным сделать так, чтобы файл стилей style.css имел основную неизменную часть и концовку, в которой сосредоточены все внесенные изменения: это облегчит контроль изменений и повысит вероятность того, что последующие инструкции не перешибут записанных Вами инструкций.
Хорошо бы файл стилей style.css проанализировать на непротиворечивость инструкций, но это нудная и кропотливая работа, за которую даже страшно браться. А искать сервис анализа файл стилей style.css на непротиворечивость как-то пока недосуг! Со временем займусь на досуге, если он появится!
Запустил Валидатор CSS. Он не обнаружил ошибок CSS-кода, но выдал 283-ри предупреждения. Начал постепенно избавляться от этих предупреждений, надеюсь с их помощью кое-что улучшить на страницах сайта.
Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую. В хороших комментариях сохраняю ссылку на сайт автора!
И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Продолжение тут…
Первый практический шаг, который необходимо сделать при работе со стилям CSS, это научиться создавать файл, в котором эти стили будут храниться. Давайте посмотрим, что для этого нужно сделать.
Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.
Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.
Таким образом, можно сделать вывод, что создать файл стилей CSS мы можем просто изменив расширение текстового файла.
Для тех, кто любит видео:
Способ 1. Создание файла CSS меняя расширение текстового файла.
Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.
В главном меню программы выбираем «Файл-Сохранить как».
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.css.
Если у Вас не отображается расширение файлов, вот заметка:
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.
После данной операции вы получите файл стилей css.
Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).
Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.
Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.
После открытия программы появляется главное меню, в котором можно выбрать создание файла CSS.
После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».
Аналогичный процесс создания файлов CSS есть и в других редакторов кода.
На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.
Внутренняя таблица стилей
Стили пишутся в самом HTML-документе внутри элемента , который в свою очередь располагается внутри . По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но часто применяется в ситуациях, когда речь идёт об одной веб-странице (пример 3).
Пример 3. Использование
В данном примере задан стиль элемента , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со .
Рис. 1. Вид заголовка, оформленного с помощью стилей
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с внешней или внутренней таблицей стилей, но никак не со встроенными стилями. Общий синтаксис следующий.
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью url или без него. В примере 6 показано, как можно импортировать стиль из внешнего файла.
Пример 6. Импорт CSS
В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.
Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент (пример 7).
Пример 7. Импорт в файле style.css
Импорт обычно применяется в тех случаях, когда доступ есть только к стилевому файлу и нет возможности отредактировать HTML-документ.
Пока стили CSS не подключить к HTML странице, никакого эффекта от их использования не будет. Существует несколько способов, как это можно сделать.
Для тех, кто любит смотреть в формате видео.
Для тех, кто любит читать, инструкция ниже.
Для того, чтобы продемонстрировать, как работает каждый из этих способов, возьмем, для примера, html-файл со следующим содержимым.
Задача стилей CSS, которые будут подключаться, сделать элемент абзаца
красным цветом.
Во всех примерах, результат на веб-странице будет один и тот же. Вы увидите вот такой красный абзац текста.
1 вариант. Внутри открывающего тега с помощью атрибута style.
Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.
Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента
.
Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.
2 вариант. Внутри элемента style.
Еще один способ подключения стилей CSS, это воспользоваться элементом с атрибутом type="text/css". Указание этого атрибута обязательно.
Давайте посмотрим, как это выглядит на конкретном примере.
3 вариант. Подключение внешнего файла стилей.
И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.
Обратите внимание на атрибуты, которые указываются у этого элемента.
Они тоже являются обязательными. В атрибуте href указывается путь к css файлу, который нужно подключить.
Файл style.css содержит следующих код:
Эти 3 способа подключения стилей 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
В файле style.css как раз и описаны все параметры оформления таких тегов как , и
. Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Внешняя таблица стилей
Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.
Пример 1. Подключение внешних стилей
Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.
Содержимое файла style.css показано в примере 2.
Пример 2. Содержимое файла style.css
Как видно из данного примера, файл со стилем является обычным текстовым файлом и содержит только синтаксис CSS. В свою очередь и HTML-документ содержит только указатель на файл со стилем, таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование внешней таблицы стилей — наиболее универсальный и удобный метод добавления стиля на сайт. Это позволяет независимо редактировать файлы HTML и CSS.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом , в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление» , как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля» (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Встроенный стиль
Встроенный стиль является по существу расширением для одиночного элемента, используемого на текущей веб-странице. Для определения стиля элемента к нему добавляется атрибут style , а значением атрибута выступает набор стилевых правил (пример 4).
Пример 4. Использование атрибута style
В данном примере стиль элемента
меняется с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 2).
Рис. 2. Использование встроенного стиля для изменения вида текста
Встроенные стили не рекомендуется применять на сайте, поскольку это усложняет редактирование стилей и нарушает принцип разделения кода и оформления.
Все описанные методы добавления CSS могут быть задействованы как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет встроенный стиль, затем внутренняя таблица стилей и в последнюю очередь внешняя таблица стилей. В примере 5 применяется сразу два метода добавления стиля в документ.
Пример 5. Сочетание разных методов
В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка — зелёный цвет через элемент (рис. 3).
Рис. 3. Результат применения стилей
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Читайте также: