Понятие о каскадных таблицах стилей
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида html-документа.
CSS может быть применен как к отдельному тегу (элементу веб-страницы), так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS дополняет язык HTML и значительно расширяет его возможности.
Встроенные стили
Стилевое описание:
<h1 style = "color: blue; font-style: italic"> Заголовок синий курсив</h1>
Отображение в браузере:
Таблицы стилей.
Стилевое описание:
<style>
h1 {color: blue;
font-style: italic}
</style>
Разметка веб-страницы:
<body>
<h1>Заголовок 1</h1>
<hr>
<p>Абзац 1</p>
<h1>Заголовок 2</h1>
<hr>
<p>Абзац 2</p>
</body>
Отображение в браузере:
Внешние таблицы стилей.
Описание стилей в css-файле:
h1
{color: red}
/*Заголовок красного цвета*/
body
{background: #ffffcc; font-family:
Verdana}
/*цвет фона #ffffcc, шрифт Verdana*/
Подключение css-файла к html-документу:
<head>
<link rel = stylesheet type = text/css
href = "1.css">
</head>
Отображение в браузере:
Применение стилей форматирования шрифта
p {
font-family: Tahoma;
/* Тип шрифта */
font-weight: bold;
/* Жирность шрифта */
font-size: 18pt;
/* Размер шрифта */
color: tomato;
/* Цвет текста */
text-align: center;
/* Выравнивание текста */
}
Сокращенная запись:
p {
font: bold 18pt Tahoma;
color:tomato; text-align:center;
}
Отображение в браузере:
Применение стилей для блока
div {
width:80%;
/*Ширина блока */
background: #f0fff0;
/*Цвет фона*/
border: 3px solid limegreen;
/*Толщина, стиль и цвет границы */
padding: 10px; /*Поля*/
font: 18pt Tahoma;
/*Размер и тип шрифта */
color: seagreen;
/*Цвет текста */
}
Отображение в браузере:
Отступы в блоке
padding: 20px 10px;
margin: 10px 80px;
Отображение в браузере:
Использование классов в CSS
Стилевое описание:
p {/* Обычный абзац */
text-align: justify;
/*Выравнивание текста по ширине*/}
.figura {/* Абзац с классом figura */
color: navy;
/*Цвет текста*/
margin-left: 20px;
/*Отступ слева*/
border-left: 1px solid navy;
/*Граница слева от текста*/
padding-left: 15px; /*Расстояние от
линии до текста*/
}
Указание на использование класса:
<p class = "figura">
Отображение в браузере:
Упражнения
В свою рабочую папку скопируйте файл 8.html (\\Serg-pc\задания\html\upr\pr8 ). Откройте его. Оформите абзацы этой веб-страницы, используя встроенные стили.
1-й абзац — style = "color: #c71585; font-style: italic" (цвет текста — лилово-красный, начертание — курсив).
2-й абзац — style = "color: #c71585; font-size: 16px; text-align: justify" (цвет текста — лилово-красный, размер шрифта — 16 рх, выравнивание текста — по ширине).
3-й абзац — style = "color: #dc143c; font-family: Arial" (цвет текста — малиновый, шрифт — Arial).
4-й абзац — style = "color: teal; font-family: Verdana; fontsize: 16px" (цвет текста — зеленовато-синий, шрифт — Verdana, размер шрифта — 16 рх).
Откройте файл 8.html. Оформите веб-страницу, используя таблицы стилей.
<style>
p {color: teal; font-style: italic; text-align: justify}
h1 {font-family: Verdana; text-align: center}
</style>
Откройте файл 8.html. Оформите веб-страницу, используя внешние таблицы стилей (описание стилей в файле \\Serg-pc\задания\html\upr\pr8 \\Serg-pc\задания\html\upr\pr8\text.txt \\Serg-pc\задания\html\upr\pr8\1.css ). Параметры стилей задайте самостоятельно. Сохраните страницу.
Создайте страницу. Примените к блокам текста различное форматирование, используя классы. (Текст для страницы в файле \\Serg-pc\задания\html\upr\pr8 \\Serg-pc\задания\html\upr\pr8\text.txt )
1-й блок:
div.b1 {
width: 300px; /* Ширина */
background: #d3d3d3; /* Цвет фона */
padding: 8px; /* Поля */
padding-right: 40px; /* Правое поле */
border: solid 1px black; /* Стиль, толщина и цвет границы */
fl oat: left; /*Выравнивание блока по левому краю */
}
2-й блок:
div.b2 {
width: 300px;
background: #f0e68c;
padding: 8px;
border: solid 2px black;
fl oat: left;
position: relative; /* Расположение блока относительно первого блока */
top: 40px; /* Смещение по вертикали вниз */
left: -70px; /*Смещение по горизонтали влево*/
}
Должно получиться:
Используйте класс для форматирования слова Призма во втором блоке.
Описание класса:
.termin {font-family: Verdana}
Применение класса:
<span class = "termin">Призма</span>