Залік 3

<head>
  <link rel="stylesheet" href="style.css">
</head>

<head>
  <style>
  span {
    color: red;
  }
  </style>
</head>
<body>
  <p>
    Це <span>червоне</span> слово.
  </p>
</body>

<style>
  div {
    margin: 10px 20px 15px 15px;
  }
</style>

<style>
  div {
    padding: 10px 20px 15px 15px;
  }
</style>

<head>
  <style>
  img {
    float: right;
  }
  </style>
</head>
<body>
  <img src="image.jpg">
</body>

<head>
  <style>
  .container{
    display: flex;
  }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

<head>
  <style>
  .container{
    display: flex;
    justify-content: center;
  }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

<head>
  <style>
  .container{
    display: flex;
    align-items: center;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

<head>
  <style>
  .box{
    flex: 1;
  }
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</body>

<head>
  <style>
  .container{
    display: flex;
    gap: 30px;
  }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

<head>
  <style>
  .container{
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

<head>
  <style>
  .container{
    display: flex;
    flex-wrap: wrap;
  }
  .container div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 5px;
  }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

<head>
  <style>
  .container{
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    align-content: space-between;
  }
  .container div{
    width: 100px;
    height: 100px;
    background: lightgreen;
    margin: 5px;
  }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

<head>
  <style>
  .container{
    display: flex;
  }
  .c1{order: 2;}
  .c2{order: 3;}
  .c3{order: 1;}
  .c3{order: -1;}
  </style>
</head>
<body>
  <div class="container">
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
  </div>
</body>

<body>
  <form action="send.php"> … </form>
</body>

<body>
  <input>
</body>

<body>
  <input type="text">
</body>

<body>
  <input type="password">
</body>

<body>
  <input type="text" value="Привіт">
</body>

<body>
  <input type="button" value="Клік!">
</body>

<body>
  <input type="submit" value="Надіслати">
</body>

<body>
  <input type="reset" value="Очистити">
</body>

<body>
  <input type="text" placeholder="Введи ім’я">
</body>

<body>
  <input type="text" value="Неактивне" disabled>
</body>

<body>
  <input type="text" value="Тільки читати" readonly>
</body>

<body>
  <input type="text" required>
</body>

<body>
  <button>Натисни мене</button>
</body>

<body>
  <textarea placeholder="Напиши повідомлення"></textarea>
</body>

<style>
  textarea {
    resize: none;
  }
</style>

<body>
  <fieldset>
    <legend>Контактні дані</legend>
  </fieldset>
</body>

<body>
  <input type="radio" name="color" value="red"> Червоний
</body>

<body>
  <input type="checkbox" name="hobby" value="reading"> Читання
</body>

<body>
  <select>
    <option>Україна</option>
    <option>Польща</option>
  </select>
</body>

<body>
  <select>
    <option selected>Україна</option>
    <option>Польща</option>
  </select>
</body>

<body>
  <input type="text" placeholder="Неактивне" disabled>
</body>

<body>
  <select multiple size="5">
    <option>Red</option>
    <option>Blue</option>
  </select>
</body>

<style>
  button:focus + img {
    border: 2px solid red;
  }
</style>