CSS - каскадная таблица стилей

Автор: | 27.07.2018

каскадная таблица стилей , введение

  • Введение.
  • CSS - что такое?
  • Использование стилей внутри тега.
  • Использование стилей в теге <head> </head>
  • Использование стилей в отдельном файле.

Язык стилей CSS был разработан для разделения содержимого страницы html и  его представления  (цвет, фон, размер и т.д) . CSS - это каскадная таблица стилей, язык представления страницы сайта.

Стили для страницы html , для каждого элемента html есть свои атрибуты, они либо используются по умолчанию, либо задаются определенным образом, в коде сайта.

Есть несколько вариантов задания стилей для элементов html:

 Для каждого элемента, тега задается свои стили. Не рекомендуется, перегружает код сайта. Пример:

<p style="font-size:12px">Абзац с текстом шрифт размера 12 пиксель</p>
<p style="font-size:16px">Абзац с текстом шрифт размера 16 пиксель</p>

Результат:

Абзац с текстом шрифт размера 12 пиксель

Абзац с текстом шрифт размера 16 пиксель

Для всей страницы задаются стили для различных тегов внутри тега <style> </style>.Задается между тегами <head> </head>  Пример:

<html>

<head> .........
<style type="text/css">
 p {color:blue;} 
</style> .........
</head>
<body>
   <p>Голубой цвет текста во всех абзацах html-страницы</p>

<p>Голубой цвет текста во всех абзацах html-страницы</p>

</body>

</html>

В результате получим

.........
Голубой цвет текста во всех абзацах html-страницы

Голубой цвет текста во всех абзацах html-страницы

 

 

Стили задаются в отдельном файле с расширением CSS.  Позволяют всем страницам сайта выглядеть в едином стиле. Подключается файл тегом

<link rel="stylesheet" type="text/css" href="mysite.css">

где

link rel="stylesheet" type="text/css"

неизменно, а href указывает на подключаемый файл.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *