Las propiedades abreviadas nos permiten escribir múltiples propiedades en una sola línea y de forma compacta. Son útiles ya que proporcionan un código limpio y también reducen la LOC (Línea de código). Las propiedades de la taquigrafía que cubriremos:
- Fondo
- Fuente
- Borde
- Esquema
- Margen
- Relleno
- Lista
Fondo: la propiedad CSS Background se utiliza para establecer el fondo de una página web. El fondo se puede aplicar a cualquier elemento como el cuerpo, h1, p, div, etc. Hay muchas propiedades disponibles con un fondo como el color, la imagen, la posición, etc. Algunas de ellas se usan en el siguiente código.
- Manera larga:
html
background-color:#000; background-image: url(images/bg.png); background-repeat: no-repeat; background-position:left top;
- Manera abreviada:
html
background:#000 url(images/bg.png) no-repeat left top;
- Ejemplo:
html
<!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>
- Producción:
Fuente: la propiedad de fuente CSS se utiliza para aplicar diferentes fuentes al texto de la página web. Los diversos atributos que se pueden configurar con la fuente son familia de fuentes, tamaño de fuente, peso de fuente, etc. Algunos de ellos se usan en el código siguiente.
- Manera larga:
html
font-style:italic; font-weight:bold; font-size:18px; line-height:150%; font-family:Arial,sans-serif;
- Manera abreviada:
html
font: italic bold 18px/150% Arial, sans-serif;
- Ejemplo:
html
<!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>
- Producción:
Borde: la propiedad de borde CSS se utiliza para aplicar un borde a diferentes elementos de una página web. Hay muchos atributos del borde como ancho, estilo, color, etc.
- Manera larga:
html
border-width: 1px; border-style: solid; border-color: #000;
- Manera abreviada:
html
border: 1px solid #000;
- Ejemplo:
html
<!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>
- Producción:
Esquema: la propiedad de esquema CSS se utiliza para aplicar un esquema a varios elementos que están presentes en una página web.
- Manera larga:
html
outline-width: 1px; outline-style: solid; outline-color: #000;
- Manera abreviada:
html
outline: 1px solid #000;
- Ejemplo:
html
<!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>
- Producción:
Margen: las propiedades de margen de CSS se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos. Podemos definir el margen para los 4 lados, es decir, arriba, abajo, izquierda y derecha.
- Manera larga:
html
margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left :5px;
- Manera abreviada:
html
margin : 10px 5px 10px 5px;
- Ejemplo:
html
<!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>
- Producción:
Relleno: las propiedades de relleno de CSS se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos. El relleno también se puede aplicar como relleno superior, inferior, izquierdo y derecho.
- Manera larga:
html
padding-top: 10px; padding-right: 5px; padding-bottom: 10px; padding-left :5px;
- Manera abreviada:
html
padding : 10px 5px 10px 5px;
- Ejemplo:
html
<!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>
- Producción:
Margin y Padding aceptan dos y tres valores también en forma abreviada, por ejemplo:
margen: 50px 75px; // aquí, el margen superior-inferior es 50px y el margen derecho-izquierdo es 75px, lo mismo es cierto para el relleno también.
margen: 50px 35px 75px; // aquí, el margen superior es de 50 px, el margen derecho-izquierdo es de 35 px y el margen inferior es de 75 px, lo mismo es cierto para el relleno también.
Se aplica en el sentido de las agujas del reloj comenzando desde arriba a la derecha, abajo a la izquierda.
Lista: Hay principalmente dos tipos de lista en CSS: 1. Lista ordenada<ol> 2. Lista no ordenada <ul> Las listas no ordenadas tienen viñetas mientras que las listas ordenadas tienen números.
- Manera larga:
html
list-style-type: disc; list-style-position: inside; list-style-image: url(disc.png);
- Manera abreviada:
html
list-style: disc inside url(disc.png);
- Ejemplo:
html
<!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>
- Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA