O uso da taquigrafia no CSS é uma forma de reduzir seu CSS tornando ele mais limpo com poucas linhas facilitando sua manutenção, o que acaba melhorando o carregamento da página.
Técnicas abreviadas para fundo
Quando se usa um comando qualquer no CSS, em vez de criar varias linhas de códigos você pode reduzi-lo a uma linha só como no exemplo:
background-color: #FFF;
background-image: url(foto.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
Você pode reduzi-lo a uma unica linha como a seguir:
background: #FFF url(foto.png) no-repeat center fixed;
Técnicas abreviadas para propriedades de fronteira
A dois jeito de uso de taquigrafia em bordas, colocando tudo numa linha, ou quando se tem topo,direita,baixo e esquerda, você usa a técnica do relógio, escrevendo sempre na mesma ordem e valores, como nos exemplos:
border-width: 12px;
border-style: none;
border-color: #F0F;
Na mesma linha:
border: 12px none #F0F;
border-top-width:12px;
border-right-width:10px;
border-bottom-width:5px;
border-left-width:8px;
No relógio:
border-width: 12px 10px 5px 8px;
Técnicas abreviadas para cor
Quando se especifica valores de cor hexadecimais, pode ser usado atalhos, mais apenas se ambos os valores hexadecimais forem os mesmo para cada canal de cor, por exemplo:
#FFF; seria equivalente a #FFFFFF;
ou
#F0F; seria equivalente a #FF00FF;
Técnicas abreviadas para fonte
Usando a taquigrafia em font, você pode especificar tamanho, peso, estilo, família e altura usando uma unica linha, porem é obrigatório definir tamanho e família e seguir uma ordem de declaração, começa com style, variant e weight em qualquer ordem, obrigatoriamente coloca-se o font-size, o line-height é opcional, font-family no final é obrigatório, como veremos no exemplo:
font-weight: ligther;
font-style: normal;
font-variant: small-caps;
font-size: 11px;
line-height: 120px;
font-family: Georgia, "Times New Roman", serif;
font: ligther normal small-caps 11px/120px Georgia, "Times New Roman", serif;
Técnicas abreviadas para margem
Usando a taquigrafia em margem usa-se a técnica do relógio, exemplo:
margin-top: 9px;
margin-right: 6px;
margin-bottom: 0;
margin-left: 4px;
margin: 9px 6px 0 4px;
Técnicas abreviadas para padding
Usando a taquigrafia em padding tambem se usa a técnica do relogio, exemplo:
padding-bottom: 10px;
padding-top: 11px;
padding-left: 3px;
padding-right: 4px;
padding: 10px 11px 3px 4px;
Nenhum comentário: