Home-theater-designers
Каскадные таблицы стилей (CSS) описывают, как HTML отображает элементы на экране. CSS может управлять макетом нескольких веб-страниц с помощью нескольких строк кода.
CSS имеет свойства форматирования, которые влияют на интервалы, внешний вид и выравнивание текста. Вот некоторые свойства, которые вы можете использовать для стилизации текста на страницах вашего приложения.
СДЕЛАТЬ ВИДЕО ДНЯ
1. Цвет текста
цвет свойство указывает основной цвет переднего плана вашего текста. Вы можете использовать предопределенное имя цвета, например красный , белый , или зеленый . Вы также можете использовать шестнадцатеричное значение или другие единицы, такие как RGB, HSL и RGBA.
CSS-фреймворки, такие как Попутный ветер CSS имеют встроенную цветовую функцию, отображающую различные оттенки. Это облегчит вам выбор оттенка, который вы предпочитаете. Давайте изменим цвет следующих заголовков, используя некоторые из этих свойств:
<body>
<h1>Change My Color</h1>
<h2>Change My Color</h2>
<h3>Change My Color</h3>
<h4>Change My Color</h4>
</body>
CSS будет выглядеть так:
h1 {
color: orange;
}
h2 {
color: #ff6600;
}
h3 {
color: rgb(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}
И стилизованный текст будет выглядеть так:
2. Цвет фона
Вы можете использовать фоновый цвет собственность для создания привлекательные фоны . Используйте его, чтобы установить разные фоны для следующих заголовков:
<body>
<h1>Change My Background Color</h1>
<h2>Change My Background Color</h2>
<h3>Change My Background Color</h3>
<h4>Change My Background Color</h4>
</body>
Со следующим CSS:
h1 {
background-color: orange;
}
h2 {
background-color: #009900;
}
h3 {
background-color: rgb(204, 0, 0);
}
h4 {
background-color: hsl(60, 100%, 50%);
}
Когда ваш браузер отобразит эту страницу, она будет выглядеть примерно так:
3. Выравнивание текста
выравнивание текста Свойство устанавливает горизонтальное выравнивание текста. Это значение может быть левый , верно , центр , или оправдывать .
Значение выравнивания растягивает каждую строку текста, поэтому все они занимают одинаковую ширину на правом и левом полях. Используйте следующий пример кода, чтобы изучить эти четыре значения:
как написать строку в слово
<body>
<h1>Align Me Left</h1>
<h2> Align Me Right</h2>
<h3>Align Me center</h3>
<p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
Используйте следующий CSS для применения различных выравниваний:
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4{
text-align: justify;
}
В браузере это будет выглядеть так:
4. Направление текста
направление текста свойство определяет направление текста. Определите направление, используя свойства ртл (справа налево) или лтр (слева направо). Эти два указывают, в каком направлении вы хотите, чтобы текст текла.
Например, используйте ртл при работе с языками, написанными справа налево, такими как иврит или арабский. Ты используешь лтр для языков, написанных слева направо, таких как английский.
Давайте проиллюстрируем это кодом ниже:
<body>
<div>
<p class='ex1'>This paragraph goes from right to left. The cursor
moves from right to left when you type more information on the
page.</p>
<p id="ex2">This paragraph goes from left to right. The cursor moves
from left to write when you type more information on the page!</p>
</div>
</body>
С этим сопровождающим CSS:
.ex1 {
direction: rtl;
}
#ex2 {
direction: ltr;
}
Конечный результат будет выглядеть примерно так:
5. Оформление текста
украшение текста Свойство задает внешний вид декоративных линий в тексте. Это сокращение от строка оформления текста, цвет оформления текста, стиль оформления текста , и толщина оформления текста свойство. Если вы не хотите иметь свойство для элементов со ссылками, используйте текстовое оформление: нет ;
Вам следует избегать подчеркивания обычного текста, так как этот стиль обычно указывает на ссылку. На следующем рисунке показаны некоторые примеры в коде:
1БФБ87Э93239ДАФ4500749Д50АДФБ8Д7ДЕ2ФК64ДВы можете применять различные эффекты украшения с помощью этого CSS:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
a {
text-decoration: none;
}
И они будут отображать что-то вроде этого:
как узнать, откуда пришло письмо
6. Преобразование текста
преобразование текста Свойство указывает тип регистра, в котором появляются буквы. Это могут быть прописные или строчные буквы. Вы также можете использовать его, чтобы сделать первую букву каждого слова заглавной:
В следующем примере показано, как это сделать в коде:
<body>
<h1>Examples of text-transform property</h1>
<p class="uppercase">This sentence is in uppercase.</p>
<p class="lowercase">This sentence is in lower case.</p>
<p class="capitalize">Capitalize this text.</p>
</body>
CSS-файл:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Со следующим результатом:
7. Расстояние между буквами
Межбуквенное расстояние Свойство определяет расстояние между буквами в тексте. В следующем примере показано, как указать различные стили интервалов.
БА60А3А74ДД813ЭБ2К8Д9842А344ФЭ5Д12Ф66ДБ9Используйте пиксели или другие единицы измерения в файле CSS:
h2 {
letter-spacing: 7px;
}
h3 {
letter-spacing: -2px;
}
И полученный текст будет растянут или сжат:
8. Расстояние между словами
межсловный интервал Свойство задает пробел между словами в тексте. Браузеры имеют стандартную длину пробела между словами, но вы можете установить свою собственную. В следующем примере показано, как увеличить или уменьшить расстояние между словами:
<body>
<h1>Examples of the Word-spacing Property</h1>
<p>Normal word spacing.</p>
<p class="ex1">Large word spacing.</p>
<p class="ex2">Small word spacing.</p>
</body>
Используя этот CSS:
p.ex1 {
word-spacing: 1rem;
}
p.ex2 {
word-spacing: -0.3rem;
}
Вы можете ясно увидеть эффект межсловного интервала:
9. Высота строки
высота линии Свойство задает интервал между строками в абзаце. Стандартная высота строки по умолчанию в большинстве браузеров составляет от 110% до 120%. Следующий код иллюстрирует, как его изменить:
<body>
<h1>Using line-height</h1>
<p>
Standard line-height.
Standard line-height.
</p>
<p class="small">
Small small line-height.
Small line-height
</p>
<p class="big">
Bigger line-height.
Bigger line-height.
</p>
</body>
Используя следующий CSS:
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
Вы можете увидеть результаты между каждой строкой в каждом абзаце:
10. Текстовая тень
тень текста свойство применяет тени к тексту. Вы должны указать горизонтальную тень и вертикальную тень. Текстовая тень может включать цвет и радиус размытия. Давайте проиллюстрируем это с помощью следующего кода:
<body>
<h1>Examples of Text-shadow effect.</h1>
<h1 class="ex1">Text-shadow with color</h1>
<h1 class="ex2">Text-shadow with blur effect.</h1>
</body>
С помощью этого CSS:
h1 {
text-shadow: 2px 2px;
}
.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px red;
}
Будет производить некоторые необычные и интересные эффекты:
Зачем изучать свойства стиля текста в CSS?
CSS — это основа современного веб-дизайна. Будь то ванильная форма или фреймворк, основная функция свойств CSS одинакова. Овладение свойствами форматирования текста позволяет создавать привлекательные и удобочитаемые пользовательские интерфейсы.
Последняя версия CSS, CSS3, представляет новые концепции от анимации до макетов с несколькими столбцами. Эти концепции упрощают создание профессиональных приложений и документов.