Что css

Что такое CSS

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

От предыдущего верстальщика осталось несколько фрагментов CSS-кода, которые он не успел применить к тегам. Мы доделаем его работу и сразу покажем боссу результат! Даже стилевой файл редактировать не придётся.

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

Эта запись означает, что стили, описанные внутри фигурных скобок, применятся к тегу с классом feature-furniture . В нашей разметке таких тегов нет, но мы можем добавить этот класс любому тегу и посмотреть, что с ним произойдёт. Например:

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

  • index.html Сплит-режим
  • style.css Сплит-режим

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

  1. Добавьте класс feature-furniture к первому тегу <p> раздела «Что поможет вам создать домашний уют?».
  2. Теперь класс feature-lighting ко второму.
  3. И класс feature-accessories к третьему.

Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.

Что такое CSS?

CSS (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

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

В модуле Основы HTML мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчёркнуты, чтобы отличить их от остального текста. То, что вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.

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

Для чего нужен CSS?

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

Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки: HTML — самый распространённый язык разметки, но вы также можете встретить другие языки разметки, такие как SVG или XML.

Представление документа пользователю означает преобразование его в форму, используемую вашей аудиторией. Browsers, такие как Firefox (en-US) , Chrome (en-US) или Edge (en-US) , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.

Примечание: Браузер иногда называют user agent, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.

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

Синтаксис CSS

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

«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».

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

Правило открывается с помощью селектора . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — (<h1> (en-US)).

Затем у нас есть набор фигурных скобок < >. Внутри них будет один или несколько объявлений, которые принимают форму пары свойства и его значения. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.

Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-свойства (en-US) имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство color , которое может принимать различные цветовые значения. У нас также есть свойство font-size . Это свойство может принимать различные значения размера, как и свойства.

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

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

Примечание: вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, вы должны привыкнуть к поиску "MDN css-feature-name" в вашем браузере, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

CSS-модули

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

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

Для конкретного примера давайте вернёмся к модулю Свойства фона и границ — вы можете подумать, что это логично для свойств background-color и border-color , которые будут определены в этом модуле. И Вы правы.

Технические характеристики CSS

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как W3C, WHATWG, ECMA или Khronos (en-US) ) и определяют, как эти технологии должны вести себя.

CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашённые эксперты, которые выступают как независимые голоса; они не связаны с членами организации.

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

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

Поддержка браузера

BCD tables only load in the browser

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

Ниже приведена диаграмма данных для CSS свойства font-family :

Что дальше?

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

Что CSS значит для e-commerce

Каскадные таблицы стилей (англ. Cascading Style Sheets или CSS) – это специальный язык, используемый для описания внешнего вида страниц, написанных языками разметки данных.

HTML – для структуры, CSS – для внешнего вида

Один из способов понять CSS – это сравнить его с HTML.

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

CSS в действии

Рассмотрим CSS на примере. Вот небольшое простое меню сайта в HTML-коде:

А это то, как выглядит это меню в интерфейсе сайта:

Простое меню веб-сайта с использованием только HTML5.

Теперь применим немного простого CSS к этому меню:

Вот как оно теперь выглядит:

Применение CSS к меню в HTML5 изменяет его внешний вид.

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

Раньше правила дизайна применялись к каждому отдельному элементу HTML-документа. То есть, чтобы изменить дизайн навигационного меню из нашего примера, требовалось добавлять правила для каждой его отдельной ссылки в HTML. Для нескольких ссылок это сделать не так уж сложно. Но для сотен элементов на странице или тысячи страниц на сайте это кажется невозможным.

Вот, например, как выглядит применение одного правила для каждого HTML-элемента:

Как видите, это уже намного больше текста. Кроме того, довольно сложно найти в тексте нужные слова – Home, New Products, All Products, Cart – обозначающие названия нужных нам ссылок. Все это сильно усложняло веб-дизайн и делало его намного более предрасположенным к ошибкам. Одна опечатка могла сделать внешний вид страницы совершенно отличным от остальных, чего можно было не замечать месяцами.

Применение ко всему сайту и к его конкретным страницам и элементам

CSS существенно все это упрощает. Используя CSS, правила стиля можно применить сразу ко всему сайту или к определенному количеству страниц.

CSS делает это возможным благодаря применению правил дизайна к HTML-элементам с помощью так называемых селекторов. Селекторы – это способ указать на часть HTML-документа, к которому нужно применить указанное правило стиля. В примере выше выбраны ссылки (элемент “а”) внутри навигации (элемент “nav”) для скомбинированного правила (“nav a”). Таким образом можно применить правило стиля только к выбранным ссылкам, оставив остальные как есть. В нашем примере использован также и еще один селектор – “nav a:hover” – для изменения цвета кнопок навигации при наведении курсора мыши.

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

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

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

Сложности CSS

При использовании CSS у вас может возникнуть две существенные проблемы. Обе связаны с тем, как организованы селекторы.

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

Во-вторых, часто бывает так, что вместо того, чтобы влиять только на конкретный элемент или группу элементов, правила стиля CSS могут “расплываться”, непреднамеренно затрагивая другие элементы сайта. Эта проблема усугубляется еще и тем, что вы о ней можете не догадываться, пока случайно не заметите. Когда это начинает происходить, каждое изменение дизайна становится рискованным. Ведь проверка на наличие таких “нечаянных” изменений может занять огромное количество времени.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *