¿Qué es CSS?
CSS , es decir, hojas de estilo en cascada, es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en un lenguaje de marcado como HTML, XML, etc. CSS mejora la apariencia de la página web al describir cómo los elementos deben representarse en la pantalla o otros medios.
¿Qué es una hoja de trucos de CSS?
CSS Cheat Sheet le brinda los fragmentos de estilo más comunes CSS degradado, fondo, botón, familia de fuentes, orden, radio, cuadro y generadores de sombras de texto, selector de color y más herramientas para agregar más peso visual a su documento. Todas estas y otras útiles herramientas de diseño web se pueden encontrar en una sola página.
Tabla de contenidos:
Conceptos básicos de CSS: la hoja de estilo en cascada (CSS) se usa para establecer el estilo en las páginas web que contienen elementos HTML, aquí veremos de cuántas maneras podemos agregar CSS para nuestro HTML, hay tres formas diferentes de hacerlo uno por uno nosotros verá esos procedimientos.
CSS externo: el CSS externo contiene un archivo CSS separado con una extensión .css que contiene solo propiedades de estilo con la ayuda de atributos de etiqueta.
selector{
property1: value1;
property2: value2;
}
Incluir archivo CSS externo: el archivo CSS externo está vinculado al documento HTML mediante una etiqueta de enlace.
<link rel="stylesheet" type="text/css" href="/style.css" />
CSS interno o incrustado: el CSS está incrustado en el archivo HTML mediante una etiqueta HTML de estilo cuando un solo documento HTML debe tener un estilo exclusivo.
<style type="text/css">
div { color: #444;}
</style>
CSS en línea: contiene propiedades CSS en la sección del cuerpo especificada dentro de las etiquetas HTML usando el atributo de estilo.
<tag style="property: value"> </tag>
Clearfix: se utiliza para borrar flotantes para seleccionar o mantener el control de sus márgenes y relleno.
.clearfix::after {
content: "";
clear: both;
display: block;
}
Selectores: los selectores de CSS se utilizan para buscar o seleccionar los elementos HTML que desea diseñar. Estos se clasifican de la siguiente manera:
| Selectores básicos | Descripción | Sintaxis |
| Universal | Selecciona todos los elementos de las páginas. El símbolo ‘*’ se utiliza para indicar que el selector es un selector universal. | *{El valor de la propiedad;} |
| Escribe | El selector de tipo o el selector de nombre/elemento de etiqueta selecciona una etiqueta/elemento HTML en su documento. Selecciona todos los elementos del tipo dado dentro de un documento. | p { declaraciones CSS; } |
| Identificación | Selecciona un elemento en función del valor de su atributo de identificación único (una identificación solo se aplica a un elemento). Un selector de ID comienza con un carácter # en lugar de un punto. | #id {css declaraciones; } |
| Clase | Selecciona todos los elementos del documento que tienen el atributo de clase especificado. Su selector de clase comienza con un carácter de punto (.). | .class { declaraciones css; } |
| Atributo | Selecciona todos los elementos que tienen un atributo especificado. Los elementos agrupados en función de algún valor de atributo se pueden diseñar mediante un selector de atributos. | a[atributo=valor] { propiedad: valor; } |
| combinadores | Los combinadores son selectores complejos que consisten en más de un selector que tiene alguna relación entre ellos. Estos son el selector de hermanos generales de la familia de fuentes, el selector de hermanos adyacentes, el selector de niños, el selector de descendientes. | selector1 selector2/ selector 1+selector2 / selector 1> selector 2 {propiedad: valor;} |
| Seudo | Una clase Pseudo en CSS se usa para definir el estado especial de un elemento para agregar un efecto a un elemento existente basado en sus estados. por ej. cambio de estado al pasar el mouse, hacer clic, enfocar, cuando se visita un enlace, etc. | selector: pseudo-clase{ propiedad: valor; } |
CSS
<!DOCTYPE html>
<html>
<head>
<title>* Selectors</title>
<!-- CSS Selectors are in used -->
<style>
/* universal selector */
* {
background-color: hsl(325, 63%, 82%);
text-align: center;
}
/* type selector */
span {
background-color: skyblue;
}
/* id selector */
#div1 {
color: green;
text-align: center;
font-size: 20px;
font-weight: bold;
}
/* class selector */
.div2 {
color: orange;
text-align: left;
font-size: 10px;
font-weight: bold;
}
/* attribute selector */
div[style] {
text-align: center;
color: purple;
font-size: 20px;
font-weight: bold;
margin-bottom: -20px;
}
/* combinator selector */
div>p {
color: #009900;
font-size: 32px;
font-weight: bold;
margin: 0px;
text-align: center;
}
/* class selector */
.box {
background-color: yellow;
width: 300px;
height: 100px;
margin: auto;
font-size: 30px;
text-align: center;
}
/* pseudo selector */
.box:hover {
background-color: orange;
}
</style>
</head>
<body>
<p>
*(Universal) Selector here gives a pink background
</p>
<br>
<span>This span is styled using type selector.
<br><br>
<div id="div1">
This div is styled using id selector
</div>
<br>
<div class="div2 ">
This div is styled using class selector
</div>
<br>
<div style="color:green">
This div is styled using attribute selector
</div>
<br>
<div style="text-align:center;">
This div is styled using combinators
<p>child selector</p>
</div>
<br>
<p>psuedo selector:</p>
<div class="box">
My color changes if you hover over me!
</div>
</body>
</html>
Propiedades de la fuente: las propiedades de la fuente CSS se utilizan para establecer el contenido de la fuente del elemento HTML según los requisitos.
| Propiedad | Descripción | Sintaxis |
| Familia tipográfica | La propiedad CSS font-family especifica la familia de fuentes que se usará para el contenido de texto del elemento. Se pueden dar diferentes nombres de fuente para crear un sistema alternativo en caso de que la prioridad principal no esté disponible. | familia de fuentes: nombre de familia |familia genérica |inicial |heredar; |
| Estilo de fuente | La propiedad de estilo de fuente CSS se utiliza para diseñar el contenido del texto en una cara normal, cursiva u oblicua de su familia de fuentes. | estilo de fuente: normal |cursiva |oblicua |inicial |heredar; |
| Variante de fuente | La propiedad CSS font-variant se usa para convertir todas las letras minúsculas en letras mayúsculas. Las letras mayúsculas convertidas aparecen más pequeñas en tamaño de fuente que las letras mayúsculas originales. | fuente-variante: normal| versalitas | inicial; |
| Peso de fuente | La propiedad CSS font-weight se usa para especificar el grosor o el peso de la fuente en el contenido del texto del HTML y los elementos de color separados. | peso de fuente: normal| negrita |número |inicial |heredar |no establecido; |
| Tamaño de fuente | La propiedad CSS font-size se utiliza para especificar el tamaño del texto en un documento HTML. | tamaño de letra: pequeño |mediano |grande |inicial |heredar; |
CSS
<!DOCTYPE html>
<html>
<head>
<title>Font properties</title>
<style>
.style1 {
font-family: "Times New Roman", "sans-serif";
font-weight: bold;
font-size: 30px;
color: #090;
text-align: center;
font-style: normal;
font-variant: normal;
}
.style2 {
font-family: "sans-serif";
font-weight: 5px;
font-size: 15px;
color: blueviolet;
text-align: left;
font-style: italic;
font-variant: normal;
}
.style3 {
font-family: "arial";
font-weight: 10px;
font-size: 20px;
color: black;
text-align: right;
font-style: oblique;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Normal text aligned center sized 10 px</p>
<div class="style1">Geeks for Geeks</div>
<p>Italic text aligned left sized 15px</p>
<div class="style2">Geeks for geeks</div>
<p>Oblique text aligned right sized 20px, in small caps</p>
<div class="style3">Geeks for geeks</div>
</body>
</html>
Propiedades de texto: las propiedades de formato de texto CSS se utilizan para dar formato y estilo al texto configurando su color, alineación, espaciado, etc. según los requisitos.
| Propiedad | Descripción | Sintaxis |
| Color de texto | La propiedad CSS text-color se usa para establecer el color del texto. Se puede configurar usando un nombre de color separado por comas, su valor hexadecimal o valor RGB. | color: valor; |
| Alineación del texto | La propiedad de alineación de texto CSS se utiliza para establecer la alineación horizontal del texto como izquierda, derecha, centrada y justificada. | alineación de texto: izquierda|derecha|centro|justificar|inicial|heredar; |
| Decoración de texto | La decoración de texto CSS se utiliza para añadir o eliminar decoraciones de texto como subrayado, sobrerayado, traspaso o ninguno. | decoración de texto: tipo de decoración; |
| Transformación de texto | La propiedad de transformación de texto CSS se utiliza para cambiar el caso del texto (mayúsculas o minúsculas) o escribir en mayúsculas. | ninguno|mayúsculas|mayúsculas|minúsculas|inicial|heredar; |
| sangría de texto | La propiedad de sangría de texto CSS se usa para sangrar la primera línea del bloque de texto. El tamaño puede ser en px, cm, pt. el tamaño debe ser no negativo. | sangría de texto: longitud|inicial|heredar; |
| Espaciado de letras | La propiedad de espaciado entre letras de CSS se utiliza para especificar el espacio entre los caracteres del texto. el tamaño puede estar en px. | espaciado entre letras: normal|longitud|inicial|heredar; |
| Altura de la línea | La propiedad de espacio entre líneas CSS se utiliza para especificar el espacio entre las líneas del bloque de texto. | altura de línea: normal|número|longitud|porcentaje|inicial|heredar; |
| Sombra de texto | La propiedad CSS text-shadow se usa para agregar sombra al texto. Con esta propiedad puede especificar el color de la sombra, el tamaño horizontal y el tamaño vertical del texto. | text-shadow: h-shadow v-shadow blur-radius color|ninguno|inicial|heredar |
| Espaciado entre palabras | La propiedad de espaciado de palabras de CSS se utiliza para especificar el espacio entre palabras de líneas en el bloque de texto. | espaciado entre palabras: normal|longitud|inicial|heredar; |
CSS
<!DOCTYPE html> <html> <head> <title>Text formatting properties</title> </head> <body> <div style=" color: red"> Color property used here </div> </br> <div style=" text-align: center"> Text align property used here </div> </br> <div style=" text-decoration: underline"> Text decoration property used here </div> </br> <div style="text-transform: lowercase"> Text transform property used here </div> </br> <div style="text-indent: 80px"> Text indent property used here </div> </br> <div style=" letter-spacing: 4px"> Text line spacing property used here </div> </br> <div style="line-height: 40px"> Text line height property used here </div> </br> <div style="text-shadow: 3px 1px blue;"> Text shadow property used here </div> </br> <div style="word-spacing: 15px;"> Text word spacing property used here </div> </body> </html>
Propiedades de fondo: las propiedades de fondo de CSS se utilizan para diseñar el fondo y definir los efectos de fondo para los elementos.
| Propiedad | Descripción | Sintaxis |
| Color de fondo | La propiedad CSS background-color se usa para especificar el color de fondo de un elemento. | color de fondo: nombre_color; |
| Imagen de fondo | La propiedad CSS background-image se usa para agregar una o más imágenes de fondo a un elemento. | imagen de fondo: url(‘url’); |
| Fondo-repetir | La propiedad CSS background-repeat se usa para agregar o eliminar la repetición de la imagen de fondo tanto horizontal como verticalmente. | background-repeat: repetir |repetir-x |repetir-y |no-repetir |inicial |heredar; |
| Posición de fondo | La propiedad body-position de CSS se usa principalmente para especificar el posicionamiento de la imagen de cierta manera. | posición de fondo: valor; |
| Origen de fondo | La propiedad CSS background-origin se usa para ajustar la imagen de fondo de la página web. | background-origin: padding-box |border-box |content-box | inicial| heredar; |
| Adjunto de fondo | La propiedad CSS background-attachment se utiliza para especificar el tipo de archivo adjunto de la imagen de fondo con respecto a su contenedor. | archivo adjunto de fondo: desplazamiento | fijo | local | inicial | heredar; |
| Clip de fondo | La propiedad CSS background-clip se usa para definir hasta dónde debe extenderse el fondo (color o imagen) dentro de un elemento. | clip de fondo: cuadro de borde | caja de relleno | cuadro de contenido | inicial |heredar; |
CSS
<!DOCTYPE html>
<html>
<head>
<title>Background Properties</title>
<style>
.a {
background-image:
url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
}
.b {
background-image:
url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-repeat: no-repeat;
}
.c {
background-image:
url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-repeat: no-repeat;
background-position: center;
}
.d {
background-image:
url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: initial;
}
.e {
background-image:
url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div style="background-color: blue">Background color property</div>
</br>
<div class="a" style="height: 200px; width: 100%">
<h3> Background Image property</h3>
</div>
<br><br>
<div class="b" style="height: 200px; width: 100%">
<h3> Background repeat property: no-repeat</h3>
</div>
<br><br>
<div class="c" style="height: 200px; width: 100%">
<h3> Background position property</h3>
</div>
<br><br>
<div class="d" style="height: 200px; width: 100%">
<h3>Background origin property: The background-origin is a property defined in
CSS which helps in adjusting the background image of the webpage.
This property is used to set the origin of the image in the background.
</h3>
</div>
<br><br>
<div class="e" style="height: 400px; width: 100%; text-align:center;">
<h3> Background-attachment property</h3>
<p>The property background-attachment property in CSS is used
to specify the kind of attachment of the background image with
respect to its container. It can be set to scroll or remain fixed.
</p>
<br><br>
<p>The property background-attachment property in CSS is used
to specify the kind of attachment of the background image with
respect to its container. It can be set to scroll or remain fixed.
</p>
<br><br>
<p> The property background-attachment property in CSS is used
to specify the kind of attachment of the background image with
respect to its container. It can be set to scroll or remain fixed.
</p>
</div>
<br>
</body>
</html>
Propiedades del cuadro: el modelo de cuadro CSS es esencialmente un cuadro que envuelve cada elemento HTML que consiste en el borde, el relleno, el margen y el contenido. Las propiedades CSS utilizadas para lograr el modelo de caja son:
| Propiedad | Descripción | Sintaxis |
| Margen | Establece el margen como superior, izquierdo, inferior o derecho especificando la longitud o el porcentaje. | margen: valor; |
| Relleno | Describe la cantidad de espacio entre el borde y el contenido del selector. | relleno: valor; |
| Borde | Establece el ancho del borde del elemento especificando borde o borde superior, derecho, inferior o izquierdo. También se utiliza para establecer el estilo y el color del borde de un elemento. | borde: valor; |
| Ancho | Establece el ancho de un elemento como una longitud, un porcentaje o un auto. | ancho: valor; |
| Altura | Establece la altura de un elemento como una longitud, un porcentaje o como automático. | altura: valor; |
CSS
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 20px;
font-weight: bold;
Text-align: left;
}
.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}
.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}
.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>
<body>
<div class="main">CSS Box-Model Property</div>
<div class="gfg">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Propiedades de sombra: estas propiedades de sombra se utilizan para agregar sombra al texto o cuadros o marcos de elementos para mejorar la calidad visual de la página web.
| Propiedad | Descripción | Sintaxis |
| Sombra de texto | Se utiliza para añadir sombra al texto. Acepta una lista separada por comas de propiedades de sombra para aplicar al texto. | text-shadow: h-shadow v-shadow blur-radius color| ninguno | inicial | heredar; |
| Sombra de la caja | Se utiliza para dar un efecto de sombra a la caja o marcos de un elemento. Acepta múltiples efectos separados por comas. Se describe usando compensaciones X e Y relativas al elemento, desenfoque y radio de dispersión, y color. | box-shadow: h-offset v-offset blur spread color |ninguno |recuadro |inicial | heredar; |
CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow Property</title>
<style>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 10px;
}
/* text-shadow: h-shadow v-shadow
blur-radius color */
h2 {
text-shadow: 5px 5px 8px #00FF00;
}
</style>
</head>
<body>
<div class="gfg1">
<h1>Welcome to GeeksforGeeks!</h1>
</div>
<br><br>
<h2>GeekforGeeks</h2>
</body>
</html>
Degradado: la propiedad de degradado de CSS se utiliza para crear una transición suave y progresiva entre dos o más colores específicos. La transición puede ir hacia arriba/abajo/derecha/izquierda/diagonal/radial usando diferentes puntos de color, ángulos o porcentajes.
| Degradado | Descripción | Sintaxis |
| Gradiente lineal | Esta propiedad se utiliza para crear transiciones de color suaves hacia arriba, hacia abajo, a la izquierda, a la derecha y en diagonal. Requiere un mínimo de dos colores, un punto de partida y la dirección del efecto degradado. | imagen de fondo: degradado lineal (dirección, color-stop1, color-stop2, …); |
| Gradiente radial | Se utiliza un degradado radial para obtener un degradado de forma elíptica. Comienza en un solo punto y emana hacia afuera. El primer color comienza en la posición central del elemento y luego se desvanece hasta el color final hacia el borde del elemento al mismo ritmo hasta que se especifica. | imagen de fondo: degradado radial (tamaño de la forma en la posición, color de inicio, …, último color); |
CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main1 {
height: 200px;
background-color: white;
background-image: linear-gradient(white, green);
}
#main2 {
height: 350px;
width: 700px;
background-color: white;
background-image: radial-gradient(#090,
#fff, #2a4f32);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<!-- Linear gradient -->
<div id="main1">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
Linear Gradient
</div>
</div>
<br><br>
<!-- Radial Gradient -->
<div id="main2">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
Radial Gradient
</div>
</body>
</html>
Propiedades de borde: las propiedades de borde de CSS le permiten especificar cómo debe verse el borde del cuadro que representa un elemento. Se utiliza para especificar el tipo de color y el ancho del borde de aspecto para dar al elemento el aspecto deseado.
| Propiedad | Descripción | Sintaxis |
| Color del borde | Especifica el color del borde de la caja que contiene el elemento. Funciona solo cuando la propiedad de estilo de borde se define primero, no funcionará solo. Si no se establece esta propiedad, hereda el color del elemento. | borde-color: color-valor; |
| Estilo de borde | Establece el estilo o el aspecto del borde como sólido, punteado, amañado, etc. Toma de uno a cuatro valores a la vez. | estilo de borde: valor; |
| Ancho del borde | Establece el ancho del borde del elemento en longitud en px, cm, etc., o como medio delgado y grueso. | ancho del borde: largo |fino |medio |grueso |inicial |heredar |
CSS
<!DOCTYPE html>
<html>
<head>
<title> Border Properties</title>
<style>
#gfg1 {
border: 2px solid blue;
width: 60%;
}
#gfg2 {
border: thick dashed green;
width: 60%;
}
</style>
</head>
<body>
<div id="gfg1">
Demonstration of solid thick border of color blue
</div><br><br>
<div id="gfg2">
Demonstration of dotted 2px width border of color green
</div>
</body>
</html>
Propiedades de clasificación: las propiedades de clasificación de CSS le permiten especificar cómo y dónde se muestra un elemento.
| Propiedad | Descripción | Sintaxis |
| Monitor | La propiedad de visualización define cómo se muestran los elementos en la página web. | pantalla: en línea |bloque |flex |cuadrícula |tabla |grupo |ninguno| heredar; |
| Flotar | Define el flujo de contenido al determinar si un elemento flota hacia la izquierda o hacia la derecha, lo que permite que el texto o la imagen lo rodeen o se muestren en línea. | flotante: ninguno | izquierda| derecha| inicial| heredar; |
| Posición | Especifica el método de posicionamiento de la entidad html en la página web. Coloca un elemento en una posición fija, estática, absoluta, relativa o pegajosa. | posición: fija| estático| absoluto | relativo | pegajoso; |
| Claro | Se utiliza para establecer los lados de un elemento donde no se permiten otros elementos flotantes. | borrar: izquierda | derecha | ambos | ninguna; |
| Visibilidad | Se utiliza para establecer un elemento como visible o no. | visibilidad: visible |oculto | colapsar |inicial |heredar; |
| Cursor | Se utiliza para especificar el tipo o la forma del cursor que se mostrará. | cursor: auto |predeterminado |puntero |cruz |ayuda | e-cambiar tamaño | desplazamiento completo |progreso |inicial |heredar; |
CSS
<!DOCTYPE html>
<html>
<head>
<title>Classification properties</title>
<style>
#geeks1 {
height: 50px;
width: 100px;
background: teal;
display: block;
}
#geeks2 {
height: 50px;
width: 100px;
background: cyan;
display: block;
}
#geeks3 {
height: 50px;
width: 100px;
background: green;
display: block;
}
.pos {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
.clr {
width: 100px;
height: 100px;
background-color: green;
color: white;
font-weight: bold;
font-style: itallic;
font-size: 25px;
text-align: center;
float: left;
padding: 15px;
}
p.GFG {
clear: left;
}
h1,
h2 {
color: green;
text-align: center;
}
.wait {
cursor: wait;
}
</style>
<h3>Classification properties</h3>
</head>
<body>
<p>display Property: block </p>
<div>
<div id="geeks1">Block 1 </div>
<div id="geeks2">Block 2</div>
<div id="geeks3">Block 3</div>
</div>
<br>
<p>Float Property:left</p>
<div style="font-size:20px; color:#006400; float:right;">
Content floats right
</div>
<br>
<p>Position Property:relative</p>
<div class="pos">
This div element has position: relative;
</div><br>
<p>Clear property: left</p>
<div class="clr">
<pre>GFG</pre>
</div>
<p>
GeeksforGeeks:
A computer science portal for geeks
</p>
<p class="GFG">GeeksforGeeks</p>
<br>
<p>Visibility property: visible/ hidden</p>
<div style="visibility: visible;">Content here is visible</div>
<div style="visibility: hidden">Content here is hidden</div>
<br>
<p>Cursor property: wait</p>
<p class="wait">
Mouse over the words to change the mouse cursor.
</p>
</body>
</html>
Funciones CSS: CSS tiene una gama de funciones incorporadas. Estos se utilizan como valor para varias propiedades CSS. Algunas de las funciones CSS también se pueden anidar. Abarca desde funciones de color simples hasta funciones matemáticas, de forma, color, transformación, degradado y animaciones. Algunas de las funciones clave son:
| Función | Descripción | Sintaxis |
| atributo() | La función CSS attr() es una función incorporada en CSS que recupera el valor de un atributo de los elementos seleccionados y lo usa en la hoja de estilo. | atributo( nombre_atributo ); |
| calcular() | La función CSS calc() toma una sola expresión matemática como parámetro y realiza operaciones basadas en la propiedad CSS. Puede ser una combinación de tipos, como longitud, número, ángulo y frecuencia. | calc( Expresión ); |
| máx() | La función CSS max() devuelve el número más grande del conjunto dado de números separados por comas. | max(valor 1, valor2, valor3…) |
| dirección URL() | La función CSS URL() toma una URL de string como parámetro y se usa para cargar imágenes, fuentes y contenido y le permite vincular a un recurso, como una imagen, una fuente web, un filtro, etc. | url( <string> <modificador-url>* ) |
| var() | La función CSS var() se usa para insertar el valor de una propiedad personalizada que es el parámetro requerido y su nombre debe comenzar con dos guiones. | var(propiedad_personalizada, valor) |
CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS functions</title>
<style>
a:before {
content: attr(href) " =>";
}
a {
text-decoration: none;
}
body {
text-align: center;
}
.geeks {
position: absolute;
left: 50px;
width: calc(100% - 20%);
height: calc(100px - 20px);
background-color: green;
text-align: center;
}
.url {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
text-align: center;
}
.gfg1 {
background-color: var(--main-bg-color);
padding: 10px;
}
:root {
--main-bg-color: Green;
}
</style>
</head>
<body>
<p>attribute function</p>
<a href="https://www.geeksforgeeks.org">GeeksforGeeks</a><br><br>
<p>Calc funtion</p>
<div class="geeks">
<h3>The calc() Function</h3>
</div><br><br>
<p>URL function</p>
<div class="url" style="height:200px; width:100%">
<h3>CSS url() function</h3>
</div><br>
<p> var function</p>
<div class="gfg1">demonstration of var function</div><br>
</body>
</html>
Consultas de medios: la consulta de medios de CCS se utiliza para hacer que la página web responda mejor según las diferentes pantallas o tipos de medios. Se puede usar para verificar el ancho y la altura de la ventana gráfica o el dispositivo, la orientación y la resolución del dispositivo de salida. Consiste en un tipo de medio que puede contener una o más expresiones que pueden ser verdaderas o falsas. Las consultas de medios incluyen un bloque de CSS solo si cierta expresión es verdadera.
Sintaxis:
@media not | only mediatype and (expression) {
// Code content
| Tipo de medio | Descripción |
| Todos | Se utiliza para todos los dispositivos multimedia. |
| Impresión | Se utiliza cuando la impresora está en uso. |
| Pantalla | Se utiliza para pantallas de computadora, teléfonos inteligentes, etc. |
| Discurso | Se utiliza para lectores de pantalla que leen la pantalla en voz alta. |
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA