CSS - Dimos.ru

Как подключить CSS

Деталка

Как подключить шрифт с Google Fonts

На примере шрифта Roboto. В HTML код вставляем ссылку на шрифт.


<link 
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" 
rel="stylesheet">

Далее шрифт прописываем в CSS к нужному элементу, body или к отдельному тегу (на примере H1):


H1 {
font-family: 'Roboto';
}

Полный пример:


<html>

   <head>
      <link 
         href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" 
         rel="stylesheet">

   <style>
      H1 {
         font-family: 'Roboto';
      }
   </style>
   </head>

   <body>
      <H1>Заголовок шрифтом Roboto</H1>
   </body>

</html>

Деталка

Свойство line-height не работает в CSS

Решение:
Добавить свойство display.


line-height:1;
display:block;

Деталка

Как подключить Font Awesome на сайт

Подключаем популярный набор иконок Font Awesome для нашего сайта.

Подключить CSS с внешнего сайта (CDN подключение):



<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

Использовать:


<i class="far fa-address-card"></i>

Примерный результат на странице:

Деталка

Знакомство с адаптивной версткой / media-запросы (CSS). Используем min-width и max-width.

Деталка

Создание отступа в колонке Boostrap

Как создать отступ у одного блока.
Достаточно у блока поставить внутренний DIV со стилем отступа.

Изначально:


<div class="col-6"></div>
<div class="col-6"></div>

Поправлено:


<div class="col-6"></div>
<div class="col-6"><div class="in"></div></div>

css:


.in {
   margin-left:20px;
}

Деталка

Как делать тень в CSS

CSS:



.shadow {
box-shadow: 0 0 10px rgba(0,0,0,0.1); 
}

Деталка

Как убрать бордюр при фокусировке у Input

HTML:


<input class="inputclassname">

CSS:

                                        

.inputclassname:focus {
   outline: none;
}

Деталка

Блог

Как подключить CSS

Как подключить шрифт с Google Fonts

Свойство line-height не работает в CSS

Как подключить Font Awesome на сайт

Знакомство с адаптивной версткой / media-запросы (CSS). Используем min-width и max-width.

Создание отступа в колонке Boostrap

Как делать тень в CSS

Как убрать бордюр при фокусировке у Input

Категории