Conectar-se

Esqueci minha senha

Últimos assuntos
» O codigo para assistir futebol ao vivo
Sex Fev 27, 2015 11:39 pm por nicolasmendes

» Site só de Pulblicidade
Sab Ago 18, 2012 3:13 pm por streamjei

» Código para configurar botão de fechar!
Sab Ago 18, 2012 12:04 pm por Pika_mestre

» Novo Tipo de Portal
Qua Mar 21, 2012 10:21 am por OrigamiLouco

» (TUTORIAL) Como adicionar um livro de visitas para o seu site!!
Seg Mar 19, 2012 8:24 pm por Admin

» (TUTORIAL) Como criar um formulário de contato!!
Seg Mar 19, 2012 8:08 pm por Admin

» (TUTORIAL) Adicionar twitter!!
Seg Mar 19, 2012 7:45 pm por Admin

» Regras para postar os sites!!
Seg Mar 19, 2012 9:14 am por Admin

» Faça downloads mais rapidos e em links diretos não espere para baixar!
Seg Mar 19, 2012 8:55 am por Admin

Flux RSS


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Os membros mais ativos do mês

Mundo da Comédia

Sex Fev 24, 2012 2:27 pm por mundo-da-comedia

Quer rir um pouco?
Entao entre http://www.mundodacomedia.com
Onde vc encontra tirinhas piadas imagens e videos engraçadas e muito mais
Aproveitem

Comentários: 0

Conheça Cuba

Ter Jan 31, 2012 5:19 am por Arfisil

Venha conhecer Cuba Espero que gostem




aqui


http://www.box.com/s/zt8ssxzuvxfob7p3uqxb

Comentários: 0

Boas Vindas

Dom Jan 22, 2012 2:30 pm por OrigamiLouco

Olá,

Seja muito bem vindo(a) ao nosso fórum, Aproveite e chame seus amigos , se eles estiverem com duvidas em relação a sites ou blogs , aqui é o lugar certo para ele(a), aqui ele(a) pode tirar a Duvida na mesma hora pois todas as duvidas são respondidas no mesmo dia!


Muito Obrigado Por sua atenção e até Breve!


Comentários: 0

Apresentações importantes

Sab Jan 21, 2012 3:25 pm por Buscaweb

Olá pessoal,

Sou o "Buscaweb", dono do website:http://buscaweb.k6.com.br e venho para ajuda-los!
Qualquer dúvida estarei aqui!
Lembro que devemos tomar cuidado com a lei anti-pirataria dos Estados Unidos da América e remover conteúdo copiado dos nossos sites.

Abraço a todos, Very Happy

Comentários: 0

Vila do Carregado

Sex Jan 20, 2012 8:41 am por Arfisil



Comentários: 1

Minha apresentação

Qua Jan 18, 2012 6:37 pm por Arfisil

Olá chamo-me Arlindo e venho fazer a minha apresentação espero divertir-me neste forum, e logo abaixo o video dos monumentos de Portugual,vejam:

Comentários: 1

Os membros mais ativos da semana

Social bookmarking

Social bookmarking digg  Social bookmarking delicious  Social bookmarking reddit  Social bookmarking stumbleupon  Social bookmarking slashdot  Social bookmarking yahoo  Social bookmarking google  Social bookmarking blogmarks  Social bookmarking live      

Conservar e compartilhar o endereço de Dicas para site ou Blog! em seu site de social bookmarking

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 12 em Sex Nov 09, 2018 11:36 pm
Janeiro 2019
DomSegTerQuaQuiSexSab
  12345
6789101112
13141516171819
20212223242526
2728293031  

Calendário Calendário

Parceiros
Fórum grátis

Tópicos similares

Abreviando Declarações CSS!

Ir em baixo

Abreviando Declarações CSS!

Mensagem  Admin em Sab Jan 14, 2012 10:59 am

Relembrando a sintaxe e a terminologia de uma regra CSS.

É comum encontrar-se em muitos artigos sobre CSS escritos em blogs e sites, em textos de posts em fóruns, em listas de discussão e até mesmo em revistas e jornais, diferentes referências e denominações equivocadas para os componentes de uma regra CSS

Seletores são chamados de elementos ou de tags, propriedades são chamadas de seletores ou de atributos, valores são chamados de atributos ou de propriedades, declarações são chamadas de regras ou funções CSS e por aí vai em uma diversificada combinação dos termos acima citados em uma salada que acaba por confundir iniciantes e as vezes até mesmo outros já com alguma experiência com folhas de estilo em cascata.

Com a finalidade de facilitar o entendimento desta matéria e esclarecer a confusão que vem se formando em torno do assunto, vamos rever a sintaxe e a terminologia de uma regra CSS para que quando eu escrever seletor, declaração, propriedade e valor, não haja dúvidas sobre a porção da regra CSS a que estou me referindo e você não fique se perguntando onde estão os "atributos CSS, as tags CSS, e outros tantos termos equivocados".

Vejamos o que diz as Recomendações do W3C para Folhas de Estilo, nível 1 na seção intitulada Conceitos Básicos

“O projeto, ou desenho do layout, das folhas de estilos é fácil. É preciso apenas conhecer um pouco da linguagem HTML e possuir noções básicas dos termos usados em publicação eletrônica. Como exemplo, para ajustar a cor das letras de um elemento 'h1' para azul, basta fazer:

h1 {color: blue}

Este exemplo mostra o que é uma 'regra' simples em CSS. Uma regra é composta de duas partes principais: um selector ('h1') e uma declaração ('color: blue'). Por sua vez, a declaração também possui duas partes: uma propriedade ('color') e seu valor ('blue'). Embora este exemplo especifique apenas uma das várias propriedades necessárias para montar um documento HTML, ela constitui por si só uma 'folha de estilo'. Quando for combinada com outras folhas de estilo ela determinará a apresentação final do documento (uma característica fundamental é que as folhas de estilo podem ser combinadas).

O seletor funciona como a ponte de ligação entre o documento HTML e a folha de estilo, e todos os elementos HTML podem funcionar como possíveis seletores. Os vários elementos HTML estão definidos na Recomendação HTML continua...

A Recomendação do W3C define claramente que uma regra CSS é composta de um seletor e uma declaração e que a declaração compreende uma propriedade e um valor.

Na regra CSS a seguir:

h1 {color: blue}

a terminologia correta é:

h1 - seletor;
{color: blue} - declaração;
color - propriedade;
blue - valor.

e a sintaxe correta é:

Escrever o seletor e a seguir a declaração;
A declaração deve estar entre { } (chaves);
Na declaração, separar a propriedade e o valor por : (dois pontos);
É permitido usar espaços em branco em qualquer quantidade entre cada um dos caracteres da regra;
É permitido agrupar declarações em uma mesma regra e neste caso as declarações deverão ser separadas por ; (ponto-e-vírgula) podendo todas elas estar em uma mesma linha ou em linhas distintas. É facultativo o uso de ; (ponto-e-vírgula) após a última declaração na regra;
É indiferente o uso de maiúsculas e minúsculas em uma regra CSS, contudo as classes e ID's devem seguir a mesma grafia constante da marcação.

Estes são os termos normatizados de uma regra CSS e os que usaremos. Portanto, não existe "atributo CSS" ou "tag CSS" ou "elemento CSS" ou "função CSS" ou tantos outros equivocadamente escritos.

Não é do escopo deste tutorial detalhar as boas práticas de escrita das regras em uma folha de estilos.
Sobre este assunto escrevi e recomendo a leitura do tutorial Dicas básicas para projetar folhas de estilos.

Abreviando valores de cores hexadecimais.

O formato hexadecimal é uma das opções sintáticas mais usadas para se escrever o valor das cores em regras CSS. A regra a seguir define que os parágrafos serão na cor vermelha (#ff0000).

p {color: #ff0000;}

e que poderá ser abreviada para:

p {color: #f00;}

É válido abreviar cores hexadecimais para 3 dígitos. Valores escritos com 3 dígitos são interpretados como se cada um dos dígitos tivesse sido sido declarado duas vezes, isto é:

genericamente, #abc é equivalente #aabbcc

Exemplos:
view source
print?
1.#c30 = #cc3300
2.#999 = #999999
3.#ff0 = #ffff00
4.#d61 = #dd6611

É fácil concluir que a abreviação de cores hexadecimais somente é possível para as cores constituidas por 3 pares de dígitos hexadecimais. Cores assim constituidas são chamadas de "web safe colors", que em tradução livre significa "cores seguras para web". Trata-se de um legado do passado quando os computadores eram capazes de processar e apresentar somente um número limitado de cores.

Estilização dos quatro lados de um elemento nível de bloco.

Um elemento nível de bloco ou uma 'caixa' admite estilização em seus quatro lados para algumas propriedades como border e padding entre outras.
Por exemplo: você pode definir um padding superior, um padding à direita, um padding inferior e um padding à esquerda para uma div.

A sequência em que você escreve os valores para estilizar os quatro lados de uma 'caixa' é rígida e fixa em uma regra CSS e obedece a seguinte ordem:

em cima , lado direito, embaixo, lado esquerdo

Faça uma analogia com o relógio para não esquecer a sequência.
12 horas (superior), 3 horas (direita), 6 horas (inferior), 9 horas (esquerda).

A regra CSS div {padding: 2px 3px 8px 7px;} define para a div:
um padding inferior igual a 8px:
um padding superior igual a 2px;
um padding à esquerda igual a 7px:
um padding à direita igual a 3px.

Além da mostrada acima é válido abreviar declarações que envolvem os quatros lados de uma 'caixa' de outras 3 maneiras diferentes como mostradas a seguir:

div {padding: 10px;} padding de 10px para os 4 lados;
div {padding: 6px 8px;} padding de 6px para os lados superior e inferior e de 8px para os lados direito e esquedo;
div {padding: 2px 4px 9px;} padding de 2px para o lado superior, de 4px para os lados direito e esquerdo e de 9px para o lado inferior.

Propriedades que admitem abreviação.

Veremos ao longo deste tutorial, como abreviar as seguintes propriedades CSS:

margin;
padding;
background;
font;
list;
outline;
border.

Abreviando margin.

A regra a seguir define valores para as 4 margens para uma div:
view source
print?
1.div {
2.margin-top:10px;
3.margin-right:8px;
4.margin-bottom:0;
5.margin-left:5px;
6.}

E pode ser abreviada para:
view source
print?
1.div {
2.margin:10px 8px 0 5px;
3.}

Qualquer declaração de medida CSS igual a ZERO não deve ser seguida de unidade. Não se escreve 0 metros, 0 kilos, 0 litros, 0 pixel, 0 cm3, pois ZERO é ZERO e não precisa ser expresso por uma unidade de medida. Portanto escreva: margin: 0 e não margin: 0px.

Abreviando padding.

A regra a seguir define valores para os 4 paddings de um parágrafo:
view source
print?
1.p {
2.padding-bottom:6px;
3.padding-top:12px;
4.padding-left:1px;
5.padding-right:2px;
6.}

E pode ser abreviada para:
view source
print?
1.div {
2.padding:12px 2px 6px 1px;
3.}

Abreviando background.


A regra a seguir define valores para propriedades background de uma div:
view source
print?
1.div {
2.background-color:#ffc
3.background-image:url(fundo.gif);
4.background-repeat:no-repeat;
5.background-attachment:fixed;
6.background-position:20px 10px;
7.}

E pode ser abreviada para:
view source
print?
1.div {
2.background:#ffc url(fundo.gif) no-repeat fixed 20px 10px;
3.}

Abreviando font.

A regra a seguir define valores para propriedades de font em um documento:
view source
print?
1.body {
2.font-style:italic;
3.font-variant:small-caps;
4.font-weight:bold;
5.font-size:11px;
6.line-height:15px;
7.font-family:Arial, Helvetica, Sans-serif;
8.}

E pode ser abreviada para:
view source
print?
1.body {
2.font:italic small-caps bold 11px/15px Arial, Helvetica, Sans-serif;
3.}

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:

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;
a seguir declarar obrigatoriamente font-size e opcionalmente line-height (font-size/line-height);
finalmente declarar obrigatoriamente font-family.

Abreviando list.

A regra a seguir define valores para propriedades de listas:
view source
print?
1.ul {
2.list-style-type:square;
3.list-style-position:inside;
4.list-style-image:url(image.gif);
5.}

E pode ser abreviada para:
view source
print?
1.ul {
2.list-style:square inside url(image.gif);
3.}

A propriedade: list-style-type pode ser abreviada para list-style.
Por exemplo: list-style-type:none pode ser abreviada para list-style:none;

Abreviando outline.

A propriedade outline destina-se a colocar uma margem ao redor de um elemento, com a finalidade de destacá-lo no contexto. Difere da propriedade border por não interferir com as dimensões do box model, isto é, não ocupa espaço no box do elemento e em consequência não afeta o posicionamento do box e nem dos boxes adjacentes.

A regra a seguir define a marcação de um 'destaque' em linha vermelha sólida de 1px ao redor do elemento h2:
view source
print?
1.h2 {
2.outline-color:#f00;
3.outline-style:solid;
4.outline-width:1px;
5.}

E pode ser abreviada para:
view source
print?
1.h2 {
2.outline:#f00 solid 1px;
3.}

Exemplo: Para este parágrafo eu defini um destaque (outline) de 5px em linha tracejada na cor azul que será visualizado nos navagadores modernos. Convém ressaltar que por padrão os navegadores devem destacar com outline todo link de uma página sempre que ele for acessado via teclado. Tal recomendação visa a facilitar a acessibilidade aos links fornecendo uma maneira inequívoca de o usuário identificar o link em que se encontra.

Abreviando border.


A regra a seguir define valores para propriedades de borda:
view source
print?
1.div {
2.border-width:1px;
3.border-style:solid;
4.border-color:#f00;
5.}

E pode ser abreviada para:
view source
print?
1.div {
2.border:1px solid #f00;
3.}

A regra a seguir define valores para espessuras de borda:
view source
print?
1.p {
2.border-top-width:2px;
3.border-right-width:1px;
4.border-bottom-width:3px;
5.border-left-width:5px;
6.}

E pode ser abreviada para:
view source
print?
1.p {
2.border-width:2px 1px 3px 5px;
3.}

A regra a seguir define valores para cores de borda:
view source
print?
1.h1 {
2.border-top-color:#f00;
3.border-right-color:#ccc;
4.border-bottom-color:#00f;
5.border-left-color:#999;
6.}

E pode ser abreviada para:
view source
print?
1.p {
2.border-color:#f00 #ccc #00f #999;
3.}

A regra a seguir define valores para estilos de borda:
view source
print?
1.p {
2.border-top-style:solid;
3.border-right-style:ridge;
4.border-bottom-style:double;
5.border-left-style:dotted;
6.}

E pode ser abreviada para:
view source
print?
1.p {
2.border-style:solid ridge double dotted;
3.}
avatar
Admin
Admin

Mensagens : 81
Data de inscrição : 07/01/2012
Localização : Brasilia

http://juliasilva.no.comunidades.net

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum