Сергей delphinpro

Так кнопка будет красная:

.Button { color: green; }
@media only screen and (min-width: 1450px) {
  .Button { color: red; }
}

А так – зеленая:

@media only screen and (min-width: 1450px) {
  .Button { color: red; }
}
.Button { color: green; }

htmlbook.ru/html/td/colspan
htmlbook.ru/html/td/rowspan

То есть как, прописать для одного тега шрифт regular 400, а для другого тега bold 700 italic, а один вообще поставить в шрифт Open sea?

Ну ровно так и делать, как вы написали.

p.one {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
}
p.two {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
}
p.three {
  font-family: 'Open Sea', sans-serif;
}

Как отметили выше, основное семейство шрифта лучше задать для всей страницы, в нужных местах менять только жирность и начертание.

.main {
  $this: &;

  .theme_1 & {
    #{$this}-child:hover #{$this}-img {
    }
 }
}

.main {
  $this: &;

  @at-root {
    .theme_1 {
      #{$this}-child:hover #{$this}-img {
      }
    }
  }
}

НО вот тут у меня сомнения, что каждый раз используя use xlink у меня будут идти запросы к этому файлу.

Запрос будет один, потом файл попадет в кэш браузера.

пришла идея сделать 3 разные фотки, под мобилку, планшет, пк и менять их. Нормально ли так сделать?

Это не только нормально, но и правильно. https://webref.ru/html/img/sizes
https://developer.mozilla.org/en-US/docs/Web/API/H...

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

Посчитайте сами https://developer.mozilla.org/en-US/docs/Web/HTML/...

Для начала обратите внимание сюда



Здесь видно, что результат поиска выдал сразу страницу каталога с мониторами. Т.е. поисковик проиндексировал сайт и выдает нужные страницы в результатах поиска.
Это забота поисковой системы.

Чтобы поисковик более точно определял содержимое, вы можете помочь ему.
Для этого существуют системы микроразметок.
На ситилинке используют довольно популярную schema.org



На этом скриншоте показана разметка хлебных крошек. Аналогично, есть схемы для разметки карточек товара, адресов организаций и т.д. (см на сайте schema.org и в справке яндекса).

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

https://yandex.ru/search/?clid=1882628&text=css+ma...

<div class="option">
  <div id="result">TextContent</div>
  <button id="copy">Copy</button>
</div>

let result = document.getElementById("result");

let copy = document.getElementById("copy");

copy.addEventListener("click", function () {
  copyToClipboard(result.innerText);
});

function copyToClipboard(text, onComplete) {
  if (navigator.clipboard) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        if (typeof onComplete === "function") onComplete();
      })
      .catch((err) => {
        console.error("Copy fail", err);
      });
  } else {
    let area = document.createElement("textarea");
    document.body.appendChild(area);
    area.value = text;
    area.select();
    document.execCommand("copy");
    document.body.removeChild(area);
    if (typeof onComplete === "function") onComplete();
  }
}

В песочнице работать не будет

https://yandex.ru/search/?text=css+hack+safari

Зеленую рамку оставил для демонстрации области клика. Сделайте ее прозрачной. Фактически кнопка будет большого размера, но визуально - маленькой.

Ну элементарно же.
Если не создавать себе проблем, то и решать их не нужно будет.

<div class="block">
  <div class="container">
    это блок растягивается на всю ширину, а содержимое нужно оставить в пределах контейнера.
  </div>
</div>