Советы по 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 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

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

восемнадцать − семь =