Css предназначены для: Что такое CSS? — Изучение веб-разработки

Что такое CSS? — Изучение веб-разработки

• Обзор: First steps
• Далее

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

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

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

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

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

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

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

Представление документа пользователю означает преобразование его в форму, используемую вашей аудиторией

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

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

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

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

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

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

h2 {
    color: red;
    font-size: 5em;
}

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

<h2> (en-US)).

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

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

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

h2 {
    color: red;
    font-size: 5em;
}
p {
    color: black;
}

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

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

Поскольку существует множество вещей, которые можно стилизовать с помощью 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

with JavaScript enabled. Enable JavaScript to view data.

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

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

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

• Обзор: First steps
• Далее

1. Что такое CSS?
2. Начало работы с CSS
3. Как структурирован CSS
4. Как работает CSS
5. Использование ваших новых знаний

Last modified: 29 сент. 2022 г., by MDN contributors

CSS | Введение в веб-разработку

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

HTML отвечает за то, ЧТО будет выведено на экран. А вот за то, КАК оно будет выглядеть, и где будут располагаться разные части страницы, отвечает CSS.

Проще говоря, HTML — это структура и содержание, а CSS — внешний вид.

CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML.

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

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

Допустим, вы хотите изменить внешний вид всех абзацев (элементов <p>...</p>). С помощью CSS-кода ниже мы сделаем так, что у всех элементов p будет синий фон, отступ со всех сторон по 10 пикселей и шрифт Arial:

<head>
...
  <style>
  p {
    background-color: blue; /* Фон */
    margin: 10px; /* Отступы от границ блока с абзацем */
    font-family: Arial; /* Шрифт */
  }
  </style>
. ..
</head>
<body>
  <p>Это абзац с голубым фоном, отступами и шрифтом Arial</p>
  <p>Это еще один абзац с голубым фоном, отступами и шрифтом Arial</p>
</body>

Элемент <style>...</style> вставляется в HTML страницу внутрь элемента head (то есть между тегами <head> и </head>).

Но что, если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).

<head>
...
  <style>
  .strange {
    background-color: blue; /* Фон */
    margin: 10px; /* Отступы от границ блока с абзацем */
    font-family: Arial; /* Шрифт */
  }
  </style>
...
</head>
<body>
  <p>Это абзац с голубым фоном, отступами и шрифтом Arial</p>
  <p>Это абзац без стилей</p>
</body>

Атрибут class есть у каждого тега, а значит, можно изменить внешний вид и расположение всего, что представлено на странице (иногда с ограничениями).

Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи. Другой пример — логотип сайта где-нибудь наверху. Для уникальных «разовых» элементов стоит использовать id:

<head>
...
  <style>
  #important {
    color: red; /* красный цвет шрифта */
  }
  </style>
...
</head>
<body>
  <p>Это абзац с красным текстом</p>
</body>

В CSS id указываются через решетку #, а классы — через точку .. А в HTML они пишутся прямо словами: например, <p> или <p>.

В наших примерах CSS p, .strange и #important называются селекторами. Ими мы выбираем то, к чему применять стиль.

В CSS существует несколько видов селекторов, но для начала достаточно знать о трёх:

• div – элементы конкретного типа, в данном примере div (тег <div>. ..</div>)
• #id – элемент с данным id
• .class – элементы с таким классом

Попробуйте создать файл index.html со следующим содержанием и открыть его в браузере:

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
           color: red;
         }
         .note {
           color: grey;
           background-color: yellow;
           font-weight: bold;
         }
      </style>
   </head>
   <body>
     <p>Абзац со стилем, указанным прямо в теге!</p>
     <div>Абзац класса "note"</div>
   </body>
</html>

С помощью CSS можно менять сотни разных свойств. Поэкспериментируйте со своей страницей и стилями.

Каждый браузер содержит определенный набор стилей «по умолчанию». Этот набор применяется всегда и формирует базовое представление элементов. С одной стороны, это избавляет от необходимости писать стили тогда, когда устраивает умолчание, но с другой — появляются серьезные проблемы.

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

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

Файл стилей

В реальных приложениях стили описывают не внутри HTML-страниц, а в отдельных файлах, например style.css, и с помощью специального тега подключают на страницу:

<link rel="stylesheet" href="style.css">

Эта строчка должна также находиться внутри элемента head (то есть между тегами <head> и </head>).

Layouting

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

Bootstrap

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

Дальнейшее их развитие привело к созданию таких монстров как Bootstrap. Bootstrap — это больше, чем просто CSS-фреймворк. Кроме модульной сетки, Bootstrap поставляется с большим количеством компонентов, благодаря которым можно собрать сайт практически любой сложности. Ко всему этому стоит добавить то, что он автоматически хорошо работает и для разных размеров экранов, и для мобильных устройств. А благодаря огромному комьюнити, он развивается огромными темпами.

Хекслет целиком и полностью построен на Bootstrap’e. Такой подход позволяет нам не отвлекаться на непрофильную деятельность и ускорить разработку проекта в разы.

Подробнее об основных концепциях и элементах Bootstrap можно узнать из нашего гайда.

Полезные ссылки

• Bootstrap
• Что такое Bootstrap / Hexlet Guides

Developer Tools

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

В нашем курсе Основы современной вёрстки есть урок, посвященный Chrome Developer Tools.

Заключение

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

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

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Что такое CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) — это язык, который описывает, как HTML-документы отображаются на экране пользователя. Первым коммерческим браузером, который читал и использовал CSS, стал Internet Explorer 3 в 1996 году. CSS применяют разработчики, чтобы настроить индивидуальный стиль страницы.

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

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

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

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

Чтобы подключить CSS к HTML, используют три способа:

• CSS-код вносят в тег элемента с помощью атрибута style. Он применяется к любым тегам.
• Стили веб-документа прописывают внутри контейнера head. Он предназначен для хранения элементов страницы. Например, атрибутов base и title, которые отвечают за задание характеристик текста по умолчанию (цвет, шрифт) и заголовок документа. Интеграция CSS также происходит с помощью атрибута style. При таком подключении CSS будет выполнять изменения только на этой странице.
• CSS-код сохраняется в отдельном текстовом файле с расширением .css. Он подключается к HTML с помощью тега link и свойства href, чтобы установить расположение файла. Это самый распространенный способ. Если файл подключен к нескольким страницам сайта, то вносить в них правки можно одновременно.

Основные принципы работы CSS

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

• Селекторы — метки, которые обозначают, какую часть HTML-кода изменяют.
• Блоки объявлений — свойства, которые определяют, как будет выглядеть элемент на экране.

К селекторам можно применять неограниченное число блоков объявлений. Например, абзац в CSS обозначается тегом p. Чтобы задать абзацу серый фон, используем свойство background и его значение #ccc (отвечает за этот цвет). Здесь тег абзаца будет селектором, а свойство и его значение — блоком объявлений.

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

Типы селекторов

В CSS — несколько десятков типов селекторов.

Селектор тега меняет все элементы указанного типа на каждой странице сайта. Его используют, например, для оформления заголовков.

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

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

Селекторы-идентификаторы (ID) позволяют менять параметры одного указанного элемента. Идентификатор (ID) — это название элемента сайта, которое не должно повторяться на странице. Например, его можно присвоить тегу footer, который отвечает за «подвал» сайта.

Правила каскадирования и наследования

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

Единого правила наследования не существует. Его применяют, опираясь на логику построения сайта. Например, на сайте вряд ли нужно выделять все элементы рамками. За это отвечает свойство border, поэтому оно не наследуется.

Если нужно применить свойство, которое не наследуется автоматически, его можно прописать с помощью команды inherit для отдельного элемента. Посмотреть, какие свойства обычно наследуют, а какие — нет, можно на сайте Консорциума Всемирной паутины (W3).

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

Важность селекторов ранжируется так:

• Встроенный стиль — CSS подключен с помощью элемента style;
• Селектор идентификаторов;
• Селектор классов;
• Селектор обычного элемента (селектор тега).

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

Что такое CSS? Как изучить CSS для начинающих

CSS — один из краеугольных камней Интернета. Если HTML — это кости веб-сайта, CSS — это то, что делает сайт лучше, чем скелет. Без CSS веб-страницы были бы унылыми и скучными.

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

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

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

Содержание

• Что такое CSS?
• Для чего используется CSS?
• Как работает CSS?
• Как выглядит CSS?
• Возможности CSS3
• Как изучить CSS
• После CSS: следующие шаги

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

Что такое CSS?

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

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

Как и HTML, CSS не является типичным «языком программирования» (например, JavaScript, Java, Python). Он не требует знания циклов, переменных и других концепций информатики.

🎨 Вместо этого, как следует из названия, CSS — это язык «таблиц стилей», который добавляет стиль к содержимому веб-страницы. Он превращает простой HTML (который обычно выглядит как простой документ Microsoft Word) в красивые и уникально настроенные веб-сайты. По этой причине важность CSS в веб-дизайне трудно переоценить!

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

☝️ Вернуться к содержанию

Начни программировать прямо сейчас

Хватит ждать и начни учиться! Получите мои 10 советов, как научиться программировать.

Не волнуйтесь. Я никогда не буду спамить вас! Работает на ConvertKit

Для чего используется CSS?

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

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

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

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

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

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

➡️ Наличие доступного веб-сайта важно по многим причинам. Узнайте больше о веб-доступности здесь или послушайте мой подкаст-интервью с Джудит Лунг: Почему доступность имеет значение (согласно абсолютно слепому программисту) (S6E3).

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

Как я упоминал ранее, CSS означает каскадные таблицы стилей. Вам может быть интересно, что это за «каскадный» бизнес.

Codecademy объясняет это элегантно:👇

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

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

Из-за каскадного порядка объявление красного стиля преобладает над синим, и этот абзац будет красным.

Каскадный порядок

Вообще говоря, все стили будут «каскадироваться» в новую «виртуальную» таблицу стилей по следующим правилам, где номер четыре имеет наивысший приоритет:

1. Браузер по умолчанию
2. Внешняя таблица стилей
3. Внутренняя таблица стилей (в разделе заголовка)
4. Встроенный стиль (внутри HTML-элемента)

вставьте CSS .

Новичкам это может показаться запутанным. Не волнуйся. Это похоже на порядок действий в математике.

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

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

☝️ Вернуться к содержанию

Как выглядит CSS?

CSS состоит из селекторов , свойств , и значений .

Давайте рассмотрим это на примере. Если бы у вас был абзац HTML, который выглядел бы так:

Привет, мир!

, вы можете оформить этот абзац с помощью CSS.

Это может выглядеть так:

р {

  семейство шрифтов: verdana;

  размер шрифта: 20 пикселей;

  цвет: синий

}

Как вы могли догадаться, это изменит семейство шрифтов на Verdana, размер шрифта на 20 пикселей и синий цвет шрифта.

В этом случае буква «p» в CSS называется « selector », потому что он выбирает, к какому элементу HTML добавить стиль.

Вся информация в фигурных скобках называется « объявление », потому что вы «объявляете», каким будет стиль. Объявления включают « свойств » и « значений », которые изменяют внешний вид селектора.

Точно так же, если у вас есть HTML-заголовок

Пример CSS

, его стиль с помощью CSS будет выглядеть так:

ч2 {

  цвет: белый;

  text-align: center;

}

Это изменит цвет шрифта на белый и выровняет его по центру страницы.

Примечание: Вы также можете разместить свой CSS в одной строке, например: p {font-family: verdana; размер шрифта: 20px; цвет: синий}

Ниже приведен пример, показывающий, как выглядит CSS 👇

свойства CSS включают:

• background-color
• font-weight
• margin
• padding
• width
• border-style
• opacity
• И многое другое!

Вот полный список свойств CSS.

Хотите улучшить работу с HTML?

Загрузите мою бесплатную шпаргалку HTML5 ниже.

Не волнуйтесь. Я никогда не буду спамить вас! Работает на ConvertKit

☝️ Вернуться к содержанию

Особенности CSS3

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

CSS-фреймворки

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

Двумя самыми популярными CSS-фреймворками являются Bootstrap и Foundation. Я никогда не работал с Foundation, но слышал, что он чем-то похож на Bootstrap. И я очень люблю Bootstrap. Серьезно — я использую Bootstrap во всем, что я создаю, от сайтов WordPress до статических сайтов, а теперь, совсем недавно, и веб-приложений!

Анимации CSS

С CSS3 появилась анимация. В прошлом, чтобы анимировать что-то маленькое на вашем сайте, вам приходилось полагаться на JavaScript. Теперь с помощью CSS3 добавить небольшой анимационный эффект очень просто.

Вот некоторые популярные эффекты анимации CSS (и способы их использования), на которые стоит обратить внимание, как только вы освоите основы CSS.

Медиа-запросы

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

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

Как изучить CSS

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

🤔 Кому стоит изучать CSS?

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

Черт возьми, если вы графический дизайнер или UX-дизайнер (или стремитесь им стать), наличие навыков CSS является огромным преимуществом, когда дело доходит до рынка труда.

🧠 Сложно ли изучать CSS?

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

⏰ Сколько времени нужно, чтобы изучить CSS?

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

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

В курсе edX «Основы CSS» вы можете изучить основы CSS за 5 недель (тратя всего 5-7 часов в неделю).

Путь обучения LinkedIn Learn CSS включает 27 часов контента. Если вы тратите на это 5-7 часов каждую неделю, это займет у вас 3-5 недель.

❓ Когда изучать CSS

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

💻 Где изучать CSS

Вот пять моих любимых мест для изучения CSS:

1. Изучите CSS на Codecademy . В этом курсе CSS вы изучите все основы CSS: как настроить правильную структуру файлов, редактировать текст и цвета и создавать привлекательные макеты.
2. Введение в CSS3 на Coursera : Этот курс CSS, разработанный Мичиганским университетом, предназначен для того, чтобы научить вас правилам CSS, тестированию кода и формированию хороших навыков программирования.
3. Team Treehouse: Имеет более 36 видеороликов и мастер-классов по CSS. И они постоянно добавляют новые курсы.
4. CSS-трюки: Текущие и актуальные CSS-трюки. Также есть обширный альманах CSS, который отлично подходит в качестве справочника. Один из любимых.
5. Сеть разработчиков Mozilla: Отличный бесплатный и обновленный справочник по CSS.

Также зайдите на эти бесплатные сайты, где можно бесплатно изучить CSS (и другие языки)!

☝️ Вернуться к содержанию

После CSS: следующие шаги

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

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

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

Объяснение CSS с точки зрения непрофессионала

Объяснение CSS

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

Что такое CSS?

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

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

или элемент шрифта . Эти элементы немного отформатировали текст для лучшего макета.

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

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

Зачем использовать CSS?

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

Есть три основных преимущества использования CSS.

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

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

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

Следующий код представляет собой очень простой стандартный файл HTML.

Этот файл содержит мой первый код HTML.

Предположим, что в старых стилях HTML вы хотите центрировать текст. HTML предоставил вам тег с именем center или

. Приведенный выше HTML изменится на:

Этот файл содержит мой первый код HTML.

В результате использования тега center текст «Этот файл содержит мой первый HTML-код» будет центрирован в браузере пользователя. Предположим, у вас есть несколько таких тегов

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

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

p {
выравнивание текста: по центру;
}

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

Хотите узнать больше? Почему бы не пройти онлайн-курс CSS?

Каждый класс CSS или блок кода заключен в квадратные скобки. Если у вас есть опыт работы с C, C++, Java или C#, вы узнаете скобки и поймете их важность. Все определения вашего класса должны быть заключены в эти скобки. В этом примере определение класса представляет собой только одну строку кода. Все строки кода CSS в квадратных скобках определения класса должны заканчиваться точкой с запятой. В этом примере определение класса — «text-align: center;» Требуется некоторое время, чтобы понять и запомнить коды стилей CSS, но эта конкретная строка кода указывает браузеру центрировать текст.

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

Чтобы изменить выравнивание абзаца, измените стиль CSS на следующий:

p {
выравнивание текста: по левому краю;
}

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

р {
выравнивание текста: вправо;
}

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

Теперь давайте возьмем HTML, который мы написали ранее. Вместо использования тега

давайте воспользуемся нашим новым файлом CSS. Обратите внимание на изменения в следующем HTML-коде.

< /голова>

Этот файл содержит мой первый код HTML.

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

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

Синтаксис CSS

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

Синтаксис CSS: объявления, свойства и значения

Если у вас нет опыта программирования в веб-дизайне, CSS может показаться вам немного неудобным при первом запуске. Синтаксис CSS отличается от HTML и любого внутреннего кода, такого как SQL, C# или PHP. Другими словами, изучение CSS отличается от изучения других языков. Единственная связь с другими языками заключается в том, что CSS работает с классами. Если вы помните из главы 1, вы создали стиль класса для абзаца или тега

. Следующий CSS взят из урока 1.

р {
выравнивание текста: по центру;
}

Если вы помните, этот класс выравнивает содержимое по центру тега

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

р {
выравнивание текста: по центру;

    цвет: черный;
}

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

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

Селектор CSS

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

В арсенале CSS есть несколько селекторов. В приведенном выше примере CSS селектор — это часть «p» определения стиля класса. Этот конкретный селектор выбирает все элементы

на странице HTML независимо от имен элементов, классов или любого другого свойства HTML.

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

 Этот файл содержит мой первый HTML-код.

В приведенном выше коде тегу абзаца присваивается идентификатор «myparagraph». Вы можете указать своему классу CSS применять только к определенному тегу с заданным идентификатором. В следующем коде показан класс CSS с селектором идентификатора.

#myparagraph {
выравнивание текста: по центру;

    цвет: черный;

}

Обратите внимание, что селектор сначала имеет символ решетки, а затем имя идентификатора. Приведенный выше код больше не применяется ко всем тегам

. Вместо этого этот класс будет воздействовать только на HTML-тег с заданным идентификатором, которым в данном примере является «myparagraph».

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

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

.yellowbackground { 
цвет фона: желтый;
}

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

После создания класса вы можете применить его к тегам HTML. Следующий код использует вышеуказанный класс yellowbackground в теге div.

 Это содержимое имеет желтый фон.

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

 Это содержимое имеет желтый фон.

Пока свойство класса HTML определено, класс CSS будет действовать.

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

использовал только ваш класс yellowbackground. Вы можете добавить к классу yellowbackground префикс класса

. В следующем коде показано, как ограничить классы определенными элементами HTML, в данном примере это тег

.

p.yellowbackground { 
цвет фона: желтый;
}

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

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

ввод: проверен {
вес шрифта: полужирный;
}

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

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

a[title~=Желтые цветы] { 
цвет фона: желтый;
}

Ваш HTML-тег ссылки будет выглядеть следующим образом.

 Нажмите здесь, чтобы просмотреть желтые цветы.

Этот селектор можно использовать с любым атрибутом HTML и соответствующим значением для изменения макета. Обратите внимание, что значение не совсем равно «Желтые цветы». «~=» говорит браузеру изменить макет CSS, если какая-либо часть значения содержит этот конкретный текст. Однако вы можете ограничить текст только точным значением. Для этого вы убираете символ ~. В следующем коде CSS атрибут title должен иметь точное значение без лишних символов.

a[title=Желтые цветы] { 
цвет фона: желтый;
}

В приведенном выше примере содержимое атрибута title должно быть точным. Поэтому приведенный выше HTML-код не будет работать с этим кодом CSS. Однако следующий код будет работать с классом CSS.

 Нажмите здесь, чтобы просмотреть желтые цветы.

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

* { 
черный цвет;
}

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

Что такое CSS? Ultimate Intro

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

Что означает CSS?

CSS означает каскадные таблицы стилей.

Что такое CSS?

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

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

Селекторы CSS

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

Правило CSS

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

 p {цвет:бирюзовый} 

Для получения дополнительной информации о том, как использовать CSS для оформления HTML, см. наше полезное руководство.

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

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

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

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

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

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

CSS можно использовать тремя способами: встроенным, внутренним и внешним. Вот разница между тремя.

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

 
 
 <тело>
  
Это красный заголовок
 
 
  

Передняя часть приведенного выше кода в конечном итоге будет выглядеть так:

Это красный заголовок

Где я могу изучить CSS?

Существует множество доступных ресурсов, которые могут научить вас CSS. Code Institute обучает этому в рамках нашей программы комплексной разработки.