Что позволяет выполнить css для html
Перейти к содержимому

Что позволяет выполнить css для html

  • автор:

Как таблицы стилей помогают создавать сайты

Как таблицы стилей помогают создавать сайты

CSS (Cascading Style Sheets) — это язык, который описывает, как HTML-документы отображаются на экране пользователя. Первым коммерческим браузером, который читал и использовал CSS, стал Internet Explorer 3 в 1996 году. CSS применяют разработчики, чтобы настроить индивидуальный стиль страницы.

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

Зачем нужен CSS

HTML помогает сформировать структуру веб-документов — текст, таблицы, гиперссылки. CSS — создает разметку, оформление и стиль.

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

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

Чтобы подключить CSS к HTML, используют три способа:

  • CSS-код вносят в тег элемента с помощью атрибута style. Он применяется к любым тегам.
  • Стили веб-документа прописывают внутри контейнера head. Он предназначен для хранения элементов страницы. Например, атрибутов base и title, которые отвечают за задание характеристик текста по умолчанию (цвет, шрифт) и заголовок документа. Интеграция CSS также происходит с помощью атрибута style. При таком подключении CSS будет выполнять изменения только на этой странице.
  • CSS-код сохраняется в отдельном текстовом файле с расширением .css. Он подключается к HTML с помощью тега link и свойства href, чтобы установить расположение файла. Это самый распространенный способ. Если файл подключен к нескольким страницам сайта, то вносить в них правки можно одновременно.

Аналитика данных в Excel

Product Analyst в финтех-компании Wise

Python для разработки и анализа данных

Team Lead в TakeOff Technologies Inc

Основные принципы работы CSS

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

  • Селекторы — метки, которые обозначают, какую часть HTML-кода изменяют.
  • Блоки объявлений — свойства, которые определяют, как будет выглядеть элемент на экране.

К селекторам можно применять неограниченное число блоков объявлений. Например, абзац в CSS обозначается тегом p. Чтобы задать абзацу серый фон, используем свойство background и его значение #ccc (отвечает за этот цвет). Здесь тег абзаца будет селектором, а свойство и его значение — блоком объявлений.

Чтобы работать с CSS, нужно знать свойства языка. Например, чтобы изменить цвет текста, используют свойство color, а размер шрифта определяет свойство font-size.

Типы селекторов

В CSS — несколько десятков типов селекторов.

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

Можно создать универсальный селектор, который совершает действие над всеми объектами сайта. Например, изменить начертание текста для всей страницы.

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

Селекторы-идентификаторы (ID) позволяют менять параметры одного указанного элемента. Идентификатор (ID) — это название элемента сайта, которое не должно повторяться на странице. Например, его можно присвоить тегу footer, который отвечает за «подвал» сайта.

Правила каскадирования и наследования

В CSS не нужно задавать параметры для всех элементов — есть правила наследования. Некоторые свойства элементы получают от элементов-предков. Свойства, определяющие внешний вид текста (color, font), наследуются. Свойства, которые форматируют блоки (border, background), — нет.

Единого правила наследования не существует. Его применяют, опираясь на логику построения сайта. Например, на сайте вряд ли нужно выделять все элементы рамками. За это отвечает свойство border, поэтому оно не наследуется.

Если нужно применить свойство, которое не наследуется автоматически, его можно прописать с помощью команды inherit для отдельного элемента. Посмотреть, какие свойства обычно наследуют, а какие — нет, можно на сайте Консорциума Всемирной паутины (W3).

Правило каскадирования в CSS срабатывает, если к одному элементу применили несколько CSS-команд. Приоритетным будет выполнение тех правил, к которым применена команда !important. Это объявление рекомендуют использовать, только если конфликт стилей нельзя разрешить другими способами, например, повышением специфичности селектора.

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

  • Встроенный стиль — CSS подключен с помощью элемента style;
  • Селектор идентификаторов;
  • Селектор классов;
  • Селектор обычного элемента (селектор тега).

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

Что такое CSS

CSS (Cascading Style Sheets) в переводе с английского означает «каскадные таблицы стилей». CSS используется для описания оформления внешнего вида документа, созданного с помощью языка разметки (HTML, XML, XHTML).

CSS - каскадная таблица стилей

Если сравнивать функциональную составляющую HTML и CSS то HTML задает структуру контента веб-странице, а CSS позволяет сделать ее визуально более интересной для читателя. Подключить стили к HTML-документу можно двумя способами:

  1. вставить стили непосредственно в документ в тегах
  2. подключить CSS во внешнем файле

Рассмотрим на примере:

Код HTML+CSS

— подключение внешнего файла «style.css» со стилями

Вот содержимое данного файла:

Пример кода в файле стилей CSS

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

Купить хостинг можно на нашем сайте.

МИР Visa MasterCard СБП QIWI Wallet Безналичный платеж

Все способы

© 2009–2024 «HANDYHOST.RU» 8-800-505-68-01

  • Услуги
  • Хостинг сайтов
  • Домены
  • Конструктор сайтов
  • Linux VPS / Windows VPS
  • Выделенные серверы
  • SSL сертификаты
  • Клиентам
  • Контакты
  • О компании
  • Акции
  • Оборудование
  • Партнерская программа
  • Поддержка
  • Способы оплаты
  • Регламент
  • Документы
  • Справка

Какие CSS-свойства нам принёс 2022

Список всех CSS-свойств, типов, директив, которые были добавлены в браузеры в 2022.

Выражения от контейнера

Входим в новую эпоху управления интерфейсом

@container : применяет условие к контейнеру, которое должно быть выполнено, чтобы свойство применилось к элементу

@container (width > 400px) < h2 < font-size: 1.5em; >>

container-name : позволяет задать имя контейнеру, чтобы можно было обращаться к нему внутри @container

container-type : позволяет задать тип контейнеру, чтобы можно было обращаться к нему внутри @container

container : позволяет задать имя и тип контейнеру, чтобы можно было обращаться к нему внутри @container

.container

Временные шкалы прокрутки

Позволяют создавать анимации, которые зависят от прокрутки страницы:

  • scroll-timeline-axis позволяет задать направление прокрутки.
  • scroll-timeline-name позволяет задать имя временной шкале прокрутки.
  • scroll-timeline позволяет задать имя и направление временной шкале прокрутки.
.element

Цветные шрифты

@font-palette-values позволяет задать палитру цветов для цветных шрифтов:

@font-palette-values --identifier < font-family: Bixa; >.my-class

font-palette позволяет задать палитру цветов для цветных шрифтов:

font-palette: normal || light || dark;

Псевдоклассы состояний ресурсов

Псевдоклассы, которые позволяют узнать состояние ресурсов:

  • buffering : который в данный момент буферизируется.
  • muted : который в данный момент звук отключен.
  • paused : который в данный момент на паузе.
  • playing : который в данный момент воспроизводится.
  • seeking : который в данный момент перематывается.
  • stalled : который в данный момент остановлен.
  • volume-locked : который в данный момент заблокирован для изменения громкости.
video:playing < background-color: green; >video:paused < background-color: red; >video:seeking < background-color: yellow; >video:stalled < background-color: orange; >video:buffering < background-color: blue; >video:muted < background-color: gray; >video:volume-locked

Типы математических выражений

Типы математических выражений, которые можно использовать в CSS:

  • abs : модуль числа
  • acos : арккосинус
  • asin : арксинус
  • atan : арктангенс
  • atan : арктангенс
  • calc-constant : константа
  • cos : косинус
  • exp : экспонента
  • hypot : гипотенуза
  • sqrt : квадратный корень
  • log : логарифм
  • mod : остаток от деления
  • pow : возведение в степень
  • rem : остаток от деления
  • round : округление
  • sign : знак числа
  • sin : синус
  • tan : тангенс
.element < width: abs(20% - 100px); transform: rotate(acos(-0.2)); width: calc(100px * cos(45deg)); width: calc(100px * exp(-1)); /* 100px * 0.367879441171442 = 36px */ width: calc(100px * log(7.389)); /* 200px */ width: round(var(--width), 50px); width: hypot(2em); top: sign(--value); width: calc(100px * sqrt(9)); /* 300px */ width: calc(100px * tan(pi / 3)); >

Ключевые кадры

  • animation-composition : позволяет задать режим смешивания для анимации
  • animation-timeline : позволяет задать временную шкалу для анимации
.element

Управление синтезированным шрифтом

font-synthesis-small-caps позволяет задать синтезирование маленьких прописных букв.

font-synthesis-style позволяет задать синтезирование начертания шрифта.

font-synthesis-weight позволяет задать синтезирование жирности шрифта.

font-synthesis позволяет задать, какие свойства шрифта должны быть синтезированы, если они не определены в шрифте.

.element

Самодостаточные

modal : позволяет задать, что элемент является модальным:

.element

has() позволяет задать, что элемент содержит другой элемент:

.element < has(.child) < color: red; >>

@layer позволяет задать слой для стилей:

@layer base < .element < color: red; >>

object-view-box позволяет задать область просмотра для объекта:

.element

То ли ещё будет в 2023 ��

Больше статей

  • Зачем нужно свойство display в CSS
  • Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration
  • Когда в вёрстке нужна высота. CSS-свойство height

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

  • 13 ноября 2023

Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

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

  • 1 ноября 2023

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

  • 7 сентября 2023

Как сделать тёмную тему на сайте

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

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

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

  • 29 августа 2023

4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 

Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

  • 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

  • 28 июля 2023

CSS-свойство contain

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container
  • 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element
  • 13 июля 2023

CSS свойства

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

Шрифт

@font-face Позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя
font Универсальное свойство, позволяющее определить все свойства шрифта за одну декларацию
font-family Задает семейство шрифта, которое будет использоваться для оформления текста содержимого
font-size Определяет размер шрифта.
font-size-adjust Позволяет контролировать размер шрифта, когда первый выбранный шрифт не доступен
font-stretch Устанавливает более широкое или узкое начертание шрифта
font-style Устанавливает стиль начертания шрифта — обычное, курсивное или наклонное
font-variant Определяет, как следует представлять строчные буквы — делать их все прописными уменьшенного размера или оставить без изменений
font-weight Устанавливает насыщенность или «жирность» начертания шрифта

Анимация

@keyframes Устанавливает ключевые кадры при анимации элемента
animation Позволяет установить все значения свойств анимации в одном объявлении
animation-delay Устанавливает время ожидания перед запуском анимации
animation-direction Устанавливает направление движения анимации
animation-duration Устанавливает время в секундах или миллисекундах, сколько должен длиться один цикл анимации
animation-fill-mode Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается
animation-iteration-count Устанавливает, сколько раз проигрывать цикл анимации
animation-name Определяет список имен анимаций, которые должны быть применены к выбранному элементу
animation-play-state Определяет, проигрывать анимацию или поставить её на паузу
animation-timing-function Определяет кривую скорости для анимации

Гибкая компоновка элементов

align-content Выравнивает строки флекс-элементов по вертикали внутри флекс-контейнера
align-items Выравнивает флекс-элементы внутри контейнера по высоте
align-self Устанавливает выравнивание по высоте отдельно взятого флекс-элемента
flex Универсальное свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство
flex-basis Устанавливает базовую ширину флекс-элемента
flex-direction Определяет направление главной оси во флекс-контейнере
flex-flow Позволяет за одну декларацию задать направление главной оси и возможность переноса флекс-элементов на новую строку
flex-grow Определяет коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов
flex-shrink Определяет коэффициент уменьшения ширины флекс-элемента относительно других флекс-элементов
flex-wrap Устанавливает, следует ли флекс-элементам располагаться в одну строку или можно занять несколько строк
justify-content Выравнивает флекс-элементы по ширине флекс-контейнера
order Определяет порядок вывода флекс-элементов внутри флекс-контейнера

Трансформация

backface-visibility Определяет, показывать обратную сторону элемента или нет
perspective Определяет, на сколько пикселей удален 3D элемент от точки обзора
perspective-origin Определяет, где располагается 3D элемент на осях x и y
transform Применяет к элементу 2D или 3D трансформацию
transform-origin Устанавливает исходную точку трансформации элемента
transform-style Определяет, как дочерние элементы будут отображаться в 3D-пространстве
transition Позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства
transition-delay Устанавливает продолжительность задержки перед началом анимации перехода
transition-duration Устанавливает продолжительность анимации перехода
transition-property Определяет CSS свойство, для которого будет применён эффект перехода
transition-timing-function Определяет кривую скорости для анимации перехода

Цвет и фон

background Короткое свойство, устанавливающее все свойства фона элемента за одну декларацию
background-attachment Определяет, будет ли фоновое изображение зафиксировано, или оно будет прокручиваться вместе с остальным содержимым страницы
background-blend-mode Устанавливает режим наложения фонового изображения элемента на фоны других элементов.
background-clip Устанавливает область прорисовки фонового изображения
background-color Определяет фоновый цвет элемента
background-image Определяет фоновое изображение элемента
background-origin Устанавливает область позиционирования фонового изображения
background-position Задает начальное положение фонового изображения в пределах содержащего его элемента
background-repeat Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image
background-size Устанавливает размер фонового изображения
color Это свойство определяет цвет текста элемента

Рамка и контур

border Это свойство позволяет определить все атрибуты рамки HTML элемента за одну декларацию
border-bottom Это свойство позволяет определить все атрибуты нижней рамки HTML элемента за одну декларацию
border-bottom-color Это свойство определяет цвет нижней стороны рамки HTML элемента
border-bottom-left-radius Устанавливает радиус скругления левого нижнего уголка рамки
border-bottom-right-radius Устанавливает радиус скругления правого нижнего уголка рамки
border-bottom-style Это свойство определяет стиль нижней стороны рамки HTML элемента
border-bottom-width Это свойство определяет толщину нижней стороны рамки HTML элемента
border-color Это свойство определяет цвет всех четырех сторон рамки HTML элемента
border-image Позволяет устанавливать изображение вместо обычной рамки вокруг элемента
border-image-outset Устанавливает отступ рамки-изображения за пределы границ элемента
border-image-repeat Устанавливает способ заполнения фоновым изображением пространства между углами рамки
border-image-slice Определяет размер частей изображения, используемых для оформления границ элемента
border-image-source Задаёт путь к изображению, которое будет использоваться в качестве рамки элемента
border-image-width Задаёт ширину изображения для рамки элемента
border-left Это свойство позволяет определить все атрибуты левой рамки HTML элемента за одну декларацию
border-left-color Это свойство определяет цвет левой стороны рамки HTML элемента
border-left-style Это свойство определяет стиль левой стороны рамки HTML элемента
border-left-width Это свойство определяет толщину левой стороны рамки HTML элемента
border-radius Устанавливает радиус скругления уголков рамки
border-right Это свойство позволяет определить все атрибуты правой рамки HTML элемента за одну декларацию
border-right-color Это свойство определяет цвет правой стороны рамки HTML элемента
border-right-style Это свойство определяет стиль правой стороны рамки HTML элемента
border-right-width Это свойство определяет толщину правой стороны рамки HTML элемента
border-style Это свойство определяет стиль всей рамки вокруг элемента
border-top Это свойство позволяет определить все атрибуты верхней рамки HTML элемента за одну декларацию
border-top-color Это свойство определяет цвет верхней стороны рамки HTML элемента
border-top-left-radius Устанавливает радиус скругления левого верхнего уголка рамки
border-top-right-radius Устанавливает радиус скругления правого верхнего уголка рамки
border-top-style Это свойство определяет стиль верхней стороны рамки HTML элемента
border-top-width Это свойство определяет толщину верхней стороны рамки HTML элемента
border-width Это свойство определяет толщину всех четырех сторон рамки HTML элемента
outline Универсальное свойство, которое устанавливает атрибуты контура элемента
outline-color Определяет цвет контура
outline-offset Задает величину отступа контура от элемента
outline-style Определяет стиль контура
outline-width Определяет толщину контура

Свойства таблиц

border-collapse Это свойство определяет, какую модель рамки вокруг ячеек таблицы следует использовать
border-spacing Это свойство определяет расстояние между рамками соседних ячеек таблицы
caption-side Это сойство определяет, где будет отображаться заголовок таблицы
empty-cells Это свойство задает отображение границ и фона в ячейке таблицы, если она пустая
table-layout Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом

Позиционирование и отображение

bottom Это свойство определяет расстояние от нижнего края HTML элемента до нижнего края его родительского элемента
clear Это свойство определяет, с какой стороны элемента запрещено его обтекание другими элементами
clip Это свойство определяет область позиционированного элемента, в которой будет показано его содержимое
display Определяет, как элемент должен быть показан в документе
float Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с другой стороны
left Это свойство определяет расстояние от левого края HTML элемента до левого края его родительского элемента, т.е. расстояние его смещения вправо
overflow Определяет, каким образом будет отображаться содержимое элемента, если оно не помещается в область вывода данного элемента
overflow-wrap Определяет, должен ли браузер переносить длинные слова на новую строку при переполнении контейнерного элемента
overflow-x Определяет, как будет отображаться содержимое элемента, если оно не помещается слева/справа в область вывода данного элемента
overflow-y Определяет, как будет отображаться содержимое элемента, если оно не помещается вверху/внизу в область вывода данного элемента
position Устанавливает способ позиционирования элемента
right Это свойство определяет расстояние от правого края HTML элемента до правого края его родительского элемента
top Это свойство определяет расстояние от верхнего края HTML элемента до верхнего края его родительского элемента
visibility Определяет видимость элемента
z-index Определяет порядок позиционированных элементов по z-оси

Тени и прозрачность

box-shadow Добавляет тень к элементу
opacity Определяет уровень прозрачности элемента
text-shadow Добавляет тень к тексту

Размеры

box-sizing Устанавливает алгоритм вычисления ширины и высоты элемента
height Устанавливает высоту блочных или заменяемых элементов
max-height Устанавливает максимальную высоту элемента.
max-width Устанавливает максимальную ширину элемента
min-height Устанавливает минимальную высоту элемента
min-width Устанавливает минимальную ширину элемента
resize Определяет, может ли пользователь изменять размер элемента
width Устанавливает ширину блочных или заменяемых элементов

Другое

column-count Определяет количество колонок в многоколоночном тексте
column-fill Определяет, как контент должен распределяться внутри колонок.
column-gap Определяет расстояние между колонками в многоколоночном тексте
column-rule Определяет параметры разделительной линии между колонок многоколоночного текста
column-rule-color Устанавливает цвет разделительных линий между колонок в многоколоночном тексте
column-rule-style Определяет стиль разделительных линий между колонок в многоколоночном тексте
column-rule-width Определяет толщину разделительных линий между колонок многоколоночного текста
column-span Определяет, должен ли элемент в многоколоночном тексте занимать ширину всех колонок или только одну из них
column-width Определяет оптимальную ширину колонки в многоколоночном тексте
columns Позволяет одновременно задать ширину и количество колонок многоколоночного текста
cursor Определяет вид курсора при наведении мышки на элемент
filter Позволяет применить художественные эффекты к элементам

Генерируемый контент

content Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует
counter-increment Это свойство позволяет увеличить значение счетчика приращений, который задается свойством counter-reset
counter-reset Это свойство определяет идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также его начальное значение
quotes Устанавливает тип кавычек, который применяется в тексте документа

Режимы написания

direction Это свойство определяет направление текста
unicode-bidi Это свойство вместе со свойством direction определяет, как должен располагаться текст используемого языка

Свойства текста

hanging-punctuation Устанавливает, может ли знак пунктуации располагаться вне контейнера с текстом вначале или в конце строки текста
hyphens Сообщает браузеру, как расставлять переносы слов в блоке текста
letter-spacing Устанавливает расстояние между символами в пределах элемента
line-height Устанавливает межстрочный интервал текста
tab-size Устанавливает размер отсупа, заданного при помощи символа табуляции
text-align Устанавливает горизонтальное выравнивание текста элемента
text-align-last Устанавливает выравнивание последней строки текста
text-decoration Добавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом
text-decoration-color Устанавливает цвет линии, которая добавляется через свойство text-decoration
text-decoration-line Устанавливает тип оформления текста — подчеркивание, перечеркивание, линия над текстом
text-decoration-style Устанавливает стиль декоративной линии оформления текста
text-indent Устанавливает величину отступа первой строки текстового блока
text-justify Определяет метод выравнивания текста по ширине
text-overflow Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область
text-transform Управляет преобразованием текста элемента в заглавные или прописные символы
vertical-align Выравнивает элемент по вертикали относительно своего родителя или окружающего текста
white-space Устанавливает, как отображать пробелы между словами в пределах элемента
word-break Определяет, как делать перенос на новую строку внутри слов
word-spacing Устанавливает расстояние между словами в пределах элемента
word-wrap Устанавливает, можно или нельзя переносить на новую строку длинные слова

Свойства списков

list-style Определяет стиль маркера списка, его положение и его изображение
list-style-image Устанавливает изображение, которое будет использоваться в качестве маркера элементов списка
list-style-position Определяет, как будет размещаться маркер относительно текста
list-style-type Устанавливает вид маркера элементов списка

Внешние и внутренние отступы

margin Универсальное свойство, которое позволяет устанавливать размер всех отступов элемента за одну декларацию
margin-bottom Это свойство устанавливает размер нижнего отступа элемента
margin-left Это свойство устанавливает размер левого отступа элемента
margin-right Это свойство устанавливает размер правого отступа элемента
margin-top Это свойство устанавливает размер верхнего отступа элемента
padding Универсальное свойство, которое позволяет устанавливать размер всех полей элемента за одну декларацию
padding-bottom Это свойство устанавливает размер нижнего поля элемента
padding-left Это свойство устанавливает размер левого поля элемента
padding-right Это свойство устанавливает размер правого поля элемента
padding-top Это свойство устанавливает размер верхнего поля элемента

Вывод на печать

orphans Определяет минимальное число строк текста, которое остается на предыдущей странице при печати документа
page-break-after Добавляет разрыв страницы при печати документа после заданного элемента
page-break-before Добавляет разрыв страницы при печати документа перед заданным элементом
page-break-inside Разрешает или запрещает разрыв страницы внутри заданного элемента при печати документа
widows Определяет минимальное число строк текста, которое располагается на следующей странице при печати документа

Добавить комментарий

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