Типи селекторів

Універсальний селектор

Універсальний селектор відповідає будь-якому елементу, наприклад, наступний запис обнулить відступи для всіх елементів веб-сайту:
* {Margin: 0;}

Селектор Елемента

Селектори елементів використовуються для визначення стилів елементів для всіх сторінок веб-сайту, наприклад, стиль заголовків h1 або загальний стиль абзаців:

h1 {font-family: Lobster, cursive;}
p {letter-spacing: 0.1em;}

Селектор Класу

Селектори класу використовуються для визначення стилів для кількох елементів одного типу, розміщених у різних частинах або на різних сторінках веб-сайту. Для створення заголовка класу headline необхідно додати атрибут class з відповідним значенням в відкриваючий тег <h1>. Далі необхідно задати стиль для зазначеного класу. Даний стиль оформлення можна застосувати і для інших елементів.

Код HTML
Код CSS
<h1 class = "headline"> Інструкція користування персональним комп'ютером </ h1>



<p id="newstyle"> Задамо стиль для даного параграфа </p>
.headline {
text-transform: uppercase;
color: lightblue;
}


#newstyle { color: blue; font-size: 12px;}

Селектор Ідентифікатора

Селектори ідентифікатора використовуються для привласнення стилю одному конкретному елементу. Ідентифікатор id елемента можна використовувати в документі лише один раз, оскільки він виділяє унікальний елемент.
Імена класів можуть складатися з латинських символів, цифр і знаків - і _. Ім'я класу має починатися з літери.



Код HTML
Код CSS
<p id="exp">За визначенням ідентифікатора «exp» - текст вирівнявся по правому краю, став білим на синьому тлі та здобув велику товщину.</p>
#exp {
text-align: right;
color: white;
background-color: #3366CC;
font-weight: bold;
}

об'єднання селекторів

В наведеному прикладі  дата відоражається червноим кольором :
.date {
  color: red;
}

<P class = "date">
   21 лютого, четвер
</ P>
<P>
   Захід відбудеться в <em class = "date"> суботу </ em>.
</ P>

Якщо потрібно замість  щоб дати всередині <em> відображалися синім кольором, можна додати наступне правило CSS:

em.date {
   color: blue;
}

em.date об'єднує в собі:


  • селектор тега em;
  • селектор класу .date.

Він буде застосовуватися тільки до елементів <em class = "date"> </ em>. Це не вплине на інші .date або <em>.

У властивостей заданих id пріоритет вище, ніж у властивостей, заданих класу.


Завдання для самостійного виконання

Завдання 1. Створіть HTML документ як показано нижче.
<h2>Привіт</h2>
<p>це просто текст</p>
<hr />
<p>але оформи його як слід</p>



Завдання 2
. Наберіть наступний код HTML:

1
2
3
<p class="one"></p>
  <p class="two"></p>
  <p class="three"></p>


Завдання 3. Напишіть код HTML, щоб отримати результат, наведений на малюнку









Завдання 3. Напишіть код  CSS, щоб отримати результат, наведений на малюнку

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Селектори по класах</title>
    
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <ul class="target">
      <li class="hit">1</li>
      <li class="hit">2</li>
      <li class="miss">3</li>
      <li class="hit">4</li>
      <li class="miss">5</li>
    </ul>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Селектори по класах2</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <ul class="target">
      <li class="first">1</li>
      <li class="second">2</li>
      <li class="third">3</li>
      <li class="fourth">4</li>
      <li class="fifth">5</li>
    </ul>
  </body>

</html>

Завдання 4:
 Є HTML-код сторінки,  написати  файл CSS згідно  вмісту веб-сторінки



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Задача 4</title>
  <link rel="stylesheet" href="css/style_4.css">
</head>
<body>
 <h1>Селектори класу</h1>
  <p>
    Перший червоний рядок абзацу.<br>
    <em>Оранжевий 'em'.</em><br>
    <em>Синій 'em'.</em>
  </p>   
</body>
</html>

Завдання 5
1. Для заголовка з класом main-header встановити розмір шрифту 56px і колір #365f91 Також поміняти сімейство шрифту на serif (із зарубками) 2. Текст у всіх абзацах повинен мати розмір 20px 3. У тексту всередині тега strong в абзаці з класом lead задайте нижнє підкреслення 4. Задати тексту списку колір #365f91. Встановити для пунктів списку першого рівня в якості маркера - квадрат (■), а для пунктів списку другого рівня - порожній коло (○). 5. Для фону цитати встановіть картинку, яка знаходиться за адресою: https://netology-university.bitbucket.io/wm/resourses/images/wm-2-2-bg.jpg Колір тексту цитати встановити в #494429 Змінити накреслення на курсивне і поміняти сімейство шрифту на serif (із зарубками).

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Альберт Ейнштейн</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Оформлення текстових блоків за допомогою CSS</h1> </header> <section> <h1 class="main-header">Альберт Ейнштейн</h1> <p class="lead"><strong>Альбе́рт Ейнште́йн</strong> — фізик-теоретик, один із засновників сучасної теоретичної фізики, лауреат Нобелівської премії з фізики 1921 року, громадський діяч-гуманіст. </ p>    <P> Жив в Німеччині (1879-1893, 1914-1933), Швейцарії (1893-1914) і США (1933-1955). Почесний доктор близько 20 провідних університетів світу, член багатьох Академій наук, в тому числі іноземний почесний член АН СРСР (1926). </P>    <P> Ейнштейн - автор понад 300 наукових робіт з фізики, а також близько 150 книг і статей в галузі історії та філософії науки, публіцистики та ін. Він розробив декілька значних фізичних теорій</p> <ul class="works-list"> <li>Спеціальна теорія відносності (1905). <ul> <li>В її рамках — закон взаємозвязку маси і енергії. </li> </ul> </li> <li>Загальна теорія відносності (1907—1916).</li> <li>Квантова теорія фотоефекта.</li> <li>Квантова теорія теплоємності.</li> <li>Квантова статистика Бозе — Ейнштейна.</li> <li>Статистична теорія броунівського руху, яка заклала основи теорії флуктуацій.</li> <li>Теорія індукоованого вимпромінення.</li> <li>Теорія розсіювання світла на термодинамічних флуктуаціях в середовищі.</li></ul> <blockquote> Ейнштейну належить вирішальна роль в популяризації та введення в науковий обіг нових фізичних концепцій і теорій. В першу чергу це відноситься до перегляду розуміння фізичної сутності простору і часу і до побудови нової теорії гравітації        натомість ньютонівської. Ейнштейн також, разом з Планком, заклав основи квантової теорії. Ці концепції, багаторазово підтверджені експериментами, утворюють фундамент сучасної фізики. </blockquote> </section> </body> </html>

Результат має бути таким:


Завдання 6

<body>
  <p><strong>Завдання на вибірку елементів"</strong></p>
  <p>1. Одним селектором зробіть всі елементи li "першого списку" червоним кольором</p>
  <p>2. Не додаючи нового селектора, а  змінивши існуючий, зробіть всі посилання з класом red червоним кольором</p>
  <p>3. Відключіть написані стилі CSS за допомогою коментарів і потім  знову зробіть їх активними</p>
  <p>4. Не видаляючи стиль CSS з 1 завдання зробіть всі елементи li "першого списку" синім кольором.</p>
  <p>5. Поміняйте колір всіх абзаців (елементи p) в документі на червоний колір напряму не  звертаючись до них (не використовуючи селектор тегів p).</p>
  <hr>
  <p><strong>Рабочий зразок</strong></p>
  <p>Перший список</p>
  <ul id="first">
    <li>Елемент 1</li>
    <li>Елемент 2</li>
    <li>Елемент 3</li>
  </ul>
  <p>Другий список</p>
  <ul id="second">
    <li>Елемент 1</li>
    <li>Елемент 2</li>
    <li>Елемент 3</li>
  </ul>
  <div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has <a href="#" class="red">survived</a> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s <a href="#" class="red">survived</a> with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of <a href="#" class="red">survived</a> Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
</body>


1 коментар: