Esquema de CSS explicado
El esquema de CSS contiene un conjunto de propiedades para personalizar los colores, los estilos, el desplazamiento y el ancho del contorno. El color de esquema, el ancho de esquema, el estilo de esquema y las propiedades de compensación de contorno de la asistencia de esquema CSS para personalizar el esquema. Además de estos, la propiedad de la taquigrafía CSS Outline proporciona la misma funcionalidad en una sola línea de sintaxis. Este artículo proporciona la guía detallada sobre las propiedades de esquema de CSS y serviría a los siguientes resultados de aprendizaje:
- Trabajo de propiedades de esquema de CSS
- Uso del esquema CSS (con ejemplos)
Cómo funciona el esquema de CSS
Las propiedades de esquema de CSS tienden a realizar varias personalizaciones de esquema. Esta sección proporciona la sintaxis recomendada y el funcionamiento de todas las propiedades de esquema de CSS.
Esquema de CSS (estilo): La sintaxis que se proporciona a continuación ayuda a cambiar el estilo de esquema.
Selector estilo de esquema: valor;- selector: El selector es un elemento o la clase CSS en la que se aplicaría la propiedad
- valor: El valor del estilo puede ser salpicado, discontinuo, doble, sólido, surco, oculto, ninguno y más.
Esquema de CSS (ancho): El ancho del esquema se puede establecer utilizando la propiedad de ancho de esquema de CSS y se puede usar de la siguiente manera.
Selector Worthine-Width: Value;valor: acepta pocos valores predefinidos como delgados, medianos y gruesos. El peso de la línea para grueso es 1px, para el medio es 3px y para grueso es 5px (todos estos son valores aproximados). Además, el usuario también puede especificar su valor en PX, EM, CM, MM.
Esquema de CSS (color): El color del contorno se define utilizando la sintaxis.
Selector Outline-Color: Value;valor: Este valor de color se puede proporcionar de numerosas maneras. El nombre exacto (como el rojo, el azul) del color se puede usar, el valor hexadecimal del color, el patrón RGB/RGBA, invertir (para hacer que el contorno sea visible independientemente del color de fondo) y HSL.
Esquema de CSS (desplazamiento): Por lo general, el contorno comienza poco después del borde, sin embargo, la propiedad de compensación se puede usar para agregar espacio entre el contorno y el borde de un elemento. La sintaxis de la propiedad de compensación es:
Selector Outline-ofset: value;valor: Acepta los valores PX, EM, REM, CM, MM. El PX es una medida estática, mientras que las medidas REM y EM responden ya que dependen de sus valores principales.
Propiedad de taquigrafía CSS Butline: La propiedad de la taquigrafía CSS Outline permite agregar ancho, color y estilo a un esquema del elemento utilizando un código de línea único. Los siguientes artículos se refieren a la propiedad abreviada:
Selector esquema: value1 value2 value3;El valor1, el valor2 y el valor3 se relacionan con el ancho, el estilo y los valores de color del contorno de un elemento.
Cómo usar el esquema CSS
Esta sección ilustra varios ejemplos que presentan el uso de propiedades de esquema CSS, estilo de esquema, color de esquema, compensación de esquema y propiedad abreviada.
Ejemplo 1: Uso de ancho de contorno, estilo de esquema, color de esquema y compensación de contorno
Este ejemplo demuestra las propiedades de esquema de CSS individualmente utilizando el código que se muestra a continuación.
rojo color, ancho y desplazamiento en PX, con un estilo de estilo
color-rgb, ancho y compensación en %, sólido de estilo
color-hex, ancho y compensación en EM, estilo-doble
La descripción del código se proporciona a continuación:
- Se crean tres clases de CSS llamada "Sty", "Stya" y "Styb". Cada clase se define para usar propiedades de esquema con varias unidades o valores de medición compatibles con ellos.
- La clase "sty" usa el color rojo como color, ancho y desplazamiento se define en PX donde se discute el estilo de contorno
- El "stya" usa color rgb, ancho y desplazamiento en mm, y el estilo es sólido
- El "STYB" usa el valor hexadecimal de color, ancho y desplazamiento en EM y el estilo está punteado
- Los párrafos de este documento están diseñados en "Groove" con color "negro" y fondo de margen de "25px".
La imagen del código se muestra a continuación:
Producción:
La salida contiene tres párrafos, el primero usa la clase "Sty", donde la segunda y la tercera utilizan las clases de "Stya" y "Styb".
Ejemplo 2: Uso de la propiedad de taquigrafía de Outline CSS
La propiedad abreviada de CSS Outline le permite implementar el ancho, el color y el estilo del contorno en una sola línea. El código proporcionado a continuación practica la propiedad de la taquigrafía de esquema:
ancho-medio, estilo-doble, color verde color
Ancho-4px, estilo sólido, color azul
ancho delgado, ranura de estilo
punto de punto
ancho medio, color-naranja
La descripción del código es
- En primer lugar, se definen pocos estilos de párrafo
- Inicializó cinco clases de CSS llamadas "OUTA", "Outb", "Outc", "Outsut" y "Outse" para la propiedad de la taquigrafía de Outline
- Las clases "Outa" y "outb" usan la propiedad abreviada para establecer "ancho", "estilo" y "color" del esquema
- Las clases "outc" y "oute" alteran dos propiedades, mientras que "out" personaliza el estilo
Producción:
La salida anterior muestra que si no se considera el estilo de la propiedad de la taquigrafía de contorno, no podrá obtener el esquema.
Conclusión
El esquema de CSS permite alterar el color, el ancho, el estilo y el valor de compensación del esquema. Este artículo proporciona las posibles formas de ejercer las propiedades de esquema de CSS para modificar el esquema. Las propiedades de color de esquema, ancho de esquema, estilo de esquema y de compensación de contorno de CSS Outline asisten a personalizar el contorno. Además, la propiedad de la taquigrafía de CSS Butline ayuda a cambiar el color, el ancho y el estilo utilizando un código de línea único. Para entender mejor, esta publicación proporciona el mecanismo de trabajo utilizando la sintaxis. También obtendría el conjunto de ejemplos que muestran la implementación de todas estas propiedades individualmente y de brote-mortaja también.