Использование css
Как использовать css
Css это каскадные таблицы стилей Css используются для описания внешнего вида элементов (цвет, размер шрифта, шрифт) html документа Таким образом, логика веб страницы сохраняется в html документе, а его дизайн, внешний вид может храниться в другом документе стиля страницы, документе с расширением css. Как правило документ стилей сайта называется style.css
Привязка файла стилей css к html странице
Чтобы привязать документ стилей к html документу между тегами <head> </head> прописывается тег ссылки на файл стилей css
<link href="путь к файлу стилей css" rel="stylesheet" type="text/css">
Например привязка нашей страницы к файлу стилей style.css который лежит в корнейвой папке сайта
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">>
</head>
Структура файла стилей css
Файл стилей состоит из набора правил, которые описывают внешний вид , дизайн тегов
Любое правило в файле css имеет следующую структуру:
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Селектор это как правило тег html документа , свойство это атрибут тега
Например правило для тега абзаца <p>
P {
text-align: justify; /* Выравнивание по ширине */
color: red;
font-size: 20pt;
}
Для всех тегов абзаца в html документе текст будет выравниваться по ширине, цвет текста будет красный, размер текста будет 20 пунктов
Перечислим основные свойства и значения для написания правил css
| Свойство | Название | Значения | Пример |
| Размер текста | font-size | ex,pt,% | font-size: 11pt; |
| Шрифт текста | font-family | Arial, Verdana, sans-serif | font-family: Arial, Times New Roman, Calibri; |
| Цвет текста | color | Код цвета | color: black; |
| Цвет заднего фона | background-color | Код цвета | background-color: white; |
| Насыщенность шрифта | font-weight | bold,normal,lighter | font-weight: normal; |
| Выравнивание текста | text-align | justify - по ширине center left right |
text-align: justify |
Чтобы создать файл css, достаточно открыть блокнот, написать нужные правила и сохранить с расширением css
Приведем пример веб страницы использующей стили css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Изучаем css стили</h1>
<p>Первый абзац со стилем из файла style.css.</p>
<p> Второй абзац со стилем из файла style.css.</p>
</body>
</html>
Файл css стилей style.css находится в корневой папке сайта и имеет вид
BODY {
font-family: Arial; /*шрифт */
font-size: 11pt; /* Размер шрифта в пунктах */
background-color: #cccccc; /* Цвет фона html-страницы */
color: #333; /* Цвет основного текста */
}
H1 {
color: #990000; /* Цвет основного заголовка */
font-size: 25pt; /* Размер шрифта основного заголовка в пунктах */
font-family:Times; /* шрифт основного заголовка */
font-weight: bold; /* Выделение жирным текста основного заголовка */
}
P {
text-align: justify; /* Выравнивание по ширине */
color: red;
font-size: 20pt;
}
В итоге мы получим следующую веб страницу на основе определённых нами css стилей
Можно опеределить так называемые внутренние стили для конкретного элемента, тега html страницы в самом теге с помощью конструкции
<тег style=" свойство1=занчение1; свойство2=значение2….”>
Пример определения внутреннего стиля
<p style="font-size: 200%; font-family: monospace; color: green; text-align: center;">
Внутренний стиль имеет приоритет над стилем css файла Это значит что все теги имеющие внутренний стиль будут оформляться согласно своему внутреннему стилю, а все остальные согласно стилю из css файла
Пример html страницы использующей внутренний стиль и стиль css файла
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Изучаем css стили</h1>
<p>Абзац со стилем из файла style.css.</p>
<p style="font-size: 200%; font-family: monospace; color: green; text-align: center;">
Абзац с использованием внутреннего стиля абзаца</p>
<p> Третий абзац со стилем из файла style.css.</p>
</body>
</html>
С тем же файлом style.css будет иметь вид
Как видно второй абзац согласно прописанному свойству цвета текста будет иметь зеленый цвет текста и выравнивание в нем будет по центру.
Вернуться к содержанию курса по html Перейти к теме Блочная верстка
Полезно : Регистрация домена и размещение сайта на хостинге
Поделиться
Нет комментариев. Ваш будет первым!