Text-transform
Содержание:
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Отображение дочерних элементов в трехмерном пространстве в CSS</title>
<style>
div {
width : 200px; /* устанавливаем ширину блока */
height : 200px; /* устанавливаем высоту блока */
border: 1px solid white; /* устанавливаем сплошную границу размером 1 пиксель белого цвета */
}
.static {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
background: silver; /* устанавливаем цвет заднего фона */
margin : 50px; /* устанавливаем величину внешнего отступа для всех сторон элемента */
-webkit-perspective: 500px; /* для поддержки ранних версий браузеров */
-moz-perspective: 500px; /* для поддержки ранних версий браузеров */
perspective: 500px; /* определяет, на сколько пикселей удален трехмерный элемент от точки обзора */
}
@-webkit-keyframes iliketomoveit { /* для поддержки ранних версий браузеров */
100% {
-moz-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
-webkit-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
-ms-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
transform : rotateY(360deg); /* двухмерное преобразование путем поворота элемента по часовой стрелке на 360 градусов */
}
}
@keyframes iliketomoveit {
100% {
-moz-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
-webkit-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
-ms-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
transform : rotateY(360deg);/* двухмерное преобразование путем поворота элемента по часовой стрелке на 360 градусов */
}
}
.test {
-webkit-animation : iliketomoveit 15s linear infinite; /* для поддержки ранних версий браузеров */
animation : iliketomoveit 15s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */
background : green; /* устанавливаем цвет заднего фона */
transform-style : flat; /* вложенные (дочерние) элементы отображаются плоскими в двухмерной плоскости(это значение по умолчанию) */
}
.test2 {
-webkit-animation : iliketomoveit 15s linear infinite; /* для поддержки ранних версий браузеров */
animation : iliketomoveit 15s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */
background : orange; /* устанавливаем цвет заднего фона */
}
.test3 {
-webkit-animation : iliketomoveit 15s linear infinite; /* для поддержки ранних версий браузеров */
animation : iliketomoveit 15s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */
background : green; /* устанавливаем цвет заднего фона */
-webkit-transform-style : preserve-3d; /* для поддержки ранних версий браузеров */
-moz-transform-style : preserve-3d; /* для поддержки ранних версий браузеров */
transform-style : preserve-3d; /* вложенные (дочерние) элементы трансформируются в их собственной трёхмерной плоскости */
}
</style>
</head>
<body>
<div class = "static">
<b>transform-style: flat;</b>
<div class = "test">
<div class = "test2">
</div>
</div>
</div>
<div class = "static">
<b>transform-style: preserve-3d;</b>
<div class = "test3">
<div class = "test2">
</div>
</div>
</div>
</body>
</html>
Пример использования CSS свойства transform-style(отображение дочерних элементов в трехмерном пространстве).CSS свойства
CSS Справочники
CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы
CSS Свойства
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
caption-side
caret-color
@charset
clear
clip
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-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
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
@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
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
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
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
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
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Управляем переносом строки с разбитием слов
Иногда дизайн портиться из-за отдельных очень длинных слов, не переносящихся на следующую строку и переполняющих контейнер. Это может быть длинный URL или комментарий с зажатой клавишей.
Для таких случаев у нас есть специальные свойства CSS.
Свойство
Свойство (раннее известное как и до сих пор ) работает, если свойство допускает перенос в соответствии с размером строки. Возможные значения — и .
Со значением слова разбиваются на всех традиционных маркерах — пробелы, дефисы и т.д.
Значение позволяет разбить длинные слова, если иначе строка будет превышать доступный размер.
На картинке ниже изображен пример длинного слова, выходящего за пределы контейнера:
Теперь зададим этому элементу свойство (и свойство для совместимости) в значение :
Теперь сверхдлинное слово разбито на несколько строк, заполняющих всю ширину контейнера.
Свойство
Разбитие длинных слов это, конечно, хорошо. Однако, полученный текст может смутить читателей. Лучше будет, если разбитие слова будет сопровождаться установкой дефиса. Таким образом, читателям сразу становится ясно, что это одно слово, разделенное между строками. Этого можно достичь используя свойство , его можно сочетать с .
Конкретно это значит, что значение свойства позволяет вывести дефис на месте разбития слова, если язык документа позволяет это делать в имеющемся источнике HTML. Чтобы это сработало, не забудьте задать правильный атрибут своему документу:
Вы также можете отключить вывод дефисов, задав значение :
Также у вас есть возможность вывести дефисы на разрывах строки там, где вы поставили их в разметке. Это делается с помощью значения :
Основные браузеры , но в реализации есть некоторые различия. Последние на момент написания статьи версии Chrome (44) и Opera (30) не поддерживали значение .
transform:rotate(x) — вращение объекта
Чтобы вращать элемент существует команда rotate(x). Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg
Пример #1. Вращение объекта в html через трансформацию
На странице преобразуется в следующее
Примечание
Свойства:
Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.
Пример #2. Вращение объекта в html при наведении курсора
Создадим класс kvadrat2 и пропишем для него псевдокласс :hover, в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).
На странице преобразуется в следующее
Но это вращение происходит резко и не смотрится «эффектно». Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.
Пример #3. Плавное вращение при наведении курсора (анимация) в html
Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear
На странице преобразуется в следующее
Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.
Интервал между словами и символами
Оформляя страницы на сайте, приходится регулировать интервал не только между строк, но и между отдельными словами, или символами. Например, уменьшив интервал между символами, позволит сделать длинный заголовок более компактным, или наоборот, увеличив интервал, придаст ему более растянутый вид.
Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing. При работе со свойством используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.
Давайте рассмотрим пример использования свойства letter-spacing:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства letter-spacing</title>
<style>
.test {
letter-spacing : -1px; /* задаём отрицательный интервал между символами в тексте. */
}
.test2 {
letter-spacing : normal; /* задаём интервал между символами в тексте (значение по умолчанию). */
}
.test3 {
letter-spacing : 2px; /* задаём интервал между символами в тексте (2px). */
}
.test4 {
letter-spacing : 1em; /* задаём интервал между символами в тексте (1em). */
}
</style>
</head>
<body>
<div class = "test">letter-spacing: -1px</div>
<div class = "test2">letter-spacing: normal</div>
<div class = "test3">letter-spacing: 2px</div>
<div class = "test4">letter-spacing: 1em</div>
</body>
</html>
В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.
Результат нашего примера:
Рис.63 Пример использования свойства letter-spacing (интервал между символами в тексте).
Задать интервал между отдельными словами позволяет похожее по наименованию свойство CSS — word-spacing. По аналогии со свойством letter-spacing используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между словами, а отрицательные уменьшают, вплоть до наслоения слов друг на друга.
Давайте рассмотрим пример использования свойства word-spacing:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства word-spacing</title>
<style>
.test {
word-spacing : normal; /* определяем расстояние между словами (значение по умолчанию) */
}
.test2 {
word-spacing : 1em; /* определяем расстояние между словами (1em) */
}
.test3 {
word-spacing : -5px; /* определяем расстояние между словами (отрицательное значение) */
}
</style>
</head>
<body>
<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
</body>
</html>
Результат нашего примера:
Рис. 64 Пример использования свойства word-spacing (интервал между словами в тексте).
scale
Функция scale() позволяет изменять размер элемента. Она может увеличить или уменьшить элемент. Функция принимает либо:
- один параметр: изменение размеров элемента одинаково по высоте и ширине;
- два параметра: первое значение изменяет размер элемента по горизонтали, второе по вертикали.
Диапазон возможных значений:
- 1: элемент сохраняет свой первоначальный размер;
- 2: элемент удваивается в размере;
- 0.5: элемент уменьшается наполовину;
- 0: элемент в основном исчезает (так как его высота и ширина равны нулю);
- -1: элемент отражается.
Как и для translate(), у функция scale() есть версии для х и у: scaleX() и scaleY(), для изменения размера по горизонтали и вертикали, соответственно.
Буквицы раньше и сейчас
Летописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся еще к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.
Поднятые и опущенные буквы все еще используются в наши дни. Их можно встретить в газетах, журналах и книгах, а также в цифровой типографии. Поднятые литеры иногда называются вытянутыми. Они размещаются на одном уровне с нижней частью текста, который следует за ними. Опущенные буквы размещаются на одном уровне с верхней частью текста, иногда в слое позади основной части текстового контента, или остальной текст обтекает их.
Поднятые буквы задаются намного проще, так они находятся на одном уровне с остальным текстом, и обычно для этого не нужно менять обтекание внешних полей. Опущенные буквы требуют более тонкой настройки. Вам будет проще разобраться с этим, если сначала вы поймете, как обрабатываются поднятые литеры.
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
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-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-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-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-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-wrapwriting-modez-index
JavaScript
JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()
JS Boolean
constructor
prototype
toString()
valueOf()
JS Classes
constructor()
extends
static
super
JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
JS Error
name
message
JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()
JS JSON
parse()
stringify()
JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()
JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()
JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()
(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while
JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()
The CSS text-transform Property
The CSS text-transform property is the key to managing text uppercase and lowercase rendering. There are 5 different values you can use:
- lowercase: makes all of the letters in the selected text lowercase
- uppercase: makes all of the letters in the selected text uppercase or ALL CAPS
- capitalize: capitalizes the first letter of each word in the selected text
- none: leaves the text’s case and capitalization exactly as it was entered
- inherit: gives the text the case and capitalization of its parent
- full-width: Is a keyword forcing the writing of a character (mainly ideograms and latin scripts) inside a square, allowing them to be aligned in the usual East Asian scripts
CSS lowercase
Using the lowercase value forces the text or font to be rendered using lowercase characters.
THIS IS A SCREAMING SENTANCE THAT CAN BE SOFTENED USING LOWERCASE!
transform: lowercase
CSS uppercase — How to Capitalize All Letters in Word
Using the uppercase value forces the text or font to be rendered using uppercase characters.
this example converts an all lowercase string to screaming uppercase.
transform : uppercase
CSS Свойства
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-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-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-wrapwriting-modez-index
Übersicht
Das CSS Attribut legt die Groß- und Kleinschreibung eines Elementes fest. Es kann verwendet werden, um den Text eines Elementes komplett klein oder klein zu schreiben oder den ersten Buchstaben jedes Wortes groß zu schreiben.
Das Attribut berücksichtigt sprachspezifische Regeln:
- in Turksprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), und Baschkirisch (ba), gibt es zwei Arten von i, mit und ohne Punkt, und jeweils die Groß- bzw. Kleinschreibung: / and /.
- auf Deutsch (de) wird das in der Großschreibung zu .
- auf Niederländisch (nl) wird der Digraph auch bei zu .
- auf Griechisch (el) verlieren Vokale ihren Akzent wenn wenn ganze Worte is in Großschreibung geschrieben werden (/), außer beim Eta (/). Doppelvokale mit einem Akzent auf dem ersten Vokal verlieren den Akzent und bekommen einen Trema auf dem zweiten Vokal (/).
- auf Griechisch (el) hat das kleine Sigma zwei Formen: and . wird nur dann genutzt, wenn Sigma ein Wort beendet. Wird auf ein großes Sigma (Σ) angewandt, so muss der Browser aus dem Kontext heraus entscheiden, welches verwendet wird.
Die Sprache wird durch das HTML Attribut oder das XML Attribut festgelegt..
Die Unterstützung dieser spezifischen Fälle unterscheidet sich von Browser zu Browser, also prüfen Sie dies anhand der .
| Initialwert | |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US). |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
