Советы по CSS


Для тех, кто изучает таблицы каскадных стилей несколько простых и полезных советов по основам языка CSS.

Как задать цвет в CSS

Цвет для тегов можно задавать несколькими способами

p { color: red } p { color: #F00 } p { color: #FF0000 } p { color: rgb(255, 0, 0) } p { color: rgb(100%, 0%, 0%) } 

 

Как задать имя шрифта в CSS

p { font-family: "Arial" } p { font-family: "Verdana", "Tahoma" } p { font-family: "Verdana", "Tahoma", sans-serif } 

 

Как задать стиль шрифта в CSS

p { font-family: "Arial"; font-style: normal } p { font-family: "Arial"; font-style: italic } p { font-family: "Arial"; font-style: oblique } 

 

Как задать размер шрифта в CSS

.text1 { font-size: 12pt; font-family: "Arial" } .text1 { font-size: large; font-family: "Arial" } .text1 { font-size: 150%; font-family: "Arial" } .text2 { font-size: smaller; font-family: "Arial" } 

 

Как задать цвет шрифта в CSS

.text1 { font-size: 12pt; font-family: "Arial"; color: red } .text2 { font-size: 12pt; font-family: "Arial"; color: #00FF00 } .text3 { font-size: 12pt; font-family: "Arial"; color: rgb(255, 0, 0) } 

 

Как отформатировать текст в CSS

/* Расстояние между символами в словах */ p { letter-spacing: normal; font-style: italic; font-weight: normal } p { font-size: 12pt; color: red; letter-spacing: 5mm } /* Расстояние между словами */ p { word-spacing: normal; font-style: italic; font-weight: normal } p { font-size: 12pt; color: red; word-spacing: 5mm } /* Отступ первой строки */ p { text-indent: 10mm; font-style: italic; font-weight: normal } /* Вертикальное расстояние между строками */ p { line-height: normal; font-style: italic; font-weight: normal } p { font-size: 12pt; color: red; font-family: "Arial"; line-height: 5mm } 
<!-- Горизонтальное выравнивание текста --> <p style="text-align: center">Абзац с выравниванием по центру</p> <p style="text-align: left">Абзац с выравниванием по левому краю</p> <p style="text-align: right">Абзац с выравниванием по правому краю</p> <p style="text-align: justify">Абзац с выравниванием по ширине</p> 
/* Вертикальное выравнивание текста */ td { font-size: 12pt; color: red; vertical-align: baseline } td { font-size: 12pt; color: red; vertical-align: middle } td { font-size: 12pt; color: red; vertical-align: top } td { font-size: 12pt; color: red; vertical-align: bottom } 
<!-- Подчеркивание, надчеркивание и зачеркивание текста --> <p style="text-decoration: none">Текст</p> <p style="text-decoration: underline">Подчеркнутый текст</p> <p style="text-decoration: overline">Надчеркнутый текст</p> <p style="text-decoration: line-through">Зачеркнутый текст</p> <p style="text-decoration: blink">Мигающий текст</p> <!-- Изменение регистра символов --> <h1 style="text-transform: capitalize">заголовок из нескольких слов</h1> <h1 style="text-transform: uppercase">заголовок2</h1> <h1 style="text-transform: lowercase">ЗАГОЛОВОК3</h1> <!-- Обработка пробелов между словами --> <p style="white-space: normal"> Строка 1 Строка 2 </p> <p style="white-space: pre"> Строка 1 Строка 2 </p> <p style="white-space: nowrap"> Строка 1 Строка 2<br> Строка 3 </p> 

 

Как сделать отступы в CSS

/* Внешние отступы */ body { margin-left: 0 } body { margin-right: 5% } body { margin-top: 15mm } body { margin-bottom: 20px } body { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0 } body { margin: 15mm 5% 20px 0 } body { margin: 0 } /* Внутренние отступы */ td { padding-left: 0 } td { padding-right: 50px } td { padding-top: 15mm } td { padding-bottom: 20px } td { padding: 15mm 50px 20px 0 } td { padding: 5px } 

 

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Добавить коментарий

3 × два =