Taquigrafia
Taquigrafia CSS (Cascading Style Sheets) é quando você escreve propriedades de formatação de forma abreviada (Notação Taquigráfica) o que facilita na edição e diminui o espaço utilizado tornando a folha de Style mais limpa. Inserindo os valores de propriedades semelhantes em apenas uma como nas técnicas apresentadas abaixo, onde ao invés de usar uma propriedade para cor, outra para espessura e outra para forma descrevemos todos esses valores em apenas uma propriedade, porém com os valores agrupados.1.1 Técnicas abreviadas para fundo:
Exemplo:
Com notação taquigráfica ficaria conforme abaixo:
Sem notação taquigráfica ficaria conforme abaixo:
1.2 Técnicas abreviadas para propriedades de fronteira;
Vale lembrar que para bordas, temos a possibilidades de utilizar também as seguintes notações taquigráficas para especificar os valores de espessura, cor e estilo:
- border-top para as propriedades: border-top-width; border-top-color e border-top-style.
- border-bottom para as propriedades: border-bottom-width; border-bottom-color e border-bottom-style.
- border-left para as propriedades: border-left-width; border-left-color e border-left-style.
- border-right para as propriedades: border-right-width; border-right-color e border-right-style.
- border para as propriedades: border-width; border-color e border-style.
Exemplo:
Com notação taquigráfica ficaria conforme abaixo:
Sem notação taquigráfica ficaria conforme abaixo:
1.3 Técnicas abreviadas para cor;
Nas folhas de estilos CSS utilizamos a forma hexadecimal para especificar as cores. São iniciadas por # exemplo: #rrggbb é o mesmo que escrevermos #rgb.
Onde R é Red, G é Green e B é Blue representados por 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Quando temos #00ff00 (uma tonalidade de verde), podemos reproduzi-la de forma taquigráfica, por os valores de R repetem, os valores de G repetem e os valores de B também, portanto a forma taquigráfica para esta cor pode ser #0f0. Não somente para esta cor em específico, mas também para qualquer outra forma em que cada um dos valores de Red, Green e Blue são repetidos dentro de cada um.
Exemplo:
Com notação taquigráfica ficaria conforme abaixo:
Sem notação taquigráfica ficaria conforme abaixo:
1.4 Técnicas abreviadas para fonte;
Exemplo:
Com notação taquigráfica ficaria conforme abaixo:
Sem notação taquigráfica ficaria conforme abaixo:
1.5 Técnicas abreviadas para margem;
Vale lembrar que para a propriedade de margem, padding e também para algumas propriedades de borda, podemos inserir os valores de modo a especificar a qual parte devem alterar, exemplo:
- margin: 10px; para inserir margem de 10px a todos os lados do elemento.
- margin: 10px 5px; para inserir 10px de margem a parte superior e inferior do elemento 5px de margem a parte esquerda e direita do elemento.
- margin: 10px 5px 2px; para inserir 10px de margem á parte superior, 5px de margem á parte direita, 2px para á parte inferior e 5px de margem para a parte esquerda do elemento.
- margin: 10px 5px 2px 1px; para inserir 10px de margem á parte superior, 5px de margem á parte direita, 2px para á parte inferior e 1px de margem para á parte esquerda do elemento.
Exemplo:
Com notação taquigráfica ficaria conforme abaixo:
Sem notação taquigráfica ficaria conforme abaixo:
1.6 Técnicas abreviadas para padding.
Exemplo:
Com notação taquigráfica ficaria conforme abaixo:
Sem notação taquigráfica ficaria conforme abaixo:
Página:
Marcação:
