Псевдоэлементы
Иногда с псевдоэлементами и можно поиграться, многие стилистические фичи основаны именно на этих двух псевдоэлементах, и пока они пустые (без контента), всё выглядит вполне сносно. Проблема с размещением контента в этих элементах заключается в том, что не все устройства способны справляться с нагрузкой. Так что не размещайте в них ничего.
Псевдоэлементы и не работают так, как вы могли предполагать. Они действуют лишь на первый символ/строку в блоке. С , бывает, возникает ошибка с двухбайтовыми символами, такими как Japanese Kana, и
С управлением стилями выделенного текста или placeholder’а, осуществляемого с помощью или , зачастую возникают проблемы. С всё просто: не используйте его
Это особенно важно для полей ввода паролей и т.п
При выделении текста и измении стиля (обычно и ) возникают коварные баги. Пока , не совместимые с браузерами и устройствами, недостаточно контрастны и не так сочетаются с цветом и стилем текста на вашем сайте, пользователи частенько переписывают их для лучшей читабельности. Изменение цветов в этом случае либо не будет работать, либо будет мешать их стилям (если вы пользовались ). Использование этого псевдоэлемента для красивой картинки может обернуться недовольством посетителей вашего сайта.
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Fallback FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
image-rendering
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Семейства шрифтов CSS
В CSS существует два типа имен семейств шрифтов:
- родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
- семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)
| Generic family | Font family | Описание |
|---|---|---|
| Serif | Times New RomanGeorgia | Шрифты с засечками имеют небольшие линии на концах на некоторых символах |
| Sans-serif | ArialVerdana | «Sans» означает без-эти шрифты не имеют линий на концах символов |
| Monospace | Courier NewLucida Console | Все одноместные символы имеют одинаковую ширину |
Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.
Лучшие практики использования font-weight с веб-шрифтами
Свойство CSS font-weight используется для определения веса шрифта, например обычного или полужирного.В этой статье описывается, как наилучшим образом использовать семейства шрифтов с расширенным весом, который может варьироваться от Extra Light до Extra Black.
Вот как можно определить обычный и жирный вес:
font-weight: нормальный font-weight: жирный
Но для всех остальных весов используется числовой диапазон от 100 до 900. Одна из проблем с веб-шрифтами заключается в том, что большинство веб-браузеров не поддерживают должным образом другие веса шрифта, кроме обычного и жирного. В следующей таблице описаны возможные сопоставления весов с числовыми определениями:
- 100 Extra Light или Ultra Light
- 200 Легкая или тонкая
- 300 Книга или Деми
- 400 Обычный или Обычный
- 500 Средний
- 600 Полужирный, Демиболд
- 700 Полужирный
- 800 Черный, особо жирный или толстый
- 900 Экстра черный, толстый, плакат или ультра черный
Как Webtype решает проблемы с толщиной шрифта
Мы решили проблему веса шрифта с помощью нашей службы веб-шрифтов, позволив вам настроить имя семейства шрифтов для каждого веб-шрифта.
Например, вы можете создать определение семейства шрифтов для Interstate-Light, а затем использовать определение «font-weight: normal» (по сравнению с «font-weight: 100», которое не работает должным образом во всех браузерах).
Вы найдете возможность настроить имя семейства шрифтов после добавления шрифтов к ресурсу CSS в веб-диспетчере шрифтов в своей учетной записи.
Вот пример использования семейства шрифтов Interstate:
{font-family: "Межгосударственный свет"; font-weight: нормальный; }
{font-family: "Межгосударственный средний"; font-weight: нормальный; }
{font-family: "Межгосударственный регулярный"; font-weight: нормальный; }
{font-family: "Межгосударственный полужирный шрифт"; font-weight: жирный; }
{font-family: "Межгосударственный полужирный"; font-weight: жирный; }
{font-family: "Interstate Extrabold"; font-weight: жирный; }
{font-family: "Межгосударственный черный"; font-weight: жирный; }
Duis te feugifacilisi
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-weight
Браузеры
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold
, normal
и lighter
. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.
Свойство font-style , в зависимости от выбранного значения, определяет стиль шрифта.
Шрифт может иметь следующие стили:
- normal — обычный (по умолчанию)
- italic — курсив
- oblique — наклонный
Стиль шрифта
это курсив
а это наклонный текст
И чем спрашивается, они отличаются?
Чем отличается курсив от наклонного текста? Курсив — это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст — это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.
Часть 4. Рекомендации
Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.
Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через id=»решетку» и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов
Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной — это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews, otzivy и т.д
Лучше назвать carousel-once, если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: Sass для самых маленьких — подробное руководство;
Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css, который входит в состав CSS фреймворка Bootstrap;
Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки — переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по умолчанию также радует;
Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.
Другие уроки по теме «HTML и CSS»
- Создание потрясающей галереи на HTML, CSS и JavaScript | Материалы урока
- Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном | Материалы урока
- HTML верстка «ленивого» слайдера | Верстка макета Figma. Часть 6 | Создание коммерческого сайта от А до Я. Урок 21
- Карточки эквивалентной высоты, анимация | HTML верстка макета Figma. Часть 5 | Создание коммерческого сайта от А до Я. Урок 20
- Верстка модального окна Micromodal.js | HTML верстка макета Figma. Часть 4 | Коммерческий сайт от А до Я. Урок 19
- Анимированный слайдер на Swiper.js | HTML верстка макета Figma. Часть 3 | Коммерческий сайт от А до Я. Урок 18
bolder» для шрифтов со множеством начертаний / Habr
Возьмём для примера Open Sans.
Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.
Цифры соответствуют значению .
Пусть основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:
Тег может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.
По-умолчанию:
А нам хочется, чтобы у
Уверен, многие пробовали использовать , но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.
А всё потому, что согласно спецификации, значение () увеличивает (уменьшает) унаследованное значение до следующего возможного для данного шрифта значения, согласно следующей таблице.
| наследуемое значение | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Но в браузерной CSS прописано , т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что работает неправильно.
Исправить это можно так:
Именно так, как два отдельных правила. Первое обнуляет значение из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.
Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги друг в друга.
Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.Демка
Ограничения
Единственной гарантией при использовании / является то, что шрифт при значении «» не будет тоньше, чем более легкие начертания этого шрифта, а при значении «» будет не толще, чем более жирные начертания этого шрифта.
Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthobject-fitopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index
Размер шрифта
Свойство CSS font-size — определяет размер шрифта.
Размер шрифта может быть задан в процентах или пикселях и любых других допустимых единицах измерения CSS, а так же абсолютным или относительным значением.
значения абсолютного размера шрифта:
- xx-small — очень очень маленький
- x-small — очень маленький
- small — маленький
- medium — средний
- large — большой
- x-large — очень большой
- xx-large — очень очень большой
значения относительного размера шрифта:
- larger — больше чем размер шрифта родительского элемента
- smaller — меньше чем размер шрифта родительского элемента
Размер шрифта
Размер шрифта родительского элемента (блока DIV) равен 18 пикселям
Этот шрифт будет крупнее относительно элемента родителя
А этот шрифт будет мельче относительно элемента родителя
В блоке ниже размер штифта элемента родителя огромен (60 пунктов), однако дочерние параграфы расположенные в нём имеют собственное абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.
xx-small — очень очень маленький
x-small — очень маленький
small — маленький
medium — средний
large — большой
x-large — очень большой
xx-large — очень очень большой
Жирность шрифта
Свойство font-weight — определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:
- normal — обычный шрифт
- bold — полужирный шрифт
- bolder — жирный шрифт
- lighter — тонкий шрифт
А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900) где значение 100 тонкий шрифт, а 900 — сверх жирный.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Жирность шрифта</title></head><body><div style=»font-size: 18pt»><p style=»font-weight: bolder«>жирный шрифт</p><p style=»font-weight: lighter«>тонкий шрифт</p><p style=»font-weight: 600«>жирность шрифта равна 600</p></div></body></html>
смотреть пример
CSS размер шрифта
Пример с изменением размера:
Результат:
Текстовая строка размером 13 пикселей.
Текстовая строка размером 16 пикселей.
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900
с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет
значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое
установлено по умолчанию) эквивалентно 400, стандартный полужирный текст —
значению 700.
Значения
Насыщенность шрифта задаётся с помощью ключевых слов: bold
— полужирное начертание, normal
— нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder
и lighter
изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
HTML5
CSS2.1
IE
Cr
Op
Sa
Fx
font-weight
Оси шрифта
Переменные шрифты определяют свои параметры по осям изменений. Существует 5 стандартных осей:
- ital: настраивает курсив. Это значение можно установить с помощью CSS свойства font-style.
- opsz: управляет оптическим размером шрифта. Значение можно установить с помощью CSS-свойства font-optical-sizing.
- slnt: управляет наклоном шрифта. Значение можно установить с помощью CSS свойства font-style.
- wght: определяет толщину шрифта. Значение можно установить с помощью CSS-свойства font-weight.
- wdth: определяет ширину шрифта. Значение можно установить с помощью CSS-свойства font-stretch.
Шрифты также могут применять пользовательские оси. Имя пользовательской оси должно состоять из 4 букв в верхнем регистре, а имена стандартных осей состоят из 4 букв в нижнем регистре. Приведенный выше шрифт Decovar является ярким примером шрифта, использующего множество пользовательских осей.
Стандартные оси можно установить с помощью хорошо известных вам свойств CSS (например, wdth задается с помощью font-weight), в противном случае для управления значениями осей используются новые настройки CSS font-variation-settings.
Например, здесь мы определяем стиль для переменного шрифта NobotoFlex:
А вот альтернативный способ записать то же самое:
Рекомендуется использовать собственные CSS свойства для осей, у которых они есть.
Примечание: В шрифтах не обязательно использовать все 5 стандартных осей. Рекомендуем обратиться к документации шрифта, чтобы узнать, какие оси можно устанавливать
Обратите также внимание на то, что font-weight может принимать значения от 1 до 999 (в отличие от других свойств, которые принимают значения в привычном диапазоне 1-100)
CSS шрифт
С помощью команд CSS вы можете контролировать различные аспекты текстового представления. Давайте сначала посмотрим, как можно указать тип, размер и стиль шрифта (что представляют собой шрифты, объясняется в статье «Шрифты на сайт — руководство»).
Тип шрифта
Тип шрифта устанавливается с помощью font-family: value, с конкретным названием шрифта (например, Verdana) или одним из следующих слов — категориями шрифта:
- serif — шрифты с засечками, например Times New Roman.
- sans-serif — шрифты без засечек, например Arial.
- monospace — шрифты, в которых все символы занимают одинаковую ширину, например Courier New.
Когда вы выбираете serif, sans-serif или monospace, браузер автоматически выбирает определенный тип шрифта из указанной категории.
У разных пользователей установлены разные шрифты. По этой причине вы не можете быть уверены, что указанный вами шрифт будет использоваться всегда. Часто вместо указания одного шрифта указывается несколько опций, например,
Если у пользователя не установлен первый указанный шрифт, браузер использует второй шрифт, если он не установлен, третий и т. д. Если ни один из указанных типов шрифтов не установлен, браузер будет использовать любой из шрифтов по умолчанию, которые являются универсальными и установлены почти на всех компьютерах (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana).
Размер шрифта
Размер шрифта (размер текста) устанавливается с помощью font-size, например:
В качестве значения для размера шрифта можно использовать как цифры, так и слова или ставки, отражающиеся относительно элемента-родителя. В порядке увеличения размера шрифта слова, которые могут быть использованы, являются:
В качестве основы берется размер родительского элемента, приравненный к среднему. Относительный размер шрифта также может быть указан с словами larger (больше) или smaller (меньше).
Толщина шрифта
Толщина шрифта указывается с помощью font-weight, а для значений можно использовать:
- числа от 100 до 900, кратные 100 (100, 200, 300 и т.д.). 100 соответствует самой маленькой толщине шрифта, а 900 — самой большой;
- слова bold (соответствует числу 700), normal (эквивалентно 400) — значение по умолчанию, bolder и lighter — соответственно большей и меньшей толщины шрифта относительно элемента-родителя.
Стиль шрифта
С CSS можно задать определенный стиль шрифта — например, шрифт может быть курсивный. Этот стиль шрифта указывается с помощью font-style: italic:
На месте italic можно использовать normal (обычный текст) или oblique — шрифты, которые поддерживают наклонные символы. На практике, italic и oblique выглядят одинаково.
Описанные здесь свойства шрифта можно задать сокращенно с помощью свойства font и списка желаемых параметров, разделенных пробелами друг с другом. Вот и пример:
Перечисление параметров идет в следующем порядке: стиль, толщина, размер, вид шрифта.
Ключевое слово revertСкопировать ссылку
Но что, если мы хотим сбросить значение свойства до первоначально заданных браузером значений, а не до значений по умолчанию? Например, вернуть значение свойства элемента к значению (это стили браузера), а не к значению (это базовые стили CSS).
Браузерные стили для тега div
Для этих целей мы скоро получим новое ключевое слово в CSS: . Оно очень похоже на , единственное отличие состоит в том, что оно предпочитает стили браузера базовым значениям свойств CSS. Например:
Таким образом, если мы хотим сбросить все стили HTML-элемента до базовых стилей браузера, мы можем сделать это так:
Соответственно, дает гораздо больше возможностей, чем . Правда, на данный момент работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)
Жирность текста на CSS
В данном уроке мы с вами изучим свойство font-weight , которое позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold , а чтобы отменить жирность — значение normal .
Это свойство работает аналогично тегу b , который мы с вами уже разобрали. Разница в том, что через CSS управлять жирностью гораздо удобнее — я могу заставить все абзацы стать жирными, а все заголовки — нежирными, сделав всего пару записей в CSS файле.
Если бы я делал жирный через тег b — мне пришлось бы содержимое каждого абзаца обернуть в этот тег, а это было бы очень затратным по времени (а если я потом захочу убрать жирность абзацам — мне придется убирать все эти теги, представьте, сколько это лишней, бесполезной работы).
В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 — нежирными:
Скопируйте следующий HTML код себе на страницу:
Установите таблице ширину в 500px , а высоту в 300px . Сделайте ячейки td жирными и по центру, а ячейки th — нежирными.
