Esboço do CSS explicado

O esboço do CSS contém um conjunto de propriedades para personalizar as cores, estilos, deslocamento e largura do esboço. As propriedades de cor de contorno, largura de esboço, estilo de esboço e deslocamento de esboço de esboço CSS auxiliam na personalização do esboço. Além disso, a propriedade CSS contorna abreviagem fornece a mesma funcionalidade em uma sintaxe de linha única. Este artigo fornece o guia detalhado sobre propriedades de esboço do CSS e serviria aos seguintes resultados de aprendizado:

• Trabalho de propriedades de esboço CSS
• Uso do esboço do CSS (com exemplos)

Como funciona o esboço do CSS

As propriedades de esboço do CSS tendem a realizar várias personalizações de esboço. Esta seção fornece a sintaxe e o funcionamento recomendados de todas as propriedades de esboço do CSS.

Contorno CSS (estilo): A sintaxe fornecida abaixo auxilia na alteração do estilo de esboço.

• Seletor: O seletor é um elemento ou a classe CSS na qual a propriedade seria aplicada
• valor: O valor do estilo pode ser pontilhado, tracejado, duplo, sólido, ranhura, oculto, nenhum e mais.

Contorno CSS (largura): A largura do contorno pode ser definida usando a propriedade de largura de contorno do CSS e pode ser usada da seguinte maneira.

valor: aceita poucos valores predefinidos, como fino, médio e grosso. O peso da linha para grosso é de 1 px, pois o meio é de 3px e para espessura é 5px (todos esses são valores aproximados). Além disso, o usuário também pode especificar seu valor em px, em, cm, mm.

Contorno CSS (cor): A cor do contorno é definida usando a sintaxe.

valor: Este valor de cor pode ser fornecido de várias maneiras. O nome exato (como vermelho, azul) da cor pode ser usado, o valor hexadecimal da cor, o padrão RGB/RGBA, invertido (para tornar o esboço visível, independentemente da cor do fundo) e HSL.

Contorno CSS (deslocamento): Geralmente, o esboço começa logo após a fronteira, no entanto, a propriedade offset pode ser usada para adicionar espaço entre o contorno e a borda de um elemento. A sintaxe da propriedade Offset é:

valor: Ele aceita os valores PX, EM, REM, CM, MM. O PX é uma medida estática, enquanto as medidas REM e EM respondem à medida que dependem dos valores dos pais.

Propriedade abreviada do esboço do CSS: A propriedade de abreviação de contorno CSS permite adicionar largura, cor e estilo a um contorno do elemento usando um código único. Os seguintes artigos se referem à propriedade abreviada:

O valor1, value2 e value3 relacionam -se a valores de largura, estilo e cores do esboço de um elemento.

Como usar o esboço do CSS

Esta seção ilustra vários exemplos que apresentam o uso da largura de esboço do CSS, o estilo de esboço, a cor de contorno, o deslocamento de esboço e a propriedade abreviada de esboço.

Exemplo 1: Usando a largura de contorno, o estilo de contorno, a cor de contorno e o deslocamento de contorno

Este exemplo demonstra as propriedades de esboço do CSS individualmente usando o código mostrado abaixo.

Color-vermelho, largura e deslocamento em px, com estilo de estilo

Color-rgb, largura e deslocamento em %, estilo sólido

color-hex, largura e deslocamento em EM, duplo de estilo

A descrição do código é fornecida abaixo:

• Três classes CSS são criadas denominadas "Sty", "Stya" e "Styb". Cada classe é definida para usar propriedades de esboço com várias unidades de medição ou valores suportados por eles.
• A classe “STY” usa o vermelho como cor, largura e deslocamento é definido em PX, onde o estilo de contorno é tracejado
• O "stya" usa cor RGB, largura e deslocamento em mm, e o estilo é sólido
• O "styb" usa o valor hexadecimal de cor, largura e deslocamento em EM e o estilo é pontilhado
• Os parágrafos deste documento são estilizados em "Groove" com cor "preta" e fundo de margem de "25px".

A imagem do código é mostrada abaixo:

Saída:

A saída contém três parágrafos, o primeiro usa a classe "STY", onde o segundo e o terceiro fazem uso de classes "Stya" e "Styb".

Exemplo 2: Usando a propriedade de abreviação de contorno CSS

A propriedade de abreviação de esboço do CSS permite implementar a largura, a cor e o estilo do esboço em uma única linha. O código fornecido abaixo pratica a propriedade abreviada do esboço:

largura-médio, duplo de estilo, verde-cor verde

largura-4px, sólido, azul colorido

Largura-fingida, groove de estilo

pontilhado em estilo

largura-médio, cor-laranja

A descrição do código é

• Em primeiro lugar, poucos estilos de parágrafos são definidos
• Inicializou cinco classes CSS denominadas "Outta", "outb", "Outc", "Out" e "OUre" para propriedade de contorno abreviação
• As classes "outha" e "outb" usam a propriedade abreviada para definir "largura", "estilo" e "cor" do esboço
• As classes "Outc" e "Outre" altera duas propriedades, enquanto "Out" personaliza o estilo

Saída:

A saída acima mostra que, se o estilo da propriedade abreviada de contorno não for considerada, você não poderá obter o esboço.

Conclusão

O esboço do CSS permite alterar a cor, a largura, o estilo e o valor de deslocamento do esboço. Este artigo fornece as possíveis maneiras de exercer propriedades de esboço do CSS para modificar o esboço. Propriedades de contorno, linear, em estilo de esboço, estilo de esboço e de esboço do esboço do css. Além disso, o css contorno abreviado de propriedade auxilia na alteração da cor, largura e estilo usando um código de linha única. Para melhor subestimar, este post fornece o mecanismo de trabalho usando a sintaxe. Você também receberia o conjunto de exemplos que mostram a implementação de todas essas propriedades individualmente e de esboço também.