Использование css

5 мая 2020 - Администратор

Как использовать 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 стилей

использование 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 будет иметь вид
Как видно второй абзац согласно прописанному свойству  цвета текста будет иметь зеленый цвет текста и выравнивание в нем будет по центру.

внутренние css стили

Вернуться к содержанию курса по html

Полезно : Регистрация домена и размещение сайта на хостинге

Поделиться 

 
 
Комментарии (0)

Нет комментариев. Ваш будет первым!