Стили ксс: CSS – что это такое за стили

Обновление CSS-файлов на вкладке Стили (css зеркало редактирование) — Microsoft Edge Development

• Статья
• 03/29/2023
• Чтение занимает 3 мин

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

• В редакторе кода измените .css файл, изменения отражаются в инструменте Элементы на вкладке Средства разработки Edge .

• В инструменте Элементы на вкладке Edge DevTools изменения отражаются в .css файле в редакторе кода.

Редактирование CSS зеркало включено по умолчанию в расширении.

Например, если выбрать значение размера точки для элемента body, а затем нажать клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ, то при .css открытии файла значение автоматически изменится в .css файле в режиме реального времени при изменении значения на вкладке Стили :

Без редактирования css зеркало вкладка Стили в средствах разработки Microsoft Edge отлично подходит для отладки и настройки селекторов CSS и правил CSS. Однако, хотя эти изменения немедленно отображаются в веб-браузере, они не отражаются в вашем .css файле. Это означает, что после изменения CSS на вкладке Стили необходимо скопировать и вставить изменения обратно в

. css

Редактирование css зеркало — это функция расширения Microsoft Edge DevTools, которая решает эту проблему. Любое изменение, которое вы вносите на вкладке Стили, также автоматически изменяет .css файл в открытой папке в Visual Studio Code. Вы можете изменить любой селектор CSS или создать новые селекторы CSS на вкладке Стили , и все изменения автоматически отражаются в правильном .css файле.

Css зеркало редактирование также работает для .html файла, содержащего <style> элемент, например страницу Успешно. Это показано в разделе Начало работы, нажав кнопку Запустить экземпляр.

Флажок Редактирование зеркального отображения CSS

Если используется URL-адрес (вместо пути к файлу), css зеркало редактирования требует открытия папки с исходными файлами веб-страницы в Visual Studio Code, что расширение может сопоставить с ресурсами веб-страницы URL-адреса, введенного в адресную launch. json строку или файл. Если у вас нет локальных исходных файлов, но вы хотите изменить CSS в средствах разработки, снимите флажок CSS зеркало редактирование, чтобы предотвратить сообщения об ошибках при сопоставлении и редактировании зеркало. См. раздел Включение редактирования CSS зеркало ниже.

Сохранение изменений в CSS-файле

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

Если закрыть Visual Studio, текущую папку или .css файл, Visual Studio предложит сохранить изменения.

Пример зеркального отображения изменений с вкладки «Стили» в CSS-файл

В следующем примере index.html открывается в Visual Studio Code, а расширение Microsoft Edge DevTools открыто. Мы выбираем значок flexbox в селекторе .searchbar CSS, а затем изменяем на flex-directioncolumn.

Это изменение отображается на вкладке Edge DevTools и на вкладке Edge DevTools: Browser :

В результате редактирования CSS зеркало Visual Studio Code также автоматически переходит к правильному .css файлу и соответствующему номеру строки и вставляет flex-direction: column код CSS:

Включение редактирования css зеркало

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

Очистите поле CSS зеркало редактирования проверка, если вы только экспериментируете, и в адресной строке на вкладке Edge DevTools: Browser есть URL-адрес, а не путь к файлу, а исходные файлы отсутствуют локально через панель > действий Обозреватель> кнопкой Открыть папку, и не хотите получать сообщения об ошибках о сопоставлении и зеркало редактировании.

Чтобы включить или отключить редактирование css зеркало, выполните приведенные далее действия.

1. На вкладке Edge DevTools на вкладке Элементы перейдите на вкладку Стили .

2. Установите или снимите флажок css зеркало редактирования:

   Или откройте меню команд, начните вводить слово

   зеркало, а затем выберите Инструменты Microsoft Edge: Переключить зеркало редактирование в|off для CSS-файлов в рабочей области:

Поддержка исходной карты

Зеркальное отображение CSS также поддерживает такие абстракции, как Sass или CSS-in-JS, если вы настроили проект для создания исходных карт. У нас есть проблема отслеживания на GitHub и мы приветствуем любые отзывы о том, как это можно улучшить: редактирование зеркала CSS с помощью исходных карт: известные проблемы и отзывы.

См. также

• Начало работы с расширением DevTools для Visual Studio Code
• Расширение Средств разработки Microsoft Edge для Visual Studio Code

что это, для чего используется

CSS (Cascading Style Sheets, с англ. каскадные таблицы стилей) представляет собой формальный язык, который используется для указания внешнего вида страницы, сформированной при помощи языка гиперразметки XML, XHTML или HTML.

Цели использования CSS

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

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

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

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

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

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

Как подключить CSS к странице

Связывание CSS с HTML можно реализовать несколькими методами. Рассмотрим три наиболее распространенных и простых из них:

1. Используя внутреннюю часть тега и атрибут style. При таком решении необходимо дополнительно прописывать селектор (число, хранящееся в сегментном регистре).
2. Добавляя в документ тег <style> и прописывая для него атрибут type=»text/css».
3. Подключая к странице отдельную таблицу стилей, расположенную на сервере. Для этого используется код <link rel=»stylesheet» href=»ссылка на файл style.css» type=»text/css»/>.

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

запуганы CSS? Полное руководство, как избавиться от страха »

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

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

Изображение справа не только менее интересно, но и намного сложнее в использовании.

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

Содержание

• 1 Что такое CSS?
  • 1.1 Чем CSS отличается от HTML?
• 2 Синтаксис CSS
  • 2.1. Пример синтаксиса CSS
• 3 Подготовка HTML Markup для стиля
  • 3.1 Когда использовать классы
  • 3.2 Когда использовать идентификаторы
  • 3.3, когда не используйте поставку
  • 3.4. Стилизация
• 4 Способы связывания правил CSS с документом HTML
  • 4.1 Встроенные стили
  • 4.2 Внутренние таблицы стилей
  • 4.3 Внешние таблицы стилей
  • 4.4 Когда использовать каждый метод
• 5 Как работает CSS
  • 5.1 Каскадное наследование
  • 5.2 Специфика
• 6 Что может CSS?
  • 6.1 Модель коробки
  • 6.2 Создание макетов
  • 6.3 Веб-шрифты и типография
  • 6.4 Создание постоянного перекрестного опыта
• 7 Связанные элементы
• 8 Учебных пособий и ресурсов

Что есть CSSSSS

Whats?

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

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

Чем CSS отличается от HTML?

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

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

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

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

Синтаксис CSS

Синтаксис CSS включает селекторы, свойства, значения, объявления, блоки объявлений, наборы правил, at-правила и операторы.

• Селектор — это фрагмент кода, используемый для идентификации элемента или элементов веб-страницы, на которые должны влиять стили.
• Свойство — это аспект элемента, на который нужно воздействовать. Например, цвет, отступы, поля и фон являются одними из наиболее часто используемых свойств CSS.
• Значение используется для определения свойства . Например, свойству color может быть присвоено значение red следующим образом: color: red; .
• Комбинация свойства и значения называется объявлением .
• Во многих случаях несколько объявлений применяются к одному селектору . Блок объявлений — это термин, используемый для обозначения всех объявлений, применяемых к одному селектору .
• Одиночный селектор и блок объявления , который следует за ним в комбинации, называются набором правил .
• At-правила аналогичны наборам правил , но начинаются с @ знак, а не с селектором . Наиболее распространенным правилом at является правило @media , которое часто используется для создания блока правил CSS, которые применяются в зависимости от размера устройства, просматривающего веб-страницу.
• Оба набора правил и at-rules являются операторами CSS .

Пример синтаксиса CSS

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

 h2 {
    красный цвет;
    размер шрифта: 3em;
    оформление текста: подчеркивание;
    }
 

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

Используя h2 в качестве селектора, мы говорим, что каждый заголовок уровня 1 на веб-странице должен следовать объявлениям, содержащимся в этом наборе правил.

Набор правил содержит три объявления:

• цвет:красный;
• размер шрифта: 3em;
• оформление текста: подчеркивание;

color , font-size и text-decoration — все это свойства. Существуют буквально сотни свойств CSS, которые вы можете использовать, но обычно используются лишь несколько десятков.

Мы применили значения red , 3em и underline к свойствам, которые мы использовали. Каждое свойство CSS определено для приема значений, отформатированных определенным образом.

Для свойства

Мы применили значение 3em к свойству font-size . Мы могли бы использовать широкий диапазон единиц размера, включая пиксели, проценты и многое другое.

Наконец, мы добавили значение underline к свойству text-decoration . Мы могли бы также использовать overline или line-through как значения для text-decoration . Кроме того, CSS3 позволяет использовать сплошные, двойные, точечные, пунктирные и волнистые стили линий, которые хорошо соответствуют цветам оформления текста. Мы могли бы применить все три значения одновременно, используя такое объявление:

 text-decoration: blue double underline;
 

Это правило приведет к тому, что h2 в нашем исходном примере будет подчеркнуто синей двойной линией. Сам текст останется красным, как определено в нашем свойстве color .

Подготовка разметки HTML для оформления

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

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

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

Классы и идентификаторы не взаимозаменяемы. Важно знать, когда использовать каждый из них.

Когда использовать классы

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

Когда использовать идентификаторы

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

Вот пример кода HTML и CSS для простой панели навигации для простого сайта электронной коммерции.

 <стиль>
    #nav {
        фон: светло-серый;
        переполнение: авто;
        }
    #нав ли {
        плыть налево;
        отступ: 10 пикселей;
        }
    #navli:hover {
        фон: серый;
        }
 
<ул>
    
Главная
    
Магазин
    
О нас
    
Свяжитесь с нами

 

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

Этот код не повлияет на любые дополнительные списки на той же веб-странице.

#example-nav {
фон: светло-серый;
переполнение: авто;
}
#example-nav li {
поплавок: левый;
отступ: 10 пикселей;
}
#example-nav li:hover {
фон: серый;
}

• Домашняя страница
• Магазин
• О нас
• Свяжитесь с нами

Когда не следует использовать хуки

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

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

 <стиль>
    ул {
        тип стиля списка: верхний роман;
        поле слева: 50px;
        }
    п {
        цвет: темно-синий
        }

Текст абзаца здесь.  Два коротких предложения.
<ул>
Краткий список
Всего два элемента

Дополнительный текст абзаца здесь. На этот раз давайте напишем три предложения. Вот так.
 

Этот код будет отображаться следующим образом.

.code_sample ул {
тип-стиля-списка: верхний романский;
поле слева: 50px;
}
.code_sample p {
цвет: темно-синий
}

Здесь текст абзаца. Два коротких предложения.

• Краткий список
• Всего два пункта

Дополнительный текст абзаца здесь. На этот раз давайте напишем три предложения. Так.

• Еще один список
• Всего два пункта

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

Передовой опыт подготовки разметки к стилизации

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

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

Способы привязки правил CSS к HTML-документу

Существует три способа добавления правил CSS на веб-страницу:

• Встроенные стили
• Внутренние таблицы стилей
• Внешние таблицы стилей

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

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

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

 
Пример заголовка
 
 

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

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

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

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

 <голова>
    <стиль>
        ч2 {
            красный цвет;
            отступ: 10 пикселей;
            оформление текста: подчеркивание;
            }
    

<тело>
     
Пример заголовка
 

 

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

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

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

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

 /***************************************************** **
Сохраните с именем, оканчивающимся на . css, например styles.css.
****************************************************/
ч2 {
    красный цвет;
    отступ: 10 пикселей;
    оформление текста: подчеркивание;
    }
 

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

 <голова>


<тело>
     
Пример заголовка
 

 

При загрузке этого HTML-документа тег link вызовет загрузку стилей из файла styles.css на веб-страницу. В результате все элементы заголовка уровня 1 будут отображаться с красным текстом, подчеркнутым и с 10-пиксельным отступом, примененным к каждой стороне.

Когда использовать тот или иной метод

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

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

Встроенные стили можно использовать в двух случаях:

1. При написании правил CSS, которые будут применяться только к одному элементу на одной веб-странице.
2. При применении WYSIWYG-редактора, например, редактора tinyMCE, интегрированного в систему управления контентом, например WordPress.

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

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

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

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

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

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

Два правила, определяющие поведение CSS, — это наследование и специфичность.

Каскадное наследование

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

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

 <голова>
    <стиль>
        р {цвет: красный;}
        р {цвет: синий;}
    

<тело>
Какого цвета будет текст этого абзаца?

 

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

.code_sample_p {цвет: красный;}
.code_sample_p {цвет: синий;}

Какого цвета будет текст этого абзаца?

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

Правила из styles_2.css будут применяться в случае возникновения конфликтов между стилями, содержащимися в этих двух таблицах стилей.

Наследование стилей — еще один пример каскадного поведения стилей CSS.

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

 <голова>
    <стиль>
        ул {цвет: красный;}
    

<тело>
    <ул>
        
Элемент 1
        
Элемент 2
    

 

Вот как будет выглядеть этот код.

.code-sample-ul {цвет: красный;}

• Элемент 1
• Элемент 2

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

Специфичность

Второе правило, определяющее, какие правила применяются к каждому элементу HTML, — это правило специфичности.

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

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

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

Еще один способ повысить специфичность селектора — использовать ряд элементов, классов и идентификаторов, чтобы определить элемент, к которому вы хотите обратиться. Например, если вы хотите определить неупорядоченные элементы списка в списке с классом «список-примеров», содержащимся с div с идентификатором «example-div», вы можете использовать следующий селектор для создания селектора с высоким уровнем специфичности.

 div#example-div > ul.example-list > li {стили здесь}
 

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

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

Что может CSS?

Лучше задать вопрос: «Что не может сделать CSS?»

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

• Создайте гибкую сетку для разработки полностью адаптивных веб-сайтов, которые прекрасно отображаются на любом устройстве.
• Придайте стиль всему: от типографики до таблиц, форм и многого другого.
• Расположение элементов на веб-странице относительно друг друга с использованием таких свойств, как float , position , overflow , flex и box-sizing .
• Добавление фоновых изображений к любому элементу.
• Создание фигур, взаимодействий и анимации.

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

Блочная модель

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

 
Заголовок 1
 
Короткий абзац текста. Всего четыре фразы. Большинство предложений довольно короткие. Особенно этот.
 
Заголовок 2
 
<ул>
    
Небольшой список
    
Три элемента в этом списке
    
Сделаем это ненумерованным списком

 
Заголовок 3
 
Последний короткий абзац текста. Всего четыре фразы. Большинство предложений довольно короткие. Особенно этот.