Taquigrafia ou estenografia, vem do grego taqui= rápido + grafia = escrita, é um termo geral que define todo método abreviado ou simbólico de escrita, com o objetivo de melhorar a velocidade da escrita, deixar o css mais limpo, o que facilitará na manutenção, e para o uso na Web melhora o carregamento da página. Uma propriedade CSS abreviada ou do inglês CSS Shortand property, é uma propriedade de estilo CSS que combina várias propriedades em uma só.
Aplicar técnicas de regras CSS abreviadas para:
Fundo
A regra a seguir define valores para propriedades background de uma div:
div {
background-color:#ffc
background-image:url(fundo.gif);
background-repeat:no-repeat;
background-attachment:fixed;
.background-position:20px 10px;
}
div {
background:#ffc url(fundo.gif) no-repeat fixed 20px 10px;
}
Borda
A regra a seguir define valores para propriedades de borda:
div {
border-width:1px;
border-style:solid;
4.border-color:#f00;
}
border-width:1px;
border-style:solid;
4.border-color:#f00;
}
E pode ser abreviada para:
div {
border:1px solid #f00;
}
A regra a seguir define valores para espessuras de borda:
p {
border-top-width:2px;
border-right-width:1px;
border-bottom-width:3px;
border-left-width:5px;
}
E pode ser abreviada para:
p {
border-width:2px 1px 3px 5px;
}
A regra a seguir define valores para cores de borda:
h1 {
border-top-color:#f00;
border-right-color:#ccc;
border-bottom-color:#00f;
border-left-color:#999;
}
border-right-color:#ccc;
border-bottom-color:#00f;
border-left-color:#999;
}
E pode ser abreviada para:
p {
border-color:#f00 #ccc #00f #999;
}
A regra a seguir define valores para estilos de borda:
p {
border-top-style:solid;
border-right-style:ridge;
border-bottom-style:double;
border-left-style:dotted;
}
border-left-style:dotted;
}
E pode ser abreviada para:
p {
border-style:solid ridge double dotted;
}
Cor
A regra define o uso da propriedade de cor RGB, se da por #rrggbb
A chamada:
color: #AABBCC;
Com o uso taquigráfico:
color: #ABC;Nesse exemplo usamos os índices repetidos por apenas 1 o AA virou A o BB -> B o CC -> C
color: #AABBCC;
Com o uso taquigráfico:
color: #ABC;Nesse exemplo usamos os índices repetidos por apenas 1 o AA virou A o BB -> B o CC -> C
Fonte
A regra a seguir define valores para propriedades de font em um documento:
A regra a seguir define valores para propriedades de font em um documento:
body {
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:11px;
line-height:15px;
font-family:Arial, Helvetica, Sans-serif;
}
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:11px;
line-height:15px;
font-family:Arial, Helvetica, Sans-serif;
}
E pode ser abreviada para:
body {
font:italic small-caps bold 11px/15px Arial, Helvetica, Sans-serif;
}
Nota: Para abreviar a propriedade font é obrigatório definir no mínimo os valores de tamanho e família da font.Os demais valores são facultativos. A ordem de declaração dos valores é importante e deve ser assim:
1. começar com font-style, font-variant e font-weight sendo que estes três valores são facultativos e podem ser escritos em qualquer ordem;
2. a seguir declarar obrigatoriamente font-size e opcionalmente line-height (font-size/line-height);
3. finalmente declarar obrigatoriamente font-family.
Margem
A regra a seguir define valores para as 4 margens para uma div:
div {
margin-top:10px;
margin-right:8px;
margin-bottom:0;
margin-left:5px;
}
E pode ser abreviada para:
div {
margin:10px 8px 0 5px;
}
Padding
A regra a seguir define valores para os 4 paddings de um parágrafo:
p {
padding-bottom:6px;
padding-top:12px;
padding-left:1px;
padding-top:12px;
padding-left:1px;
padding-right:2px;
}
}
E pode ser abreviada para:
div {
padding:12px 2px 6px 1px;
}
Referências:
http://www.taquigrafos.com.br/index.php/curiosidades/113-o-que-%C3%A9-taquigrafia-e-um-r%C3%A1pido-hist%C3%B3rico.html
http://maujor.com/tutorial/abreviacss.php
div {
padding:12px 2px 6px 1px;
}
Referências:
http://www.taquigrafos.com.br/index.php/curiosidades/113-o-que-%C3%A9-taquigrafia-e-um-r%C3%A1pido-hist%C3%B3rico.html
http://maujor.com/tutorial/abreviacss.php
Inclua a referência
ResponderExcluir