Домой / Учебник Css / 3 Урок. Классы div и id в Css

3 Урок. Классы div и id в Css

В Css есть очень замечательная вещь, которая называется "классы и селекторы". С помощью классов можно задать разные стили хоть каждому слову.

Селектор классов в css

Попробуем задать класс только одному параграфу на странице, а остальным не будем.

Html часть:

<HTML>
  <head>
    <title>Моя страница</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p class="xxx">Привет, меня зовут Павел. Это мой сайт...</p>

    <p>Здесь я размещаю свои фотографии, музыку, и т. д.</p>

    <p>У меня много сайтов и я зарабатываю на них деньги.</p>
  </body>
</HTML>

В css файле мы напишем так:

p.xxx {color:red; background:chocolate; font-size:25;}

Результат:

Классы в css
Классы в css

Одному из параграфов мы назначили класс "xxx", которому потом придавали стили в css файле. Название класса можно писать любое, главное, чтобы в html и в css эти названия совпадали. Таким образом, тот параграф, к которому мы прописали класс, станет отличаться от всех остальных.

Хочется еще заметить, что один и тот же класс можно присваивать разным элементам Посмотрим пример.

Html часть:

<HTML>
    <head>
      <title>Моя страница</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <h1 class="center">Заголовок</h1>
      <p class="center">Параграф</p>
      <div class="center">Контейнер</div>
    </body>
</HTML>

Css часть:

.center {text-align: center;}

Результат:

Один класс разным элементам
Один класс разным элементам

Заметьте, что в этом случае в стилях мы уже не указываем конкретный элемент, типа p.center, а оставляем только .center. А если мы все-таки напишем p.center, то стили будут применены только к параграфу с классом center, а к остальным элементам с этим классом нет.

Задаем класс каждому отдельному слову

Как я уже говорил, мы можем задать класс любому слову. Попробуем это сделать:

Html часть:

<HTML>
    <head>
      <title>Моя страница</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <span class="ix">Css</span> - каскадная таблица стилей.
        Этот <span class="ad">язык</span> очень полезен
        для создания <span class="lf">хорошего</span> и
        качественного дизайна вашего
        интернет-сайта.
    </body>
</HTML>

Css часть:

span.ix {color:red; background:bisque;}
span.ad {color:red; background:cornflowerblue;}
span.lf {color:red; background:deeppink;}

Результат:

Классы для span
Классы для span

Что такое span? Для это элемент html. В отличие от параграфа (p), span не переносит текст на новую строчку, а оставляет на месте. Хорошо подходит для небольшого кусочка текста, или же для одного слова.

 

Селектор id в css

В селекторе id, в отличие от класса, нельзя задать одни и те же свойства разным элементам. Но работает точно так же. Правда, записывается немного по-другому.

Html часть:

<HTML>
    <head>
      <title>Моя страница</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="xxx">
            Css - каскадная таблица стилей. Этот язык очень полезен
            для создания хорошего и качественного дизайна вашего
            интернет-сайта.
        </div>
    </body>
</HTML>

Css часть:

div#xxx {color:red; background:bisque;}
Селектор id в css
Селектор id в css

В место точки ставится решётка - #. Также можно не писать элемент, а сразу начать с #:

#xxx {color:red; background:bisque; и т. д.;}

Честно говоря, не знаю, зачем придумали селектор id. Можно ведь пользоваться лишь классами, и все.

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

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