Arquivo da categoria: CSS

Tudo sobre CSS.

Agrupamento de seletores CSS


Agrupamento de Seletores
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados.
Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

       
h1, h2, h3, h4, h5, h6 {color: #00FF00;}
       

O seletor classe
Mas você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo!

Você pode “inventar” um nome e com ele criar uma classe a qual definirá as regras CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML.
E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles.

A sintaxe para o seletor classe é mostrada abaixo.
Elemento HTML mais um nome qualquer que você “inventa”, precedido de . (ponto):

elementoHTML.minhaclasse { propriedade: valor;}

Nota: Para o nome que você “inventa” para sua classe, evite usar números e caractéres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Números e caractéres podem ser usados, mas há restrições quanto ao seu uso.
Dica 1: Use só letras!

Por exemplo: suponha que você queira ter dois tipos de parágrafos em seu documento:
-um parágrafo com letras na cor preta e;
-um parágrafo com letras na cor azul.

        
p.corum {        /* classe corum= preta */
color:#000000;
} 

p.cordois {   /* classe cordois= azul */
color:#0000FF;
}
       

No seu seu documento HTML as regras seriam aplicadas conforme abaixo:

       
<p class ="corum">
este parágrafo terá cor preta.
</p>

<p class ="cordois">
este parágrafo terá cor azul.
</p>       

Dica 2: Classes definidas pelas regras CSS são ótimas para se aplicar estilos diferentes num mesmo elemento HTML (tag) em um mesmo documento.

Anúncios

CSS – Folhas de estilo em cascata


Uma das maiores dificuldades na criação de uma página é a configuração do layout. Definir a todo momento a cor ou o tamanho de uma fonte deixa o código HTML extenso, aumenta a possibilidade de erros e além de tudo é muito cansativo.

Neste tuto você aprenderá a trabalhar com CSS (Cascading Style Sheets, ou Folhas de Estilo em Cascata). Com o CSS é possível ligar estilos aos comandos HTML. Dessa forma seu código fica muito menor e você ainda pode definir o estilo de um site inteiro com um único arquivo.

Regras

O CSS configura os estilos através de regras. Ele define as tags e as declarações. Na declaração são configuradas as propriedades (cor, fonte, tamanho) e o valor (azul, preto, verde). Por exemplo, o comando

  H1 { color:red }  

, define que a tag

  H1  

será sempre exibida na cor vermelha.

Qualquer navegador da geração 4 suporta o CSS. Nas versões anteriores o texto é exibido normalmente, porém sem nenhuma formatação de estilo. Confira nos quadros a seguir como usar alguns dos estilos oferecidos pelo CSS:

Página com estilo

   <HTML><HEAD>
<TITLE>exemplo de CSS</TITLE>
<STYLE type="text/css">
<!--
h1 {color:red}
h2,h3 {font-style:italic;
        text-align:center;
        background:yellow
        }
p {color:blue;font-size:40}
-->
</STYLE></HEAD>
<BODY>
<h1>Exemplo 2</h1>
<h2>Com o CSS criar</h2>
<h3>estilos é muito</h3>
<p>fácil!</p>
</BODY></HTML>
   

A configuração do estilo é iniciada pela tag

   <STYLE>   

. As tags

   <!--   

e

   -->   

são utilizadas para que os comandos das regras não sejam exibidos na tela dos navegadores não compatíveis com CSS. No exemplo acima foram criadas três regras. Na primeira, definimos que o título

   h1   

é vermelho. Depois, que as tags

   h2   

e

   h3   

são em itálico, centralizadas e com a cor de fundo amarela. Na terceira regra foi configurada a cor azul e o tamanho 40 para a tag

   <P>   

.

Quando o navegador interpreta as tags que foram definidas nas regras, os estilos são aplicados automaticamente.

Defina as declarações com classe

No CSS você pode definir classes para as regras. Assim, mais de uma opção de estilo pode ser criada para uma mesma tag. Copie o código em destaque e salve-o como um arquivo HTML para poder visualizar.

   <HTML><HEAD>
<TITLE>exemplo de CSS</TITLE>
<STYLE type="text/css">
<!--
p.verm {color:red}
p.verde {color:green}
p.azul {color:blue}
p i {color:magenta}
p i.verm {color:red}
-->
</STYLE></HEAD>
<BODY>
<i>Exemplo 2</i>
<p>Crie</p>
<p class="verm">classes</p>
<p class="verde">nas <b>regras</b></p>
<p class="azul">do <i class="verm">CSS</i> e controle <i>seu site</i></p>
</BODY></HTML>
   

Veja como foram criadas as regras das classes no código acima. Por exemplo, com a regra

   p.verm { color: red}   

definimos a classe “verm” para a tag

   <P>   

que tem cor vermelha. Depois o comando

   <P class="verm">   

foi utilizado para exibir o texto com esse estilo. Você pode criar quantas classes quiser, com o nome que desejar.

Para criar estilos que são utilizados somente quando combinados com outra tag, como por exemplo um texto em itálico (tag

   <i>   

) dentro de um parágrafo (tag

   <P>   

), a regra é definida da seguinte forma:

   p i{ color: magenta}   

. Com isso a cor magenta só é aplicada se a tag

   <i>   

estiver dentro da tag

   <P>   

. Se ela estiver fora, o estilo simplesmente não é aplicado.

Utilize um arquivo de regras

Você pode criar um arquivo de regras CSS para as páginas do seu site. Assim os estilos de todos os arquivos HTML ficam padronizados. Além disso são poupadas várias linhas de comando e, ao alterar as regras desse arquivo, as configurações das páginas mudam automaticamente, sem a necessidade de se editar uma a uma. Para ler os estilos de um arquivo de regras (.css) em uma página, a tag

   <link rel="stylesheet" href="nomedoarquivo.css" type="text/css">   

é inserida no cabeçalho (

   <head></head>   

) da sua página. Depois os comandos HTML são inseridos normalmente.

Até mais galera.

Sintaxe das regras CSS


A regra CSS e sua sintaxe

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML.
Um conjunto de regras CSS formam uma Folha de Estilos.
Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

Seletor: é o elemento HTML (ou uma classe a aplicar a um elemento HTML) para o qual a regra será válida. (por exemplo:

        <p>, <h1>, <form>        

, . minhaclasse, etc…);

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc…).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc…)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las.
O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.

Vejamos alguns exemplos de regra CSS:

          
p {
   font-size: 12px; /* ponto-e-vírgula é facultativo */
   }

body {
color: #000000;
background: #FFFFFF;
font-weight: bold; /*ponto-e-vírgula é facultativo */
}
          

No primeiro exemplo, o seletor é o elemento HTML

     <p>     

parágrafo.
No segundo exemplo o seletor é documento todo (body – a página web), e as propriedades declaradas com seus respectivos valores são:
a cor da fonte: preta
a cor do fundo: branca
o peso da fonte: negrito

Dica 1: é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade;
Dica 2: escreva suas regras CSS digitando uma propriedade em cada linha. Isto facilita a manutenção e atualização das Folhas de Estilo;
Dica 3: Insira comentários nas suas Folhas de Estilo. Eles facilitaram a voce se lembrar no futuro, de detalhes da programação, que certamente serão esquecidos com o tempo.

Tudo de bom !!!