CSS подключение

CSS: Начало

Пришло время поговорить о CSS и как его подключить.Это стилизация и анимации вашего контента и вашей веб страницы.

Я не буду писать что для начала нужно писать стили в Html, мол для начала и так сойдет – нет, нужно делать все правильно. Css – это всегда отдельный файл, а иногда даже и множество файлов. И стоит показать как правильно подключить css к вашему html.

Включает любимый редактор, пока что оставляем пустым, и сохраняем его как style.css   .Можно как угодно, главное что бы в конце было  .css   . Далее переходим в наш html,  там наш ждет тег <head>, как раз он для этих целей. Создаем линку и прописывает путь к нашему файлу стилей.

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

Если вы забыли как правильно прописывать путь, посмотрите прошлую статью.  Если же вы внимательно все читали, и умеете и подключать, тогда посмотрим, все ли мы правильно сделали. И так, впишите в нашу css этот код, если на странице что-то поменяется значить все чудесно и мы может двигаться дальше!

body{background-color:yellow}

Помимо обычных правил есть еще медиа запросы. Они необходимо для того что бы менять стилизацию при адаптации. Бывают они трех видов:

 

@media (min-width: 320px) {
  body{
    font-size: 24px;
  }
}

@media (max-width: 320px) {
  body{
    font-size: 24px;
  }
}

@media (min-width: 320px) and (max-width: 480px) {
  body{
    font-size: 24px;
  }
}

 

В первом случаи, мы указываем что правило должно сработать если ширина больше > 320px

Во втором, сработает если ширина будет  меньше < 320px

В последнем, если ширина будет от 320px до 480px

Оставьте ответ

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