Главная страница  /  Занятия  /  #3  /  Селекторы CSS

Селекторы CSS

Задание:

Показать использование селекторов CSS.

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

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Универсальный селектор</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     Текст внутри &lt;body&gt;&lt;/body&gt;<br>
     <p>Текст внутри параграфа</p>
     <div>Текст внутри блока</div>
    </body>
   
   </html>

Файл styles.css:

   *		{ color: #ff0000; }

Результат:

Результат можно посмотреть здесь.

Селекторы тегов:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Селекторы тегов</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <h1>Зеленый заголовок</h1>
     <p>Синий текст внутри параграфа</p>
    </body>
   
   </html>

Файл styles.css:

   h1		{ color: #00ff00; }
   p		{ color: #0000ff; }

Результат:

Результат можно посмотреть здесь.

Селекторы идентификаторов:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Селекторы идентификаторов</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div id="firstDiv">Первый блок</div>
     <div id="secondDiv">Второй блок</div>
    </body>
   
   </html>

Файл styles.css:

   #firstDiv		{ background-color: #ff0000; color: #ffffff; }
   #secondDiv		{ background-color: #00ff00; color: #000000; }

Результат:

Результат можно посмотреть здесь.

Селекторы классов:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Селекторы классов</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div class="redDiv">Первый блок</div>
     <div class="greenDiv">Второй блок</div>
     <div class="redDiv">Третий блок</div>
     <div class="greenDiv">Четвертый блок</div>
    </body>
   
   </html>

Файл styles.css:

   .redDiv		{ background-color: #ff0000; color: #ffffff; }
   .greenDiv		{ background-color: #00ff00; color: #000000; }

Результат:

Результат можно посмотреть здесь.

Селекторы атрибутов:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Селекторы атрибутов</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <h1 title="firstHeader">Первый заголовок</h1>
     Текст под первым заголовком
     <h1 title="secondHeader">Второй заголовок</h1>
     Текст под вторым заголовком
    </body>
   
   </html>

Файл styles.css:

   h1[title="firstHeader"]		{ color: #ff0000; }
   h1[title="secondHeader"]		{ color: #0000ff; }

Результат:

Результат можно посмотреть здесь.

Контекстные селекторы:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Контекстные селекторы</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <ol>
      <li>Ford
       <ul>
        <li>Mustang</li>
        <li>Fiesta</li>
        <li>Focus</li>
       </ul>
      </li>
      <li>Mitsubishi
       <ul>
        <li>Galant</li>
        <li>Lancer</li>
        <li>Carisma</li>
       </ul>
      </li>
      <li>Renault
       <ul>
        <li>Duster</li>
        <li>Megane</li>
        <li>Logan</li>
       </ul>
      </li>
     </ol>
    </body>
   
   </html>

Файл styles.css:

   ol li	{ border: 1px solid #ff0000; }

Результат:

Результат можно посмотреть здесь.

Дочерние селекторы:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Дочерние селекторы</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <ol>
      <li>Ford
       <ul>
        <li>Mustang</li>
        <li>Fiesta</li>
        <li>Focus</li>
       </ul>
      </li>
      <li>Mitsubishi
       <ul>
        <li>Galant</li>
        <li>Lancer</li>
        <li>Carisma</li>
       </ul>
      </li>
      <li>Renault
       <ul>
        <li>Duster</li>
        <li>Megane</li>
        <li>Logan</li>
       </ul>
      </li>
     </ol>
    </body>
   
   </html>

Файл styles.css:

   ol > li	{ border: 1px solid #ff0000; }

Результат:

Результат можно посмотреть здесь.

Соседние селекторы:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Соседние селекторы</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <h3>Заголовок</h3>
     <p>&#171;Эпиграф к&nbsp;тексту&#187;.<br>И. И. Иванов</p>
     <p>Текст после эпиграфа.</p>
    </body>
   
   </html>

Файл styles.css:

   h3 + p	{ padding-left: 260px; font-style: italic; }

Результат:

Результат можно посмотреть здесь.

Смежные селекторы:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Смежные селекторы</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <hr>
     <h3>Заголовок</h3>
     <p>&#171;Эпиграф к&nbsp;тексту&#187;.<br>И. И. Иванов</p>
     <hr>
     <p>Текст после эпиграфа.</p>
    </body>
   
   </html>

Файл styles.css:

   h3 + p	{ padding-left: 260px; font-style: italic; text-indent: 0; }
   hr		{ background-color: #00ff00; border: none; height: 1px; }
   h3 ~ hr	{ background-color: #ff0000; margin: 5px 0 5px 260px; }

Результат:

Результат можно посмотреть здесь.