Свойства стенографии позволяют нам записывать несколько свойств в одной строке и компактным способом. Они полезны, поскольку обеспечивают чистый код, а также уменьшают LOC (строку кода).
Свойства стенографии, которые мы будем освещать:
- Фон
- Шрифт
- Граница
- Контур
- Прибыль
- Набивка
- Список
Предыстория: Свойство CSS Background используется для установки фона на веб-странице. Фон может быть применен к любому элементу, такому как тело, h1, p, div и т.д. Существует множество свойств, доступных с фоном, таких как цвет, изображение, положение и т.д. Некоторые из них используются в приведенном ниже коде.
- Длинный путь:
background-color:#000;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position:left top;
- Сокращенный способ:
background:#000 url(images/bg.png) no-repeat left top;
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
body {
background: #000 url(images/bg.png) no-repeat left top;
}
</style>
</head>
<body></body>
</html>
Выход:
Шрифт: Свойство шрифта CSS используется для применения различных шрифтов к тексту на веб-странице. Различные атрибуты, которые можно задать с помощью шрифта,-это семейство шрифтов, размер шрифта, вес шрифта и т.д. Некоторые из них используются в приведенном ниже коде.
- Длинный путь:
font-style:italic;
font-weight:bold;
font-size:18px;
line-height:150%;
font-family:Arial,sans-serif;
- Сокращенный способ:
font: italic bold 18px/150% Arial, sans-serif;
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
font: italic bold 18px/150% Arial, sans-serif;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Выход:
Граница: Свойство границы CSS используется для применения границы к различным элементам веб-страницы. Существует множество атрибутов границы, таких как ширина, стиль, цвет и т.д.
- Длинный путь:
border-width: 1px;
border-style: solid;
border-color: #000;
- Сокращенный способ:
border: 1px solid #000;
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Выход:
План: Свойство CSS outline используется для применения контура к различным элементам, присутствующим на веб-странице.
- Длинный путь:
outline-width: 1px;
outline-style: solid;
outline-color: #000;
- Сокращенный способ:
outline: 1px solid #000;
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
outline: 10px solid #000;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Выход:
Маржа: Свойства полей CSS используются для создания пространства вокруг элементов за пределами любых определенных границ. Мы можем определить поля для всех 4 сторон, т. е. сверху, снизу, слева и справа.
- Длинный путь:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left :5px;
- Сокращенный способ:
margin : 10px 5px 10px 5px;
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
margin: 100px 50px 100px 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Выход:
Обивка: Свойства заполнения CSS используются для создания пространства вокруг содержимого элемента внутри любых определенных границ. Обивка также может применяться как верхняя, нижняя, левая и правая обивка.
- Длинный путь:
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left :5px;
- Сокращенный способ:
padding : 10px 5px 10px 5px;
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
padding: 100px 50px 100px 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Выход:
Обивка: Свойства заполнения CSS используются для создания пространства вокруг содержимого элемента внутри любых определенных границ. Обивка также может применяться как верхняя, нижняя, левая и правая обивка.
- Длинный путь:
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left :5px;
- Сокращенный способ:
padding : 10px 5px 10px 5px;
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
padding: 100px 50px 100px 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Выход:
Список: В CSS в основном существует два типа списков:
1. Упорядоченный список<пр><пр>
2. Неупорядоченный список <ul><ul>
Неупорядоченные списки имеют маркированные точки, в то время как упорядоченные списки имеют номера.
- Длинный путь:
list-style-type: disc;
list-style-position: inside;
list-style-image: url(disc.png);
- Сокращенный способ:
list-style: disc inside url(disc.png);
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
li {
list-style: disc inside url(assets/hole.png);
}
</style>
</head>
<body>
<li>GeeksforGeeks</li>
</body>
</html>
Выход:
