Как объявить класс в css

Search Services

This policy describes our current privacy practices for the Yahoo Search and Assistants brands, websites, features, products, apps, software and other services (“Search Services”). All information that is collected, given to Yahoo or stored in your Yahoo Account will be treated, used and protected in accordance with the Yahoo Privacy Policy. This information may change as Yahoo revises these Search Services by adding or removing features, or using different service providers. Some features are only available if you are a registered user. Please visit Help if you have questions about these Search Services.

This page describes specific privacy practices with respect to Yahoo Search, Yahoo Assistants and Yahoo Shopping. Additional information is included for certain Search Services listed below.

Yahoo Search

Information Collection & Use Practices

Search

• When you conduct a search on a product or service that uses our search technology, we may collect information from your experience, such as your search queries.
• Search Assist helps you find what you are looking for by automatically offering popular search terms and new topics to consider. Search Assist may base suggestions on aggregated searches across all users and your individual search history.
• The Yahoo search history tool allows you to see what you’ve searched for in the past. Learn how to manage your search history tool.
• When you use Yahoo Search, you may see relevant, private results selected from other sources, such as your Yahoo Mail account. Only you can see your private search results when you’re signed in. Learn how to manage, including turning off, private results.
• Some advertising that you receive may be customised based on your searches or related terms at Yahoo. Please visit our Opt-out page to learn more about the information used to personalise your search experience. If you opt out, you may continue to see the ads that Yahoo serves on these websites, but they won’t be customised to your interests or search history.
• Visit the Search preferences page to manage your Yahoo Search experience, including safe search, search history and private results.
• Yahoo Search may use image recognition algorithms to identify public figures, scenes, actions or objects to make it easier to search images.

Search Partners

• A variety of third-party providers help power Yahoo search and sponsored search services.
• We may share your search query, IP address, and other depersonalized information from your web browser or app, such as a unique identifier for your web browser, with these search partners.
• These third party providers may use this information, as well as your search results clicks, to provide more relevant advertising and search results, for search product improvement, research and analysis, and to help detect and defend against fraudulent activity on sponsored or contextual search results.
• We may reformat results provided by these search partners to provide an enhanced search experience to you.
• To learn more about the data collection and use practices by these search partners, please visit our Third parties page.

Sponsored Search Results

• Search results may include sites that have paid for placement in the search results. Learn more.
• Search results may contain tracking URLs provided by Yahoo Search marketing and/or our Search partners to identify clicks from the search results page.

Assistants

• Yahoo Assistants are a new category of products and services using artificial intelligence guided by humans. These include chat bots operating in messenger platforms, virtual personal assistants and stand-alone apps accessed on Yahoo or through third-party apps and services. Assistants may collection information about you in a manner different from other search technologies.
• Yahoo Assistants may interact and converse with you to answer questions, help complete tasks or perform other activities. Assistants rely on our personnel and automated systems to respond to questions or instructions from users.
• We may collect information about you when you use our Assistants, including your conversations and interactions with the Assistant, your Yahoo ID and information associated with your account.
• We may also collect information provided by a third-party (including apps, messaging platforms and other services) interacting with our Assistants, which could include: your account information with the third-party, such as user ID, name, photo, phone number, email address; and device information such as device ID, device type, operating system, and mobile carrier.
• Yahoo’s personnel and our automated systems may have access to all communications content as it is sent, received, and when it is stored, in order to fulfil your requests, further product and services development, and provide personalized experiences and advertising through Yahoo’s products and services.
• When you are communicating with our Assistants through a third-party, please read that company’s privacy policy to better understand what information it may retain and for what purposes.
• Location information collected through the Yahoo Assistants may not appear in the Location Management page.

Other

• Users who are European residents can request for certain URLs to be blocked from search results in certain circumstances.

Yahoo Shopping

• Yahoo Shopping allows you to access thousands of merchants and products in one place. To make a purchase from a merchant listed on Yahoo Shopping, you are not required to be a registered user.
• PriceGrabber powers the functionality of Yahoo Shopping. For more information on how PriceGrabber collects and uses your information, please visit the PriceGrabber Privacy Policy.

Information collection and use practices

Purchases

• We may use your Yahoo Shopping queries and Yahoo Shopping browsing history to customise your experience and provide you with ads that may be of more interest to you. We show you your Yahoo Shopping queries and Yahoo Shopping browsing history made within the past 60 days in the recent activity module. To disable recent activity, select “Off” in the top right-hand corner of the module. To clear your Yahoo Shopping browsing history, select “Clear all” in the top right-hand corner of the module. To learn more about your ability to opt out of interest-based advertising, click here. To learn more about how the recent activity module works, click here.
• When you make a purchase from a merchant listed on Yahoo Shopping, the merchant may ask for information such as your name, billing and shipping addresses, email address, telephone number and credit card information. Please refer to the privacy policy of each individual merchant to learn how they use and store your information.
• Each merchant from whom you make a purchase may receive your personal and order information directly. Yahoo Shopping does not see, collect, store or use this information in any way.
• Each merchant is solely responsible for their use of your personal and order information.

Comments

• When signed in to the Yahoo Network, you can comment on user reviews. When you comment, your profile is linked to that content and your display name and profile photo are visible to other users.
• You must be a logged-in, registered user to post a comment.
• Comments that you post will be displayed publicly along with your Yahoo ID or chosen nickname and your profile picture or avatar.
• You can also delete a comment that you have posted by selecting the ‘delete’ option next to the comment that you wish to remove.
• You can check your comments on the ‘My comments’ tab next to the commenting streams.

Атрибут «class» в CSS

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

Почему классы важны?

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

Как объявить класс

Любой класс объявляется предшествующим имени класса ( . ). В приведенном ниже коде показано, как это сделать.

Примечание. Имя класса чувствительно к регистру

Селекторы классов в CSS

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Как работают селекторы классов CSS

Селекторы классов CSS позволяют присваивать правила стиля только некоторым экземплярам того или иного HTML-элемента (а не всем его экземплярам – как делает CSS по умолчанию). В отличие от HTML-элементов, имена которых предопределены (например,

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

CSS-правило для селектора классов записывается так же, как и для селектора тегов, только в начале имени селектора класса идет точка:

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

Content.

Создание CSS-класса с помощью селектора

Приступим к изучению классов CSS на практике. Сотрите все, что есть сейчас в файле styles.css и добавьте следующий фрагмент кода, чтобы объявить правило для класса red-text:

После добавления кода в styles.css сохраните файл.

Теперь откройте файл index.html и сотрите все, кроме первой строки кода:

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

Here is the first sample of paragraph text.

Обратите внимание, здесь в имя класса не точка не добавляется. На данный момент файл index.html должен содержать такой код:

Здесь мы добавили текст с помощью тега HTML

. Также мы указали класс red-text, добавив выделенный атрибут класса внутри открывающего тега HTML.

Сохраните файл index.html и загрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

Вы должны получить веб-страницу с красным текстом:

Here is the first sample of paragraph text.

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

. Добавьте следующий фрагмент кода в файл styles.css (после класса red-text):

.yellow-background-text background-color: yellow;
>

Это правило объявляет, что свойству background-color класса yellow-background-text присвоено значение yellow. Любой текстовый HTML элемент, которому присвоится этот класс, будет использовать желтый фон. Обратите внимание, слово text в классе yellow-background-text используется только для удобства чтения файла человеком. На обработку самого класса браузером это слово никак не влияет.

Чтобы применить новый класс к каким-нибудь элементам, вернитесь в файл index.html и добавьте следующую строку в конец файла:

Here is the second sample of paragraph text.

Мы добавили новый текст с помощью элемента

и указали класс yellow-background-text. Сохраните файл и перезагрузите его в браузере. Ваша веб-страница покажет два разных предложения, первое будет написано красным, а второе – на желтом фоне:
Here is the first sample of paragraph text.

Here is the second sample of paragraph text.

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

Here is a third sample of text.

Как видите, имена классов разделяются только пробелом. Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:
Here is the first sample of paragraph text.

Here is the second sample of paragraph text.

Here is a third sample of text.

Теперь на странице есть третья строка текста, оформленная согласно свойствам, установленным в классах red-text и yellow-background-text – это красный текст на желтом фоне.

Добавление CSS-классов к изображениям

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

.black-img border: 5px dotted black;
border-radius: 10%;
>
.yellow-img border: 25px solid yellow;
border-radius: 50%;
>
.red-img border: 15px double red;
>

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

• Первое правило объявляет, что класс black-img должен иметь черную пунктирную границу шириной 5 пикселей и с радиусом 10%, что закругляет углы элемента.
• Второе правило объявляет, что элемент класса yellow-img должен иметь сплошную желтую границу шириной 25 пикселей и радиусом 50% (такое значение придает элементу круглую форму).
• Третье правило объявляет класс red-img, который должен иметь двойную красную границу шириной 15 пикселей. Поскольку радиус границы не установлен, граница будет соответствовать исходной форме элемента.

Сохраните файл styles.css. Затем удалите все из файла index.html (кроме первой строки кода: ) и добавьте следующий фрагмент кода:

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

Примечание: Чтобы использовать изображение из интернета, можно вместо относительного пути указать ссылку на него.

Сохраните файл index.html и загрузите его в браузере. Вы должны получить такой результат:

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

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

Заключение

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

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

Переменные — SASS: Основы работы

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

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

• Тёмный — #303846
• Светлый — #f7f7f7
• Основной — #09d3ac
• Вторичный — #2196f3

Теперь в начале нашего SASS-файла мы можем объявить переменные и записать эти значения в них. Для этого используется символ $ и указывается уникальное имя.

$dark: #303846; $light: #f7f7f7; $primary: #09d3ac; $secondary: #2196f3; 

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

.card  background: $light; border: 1px solid $dark; > 

В результате компиляции получится следующий CSS-код:

.card  background: #f7f7f7; border: 1px solid #303846; > 

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

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

Область видимости

Переменная может быть объявлена как внутри селектора, так и вне его. В зависимости от того, где была объявлена переменная, ей можно пользоваться или во всём проекте или только внутри определённого селектора. Посмотрите на пример такого кода:

$margin-top: 20px; .card  $bg-color: #f9f9f9; > .wrapper  margin-top: $margin-top; background: $bg-color; > 

В данном случае мы объявили две переменные: $margin-top и $bg-color. Впоследствии обе переменные были использованы в селекторе .wrapper. Что произойдёт после компиляции? На самом деле никакой компиляции не произойдёт. Мы получим сообщение об ошибке:

$bg-color; │ ^^^^^^^^^ ╵ 

Компилятор говорит нам, что на 9 строке используется неизвестная переменная. Но ведь она есть — мы её объявили на 4 строке! Да — в коде действительно существует переменная $bg-color, но она существует только внутри селектора .card и вне этого селектора просто невидна.

Такое поведение называется областью видимости переменной. В зависимости от того, где мы объявили переменную, мы можем получать доступ к ней или во всём проекте, или только внутри одного селектора. Переменная $margin-top в этом примере является глобальной переменной, так как доступ к ней есть в любом участке нашего SASS-файла. Переменная $bg-color в примере является локальной переменной и доступна она только внутри того селектора, где была определена.

Разберём ещё один пример:

.card  $main-bg: #f9f9f9; $header-bg: #2196f3; .card-header  background: $header-bg; > .card-body  background: $main-bg; > > 

Обратите внимание, что переменные $main-bg и $header-bg объявлены внутри селектора .card. Так как селекторы .card-header и .card-body лежат внутри селектора .card, то переменные $main-bg и $header-bg будут доступны для этих селекторов. После компиляции мы получим следующий CSS-код:

.card .card-header  background: #2196f3; > .card .card-body  background: #f9f9f9; > 

Именование переменных

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

$main-bg: #f7f7f7; .card  $main-bg: #f9f9f9; $header-bg: #2196f3; .card-header  background: $header-bg; > .card-body  background: $main-bg; > > .wrapper  background: $main-bg; > 

Заметьте, что переменная $main-bg объявлена и в начале SASS-файла и в селекторе .card. Скорее всего с первого взгляда вы не определите какой $main-bg будет использован в проекте. Попробуем скомпилировать этот код. В этот раз ошибок не будет:

.card .card-header  background: #2196f3; > .card .card-body  background: #f9f9f9; > .wrapper  background: #f7f7f7; > 

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

Подключение переменных из другого файла

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

В данной структуре у нас есть главный файл app.scss, в котором мы хотим подключить настройки из файла config.scss и стандартные настройки переменных из файла default_variables.scss. Подключить эти файлы в файл app.scss можно с помощью директивы @import, указав путь к необходимому файлу:

@import "config.scss"; @import "default_variables.scss"; 

Также при подключении SASS-файлов необязательно указывать расширение. Компилятор найдёт необходимый файл в указанной директории и подключит его. Значит, мы можем немного переписать код и не указывать лишнее расширение:

@import "config"; @import "default_variables"; 

Порядок подключения файлов в данном случае очень важен. Если внутри файлов config.scss и default_variables.scss будут конфликтующие значения, то возьмётся то, которое было указано последним. Здесь работает то же правило каскадности, что и в CSS: стили, записанные позже, имеют больший приоритет.

Флаг default

Вернёмся к структуре нашего проекта. В default_variables.scss запишем базовые цвета для нашего проекта:

$primary: #A0D788; $secondary: #71D0A7; $third: #CCD47D; 

Теперь, подключив файл к нашему основному файлу стилей, мы можем использовать эти переменные. Используем цвета в файле app.scss:

@import "config"; @import "default_variables"; .card  background: $primary; .btn  background: $secondary; > > 

После компиляции получим следующий CSS-код:

.card  background: #A0D788; > .card .btn  background: #71D0A7; > 

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

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

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

$primary: #A0D788!default; $secondary: #71D0A7!default; $third: #CCD47D!default; 

Теперь, если мы добавим переменную $primary в файл config.scss, то именно её значение будет использовано в качестве фонового цвета для селектора .card:

config.scss

$primary: #09D3AC; 

default_variables.scss

$primary: #A0D788!default; $secondary: #71D0A7!default; $third: #CCD47D!default; 

app.scss

@import "config"; @import "default_variables"; .card  background: $primary; .btn  background: $secondary; > > 

После компиляции этого кода мы получим следующий результат:

.card  background: #09D3AC; > .card .btn  background: #71D0A7; > 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях: