Начало работы с CSS

Начало работы с CSS

За серией «Первые шаги в HTML» следуют первые шаги в CSS..

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

CSS означает каскадные таблицы стилей. «Диаграммы стилей», потому что они схематично описывают внешний вид / стиль страницы. Каскадирование, потому что мы можем применить стиль к элементам, вложенным определенным образом.

Как и HTML, CSS — это компьютерный язык, но не язык программирования. Напротив, CSS — это не язык разметки / описания, а язык схем..

Что означает «язык схем»??

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

На первом курсе математики мы изучали пространственное расположение точек, векторов и плоскостей. Тогда сначала у меня были трудности с этими задачами. На консультации я спросил ассистента, есть ли просто «схема» их решения. Как только я использовал слово «схема», я был смущен, потому что это звучало не академично..

Однако помощник понял, что я имел в виду, улыбнулся и просто сказал мне:

«В таких задачах у вас всегда есть информация о двух из трех вещей — точке, векторе / линии или плоскости. Что вам нужно сделать, так это заменить известные в формулах, для которых у вас есть данные "..

Вот схема!

Синтаксис CSS

Синтаксис CSS разработан специально для языков разметки (например, HTML). Каждое определение начинается с селектора. По сути, это имя тега, который мы хотим стилизовать. После того, как селектор записан, объявление заключено в фигурные / большие скобки — {и}.

Читать также:  Платформа анимации GreenSock (GSAP)

селектор {объявление}

Определения состоят из пар свойство: значение, разделенных точкой с запятой..

п {цвет: черный; }

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

Форматирование кода

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

п {цвет: черный; размер шрифта: 12 пикселей; выравнивание текста: слева; }

Или каждое свойство свойства должно быть на новой строке:

п {цвет: черный; размер шрифта: 12 пикселей; выравнивание текста: слева; }

Комментирование в CSS

Есть способ оставлять комментарии на любом компьютерном языке. Комментарии используются для того, чтобы оставлять заметки другим программистам, которые могут просматривать наш код. Это могут быть коллеги, работающие на том же сайте, или другие заинтересованные стороны..

Комментарии CSS вводятся в блок. Этот блок начинается с / * и заканчивается * /. Текст в блоке браузером не обрабатывается. Другими словами, это не влияет на внешний вид нашей страницы..

/ * Это простой пример комментариев в CSS. Не имеет значения, какой длины текст или сколько в нем строк, главное, чтобы он заключен в правильный блок * /
п {цвет: # 000; }
/ * Это простой пример комментариев в CSS. Не имеет значения, какой длины текст или сколько в нем строк, главное, чтобы он заключен в правильный блок * /
п {цвет: # 000; }

Ат-правила CSS (@ -правила)

В CSS есть дополнительные правила (каждое со своим синтаксисом), начинающиеся с «@». Ниже мы рассмотрим некоторые из них..

Читать также:  Запросы AJAX с кешированием

@импорт

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

Намного проще загрузить один файл размером 20 КБ, чем 10 файлов размером 2 КБ..

Однако по своему усмотрению вы можете использовать его следующим образом:

@import url (‘другой-стиль.css’);

В этом случае вы загрузите все стили из файла other-style.css. Путь, переданный в url (), может быть абсолютным или относительным..

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

@charset

Хотя это не обязательно, в начале документов CSS хорошо иметь их кодировку следующим образом:

@charset "utf-8";

@средства массовой информации

Стили также можно применять только к определенным устройствам. Это указано в CSS следующим образом:

@media screen {p {color: # 000; }}

Ключевое слово screen после @media показывает, что эти стили действительны только в том случае, если страница просматривается на мониторе компьютера..

Помимо экрана, есть еще:

  • all — для всех устройств
  • шрифт Брайля — для устройств с физическим тактильным интерфейсом
  • с тиснением — для принтеров Брайля
  • портативный — для карманных устройств с маленьким экраном и предположительно низкой скоростью Интернета (карманный компьютер, мобильный телефон)
  • print — для принтеров, как должно выглядеть содержимое после печати
  • проекция — для проекторных устройств (тех, на которых делается презентация)
  • речь — для устройств, генерирующих аудиоконтент (люди с нарушениями зрения используют программное обеспечение, которое читает содержимое страницы)
  • tty — для устройств с фиксированным количеством символов в строке
  • tv (TVs) — для телевизоров, которые обычно имеют более низкое разрешение, чем компьютерные мониторы, и их труднее прокручивать
Читать также:  Запросы AJAX

Медиа-запросы размера экрана

В последние годы использование @media пошло в другом направлении. Теперь он используется не столько для обозначения типа устройства, сколько размера экрана..

Для экранов с разрешением, равным или меньшим 1024 пикселей, мы пишем:

@media (max-width: 1024px) {/ * здесь мы описываем стили для ширины 1024px и вниз * /}

Значения размеров экрана:

  • max-width — меньше или равно (по ширине)
  • min-width — больше или равно (по ширине)
  • max-height — меньше или равно (для высоты)
  • min-height — больше или равно (для высоты)

Эти значения должны быть в скобках, как описано выше. На это есть 2 причины:

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

Медиа-запросы на ориентацию экрана

Вы можете использовать @media (ориентация: альбомная) и @media (ориентация: портрет), чтобы различать «лежащее» и «прямое» устройство (например, телефон или планшет)..

Полезные ссылки (на английском языке):

  1. CSS-синтаксис и селекторы
  2. Синтаксис CSS
  3. Адаптивный веб-дизайн — медиа-запросы
  4. Медиа-запросы для общих точек останова устройства
Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?