Как вписать код CSS в HTML | #NeonaFM

Как вписать код CSS в HTML

28.07.2021 / от NeonaFM / в CSS, HTML коды
Как вписать код CSS в HTML

Каждому элементу сайта можно задать индивидуальный, цвет, фон, окантовку и прочие свойства. Формат визуального оформления называется css (Cascading Style Sheets), что в переводе означает: «каскадные таблицы стилей».

Для css кодов на сайте есть отдельный файл, но как быть, если вы не хотим вносить изменения непосредственно в него, а прописать стили сразу в коде html?

Для этого мы используем вот такую “болванку”:

<html>
<head>
<style type="text/css">

</style>
</head>
<body>

</body>
</html>

Где, между тегами head и style, мы вставляем наш css код, а между тегом body, сам контент.

Рассмотрим на примерах

Переворачивающаяся картинка

У нас есть 2 кода, css и html:

HTML

<div class="wrapper">
  <div class="card">
    <div class="front"><img src="https://neonafm.ru/wp-content/uploads/2021/07/kak-vpisat-kod-css-v-html3.jpg" /></div>
    <div class="back"><span><div align="center"><p><a href="https://www.youtube.com/channel/UCehOXhtM4TEuOeuN1j-0w5w" target="_blank">https://www.youtube.com/channel/UCehOXhtM4TEuOeuN1j-0w5w</a></p>
</div></span></div>
  </div>
</div>

CSS

font-family: sans-serif;
}
.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 350px;
  height: 200px;
  position: relative;
  perspective: 1000px;
  border: 1px solid #fff;
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  background-color: #fff;
 }
.front img {
  max-width: 100%;
  min-width: 100%;
  height: auto;
}
.back {
  transform: rotateY(180deg);
}
.card:hover .front {
  transform: rotateY(180deg);}
.card:hover .back {
  transform: rotateY(360deg);}

Добавляем эти коды в нашу “болванку”:

<html>
<head>
<style type="text/css">
  font-family: sans-serif;
}
.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 350px;
 height: 200px;
  position: relative;
  perspective: 1000px;
  border: 1px solid #fff;
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  background-color: #fff;
 }
.front img {
  max-width: 100%;
  min-width: 100%;
  height: auto;
}
.back {
  transform: rotateY(180deg);
}
.card:hover .front {
  transform: rotateY(180deg);}
.card:hover .back {
  transform: rotateY(360deg);}
</style>
</head>
<body>
<div class="wrapper">
  <div class="card">
    <div class="front"><img src="https://neonafm.ru/wp-content/uploads/2021/07/kak-vpisat-kod-css-v-html3.jpg" /></div>
    <div class="back"><span><div align="center"><p><a href="https://www.youtube.com/channel/UCehOXhtM4TEuOeuN1j-0w5w" target="_blank">https://www.youtube.com/channel/UCehOXhtM4TEuOeuN1j-0w5w</a></p>
</div></span></div>
  </div>
</div>
</body>
</html>

И получаем вот такую картинку:

Как вписать код CSS в HTML

Кнопка

HTML

<div align="center"><a href="https://neonafm.ru/product-category/translations/free/" class="button13">Скачать
переводы бесплатно</a></div>

CSS

a.button13 {
  display: inline-block;
  width: 15em;
  font-size: 80%;
  color: rgba(255,255,255,.9);
  text-shadow: #2e7ebd 0 1px 2px;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  white-space: pre-line;
  padding: .7em 0;
  border: 1px solid;
  border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
  border-radius: 6px;
  outline: none;
  background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
  box-shadow: inset rgba(255,255,255,.5) 1px 1px;
}
a.button13:first-line{
  font-size: 170%;
  font-weight: 700;
}
a.button13:hover {
  color: rgb(255,255,255);
  background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce);
}
a.button13:active {
  color: rgb(255,255,255);
  border-color: #2970a9;
  background-image: linear-gradient(#5796c8, #6aa2ce);
  box-shadow: none;
}

Добавляем эти коды в нашу “болванку”:

<html>
<head>
<style type="text/css">
a.button13 {
  display: inline-block;
  width: 15em;
  font-size: 80%;
  color: rgba(255,255,255,.9);
  text-shadow: #2e7ebd 0 1px 2px;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  white-space: pre-line;
  padding: .7em 0;
  border: 1px solid;
  border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
  border-radius: 6px;
  outline: none;
  background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
  box-shadow: inset rgba(255,255,255,.5) 1px 1px;
}
a.button13:first-line{
  font-size: 170%;
  font-weight: 700;
}
a.button13:hover {
  color: rgb(255,255,255);
  background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce);
}
a.button13:active {
  color: rgb(255,255,255);
  border-color: #2970a9;
  background-image: linear-gradient(#5796c8, #6aa2ce);
  box-shadow: none;
}
</style>
</head>
<body>
<div align="center"><a href="https://neonafm.ru/product-category/translations/free/" class="button13">Скачать
переводы бесплатно</a></div>
</body>
</html>

И получаем вот такую кнопку:

Или можно даже соединить вместе картинку и кнопку:

<html>
<head>
<style type="text/css">
  font-family: sans-serif;
}
.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 350px;
 height: 200px;
  position: relative;
  perspective: 1000px;
  border: 1px solid #fff;
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  background-color: #fff;
 }
.front img {
  max-width: 100%;
  min-width: 100%;
  height: auto;
}
.back {
  transform: rotateY(180deg);
}
.card:hover .front {
  transform: rotateY(180deg);}
.card:hover .back {
  transform: rotateY(360deg);}
</style>
</head>
<body>
<div class="wrapper">
  <div class="card">
    <div class="front"><img src="https://neonafm.ru/wp-content/uploads/2021/07/kak-vpisat-kod-css-v-html3.jpg" /></div>
    <div class="back"><span><div align="center"><p><html>
<head>
<style type="text/css">
a.button13 {
  display: inline-block;
  width: 15em;
  font-size: 80%;
  color: rgba(255,255,255,.9);
  text-shadow: #2e7ebd 0 1px 2px;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  white-space: pre-line;
  padding: .7em 0;
  border: 1px solid;
  border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
  border-radius: 6px;
  outline: none;
  background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
  box-shadow: inset rgba(255,255,255,.5) 1px 1px;
}
a.button13:first-line{
  font-size: 170%;
  font-weight: 700;
}
a.button13:hover {
  color: rgb(255,255,255);
  background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce);
}
a.button13:active {
  color: rgb(255,255,255);
  border-color: #2970a9;
  background-image: linear-gradient(#5796c8, #6aa2ce);
  box-shadow: none;
}
</style>
</head>
<body>
<div align="center"><a href="https://www.youtube.com/channel/UCehOXhtM4TEuOeuN1j-0w5w" class="button13">Смотреть
</a></div>
</body>
</html></a></p>
</div></span></div>
  </div>
</div>
</body>
</html>
Как вписать код CSS в HTML

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

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

Меню