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

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

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

CSSCascading 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>

    Поделитесь уроком с коллегами и друзьями:

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

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

    *
    *

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить