CSS урок 1. Добавление стилей

Авторadmin / Опубликовано

Цель урока: знакомство с каскадными таблицами стилей. На уроке рассмотрены методы добавления стилей к html-страницы

К оглавлению
Далее

Повторение: блочные и строчные теги

  • Для оформления и использования стилей css применяются блочные теги div и строчные теги span.
  • Вспомним, как они позиционируются на странице и используются:

    • Пример:

    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Элементы span и div</title>
</head>
<body>
  <div>*** DIV 1: Какой-то контент ***</div>
  <div>*** DIV 2: Следует прямо за div 1 ***</div>
  <span>*** SPAN 1: Следует прямо за div 2 ***</span>
  <div> *** DIV 3: Следует прямо за span 1 
    <span>*** SPAN 2: ВНУТРИ div 3 ***</span>
    Продолжение содержимого div 3 ***
  </div>
</body>
</html>

    Результат:

  • Обратим внимание, что span 1 оказался на отдельной строке, только из-за того, что перед ним и после него находятся блочные теги div, которые не «пустили» его на свои строки.
  • Тег span может размещаться внутри тега div, как в нашем примере span 2. Тогда как div никогда не может располагаться внутри тега span. Блочный тег не может быть внутри строчного!

CSS стили. Методы добавления

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства html-тегам

Рассмотрим основные методы добавления стилей:

  • Встраивание (inline)
  • Вложение (embeding)
  • Связывание (linking)
  • Импорт

Метод встраивания (inline) в CSS

Метод встраивания (или строковый стиль) — это самый простой метод добавления стиля. Применяется в том случае, когда необходимо применить стиль только к одному единственному конкретному тегу и только один раз

 
Синтаксис:

<элемент  style = "свойство1: значение; свойство2: значение; . . .">;

 

Рассмотрим основные понятия, встречающиеся при использовании стилей.

css метод встраивания

Пример: Первый абзац без стилей, ко второму абзацу применен стиль
<p>Обычный текст</p>
<p style="color:red; background:#cccccc">Абзац с методом встраивания</p>

Результат:

Обычный текст

Абзац с методом встраивания

Метод вложения (embeding) CSS

Метод вложения или внутренний стиль описывается в области head веб-страницы.

Метод вложения (внутренний стиль) нужен при необходимости использования одинакового стиля для тега (селектора) во всем документе. Например, для тега абзаца p можно добавить стиль данным методом, при этом имея в виду, что все теги абзаца на странице будут оформлены данным стилем

css вложение

  • Итак, селектор — это формальное описание элемента (тега), или их группы, к которому должны быть применены созданные правила стиля.
  • В описании селекторов и имен стилей не должно быть пробелов.
    • Пример: в примере использован метод вложения, поэтому оба абзаца в документе будут стилизованы
    <head>
<style type="text/css">
  p{
	color:red;
	background:#cccccc;
  }
</style>
</head>
<body>
<p>Абзац1</p>
<p>Абзац2</p>
...

    Результат:

    Абзац1

    Абзац2

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

    Пример использования вложенного стиля для разных селекторов (тегов)
    <head>
<style type="text/css">
h1 {
	border-width: 1; 
	border: groove; 
	text-align: center; 
	color: green
	}
h2 {
	color: maroon; 
	font-style: italic
	}
body {
	background-color: #FF0000;
	}
...
</style>

    Метод связывания (Linking) в CSS

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

    Используется метод связывания (или внешний стиль) для того, чтобы обеспечить единый стиль для всех страниц сайта. Подключив файл со стилями ко всем страницам, обеспечится влияние правил, описанных в файле, на все теги

    Чтобы подключить к странице файл с таблицами стилей, надо использовать элемент LINK в секции HEAD:
    Метод связывания CSS

    Задание css1_1.

    • Используя метод встраивания определите цвет текста элемента h1.
    • Используя метод вложения определите задний фон страницы.
    • Используя метод связывания определите написание параграфа курсивным стилем.

    Работайте над текстом:

    <body>
<h1>В моей душе</h1>
<p>
Я хочу быть ребенком, наивным и смелым,<br/>
Ничего не бояться и верить в добро.<br/>
Я бы снова писала по черному белым:<br/>
Два плюс два - ну, четыре, конечно равно! 
</p>
    К оглавлению
    Далее

    Рубрики