Урок №2. подключаем css-стили к html-файлу

Содержание:

Атрибуты
Селекторы в CSS
Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3
Добавление стилей к элементам HTML
Импорт в HTML
Важность знания CSS при работе с сайтом
HTML и CSS
Часть 4. Рекомендации
- - Другие уроки по теме «HTML и CSS»
Загрузка CSS для определенного браузера
- CSS хаки

Атрибуты

Атрибуты, связанные с элементами , — это —

Атрибут	Значение	Описание
type	text/css	Указывает язык таблицы стилей как тип содержимого (тип MIME). Этот атрибут требуется.
href	URL	Задает адрес или путь к файлу таблицы стилей с правилами стиля. Этот атрибут является обязательным.
media	screen, tty, tv, projection, handheld, print, braille, aural, all	Указывает устройство, на котором будет отображаться документ. Значение по умолчанию — все. Это необязательный атрибут.

Рассмотрим простой файл таблицы стилей с именем mystyle.css, имеющим следующие правила —

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Теперь вы можете включить этот файл в любой HTML-документ следующим образом:

< head>
   < link type = "text / css" href = "mystyle.css" media = "all" /> 
< /head>

Селекторы в CSS

Html урок 5. создание таблицы в html

Теперь, когда мы разобрались с блоком объявлений стилей, нужно разобраться с тем, что находится вначале любого CSS-правила – с селектором.

Селектор указывает, к каким элементам применять объявления стилей.

В нашем примере селектор h1 – это тип элемента, говоря по-простому тег.

Такой селектор означает что стили будут применены ко всем тегам h1 на странице.

В качестве селектора могут выступать:

элементы (имена тегов), например h2
класс, перед ним ставится точка, например .my-class
идентификатор, перед ним ставится решетка, например #main
псевдоклассы и псевдоэлементы

Универсальный селектор

Существует селектор *.

Он выбирает все элементы на странице. Например правило:

* {
margin: 0;
}

1
2
3

* {

margin;

}

установит для всех элементов нулевые внешние отступы.

Элементы

Селекторы элементов дают возможность выбрать, для применения стилей, все элементы одного типа на странице (проще говоря все одинаковые теги). Например:

h2 {
color: blue;
}

1
2
3

h2 {

colorblue;

}

Это правило устанавливает для всех заголовков <h2> голубой цвет текста.

Классы

Селекторы классов позволяют выбрать для задания стилей один или более элементов с одинаковыми именами классов.

В элементах классы задаются при помощи атрибута class, например:

<h3 class=»big»>Текст заголовка</h3>
<p class=»big»>Текст абзаца</p>

1 2	<h3 class=»big»>Текст заголовка</h3> <p class=»big»>Текст абзаца</p>

.big {
font-size: 1.4em;
}

1
2
3

.big {

font-size1.4em;

}

В этом примере шрифт будет увеличен и для заголовка h3, и для параграфа.

Идентификаторы

Селекторы идентификаторов предназначены для выбора одного конкретного элемента на странице.

В элементах идентификаторы задаются при помощи атрибута id, например:

1	<div id=»main»>…</div>

Атрибуты

Селектор по атрибуту позволяет выбрать элементы, имеющие определенный атрибут или атрибут с определенным значением.

Проще всего этот вид селектора показывать на примерах:

titlespanspancontenteditabletrue

Селектор
a – выберет все ссылки, у которых в атрибуте
href содержится
yandex.ru

Полный список вариантов использования этого селектора вы можете посмотреть в документации.

Псевдоклассы

Псевдоклассы в CSS – это определенный набор ключевых слов, которые добавляются к селекторам через двоеточие.

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

a:hover {
color: red;
}

1
2
3

a:hover {

colorred;

}

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

hoverдокументации

Псевдоэлементы

Псевдоэлементы в CSS – это определенный набор ключевых слов, которые добавляются к селекторам через двойное двоеточие.

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

Например, можно сделать первые буквы заголовков h2 красного цвета:

h2::first-letter {
color: red;
}

1
2
3

h2::first-letter {

colorred;

}

Список стандартных псевдоэлементов вы можете посмотреть в документации.

Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3

Html урок 2. оформление ссылок html

Всем привет!
В этом уроке я расскажу о способах подключения CSS файла к HTML. Существует 3 способа подключения CSS файла. Спросите, зачем вам знать именно 3 способа? Отвечу, что нужно, потому что бывают случаи, когда необходимо использовать как раз все эти 3 способа подключения.

○ Способ №1 – «Таблица связанных стилей»

Все стили хранятся в одном файле с расширением «.css».
Если связать все HTML файлы веб-страниц с таким CSS файлом, то при изменениях стили страниц (цвет, фон, размер шрифта и т.д.) будут изменяться во всех HTML документах, связанных с CSS файлом.
Схематично это выглядит так:

Чтобы связать HTML документ с CSS файлом, добавьте между тегами <head> специальный тег <link>.* Закрывающий тег не нужен

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

href – прописываем путь к css файлу. В примере выше файл «style.css» находится вместе с остальными HTML файлами в одной директории.
Разберём способ №1 поэтапно и практично от «а» до «я»:

1 этап — создать файл «style.css»

Давайте попробуем на практике создать файл «style.css».
Откройте блокнот, который есть у вас на ПК.
Кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот»:

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

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

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css»

Далее нажмите на кнопку «Сохранить»:

Вот такая должна получиться общая картина:

Вот и все, файл «style.css» был создан.
Можете вставить в файл «style.css» вот это правило для тега <h1> и сохранить:

H1
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}

В HTML файле вставьте вот этот код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

В результате должно получиться вот такое:

Этот способ поможет делать изменения внешнего вида всего сайта, изменяя только правила в одном файле «style.css». Припустим, меняем цвет и размер для заголовка в «style.css», то на всех 1000 страницах произойдет одновременное автоматическое изменение. На чистом HTML, без CSS, пришлось бы эти изменения делать отдельно на каждой странице из 1000. Ужас!!!

○ Способ №2 – «Таблицы глобальных стилей»

Этот способ тоже применяется и я уверен, что вы с ним столкнетесь.
Для подключения такого способа CSS стилей достаточно прописать между тегами <head></head> тег <STYLE>.* Закрывающий тег обязателен

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

Можно и так:

<style></style>

Между тегами <style></style> прописываются необходимые CSS правила для веб-страницы.
Минус такого способа в том, что эти стили будут только для одной страницы, где размещены эти стили.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
<style>
H2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2>Заголовок H2</H2>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя таблицу стилей CSS.

○ Способ №3 – «Внутренние стили»

Способ №3 я использую в редких случаях, например, для изменения одиночного тега на веб-странице. Для подключения стиля к любому тегу, нужно прописать параметр style.

style="тут будут CSS правила"

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
</head>
<body>
<H2 style="font-size: 150px; color: #cc0000">Заголовок H2</H2>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя стили CSS.

○ Комбинированный метод подключения стилей

Все эти три способа можно комбинировать.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Пример подключения таблицы CSS</title>
<style>
H2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2 style="font-size: 50px; color: green;">Заголовок</H2>
<H2>Заголовок</H2>
</body>
</html>

На сегодня все! Жду вас на следующих уроках.
Подписывайтесь на обновления блога!

Добавление стилей к элементам HTML

Тег link в html

Информация о стиле может быть прикреплена как отдельный документ или встроена в документ HTML. Давайте рассмотрим три способа добавления стилей в HTML-документ (от самого высокого до самого низкого приоритета).

Стили в тэге (инлайн стили) — использование атрибута style в начальном тэге HTML.
Встроенные стили — использование элемента <style> в разделе заголовка документа.
Внешняя таблица стилей — с помощью элемента <link>, указывающего на внешние CSS-файлы.

В этом уроке мы рассмотрим все три способа добавления стилей в HTML документ.

Встроенные в элемент стили (инлайн)

Стили в тэге используются для применения уникальных правил стиля к элементу путем помещения правил CSS непосредственно в начальный тэг. Их можно добавить к элементу с помощью атрибута style.

блок 1

Атрибут style включает ряд пар свойств и значений CSS. Каждая пара свойство: значение разделяется точкой с запятой (;), так же, как вы пишете во встроенную или внешнюю таблицу стилей. Но все должно быть в одной строке, то есть после точки с запятой не должно быть переноса строки.

В следующем примере показано, как изменить цвет и размер шрифта текста:

<p style="color:green; font-size:18px;">This is a paragraph.</p>

Использование «инлайн» стилей обычно считается плохой практикой. Поскольку правила стиля встроены непосредственно в тэг html, это приводит к тому, что презентация смешивается с содержанием документа; что сводит на нет цель использования CSS. Проще говоря, для того, чтобы изменить цвет текста, вам нужно будет редактировать HTML файл. А если таких параграфов много, и они находятся на разных страницах — такая простая операция как замена цвета, займет огромное количество времени.

Встроенные таблицы стилей

Встроенные или внутренние таблицы стилей влияют только на документ, в который они встроены.

Встроенные таблицы стилей определены в разделе <head> документа HTML с помощью тега <style>. Вы можете определить любое количество элементов <style> в разделе <head> документа HTML. Смотрите пример ниже:

<head>
  <style type="text/css">
    body {background-color: YellowGreen;}
    p {color: Black;}
  </style>
</head>

Несмотря на то, что такой подход несколько лучше чем предыдущий, он все равно не идеален. В случае если вам понадобится внести какие то изменения в стили (тот же цвет текста), вы опять будете вынуждены редактировать большое количество страниц. Помимо того, что это может занять очень много времени, стоит так же понимать что вы вполне можете допустить ошибки в некоторых файлах, которые приведут к проблемам с отображением содержимого сайта.

Внешние таблицы стилей

Внешняя таблица стилей содержит все правила стилей в отдельном документе, на который вы можете ссылаться из любого HTML-файла на своем сайте. Внешние таблицы стилей являются наиболее гибкими, поскольку с помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив только один файл.

Вы можете прикрепить внешние таблицы стилей двумя способами — связать документ и импортировать его:

Связывание внешних таблиц стилей

Внешняя таблица стилей может быть связана с документом HTML с помощью тега <link>. Тег <link> находится внутри раздела <head>:

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

Импорт внешних таблиц стилей

Правило @import — это еще один способ добавления внешней таблицы стилей. Оператор @import указывает браузеру загрузить внешнюю таблицу стилей и использовать ее стили.

Вы можете использовать его двумя способами. Самое простое в заголовке вашего документа

Обратите внимание, что другие правила CSS все еще могут быть включены в элемент

<style type="text/css">
  @import url("css/style.css");
  p {
    color: blue;
    font-size: 16px;
  }
</style>

Точно так же вы можете использовать правило @import для импорта таблицы стилей в другую таблицу стилей (т.е. использовать @import внутри css файла).

@import url("css/base.css");
@import url("css/color.css");
body {
  color: blue;
  font-size: 14px;
}

блок 3

Импорт в HTML

Чтобы воспользоваться правилом @import в HTML-файле, добавьте следующий код в шапку страницы:

<style>
  @import url("/styles/default.css");
</style>

Данный код импортирует CSS для использования на HTML-странице. Это позволяет редактировать все ее стили при помощи отдельного файла. Недостаток такого подхода заключается в отсутствии параллельной загрузки. То есть, страница не начнет загружаться до тех пор, пока браузер не загрузит файл CSS полностью. Это негативно скажется на скорости загрузки сайта и общей производительности.

В качестве альтернативного способа применения import url CSS в HTML можно сослаться на таблицу стилей следующим образом:

<link href="/styles/default.css" rel="stylesheet">

Эта ссылка работает по принципу @import, и позволяет управлять всем CSS-кодом с помощью отдельного файла. Данный метод предпочтительнее с точки зрения параллельной загрузки. Если вам все еще хочется распределить CSS по отдельным файлам, то можно воспользоваться @import внутри основного стилевого файла.

Импорт в CSS

Применение <link> в приведенном выше примере позволит внедрить файл «default.css» в HTML-страницу. Внутри этого CSS-файла находятся различные правила стилизации. Эти стили можно разместить как на одной странице, так и разбить их на отдельные фрагменты. А также импортировать в основной файл CSS.

Предположим, что мы используем четыре отдельных CSS-файла: один для разметки, второй для шрифтов и третий для картинок. Четвертым будет основной файл, в котором указаны ссылки на все остальные файлы. В самом верху основного файла (так как правила импорта должны размещаться над всем остальным содержимым) добавьте следующий код CSS import:

@import url('/styles/layout.css');
@import url('/styles/type.css');
@import url('/styles/images.css');

Уже после этих правил можно добавлять любой CSS-код для оформления страниц.

При загрузке страницы сначала все отдельные файлы будут подгружены в основной CSS, а уже после этого файл загрузится в HTML-страницу. Таким образом у вас будет более простой доступ к отдельным сегментам стилизации.

Используем @import в медиа-запросах

Разделение основного CSS-файла может пригодиться при адаптации сайта под мобильные устройства, где для разных разрешений и размеров экрана применяются различные стили. Главная проблема заключается в том, что подключения CSS import расположены в самом верху страницы, поэтому медиа-запросы будут загружены после стилей

При разработке адаптивных дизайнов важно учитывать производительность сайта. Рекомендуется не разделять CSS адаптивного сайта и использовать @import для их загрузки на ресурс

Поддержка браузерами

У старых браузеров наблюдаются некоторые проблемы поддержки правила CSS import, но сейчас этими версиями программ практически никто не пользуется. Времена Internet Explorer уже давно позади.

Важность знания CSS при работе с сайтом

Про базовые понятия я уже немного писал в рубрике HTML для начинающих, затронув там вопросы создания основных элементов веб страниц:

и тут
Как создавать гиперссылки — здесь
Таблицы различной сложности и вложенности — тут
Html формы — здесь
Фреймы на основе Iframe и Frame — тут
Вставка видео и другого медиаконтенкта с помощью Embed и object — здесь
Doctype, Html комментарии — тут
Как задаются цвета в Html и CSS коде — здесь
Форматирование текста в HTML, Html шрифты, Strong, Em, B, I — тут
Пробелы и спецсимволы (мнемоники) в Html коде — здесь

Думаю, что для быстрого редактирования, этих материалов будет вполне достаточно, тем более, что в последнее время сам по себе язык гипертекстовой разметки несколько потерял свою значимость при работе над внешним видом сайта после того, как стала популярной блочная верстка.

Дело в том, что сейчас чистый Html выполняет лишь роль поставщика содержимого веб страницы и позволяет в том или ином виде организовать ее структурное оформление (упомянутые выше списки, таблицы, формы, изображения, ссылки и т.п.).

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

Это как раз лишний раз подтверждает, какую огромную и важную роль выполняют сейчас стили в оформлении внешнего вида сайта. Они отвечают за цветовое оформление проекта, за те шрифты, которые используются в тексте и заголовках, за размещение и позиционирование отдельных элементов дизайна.

Даже малейшее изменение внешнего вида (добавление иконки RSS ленты, счетчиков посещений и т.п.) потребует внесения изменений в CSS код.

Я постараюсь рассказывать о работе с ним не в академической манере, упоминая о всех возможностях таблиц каскадных стилей (именно так в переводе расшифровывается аббревиатура CSS), а в сугубо практической манере изложения, упоминая в основном только те аспекты, которые в первую очередь могут вам понадобиться при работе над дизайном своего проекта.

Итак, давайте приступим. У этого языка стилевой разметки есть свой синтаксис написания свойств и правил. Но он будет отличен от Html, хотя ничего сложного из себя не представляет. Наверное, первое отличие, которое следует отметить — это не критичность CSS кода к пробелам.

Его свойства можно писать вообще даже без пробелов и в одну строку (благодаря этому специальными программами для увеличения скорости загрузки вашего сайта).

Правда такой способ представления (в одну строчку) сильно снижает его читаемость, и оптимизировать его следует, наверное, уже после окончательного завершения работы над дизайном своего проекта.

По аналогии с Html, где имеется набор тегов с различными атрибутами, в CSS имеется ряд свойств, способных принимать различные значения, с помощью которых и осуществляются манипуляции с дизайном.

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

Для оформления шрифтов: Font (Weight, Family, Size, Style) и Line Height — тут
Для оформления текста в Html: text-decoration, vertical-align, text-align, text-indent — здесь
Для задания цвета фона или фоновой картинки: Background (color, position, image, repeat, attachment) — тут
Для настройки внешнего вида списков: List style ( type, image, position) — здесь
Для задания отступов, рамок и границ: Padding, margin и border — тут
Задаем тип отображения Html элементов на вебстранице: Display (block, none, inline) — здесь
Для описания области контента при блочной верстке: Height, width и overflow — тут
Инструменты блочной верстки: Float и clear — здесь
Способы позиционирования Html элементов: (правила left, right, top и bottom) для Position (absolute, relative и fixed) — тут
Z-index и CSS правило Cursor — здесь

На практике вам понадобится знать пару десятков из них и их возможные значения для того, чтобы уверено ориентироваться в стилевом коде, и при необходимости вносить в него осмысленные изменения.

HTML и CSS

Итак, html – разметка, css – стили. Это две простые истины, которые стоить запомнить раз и навсегда. Механизм связки html и css весьма прост. Давайте начнем с сайтов, с движками. Допустим есть у вас какая-разметка и блок с контентом:

Значимость этих проблем настолько очевидна, что реализация намеченного плана развития напрямую зависит от ключевых компонентов планируемого обновления? С другой стороны начало повседневной работы по формированию позиции способствует повышению актуальности всесторонне сбалансированных нововведений. Равным образом выбранный нами инновационный путь способствует повышению актуальности всесторонне сбалансированных нововведений?

Выглядит не очень и вы хотите его переделать. Вам нужно найти файл стилей. Обычно он называется styles.css. В WordPress например, для того, чтобы редактировать стили можно перейти на главную страницу вашего сайта и нажать кнопку “Настроить”, а внутри нажать кнопку “Дополнительные стили”. Ситуация выглядит так: вы нажали правой кнопкой по ненавистному блоку и выбрали в меню “Просмотреть код”. В итоге выяснилось, что имя класса у данного блока – content. Отлично, это уже половина дела. Именно по имени класса мы свяжем наш html с css. Находим файл, где хранятся стили и начинаем наводить порядок. Пишем туда следующее:

CSS

.content {
background-color: #f0f0f0;
color: #303030;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
max-width: 80%;
text-align: center;
}

1
2
3
4
5
6
7
8
9

.content {

background-color#f0f0f0;

color#303030;

border1pxsolid#000;

border-radius5px;

padding5px;

max-width80%;

text-aligncenter;

}

Ну а теперь как изменился наш блок:
Значимость этих проблем настолько очевидна, что реализация намеченного плана развития напрямую зависит от ключевых компонентов планируемого обновления? С другой стороны начало повседневной работы по формированию позиции способствует повышению актуальности всесторонне сбалансированных нововведений. Равным образом выбранный нами инновационный путь способствует повышению актуальности всесторонне сбалансированных нововведений?

Согласитесь, так выглядит гораздо лучше. Все дело в том, что мы написали для класса content свои собственные стили. Но это в случае, когда мы переписываем уже имеющиеся стили. А что, если стилей нет совсем? Есть 2 варианта решения задачи при связывании html и css.

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через id=»решетку» и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов

Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной — это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews, otzivy и т.д

Лучше назвать carousel-once, если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: Sass для самых маленьких — подробное руководство;
Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css, который входит в состав CSS фреймворка Bootstrap;
Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки — переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по умолчанию также радует;
Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.

Другие уроки по теме «HTML и CSS»

Создание крутого Swiper-слайдера от А до Я. Джедай верстки #8. Материалы курса
Адаптивная верстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)
Адаптивная HTML верстка вертикального таймлайна
Bootstrap 4. Сетка. Подробное руководство
CSS Grid: адаптивная верстка реального макета
CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

Загрузка CSS для определенного браузера

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

Например, мы вставили какую-то рамку. В одном браузере, она может отображаться хорошо. Однако в другом, она может быть кривой, слишком большой или вовсе, отсутствовать.

Поэтому важно чтобы во всех программах просмотр ресурса был максимально одинаков и удобен. Но к сожалению, не все браузеры одинаково отображают элементы и стили сайта. Чтобы решить этот вопрос с разным отображением стилей, были созданы специальные CSS хаки

Это особые селекторы, которые воспринимаются определенным браузером и игнорируются другими

Чтобы решить этот вопрос с разным отображением стилей, были созданы специальные CSS хаки. Это особые селекторы, которые воспринимаются определенным браузером и игнорируются другими.

Однако проблема в том, что это не 100% решение проблемы. В новых версия браузеров CSS хак может не работать. Поэтому полностью полагаться на такой вариант я бы не советовал.

Ниже я дам вам несколько примеров. Однако самым наилучшим вариантом будет отказ от подключения разных css стилей для различных браузеров. Старайтесь делать единые стили для всех браузеров.

Это сложно, но возможно!

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

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

Еще обращайте внимание на валидацию кода. Ведь правильный тип документа имеет большое значение в согласованной работе браузеров

CSS хаки

Вот несколько примеров css хаков для Internet Explorer.

/**Вариант 1**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 2**/
*+html .block {
border:1px solid red;
}
/**Вариант 3**/
html>body .block {
*border:1px solid red;
}
/**Вариант 4**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 5**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 6**/
@media \0screen .block {
border:1px solid red;
}
/**Вариант 7**/
:root .block {
border:1px solid red;
}

Вместо .block вставляем свой класс или id, для которого задаются стили. Вместо border:1px solid red; приписываем свои свойства и их значения.

<!-->
<style>
    .block {
        border:1px solid red;
    }
</style>
<!-->

Вместо 7 указываем предпочтительную версию IE.

Также в теге head можно дополнительно отдельным файлом подключить css к html. Тут тоже вставляем код между комментариями.

<!--><link href="/ie.css" rel="stylesheet" type="text/css" /><!-->

Хак для Mozila Firefox:

@-moz-document url-prefix() {
.block{
    border:1px solid red;
}
}

Для Google Chrome:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.block{
    border:1px solid red;
}
}

Opera 10:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
.block{
    border:1px solid red;
}
}

Для ранних версий:

html:first-child .block {
  border:1px solid red;
}

или

o:-o-prefocus .block {
  border:1px solid red;
}