Uma das maneiras mais eficazes de escrever CSS é usar abreviações. O uso de abreviações pode tornar seus arquivos CSS menores e mais legíveis. Compreender as abreviaturas das propriedades CSS também é uma das habilidades básicas dos engenheiros de desenvolvimento front-end. Hoje resumimos sistematicamente as abreviaturas das propriedades CSS.
abreviatura de cor
A abreviatura da cor é a mais simples. Quando o valor da cor estiver em hexadecimal, se o valor de cada cor for igual, pode ser escrito como:
| cor: #113366 |
pode ser abreviado como
| cor: #136 |
Abreviações podem ser usadas sempre que valores de cores hexadecimais são usados, como cor de fundo, cor de borda, sombra de texto, sombra de caixa, etc.
tamanho da caixa
Existem principalmente dois atributos usados aqui: margem e preenchimento. Tomamos margem como exemplo, e o preenchimento é o mesmo. A caixa tem quatro direções, para cima, para baixo, para a esquerda e para a direita, e cada direção tem uma margem:
| margem superior: 1px; margem direita: 1px; margem inferior:1px; margem esquerda: 1px; |
Esses quatro valores podem ser abreviados juntos:
| margem:1px 1px 1px 1px; |
A ordem das abreviações é superior->direita->inferior->esquerda. Sentido horário. Se os lados opostos tiverem o mesmo valor, eles podem ser omitidos:
| margin:1px;//As margens nas quatro direções são iguais, o que equivale a margin:1px 1px 1px 1px; margin:1px 2px;//As margens superior e inferior têm 1px, e as margens esquerda e direita têm 2px, o que equivale a margin:1px 2px 1px 2px margin:1px 2px 3px; //A margem direita e a margem esquerda são iguais, o que equivale a margin:1px 2px 3px 2px; margin:1px 2px 1px 3px;//Observe que embora as margens superior e inferior aqui sejam ambas de 1px, abreviações não podem ser usadas aqui. |
fronteira
Border é um atributo relativamente flexível. Possui três subatributos: largura da borda, estilo da borda e cor da borda.
| largura da borda: número + unidade; estilo de borda: nenhum || tracejado || pontilhado || inserção || cor da borda: cor; |
Pode ser abreviado na ordem de largura, estilo e cor:
| borda:5px sólido #369; |
Às vezes, a borda pode ser escrita de forma mais simples e alguns valores podem ser omitidos, mas preste atenção em quais são necessários. Você também pode testar:
| border:groove red; //Adivinha qual é a largura dessa borda? border:solid; //Como seria isso? borda:5px; //Está tudo bem? border:5px red; //Está tudo bem? ? borda:vermelho; //Está tudo bem? ? ? |
Como você pode ver no código acima, a largura padrão da borda é 3px e a cor padrão é preto – preto. Na abreviatura de border, é obrigatório o estilo border.
Você também pode usar abreviações para cada aresta:
| borda superior:4px sólido #333; borda direita:3px sólido #666; borda inferior:3px sólido #666; borda esquerda: 4px sólido #333; |
Você também pode usar abreviações para cada atributo:
| border-width: 1px 2px 3px; //Podem ser utilizados até quatro valores, as regras de abreviação são semelhantes à abreviação do tamanho da caixa, as mesmas abaixo estilo de borda: ranhura pontilhada sólida e tracejada; cor da borda: vermelho azul branco preto; |
contorno
O contorno é semelhante à borda. A diferença é que a borda afetará o modelo da caixa, mas o contorno não.
| largura do contorno: número + unidade; estilo de contorno: nenhum || pontilhado || ranhura dupla || inserção || cor do contorno: cor; |
Pode ser abreviado como:
| contorno: 1px vermelho sólido; |
Da mesma forma, na abreviatura de contorno, o estilo de contorno também é obrigatório e os outros dois valores são opcionais. O valor padrão é o mesmo que borda.
fundo
Background é uma das abreviaturas mais comumente usadas e contém as seguintes propriedades:
| cor de fundo: cor || #hex || RGB(% || 0-255) || RGBa; imagem de fundo:url(); repetição em segundo plano: repetir || repetir-x || repetir-y || posição de fundo: XY || (topo||fundo||centro) (esquerda||direita||centro); anexo de fundo: rolagem || corrigido; |
A abreviação de background pode melhorar muito a eficiência do CSS:
| background:#fff url(img.png) no-repeat 0 0; |
A abreviatura de background também possui alguns valores padrão:
| background:transparent nenhum repita a rolagem no canto superior esquerdo; |
Os valores das propriedades de fundo não são herdados. Você pode declarar apenas uma delas e o padrão será aplicado aos demais valores.
fonte
A abreviatura da fonte também é a mais utilizada e também uma das formas de escrever CSS eficiente.
fonte contém as seguintes propriedades:
| estilo da fonte: normal || itálico || variante de fonte:normal || peso da fonte: normal || negrito || mais claro || tamanho da fonte: (número+unidade) || (xx-pequeno - xx-grande); altura da linha: normal || (número+unidade); font-family:name,"mais nomes"; |
Cada atributo de fonte também possui um valor padrão. É relativamente importante lembrar estes valores padrão:
| estilo da fonte: normal; variante de fonte:normal; peso da fonte: normal; tamanho da fonte: herdar; altura da linha: normal; família de fontes: herdar; |
Na verdade, a abreviatura da fonte é a que exige mais cautela entre essas abreviações. Uma leve negligência pode causar algumas consequências inesperadas.
Mas aqui vai um pequeno manual, acredito que vai te ajudar a entender melhor a abreviação da fonte:
estilo de lista
Talvez o atributo mais comumente usado nas listas seja:
| estilo de lista: nenhum |
Limpa todos os estilos de lista padrão, como números ou pontos.
list-style também possui três atributos:
| tipo de estilo de lista: nenhum || disco || romano inferior || posição de estilo de lista: dentro || fora || imagem de estilo de lista: (url) || nenhum || |
Os atributos padrão do estilo de lista são os seguintes:
| estilo de lista: disco fora de nenhum |
Deve-se observar que se uma imagem for definida no estilo lista, a prioridade da imagem é maior que a do tipo estilo lista, por exemplo:
| estilo de lista: círculo dentro do URL (../img.gif) |
Neste exemplo, se img.gif existir, o símbolo de círculo definido anteriormente não será exibido.
PS: Na verdade, o tipo de estilo de lista tem muitos estilos úteis. Os alunos interessados podem consultar: https://developer.mozilla.org/en/CSS/list-style-type.
raio da borda (raio do canto)
Border-radius é um atributo recém-adicionado em CSS3, usado para implementar bordas arredondadas. A desvantagem atual deste atributo é que cada navegador o suporta de forma diferente. O IE ainda não o suporta. Gecko (firefox) e webkit (safari/chrome) precisam usar os prefixos privados -moz- e -webkit- respectivamente. O que é ainda mais confuso é que se o atributo border-radius de um único canto for escrito de forma mais diferente entre os dois navegadores, você terá que escrever um grande número de atributos privados:
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; raio inferior esquerdo da borda:6px; raio superior esquerdo da borda:6px; raio superior direito da borda:6px; |
Uh, você já está deslumbrado? Isso serve apenas para atingir a situação em que o canto superior esquerdo não é arredondado e os outros três cantos são arredondados. Portanto, para o raio da borda, Shenfei recomenda fortemente o uso da abreviatura:
| -moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; raio da borda:0 6px 6px; |
Isso é muito mais simples. PS: Infelizmente, o Safari mais recente (4.0.5) ainda não suporta esta abreviatura... (obrigado @fireyy)
Isso é tudo. Existem outros atributos que podem ser abreviados? Todos são bem-vindos para discutir isso juntos.