Css коды для сайта: Разбираем CSS-код — Как создать сайт

Содержание

Разбираем CSS-код — Как создать сайт

Урок №2
Разбираем CSS код

В прошлом уроке, мы внедрили следующий CSS-код в HTML-документ:

h2 {
 color: white;
 background-color: green;
}
p {
 color: orange;
 font-size: 20px;
}

Открыв в браузере файл index.html вы должны увидеть следующее.

В этом уроке мы разберем CSS-код и выясним из каких основных частей он состоит.

CSS-код обычно располагают в шапке HTML-документа и обрамляют тегами <style> </style>. Сам CSS-код начинается с имени тега, а затем идут фигурные скобки { }, внутри которых располагаются CSS-свойства, именно они и влияют на внешний вид HTML-тегов.

Схема CSS-кода выглядит следующим образом:

имяТега { 
 CSS-свойство: значение; 
}

После CSS-свойства, нужно обязательно ставить двоеточие

:, а после значения точку с запятой ;

Для заголовка h2 мы применили следующие CSS-свойства и значения:
color: white; — цвет шрифта — белый,
background-color: green; — цвет фона — зелёный.

Для абзацев p мы применили следующие CSS-свойства и значения:
color: orange; — цвет шрифта — оранжевый,
font-size: 20px; — размер шрифта — 20 пикселей.

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

Давайте добавим еще несколько CSS-свойств, заголовку и абзацам нашего HTML-документа.

К заголовку мы добавим четыре CSS-свойства:
width: 50%; — ширина заголовка должна занимать 50% окна браузера,

text-align: center; — заголовок должен выравниваться по центру,
padding: 5px; — между шрифтом и границей фона, должен появиться зазор в 5 пикселей,
font-family: Impact; — имя шрифта устанавливаем как Impact.

К абзацам мы добавим три CSS-свойства:
background-color: #ffc; — цвет фона абзацев быть светло-жёлтым,
width: 50%; — ширина абзацев должна занимать 50% окна браузера,
padding: 10px; — между шрифтом и границей фона, должен появиться зазор в 10 пикселей,
font-family: Arial; — имя шрифта устанавливаем как Arial.

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

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   h2 {
    color: white;
    background-color: green;
    width: 50%;
    text-align: center;
    padding: 5px;
    font-family: Impact;
   }
   p {
    color: orange; 
    font-size: 20px;
    background-color: #ffc;
    width: 50%;
    padding: 10px;
    font-family: Arial;
   }
  </style>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана.
Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.</p> <p> Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.</p> </body> </html>

Открыв в браузере, файл index.html вы должны увидеть следующее.

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

Читать далее: Основные CSS-свойства

  • Category: Разное

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014

Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

CSS Справочник и примеры элементы

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Главная Дальше ❯


A

align-contentЗадает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
align-itemsЗадает выравнивание для элементов внутри гибкого контейнера
align-selfЗадает выравнивание для выбранных элементов внутри гибкого контейнера
allСбрасывает все свойства (за исключением Unicode-двунаправленного письма и направления)
animationСокращенное свойство для всех свойств анимации
animation-delayУказывает задержку начала анимации
animation-directionУказывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах
animation-durationУказывает, как долго должна проходить анимация для завершения одного цикла
animation-fill-modeЗадает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое)
animation-iteration-countУказывает, сколько раз должна воспроизводиться анимация
animation-nameЗадает имя для анимации @keyframes
animation-play-stateУказывает, запущена ли анимация или приостановлена
animation-timing-functionЗадает кривую скорости анимации

B

backface-visibilityОпределяет, должна ли быть видна задняя грань элемента при обращении к пользователю
backgroundСокращенное свойство для задания всех свойств фона в одном объявлении
background-attachmentОпределяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано
background-blend-modeЗадает режим наложения для каждого слоя фона (цвет/изображение)
background-clipОпределяет, насколько фон (цвет или изображение) должен расширяться в элементе
background-colorЗадает цвет фона элемента
background-imageЗадание одного или нескольких фоновых изображений для элемента
background-originЗадает исходную позицию фонового изображения
background-positionОпределяет положение фонового изображения
background-repeat Устанавливает, если/как фоновое изображение будет повторяться
background-sizeОпределяет размер фоновых изображений
borderСокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottomСокращенное свойство для задания всех свойств нижней границы в одном объявлении
border-bottom-colorЗадает цвет нижней границы
border-bottom-left-radiusОпределяет радиус границы нижнего левого угла
border-bottom-right-radiusОпределяет радиус границы нижнего правого угла
border-bottom-styleЗадает стиль нижней границы
border-bottom-widthЗадает ширину нижней границы
border-collapseУстанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены
border-colorЗадает цвет четырех границ
border-imageСокращенное свойство для установки всех свойств Border-Image-*
border-image-outsetОпределяет величину, на которую область изображения границы выходит за границы рамки
border-image-repeatУказывает, должно ли изображение границы повторяться, округляться или растягиваться
border-image-sliceОпределяет способ среза изображения границы
border-image-sourceУказывает путь к изображению, которое будет использоваться в качестве границы
border-image-widthЗадает ширину изображения границы
border-leftСокращенное свойство для задания всех свойств левой границы в одном объявлении
border-left-colorЗадает цвет левой границы
border-left-styleЗадает стиль левой границы
border-left-widthЗадает ширину левой границы
border-radiusСокращенное свойство для установки всех четырех границ-*-свойства RADIUS
border-rightСокращенное свойство для задания всех свойств правой границы в одном объявлении
border-right-colorЗадает цвет правой границы
border-right-styleЗадает стиль правой границы
border-right-widthЗадает ширину правой границы
border-spacingУстанавливает расстояние между границами соседних ячеек
border-styleЗадает стиль четырех границ
border-topСокращенное свойство для задания всех свойств верхнего края в одном объявлении
border-top-colorЗадает цвет верхней границы
border-top-left-radiusОпределяет радиус границы верхнего левого угла
border-top-right-radiusОпределяет радиус границы верхнего правого угла
border-top-styleЗадает стиль верхней границы
border-top-widthЗадает ширину верхней границы
border-widthЗадает ширину четырех границ
bottomУстанавливает положение элементов в нижней части родительского элемента
box-decoration-breakЗадает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки.
box-shadowПрикрепление одной или нескольких теней к элементу
box-sizingОпределяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет
break-afterЗадает поведение разрыва страницы, столбца или региона после созданного поля
break-beforeЗадает поведение разрыва страницы, столбца или региона перед созданным полем
break-insideОпределяет поведение разрыва страницы, столбца или региона в созданном поле

C

caption-sideЗадает размещение заголовка таблицы
caret-colorОпределяет цвет курсора (стрелка) в входах, текстового ввода или любого элемента, редактируемого
@charsetЗадает кодировку символов, используемую в таблице стилей
clearУказывает, на каких сторонах элемента плавающие элементы не могут плавать
clipЗажимы абсолютно позиционированного элемента
colorЗадает цвет текста
column-countУказывает количество столбцов, элемент должен быть разделен на
column-fillУказывает, как заполнять столбцы, сбалансированные или нет
column-gapУказывает зазор между столбцами
column-ruleСокращенное свойство для установки всех свойств столбца-Rule-*
column-rule-colorЗадает цвет правила между столбцами
column-rule-styleЗадает стиль правила между столбцами
column-rule-widthЗадает ширину правила между столбцами
column-spanУказывает, сколько столбцов элемент должен охватывать поперек
column-widthЗадает ширину столбца
columnsСокращенное свойство для задания ширины столбца и счетчика столбцов
contentИспользуется с: before и: After псевдо-элементы, чтобы вставить сгенерированное содержимое
counter-incrementУвеличивает или уменьшает значение одного или нескольких счетчиков CSS
counter-resetСоздает или сбрасывает один или несколько счетчиков CSS
cursorУказывает курсор мыши, отображаемый при наведении на элемент

D

directionЗадает направление текста/направление письма
displayУказывает, как должен отображаться определенный элемент HTML

E

empty-cellsУказывает, отображать ли границы и фон на пустых ячейках таблицы

F

filterОпределяет эффекты (например, размытие или сдвиг цвета) на элементе перед отображением элемента
flexСокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства
flex-basisЗадает начальную длину гибкого элемента
flex-directionУказывает направление гибких элементов
flex-flowСокращенное свойство для свойств Flex-Direction и Flex-Wrap
flex-growУказывает, сколько будет расти номенклатура относительно остальных
flex-shrinkУказывает, как элемент будет сжиматься относительно остальных
flex-wrapУказывает, следует ли обернуть гибкие элементы
floatУказывает, должно ли поле плавать
fontЗадает все свойства шрифта в одном объявлении
@font-faceПравило, позволяющее веб-сайтам загружать и использовать шрифты, не являющиеся «web-safe» шрифтами
font-familyЗадает семейство шрифтов для текста
font-feature-settingsПозволяет контролировать расширенные типографские функции шрифтов OpenType
@font-feature-valuesПозволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType
font-kerningУправляет использованием информации о кернинге (как буквы расположены в пространстве)
font-language-overrideУправляет использованием глифов, специфичных для языка, в шрифте
font-sizeЗадает размер шрифта текста
font-size-adjustСохраняет читаемость текста, когда происходит откат шрифта
font-stretchВыбор нормальной, сжатой или расширенной грани из семейства шрифтов
font-styleЗадает стиль шрифта для текста
font-synthesisЭлементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем
font-variantУказывает, должен ли текст отображаться в шрифте с малыми прописными буквами
font-variant-alternatesУправляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения
font-variant-capsУправление использованием альтернативных глифов для заглавных букв
font-variant-east-asianУправляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского)
font-variant-ligaturesОпределяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится
font-variant-numericУправляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-positionУправляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта
font-weightОпределяет вес шрифта

G

gridСокращенное свойство
grid-areaЛибо задает имя элемента сетки, либо это свойство является сокращенным свойством для свойств сетка- начало строки, Сетка-столбец-начало, Сетка-конец строкии Сетка-конец столбца
grid-auto-columnsЗадает размер столбца по умолчанию
grid-auto-flowУказывает, как автоматически размещаемые элементы вставляются в сетку
grid-auto-rowsЗадает размер строки по умолчанию
grid-columnСокращенное свойство для свойств Сетка-столбец-начало и Сетка-конец столбца
grid-column-endУказывает, где закончить элемент сетки
grid-column-gapОпределяет размер зазора между столбцами
grid-column-startУказывает, где начать элемент сетки
grid-gapСокращенное свойство для свойств Сетка-строка-зазор и Сетка-столбец-зазор
grid-rowСокращенное свойство для свойств Сетка-строка-начало и Сетка-конец строки
grid-row-endУказывает, где закончить элемент сетки
grid-row-gapОпределяет размер зазора между строками
grid-row-startУказывает, где начать элемент сетки
grid-templateСокращенное свойство для свойств Сетка-шаблон-строки, сетка -шаблон-столбцы и области сетки
grid-template-areasУказывает, как отображать столбцы и строки с использованием именованных элементов сетки
grid-template-columnsОпределяет размер столбцов и количество столбцов в макете сетки
grid-template-rowsОпределяет размер строк в макете сетки

H

hanging-punctuationУказывает, может ли знак пунктуации размещаться вне поля строки
heightЗадает высоту элемента
hyphensЗадание разбиения слов для улучшения макета абзацев

I

image-renderingДает подсказку браузеру о том, какие аспекты изображения наиболее важны для сохранения при масштабировании изображения
@importПозволяет импортировать таблицу стилей в другую таблицу стилей
isolationОпределяет, должен ли элемент создавать новое содержимое стека

J

justify-contentЗадает выравнивание между элементами внутри гибкого контейнера, если элементы не используют все доступное пространство

K

@keyframesУказывает код анимации

L

leftЗадает левое положение позиционного элемента
letter-spacingУвеличивает или уменьшает расстояние между символами в тексте
line-breakУказывает, как/если разбить линии
line-heightУстановка высоты линии
list-styleЗадает все свойства для списка в одном объявлении
list-style-imageЗадает изображение в качестве маркера элемента списка
list-style-positionОпределяет положение маркеров элементов списка (маркеров)
list-style-typeУказывает тип маркера элемента списка

M

marginУстанавливает все свойства полей в одном объявлении
margin-bottomУстанавливает нижнее поле элемента
margin-leftЗадает левое поле элемента
margin-rightЗадает правое поле элемента
margin-topЗадание верхнего поля элемента
max-heightЗадает максимальную высоту элемента
max-widthЗадает максимальную ширину элемента
@mediaУстанавливает правила стиля для различных типов носителей/устройств/размеров
min-heightЗадает минимальную высоту элемента
min-widthЗадает минимальную ширину элемента

O

object-fitУказывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной
object-positionЗадает выравнивание заменяемого элемента внутри его поля
opacityЗадает уровень непрозрачности для элемента
orderЗадает порядок гибкого элемента по отношению к остальным
orphansЗадает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента
outlineЗадает все свойства структуры в одном объявлении
outline-colorЗадает цвет контура
outline-offsetСмещение контура и его выводит за пределы края границы
outline-styleЗадает стиль контура
outline-widthЗадает ширину контура
overflow
Указывает, что происходит, если содержимое переполнено полем элемента
overflow-wrapУказывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле)
overflow-xУказывает, следует ли обрезать левый/правый край содержимого, если оно переполнено областью содержимого элемента
overflow-yУказывает, следует ли обрезать верхний/нижний край содержимого, если оно переполнено областью содержимого элемента

P

paddingЗадает все свойства заполнения в одном объявлении
padding-bottomУстанавливает нижнее заполнение элемента
padding-leftЗадает левое заполнение элемента
padding-rightЗадает правое заполнение элемента
padding-topЗадает верхнее заполнение элемента
page-break-afterЗадает поведение разбиения страницы после элемента
page-break-beforeЗадает поведение разбиения страницы перед элементом
page-break-insideЗадает поведение разбиения страниц внутри элемента
perspectiveПридает элементу с трехмерной позицией некоторую перспективу
perspective-originОпределяет, в какой позиции пользователь смотрит на 3D-позиционный элемент
pointer-eventsОпределяет, реагирует ли элемент на события указателя
positionУказывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)

Q

quotesЗадает тип кавычек для внедренных предложений

R

resizeОпределяет, является ли (и как) элемент изменяемым по размерам пользователем
rightЗадает правильное положение позиционного элемента

T

tab-sizeЗадает ширину символа табуляции
table-layoutОпределяет алгоритм, используемый для компоновки ячеек таблицы, строк и столбцов
text-alignЗадает выравнивание текста по горизонтали
text-align-lastОписывает, как последняя строка блока или строки перед принудительным разрывом строки выравнивается при выравнивании текста «justify»
text-combine-uprightЗадает комбинацию нескольких символов в пространстве одного символа
text-decorationУказывает украшение, добавляемое в текст
text-decoration-colorОпределяет цвет текста-украшение
text-decoration-lineУказывает тип линии в тексте-украшение
text-decoration-styleЗадает стиль линии в оформлении текста
text-indentЗадает отступ первой строки в текстовом блоке
text-justifyЗадает метод выравнивания, используемый при выравнивании текста «justify»
text-orientationОпределяет ориентацию текста в строке
text-overflowУказывает, что должно происходить при переполнении содержащегося в тексте элемента
text-shadowДобавление тени к тексту
text-transformУправляет капитализацией текста
text-underline-positionОпределяет положение подчеркивания, которое задается с помощью свойства Text-декорирование
topОпределяет верхнюю позицию позиционного элемента
transformПрименяет 2D или 3D преобразование к элементу
transform-originПозволяет изменить положение на преобразованных элементах
transform-styleОпределяет способ визуализации вложенных элементов в трехмерном пространстве
transitionСокращенное свойство для задания четырех свойств перехода
transition-delayУказывает, когда начнется эффект перехода
transition-durationУказывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода
transition-propertyЗадает имя свойства CSS, для которого используется эффект перехода
transition-timing-functionОпределяет кривую скорости эффекта перехода

U

unicode-bidiИспользуется вместе со свойством direction для установки или возврата текста, который должен быть переопределен для поддержки нескольких языков в одном документе
user-selectУказывает, можно ли выбрать текст элемента

V

vertical-alignЗадание вертикального выравнивания элемента
visibilityУказывает, является ли элемент видимым

W

white-spaceУказывает, как обрабатываются пробелы внутри элемента
widowsЗадает минимальное число строк, которые должны быть оставлены в верхней части страницы при возникновении разрыва страницы внутри элемента
widthЗадает ширину элемента
word-breakУказывает, как слова должны прерываться при достижении конца строки
word-spacingУвеличивает или уменьшает расстояние между словами в тексте
word-wrapПозволяет длинные, неразрывные слова, которые будут сломаны и обернуть к следующей строке
writing-mode

Z

z-indexЗадает порядок стека позиционного элемента

❮ Главная Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы



Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Примеры CSS

❮ Предыдущий Далее ❯


Синтаксис CSS

Синтаксис CSS

Объяснение синтаксиса CSS


Селекторы CSS

Селектор элементов Селектор идентификатора Селектор класса (для всех элементов) Селектор класса (только для элементов

) Элемент HTML, который ссылается на два класса Универсальный селектор Групповые селекторы

Объяснение селекторов CSS


CSS Как и где

Внешний CSS Внутренний CSS Встроенный CSS Несколько таблиц стилей Каскадный порядок

Как объяснить CSS


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

Однострочный комментарий Многострочный комментарий

Объяснение комментариев CSS


Цвета CSS

Установка цвета фона элемента Установить цвет текста Установите цвет границы Установите разные значения цвета Установите значения RGB Установить шестнадцатеричные значения Установить значения HSL

Объяснение цветов CSS


Фоны CSS

Установить цвет фона страницы Установите цвет фона различных элементов Установить изображение в качестве фона страницы Как повторить фоновое изображение только по горизонтали Как расположить фоновое изображение Фиксированное фоновое изображение (это изображение не будет прокручиваться вместе с остальной частью страницы) Все свойства фона в одном объявлении Расширенный пример фона

Объяснение свойств фона CSS


Границы CSS

Установите ширину четырех границ Установить ширину верхней границы Установить ширину нижней границы Установите ширину левой границы Установить ширину правой границы Установите стиль четырех границ Установить стиль верхней границы Установите стиль нижней границы Установите стиль левой границы Установите стиль правой границы Установите цвет четырех границ Установить цвет верхней границы Установить цвет нижней границы Установите цвет левой границы Установите цвет правой границы Все свойства границы в одном объявлении Добавить закругленные границы к элементу Установите разные границы с каждой стороны Все основные свойства границы в одном объявлении Все свойства нижней границы в одном объявлении Все свойства левой границы в одном объявлении Все нужные свойства границ в одном объявлении

Объяснение свойств границы CSS


Поля CSS

Задайте разные поля для каждой стороны элемента Использовать сокращенное свойство margin с четырьмя значениями Использовать сокращенное свойство margin с тремя значениями Использовать сокращенное свойство margin с двумя значениями Использовать сокращенное свойство margin с одним значением Установите для поля значение auto, чтобы центрировать элемент внутри его контейнера. Пусть левое поле унаследовано от родительского элемента Обрушение поля

Объяснение свойств поля



CSS Padding

Укажите разные отступы для каждой стороны элемента Используйте сокращенное свойство padding с четырьмя значениями Используйте сокращенное свойство padding с тремя значениями Использовать сокращенное свойство заполнения с двумя значениями Используйте сокращенное свойство заполнения с одним значением Отступы и ширина элемента (без box-sizing) Отступы и ширина элемента (с box-sizing) Установить padding-left элемента Установить padding-right элемента Установить padding-top элемента Установите padding-bottom элемента

Объяснение свойств заполнения CSS


Высота/ширина CSS

Установка высоты и ширины элемента Установить максимальную ширину элемента Установите высоту и ширину различных элементов Установите высоту и ширину изображения, используя проценты Установите минимальную ширину и максимальную ширину элемента Установка минимальной и максимальной высоты элемента

Объяснение свойств высоты/ширины CSS


Блочная модель CSS

Демонстрация блочной модели Укажите элемент общей шириной 250 пикселей

Объяснение блочной модели CSS


Контур CSS

Нарисовать линию вокруг элемента (контур) Установить стиль контура Установить цвет контура Установить ширину контура Используйте сокращенное свойство контура Добавить пространство между контуром и краем/границей элемента

Объяснение свойств контура CSS


Текст CSS

Установить цвет текста различных элементов Выровнять текст Убрать строку под ссылками Украсить текст Управляйте буквами в тексте Отступ текста Укажите пробел между символами Укажите расстояние между строками Установить направление текста элемента Увеличьте пробел между словами Укажите тень текста для элемента Отключить перенос текста внутри элемента Вертикальное выравнивание изображения внутри текста

Объяснение свойств текста CSS


Шрифты CSS

Установить шрифт текста Установить размер шрифта Установите размер шрифта в px Установить размер шрифта в em Установите размер шрифта в процентах и ​​em Установить стиль шрифта Установить вариант шрифта Установить жирность шрифта Все свойства шрифта в одном объявлении

Описание свойств шрифта


Иконки CSS

Иконки Font Awesome Иконки начальной загрузки Иконки Google

Объяснение значков CSS


Ссылки CSS

Добавление разных цветов к посещенным/непосещенным ссылкам Использование оформления текста в ссылках Укажите цвет фона для ссылок Добавьте другие стили к гиперссылкам Различные типы курсоров Дополнительно — Создание блоков ссылок Дополнительно — Создание блоков ссылок с границами

Объяснение свойств ссылок CSS


Списки CSS

Все различные маркеры элементов списка в списках Установите изображение в качестве маркера элемента списка Поместите маркер элемента списка Удалить настройки списка по умолчанию Все свойства списка в одном объявлении Списки стилей с цветами Полноразмерный список с рамками

Объяснение свойств списка CSS


Таблицы CSS

Укажите черную рамку для элементов table, th и td Использование границы коллапса Единая рамка вокруг стола Укажите ширину и высоту таблицы Установить горизонтальное выравнивание контента (text-align) Установить вертикальное выравнивание контента (vertical-align) Укажите отступы для элементов th и td Горизонтальные разделители Парящий стол Полосатые столы Укажите цвет границ таблицы Установите положение заголовка таблицы Адаптивная таблица Создайте необычный стол

Объяснение свойств таблицы CSS


Отображение CSS

Как скрыть элемент (видимость:скрытый) Как не отображать элемент (display:none) Как отобразить элемент уровня блока как встроенный элемент Как отобразить встроенный элемент как элемент блочного уровня Как использовать CSS вместе с JavaScript для отображения скрытого содержимого

Объяснение свойств отображения CSS


Позиционирование CSS

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

Объяснение свойств позиционирования CSS


Переполнение CSS

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

Объяснение свойств переполнения CSS


CSS Floating

Простое использование свойства float Изображение с рамкой и полями, плавающее вправо в абзаце Изображение с подписью, плавающей вправо Пусть первая буква абзаца плавает влево Отключение float (используя свойство clear) Отключение float (используя хак «clearfix») Создание плавающих ящиков Создавайте параллельные изображения Создание блоков одинаковой высоты (с помощью flexbox) Создание горизонтального меню Пример создания веб-макета

Объяснение свойств CSS float


CSS Inline-block

Показать различия между inline, inline-block и block Использование встроенного блока для создания навигационных ссылок

Объяснение встроенного блока CSS


Выравнивание элементов CSS

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

Описание свойств выравнивания CSS


Комбинаторы CSS

Селектор потомков Детский селектор Селектор смежных братьев и сестер Общий селектор родственных элементов

Объяснение комбинаторов CSS


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

Добавление разных цветов к гиперссылке Добавьте другие стили к гиперссылкам Использование : фокус :first-child — соответствует первому элементу p :first-child — соответствует первому элементу i во всех элементах p :first-child — Соответствует всем элементам i во всех первых дочерних элементах p Использование: lang

Объяснение псевдоклассов CSS


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

Сделать первую букву в тексте особенной Сделать первую строку в тексте особенной Сделайте первую букву и первую строку особенными Используйте :before, чтобы вставить некоторый контент перед элементом Используйте :after для вставки содержимого после элемента

Объяснение псевдоэлементов CSS


Непрозрачность CSS

Создание прозрачных изображений Создание прозрачных изображений — эффект наведения мыши Обратный эффект наведения мыши для прозрачных изображений Прозрачный блок/div Прозрачный блок/дел со значениями RGBA Создание прозрачного блока с текстом на фоновом изображении

Объяснение непрозрачности изображения CSS


Панели навигации CSS

Полностью оформленная вертикальная панель навигации Полностью стилизованная горизонтальная панель навигации Полноразмерная фиксированная вертикальная панель навигации Фиксированная горизонтальная панель навигации Липкая панель навигации (не работает в IE или Edge 15 и более ранних версиях) Отзывчивая верхняя навигация Адаптивная боковая навигация

Объяснение панелей навигации CSS


Выпадающие списки CSS

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

Описание раскрывающихся списков CSS


Галерея изображений CSS

Галерея изображений Галерея адаптивных изображений

Объяснение галереи изображений CSS


Спрайты изображений CSS

Спрайт изображения Спрайт изображения — список навигации Спрайт изображения с эффектом наведения

Описание спрайтов изображений CSS


Селекторы атрибутов CSS

Выбирает все элементы с целевым атрибутом Выбирает все элементы с атрибутом target=»_blank» Выбирает все элементы с атрибутом title, который содержит список слов, разделенных пробелами, одним из которых является «цветок». Выбирает все элементы со значением атрибута class, начинающимся с «top» (должно быть целым словом) Выбирает все элементы со значением атрибута класса, начинающимся с «top» (не должно быть целым словом). Выбирает все элементы со значением атрибута класса, оканчивающимся на «тест». Выбирает все элементы со значением атрибута класса, которое содержит «te»

Описание селекторов атрибутов CSS


CSS-формы

Поле ввода полной ширины Заполненное поле ввода Поле ввода с рамкой Поле ввода с нижней границей Цветные поля ввода Сфокусированные поля ввода Сфокусированные поля ввода 2 Ввод со значком/изображением Анимированный поисковый ввод Стилизация текстовых полей Стилизация меню выбора Стилизация кнопок ввода Адаптивная форма

Описание форм CSS


Счетчики CSS

Создать счетчик Вложенные счетчики 1 Вложенные счетчики 2

Объяснение счетчиков CSS


Макет веб-сайта CSS

Простой, адаптивный макет веб-сайта Пример веб-сайта

Объяснение макета веб-сайта CSS


Закругленные углы CSS

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

Объяснение закругленных углов CSS


Изображения границ CSS

Создание границы изображения вокруг элемента с помощью ключевого слова round Создайте рамку изображения вокруг элемента, используя ключевое слово stretch Граница изображения — разные значения среза

Объяснение изображений границ CSS


Фоны CSS

Добавление нескольких фоновых изображений для элемента Укажите размер фонового изображения Масштабируйте фоновое изображение, используя «содержать» и «обложку». Определить размеры нескольких фоновых изображений Полноразмерное фоновое изображение (полностью заполняет область содержимого) Используйте background-origin, чтобы указать, где расположено фоновое изображение. Используйте background-clip, чтобы указать область рисования фона

Объяснение CSS-фонов


Градиенты CSS

Линейный градиент — сверху вниз Линейный градиент — слева направо Линейный градиент — диагональ Линейный градиент — с заданным углом Линейный градиент — с несколькими точками цвета Линейный градиент — цвет радуги + текст Линейный градиент — с прозрачностью Linear Gradient — повторяющийся линейный градиент Радиальный градиент — равномерно расположенные цветовые точки Радиальный градиент — цветовые точки с разным интервалом Радиальный градиент — задать форму Радиальный градиент — ключевые слова разного размера Radial Gradient — повторяющийся радиальный градиент

Объяснение градиентов CSS


Эффекты тени CSS

Простой эффект тени Добавьте цвет к тени Добавьте эффект размытия к тени Белый текст с черной тенью Красная неоновая светящаяся тень Красно-синяя неоновая светящаяся тень Белый текст с черной, синей и темно-синей тенью Добавьте к элементу простую тень блока Добавьте цвет к box-shadow Добавьте цвет и эффект размытия к box-shadow Создание бумажных карточек (текст) Создание бумажных карточек (изображения полароид)

Объяснение эффектов тени CSS


Текстовые эффекты CSS

Укажите, как скрытое, переполненное содержимое должно сигнализироваться пользователю Как отобразить переполненный контент при наведении на элемент Разрешить разрыв длинных слов и их перенос на следующую строку Укажите правила разрыва строк

Объяснение текста CSS


Веб-шрифты CSS

Используйте собственные шрифты в правиле @font-face Используйте «собственные» шрифты в правиле @font-face (жирный шрифт)

Объяснение веб-шрифтов CSS


CSS 2D Transforms

translate() — переместить элемент из его текущей позиции rotate() — повернуть элемент по часовой стрелке rotate() — повернуть элемент против часовой стрелки scale() — увеличить элемент scale() — уменьшить элемент skewX() — наклоняет элемент по оси X skewY() — наклоняет элемент по оси Y skew() — наклоняет элемент по осям X и Y. matrix() — вращать, масштабировать, перемещать и наклонять элемент

Объяснение двумерных преобразований CSS


Преобразование трехмерных изображений CSS

rotateX() — вращать элемент вокруг оси X на заданный градус rotateY() — повернуть элемент вокруг своей оси Y на заданный градус rotateZ() — повернуть элемент вокруг своей оси Z на заданный градус

Объяснение трехмерных преобразований CSS


Переходы CSS

Переход — изменение ширины элемента Переход — изменение ширины и высоты элемента Задайте различные кривые скорости для перехода Укажите задержку для эффекта перехода Добавление преобразования к эффекту перехода Укажите все свойства перехода в одном сокращенном свойстве

Описание переходов CSS


CSS-анимации

Привязка анимации к элементу Анимация — изменение цвета фона элемента Анимация — изменение цвета фона и положения элемента Задержка анимации Запустите анимацию 3 раза, прежде чем она остановится Запустить анимацию навсегда Запустить анимацию в обратном направлении Запускать анимацию в альтернативных циклах Кривые скорости для анимации Сокращенное свойство анимации

Объяснение анимации CSS


Подсказки CSS

Правая подсказка Левая подсказка Верхняя подсказка Нижняя подсказка Подсказка со стрелкой Анимированная всплывающая подсказка

Объяснение всплывающих подсказок CSS


Изображения стилей CSS

Округлое изображение Изображение в кружке Миниатюрное изображение Миниатюра изображения в виде ссылки Адаптивное изображение Текст изображения (верхний левый угол) Текст изображения (верхний правый угол) Текст изображения (нижний левый угол) Текст изображения (нижний правый угол) Текст изображения (по центру) Полароидные изображения Фильтр изображений в градациях серого Продвинутый — модальное изображение с CSS и JavaScript

Описание изображений CSS


Отражение изображения CSS

Создать отражение под изображением Создайте отражение справа от изображения Создайте зазор между изображением и отражением Создание эффекта затухания отражения

Объяснение отражения изображения CSS


CSS Object-fit

Использовать object-fit: обложку Использовать соответствие объекту: содержать Использовать объектную подгонку: заполнить Использовать объектную подгонку: нет Использовать объектную подгонку: уменьшение масштаба Все значения свойств объекта в одном примере

Объяснение подгонки объекта CSS


Положение объекта CSS

Расположите изображение так, чтобы большое старое здание было в центре Расположите изображение так, чтобы знаменитая Эйфелева башня находилась в центре

Объяснение позиции объекта CSS


Кнопки CSS

Основные кнопки CSS Цвета кнопок Размеры кнопок Закругленные кнопки Цветные рамки кнопок Кнопки с наведением Кнопки тени Отключенные кнопки Ширина кнопки Группы кнопок Группа кнопок с рамкой Анимированная кнопка (эффект наведения) Анимированная кнопка (эффект ряби) Анимированная кнопка (эффект нажатия)

Описание кнопок CSS


Разбивка на страницы CSS

Простая разбивка на страницы Активная и наводимая пагинация Округлая активная и наводимая пагинация Hoverable эффект перехода Разбивка на страницы с рамкой Разбивка на страницы со скругленными рамками Пагинация с пробелом между ссылками Размер страницы Пагинация с пробелом между ссылками Разбивка по центру Хлебные крошки

Объяснение нумерации страниц CSS


Несколько столбцов CSS

Создание нескольких столбцов Укажите промежуток между столбцами Укажите стиль правила между столбцами Укажите ширину правила между столбцами Укажите цвет правила между столбцами Укажите ширину, стиль и цвет правила между столбцами Укажите, сколько столбцов должен охватывать элемент Укажите рекомендуемую оптимальную ширину столбцов

Объяснение нескольких столбцов CSS


Пользовательский интерфейс CSS

Разрешить пользователю изменять ширину элемента Разрешить пользователю изменять высоту элемента Разрешить пользователю изменять ширину и высоту элемента Добавить пробел между контуром и границей элемента

Объяснение пользовательского интерфейса CSS


Переменные CSS

Использование функции var() Использование функции var() для вставки нескольких значений пользовательских свойств

Объяснение переменных CSS


CSS Box Sizing

Ширина элементов без box-sizing Ширина элементов с box-sizing Элементы формы + box-sizing

Объяснение размера блока CSS


CSS Flexbox

Flexbox с тремя элементами flex Flexbox с тремя flex-элементами — направление rtl flex-direction — строка-реверс flex-направление — столбец flex-direction — обратная колонка выравнивание содержимого — flex-end по выравниванию по центру justify-content — пробел между justify-content — пространство вокруг align-items — растянуть выравнивание элементов — flex-start выравнивание элементов — flex-end выравнивание элементов по центру выравнивание элементов — базовый уровень flex-wrap — теперь rap flex-wrap — обернуть flex-wrap — обернуть-обратно выравнивание содержимого по центру Заказать гибкие элементы Поле-справа:авто; Маржа:авто; = идеальное центрирование align-self на flex-элементах Укажите длину гибкого элемента относительно остальных гибких элементов. Создайте адаптивную галерею изображений с помощью flexbox Создайте адаптивный веб-сайт с помощью flexbox 9.0003

Объяснение CSS flexbox


Запросы CSS Media

Измените цвет фона на светло-зеленый, если окно просмотра имеет ширину 480 пикселей или больше. Показать меню, которое будет плавать слева от страницы, если окно просмотра имеет ширину 480 пикселей или больше

Объяснение запросов мультимедиа CSS


Запросы мультимедиа CSS — дополнительные примеры

Установка разных цветов фона в зависимости от ширины экрана Отзывчивое навигационное меню Отзывчивые столбцы с использованием float Отзывчивые столбцы с использованием flexbox Скрыть элементы с медиа-запросами Адаптивный размер шрифта Адаптивная галерея изображений Адаптивный сайт Изменение макета страницы в зависимости от ориентации браузера Минимальная ширина до максимальной ширины

Объяснение примеров мультимедийных запросов CSS


Адаптивный веб-дизайн CSS

Адаптивное представление сетки Добавляйте точки останова для настольных компьютеров, ноутбуков и телефонов. Типичные точки останова Адаптивное изображение Адаптивное видео Отзывчивый фреймворк: W3.CSS Адаптивная структура: Bootstrap

Объяснение адаптивного веб-дизайна CSS


CSS Grid

Макет сетки Элементы сетки Пробелы в столбцах сетки Линии сетки Контейнер сетки Элементы сетки

Объяснение сетки CSS

❮ Предыдущий Следующий ❯


НАБОР ЦВЕТА

Единицы CSS

❮ Предыдущая Далее ❯


Единицы CSS

CSS имеет несколько различных единиц измерения длины.

Многие свойства CSS принимают значения длины, например ширина , поля , отступы , размер шрифта и т. д.

Длина — это число, за которым следует единица длины, например 10px , 2em и т. д.

Пример

Установите различные значения длины, используя px (пиксели):

h2 {
  размер шрифта: 60 ​​пикселей;
}

p {
  размер шрифта: 25 пикселей;
высота строки: 50px;
}

Попробуйте сами »

Примечание: Между числом и единицей измерения не должно быть пробела. Однако, если значение 0 единицу измерения можно не указывать.

Для некоторых свойств CSS допускается отрицательная длина.

Существует два типа единиц длины: абсолютный и относительный .


Абсолютные длины

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

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

Блок Описание
см см Попробуй
мм миллиметра Попробуй
в дюйма (1 дюйм = 96 пикселей = 2,54 см) Попробуй
пикселей * пикселей (1 пиксель = 1/96 дюйма) Попробуй
пт балла (1 балл = 1/72 от 1 дюйма) Попробуй
шт. пика (1 шт = 12 пт) Попробуй

* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.


Относительная длина

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

Блок Описание
эм Относительно размера шрифта элемента (2em означает удвоенный размер текущего шрифта) Попробуйте
бывший Относительно x-высоты текущего шрифта (используется редко) Попробуйте
ч Относительно ширины «0» (ноль) Попробуйте
рем Относительно размера шрифта корневого элемента Попробуйте
вв Относительно 1% ширины окна просмотра* Попробуйте
вх Относительно 1% высоты окна просмотра* Попробуйте
об/мин Относительно 1% меньшего размера области просмотра* Попробуйте
вмакс Относительно 1% большего размера окна просмотра* Попробуй
% Относительно родительского элемента Попробуйте

Рекомендация: Единицы em и rem удобны для создания идеальных масштабируемая планировка!
* Viewport = размер окна браузера.

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

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