| decoration-inherit | text-decoration-color: inherit; |
| decoration-current | text-decoration-color: currentColor; |
| decoration-transparent | text-decoration-color: transparent; |
| decoration-black | text-decoration-color: #000; |
| decoration-white | text-decoration-color: #fff; |
| decoration-slate-50 | text-decoration-color: #f8fafc; |
| decoration-slate-100 | text-decoration-color: #f1f5f9; |
| decoration-slate-200 | text-decoration-color: #e2e8f0; |
| decoration-slate-300 | text-decoration-color: #cbd5e1; |
| text-decoration-color: #94a3b8; | |
| decoration-slate-500 | text-decoration-color: #64748b; |
| decoration-slate-600 | text-decoration-color: #475569; |
| decoration-slate-700 | text-decoration-color: #334155; |
| decoration-slate-800 | text-decoration-color: #1e293b; |
| decoration-slate-900 | text-decoration-color: #0f172a; |
| decoration-slate-950 | text-decoration-color: #020617; |
| decoration-gray-50 | text-decoration-color: #f9fafb; |
| decoration-gray-100 | text-decoration-color: #f3f4f6; |
| decoration-gray-200 | text-decoration-color: #e5e7eb; |
| decoration-gray-300 | text-decoration-color: #d1d5db; |
| decoration-gray-400 | text-decoration-color: #9ca3af; |
| decoration-gray-500 | text-decoration-color: #6b7280; |
| decoration-gray-600 | text-decoration-color: #4b5563; |
| decoration-gray-700 | text-decoration-color: #374151; |
| decoration-gray-800 | text-decoration-color: #1f2937; |
| decoration-gray-900 | text-decoration-color: #111827; |
| decoration-gray-950 | text-decoration-color: #030712; |
| decoration-zinc-50 | |
| decoration-zinc-100 | text-decoration-color: #f4f4f5; |
| decoration-zinc-200 | text-decoration-color: #e4e4e7; |
| decoration-zinc-300 | text-decoration-color: #d4d4d8; |
| decoration-zinc-400 | text-decoration-color: #a1a1aa; |
| decoration-zinc-500 | text-decoration-color: #71717a; |
| decoration-zinc-600 | text-decoration-color: #52525b; |
| decoration-zinc-700 | text-decoration-color: #3f3f46; |
| decoration-zinc-800 | text-decoration-color: #27272a; |
| decoration-zinc-900 | text-decoration-color: #18181b; |
| decoration-zinc-950 | text-decoration-color: #09090b; |
| decoration-neutral-50 | text-decoration-color: #fafafa; |
| decoration-neutral-100 | text-decoration-color: #f5f5f5; |
| decoration-neutral-200 | text-decoration-color: #e5e5e5; |
| decoration-neutral-300 | text-decoration-color: #d4d4d4; |
| decoration-neutral-400 | text-decoration-color: #a3a3a3; |
| decoration-neutral-500 | text-decoration-color: #737373; |
| decoration-neutral-600 | text-decoration-color: #525252; |
| decoration-neutral-700 | text-decoration-color: #404040; |
| decoration-neutral-800 | text-decoration-color: #262626; |
| decoration-neutral-900 | text-decoration-color: #171717; |
| decoration-neutral-950 | text-decoration-color: #0a0a0a; |
| decoration-stone-50 | text-decoration-color: #fafaf9; |
| decoration-stone-100 | text-decoration-color: #f5f5f4; |
| decoration-stone-200 | text-decoration-color: #e7e5e4; |
| decoration-stone-300 | text-decoration-color: #d6d3d1; |
| decoration-stone-400 | text-decoration-color: #a8a29e; |
| decoration-stone-500 | text-decoration-color: #78716c; |
| decoration-stone-600 | text-decoration-color: #57534e; |
| decoration-stone-700 | text-decoration-color: #44403c; |
| decoration-stone-800 | text-decoration-color: #292524; |
| decoration-stone-900 | text-decoration-color: #1c1917; |
| decoration-stone-950 | text-decoration-color: #0c0a09; |
| decoration-red-50 | text-decoration-color: #fef2f2; |
| decoration-red-100 | text-decoration-color: #fee2e2; |
| decoration-red-200 | text-decoration-color: #fecaca; |
| decoration-red-300 | text-decoration-color: #fca5a5; |
| decoration-red-400 | text-decoration-color: #f87171; |
| decoration-red-500 | text-decoration-color: #ef4444; |
| decoration-red-600 | text-decoration-color: #dc2626; |
| decoration-red-700 | text-decoration-color: #b91c1c; |
| decoration-red-800 | text-decoration-color: #991b1b; |
| decoration-red-900 | text-decoration-color: #7f1d1d; |
| decoration-red-950 | text-decoration-color: #450a0a; |
| decoration-orange-50 | text-decoration-color: #fff7ed; |
| decoration-orange-100 | text-decoration-color: #ffedd5; |
| decoration-orange-200 | text-decoration-color: #fed7aa; |
| decoration-orange-300 | text-decoration-color: #fdba74; |
| decoration-orange-400 | text-decoration-color: #fb923c; |
| decoration-orange-500 | text-decoration-color: #f97316; |
| decoration-orange-600 | text-decoration-color: #ea580c; |
| decoration-orange-700 | text-decoration-color: #c2410c; |
| decoration-orange-800 | text-decoration-color: #9a3412; |
| decoration-orange-900 | text-decoration-color: #7c2d12; |
| decoration-orange-950 | text-decoration-color: #431407; |
| decoration-amber-50 | text-decoration-color: #fffbeb; |
| decoration-amber-100 | text-decoration-color: #fef3c7; |
| decoration-amber-200 | text-decoration-color: #fde68a; |
| decoration-amber-300 | text-decoration-color: #fcd34d; |
| decoration-amber-400 | text-decoration-color: #fbbf24; |
| decoration-amber-500 | text-decoration-color: #f59e0b; |
| decoration-amber-600 | text-decoration-color: #d97706; |
| decoration-amber-700 | text-decoration-color: #b45309; |
| decoration-amber-800 | text-decoration-color: #92400e; |
| decoration-amber-900 | text-decoration-color: #78350f; |
| decoration-amber-950 | text-decoration-color: #451a03; |
| decoration-yellow-50 | text-decoration-color: #fefce8; |
| decoration-yellow-100 | text-decoration-color: #fef9c3; |
| decoration-yellow-200 | text-decoration-color: #fef08a; |
| decoration-yellow-300 | text-decoration-color: #fde047; |
| decoration-yellow-400 | text-decoration-color: #facc15; |
| decoration-yellow-500 | text-decoration-color: #eab308; |
| decoration-yellow-600 | text-decoration-color: #ca8a04; |
| decoration-yellow-700 | text-decoration-color: #a16207; |
| decoration-yellow-800 | text-decoration-color: #854d0e; |
| decoration-yellow-900 | text-decoration-color: #713f12; |
| decoration-yellow-950 | text-decoration-color: #422006; |
| decoration-lime-50 | text-decoration-color: #f7fee7; |
| decoration-lime-100 | text-decoration-color: #ecfccb; |
| decoration-lime-200 | text-decoration-color: #d9f99d; |
| decoration-lime-300 | text-decoration-color: #bef264; |
| decoration-lime-400 | text-decoration-color: #a3e635; |
| decoration-lime-500 | text-decoration-color: #84cc16; |
| decoration-lime-600 | text-decoration-color: #65a30d; |
| decoration-lime-700 | text-decoration-color: #4d7c0f; |
| decoration-lime-800 | text-decoration-color: #3f6212; |
| decoration-lime-900 | text-decoration-color: #365314; |
| decoration-lime-950 | text-decoration-color: #1a2e05; |
| decoration-green-50 | text-decoration-color: #f0fdf4; |
| decoration-green-100 | text-decoration-color: #dcfce7; |
| decoration-green-200 | text-decoration-color: #bbf7d0; |
| decoration-green-300 | text-decoration-color: #86efac; |
| decoration-green-400 | text-decoration-color: #4ade80; |
| decoration-green-500 | text-decoration-color: #22c55e; |
| decoration-green-600 | text-decoration-color: #16a34a; |
| decoration-green-700 | text-decoration-color: #15803d; |
| decoration-green-800 | text-decoration-color: #166534; |
| decoration-green-900 | text-decoration-color: #14532d; |
| decoration-green-950 | text-decoration-color: #052e16; |
| decoration-emerald-50 | text-decoration-color: #ecfdf5; |
| decoration-emerald-100 | text-decoration-color: #d1fae5; |
| decoration-emerald-200 | text-decoration-color: #a7f3d0; |
| decoration-emerald-300 | text-decoration-color: #6ee7b7; |
| decoration-emerald-400 | text-decoration-color: #34d399; |
| decoration-emerald-500 | text-decoration-color: #10b981; |
| decoration-emerald-600 | text-decoration-color: #059669; |
| decoration-emerald-700 | text-decoration-color: #047857; |
| decoration-emerald-800 | text-decoration-color: #065f46; |
| decoration-emerald-900 | text-decoration-color: #064e3b; |
| decoration-emerald-950 | text-decoration-color: #022c22; |
| decoration-teal-50 | text-decoration-color: #f0fdfa; |
| decoration-teal-100 | text-decoration-color: #ccfbf1; |
| decoration-teal-200 | text-decoration-color: #99f6e4; |
| decoration-teal-300 | text-decoration-color: #5eead4; |
| decoration-teal-400 | text-decoration-color: #2dd4bf; |
| decoration-teal-500 | text-decoration-color: #14b8a6; |
| decoration-teal-600 | text-decoration-color: #0d9488; |
| decoration-teal-700 | text-decoration-color: #0f766e; |
| decoration-teal-800 | text-decoration-color: #115e59; |
| decoration-teal-900 | text-decoration-color: #134e4a; |
| decoration-teal-950 | text-decoration-color: #042f2e; |
| decoration-cyan-50 | text-decoration-color: #ecfeff; |
| decoration-cyan-100 | text-decoration-color: #cffafe; |
| decoration-cyan-200 | text-decoration-color: #a5f3fc; |
| decoration-cyan-300 | text-decoration-color: #67e8f9; |
| decoration-cyan-400 | text-decoration-color: #22d3ee; |
| decoration-cyan-500 | text-decoration-color: #06b6d4; |
| decoration-cyan-600 | text-decoration-color: #0891b2; |
| decoration-cyan-700 | text-decoration-color: #0e7490; |
| decoration-cyan-800 | text-decoration-color: #155e75; |
| decoration-cyan-900 | text-decoration-color: #164e63; |
| decoration-cyan-950 | text-decoration-color: #083344; |
| decoration-sky-50 | text-decoration-color: #f0f9ff; |
| decoration-sky-100 | text-decoration-color: #e0f2fe; |
| decoration-sky-200 | text-decoration-color: #bae6fd; |
| decoration-sky-300 | text-decoration-color: #7dd3fc; |
| decoration-sky-400 | text-decoration-color: #38bdf8; |
| decoration-sky-500 | text-decoration-color: #0ea5e9; |
| decoration-sky-600 | text-decoration-color: #0284c7; |
| decoration-sky-700 | text-decoration-color: #0369a1; |
| decoration-sky-800 | text-decoration-color: #075985; |
| decoration-sky-900 | text-decoration-color: #0c4a6e; |
| decoration-sky-950 | text-decoration-color: #082f49; |
| decoration-blue-50 | text-decoration-color: #eff6ff; |
| decoration-blue-100 | text-decoration-color: #dbeafe; |
| decoration-blue-200 | text-decoration-color: #bfdbfe; |
| decoration-blue-300 | text-decoration-color: #93c5fd; |
| decoration-blue-400 | text-decoration-color: #60a5fa; |
| decoration-blue-500 | text-decoration-color: #3b82f6; |
| decoration-blue-600 | text-decoration-color: #2563eb; |
| decoration-blue-700 | text-decoration-color: #1d4ed8; |
| decoration-blue-800 | text-decoration-color: #1e40af; |
| decoration-blue-900 | text-decoration-color: #1e3a8a; |
| decoration-blue-950 | text-decoration-color: #172554; |
| decoration-indigo-50 | text-decoration-color: #eef2ff; |
| decoration-indigo-100 | text-decoration-color: #e0e7ff; |
| decoration-indigo-200 | text-decoration-color: #c7d2fe; |
| decoration-indigo-300 | text-decoration-color: #a5b4fc; |
| decoration-indigo-400 | text-decoration-color: #818cf8; |
| decoration-indigo-500 | text-decoration-color: #6366f1; |
| decoration-indigo-600 | text-decoration-color: #4f46e5; |
| decoration-indigo-700 | text-decoration-color: #4338ca; |
| decoration-indigo-800 | text-decoration-color: #3730a3; |
| decoration-indigo-900 | text-decoration-color: #312e81; |
| decoration-indigo-950 | text-decoration-color: #1e1b4b; |
| decoration-violet-50 | text-decoration-color: #f5f3ff; |
| decoration-violet-100 | text-decoration-color: #ede9fe; |
| decoration-violet-200 | text-decoration-color: #ddd6fe; |
| decoration-violet-300 | text-decoration-color: #c4b5fd; |
| decoration-violet-400 | text-decoration-color: #a78bfa; |
| decoration-violet-500 | text-decoration-color: #8b5cf6; |
| decoration-violet-600 | text-decoration-color: #7c3aed; |
| decoration-violet-700 | text-decoration-color: #6d28d9; |
| decoration-violet-800 | text-decoration-color: #5b21b6; |
| decoration-violet-900 | text-decoration-color: #4c1d95; |
| decoration-violet-950 | text-decoration-color: #2e1065; |
| decoration-purple-50 | text-decoration-color: #faf5ff; |
| decoration-purple-100 | text-decoration-color: #f3e8ff; |
| decoration-purple-200 | text-decoration-color: #e9d5ff; |
| decoration-purple-300 | text-decoration-color: #d8b4fe; |
| decoration-purple-400 | text-decoration-color: #c084fc; |
| decoration-purple-500 | text-decoration-color: #a855f7; |
| decoration-purple-600 | text-decoration-color: #9333ea; |
| decoration-purple-700 | text-decoration-color: #7e22ce; |
| decoration-purple-800 | text-decoration-color: #6b21a8; |
| decoration-purple-900 | text-decoration-color: #581c87; |
| decoration-purple-950 | text-decoration-color: #3b0764; |
| decoration-fuchsia-50 | text-decoration-color: #fdf4ff; |
| decoration-fuchsia-100 | text-decoration-color: #fae8ff; |
| decoration-fuchsia-200 | text-decoration-color: #f5d0fe; |
| decoration-fuchsia-300 | text-decoration-color: #f0abfc; |
| decoration-fuchsia-400 | text-decoration-color: #e879f9; |
| decoration-fuchsia-500 | text-decoration-color: #d946ef; |
| decoration-fuchsia-600 | text-decoration-color: #c026d3; |
| decoration-fuchsia-700 | text-decoration-color: #a21caf; |
| decoration-fuchsia-800 | text-decoration-color: #86198f; |
| decoration-fuchsia-900 | text-decoration-color: #701a75; |
| decoration-fuchsia-950 | text-decoration-color: #4a044e; |
| decoration-pink-50 | text-decoration-color: #fdf2f8; |
| decoration-pink-100 | text-decoration-color: #fce7f3; |
| decoration-pink-200 | text-decoration-color: #fbcfe8; |
| decoration-pink-300 | text-decoration-color: #f9a8d4; |
| decoration-pink-400 | text-decoration-color: #f472b6; |
| decoration-pink-500 | text-decoration-color: #ec4899; |
| decoration-pink-600 | text-decoration-color: #db2777; |
| decoration-pink-700 | text-decoration-color: #be185d; |
| decoration-pink-800 | text-decoration-color: #9d174d; |
| decoration-pink-900 | text-decoration-color: #831843; |
| decoration-pink-950 | text-decoration-color: #500724; |
| decoration-rose-50 | text-decoration-color: #fff1f2; |
| decoration-rose-100 | text-decoration-color: #ffe4e6; |
| decoration-rose-200 | text-decoration-color: #fecdd3; |
| decoration-rose-300 | text-decoration-color: #fda4af; |
| decoration-rose-400 | text-decoration-color: #fb7185; |
| decoration-rose-500 | text-decoration-color: #f43f5e; |
| decoration-rose-600 | text-decoration-color: #e11d48; |
| decoration-rose-700 | text-decoration-color: #be123c; |
| decoration-rose-800 | text-decoration-color: #9f1239; |
| decoration-rose-900 | text-decoration-color: #881337; |
| decoration-rose-950 | text-decoration-color: #4c0519; |
НОУ ИНТУИТ | Лекция | Оформление текста с помощью CSS
< Лекция 10 || Лекция 11: 12 || Лекция 12 >
Аннотация: В лекции рассматриваются основные свойства CSS, позволяющие управлять стилем, размером, семейством, гарнитурой шрифта, а также свойства, отвечающие за выравнивания и отступы текста, регулировки просвета и высоты строки.
Ключевые слова: информация, шрифт, CSS2, Интернет, Дополнение, базы данных, css, отображение, браузер, ‘font-family’, качество защиты, sans-serif, семейство шрифта, SAN, medium, относительный размер, pt, ‘font-weight’, ‘font-style’, oblique, font-variant, ‘text-transform’, capital, uppercase, элемент текста, ‘text-decoration’, blinking
Большая часть сайтов, несмотря на их разнородную направленность, имеет нечто общее. Это интересная, привлекающая посетителей информация, а также интерактивная возможность пообщаться с другими людьми. И в том, и другом случае дело не обходится без текста. Именно текст служит основным составляющим практически любого сайта. Красиво и элегантно оформленный текст может лучше передать замысел автора и привлечь к себе внимание. К тому же с таким текстом приятнее работать, он лучше воспринимается, и пользователи это ценят.
Задание свойств шрифтов
Существуют тысячи шрифтов, которые предназначены для оформления текстов.
Однако, число шрифтов, применяемых для набора текста на сайтах, существенно ниже. Конечно, можно задать, например, для заголовка, вычурный шрифт, установленный на компьютере разработчика. Но если такого шрифта на компьютере пользователя нет, то текст будет отображаться шрифтом, установленным в браузере по умолчанию. Получается, что труд дизайнеров и разработчиков пропал даром.
Одной из возможностей обойти эту проблему является новая концепция стандарта CSS2. В основе новой концепции лежит понятие загружаемых шрифтов, т.е. шрифтов, отсутствующих на компьютере пользователя, но доступных для загрузки из сети Интернет. В дополнение к этому CSS2 предусматривает наличие базы данных о шрифтах, содержащей их разнообразные характеристики и позволяющей по мере необходимости синтезировать недостающие шрифты на основе шрифтов, доступных обозревателю. Однако, несмотря на то, что CSS поддерживает эту возможность, в реальности она используется очень редко, т.
к. далеко не все браузеры поддерживают данную технологию, а пользователи не любят загружать лишнюю информацию.
Поэтому самым распространенным способом гарантировать правильное отображение шрифтов в браузере пользователя является использование стандартных шрифтов, встроенных в браузер и операционную систему.
Семейство шрифтов: свойство font-family
Свойство font-family используется для задания списка имен семейств шрифтов для отображения содержимого элемента. Список шрифтов может включать одно или несколько названий, разделенных запятыми. Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в двойные или одинарные кавычки. Гарнитуры должны указываться в порядке возрастающей вероятности доступности или предпочтения. В качестве защиты от отказа значение свойства font-family всегда должно заканчиваться ключевым словом, ссылающимся на родовое имя шрифта.
Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Например, следующее ниже свойство следует понимать как указание браузеру пользователя использовать шрифт Verdana; если его нет, то использовать шрифт Arial; если его нет, то использовать родовой шрифт sans-serif:
font-family: Verdana, Arial, sans-serif;
Такой список необходим, поскольку разработчику заранее не известно, какие именно шрифты установлены на компьютерах пользователей.
Имя семейства шрифтов может быть задано как название семейства шрифтов (например, Times New Roman, Arial и т.д.) или как родовое имя. Родовые имена шрифтов были разработаны на тот случай, если на компьютере пользователя не установлен ни один из шрифтов, заданных разработчиком. В этом случае браузер использует родовой шрифт, начертание которого напоминает шрифт, который планировал использовать разработчик.
Спецификацией определено пять родовых имен, изображения которых представлены на рисунке 11.1.
Т.к. список шрифтов на компьютерах пользователей может сильно различаться в зависимости от операционной системы и собственных предпочтений, необходимо пользоваться наиболее распространенными шрифтами, к которым относятся Arial, Comic Sans MS, Courier, Courier New, Lucida Console, Tahoma, Times, Times New Roman, Trebuchet MS, Verdana. Однако следует помнить, что шрифты с одинаковыми именами в разных браузерах и системах могут незначительно отличаться друг от друга по форме или по размеру.
Размер шрифтов: свойство font-size
Размер шрифта может быть установлен несколькими способами. Набор констант хх-small, x-small, small, medium, large, x-large, xx-large задает размер, который называется абсолютным.
По правде говоря, он не совсем абсолютный, поскольку зависит от настроек браузера и операционной системы. На рисунке 11.2 представлены варианты размеров шрифтов, соответствующих данным константам.
Другой набор констант larger, smaller устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ех (высота символа х), пункты (pt), пикселы (рх), проценты (%) и др. При использовании процентной записи за 100% принимается размер шрифта родительского элемента. Если размер шрифта задается в пунктах или пикселах, то изменить эту величину с помощью специальной опции браузера «Размер шрифта» нельзя.
Если шрифт установлен слишком мелким, то исправить этот недостаток пользователю простыми средствами не удастся. Поэтому лучше использовать другие единицы размеров шрифта, например, проценты.
Насыщенность шрифтов: свойство font-weight
Насыщенность шрифта (или жирность) управляется с помощью свойства font-weight. Значениями этого свойства могут быть ключевые слова bold, bolder, lighter и normal, которые устанавливают полужирное, жирное, светлое и нормальное начертание шрифта. Также можно использовать условные единицы от 100 до 900 с шагом 100, причем чем больше значение, тем выше жирность. Установленное по умолчанию нормальное начертание шрифта эквивалентно значению 400, а стандартный полужирный текст — 700. Задание насыщенности шрифта может выглядеть следующим образом:
P {font-weight: 900;}Стиль шрифта: свойство font-style
Свойство font-style определяет начертание шрифта как обычное, курсивное или наклонное.
Данным начертаниям соответствуют значения свойства normal, italic и oblique. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
Капитель: свойство font-variant
Капителью называется текст, набранный прописными буквами уменьшенного размера. Для создания такого эффекта используется свойство font-variant со значением small-caps. Особенность капители заключается в том, что заглавные и строчные буквы при ее использовании сохраняются. Браузер Internet Explorer до шестой версии отображает текст неправильно, заменяя все символы прописными. Остальные браузеры преобразуют символы вполне корректно.
Рис. 11.3. Пример использования различных значений свойств font-weight, font-style и font-variantДальше >>
< Лекция 10 || Лекция 11: 12 || Лекция 12 >
Усовершенствованная стилизация текста и позиционирование с помощью CSS(3)
Усовершенствованная стилизация текста и позиционирование с помощью CSS(3)Режим записи
horizontal-tb
- -webkit-writing-mode: horizontal-tb;
- -MOZ-режим письма: горизонтальный-ТБ;
- -ms-write-mode: горизонтальный-tb;
- режим письма: горизонтальный-tb;
Horizontal-BT
- -WebKit-Writing-Mode: Horizontal-BT;
- -MOZ-режим письма: горизонтальный-BT;
- -ms-write-mode: горизонтальный-bt;
- режим письма: горизонтальный-bt;
вертикальный-rl
- -webkit-writing-mode: вертикальный-rl;
- -MOZ-режим письма: вертикальный-RL;
- -ms-write-mode: вертикальный-rl;
- режим письма: вертикальный-rl;
вертикальный-lr
- -webkit-writing-mode: вертикальный-lr;
- -moz-writing-mode: вертикальный-lr;
- -ms-write-mode: вертикальный-lr;
- режим записи: вертикальный-lr;
Направление
rtl
- направление: rtl;
Режим записи + направление
горизонтальный-bt + rtl
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.вертикальный-lr + rtl
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.вертикальный-rl + rtl
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.Трансформация
поворот (180 градусов)
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.поворот (90 градусов)
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.поворот (45 градусов)
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.поворот (-90 градусов)
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.поворот (-45 градусов)
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.Сгенерированный контент + преобразование
| Квартал | Яблоки | Апельсины | Груши | Персики |
|---|---|---|---|---|
| Q1 | 105 000 | 99 000 | 78 890 | 88 890 |
| Q2 | 108 369 | 105 632 | 98 895 | 103 895 |
| Q3 | 87 658 | 56 895 | 103 598 | 123 598 |
| четвертый квартал | 98 784 | 98 754 | 99 698 | 85 698 |
Колонны
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.
Регионы
область потокового содержимого
Быстрая коричневая лиса перепрыгивает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку. Быстрая коричневая лиса прыгает через ленивую собаку.
Не регион
поток-из региона 1
Не регион
поток-из региона 2
Не регион
поток-из региона 3
Цитаты
Одиночная кавычка
Лучший способ предсказать будущее — изобрести его.
Вложенная цитата
Лучший способ предсказать будущее
— это изобрести его.
Вложенная цитата (свойство кавычек CSS отсутствует)
Лучший способ предсказать будущее
— это изобрести его.
@ шрифт
ДО БЕСКОНЕЧНОСТИ И ДАЛЕЕ!
Текстовая тень
Привет, мир
Оформление текста в CSS — темы масштабирования
Обзор
Свойство text-decoration в свойстве CSS применяет к тексту различные типы оформления, чтобы улучшить его внешний вид и сделать его более привлекательным для пользователей. Будучи сокращением для нескольких свойств CSS, оформление текста в CSS упрощает объединение нескольких свойств оформления текста.
Например, он может устанавливать значения для многих параметров, таких как линия оформления текста (обязательно), цвет оформления текста, толщина оформления текста и стиль оформления текста.
Здесь мы применяем к нашему тексту пунктирную линию цвета морской волны размером 5 пикселей.
Встроенное содержимое можно украсить с помощью линий оформления текста (таких как подчеркивание, надчеркивание, сквозная линия или их комбинация) и изменения их цвета, толщины и стиля (точечные, с двойной линией и т.
д.).
Работа над оформлением текста в CSS
Оформление текста в CSS можно применять ко всем элементам HTML для улучшения внешнего вида встроенных элементов по выбору разработчика. Его можно использовать как встроенный CSS, внешний CSS или внутренний CSS.
Синтаксис :
- Линия устанавливает тип линии, необходимой для текста, будь то подчеркнутая, надчеркнутая или зачеркнутая.
- Цвет определяет цвет декоративной линии.
- Стиль относится к стилю декоративной линии (волнистая, пунктирная, сплошная, пунктирная и т. д.).
- Толщина задает значения толщины штриха.
text-decoration-line
CSS-свойство text-decoration-line относится к декоративной линии, применяемой к тексту в элементе. Свойство может быть задано как отсутствие или одно или несколько значений, разделенных пробелом.
Пример:
Синтаксис:
Значения:
| Значение | Функциональность |
|---|---|
| нет | Значение по умолчанию — нет. Это относится к отсутствию оформления текста. |
| подчеркивание | Подчеркивание определяет, что под текстом находится декоративная линия. |
| Overline | Overline определяет, что текст имеет декоративную линию над ним. |
| сквозной | сквозной относится к тексту, через который проходит декоративная черта (перечеркнутая). |
| blink | Blink определяет, что текст мигает или мерцает (включается и выключается). |
Код:
Выход:
текст-декорация-цвет
text-decoration-color в свойстве CSS относится к цвету декоративной линии, примененной к тексту. в элементе.
Пример:
Синтаксис:
Значения:
Значения цвета могут быть указаны различными способами:
| Тип значения | Функциональность |
|---|---|
| Имя цвета | Значения назначаются с помощью имен цветов. |
| RGB | RGB относится к красному, зеленому и синему, а значение задается в виде значений (в диапазоне от 0 до 255) красного, зеленого и синего соответственно. |
| HSL | HSL относится к оттенку, насыщенности и яркости и определяет точный оттенок цвета. |
| Шестнадцатеричный | Цвета определяются символом #, за которым следует 6-значное представление. |
Обратитесь к темам CSS Color — Scaler, чтобы узнать о цветах CSS.
Код:
Вывод:
text-decoration-style
Свойство text-decoration-style в CSS относится к стиль или тип декоративной линии, примененной к тексту в элементе .
Пример:
Синтаксис:
Значения:
| Значение | Функциональность |
|---|---|
| двойная | Двойная определяет, что двойная линия будет создана в качестве декоративной линии. |
| сплошной | сплошной определяет сплошной стиль. |
| Пунктирная | Пунктирная определяет, что декоративная линия будет пунктирной. |
| с точками | С точками определяет пунктирный стиль декоративной линии. |
| волнистый | Волнистый определяет волнистый стиль. |
| начальный | начальный — это значение по умолчанию. |
| наследовать | Наследовать определяет, что родительский элемент наследует значение. |
Код:
Вывод:
text-decoration-thidness
Свойство CSS text-decoration-thickness относится к толщине декоративной линии, применяемой к тексту в элемент.
Пример:
Синтаксис:
Значения:
| Значение | Функциональность |
|---|---|
| авто | Это значение по умолчанию..ppt/slide_7.jpg) Auto определяет, что браузер установит значение автоматически. |
| шрифт формы | Использует значение, установленное в файле шрифта формы. Если такое значение не присвоено, работает как auto. |
| длина | Определяет толщину декоративной линии, применяемой к тексту, как длину. |
| процент | Определяет толщину декоративной линии, применяемой к тексту, в процентах от 1em текущего шрифта. |
Код:
Выход:
Сокращенное свойство
9010 2 Свойство text-decoration в CSS является сокращенным свойством для нескольких родительских свойств, а именно:
строка оформления текста
стиль оформления текста
цвет оформления текста
толщина оформления текста
Написание всех этих свойств по отдельности становится утомительным и делает код длинным.
Таким образом, чтобы улучшить читаемость кода, свойство text-decoration сокращено, поскольку оно охватывает все четыре свойства.
Таким образом, чтобы улучшить читаемость кода, свойство text-decoration сокращено, поскольку оно охватывает все четыре свойства.Код:
Вывод:
Демонстрация оформления текста Значения
Краткий обзор значений, используемых для оформления текста в CSS:
Совместимость с браузерами
Полная форма свойства text-decoration в css прекрасно работает во всех браузерах. Однако сокращенная форма несовместима с такими браузерами, как Internet Explorer.
Заключение
- Text-decoration-property в CSS используется для применения декоративных линий к тексту.
- Внешний вид линий можно изменить в зависимости от их положения, цвета, стиля и толщины.
- Линия относится к типу линии, необходимой для текста, или к тому месту, где должна располагаться линия. Он определяет, будет ли текст подчеркнут, надчеркнут или зачеркнут.
