Рекомендации по написанию CSS
Есть несколько популярных методологий: БЭМ от Яндекса, Атомарный CSS, SMACSS и т.д. Подробнее почитайте в интернете про каждую, у них есть как плюсы так и минусы
Не так важно что вы будете использовать в работе, самое главное придерживаться какому-то одному направлению, а не всего почучуть
От себя бы порекомендовал бы следующее:
1. Не привязывайте стили к родительским блокам, если их потом можно применять в другом месте на сайте. И уж тем более не привязывайте стили к ID без крайней на то необходимости. Категорически плохо писать для каждой отдельной страницы#contact-page li а затем #about-page li и т.д.
2. Не создавайте простыню из стилей в правиле «родитель -> потомок -> кум -> сват -> брат», это никому не нужно. Если вы считаете что указание 1 класса мало, напишите еще 1-2, но не больше.
3. Используйте ТОЛЬКО классы. В некоторых случаях допустимо указывать вложенные теги (например .table-good td). Не используйте стили для ID, или глобальные стили без необходимости.
4. Если вы используете JavaScript или jQuery, и пишите события для этих классов, которые не будут стилизованы (например, active или visible), то пишите классы как js-submit (с приставкой js-), а стили задавайте отдельно. Будет куда понятней, что ссылка a class=»js-submit btn btn-default» содержит стили и js событие.
ID селекторы
Рис. 7 Селектор id в CSS.
Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором.
Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:
#test { /* имя идентификатора в таблице стилей задается через решетку */
background-color: #00FF00; /*Задаём цвет заднего фона*/
color: white; /*Задаём цвет шрифта белый*/
font-size: 30px; /*Указываем размер шрифта*/
width: 600px; /*Указываем ширину элемента*/
height: 40px; /*Указываем высоту элемента*/
text-align: center; /*Выравниваем текст по центру внутри элемента*/
}
После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут id со значением нашего идентификатора, но уже без решетки:
<h2 id = "test">Обычный заголовок второго уровня</h2> <!-- задаем идентификатор для элемента -->
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:
- значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
- все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок).
- используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
- название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
- Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).
Теперь соберем это в одном примере и посмотрим результат:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>ID селекторы</title>
<style>
#test {
background-color: #0F0; /* задаём цвет заднего фона */
color: white; /* задаём цвет текста */
font-size: 30px; /* указываем размер шрифта */
height: 100px; /* указываем высоту элемента */
text-align: center; /* горизонтальное выравнивание текста по центру */
}
</style>
</head>
<body>
<h2 id = "test">Обычный заголовок второго уровня</h2>
</body>
</html>
Результат нашего примера:
Рис. 7а Пример использования id селектора.
В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.
Стили маркеров (цифр). Свойство list-style-type
И для маркированных, и для нумерованных списков внешний вид маркеров или цифр определяет свойство list-style-type. Оно имеет следующие значения:
Для маркированных списков:
- disc — темная точка (значение по умолчанию)
- circle — кружок
- square — в виде темного квадрата
Для нумерованных списков:
- desimal — 1, 2, 3 … — арабские цифры (значение по умолчанию);
- decimal-leading-zero — 01, 01, 03 — арабские цифры с ведущим нулем в первой десятке;
- lower-alpha, lower-latin — строчные (маленькие) латинские буквы.
- upper-alpha, upper-latin — прописные (большие) латинские буквы;
- lower-roman — строчные римские цифры;
- upper-roman — прописные римские цифры;
- lower-greek — строчные греческие буквы;
- upper-greek — прописные греческие буквы;
- armenian — армянская нумерация;
- georgian — грузинская нумерация.
Посмотреть на варианты отображения различных маркеров можно ниже. Хотя в примере и используется список ol, но маркеры с помощью кнопок могут назначаться, как и для ul. В реальной практике этого следует избегать.
- Элемент списка 1
- Элемент списка 2
- Элемент списка 3
- Элемент списка 4
- Элемент списка 5
- Элемент списка 6
- Элемент списка 7
- Элемент списка 8
- Элемент списка 9
- Элемент списка 10
disc
circle
square
decimal
decimal-leading-zero
lower-alpha
upper-alpha
lower-latin
upper-latin
lower-roman
upper-roman
georgian
armenian
:dir (эксперимент)
ПК :dir нацелен на элемент, направление которого указывается в документе. Другими словами для того чтобы ПК :dir работал в разметке у соответствующего html-элемента должен быть установлен атрибут dir.
В настоящий момент доступны два значения для направления: ltr (слева направо) и rtl (справа налево).
На момент написания статьи только Firefox (с вендорным префиксом -moz-dir()) поддерживает ПК :dir. Очень похоже, что скоро это изменится. Поэтому в примере показаны оба варианта — с префиксом и без.
Заметка: Объединение в одном правиле версии с префиксом и без работать не будет. Нужно создать два отдельных правила.
Пример: параграф написан на арабском языке (направление текста справа налево). Текст будет оранжевого цвета.
HTML:
<article dir="rtl"> <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p></article>
CSS:
/* prefixed */article :-moz-dir(rtl) { color: orange;}/* unprefixed */article :dir(rtl) { color: orange;}
Параграф ниже написан на английском (слева направо). Текст будет синим.
HTML:
<article dir="ltr"> <p>If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p></article>
CSS:
/* prefixed */article :-moz-dir(ltr) { color: blue;}/* unprefixed */article :dir(ltr) { color: blue;}
Demo:
Свойство list-style-position
Определяет позицию маркера. Бывает:
- outside -маркер расположен снаружи текста (значение по умолчанию);
- inside — маркер встроен внутрьтекста и обтекается им;
- inherit — свойство наследуется от родителя (как правило, во вложенных списках).
Как правило, если используют это свойство, то со значением inside, т.к. значение outside применяется по умолчанию, а inherit используется очень редко.
Пример с использование list-style-position: inside:
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore impedit aliquam dolores tempora nisi sapiente, dolorem nihil, harum consequuntur porro ab in eveniet aspernatur esse!
- Harum modi architecto perferendis officiis labore voluptate eveniet aut alias minima excepturi quaerat quod atque eum dolorem, unde porro sit deserunt dolor dolorum expedita, veniam.
- Reprehenderit ullam saepe recusandae corporis dignissimos impedit voluptates suscipit delectus, facilis officia quisquam perspiciatis, excepturi autem! Dolor non tempora sint facilis labore autem harum quisquam.
- Dicta ducimus, pariatur, magni molestiae temporibus excepturi dignissimos dolores repudiandae soluta quos, voluptate laborum. Ullam nemo, cum corporis dignissimos, fugit similique omnis placeat assumenda modi?
Фрагменты URL-адресов
Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:
Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код
Обратите внимание, что можно полностью опустить URL-адрес, если он указывает на другой раздел той же веб-страницы:
<!-- С той же страницы --> <a href='#button-2'>Go to Button Two</a> <!-- С другой страницы --> <a href='selectors.html#button-2'>Go to Button Two</a>
Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:
Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS. Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов, так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес, то сломаете свой сайт.
Дивы контейнеров
Помните, что <div> не изменяет семантическую структуру страницы. Это делает его отличным инструментом для определения представляемой структуры веб-страницы. Обертывая HTML-элементы в теги <div>, можно создать сайт с помощью более крупных фрагментов, не влияя на то, как поисковые системы просматривают наш контент:
Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:
<body>
<div class='page'> <!-- Добавьте это -->
<h1> Селекторы CSS</h1>
<p class='synopsis'>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
Это <strong>супер</strong> полезно.</p>
<p>Классы чрезвычайно важны,, так как они позволяют выбрать
произвольные блоки на странице.</p>
<p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
<a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
<div>Кнопка Один</div>
</div> <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
width: 600px;
margin: 0 auto;
}
Независимо от того, как будет изменяться размер окна браузера, веб-страница всегда будет иметь ширину 600 пикселей и выравниваться горизонтально по центру доступного пространства
Обратите внимание, что то же самое мы раньше делали для кнопки, но теперь мы делаем это с несколькими элементами одновременно, вложив их в общий контейнер:
Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.
Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы <div>, ничего из этого не было бы возможно.
Тег для начала фразы HTML с новой строки
Для размещения текста в HTML с новой строки мы можем использовать специализированный HTML-тег , который имеет следующий синтаксис:
PHP
<p class=»br-ex»>Текст с разрывом<br> строки после тега</p>
| 1 | <pclass=»br-ex»>Текстсразрывом<br>строкипослетега<p> |
Ключевой особенностью использования тега <br> при переносе текста HTML с новой строки является то, что в данном случае для каждой новой строки не добавляются верхний и нижний отступы, как это происходит с тегом <p>.
Пример использования:
PHP
<p class=»br-ex»>
Если вам необходимо разместить<br> контент в узком блоке, вы можете<br> воспользоваться переносом для размещения<br>текста HTML с новой строки.
</p>
|
1 |
<pclass=»br-ex»> Есливамнеобходиморазместить<br>контентвузкомблоке,выможете<br>воспользоватьсяпереносомдляразмещения<br>текстаHTMLсновойстроки. <p> |
Результат:
Если вам необходимо разместить текст в узком блоке, вы можете воспользоваться переносом дляразмещения текста HTML с новой строки.
То есть, по сути, хоть мы и имеем несколько отдельных строк, но все они являются элементами одного тега <p>, и соответственно, верхний и нижний отступы применяются один раз.
Селектор по классу
Любому тэгу можно установить атрибут class. Смысл этого атрибута примерно
такй же, как у id. Но один и тот же класс может быть
у любого количества элементов страницы. И всем этим элементам можно установить определённый стиль.
Для указания селектора по классу ставится точка, затем без пробела значение атрибута
class.
Для примера добавим на страницу список и зададим пунктам списка атрибут class:
| 212223 |
<ol> <li class="ls">Стиль по классу</li> <li class="ls">Стиль по классу</li></ol> |
Теперь добавим внутрь тэга <style> такие строки:
| 16171819 |
.ls
{
color: Blue;
}
|
Список должен отображаться синим цветом.
Один и тот же класс может быть у разных тегов. При этом, можно указать стиль не всем элементам
класса, а только определённым тэгам. Для этого пишется сначала тэг, затем без пробела точка и класс.
Такой селектор будет выглядеть так:
| 16171819 |
li.ls
{
color: Blue;
}
|
Определённый элемент может относиться одновременно к нескольким классам. Для этого в атрибуте
class все классы перечисляются через пробел. Пример:
| 28 |
<p class="registration inform">Текст</p> |
Этот элемент будет относиться к двум классам. При этом, к нему будут применены и свойства класса
registration, и свойства класса inform.
Какие в HTML5 появились новые элементы семантической разметки?
Большинство современных сайтов, в том числе тех, которые делаются в онлайн-конструкторах, содержат подобный код: <div id = «nav»>, <div id = «footer»>, <div class = «header»>. Это указание расположения навигации сайта, заголовка («шапки») и нижнего колонтитула («подвала»). Однако теперь у пятой версии HTML есть новая спецификация. Многие разработчики называют подобную разметку «дивным синдромом», так как она содержит просто неприличное количество тегов div, что затрудняет чтение кода. А как известно, чем труднее читать код, тем сложнее его исправить.
На данный момент в пятой версии HTML есть другие элементы семантической разметки, позволяющие расположить части веб-документа в нужном месте:
- <article> (статья);
- <aside> (боковая часть);
- <details> (подробности);
- <figcaption> (alt картинки);
- <figure> (картинка);
- <footer> ( подвал);
- <header> (шапка);
- <main> (основная часть страницы);
- <mark> (отметка);
- <nav> (панель навигации);
- <section> (раздел);
- <summary> (выводы);
- <time> (время).
До того, как появился стандарт пятой версии HTML, главным инструментом разметки был тег <div>, присваивающий классы и id, чтобы сделать код разметки более простым для прочтения (к примеру , <div id=»footer»>). Таким способом в HTML-странице помечали шапку и подвал (нижний и верхний колонтитул), панели, находящиеся сбоку, панель навигации и все остальные части документа.
Сейчас же в HTML присутствуют новые элементы для семантической разметки, позволяющие структурировать, группировать содержимое, и размечать текст статей. Теги, приведенные выше, дали возможность сделать структуру документа более понятной, избавив от необходимости постоянно вставлять тег div (div id=» article «> превратилось просто в < article >), логически разделяя содержание HTML-страницы. Как эти элементы будут выглядеть внешне – дело разработчиков и дизайнеров. Правил тут нет никаких. Есть только глобальные переменные:
- мета-контент;
- потоковый контент;
- секционный контент;
- заголовочный контент;
- контент в виде текста;
- встроенный контент;
- интерактивный контент.
Глобальные переменные – атрибуты, которые доступны всем элементам кода. Использовать их могут все элементы, но не все на них влияют.
Получение доступа к видимому тексту в JQuery
На этот раз я буду использовать JQuery, чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value. В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML:
Посмотреть онлайн демо-версию и код
В коде для каждого варианта в теге <select> значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега <select> следующий:
<select id="jqueryselect"> <option value="MAR">Maroon</option> <option value="GRE">Green</option> <option value="YEL">Yellow</option> <option value="BLU">Blue</option> <option value="RED">Red</option> </select>
Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript:
var selectedcolor = $('#jqueryselect option:selected').text();
Также можно получить доступ к значению с помощью JQuery-метода $.val():
var selectedcolor = $('#jqueryselect').val();
Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value, а не видимый текст.
Атрибуты¶
| Атрибут | Значение | Описание |
|---|---|---|
| type | 1AaIidiscsquarecircle | Определяет тип маркера нумерованного или маркированного списка. Атрибут больше не используется. Вместо него мы рекомендуем использовать CSS свойство list-style-type или list-style-image, с помощью которого вместо маркеров можно использовать изображения. |
| value | number | Указывает число, с которого будет начинаться нумерованный список. Могут быть использованы отрицательные значения. Работает только с нумерованным списком. |
Тег <li> поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <li> ?
Цвет текста внутри тега <li>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <li>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <li>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Стили кнопок
Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:
.button:link, /* Измените это */
.button:visited { /* Измените это */
display: block; /* Добавьте это */
text-decoration: none; /* Добавьте это */
color: #FFF; /* Все остальное остается без изменений */
background-color: #5995DA;
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063;
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы
Теперь оформим состояние при наведении курсора.
.button:hover,
.button:visited:hover {
color: #FFF;
background-color: #76AEED; /* Light blue */
}
Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active:
.button:active,
.button:visited:active {
color: #FFF;
background-color: #5995DA; /* Blue */
}
Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.
Когда используется class, а когда id?
ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.
Также следует учитывать, что у HTML-элемента может быть указан и id, и class. Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с разным позиционированием. В таком случае можно применить один и тот же класс к этим блокам для изменения размеров и стилизации, а затем использовать отдельный ID-селектор к каждому блоку, чтобы задать им разное позиционирование.
Элементы также можно привязывать одновременно к нескольким классам. Это очень удобно, когда нужно применить стилизацию к отдельной группе элементов определенного типа. Например, имеется класс .content, который применен ко всем абзацам. Если нужно будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно сделать это при помощи дополнительного CSS p class .bordered:
<p class="content">Этот пункт не имеет границ.</p> <p class="content bordered">Этот пункт имеет границы.</p>
Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода:
.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 }
Важно правильно применять id и CSS class, так как их неправильное использование может привести к ошибкам в отображении HTML-кода. Пожалуйста, оставьте свои мнения по текущей теме статьи
Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!
Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!
Валентин Сейидовавтор-переводчик статьи «CSS Class vs ID: Which One to Use»
Стилизация элемента details
Последнее обновление: 14.07.2021
Рассмотрим некоторые возможности по стилизации элемента details, который представляет раскрываемый блок.
Атрибут open
Прежде всего в раскрытом состоянии к элементу details добавляется атрибут open. Соответственно, используя
атрибут, можно задать разные стили для элемента в скрытом и раскрытом состоянии. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
details > summary {
padding: 5px;
background-color: #eee;
color: #333;
border: 1px #ccc solid;
cursor: pointer;
}
details > div {
border: 1px #ccc solid;
padding: 10px;
}
details > summary {
color:#eee;
background-color:#333;
}
</style>
</head>
<body>
<details>
<summary>Князь Андрей и Пьер в Богучарово</summary>
<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом
стояли две пожарные трубы и бочка, выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами.
На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>
С помощью селектора мы можем обратиться к элементу в раскрытом состоянии. Соответственно селектор
details > summary {
color:#eee;
background-color:#333;
}
Позволяет задать стили для элемента summary в раскрытом состоянии. То есть в данном случае при раскрытии элемента details мы переключаем
цвет стиля и фона заголовка.
Настройка маркера
По умолчанию элемент summary в качестве маркера скрытости/раскрытости использует символ треугольника. Но его также можно настроить.
Для настройки изображения маркера можно использовать свойство list-style, а также дополнительные свойства типа
list-style-type или list-style-image, которые применяются для стилизации списков.
Например, если необходимо убрать этот маркер, то можно применить стиль :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
details > summary {
padding: 5px;
background-color: #eee;
color: #333;
border: 1px #ccc solid;
cursor: pointer;
list-style: none;
}
details > div {
border: 1px #ccc solid;
padding: 10px;
}
details > summary {
color:#eee;
background-color:#333;
}
</style>
</head>
<body>
<details>
<summary>Князь Андрей и Пьер в Богучарово</summary>
<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка,
выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>
Другой пример — примение стиля :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
details > summary {
padding: 5px;
background-color: #eee;
color: #333;
border: 1px #ccc solid;
cursor: pointer;
list-style-type: disc; /* задаем маркер*/
}
details > div {
border: 1px #ccc solid;
padding: 10px;
}
details > summary {
color:#eee;
background-color:#333;
}
</style>
</head>
<body>
<details>
<summary>Князь Андрей и Пьер в Богучарово</summary>
<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка,
выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>
Настройка с помощью свойства content
Но естественно свойством мы не ограничены и по своему усмотрению можем более тонко управлять заголовком, например, с помощью свойства content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
details > summary {
padding: 5px;
background-color: #eee;
color: #333;
border: 1px #ccc solid;
cursor: pointer;
list-style: none;
}
details > div {
border: 1px #ccc solid;
padding: 10px;
}
details > summary {
color:#eee;
background-color:#333;
}
summary:before {
content: "+";
font-size: 20px;
font-weight: bold;
margin: -5px 5px 0 0;
}
details summary:before {
content: "-";
}
</style>
</head>
<body>
<details>
<summary>Князь Андрей и Пьер в Богучарово</summary>
<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка,
выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>
В данном случае с помощью селектора устанавливаем содержимое, которое будет располагаться перед основным содержимым элемента .
Селектор позволяет сделать то же самое, только в раскрытом виде. В итоге в скрытом виде маркер будет отображать символ +, а в раскрытом —
символ -.
НазадВперед
5 последних уроков рубрики «HTML и DHTML»
-
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
-
Парочка бесплатных шаблонов панелей администрирования.
-
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
-
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
:lang
ПК :lang соответствует языку элемента, который определен комбинацией атрибута lang=””, определенного meta элемента и информации из заголовка полученного по протоколу HTTP.
Html-атрибут lang=”” обычно используется в теге html, но так же может быть и у другого тега, если это необходимо.
В сопроводительном примечании написано, что считается хорошим тоном указывать в CSS-свойстве quotes какие кавычки должны быть установлены в документе. Тем не менее большинство браузеров (включая IE9 и выше) способны добавлять правильные кавычки автоматически, если они не объявлены явно в CSS.
В разных ситуациях этот механизм может срабатывать правильно или неправильно. Поскольку есть различия между кавычками, которые ставятся автоматически при помощи внутренних механизмов браузера. Предпочтительно использование правила для кавычек в CSS.
Пример: кавычки в немецком (de), установленные браузером, выглядят следующим образом:
Тем не менее в большинстве примеров, найденых в сети, кавычки установлены при помощи CSS и выглядят так (что соответствует правильному варианту в немецком языке):
Оба варианта фактически верны. Поэтому вы должны решить для себя позволить ли браузеру автоматически ставить кавычки или добавить их самостоятельно при помощи псевдоэлемента :lang и css-свойства quotes.
Давайте определим стиль кавычек через CSS.
HTML:
<article lang="en"> <q>Lorem ipsum dolor sit amet.</q></article><article lang="fr"> <q>Lorem ipsum dolor sit amet.</q></article><article lang="de"> <q>Lorem ipsum dolor sit amet.</q></article>
CSS:
:lang(en) q { quotes: '“' '”'; }:lang(fr) q { quotes: '«' '»'; }:lang(de) q { quotes: '»' '«'; }
Demo:
