Что такое CSS и его преимущества для HTML страницы?

что такое cssЭто язык стилей, который позволяет отделить внешний вид html страницы от её содержания. Принят консорциумом W3C в декабре 1996 года в качестве стандарта.

Конкретный пример использования css стилей

Допустим, Вы хотите, что бы текст в абзацах отображался шрифтом Times. Без использования CSS потребовалось бы вокруг каждого абзаца текста вставить тег <font> с именем шрифта Times.

Примерно так:
<html>
<body>
<font size="10" face="Times">
<p> Какой нибудь текст </p>
</font>
</body>
</html>

А теперь, предположим, будет у Вас сто станиц, и необходимо изменить шрифт на Verdana.
Неприятная ситуация ведь потребуется на каждой странице, для каждого абзаца, поменять имя шрифта с Times на Verdana.

С помощью CSS можно вынести стиль отображения текста абзацев в отдельный файл стилей
Обычно его называют style.css

p{
font-size: 10;
font-family: 'Verdana';
}

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

Способы подключения css

Что бы подключить файл стилей к странице, надо вставить тег <link> с адресом файла в секцию <head>.
В итоге код страницы будет выглядеть так:

<html>
<head>
<link href="http://site.ru/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p> Какой нибудь текст </p>
</body>
</html>

Ещё один способ, подключить css-файл прямо в коде страницы.

<html>
<head>
  <style type="text/css">
  p{
    font-size: 10;
    font-family: 'Verdana';
  }
  </style>
</head>
<body>
<p> Любой текст </p>
</body>
</html>

Подключение файла не единственный способ применения стилей css к html-документу.

Можно вставить правила оформления прямо внутри тегов, это делается при помощи атрибута style, он еще называется встроенным стилем. Этот атрибут имеет самый высокий приоритет, но применим только к одному какому-нибудь элементу. Код web-страницы будет выглядеть примерно так:

<html>
<body>
<p style="font-size: 10;font-family: 'Verdana';"> Какой нибудь текст </p>
</body>
</html>

Новичкам будет полезна CSS песочница — cssdesk.com, тут можно писать код с подсветкой синтаксиса. И сразу видеть результат сбоку. онлайн css песочница

По окончанию экспериментов можно сохранить полученный HTML и CSS.










РЕАЛЬНЫЙ заработок в интернете с вложениями денег 2018
Быстрый заработок, 1000 рублей за 60 секунд