CSS-файл, что это такое

Обновлено: 21.11.2024

Каскадные таблицы стилей (CSS) — это язык таблиц стилей, используемый для описания представления документа, написанного на HTML или XML (включая диалекты XML, такие как SVG, MathML или XHTML). CSS описывает, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.

CSS является одним из основных языков открытого Интернета и стандартизирован для веб-браузеров в соответствии со спецификациями W3C. Ранее разработка различных частей спецификации CSS выполнялась синхронно, что позволяло использовать версии последних рекомендаций. Возможно, вы слышали о CSS1, CSS2.1, CSS3. Однако CSS4 так и не стал официальной версией.

По сравнению с CSS3 объем спецификации значительно увеличился, а прогресс в различных модулях CSS стал настолько различаться, что стало более эффективно разрабатывать и выпускать рекомендации отдельно для каждого модуля. Вместо проверки версий спецификации CSS W3C теперь периодически делает снимок последней стабильной версии спецификации CSS.

Основные ресурсы

Если вы новичок в веб-разработке, обязательно прочитайте нашу статью по основам CSS, чтобы узнать, что такое CSS и как его использовать.

Наша область обучения CSS содержит множество учебных пособий, которые помогут вам перейти от начального уровня к профессиональному, охватывая все основы.

Наш исчерпывающий справочник по CSS для опытных веб-разработчиков описывает все свойства и концепции CSS.

Хотите стать фронтенд-разработчиком?

Мы составили курс, который включает в себя всю необходимую информацию, необходимую для достижения вашей цели.

Учебники

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

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

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

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

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

К этому моменту мы уже рассмотрели основы CSS, как стилизовать текст, а также как стилизовать и манипулировать блоками, внутри которых находится ваш контент. Теперь пришло время посмотреть, как правильно разместить блоки по отношению к области просмотра и друг к другу. Мы рассмотрели необходимые предварительные условия, поэтому теперь мы можем углубиться в макет CSS, изучая различные настройки отображения, современные инструменты макета, такие как flexbox, сетка CSS и позиционирование, а также некоторые из устаревших методов, о которых вы, возможно, захотите узнать.

Этот модуль содержит ссылки на разделы контента, объясняющие, как использовать CSS для решения распространенных проблем при создании веб-страницы.

Ссылка

Ключевые понятия CSS:

Синтаксис и формы языка , наследование, каскадная и функциональная нотации и свертывание полей
Содержащий блок и контексты форматирования блока, вычисляемые, используемые и фактические значения

Поваренная книга

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

У вас возникли проблемы с открытием файла CSS или вам просто интересно, что в нем содержится? Мы объясним, для чего используются эти файлы, и покажем вам программное обеспечение, которое, как мы знаем, может открывать или иным образом обрабатывать ваши файлы.

Что такое файл CSS?

CSS — это аббревиатура от Cascading Style Sheet. Файлы, содержащие расширение .css используются для форматирования содержимого связанной веб-страницы. Хотя формат файлов CSS чаще всего ассоциируется со страницами веб-сайтов, написанными на языках программирования HTML и XHTML, этот формат также можно применять к XML-документам любого типа.

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

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

Как открыть файлы CSS

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

Хотя мы сами еще не проверяли приложения, наши пользователи предложили 10 различных открывателей CSS, которые вы найдете в списке ниже.

Последнее обновление: 9 марта 2022 г.

Предложить другой формат файла, используя расширение CSS

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

Различные приложения, использующие файлы с этим расширением

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

	Adobe Dreamweaver	Отправлено пользователем
	Microsoft Expression Web	Отправлено пользователем
	Macromedia Dreamweaver MX	Отправлено пользователем
	Microsoft Office	Отправлено пользователем
	Microsoft Development Environment	Отправлено пользователем

< /tr>

Не уверены, какой тип файла вы пытаетесь открыть? Попробуйте наш новый анализатор файлов. Это бесплатный инструмент, который может идентифицировать более 11 000 различных типов файлов — скорее всего, и ваши! Это поможет вам найти программное обеспечение, которое может обрабатывать файлы определенного типа. Загрузите анализатор файлов здесь.

Теперь, когда вы начинаете понимать назначение и использование CSS, давайте рассмотрим структуру CSS.

	Расширения веб-платформы Microsoft	Отправлено пользователем
	Накануне Полумесяца	Отправлено пользователем
	UltraEdit	Отправлено пользователем
	Aptana Studio< /td>	Отправлено пользователем
	Macromedia Dreamweaver	Отправлено пользователем

< /tr>

Требования:	Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания работы с файлами, основы HTML (изучение Introduction to HTML), и представление о том, как работает CSS.
Цель:	Подробно изучить основные синтаксические структуры CSS.

Применение CSS к HTML

Сначала рассмотрим три метода применения CSS к документу: с помощью внешней таблицы стилей, с помощью внутренней таблицы стилей и с помощью встроенных стилей.

Внешняя таблица стилей

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

Файл таблицы стилей CSS может выглядеть следующим образом:

Внутренняя таблица стилей

Внутренняя таблица стилей находится внутри HTML-документа. Чтобы создать внутреннюю таблицу стилей, вы помещаете CSS внутрь элемента, содержащегося внутри HTML.

HTML для внутренней таблицы стилей может выглядеть следующим образом:

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

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

Встроенные стили

Встроенные стили — это объявления CSS, влияющие на один элемент HTML, содержащийся в атрибуте стиля.Реализация встроенного стиля в документе HTML может выглядеть следующим образом:

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

Есть несколько обстоятельств, при которых встроенные стили используются чаще. Возможно, вам придется прибегнуть к использованию встроенных стилей, если ваша рабочая среда очень ограничена. Например, возможно, ваша CMS позволяет редактировать только тело HTML. Вы также можете увидеть множество встроенных стилей в электронной почте в формате HTML, чтобы обеспечить совместимость с максимально возможным количеством почтовых клиентов.

Игра с CSS в этой статье

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

index.html:

стили.css:

Когда вы найдете CSS, с которым хотите поэкспериментировать, замените HTML-содержимое на какой-нибудь HTML для стиля, а затем добавьте тестовый код CSS в файл CSS.

В качестве альтернативы вы также можете использовать приведенный ниже интерактивный редактор.

Читайте и получайте удовольствие!

Селекторы

Селектор ориентируется на HTML, чтобы применить стили к содержимому. Мы уже познакомились с множеством селекторов в учебнике «Начало работы с CSS». Если CSS не применяется к содержимому должным образом, ваш селектор может не совпадать с тем, что, по вашему мнению, он должен совпадать.

Каждое правило CSS начинается с селектора или списка селекторов, чтобы сообщить браузеру, к какому элементу или элементам должны применяться правила. Все приведенные ниже примеры являются допустимыми селекторами или списками селекторов.

Попробуйте создать несколько правил CSS, использующих указанные выше селекторы. Добавьте HTML для стилизации селекторами. Если какой-либо из приведенных выше синтаксисов вам не знаком, попробуйте поискать в MDN.

Примечание. Вы узнаете больше о селекторах в следующем модуле: Селекторы CSS.

Конкретность

Вы можете столкнуться со сценариями, когда два селектора выбирают один и тот же элемент HTML. Рассмотрим приведенную ниже таблицу стилей с селектором p, который устанавливает синий цвет текста абзаца. Однако существует также класс, который устанавливает красный цвет текста выбранных элементов.

Предположим, что в нашем HTML-документе есть абзац со специальным классом . Оба правила применяются. Какой селектор превалирует? Вы ожидаете увидеть синий или красный текст абзаца?

В языке CSS есть правила, определяющие, какой селектор сильнее в случае конфликта. Эти правила называются каскадом и специфичностью. В блоке кода ниже мы определяем два правила для селектора p, но текст абзаца будет синим. Это связано с тем, что объявление, которое устанавливает синий цвет текста абзаца, появляется позже в таблице стилей. Более поздние стили заменяют конфликтующие стили, появившиеся ранее в таблице стилей. Это каскадное правило.

Однако в нашем предыдущем примере с конфликтом между селектором класса и селектором элемента превалирует класс, и текст абзаца становится красным. Как это может произойти, даже если конфликтующий стиль появляется позже в таблице стилей? Класс оценивается как более конкретный, поскольку он имеет большую специфичность, чем селектор элемента, поэтому он отменяет другое объявление конфликтующего стиля.

Проведите этот эксперимент сами! Добавьте HTML, затем добавьте два p < . > правила для вашей таблицы стилей. Затем измените первый селектор p на .special, чтобы посмотреть, как изменится стиль.

Поначалу правила специфичности и каскада могут показаться сложными. Эти правила легче понять, когда вы лучше познакомитесь с CSS. В разделе Каскад и наследование в следующем модуле это подробно объясняется, в том числе как рассчитать специфичность.

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

Свойства и значения

На самом базовом уровне CSS состоит из двух компонентов:

Свойства: это удобочитаемые идентификаторы, которые указывают, какие стилистические особенности вы хотите изменить. Например, размер шрифта, ширина, цвет фона.
Значения. Каждому свойству присваивается значение. Это значение указывает, как стилизовать свойство.

В приведенном ниже примере выделено одно свойство и значение. Имя свойства — цвет, а значение — синий .

Когда свойство связано со значением, это соединение называется объявлением CSS. Объявления CSS находятся в блоках объявлений CSS. В приведенном ниже примере выделение определяет блок объявления CSS.

Наконец, блоки объявлений CSS объединяются с селекторами для создания наборов правил CSS (или правил CSS). Пример ниже содержит два правила: одно для селектора h1 и одно для селектора p. Цветное выделение указывает на правило h1.

Установка определенных значений для свойств CSS — это основной способ определения макета и стиля документа. Механизм CSS вычисляет, какие объявления применяются к каждому отдельному элементу страницы.

Свойства и значения CSS нечувствительны к регистру. Свойство и значение в паре свойство-значение разделяются двоеточием ( : ).

Поищите различные значения свойств, перечисленных ниже. Напишите правила CSS, применяющие стили к различным элементам HTML:

Предупреждение. Если свойство неизвестно или значение для данного свойства недопустимо, объявление обрабатывается как недействительное. Он полностью игнорируется механизмом CSS браузера.

Предупреждение. В CSS (и других веб-стандартах) было принято решение о том, что американское правописание является стандартом при языковых различиях или неопределенности. Например, цвет должен быть написан как цвет , так как цвет работать не будет.

Функции

Хотя большинство значений представляют собой относительно простые ключевые слова или числовые значения, некоторые значения принимают форму функции.

Функция calc()

Примером может служить функция calc(), которая может выполнять простые математические операции в CSS:

Это выглядит так:

Функция состоит из имени функции и круглых скобок, в которых заключены значения функции. В случае с приведенным выше примером calc() значения определяют ширину этого поля как 90% от ширины содержащего блока минус 30 пикселей. Результат вычисления нельзя вычислить заранее и ввести как статическое значение.

Функции преобразования

Другим примером могут быть различные значения для transform , такие как rotate() .

Вывод приведенного выше кода выглядит следующим образом:

трансформировать
background-image , в частности значения градиента
цвет , в частности значения rgb/rgba/hsl/hsla

@правила

CSS @rules (произносится как «at-rules») содержит инструкции о том, что должен делать CSS или как он должен себя вести. Некоторые @rules просты и содержат только ключевое слово и значение. Например, @import импортирует таблицу стилей в другую таблицу стилей CSS:

Одним из распространенных @rule, с которым вы, вероятно, столкнетесь, является @media , которое используется для создания медиа-запросов. Медиа-запросы используют условную логику для применения стилей CSS.

В приведенном ниже примере таблица стилей определяет для элемента розовый фон по умолчанию. Однако следует медиа-запрос, определяющий синий фон, если область просмотра браузера шире 30 em.

В этих руководствах вы столкнетесь с другими @rules.

Посмотрите, сможете ли вы добавить медиа-запрос, который изменяет стили в зависимости от ширины области просмотра. Измените ширину окна браузера, чтобы увидеть результат.

Сокращения

Некоторые свойства, такие как font , background , padding , border и margin, называются сокращенными свойствами. Это связано с тем, что сокращенные свойства задают несколько значений в одной строке.

Например, вот эта строка кода:

эквивалентен этим четырем строкам кода:

соответствует этим пяти строкам:

Позже в курсе вы встретите много других примеров сокращенных свойств. Справочник MDN по CSS — это хороший ресурс для получения дополнительной информации о любом сокращенном свойстве.

Попробуйте использовать объявления (выше) в своем собственном упражнении с CSS, чтобы лучше понять, как это работает. Вы также можете поэкспериментировать с другими значениями.

Предупреждение. Один из менее очевидных аспектов использования сокращений CSS — способ сброса пропущенных значений. Значение, не указанное в сокращении CSS, возвращается к исходному значению. Это означает, что упущение в сокращении CSS может переопределить ранее установленные значения.

Как и при любой работе с программированием, рекомендуется писать комментарии вместе с CSS. Это поможет вам вспомнить, как работает код, когда вы вернетесь позже за исправлениями или улучшениями. Это также помогает другим понять код.

Комментарии CSS начинаются с /* и заканчиваются */.В приведенном ниже примере комментарии отмечают начало отдельных разделов кода. Это помогает ориентироваться в кодовой базе по мере ее увеличения. При наличии такого рода комментариев поиск комментариев в редакторе кода становится способом эффективного поиска раздела кода.

Комментирование кода также полезно для временного отключения разделов кода для тестирования. В приведенном ниже примере правила для .special отключаются путем «закомментирования» кода.

Добавьте комментарии к вашему CSS.

Пробел

Пробелы означают фактические пробелы, вкладки и новые строки. Так же, как браузеры игнорируют пробелы в HTML, браузеры игнорируют пробелы внутри CSS. Ценность пробелов заключается в том, как они могут улучшить читаемость.

В приведенном ниже примере каждое объявление (и начало/конец правила) имеет свою собственную строку. Возможно, это хороший способ написания CSS. Это упрощает поддержку и понимание CSS.

В следующем примере показан эквивалентный CSS в более сжатом формате. Хотя два примера работают одинаково, приведенный ниже труднее читать.

Для ваших собственных проектов вы будете форматировать код в соответствии с личными предпочтениями. Для командных проектов вы можете обнаружить, что у команды или проекта есть собственное руководство по стилю.

Предупреждение. Хотя значения в объявлениях CSS разделяются пробелами, в именах свойств пробелов никогда не бывает.

Например, следующие объявления являются допустимыми для CSS:

Но эти объявления недействительны:

Вы видите ошибки с интервалами? Во-первых, 0auto не распознается как допустимое значение свойства margin. Запись 0auto предназначена для двух отдельных значений: 0 и auto. Во-вторых, браузер не распознает padding- как допустимое свойство. Правильное имя свойства ( padding-left ) разделено ошибочным пробелом.

Вы всегда должны отделять разные значения друг от друга хотя бы одним пробелом. Храните имена свойств и значения свойств вместе как единые неразрывные строки.

Чтобы узнать, как интервалы могут нарушить работу CSS, попробуйте поиграть с интервалами в тестовом CSS.

Что дальше?

Полезно понимать, как браузер использует HTML и CSS для отображения веб-страницы. В следующей статье «Как работает CSS» объясняется этот процесс.

Помните HTML (язык гипертекстовой разметки)? Язык кодирования, который служит основой для всей веб-разработки? Что ж, если HTML — это первый язык, который вы захотите выучить, когда будете интересоваться созданием веб-сайтов, его двоюродный брат CSS — второй.

Что такое CSS? И как это связано с HMTL?

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

Как работает CSS?

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

Если вы хотите, чтобы этот абзац выглядел розовым и жирным для людей, просматривающих вашу веб-страницу в веб-браузере, вы должны использовать код CSS, который выглядит следующим образом:

В этом случае "p" (абзац) называется "селектором" — это часть кода CSS, указывающая, на какой элемент HTML будет воздействовать стиль CSS. В CSS селектор записывается слева от первой фигурной скобки. Информация между фигурными скобками называется объявлением и содержит свойства и значения, применяемые к селектору. Свойства — это такие вещи, как размер шрифта, цвет и поля, а значения — это настройки этих свойств. В приведенном выше примере «цвет» и «начертание шрифта» являются свойствами, а «розовый» и «жирный» — значениями. Полный набор скобок

— это объявление, и снова «p» (что означает абзац HTML) — это селектор. Эти же основные принципы можно применять для изменения размера шрифта, цвета фона, отступов полей и многого другого. Например. . .

<р>. . .сделает фон вашей страницы светло-голубым или. . .

<р>. . .будет создан абзац шрифтом 20 пунктов с красными буквами.

Внешний, внутренний или встроенный CSS?

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

Это свяжет файл .html с вашей внешней таблицей стилей (в данном случае mysitestyle.css), и все инструкции CSS в этом файле будут применены к вашим связанным страницам .html.

Внутренние таблицы стилей — это инструкции CSS, записанные непосредственно в заголовок конкретной страницы .html. (Это особенно полезно, если у вас есть единственная страница сайта с уникальным внешним видом.) Внутренняя таблица стилей выглядит примерно так. . .

<р>. . . цвет фона чертополоха и абзацы с 20-точечным средне-синим шрифтом теперь будут применяться к этой единственной странице .html.

И наконец, встроенные стили — это фрагменты CSS, записанные непосредственно в HTML-код и применимые только к одному экземпляру кода. Например:

приводит к тому, что один конкретный заголовок на одной странице .html отображается фиолетовым шрифтом размером 40 пунктов.

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

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

Читайте также: