Основы CSS. Часть 1. Введение

CSS CSS
Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа.

Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.

Пример CSS кода
Пример CSS кода

CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц.

Более подробно о том, что такое CSS можно узнать в нашей статье.

Код стилей CSS можно писать непосредственно в HTML. Делается это с помощью парного тега <style></style>. Вот пример:

<style>
    body {
      font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
      font-size: 11pt; /* Размер основного шрифта в пунктах  */
      background-color: #f0f0f0; /* Цвет фона веб-страницы */
      color: #333; /* Цвет основного текста */ 
    }
</style>

Однако, такой подходит используется достаточно редко. Гораздо проще подключить отдельный CSS-файл к HTML-файлу. Делается это следующим образом:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Флексагон</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css"> /* Подключение CSS-файла */
 </head>
 <body>
 </body>
</html>

Типы CSS стилей

Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <H1>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Стиль автора

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

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.

Примеры реализации CSS кода

#1 Смена семейства шрифтов

body {
      font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
    }

#2 Смена размера шрифта

body {
      font-size: 11pt; /* Размер основного шрифта в пунктах  */
 
    }

#3 Смена цвета фона

body {
      background-color: #f0f0f0; /* Цвет фона веб-страницы */
    }

#4 Смена цвета текста

body {
      color: #333; /* Цвет основного текста */ 
    }

Более подробную информацию по каждому CSS стилю можно найти на htmlbook.

Ссылка на htmlbook.

Оцените статью
( 1 оценка, среднее 4 из 5 )
Hack Life - веб для всех
Добавить комментарий