Лого SiteHere.ru

Урок 2. Базовые селекторы

Урок 2. Базовые селекторы

Здравствуй, уважаемый читатель.

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


Перед изучением CSS пройдите первый урок:


Урок 1. Что такое CSS?

Теория и практика

Для того чтобы определить свойство в CSS с элементом на странице необходима какая-то связь. Данная связь осуществляется через СЕЛЕКТОР.

Селектор в CSS

1) Чтобы определить свойства для определенных элементов, можно воспользоваться следующим способом. Селектором может быть название тега. Как это выглядит на практике:

1
2
3
4
5
6
7
body{
    background-color:#C1BAFF;
}
 
p{
   color:#4600BF;
}

Из примера видно. Что мы определили два селектора body и p. И прописали каждому определенные свойства.

Посмотреть примерСкачать

Если вы задаете с помощью этого способа атрибуты, то стиль применится ко всем тегам <p> на странице. К тегу <body> он применится один раз, так как он всегда должен быть один на странице. Для того чтобы задать выбранному абзацу определенный стиль существует второй способ.

2) Также связь реализуется в html с помощью двух атрибутов, которые пишутся для элемента, имеющий определенный стиль. Данные два атрибута необходимо всегда помнить. Это атрибуты: id="" и class="".

Пример html кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <p class="title">Изучение CSS</p>
        <p>Vivamus nec nulla a ipsum vulputate interdum. Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet.</p>
    </div>
</body>
</html>

И пример CSS кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{
    background-color:#C1BAFF;
}
 
p{
   color:#4600BF;
}
 
#content{
    background-color:#E4E3ED;
}
 
.title{
    color:#F20020;
}

Сразу посмотрите что получилось

Посмотреть примерСкачать

Обо всем, что мы сделали, по порядку…

В html странице мы задали для тега div атрибут id="content" и для тега p атрибут class="title". Данными атрибутами мы указали что хотим применить стиль только к данным двум тегам. Далее в коде CSS через решетку "#"content указали селектор прописанный в id и далее применили свойства.

Похожая ситуация и со вторым селектором. Только его мы записали через точку а затем значение селектора .title class в коде html.

Давайте еще раз повторим!

    Если в html коде используем селектор
  • id — тогда в CSS коде он начинается с решетки "#"
  • class — тогда в CSS коде он начинается с точки "."

Здесь нет ничего сложного. Если кратко то: задаем стиль для элемента в html, а затем описываем стиль для этого элемента в селекторе CSS.

Мы рассмотрели как создаются первые селекторы и увидели пример на реальной html странице. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Больше практикуйтесь!

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

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