Taquigrafia CSS

Reconhecer e escrever regras CSS abreviadas

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;
}

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;
}

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;
}

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​

Fonte
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;
}

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-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

Tipos de Seletores CSS – Avançado

VISÃO GERAL DO CSS

Cascading Style Sheets (CSS) ou Folhas de Estilo, foi criada e padronizada no 1996 pela World Wide Web Consortium (W3C). Desde então as folhas de estilo vêm sendo utilizadas para a criação de websites.

1- | O que é CSS? Benefícios de utilização

O CSS é uma folha de estilo utilizada para definir como será a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). Ele define como serão exibidos os elementos contidos no código de uma página da internet. Esses elementos podem ser qualquer coisa: imagem, texto, vídeo, áudio ou qualquer outro elemento criado. 
Grave isso: E o CSS formata a informação.

Por que o CSS foi criado? 

Com os avanços dos recursos de programação,  as páginas da internet precisavam utilizar cada vez mais estilos e variações para deixá-las mais elegantes e chamativa para os futuros usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos também precisou ser aprimorada.

Então foram criadas novas tags e atributos de estilo para o HTML e em resumo ele passou a exercer tanto a função de estruturar o conteúdo quanto de apresentá-lo para o usuário final. Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas. Ou seja, as alterações teriam que ser feitas manualmente, uma por vez.

A partir disto, nasceu o CSS. Inicialmente ele foi criado para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout. Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, permitiu um compartilhamento de formato e reduziu a repetição no conteúdo estrutural de uma página. Com isto, as linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo de uma página enquanto o CSS encarregou-se da aplicação dos estilos necessários para a aparência dela. 

2- | Formas de utilização (externo,embutido,inline)

Há três maneiras de incluir o CSS no HTML são elas: externo, embutido e inline 
sendo cada uma delas utilizadas com objetivos diferentes. Por ter a linguagem em cascata é interpretada pelos navegadores de acordo com a hierarquia, tendo como prioridade o css inline, depois o embutido e por último o externo.
Exemplificando a hierarquia podemos pensar em uma página HTML que aplica um estilo externo cujo todas as tags <h> possuam a cor preta, caso haja a necessidade de uma tag <h> ser destacada na cor vermelha basta adicionar um estilo inline. 

Exemplo:

<h style{ color: #F00;}> Texto na cor vermelhar</h>

Geralmente o Css externo é utilizado para organizar o código HTML quando há um grande número de estilo a ser aplicado ou então quando o mesmo estilo é aplicado em diferentes páginas ao mesmo tempo, reaproveitando a formatação já existente em um arquivo .css. 

No estilo embutido todos os códigos em css se encontram dentro da tag <style> no qual o estilo será aplicado somente na página que foi definido.

Exemplos:

1-

<html>

<head>

<!--tag de css externo na página -->
<link rel="stylesheet" type="text/css" href="nomedoc.css" /> </head> <body> </body></html>

_________________________________________________________________

2-
<html>

    <head>
   <!-- O css embutido deve ser adicionado depois dessa tag -->
<style TYPE="text/css">
   h1{
                 color: "0FF"
                 font-family: arial;
        }
        </style>
    </head>
    <body>
   <!-- aplicar o css embutido no elemento h1 -->
    <h1> CSS embutido </h1>
    </body>
</html>

_________________________________________________________________

3-

<html>
    <head>
    </head>
    <body>
    <!-- Aplicar o css inline -->
     <p style="background: red; color: green;"> CSS inline </p>
    </body>
</html>

_________________________________________________________________

3- | Tipos de Seletores(elemento HTML, Id ou Classe)


O que é um seletor?

O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar 
quais elementos de um grupo de elementos serão formatados.
Os tipos de seletores presentes no css são: elemento HTML, id ou classe. Para estilizar elementos HTML basta colocar a tag do elemento e entre {  } e as propriedades com seus respetivos valores.

 No caso por id, a regra css é criada com “#” e o nome do id. Para aplicação desse estilo em uma tag HMTL basta adicionar um id a ela. Sendo nome dado deverá ser o mesmo nome da regra CSS. Existe também a estilização por classe, onde a regra css é definida com “.” e o nome da classe. Quando necessitar utiliza-la adicionar a propriedade “classe” com o valor seguindo o nome da classe. 

4. 4- | Sintaxe:

• Comentário: A sintaxe utilizada para comentar uma linha ou um bloco de linhas em css é /* */.

•  Regras CSS: Uma regra css é formada por um seletor contento uma propriedade e valor. O seletor é um elemento, classe, id para o qual será aplicado o estilo. A propriedade é o atributo para qual será aplicada a regra e por fim o valor é a característica específica que será atribuída ao atributo do seletor. Um arquivo com várias regras css forma uma folha de estilo.

5- | Unidades:

      São dois os tipos de unidade de medida de comprimento CSS:

 

• Relativas (px, em, ex)
  
  

A unidade relativa é definida perante a uma outra medida, ou seja, a medida é dada relativamente de um elemento que já existe. 

Os tipos de medidas são:

px:   É o tamanho em pixel.

em: É o tamanho relativo a fonte utilizada no elemento ao qual esta inserido.

ex:   É corresponde a altura da fonte ‘x’.

• Absolutas (in, cm, mm, pt, pc)
  
  

A unidade absoluta é aquela definida em relação a tela, independente do formato de saída.

Os tipos de medidas absolutas são:

in: polegadas

cm: centímetros

mm: milímetros

pt: pontos

pc: picas (1pica = 12 pontos).

Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS:

div { margin: 1.5em; }

h4 { margin: 2ex; }

p { font-size: 14px; }

.classe { padding: 90%; }

hr { width: 14pt; }

h1 { margin: 1pc; }

h2 { font-size: 4mm; }

p.classe { padding: 0.3cm; }

h5.classe { padding: 0.5in; }

• Porcentagem
  
  

A porcentagem é uma unidade de medida que é ajustada de acordo com o tamanho da página/ tela / bloco.