Пользователь
-
Автор темы
- #1
Переведено с французского.
Презентация включается в себя такие темы, как:
Что такое CSS?
Как интегрировать CSS в документ?
Селекторы CSS
Свойства и значения CSS
Единицы CSS
Цвета в CSS
Шрифты
Презентация включается в себя такие темы, как:
Что такое CSS?
Как интегрировать CSS в документ?
Селекторы CSS
Свойства и значения CSS
Единицы CSS
Цвета в CSS
Шрифты
Что такое CSS?
В нашем начале по HTML мы видели, как настраивать контент, структурировать его, использовать семантику для облегчения посещения наших страниц.
Тема - https://yougame.biz/threads/225426/
Но как определить цвета и размеры текста, фона или блоков страницы, используемые шрифты, положение элементов, поля и сделать анимацию?
Здесь на помощь приходит CSS (каскадные таблицы стилей).
CSS - это язык, основанный на правилах: мы определяем правила стиля для определенных элементов или групп элементов на странице.
Например, «Я хочу, чтобы основной заголовок <h1> моей страницы отображался красным большими буквами». В следующем коде базовое правило CSS выполняет такое форматирование:
h1 {
color: red;
font-size: 24px;
}
Анатомия правила CSS:
1. Селектор: HTML-элемент для форматирования. Это может быть имя элемента, предоставляемого HTML (p, h1, span…), или класс или идентификатор, используемый для элементов (.text-blue, # menu…).
Мы можем использовать несколько селекторов в правиле CSS, просто разделив их запятой (h1, h2 {}). HTML5 предоставляет новые способы выбора элементов HTML для веб-страницы, но мы не будем рассматривать их в этом руководстве.
2. Фигурные скобки: именно между ними мы храним наши утверждения, которые позволят нам стилизовать элементы.
3. Объявление (я): оно включает свойство и его значение, разделенные двоеточием ":" и заканчивающиеся точкой с запятой ";" . Вы можете поместить любое количество объявлений в правило CSS.
Таблица стилей состоит из последовательности правил без разделителей:
h1 {
color: red;
font-size: 24px;
}
p {
margin: 10px;
font-: 5em;
}
.texte-bleu {
color: blue;
}
Как интегрировать CSS в документ?
Для начала нам нужно указать HTML-документу, что мы хотим использовать правила CSS. У нас есть три возможности применить CSS к HTML-документу:
1. С файлом .CSS.
2. С тегом <style>, встроенным непосредственно в HTML-код.
3. С атрибутом "стиль".
1: с файлом .CSS:
Мы уже рассмотрели этот метод в курсе по HTML и элементу <head>. Например, чтобы связать файл "styles.css" с нашим документом, нам просто нужна следующая строка в разделе <head> HTML-документа:
<link rel="stylesheet" href="css/styles.css">
Этот элемент <link> указывает браузеру на наличие таблицы стилей благодаря атрибуту «rel» (например, отношению). Значение атрибута href указывает местоположение файла CSS, в нашем примере файл «style.css» находится в каталоге «css», что дает путь «css / style.css».
Это, безусловно, наиболее используемый и практичный метод.
2: с тегом <style>, встроенным непосредственно в HTML-код:
Возьмем типичную структуру HTML из курса HTML:
Мы можем интегрировать стиль CSS прямо в этот код, используя элемент «style».
Все, что вам нужно сделать, это открыть тег <style> и поместить правила CSS, которые вы хотите применить к нашему документу:
Вы можете поместить этот элемент в <head> или <body>.
3: С атрибутом «стиль»:
Скажем, у нас есть элемент <p>:
</p>Это хорошо сегодня утром</p>
Мы можем стилизовать этот отдельный элемент с помощью атрибута style, который даст:
<p style="color:red;">Это хорошо сегодня утром</p>
Преимущество этого метода заключается в том, что он позволяет настроить таргетинг на уникальный элемент на странице без необходимости назначать ему класс или идентификатор.
Приоритет стиля:
Предположим, мы используем одно и то же объявление CSS несколько раз в файле, в теге <style> и в атрибуте style.
Объявление CSS, определенное в атрибуте style, будет иметь приоритет, затем объявление CSS, определенное в теге <style>, и, наконец, объявление CSS, определенное в файле CSS. Это означает, что если для элемента <p> мы определяем его цвет красным цветом с помощью объявления CSS через атрибут <style>, и что в файле CSS мы создаем объявление CSS, которое определяет его цвет красным, объявление атрибута будет иметь приоритет, поэтому текст будет красным.
Если мы хотим, чтобы объявление CSS моего файла имело приоритет, мы можем добавить в объявление свойство! Important, которое дает:
p {
color: blue !important;
}
Таким образом, объявление CSS в файле имеет приоритет.
Селекторы CSS
Невозможно говорить о CSS без селекторов, и в этом курсе мы уже узнали о различных типах CSS.
Селектор нацелен на что-то в документе HTML, чтобы применить к нему стили. Если форматирование не применяется должным образом, вероятно, затронутый селектор работает не так, как вы ожидали.
Каждое правило CSS начинается с селектора или списка селекторов, чтобы указать браузеру, к каким элементам следует применять правила. Все следующие примеры являются примерами допустимых селекторов или списков селекторов.
Во многих случаях два разных селектора могут нацеливаться на один и тот же элемент HTML.
Рассмотрим таблицу стилей напротив того места, где у нас есть правило с селектором p, которое окрашивает абзацы в синий цвет, и правило, которое окрашивает элементы в специальном классе в красный цвет.
<p class="special">Какого я цвета?</p>
Скажем, в нашем HTML-документе у нас есть абзац с атрибутом класса, установленным на special. Могут применяться оба правила. Как вы думаете, какой будет цвет абзаца?
Мы определили два правила, которые влияют на один и тот же элемент, но класс победит, сделав абзац красным, даже если он появляется раньше в таблице стилей. Класс (или идентификатор) описывается как более конкретный или имеющий большую специфичность, чем селектор элемента, поэтому он выигрывает.
Теперь рассмотрим таблицу стилей напротив, где у нас есть два правила с селектором p, который окрашивает абзацы в красный цвет, и еще одно, которое следует за ним, которое окрашивает абзацы в синий цвет.
В CSS есть правила для определения того, какое форматирование применять при столкновении селекторов, они называются каскадом и специфичностью.
В блоке кода напротив мы определили два правила, которые влияют на один и тот же элемент, но в итоге абзац окрашивается в синий цвет. Это связано с тем, что объявление, которое определило его синим цветом, появляется позже в таблице стилей, а более поздние стили заменяют предыдущие. Это водопад в действии.
На первый взгляд правила каскада и специфичности могут показаться сложными; с лучшим знанием CSS они будут казаться вам более естественными. На данный момент помните, что такие случаи действительно существуют, и иногда CSS может применяться не так, как ожидалось. В такой ситуации помните, что один и тот же элемент может быть целью нескольких параллельных селекторов, и будьте осторожны с порядком, в котором вы стилизуете свои элементы в CSS.
Свойства и значения CSS
Мы видели в анатомии правила CSS для стилизации элемента, состоящего из объявлений, которые представляют собой пары свойств и значений.
Код CSS напротив выделяет уникальное свойство и значение. Имя свойства - цвет, а значение - синий.
● Свойства: читаемые идентификаторы, указывающие стилистические характеристики (например, размер шрифта, ширина, цвет фона), которые вы хотите изменить.
● Значения: каждому указанному свойству присваивается значение. Он указывает, как вы хотите изменить эти стилистические характеристики (например, изменив цвет, ширину или фон шрифта).
Объявления CSS помещаются в блоки объявлений CSS. На изображении напротив показан наш CSS с выделенным блоком объявления.
Наконец, блоки объявления CSS связаны с селекторами для создания правила CSS.
Установка свойств CSS на определенные значения - основная функция языка CSS. Механизм CSS вычисляет объявления, которые применяются к каждому элементу на странице, чтобы соответствующим образом представить и стилизовать его. Важно помнить, что свойства и значения чувствительны к регистру в CSS. Свойство и значение каждой пары разделяются двоеточием (:).
Важно: если свойство неизвестно или если значение для данного свойства недопустимо, объявление считается недопустимым и полностью игнорируется механизмом CSS браузера.
Единицы CSS
CSS предлагает несколько различных единиц измерения размера элемента или шрифта. Некоторые из них имеют свою историю в типографике, например точка (pt) и pica (pc), другие известны из повседневного использования, например, сантиметр (cm) и дюйм (in). И еще есть «волшебная» единица, которая была изобретена специально для CSS: пиксель (px).
Нет никаких ограничений относительно того, какие единицы можно использовать в определенном месте. Если свойство принимает значение в пикселях (поле: 5 пикселей), оно также принимает значение в дюймах или сантиметрах (поле: 1,2 дюйма; поле: 0,5 см) и наоборот.
Относительные единицы:
Единицы относительной длины используются для выражения расстояния относительно другой величины. Таким образом, единица em будет относиться к размеру (телу) шрифта для элемента; Единица измерения vh будет относиться к высоте области просмотра. Вот подборка:
Абсолютные единицы:
Единицы абсолютной длины соответствуют физическим измерениям и поэтому особенно подходят, когда носитель отображения имеет фиксированный размер (например, печать). Таким образом, единица измерения см соответствует физическому сантиметру.
Проценты:
Значение типа% представляет собой долю другого ссылочного значения.
Значения, выраженные в процентах, относятся к другим величинам (например, длине). Каждое свойство, позволяющее использовать процент, также определяет количество, к которому относится этот процент. Эта величина может быть значением другого свойства того же элемента, значением свойства родительского элемента, характеристикой включающего блока или чем-то еще.
.boite {
width: 50%;
}
Итак, если мы используем ширину в процентах на поле. Этот процент будет относиться к рассчитанной ширине родительского элемента поля. Итак, в нашем предыдущем примере, если родительский элемент .box имеет ширину 1000 пикселей, .box будет иметь размер 500 пикселей или 50%.
Цвета в CSS
Каждому элементу документа может быть назначен цвет шрифтов CSS, цвета фона, границы, тени… Эти цвета могут быть сплошными или градиентными.
Несколько единиц позволяют вам определять эти цвета, мы увидим их в этой главе.
Вот основные цветовые единицы:
● По имени.
● По значениям RGB.
● В шестнадцатеричном формате.
В CSS используется еще одна цветовая единица: HSL («оттенок, насыщенность, значение», что переводится как «оттенок, насыщенность и значение»), но мы не будем обсуждать это в этом курсе.
Цвета по названию:
p {
color: blue;
}
140 названий цветов предопределены в спецификации цветов HTML и CSS.
Например: синий, красный, коралловый, коричневый и т. Д .:
Эти имена на английском языке, список можно найти
Цвета по значениям RGB:
p {
color: rgb(0,0,255);
}
Значение цвета RGB записывается в такой форме:
rgb (КРАСНЫЙ, ЗЕЛЕНЫЙ, СИНИЙ)
Или мы заменим «красный», «зеленый» и «синий» на их интенсивность в диапазоне от 0 до 255 (8 бит / кодирование цветового канала), или, например, для красного: rgb (255,0,0).
Смешивая интенсивности цветовых каналов, вы можете воспроизвести любой цвет из палитры из примерно 16 миллионов доступных цветов (255 * 255 * 255).
Цвета по значениям RGBA:
p {
color: rgba(0,0,255,1);
}
Мы можем добавить к RGB четвертый канал, называемый АЛЬФА-каналом, обозначенный «a», который позволяет добавить прозрачности нашему элементу, изменяя его интенсивность от 0 до 1.
● 0 означает полную прозрачность.
● 1 полностью непрозрачен.
● Это означает, что значение альфа-канала 0,5 будет полупрозрачным.
Цвета по шестнадцатеричным значениям:
p {
color:#0000FF;
}
Шестнадцатеричный цвет задается с помощью: #RRGGBB, где шестнадцатеричные целые числа RR (красный), GG (зеленый) и BB (синий) определяют компоненты цвета. Все значения должны быть от 00 до FF.
Например, значение # FF0000 отображается красным, потому что для синего компонента установлено максимальное значение (ff), а для остальных - 00.
Шрифты
Выбор шрифта важен
Выбор правильного шрифта имеет огромное влияние на то, как читатели воспринимают веб-сайт.
Правильный шрифт может создать сильную идентичность для вашего сайта.
Важно использовать легко читаемый шрифт. Шрифт добавляет ценность вашему тексту. Также важно правильно выбрать цвет и размер текста для шрифта.
Есть пять семейств общих политик:
1. Шрифты с засечками имеют небольшую линию по краям каждой буквы. В них есть ощущение формальности и элегантности.
2. У политик без засечек четкие линии (без мелких тире). Они сохраняют современный и минималистичный вид.
3. Моноширинные шрифты - здесь все буквы имеют одинаковую фиксированную ширину. Они по-прежнему выглядят механически.
4. Курсивные шрифты имитируют человеческий почерк.
5. Модная политика - это декоративная / игривая политика.
Свойство font-family:
В CSS мы используем свойство font-family для включения шрифта текста.
Свойство font-family должно содержать несколько имен политик в качестве «резервной» системы для обеспечения максимальной совместимости между браузерами / операционными системами. Начните с желаемого шрифта и закончите общим семейством (чтобы браузер мог выбрать аналогичный шрифт из общего семейства, если другой шрифт недоступен). Названия шрифтов должны быть разделены запятыми.
p{font-family: "Times New Roman", Times, serif;}
Примечание. Если название шрифта состоит из более чем одного слова, оно должно быть заключено в кавычки, например: «Times New Roman».
"Веб-безопасные" шрифты:
Веб-безопасные шрифты - это шрифты, которые универсально устанавливаются во всех браузерах и на всех устройствах.
Однако не существует 100% полностью безопасных шрифтов для Интернета. Всегда есть вероятность, что шрифт не найден или установлен неправильно.
Поэтому очень важно всегда использовать резервные шрифты.
Это означает, что вам нужно добавить список похожих «резервных шрифтов» в свойстве «font-family». Если первый шрифт не работает, браузер попробует следующий, следующий и так далее. Всегда заканчивайте список общим названием семейства шрифтов.
p{font-family: Tahoma, Verdana, sans-serif;}
Здесь есть три типа шрифтов: Tahoma, Verdana и sans-serif. Второй и третий шрифты являются резервными на случай, если первый не будет найден.
Подборка "веб-безопасных" шрифтов:
● Arial (sans-serif)
● Verdana (sans-serif)
● Tahoma (sans-serif)
● Trebuchet MS (sans-serif)
● Times New Roman (serif)
● Georgia (serif)
● Garamond (serif)
● Courier New (monospace)
● Brush Script MT
В нашем начале по HTML мы видели, как настраивать контент, структурировать его, использовать семантику для облегчения посещения наших страниц.
Тема - https://yougame.biz/threads/225426/
Но как определить цвета и размеры текста, фона или блоков страницы, используемые шрифты, положение элементов, поля и сделать анимацию?
Здесь на помощь приходит CSS (каскадные таблицы стилей).
CSS - это язык, основанный на правилах: мы определяем правила стиля для определенных элементов или групп элементов на странице.
Например, «Я хочу, чтобы основной заголовок <h1> моей страницы отображался красным большими буквами». В следующем коде базовое правило CSS выполняет такое форматирование:
h1 {
color: red;
font-size: 24px;
}
Анатомия правила CSS:
1. Селектор: HTML-элемент для форматирования. Это может быть имя элемента, предоставляемого HTML (p, h1, span…), или класс или идентификатор, используемый для элементов (.text-blue, # menu…).
Мы можем использовать несколько селекторов в правиле CSS, просто разделив их запятой (h1, h2 {}). HTML5 предоставляет новые способы выбора элементов HTML для веб-страницы, но мы не будем рассматривать их в этом руководстве.
2. Фигурные скобки: именно между ними мы храним наши утверждения, которые позволят нам стилизовать элементы.
3. Объявление (я): оно включает свойство и его значение, разделенные двоеточием ":" и заканчивающиеся точкой с запятой ";" . Вы можете поместить любое количество объявлений в правило CSS.
Таблица стилей состоит из последовательности правил без разделителей:
h1 {
color: red;
font-size: 24px;
}
p {
margin: 10px;
font-: 5em;
}
.texte-bleu {
color: blue;
}
Как интегрировать CSS в документ?
Для начала нам нужно указать HTML-документу, что мы хотим использовать правила CSS. У нас есть три возможности применить CSS к HTML-документу:
1. С файлом .CSS.
2. С тегом <style>, встроенным непосредственно в HTML-код.
3. С атрибутом "стиль".
1: с файлом .CSS:
Мы уже рассмотрели этот метод в курсе по HTML и элементу <head>. Например, чтобы связать файл "styles.css" с нашим документом, нам просто нужна следующая строка в разделе <head> HTML-документа:
<link rel="stylesheet" href="css/styles.css">
Этот элемент <link> указывает браузеру на наличие таблицы стилей благодаря атрибуту «rel» (например, отношению). Значение атрибута href указывает местоположение файла CSS, в нашем примере файл «style.css» находится в каталоге «css», что дает путь «css / style.css».
Это, безусловно, наиболее используемый и практичный метод.
2: с тегом <style>, встроенным непосредственно в HTML-код:
Возьмем типичную структуру HTML из курса HTML:
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя тестовая странциа</title>
</head>
<body>
<p>Вот моя страничка</p>
</body>
</html>Все, что вам нужно сделать, это открыть тег <style> и поместить правила CSS, которые вы хотите применить к нашему документу:
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя тестовая страница</title>
</head>
<body>
<p>Вот моя веб-страница</p>
<style>
p{
color:red;
}
</style>
</body>
</html>3: С атрибутом «стиль»:
Скажем, у нас есть элемент <p>:
</p>Это хорошо сегодня утром</p>
Мы можем стилизовать этот отдельный элемент с помощью атрибута style, который даст:
<p style="color:red;">Это хорошо сегодня утром</p>
Преимущество этого метода заключается в том, что он позволяет настроить таргетинг на уникальный элемент на странице без необходимости назначать ему класс или идентификатор.
Приоритет стиля:
Предположим, мы используем одно и то же объявление CSS несколько раз в файле, в теге <style> и в атрибуте style.
Объявление CSS, определенное в атрибуте style, будет иметь приоритет, затем объявление CSS, определенное в теге <style>, и, наконец, объявление CSS, определенное в файле CSS. Это означает, что если для элемента <p> мы определяем его цвет красным цветом с помощью объявления CSS через атрибут <style>, и что в файле CSS мы создаем объявление CSS, которое определяет его цвет красным, объявление атрибута будет иметь приоритет, поэтому текст будет красным.
Если мы хотим, чтобы объявление CSS моего файла имело приоритет, мы можем добавить в объявление свойство! Important, которое дает:
p {
color: blue !important;
}
Таким образом, объявление CSS в файле имеет приоритет.
Селекторы CSS
Невозможно говорить о CSS без селекторов, и в этом курсе мы уже узнали о различных типах CSS.
Селектор нацелен на что-то в документе HTML, чтобы применить к нему стили. Если форматирование не применяется должным образом, вероятно, затронутый селектор работает не так, как вы ожидали.
Каждое правило CSS начинается с селектора или списка селекторов, чтобы указать браузеру, к каким элементам следует применять правила. Все следующие примеры являются примерами допустимых селекторов или списков селекторов.
| h1 | Выбор элементов HTML |
| .inputEmail | Подбор по классу |
| #mainGauche | Выбор по ID |
| nav li a | Иерархический выбор: будут затронуты только элементы «a», включенные в элементы «nav» и «li». |
| h1, .inputEmail, #mainGauche | Выделение нескольких элементов через запятую. |
Во многих случаях два разных селектора могут нацеливаться на один и тот же элемент HTML.
Рассмотрим таблицу стилей напротив того места, где у нас есть правило с селектором p, которое окрашивает абзацы в синий цвет, и правило, которое окрашивает элементы в специальном классе в красный цвет.
<p class="special">Какого я цвета?</p>
Скажем, в нашем HTML-документе у нас есть абзац с атрибутом класса, установленным на special. Могут применяться оба правила. Как вы думаете, какой будет цвет абзаца?
Мы определили два правила, которые влияют на один и тот же элемент, но класс победит, сделав абзац красным, даже если он появляется раньше в таблице стилей. Класс (или идентификатор) описывается как более конкретный или имеющий большую специфичность, чем селектор элемента, поэтому он выигрывает.
Теперь рассмотрим таблицу стилей напротив, где у нас есть два правила с селектором p, который окрашивает абзацы в красный цвет, и еще одно, которое следует за ним, которое окрашивает абзацы в синий цвет.
В CSS есть правила для определения того, какое форматирование применять при столкновении селекторов, они называются каскадом и специфичностью.
В блоке кода напротив мы определили два правила, которые влияют на один и тот же элемент, но в итоге абзац окрашивается в синий цвет. Это связано с тем, что объявление, которое определило его синим цветом, появляется позже в таблице стилей, а более поздние стили заменяют предыдущие. Это водопад в действии.
На первый взгляд правила каскада и специфичности могут показаться сложными; с лучшим знанием CSS они будут казаться вам более естественными. На данный момент помните, что такие случаи действительно существуют, и иногда CSS может применяться не так, как ожидалось. В такой ситуации помните, что один и тот же элемент может быть целью нескольких параллельных селекторов, и будьте осторожны с порядком, в котором вы стилизуете свои элементы в CSS.
Свойства и значения CSS
Мы видели в анатомии правила CSS для стилизации элемента, состоящего из объявлений, которые представляют собой пары свойств и значений.
Код CSS напротив выделяет уникальное свойство и значение. Имя свойства - цвет, а значение - синий.
● Свойства: читаемые идентификаторы, указывающие стилистические характеристики (например, размер шрифта, ширина, цвет фона), которые вы хотите изменить.
● Значения: каждому указанному свойству присваивается значение. Он указывает, как вы хотите изменить эти стилистические характеристики (например, изменив цвет, ширину или фон шрифта).
Объявления CSS помещаются в блоки объявлений CSS. На изображении напротив показан наш CSS с выделенным блоком объявления.
Наконец, блоки объявления CSS связаны с селекторами для создания правила CSS.
Установка свойств CSS на определенные значения - основная функция языка CSS. Механизм CSS вычисляет объявления, которые применяются к каждому элементу на странице, чтобы соответствующим образом представить и стилизовать его. Важно помнить, что свойства и значения чувствительны к регистру в CSS. Свойство и значение каждой пары разделяются двоеточием (:).
Важно: если свойство неизвестно или если значение для данного свойства недопустимо, объявление считается недопустимым и полностью игнорируется механизмом CSS браузера.
Единицы CSS
CSS предлагает несколько различных единиц измерения размера элемента или шрифта. Некоторые из них имеют свою историю в типографике, например точка (pt) и pica (pc), другие известны из повседневного использования, например, сантиметр (cm) и дюйм (in). И еще есть «волшебная» единица, которая была изобретена специально для CSS: пиксель (px).
Нет никаких ограничений относительно того, какие единицы можно использовать в определенном месте. Если свойство принимает значение в пикселях (поле: 5 пикселей), оно также принимает значение в дюймах или сантиметрах (поле: 1,2 дюйма; поле: 0,5 см) и наоборот.
Относительные единицы:
Единицы относительной длины используются для выражения расстояния относительно другой величины. Таким образом, единица em будет относиться к размеру (телу) шрифта для элемента; Единица измерения vh будет относиться к высоте области просмотра. Вот подборка:
Единица | Относительно |
| em | Размер шрифта элемента (body) |
| rem | Размер шрифта (тела) корневого элемента |
| vh | 1% высоты области просмотра |
| vw | 1% ширины области просмотра |
| vmin | 1% площади отображения по наименьшему размеру |
| vmax | 1% от площади отображения, в зависимости от того, что больше |
Абсолютные единицы:
Единицы абсолютной длины соответствуют физическим измерениям и поэтому особенно подходят, когда носитель отображения имеет фиксированный размер (например, печать). Таким образом, единица измерения см соответствует физическому сантиметру.
Единица | Относительно |
| cm | Сантиметр |
| mm | Миллиметр |
| in | Дюйм |
| pc | Единица длины |
| pt | Точки |
| px | Пиксели |
Проценты:
Значение типа% представляет собой долю другого ссылочного значения.
Значения, выраженные в процентах, относятся к другим величинам (например, длине). Каждое свойство, позволяющее использовать процент, также определяет количество, к которому относится этот процент. Эта величина может быть значением другого свойства того же элемента, значением свойства родительского элемента, характеристикой включающего блока или чем-то еще.
.boite {
width: 50%;
}
Итак, если мы используем ширину в процентах на поле. Этот процент будет относиться к рассчитанной ширине родительского элемента поля. Итак, в нашем предыдущем примере, если родительский элемент .box имеет ширину 1000 пикселей, .box будет иметь размер 500 пикселей или 50%.
Цвета в CSS
Каждому элементу документа может быть назначен цвет шрифтов CSS, цвета фона, границы, тени… Эти цвета могут быть сплошными или градиентными.
Несколько единиц позволяют вам определять эти цвета, мы увидим их в этой главе.
Вот основные цветовые единицы:
● По имени.
● По значениям RGB.
● В шестнадцатеричном формате.
В CSS используется еще одна цветовая единица: HSL («оттенок, насыщенность, значение», что переводится как «оттенок, насыщенность и значение»), но мы не будем обсуждать это в этом курсе.
Цвета по названию:
p {
color: blue;
}
140 названий цветов предопределены в спецификации цветов HTML и CSS.
Например: синий, красный, коралловый, коричневый и т. Д .:
Эти имена на английском языке, список можно найти
Пожалуйста, авторизуйтесь для просмотра ссылки.
.Цвета по значениям RGB:
p {
color: rgb(0,0,255);
}
Значение цвета RGB записывается в такой форме:
rgb (КРАСНЫЙ, ЗЕЛЕНЫЙ, СИНИЙ)
Или мы заменим «красный», «зеленый» и «синий» на их интенсивность в диапазоне от 0 до 255 (8 бит / кодирование цветового канала), или, например, для красного: rgb (255,0,0).
Смешивая интенсивности цветовых каналов, вы можете воспроизвести любой цвет из палитры из примерно 16 миллионов доступных цветов (255 * 255 * 255).
Цвета по значениям RGBA:
p {
color: rgba(0,0,255,1);
}
Мы можем добавить к RGB четвертый канал, называемый АЛЬФА-каналом, обозначенный «a», который позволяет добавить прозрачности нашему элементу, изменяя его интенсивность от 0 до 1.
● 0 означает полную прозрачность.
● 1 полностью непрозрачен.
● Это означает, что значение альфа-канала 0,5 будет полупрозрачным.
| TEXT | rgba(255,255,255,1) | TEXT | rgba(255,255,255,0.5) |
| TEXT | rgba(255,255,255,0) | TEXT | rgba(255,255,255,0.25) |
Цвета по шестнадцатеричным значениям:
p {
color:#0000FF;
}
Шестнадцатеричный цвет задается с помощью: #RRGGBB, где шестнадцатеричные целые числа RR (красный), GG (зеленый) и BB (синий) определяют компоненты цвета. Все значения должны быть от 00 до FF.
Например, значение # FF0000 отображается красным, потому что для синего компонента установлено максимальное значение (ff), а для остальных - 00.
Шрифты
Выбор шрифта важен
Выбор правильного шрифта имеет огромное влияние на то, как читатели воспринимают веб-сайт.
Правильный шрифт может создать сильную идентичность для вашего сайта.
Важно использовать легко читаемый шрифт. Шрифт добавляет ценность вашему тексту. Также важно правильно выбрать цвет и размер текста для шрифта.
Есть пять семейств общих политик:
1. Шрифты с засечками имеют небольшую линию по краям каждой буквы. В них есть ощущение формальности и элегантности.
2. У политик без засечек четкие линии (без мелких тире). Они сохраняют современный и минималистичный вид.
3. Моноширинные шрифты - здесь все буквы имеют одинаковую фиксированную ширину. Они по-прежнему выглядят механически.
4. Курсивные шрифты имитируют человеческий почерк.
5. Модная политика - это декоративная / игривая политика.
Свойство font-family:
В CSS мы используем свойство font-family для включения шрифта текста.
Свойство font-family должно содержать несколько имен политик в качестве «резервной» системы для обеспечения максимальной совместимости между браузерами / операционными системами. Начните с желаемого шрифта и закончите общим семейством (чтобы браузер мог выбрать аналогичный шрифт из общего семейства, если другой шрифт недоступен). Названия шрифтов должны быть разделены запятыми.
p{font-family: "Times New Roman", Times, serif;}
Примечание. Если название шрифта состоит из более чем одного слова, оно должно быть заключено в кавычки, например: «Times New Roman».
"Веб-безопасные" шрифты:
Веб-безопасные шрифты - это шрифты, которые универсально устанавливаются во всех браузерах и на всех устройствах.
Однако не существует 100% полностью безопасных шрифтов для Интернета. Всегда есть вероятность, что шрифт не найден или установлен неправильно.
Поэтому очень важно всегда использовать резервные шрифты.
Это означает, что вам нужно добавить список похожих «резервных шрифтов» в свойстве «font-family». Если первый шрифт не работает, браузер попробует следующий, следующий и так далее. Всегда заканчивайте список общим названием семейства шрифтов.
p{font-family: Tahoma, Verdana, sans-serif;}
Здесь есть три типа шрифтов: Tahoma, Verdana и sans-serif. Второй и третий шрифты являются резервными на случай, если первый не будет найден.
Подборка "веб-безопасных" шрифтов:
● Arial (sans-serif)
● Verdana (sans-serif)
● Tahoma (sans-serif)
● Trebuchet MS (sans-serif)
● Times New Roman (serif)
● Georgia (serif)
● Garamond (serif)
● Courier New (monospace)
● Brush Script MT
