элемент div.имя класса в файле css
чтобы действительно ответить на ваш вопрос, я сначала должен ответить на пару других вопросов. Потому что, как вы увидите, все дело в контексте.
- в чем смысл HTML?
- что это
div? - чем он отличается от других элементов HTML?
- и что это значит, если элемент имеет класс (или набор классов)?
я дам вам свое мнение по ответам на эти вопросы, и тогда мы сможем провести содержательную дискуссию о передовом опыте.
в чем смысл HTML?
смысл HTML заключается в добавлении контекста к вашим данным. Текст сам по себе может быть очень мощным. С момента изобретения печатного станка он очень хорошо служил человечеству как чрезвычайно мощный инструмент коммуникации. Взять следующий документ, например:
My shopping list
Bread
Milk
Eggs
Bacon
даже с этой простой текстовый документ, большинство людей могут dechiper намерения писатель; это список покупок. Существует заголовок и коллекция элементов списка, которые необходимо приобрести.
Итак, в чем смысл HTML, если достаточно простых текстовых документов?
справедливый вопрос. Если текста достаточно для общения, то зачем нам HTML?
на читатель документа пытается проанализировать информацию, которую они получают. Этот процесс встроен в тонну культурных трюков и усвоенных шаблонов, которые используются для реконструкции первоначального намерения. Это тривиально для большинства людей с базовым пониманием английского языка, чтобы определить значение документа. Однако по мере того, как сложность документа возрастает (или уменьшается знакомство читателя с контекстом), становится все труднее правильно разобрать его. Делаются предположения; контекст становится неясным. В конце концов, способность читателя точно декодировать сообщение распадается, и сообщение indechiperable.
это пространство, где существует HTML. Он предназначен для обертывания данных, обеспечивая контекст и смысл. Так что даже если вы (или компьютер) не может обработать фактическую информацию, вы можете понять контекст, в котором она должна быть. Например, тот же документ с HTML:
<h2>My shopping list</h2>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
теперь, даже если мы не смогли понять фактические данные, у нас есть контекстуальный фон для интерпретации данных. У нас есть заголовок и ненумерованный список коллекция элементы списка.
<h2>Xasdk bop boop</h2>
<ul>
<li>Zorch</li>
<li>Quach</li>
<li>Iach</li>
<li>Xeru</li>
</ul>
что это div? Чем он отличается от других элементов HTML?
HTML-элементы определяют контекст; они описывают содержимое, которое они обертывают. HTML не должен меняться или изменить значение данных, он просто увеличивает его и определяет отношения между данными:li элемент описывает элемент списка. Ан h2 элемент описывает заголовок. А table элемент описывает таблицу, и так далее.
Итак, что такое div тогда? Ну, а div — это HTML-элемент блочного уровня, который не имеет собственного контекста. Сам по себе он не значит (кроме того, что это блок).
в то время как большинство других элементов HTML (за исключением span элемент) имеют какой-то явной связи div элемент не. Это огромная разница. Это пустая коробка. Это коробка, которая ничего не значит. Когда вы кладете что-то в «div», вы говорите, что это в коробке, но эта коробка на самом деле ничего не значит.
так в чем же смысл div тогда?
в div тег предоставляет чистый лист для вас, чтобы определить свой собственный контекст. Вернемся к нашему примеру со списком покупок: прямо сейчас существует слабая связь между неупорядоченным списком и заголовком. Они слабо связаны между собой, они просто случайно оказываются рядом друг с другом, но ничто не связывает их вместе как единое целое. Что хотелось бы сказать:
<grocery_list>
<h2>My shopping list</h2>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</grocery_list>
но мы не можем сделать это в рамках спецификации HTML. Но что мы можем сделать, это засунуть их в ‘box’:
<div>
<h2>My shopping list</h2>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</div>
что означает, когда элемент имеет класс (или коллекцию классов)?
но, опять же, эта коробка сейчас не так много значит. То, что мы действительно хотели бы сделать, это дать этой коробке некоторый собственный контекст. Мы хотим изобрести свой собственный элемент. Вот где
<div>
<h2>My shopping list</h2>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</div>
поэтому мы говорим, что наши div is действительно shopping_list. Это shopping_list заголовок и неупорядоченный список элементов. HTML должен сделать ваши данные больше ясно, а не меньше очистить.
Итак, наконец, как все это относится к вашему вопросу?
когда вы пишете CSS, вы используете свой контекст (элементы, классы, идентификаторы и отношения между элементами) для определения стиля.
Итак, вернемся к примеру со списком покупок. Я мог бы написать стиль, который сказал:
<style>
ul {
background-color: red;
}
</style>
является селектором CSS .important хорошая идея? Является ли» важный список покупок «тем же самым, что и» важная строка таблицы в таблице бюджета?»
и только вы могу ответить, что, в зависимости от того, что ваши данные и как вы решили эту информацию.
есть куча технических тем, чтобы попасть в спецификацию CSS, например, хорошие практики для поддержания сложных таблиц стилей и сложных ассоциаций между элементами, но в конечном итоге все сводится к ответам на эти вопросы:
- что я пытаюсь общаться? (Информации)
- что контекст данных? (HTML)
- как это должно выглядеть? (CSS)
как только вы сможете ответить на эти вопросы, все остальное начнет вставать на свои места.
Классы и идентификаторы | Yocton
image/svg+xml Расширенный поиск- 1. HTML5
- Общие понятия
- Doctype
- Заголовки
- Абзацы
- Форматирование теста
- Гиперссылки и якоря
- Списки
- Таблицы
- Комментарии
- Классы и идентификаторы
-
- Подключение ресурсов
- Подключение JavaScript-кода в HTML
- Использование CSS в HTML
- Изображения
- Карта изображения
- Элементы управления
- Формы
- Элемент div
- Секционные элементы
- Панель навигации
-
- Элемент output
- Одиночные элементы
- Мультимедийные элементы
- Элемент progress
- Раскрывающийся список
- Элемент embed
- Элемент iframe
- Языки контента
- SVG
- Canvas
- Метаданные
- Обозначение компьютерного кода
- Создание цитат
- Атрибут tabindex
- Глобальные атрибуты
- Кэширование в HTML
- Атрибуты событий
- Символы
- ARIA
- 2. Элементы HTML
- Общие атрибуты
- accesskey
- autocapitalize
- class
- contenteditable
- contextmenu 🗑
- data-*
- dir
- draggable
- dropzone 🎓
- hidden
- id
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- slot 🎓
- spellcheck
- style
- tabindex
- title
- translate 🎓
- x-ms-acceleratorkey ⚠
- x-ms-format-detection ⚠
- <!— —>
- <!DOCTYPE>
- <![CDATA[ … ]]>
- <a>
- charset 🗑
- coords 🗑
- download
- Общие атрибуты
- 3. JavaScript
- Введение в программирование на Javascript
- Языковые средства
- Переменные
- Типы данных
- Точка с запятой в Javascript
- 4. Phaser 3
- Начало работы с Phaser 3
- Быстрое современное начало с Phaser
- Создание вашей первой игры в Phaser 3
- Введение
- Загрузка ресурсов
- Создание игрового мира
- Платформы
- Персонаж
- Скорость в физическом мире
- Управление игроком с клавиатуры
- Звёздная пыль
- Счёт
- Прыгающие бомбы
- Создание вашей первой игры Phaser 3 на современном Javascript
- Создание вашей первой игры Phaser 3 на современном Javascript. Часть 1.
- Создание вашей первой игры Phaser 3 на современном Javascript. Часть 2.
- Создание вашей первой игры Phaser 3 на современном Javascript. Часть 3.
- Создание вашей первой игры Phaser 3 на современном Javascript. Часть 4.
- Создание вашей первой игры Phaser 3 на современном Javascript. Часть 5.
- Как создать пошаговую RPG в Phaser 3 (часть 1)
id — Веб-технологии для разработчиков
Глобальный атрибут id устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование идентификатора фрагмента), скриптинге или стилизации (с помощью CSS).
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправте нам «pull request» (предложение изменения кода в чужом репозитории).
Значение этого атрибута «непрозрачная» строка: это означает, что веб-автор не должен использовать его для передачи какой-либо информации. Особое значение, например семантическое, получать из этой строки не надо.
Значение id не должно содержать пропусков (пробелов, табуляции и т.д). Браузеры обрабатывают пробелы, как часть уникального идентификатора. В отличии от атрибута class, который позволяет разделять пробелами значение (указывать несколько классов через пробел), элементы могут иметь только один ID.
Заметка: Использование символов отличных от ASCII букв, цифр, '_', '-' и '.' может вызвать проблемы, связанные с совместимостью, т.к. они не были разрешены в HTML 4. Несмотря на то, что в HTML5 ограничение было снято, для совместимости ID должен начинаться с латинской буквы.
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| HTML Living Standard Определение ‘id’ в этой спецификации. | Живой стандарт | Нет изменений с последнего «snapshot» (состояние сохраненное в определенный момент времени), HTML 5.1 |
| HTML 5.1 Определение ‘id’ в этой спецификации. | Рекомендация | «Snapshot» от HTML Living Standard, нет изменений с HTML5 |
| HTML5 Определение ‘id’ в этой спецификации. | Рекомендация | «Snapshot» от HTML Living Standard, допускает использование '_', '-' и '.', если они не в начале id. Также атрибут стал глобальным. |
| HTML 4.01 Specification Определение ‘id’ в этой спецификации. | Рекомендация | Поддерживается всеми элементами, кроме <base>, <head>, <html>, <meta>, <script>, <style>, и <title>. |
Поддержка браузерами
Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам «pull request» (предложение изменения кода в чужом репозитории). Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
id | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 32
| IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 32
| Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
- Смотрите замечания реализации.
- Смотрите замечания реализации.
Смотрите также
Разница между «ID» и «CLASS» в HTML — студия Палыча
Индентификаторы (id) и классы (class) — это «крючки»
Мы можем различными путями описать содержимое HTML-документа. Основные элементы, такие, как <h2>, <p> и <ul> выполняют свою работу, но основной набор тегов не может покрыть каждое возможное оформление страничного элемента или слоя. Для этого нам нужно использовать идентификаторы и классы.
Для примера <ul>, это даст нам шанс оформить этот маркированный список по своему желанию так, что мы сможем манипулировать его уникальностью отдельно от других маркированных списков на нашей странице. Или мы должны иметь раздел на нашей странице, который не имеет релевантных тегов: <div>.
Как вариант, мы имеем боковые боксы для контента, которые мы можем разделить следующим образом: <div>.
И какова все-таки разница между ними?
Идентификаторы всегда уникальны для одной страницы
- Каждый элемент может иметь только один ID.
- На каждой странице может быть только один элемент с ID.
Ваш код страницы не пройдет валидацию, если вы используете одинаковые ID более, чем один раз. Так как валидность для нас очень важна, не стоит забывать об уникальности идентификаторов.
Классы не уникальны
- Вы можете использовать одинаковые классы для разных элементов.
- Вы можете использовать разные классы для одинаковых элементов.
Любая информация, необходимая для наложения стилей на разные объекты, может быть описана в class. Для примера – страница с множественными “widget”:
<div></div>
<div></div>
<div></div> Вы можете использовать имя класса “widget” как крючок, чтобы, например, сделать больше, чем другие, но при этом сохраняя все атрибуты. Вы можете накладывать на один объект более, чем один класс:
<div></div>
<div></div>
<div></div>Нет необходимости использовать новый класс, просто добавьте новый необходимый класс справа или слева. Эти классы, разделенные через пробел, нормально воспринимаются всеми браузерами в любом количестве (но не стоит доходить до фанатизма и создавать тысячу и более классов для одного элемента).
Идентификаторы имеют специальную функциональность для браузера
Классы не имеет специального функционала в браузерах, в отличии от идентификатора. Идентификаторы имеют очень важное свойство, так называемое «мера упорядочности (hash value)». Например, если вы введете в строке браузера строку ttp://your_site.ru#comments, то браузер попытается найти элемент с идентификатором, равным comments и автоматически совершит прокрутку страницы, чтобы показать этот элемент.
Это и является основой причиной уникальности идентификатора, поэтому ваши браузеры знают куда скроллить.
При обработке джаваскриптом страницы, быстрее всего будут найдены элементы с идентификаторов, чем с классом.
Элемент может содержать оба свойства
Ничто не мешает вам иметь и идентификатор, и класс на одном элементе. На самом деле, это часто очень хорошая идея. Возьмем, к примеру, разметку по умолчанию для элемента списка комментариев:
<li>К нему применен класс, который вам может понадобиться для стилизации всех комментариев на странице, но он также имеет уникальное значение идентификатора (динамически генерируется CMS). Это значение идентификатора полезно для прямой ссылки. Теперь можем легко ссылаться на конкретный комментарий на определенной странице.
CSS все равно
Что касается CSS, вы ничего не можете сделать с идентификатором, такого что вы не можете сделать с классом, и наоборот. Я помню, когда я впервые изучал CSS, и у меня возникла проблема, иногда я пытался устранить неполадки, переключаясь между этими значениями. Нету. CSS не волнует.
Но помним, что вес селектора CSS с идентфиикатором, больше селектора класса.
Javascript
Люди из JavaScript уже, вероятно, более созвучны различиям между классами и идентификаторами. JavaScript зависит от наличия только одного элемента страницы с любым конкретным идентификатором, иначе обычно используемая функция getElementById не будет надежной. Для тех, кто знаком с jQuery, вы знаете, как легко добавлять и удалять классы для элементов страницы. Это встроенная функция jQuery.
Обратите внимание, что такой функции не существует для идентификаторов. JavaScript не несет ответственности за манипулирование этими значениями, это вызовет больше проблем, чем стоило бы.
И да, Javascript значительно быстрее найдет элемент с идентификатором, чем элемент с классом.
Если не нужны, то и не используйте
Как видите, классы и идентификаторы очень важны, и мы полагаемся на них каждый день, чтобы выполнить стилизацию и манипулирование страницами, которые нам нужны. Тем не менее, вы должны использовать их разумно и семантически.
Это значит избегать таких вещей:
<a href="">Студия ПаЛыЧа</a>Мы уже знаем, что этот элемент является ссылкой, но он еще и якорный элемент. Нет смысла накладывать на него идентификатор, так как мы уже наложили стиль через его тег.
.link {
...
}Также избегайте этого:
<div>Идентификатор здесь используется надлежащим образом, так как на странице, скорее всего, будет только один правый столбец, но название неуместно. Попробуйте описать контекст элемента, а не то, где он находится или как он выглядит. Идентификатор здесь «боковой панели» будет более подходящим.
Микроформаты требуют специфические названия классов
Думаешь, микроформаты у тебя не укладываются у тебя в голове? Это не так, всё просто! Это просто обычная разметка, использующая стандартизированные имена классов для информации, которую они содержат. Пример стандартной vCard:
<div>
<a href="http://www.commerce.net/">CommerceNet</a>
<div>
<span>Work</span>:
<div>169 University Avenue</div>
<span>Palo Alto</span>,
<abbr title="California">CA</abbr>
<span>94301</span>
<div>USA</div>
</div>
<div>
<span>Work</span> +1-650-289-4040
</div>
<div>
<span>Fax</span> +1-650-289-4041
</div>
<div>Email:
<span>[email protected]</span>
</div>
</div>По материалам: css-tricks.com
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжим наполнять материалами наш Справочник и начнем говорить о такой фундаментальной вещи, как селекторы в языке CSS.
Их существует семь видов — тега, класса (class), Id, универсальный, атрибутов, а так же псевдоклассов и псевдоэлементов. Многовато, не правда ли? Ну, ничего, потихоньку разберем их все и при том на подробных примерах.
В предыдущих публикациях мы уже успели рассмотреть как подключается CSS к Html коду, а так же познакомились с единицами размеров, такими как пиксель, Em и Ex и узнали о принципах наследования в CSS. Ну, а сегодня мы, как я и говорил, открываем очень серьезную главу в изучении языка стилевой разметки.
Селекторы тегов и классов (class) в языке CSS
Прежде, чем изучать стилевые правила, необходимо будет узнать, как и по каким принципам задавать те метки, по которым браузер поймет, к каким же именно элементам Html кода нужно их применять. Селекторы бывают разные. Самые простые, с точки зрения понимания, используют названия тегов, к которым должны будут применяться написанные после них правила языка CSS.
В данном примере для всех тегов абзаца P будет использоваться красный цвет шрифта и серый цвет для заливки фона. У любого CSS правила может быть прописано сразу несколько селекторов. Как нужно их будет читать при этом? Всегда справа налево, т.е. начинать с самого ближнего к открывающей фигурной скобке.
В приведенном примере в первой строчке показан селектор тега (элемента), который предписывает использовать красный цвет шрифта для всех контейнеров Div.
<div> Содержимое обычного контейнера Div </div>
Содержимое обычного контейнера Div
Во второй строчке мы видим пример сложного селектора, в котором у нас появляется такой новый элемент, как класс (class). Он прописывается в качестве атрибута любого тега в Html коде. В качестве значения для class мы можем использовать произвольное имя, используя символы [0-9],[a-z],[A-Z],[_],[-].
Но кроме class в языке стилевой разметки используется еще и Id. Чем отличается класс от Id? Значение последнего должно быть уникальным, т.к. Id является уникальным идентификатором для Html тега и его название (значение) может использоваться в коде только один раз.
А значение для class не является уникальным и может использоваться для сколь угодно большого количества элементов в коде. Т.е. разные теги (Div, P, h2 и т.д) могут иметь одинаковое значение своего атрибута class:
А как он используется в селекторах CSS? Оказывается, что его имя пишется с поставленной впереди точкой.
Поэтому, когда мы видим в CSS коде что-то начинающееся с точки, то сразу понимаем, что речь идет про класс. Если рассматривать пример приведенный на скриншоте, то теперь во всех элементах Html кода, где будет прописан «class» со значение «Blue», текст будет покрашен в синий цвет.
Но это произойдет вовсе не из-за того, что название класса мы выбрали «Blue». Можно было назвать его как угодно (хоть «xyz»), а цвет в нашем примере задается именно CSS правилом «color:blue» приписанным для селектора с этим классом. Надеюсь, это понятно? Давайте поменяем название (значение) class в примере:
<p> Абзац с текстом</p>
Абзац с текстом
Т.е. теперь у нас класс XYZ и прописанное для него правило:
.xyz {color:blue}покрасило текст абзаца в синий цвет. Этот пример еще раз подчеркивает, что название для атрибута class можно использовать любое. Однако, продолжим.
Давайте еще раз посмотрим на примере, как используются селекторы тегов и классов в CSS. Представим, что у нас прописаны следующие стилевые правила:
div {color:red}
div.a123 {color:green}
.xyz {color:blue}А так же представим, что в Html коде у нас присутствуют следующие элементы:
В соответствии с прописанными правилами для указанных селекторов содержимое приведенных элементов Html кода должно будет выглядеть так:
А теперь давайте посмотрим, почему именно так браузер интерпретировал стилевое оформления данных элементов Html кода. Для первого контейнера Div, в котором не прописано никакого class, будет действовать CSS правило применимое для всех контейнеров: div {color:red}. Следовательно, его содержимое будет окрашено в красный цвет. Что и требовалось показать.
В теге второго Div у нас прописан класс «a123». В этом случае будут применяться CSS правила соответствующие «div.a123» (ибо у нас как раз имеется в наличии тег Div с прописанным в нем атрибутом). Поэтому содержимое второго контейнера будет окрашено в зеленый цвет.
Но вы, наверное, заметили, что ко второму Div можно ведь применить и первое CSS правило «div {color:red}», ибо оно предназначено для всех контейнеров без исключения. Получается противоречие, которое решается в CSS путем ввода понятия приоритетов CSS селекторов.
Мы с вами об этом поговорим подробно чуть позже, ну, а сейчас я просто скажу, что приоритет «div.a123» (для второго Div в рассматриваемом примере) будет выше.
Кстати, похожая ситуация возникает и с третьим Div из нашего примера. К нему подходят сразу два варианта: селектор тега «div» и класса «.xyz». Опять же в силу пока не объясненных мною причин (читайте об этом по приведено чуть выше ссылке), приоритет последнего будет выше, поэтому содержимое третьего контейнера будет окрашено в синий цвет.
Давайте двигаться дальше. В приведенном примере у нас дальше идет тег абзаца P, в котором прописан. Получается так, что данный элемент не попадает ни под один из трех прописанных нами селекторов (все три мимо него промахнулись).
У него есть только пересечение со вторым вариантом, однако этот селектор будет использоваться только для тегов «Div» с классом «a123», но никак не для тега абзаца P. В результате цвет текста в этом абзаце останется принятым по умолчанию, т.е. черным.
Дальше в примере у нас следует элемент параграфа с. Для него будет применяться последнее CSS правило «.xyz {color:blue}». Следовательно, текст этого абзаца будет окрашен в синий цвет. Тут, думаю, все понятно.
Универсальный селектор и уникальный идентификатор ID
Теперь давайте перейдем к Id, о которых я уже успел упомянуть. Когда мы в CSS коде видим что то со стоящей впереди решеткой (хешем), то это означает, что мы имеем дело с Id:
Обычно этот селектор пишут без упоминания тега, к которому он относится (первый вариант на приведенном чуть выше примере), хотя второй вариант написания тоже допустим, но употребляется редко. Связано это с тем, что значение атрибута Id в коде будет уникальным, а значит не может быть двух элементов с одинаковыми значениями Id. Т.е. нет смысла уточнять, хотя это не возбраняется.
Поэтому обычно просто пишут хеш (решетку), а сразу за ним значение (название) атрибута Id. Предположим, что у нас прописано следующее правило для Id:
#back {color:red}а в коде имеется следующий фрагмент:
<div> К
Имя тега в селекторе CSS (например, div#id): как оно читается? (Слева направо или справа налево?)
Ладно, я думаю, ты немного запутался.
В вашем примере вы используете:
div table a
Так что я воспользуюсь этим. | | | | | a child | | | parent | grandparent
Это означает, что вы будете стилизовать любой элемент ‘a’, который является дочерним / потомком таблицы, которая, в свою очередь, является потомком элемента div
Итак, в другом вашем примере:
div#div_id
вы бы стилизовали все идентификаторы div_id, в которых есть div в качестве родителя.
BTW глядя на ваш пример, я хотел бы отметить, что (в случае, если вы не знали):
- атрибут id должен быть уникальным
- атрибут
<a>не должен использоваться непосредственно в элементе<table>(вместо этого вложите его в тег th или td) - Если вы хотите стилизовать несколько элементов (разных типов), было бы более эффективно создать класс и использовать его вместо этого
Ваш
div#div_id
В HTML, поскольку идентификатор должен быть уникальным, он будет искать ‘all id’s’ с указанным идентификатором. |
[слово ‘div’ здесь может быть чем угодно]
в моем css я бы написал:
_ this word must match the
/ id i used above
|
#my-div-to-style{
//styling...
}
Если бы я хотел добавить один и тот же стиль к нескольким элементам div (с областью действия, чтобы добавить его к другим), я бы вместо этого использовал класс :
<div>
а потом использовать:
.myDivStyle{
//styling...
}
в этом последнем примере я не буду ограничиваться только стилизацией дивов, поэтому я не буду включать это в свое именование:
<div>
<a>
<table>
.myStyle{
//styling for any element I want
}
HTML тег div
Пример
Раздел
.myDiv {
граница: 5 пикселей начальная красная;
цвет фона: светло-голубой;
выравнивание текста: по центру;
}
Это заголовок в элементе div
Это текст в элементе div.