Всем доброго времени суток!
Мы с вами сделали первый шаг на пути становления профессиональными верстальщиками — освоили основы HTML. Теперь нас ждет увлекательное путешествие в мир стилей CSS.
Каждый день мы будем открывать для себя новые стили, которые придадут вашим проектам изящество и приятный вид. Давайте вместе создавать красивые и привлекательные веб-страницы!
Made in HTML/CSS - ваш гид в становлении профи
Мы с вами сделали первый шаг на пути становления профессиональными верстальщиками — освоили основы HTML. Теперь нас ждет увлекательное путешествие в мир стилей CSS.
Каждый день мы будем открывать для себя новые стили, которые придадут вашим проектам изящество и приятный вид. Давайте вместе создавать красивые и привлекательные веб-страницы!
👍12👨💻2
1 глава css - тексты
Чтобы задать стиль элементу html , в css пишем сам элемент и ставим { }. Например: p{ }
CSS стиль
1. Названия цветов: Например,
2. RGB: Формат, где цвет задается с помощью значений красного, зеленого и синего (например,
3. HEX: Шестнадцатеричный формат, начинающийся с символа
4. HSL: Цвет задается через оттенок, насыщенность и яркость (например,
Чтобы задать стиль элементу html , в css пишем сам элемент и ставим { }. Например: p{ }
CSS стиль
color используется для определения цвета текста в HTML элементах. Он может принимать значение в различных форматах, таких как:1. Названия цветов: Например,
red, blue, green.2. RGB: Формат, где цвет задается с помощью значений красного, зеленого и синего (например,
rgb(255, 0, 0) для красного).3. HEX: Шестнадцатеричный формат, начинающийся с символа
# (например, #FF0000 для красного).4. HSL: Цвет задается через оттенок, насыщенность и яркость (например,
hsl(0, 100%, 50%) для красного).🔥5👍4👨💻2
CSS стиль
Свойство font может быть указано либо как отдельное ключевое слово, которое будет выбирать системный шрифт, либо как сокращение для различных свойств, связанных со шрифтом.
font используется для управления типографикой текста на веб-страницах. Это свойство объединяет несколько аспектов шрифта и позволяет легко задавать их в одном месте. Свойство font может быть указано либо как отдельное ключевое слово, которое будет выбирать системный шрифт, либо как сокращение для различных свойств, связанных со шрифтом.
👍7🔥4
CSS стиль
Это свойство позволяет указать один или несколько шрифтов, которые браузер будет использовать при отображении текста. Если первый указанный шрифт недоступен, браузер перейдет к следующему в списке.
Свойство
Семейства шрифтов:
- serif (с засечками) — например, Times New Roman, Georgia.
- sans-serif (без засечек) — например, Arial, Helvetica.
- monospace (моноширинные) — например, Courier New, Lucida Console.
- cursive (курсивные) — например, Comic Sans MS, Pacifico.
- fantasy — например, Impact, Charcoal.
font-family используется для определения типа шрифта, который будет применяться к тексту в HTML элементах. Это свойство позволяет указать один или несколько шрифтов, которые браузер будет использовать при отображении текста. Если первый указанный шрифт недоступен, браузер перейдет к следующему в списке.
Свойство
font-family может принимать как конкретные названия шрифтов, так и обобщенные семейства шрифтов, такие как:Семейства шрифтов:
- serif (с засечками) — например, Times New Roman, Georgia.
- sans-serif (без засечек) — например, Arial, Helvetica.
- monospace (моноширинные) — например, Courier New, Lucida Console.
- cursive (курсивные) — например, Comic Sans MS, Pacifico.
- fantasy — например, Impact, Charcoal.
👍11
CSS правило
Это правило определяет собственный шрифт, который можно использовать на веб-сайте, даже если он не установлен на компьютере пользователя.
С помощью
@font-face позволяет веб-дизайнерам использовать пользовательские шрифты, которые не являются стандартными для браузеров.Это правило определяет собственный шрифт, который можно использовать на веб-сайте, даже если он не установлен на компьютере пользователя.
С помощью
@font-face вы можете указать файл шрифта, который браузер должен загрузить, а также задать различные параметры для него.🔥8👍5
Свойство CSS
Оно позволяет контролировать, насколько крупным или мелким будет текст, что непосредственно влияет на его читаемость и общий вид веб-страницы.
1. Абсолютные единицы:
-
-
2. Относительные единицы:
-
-
-
3. Ключевые слова:
- Свойство поддерживает и некоторые предопределенные значения, такие как
font-size задает размер шрифта для текста в HTML-элементах.Оно позволяет контролировать, насколько крупным или мелким будет текст, что непосредственно влияет на его читаемость и общий вид веб-страницы.
font-size может принимать различные типы значений:1. Абсолютные единицы:
-
px (пиксели): фиксированный размер, который не зависит от других факторов. Например, 16px.-
pt (пункты): часто используются в печати, 1pt равен 1/72 дюйма. Например, 12pt.2. Относительные единицы:
-
em: размер шрифта относительно родительского элемента. Например, 1.5em будет 1.5 раза больше шрифта родителя.-
rem: размер шрифта относительно размера шрифта корневого элемента (<html>). Например, 1rem всегда равен размеру шрифта в корневом элементе.-
%: также относительное значение. Например, 150% будет 1.5 раза больше, чем размер шрифта родителя.3. Ключевые слова:
- Свойство поддерживает и некоторые предопределенные значения, такие как
small, medium, large, x-large, и т.д.👍12
Свойство CSS
Это свойство позволяет дизайнерам улучшать типографику на веб-странице, добавляя полезные эффекты.
font-variant используется для управления отображением шрифта, в частности для применения стилизованных версий шрифтов, таких как малые прописные буквы и определённые альтернативные версии знаков. Это свойство позволяет дизайнерам улучшать типографику на веб-странице, добавляя полезные эффекты.
👍11
Свойство CSS
Возможные значения для
1. slice:
- Это значение по умолчанию. Оно указывает, что декорации будут нарезаны на уровне границ, что означает, что каждая часть, которая отображается в новой строке, будет иметь те же стили, что и основное содержимое. Этот метод может привести к "разрыву" декораций.
2. clone:
- Декорации будут клонироваться для каждой части текста, который обрезан, создавая одно и то же декорирование для каждой строки или колонки, как будто каждая часть является отдельным элементом. Это позволяет избежать "разрывов" в границах и делает их непрерывными.
box-decoration-break используется для управления тем, как элементы с составными или комбинированными декорациями (например, границами или фоновыми цветами) ведут себя при разбиении на несколько строк.Возможные значения для
box-decoration-break1. slice:
- Это значение по умолчанию. Оно указывает, что декорации будут нарезаны на уровне границ, что означает, что каждая часть, которая отображается в новой строке, будет иметь те же стили, что и основное содержимое. Этот метод может привести к "разрыву" декораций.
2. clone:
- Декорации будут клонироваться для каждой части текста, который обрезан, создавая одно и то же декорирование для каждой строки или колонки, как будто каждая часть является отдельным элементом. Это позволяет избежать "разрывов" в границах и делает их непрерывными.
👍14
Свойство CSS
Оно позволяет контролировать, как браузер обрабатывает длинные слова или строки, которые могут выйти за пределы своего родительского элемента. Это свойство особенно полезно для обеспечения удобочитаемости текста в ограниченных пространствах.
overflow-wrap управляет переносом слов в случае, если они не помещаются по ширине контейнера.Оно позволяет контролировать, как браузер обрабатывает длинные слова или строки, которые могут выйти за пределы своего родительского элемента. Это свойство особенно полезно для обеспечения удобочитаемости текста в ограниченных пространствах.
👍11
Свойство CSS
Это свойство полезно при работе с элементами, содержащими цитаты, такими как
quotes управляет отображением кавычек вокруг цитируемого текста. Это свойство полезно при работе с элементами, содержащими цитаты, такими как
<blockquote> или элементы списка. Оно позволяет задавать стиль и тип кавычек, которые будут выводиться при использовании других CSS-свойств, например, content в комбинации с псевдоэлементами ::before и ::after.👍10
Свойство CSS
Оно позволяет задавать, как отображать текст, если он не помещается в доступном пространстве.
Это свойство полезно, когда вы работаете с ограниченными размерами контейнеров, и хотите указать, как следует обрабатывать избыточный текст.
text-overflow используется для управления поведением текста, который выходит за пределы контейнера. Оно позволяет задавать, как отображать текст, если он не помещается в доступном пространстве.
Это свойство полезно, когда вы работаете с ограниченными размерами контейнеров, и хотите указать, как следует обрабатывать избыточный текст.
👍14👨💻2