Содержание
Теги sub и sup, нижний и верхний индексы — Разметка текста — HTML Academy
HTML
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Сайт начинающего верстальщика</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<header>
<p>Блог</p>
<nav>
На главную
</nav>
</header>
<main>
<article>
<h2>День восьмой. Очень серьёзный</h2>
<p>Что я узнал! В программе тренинга Кекса для начинающих котят появился новый мастер-класс — «Как не провалиться под снег». А мне поручили сверстать небольшой методический материал.</p>
<p>Давление на поверхность рассчитывается по такой формуле: p = m * g / S.</p>
<!— Выполняйте первую задачу в следующем абзаце —>
<p>Дано: p1 = 1635Па</p>
<!— Выполняйте вторую задачу в следующем абзаце —>
<p>Вычисляем: p2 = m2 * g / S = 9кг * 9.81Н / 0.03м2 = 2942Па</p>
<p>где:<br>
p1 — давление лапки на снег до новогодних каникул,<br>
p2 — давление лапки после праздников,<br>
m2 — масса кота после праздников,<br>
S — площадь снежной поверхности,<br>
g — ускорение свободного падения.</p>
<p>Максимальное давление, которое выдерживает первый наст — 2000 Па.</p>
<p>Трудно быть котом.</p>
</article>
<aside>
Тут могла быть ваша реклама
</aside>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>
CSS
body {
padding: 0 30px;
font-size: 14px;
line-height: 22px;
font-family: «Georgia», serif;
color: #222222;
}
h2 {
font-size: 20px;
line-height: normal;
}
nav {
color: #888888;
}
aside {
margin: 20px 0;
color: #c4c4c4;
}
Стили для верхнего и нижнего индекса в CSS
Наверное, почти все знают про теги SUP и SUB. Довольно подробное описание можно найти в статье английской википедии.
Основная проблема в стандартной реализации отображения этих тегов — изменение высоты строки за счёт того, что текст в этих тегах выравнивается свойством CSS vertical-align. Это изменение варьируется от браузера к браузеру, но, кроме того, везде различаются как размеры шрифта для таких элементов, так и сами отступы. Об этой проблеме многие знают и, чаще всего, предлагают два решения: уменьшение высоты строки этих элементов, и их относительное позиционирования.
Для себя я решил это делать так:
SUP, SUB {
vertical-align: baseline;
position: relative;
font-size: .7em;
line-height: 1;
}
SUP {
bottom: 1.4ex;
}
SUB {
top: .5ex;
}
Как видно из кода, я «обнулил» вертикальное вырванивание, воспользовался относительным позиционированием, а также уменьшил высоту строки. Кроме того, можно обратить внимание на величины отступов: я их задал в ex, т.к. по логике и по имеющимся описаниям (например, в уже упомянутой статье английской википедии) этот отступ должен быть основан именно на этой относительной единице, основанной на высоте шрифты, нежели на ширине. Вообще, это достаточно общее определение, в идеале можно использовать различные классы для цифровых значений в индексах, для случаев когда есть только прописные или только строчные буквы и пр. Однако, это уже требует вмешательств в разметку, и к CSS уже не имеет отношения.
Примеры как исправленных тегов, так и не исправленных
Стоит упомянуть, что в некоторых случаях всё-таки может иметь смысл задавать отступ для индексов, увеличивающий высоту строки, скажем, когда у нас есть большая вложенность индексов или ешё что-то, за счёт чего они могут попасть на другие строки. Правда, чаще всего про это можно забыть.
Опубликовано
с метками: #Practical #CSS #Outdated
CSS hover sub div изменение цвета фона
У меня есть этот Fiddle, и то, что я пытаюсь сделать, — это когда вы наводите курсор мыши на каждый раздел div, он меняет только фон для этого раздела. Есть ли какой-нибудь способ сделать это, не меняя фон для всего? Когда я наведу курсор мыши на .two, .one:hover будет уволен. как я могу заставить его стрелять .two , а не .one , когда я наведу курсор мыши на .two ?
CSS:
div.one:hover, div.two:hover, div.three:hover{
background-color: #69aeea;
}
HTML:
<div>
Text 1
<div>
Text 2
<div>Text 3</div>
<div>Text 3</div>
<div>Text 3</div>
</div>
<div>
Text 2
<div>Text 3</div>
<div>Text 3</div>
<div>Text 3</div>
</div>
</div>
html
css
Поделиться
Источник
Get Off My Lawn
20 ноября 2013 в 22:20
2 ответа
- CSS валидность цвета фона
Я добавляю div динамически и добавляю цвета фона к этим дивам. Значения цвета фона поступают из бэкэнда, поэтому для каждого цвета добавляется один div , и его цвет фона устанавливается на этот цвет. Но если появляется какой-то цвет, который не является допустимым для свойства CSS background…
- Динамическое изменение цвета фона datatables для всех строк
Я реализовал datatables в таблице, в которой некоторые строки должны иметь другой цвет фона, чем другие, идентифицируемые классом CSS . Я хочу изменить цвет фона строки всякий раз, когда указатель наведен на нее. Для этого я использую следующий код. $(document).ready(function () { oTable =…
1
:hover запускается вплоть до корневого родителя (обычно <body> ), поэтому вы не можете запустить его только на дочернем элементе, когда у вас есть состояния :hover на родительском.
Что вам нужно сделать, так это изолировать части, которые вы действительно хотите показать в состоянии наведения, что в данном случае я сделал, обернув текст в <span> . Это позволит сохранить состояние :hover изолированным от других потомков этого родителя.
<div>
<span>Text 1</span>
<div>
<span>Text 2</span>
<div><span>Text 3</span></div>
...
Затем цель конкретно в CSS: (символ > выбирает прямого потомка родителя)
div > span:hover {
background-color: #69aeea;
}
Затем вы можете делать разные цвета в зависимости от уровня, например:
div.one > span:hover {
background-color: #69aeea;
}
div.two > span:hover {
background-color: #ae69ea;
}
div.three > span:hover {
background-color: #aeea69;
}
DEMO: http://jsfiddle.net/shshaw/8uetm /
Поделиться
shshaw
20 ноября 2013 в 22:30
0
К сожалению, вы не можете получить доступ к родительскому элементу в CSS. Это означает, что если вы наведете курсор мыши на дочерний элемент, вы не сможете установить фон его родителя. Вам придется использовать javascript, чтобы достичь того, о чем вы просите.
Поделиться
MattDiamant
20 ноября 2013 в 22:30
Похожие вопросы:
CSS приоритет цвета фона
Я меняю цвета строк таблицы при наведении курсора с помощью jQuery и заметил, что в следующих случаях я получаю разные результаты. CSS выглядит следующим образом: .normalcolor { background-color:…
CSS hover selector for background-color не работает после динамического изменения цвета фона с jquery
Я динамически изменяю цвет фона div с помощью метода jquery .css() . Я также хочу иметь селектор CSS hover на том же div, который меняет цвет фона. Кажется, что до изменения цвета с помощью jquery…
Изменение цвета фона раздела <div>
Я пытаюсь использовать jQuery для изменения цвета фона раздела <div> при нажатии на кнопку, и ниже приведен код для этого. Почему это не работает? HTML файл <html> <head>…
CSS валидность цвета фона
Я добавляю div динамически и добавляю цвета фона к этим дивам. Значения цвета фона поступают из бэкэнда, поэтому для каждого цвета добавляется один div , и его цвет фона устанавливается на этот…
Динамическое изменение цвета фона datatables для всех строк
Я реализовал datatables в таблице, в которой некоторые строки должны иметь другой цвет фона, чем другие, идентифицируемые классом CSS . Я хочу изменить цвет фона строки всякий раз, когда указатель…
CSS изменение фона при наведении курсора
Решена благодаря LINK ЕЛИЕЛ по То, что я хочу сделать, это изменить фон тела во время зависания на div, но я не могу получить это, то, что я получаю, — это изменение фона div . У меня есть цвет на…
CSS изменение цвета фона с переходом
моя страница имеет три цвета фона, которые меняются в зависимости от того, что отображает div (на самом деле это просто слово). Цвета действительно меняются прямо сейчас, но переход не такой…
Настройка родительского цвета фона div / изображения при наведении курсора (jQuery)
У меня возникают проблемы с изменением фона родительского div при наведении курсора на определенные дочерние элементы. Я пытаюсь использовать первый дочерний div ‘.pro1’ , чтобы изменить цвет фона…
установите hover для класса div с помощью javascript
У меня есть html, который выглядит так: <div class=optionClass>Option 1</div> <div class=optionClass>Option 2</div> <div class=optionClass>Option 3</div> То, что…
Изменение цвета текста и фона CSS / HTML
Я использую этот класс для изменения цвета фона и текста, который отлично работает. #cellType1 { width: 10%; height: 83px; vertical-align: middle; background-image: url(Index.html) }…
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<link href=»css/dropdown-menu.css» media=»screen» rel=»stylesheet» type=»text/css» />
</head>
<body>
<br />
<ul> | #navigation { padding-right: 22px; |
Верстаем полноценную веб страничку с помощью HTML и CSS
На прошлом уроке мы приблизились к созданию веб страницы. В этом уроке мы добавим немного анимации, наполним страницу контентом и посмотрим что из этого выйдет
Сделаем шапку чучуть красивее
<img src="http://inddc.in/webroot/assets/img/sample/shortcode/logo/1.png" alt="image-name">
Чтобы не заморачиваться с лого, я просто взял первую попавшуюся картинку с гугл, скопировал ссылку и вставил в наш код.
Картинка слишком большая для нашего дизайна, по этому я задал ей максимальную ширину
header .logo img{
max-width: 150px;
}
Дальше идут менюшки, я хочу чтобы у них был задний фон при наведении курсора, а так же выпадающий список.
Добавим наш выпадающий список в html
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a>
<ul>
<li><a href="">About 1</a></li>
<li><a href="">About 2</a></li>
<li><a href="">About 3</a></li>
</ul>
</li>
<li><a href="">Contacts</a></li>
</ul>
</nav>
Мы добавили под под ссылку About us, еще один список. Для начало сделаем его невидимым
header .sub-menu{
display: none;
}
Сделаем текст в меню черного цвета, поставим отступы, чтобы все было по центру и добавим анимацию при наведении
header nav li a{
padding: 14px 5px;
display: block;
color: #000;
text-decoration: none;
transition: 0.3s;
}
header nav li a:hover{
background-color: #f3f3f3;
}
Новые для вас стили это text-decoration:none; , что означает, убрать нижнее подчеркивание у ссылок
transition: 0.3s; — Если у этого блока будет значение :hover (наведение курсора) и предположим при наведении мы меняем цвет, то цвет будет менятся не мгновенно, а в течении 0.3с, т.е. плавно
header nav li a:hover — если курсор неведен на этот блок
header{
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
header:after{
content: '';
overflow: hidden;
display: block;
width: 100%;
}
header .sub-menu{
display: none;
padding: 0;
left: 0;
top: 46px;
background-color: #f3f3f3;
position: absolute;
}
header .sub-menu li{
border-bottom: 1px solid #ccc;
width: 100%;
padding: 0;
}
header nav li{
display: inline-block;
padding-right: 10px;
position: relative;
}
header nav li:hover .sub-menu{
display: block;
}
Мы добавили достаточно много стилей, для того чтобы работал наш выпадающий список
Первое, что мы сделали, это убрали overflow:hidden; с header, т.к. выпадающий список будет выходить за границы нашего блока
header:after — Позволяет добавлять контент, после (after) или до (before). Я его добавил для того, чтобы не расплывали блоки, которые идут после header и добавил overflow:hidden уже в него и растянул на всю ширину
header:after{
content: '';
overflow: hidden;
display: block;
width: 100%;
}
header .sub-menu — Я выставил выпадающий список в определенное место следующим способом:
- position: absolute; — Этот блок будет как бы болтаться внутри блока, у которого есть стиль position: relative; .Таким блокам можно задавать позицию стилями left, right, top, bottom
- left: 0 — блок прижмется к левому краю родителя
- top: 46px — отодвинем блок сверху от родителя на 46px
header .sub-menu{
display: none;
padding: 0;
left: 0;
top: 46px;
background-color: #f3f3f3;
position: absolute;
}
Дальше список мы рястягиваем на всю ширину и под каждой строчкой ставим подчеркивание
header .sub-menu li{
border-bottom: 1px solid #ccc;
width: 100%;
padding: 0;
}
Задали родительскому списку position: relative;
header nav li{
position: relative;
}
И последнее, что надо сделать, это сделать выпадающий список видимым при наведении курсора
header nav li:hover .sub-menu{
display: block;
}
Добавим конент на страницу
<section>
<h4>Hello world</h4>
<img src="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg" alt="my-photo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu dignissim eros. Proin mollis suscipit tortor faucibus commodo. Aenean convallis diam in nisi elementum consectetur. Sed nisi leo, mollis quis nisi nec, consectetur molestie risus. Fusce mauris nunc, dapibus a dui in, commodo rhoncus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis mollis nisl condimentum tellus iaculis, eu bibendum ex fringilla. Duis nunc sapien, hendrerit quis imperdiet a, mattis in elit. Curabitur sit amet neque a nibh elementum hendrerit eu quis est. Duis ut luctus velit.</p>
</section>
Добавили картинку и увеличили объем текста. Осталось добавить чучуть стилей
section h4{
font-size: 35px;
text-align: center;
text-transform: uppercase;
}
section p {
font-size: 20px;
}
section img{
max-width: 100%;
}
Поставили заголовок по центру и все буквы заглавные.
Если размер картинки больше, чем ширина сайта, то она будет вылезать за края, чтобы этого не произошло, нужно задать стиль max-width: 100%;
В итоге должно получиться следующее:
По этому же принцыпу создаются остальные страницы, соединяются вместе и получается сайт. Это грубо говоря. На практике, никто не делает сайт, на голом html, для этого используются готовые структуры, фрэймворки и прочие инструменты. Это мы будем изучать в следющих уроках
На данный момент, вам должно хватать знаний для старта. Сейчас нужно много практики, пробовать верстать разные странички, баннеры, блоки и прочее.
Весь код можно посмотреть вот ТУТ
Надеюсь урок был полезен!
грамотная навигация сайта с помощью стилей
От автора: реализация выпадающего меня с помощью HTML и CSS, обеспечение необходимого уровня доступности навигации, фокусировка пунктов, поддержка браузерами — об этом в статье.
CSS становится все более мощным, и с помощью таких функций, как CSS-сетка и пользовательские свойства (также называемые переменные CSS), мы можем реализовать многие действительно креативные решения. Некоторые из этих решений имеют своей целью не только сделать Интернет красивее, но и сделать его более доступным, и улучшить опыт создания доступных стилей. Я определенно придерживаюсь этой точки зрения!
Общий шаблон пользовательского интерфейса, который мы видим в Интернете, — это выпадающие меню. Они используются для более детального отображения связанной информации, не нагромождая большого количества кнопок, текста и параметров. Чаще всего они используются для областей заголовка и навигации сайта.
Поиск в Google по запросу «выпадающее меню» предоставляет много примеров
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Давайте посмотрим, можем ли мы создать одно из этих меню с помощью только CSS. Мы создадим список ссылок внутри компонента навигации следующим образом например:
<nav role=»navigation»>
<ul>
<li><a href=»#»>One</a></li>
<li><a href=»#»>Two</a></li>
<li><a href=»#»>Three</a></li>
</ul>
</nav>
<nav role=»navigation»> <ul> <li><a href=»#»>One</a></li> <li><a href=»#»>Two</a></li> <li><a href=»#»>Three</a></li> </ul> </nav> |
Теперь, предположим, мы хотим создать выпадающее подменю во втором элементе навигации. Мы можем сделать то же самое и включить список ссылок в этом элементе списка:
<nav role=»navigation»>
<ul>
<li><a href=»#»>One</a></li>
<li><a href=»#»>Two</a>
<ul>
<li><a href=»#»>Sub-1</a></li>
<li><a href=»#»>Sub-2</a></li>
<li><a href=»#»>Sub-3</a></li>
</ul>
</li>
<li><a href=»#»>Three</a></li>
</ul>
</nav>
<nav role=»navigation»> <ul> <li><a href=»#»>One</a></li> <li><a href=»#»>Two</a> <ul> <li><a href=»#»>Sub-1</a></li> <li><a href=»#»>Sub-2</a></li> <li><a href=»#»>Sub-3</a></li> </ul> </li> <li><a href=»#»>Three</a></li> </ul> </nav> |
Теперь у нас есть двухуровневая система навигации. Чтобы содержимое было скрыто и отображалось, когда мы хотим, нам нужно применить некоторый CSS. Все свойства стилей для ясности взаимодействия были удалены из следующего примера:
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | li { display: block; transition-duration: 0.5s; }
li:hover { cursor: pointer; }
ul li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; }
ul li:hover > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; }
ul li ul li { clear: both; width: 100%; } |
Теперь выпадающее подменю скрыто, но будет отображаться, когда мы наводим курсор мыши на связанный родительский элемент в панели навигации. Определив стили для ul li ul мы обеспечили доступ к этому подменю, а через стили ul li ul li у нас есть доступ к отдельным элементам списка в нем.
Проблема
Все уже начинает выглядеть так, как нам нужно, но на данный момент мы еще далеки от завершения. Доступность в Интернете — это основная часть развития вашего продукта, и как раз сейчас вам предоставляется прекрасная возможность обеспечить ее. Добавление role=»navigation» — это хорошее начало, но для того, чтобы панель навигации была доступной, нужно обеспечить возможность перемещать по ней (и выделять фокусом соответствующий элемент), а также чтобы экранный диктор точно считывал вслух то, что сейчас выделено фокусом.
Вы можете навести курсор на любой из элементов списка и четко увидеть, который из них выделен фокусом, но это не так при перемещении по навигации через клавишу табуляции. Попытайтесь сделать это в приведенном выше примере. Вы теряете возможность визуально отслеживать, где сейчас фокус. Когда вы выделяете фокусом элемент Two в главном меню, вы можете видеть, где сейчас находится фокус, но когда вы переходите через клавишу табуляции к следующему элементу (одному из пунктов подменю), этот фокус исчезает.
Теперь важно отметить, что теоретически вы выделили фокусом элемент подменю, и программа чтения с экрана сможет проанализировать это, считав Sub-One, но пользователи клавиатуры не смогут определить, что сейчас происходит.
Причина заключается в том, что, хотя мы настраиваем состояние наведения указателя для родительского элемента, когда мы переходим от родительского элемента к одному из элементов списка внутри него, мы теряем этот стиль. Это логично с точки зрения CSS, но это не то, что нам нужно.
К счастью, у нас есть новый псевдо-класс CSS, который даст нам именно то, что нам нужно в этом случае, и он называется :focus-within.
Решение: «:focus-inside»
Псевдо-селектор :focus-within является частью CSS Selectors Level 4 Spec и указывает браузеру применить стиль к родительскому объекту, когда какой-либо из его дочерних элементов выделен фокусом. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within, а также стиль :hover для родительского элемента и увидеть, где именно находится выпадающий список навигации. В нашем случае это будет ul li:focus-within > ul:
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } |
Замечательно! Это работает!
Теперь, когда мы перемещаем фокус ко второму элементу, наше подменю всплывает, и, когда мы входим в подменю, оно остается видимым! Теперь мы можем добавить наш код, чтобы включить: состояния :focus весте с состоянием :hover, чтобы предоставить пользователям клавиатуры тот же опыт, что получают пользователи мыши.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
В большинстве случаев, например, для прямых ссылок, мы можем просто написать что-то вроде этого:
a:hover,
a:focus {
…
}
a:hover, a:focus { … } |
Но в данном случае, поскольку мы применяем стили hover на основе родительского li, мы можем снова использовать :focus-within, чтобы получить тот же вид, что и при переходе с помощью табуляцию. Это связано с тем, что мы не можем выделить фокусом li (если не добавим tabindex=«0»). Мы фактически выделяем фокусом ссылку (а) внутри него. :focus-within позволяет нам применять стили к родительскому li, когда фокусом выделена ссылка (довольно круто!):
li:hover,
li:focus-within {
…
}
li:hover, li:focus-within { … } |
На данный момент, поскольку мы применяем стиль фокуса, мы можем сделать то, что обычно не рекомендуется (удалите стиль фокуса — этот синий контур). Мы можем сделать это:
li:focus-within a {
outline: none;
}
li:focus-within a { outline: none; } |
Вышеприведенный код указывает, что когда мы выделяем фокусом элемент внутри списка через ссылку (a), к элементу ссылки (a) не применяется контур. Это довольно безопасно, потому что мы задаем стили исключительно для состояния наведения курсора, и в браузерах, которые не поддерживают :focus-within, ссылка по-прежнему будет выделена контуром. Теперь наше меню выглядит так:
Окончательное меню со стилями для состояний :focus-within, :hover и удаленным контуром при выделении фокусом
Что насчет ARIA?
Если вы знакомы с концепцией доступности, возможно, вы слышали о метках и состояниях ARIA. Вы можете использовать их, чтобы создавать выпадающие списки подобного типа со встроенной доступностью! Вы можете найти здесь отличный пример Хейдона Пикеринга. При включении разметки ARIA ваш код будет выглядеть примерно так:
<nav role=»navigation»>
<ul>
<li><a href=»#»>One</a></li>
<li><a href=»#» aria-haspopup=»true»>Two</a>
<ul aria-label=»submenu»>
<li><a href=»#»>Sub-1</a></li>
<li><a href=»#»>Sub-2</a></li>
<li><a href=»#»>Sub-3</a></li>
</ul>
</li>
<li><a href=»#»>Three</a></li>
</ul>
</nav>
<nav role=»navigation»> <ul> <li><a href=»#»>One</a></li> <li><a href=»#» aria-haspopup=»true»>Two</a> <ul aria-label=»submenu»> <li><a href=»#»>Sub-1</a></li> <li><a href=»#»>Sub-2</a></li> <li><a href=»#»>Sub-3</a></li> </ul> </li> <li><a href=»#»>Three</a></li> </ul> </nav> |
Вы добавляете aria-haspopup=»true» к родительскому выпадающему меню, чтобы указать альтернативное состояние, включая aria-label=»submenu» для самого выпадающего меню (в нашем случае наш список с class=»dropdown»).
Эти свойства предоставят вам функционал, необходимый для отображения выпадающего меню, но недостатком является то, что они работают только с включенным JavaScript.
Поддержка браузерами
Говоря о возможных сложностях, давайте рассмотрим поддержку браузерами. Хотя :focus-within довольно неплохо поддерживается браузерами, стоит отметить, что Internet Explorer и Edge не поддерживают его, поэтому ваши пользователи на данных платформах не смогут увидеть меню.
Данные поддержки браузерами взяты с Caniuse, где вы можете найти более подробную информацию. Число указывает, что браузер поддерживает эту функцию с этой версии.
Окончательным решением здесь будет использование как разметки ARIA, так и CSS :focus-within.
Автор: Una Kravets
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть
Только верхний индекс в CSS? — Переполнение стека
попробовать
.aftersup {
размер шрифта: 1em;
маржа: слева;
вертикальное выравнивание: .7em;
}
или обычное «после»
.after {
размер шрифта: 1em;
маржа: слева;
вертикальное выравнивание: .7em;
}
«.a.external: после» можно упростить
или
.after {
размер шрифта: 50%;
маржа: слева;
вертикальное выравнивание: .7em;
}
используя «размер шрифта 50%» — 50% от какого размера? это может не сработать, если не используется в каком-либо теге, определяющем размер текста до надстрочного индекса…
, если вы используете «font-size: 1em;» тогда размер шрифта устанавливается точно, без ссылки на тег, который определяет размер текста ссылки, если только текст ссылки не установлен на 100%, а верхний индекс не равен 50% от этих 100%.
Использование «font-size: 1em;» фактически устанавливает базовый размер шрифта.
Установите размер «вертикального выравнивания» меньше, если вы хотите, чтобы шрифт надстрочного индекса был меньше текста ссылки.
Установите размер «с выравниванием по вертикали» таким же, как размер шрифта, если вы хотите, чтобы шрифт надстрочного текста был такого же размера, как текст ссылки.
Чтобы выровнять по тексту ссылки, вам необходимо установить поле, такое же, как текст ссылки (слева, по центру, справа, по ширине).
.text {
размер шрифта: 1em;
маржа: слева;
}
.aftersup {
размер шрифта: 1em;
маржа: слева;
вертикальное выравнивание: .7em;
}
Должно получиться что-то вроде приведенного ниже примера ссылки с надстрочным индексом
https://stackoverflow.com/questions/501671/superscript-in-css-only +
или
https: // stackoverflow.com / questions / 501671 / superscript-in-css-only Вы получили это
или
https://stackoverflow.com/questions/501671/superscript-in-css-only +
или
https://stackoverflow.com/questions/501671/superscript-in-css-only Вы получили это
Как в …
Надстрочный индекс только в CSS? +
или
Только верхний индекс в CSS? Вы получили это
CSS для и · GitHub
CSS для и · GitHub
Мгновенно делитесь кодом, заметками и фрагментами.
CSS для и
| Переходник | , супп { |
| / * Указано в%, так что sup / sup соответствует | |
| правильный размер относительно окружающего текста * / | |
| размер шрифта: 75%; | |
| / * Обнулить высоту строки, чтобы она не была | |
| мешает последующему позиционированию * / | |
| высота строки: 0; | |
| / * Где происходит чудо: все браузеры позиционируются как | |
| sup / sup правильно, относительно окружающего текста * / | |
| позиция: относительная; | |
| / * Обратите внимание, что если вы используете сброс Эрика Мейера.css, это | |
| уже установлен, и вы можете удалить это правило * / | |
| вертикальное выравнивание: базовая линия; | |
| } | |
| sup { | |
| / * Переместить верхний индекс вверх * / | |
| верх: -0,5 em; | |
| } | |
| переводник { | |
| / * Переместить подписанный текст вниз, но только | |
| вдвое ниже, чем верхний индекс * / | |
| низ: -0.25em; | |
| } |
Вы не можете выполнить это действие в настоящее время.
Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс.
Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.
Восхитительные способы написания повторно используемого CSS с использованием подклассов | Габриен Саймонс | Inside Insider
TL; DR
- Длинные цепочки селекторов создают хрупкие, не подлежащие повторному использованию и монолитные подклассы CSS
- Подклассы CSS позволяют повторно использовать модули в любом месте без нарушения стилей
- Перейти к руководству по подклассам CSS
Краткое резюме
В моем предыдущем посте я говорил о том, как стилизовать несколько сайтов, которые выглядят по-разному, используя только одну коллекцию CSS.
В Business Insider и INSIDER мы используем одну коллекцию CSS для определения стилей для обоих сайтов.
Интересные факты о CSS
Давайте поговорим о том, как распознавать шаблоны в вашем CSS и как создавать гибкие стили многократного использования с использованием подклассов CSS.
Если вы когда-либо писали CSS, вы знакомы с непреодолимым желанием использовать селектор родительских элементов, чтобы стилизовать что-то по-другому.
Рассмотрим эти примеры.
Здесь мы стилизуем заголовок по-разному в зависимости от его расположения:
/ * CSS * /
#header h2.title {...}
#footer h2.title {...}
В HTML:
Используя несколько родительских селекторов, мы повышаем специфичность, чтобы избежать перезаписи стилей:
/ * CSS * /
#header .menu a.title {...}
С этим HTML: