Propriedade que define como um elemento vai ser exibido.
Tem como opção os seguintes valores definidos:
Se você deseja que o elemento abaixo de um float não seja afetado, você deve aplicar a propriedade clear com uma das opções a seguir:
Esta propriedade permite posicionar elementos à direita ou à esquerda de outro elemento sem que para isso precisemos recorrer aos recursos de tabelas. Esta propriedade possui 3 valores:
Quando você faz fluir um elemento (float), ele se torna um bloco, tipo caixa, que pode fluir para a direita ou para a esquerda do fluxo normal do documento.
Elementos em nível de bloco (block level) acima de elementos float não serão afetados por ele. Entretanto, elementos abaixo serão posicionados em torno dos elementos float. Embora o conteúdo desses elementos afetados seja posicionado ao lado da caixa definida pelo elemento float, bordas e fundo continuarão ocupando o espaço do bloco original.
IMPORTATE!
Um elemento tipo float deve sempre ter sua largura especificada, com exceção de imagens que tem sua largura definida de forma implícita.
não seja especificada uma largura, o resultado será imprevisível.
Para validar código CSS, você pode utilizar aplicações online como o W3C CSS Validator. http://jigsaw.w3.org/css-validator/
Existem aplicativos como o TopStyle Pro que validam código CSS também. http://www.bradsoft.com/topstyle/
Existem três unidades que você deve considerar ao formatar tamanho de texto em páginas Web. pixels (px), percentual (%) e spaces (em).
Para determinar qual das três unidades se aplica melhor, considere qual o critério de escolha é mais importante: design visual ou acessibilidade?
Se você quer garantir que sua página será renderizada da mesma forma em diversos browser e plataformas, utilize pixels como unidade de medida. Fazendo esta escolha, entretanto, fará com que seu site fique menos acessível. Isto acontece porque o pixel é uma unidade de medida fixa e faz com que browsers antigos e assistentes de tela aumentem o tamanho do texto ou que o seu texto fique extremamente grande em dispositivos portáteis.
Utilizando (em) spaces ou (%) percentual, você determina uma unidade flexível de medida que permite ao usuário aumentar o tamanho do texto em seu navegador ou dispositivo. Entretanto, isto pode fazer com que seu design (fluxo do conteúdo) seja alterado.
Definir a escolha é na verdade definir qual é o público-alvo do seu site.
Um (em) space é igual à largura da letra “m” na fonte selecionada como padrão pelo dispositivo ou browser. Em outras palavras, se o Internet Explorer está configurado da forma padrão, então 1 em é igual a 14 pixels.
No exemplo abaixo estamos configurando o tamanho da fonte utilizada em um documento Web de forma flexível:
body,td,th {
color: #333333;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
}
Para definir uma cor utilizando a paleta Web Safe (protegida para Web) basta utilizar a combinação dos números hexadecimais 00, 33, 66, 99, CC e FF. A cor laranja, por exemplo, é representado pelo modelo hexadecimal como #FF9900. Em se tratando de CSS, o valor #F90 produz o mesmo resultado de cor laranja. Por tanto os códigos abaixo, produzem o mesmo resultado:
.destaque {
color: #FF9900;
}
.destaque {
color: #F90;
}
Um estilo inline perde a maioria das vantagens de se utilizar CSS, visto que mistura formatação com conteúdo. Utilize este método somente quando um estilo deve ser aplicado a somente um elemento em um único documento.
<p style=”color: blue; margin-left: 20px”>
Isto é um parágrafo
</p>
Deve ser utilizada quando determinados estilos serão aplicados somente a um determinado documento. Você define uma folha de estilos interna no cabeçalho do documento utilizando a tag <style>.
<head>
<style type=”text/css”>
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url(”images/fundo.gif”)}
</style>
</head>
Browser antigos que não suportam CSS, irão exibir o conteúdo da tag <style> como texto no início do documento. Para evitar isso, coloca-se os estilos dentro da marcação de comentário HTML:
<head>
<style type=”text/css”>
<!–
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url(”images/back40.gif”)}
–>
</style>
</head>
Folha de Estilos Externa
Ideal quando você pretende compartilhar os mesmos estilos entre diversos (ou todos) os documentos de um website. Os estilos devem ser definidos em um arquivo com extensão .css e vinculados no cabeçalho do documento utilizando a tag <link>. Com folhas de estilo externas se obtém os maiores benefícios na utilização do CSS.
Utilizar CSS externo, também melhora a experiência de uso do usuário porque o tamanho dos arquivos diminui, acelerando o carregamento das páginas. O browser utiliza o cache para carregar o mesmo CSS compartilhado por diversos arquivos, semelhante ao o que ocorre com imagens e arquivos Javascript externos.
Importar ou Vincular?
Você pode utilizar CSS externo de duas maneiras: importando ou vinculando. A opção padrão é vincular. A opção importar não funciona no Netscape Navigator 4.x. Ao anexar diversas folhas de estilo externas, a opção Link normalmente é utilizada para a primeira folha de estilos; e Import para as demais.
Utilizar o método Link para vincular diversas folhas de estilos pode fazer com que o navegador ofereça ao visitante uma escolha entre as folhas de estilo que serão utilizadas, o que pode confundir os visitantes e, normalmente não é recomendado nem desejado.
Devido à natureza em cascata das folhas de estilo, quando a primeira é vinculada e a segunda é importada, esta última tem prioridade e sobrescreve quaisquer estilos conflitantes com a primeira.
Uma técnica utilizada com freqüência é posicionar todos os estilos que não são compatíveis com os navegadores antigos nas folhas de estilo que vão ser vinculadas com Import.
Para anexar uma folha de estilos externa utilizando <link>: (padrão – indicado para a primeira folha de estilos externa)
<head>
<link rel=”stylesheet” type=”text/css”
href=”estilo.css” />
</head>
Para anexar uma folha de estilos externa utilizando import: (não suportado por browser antigos)
<style type=”text/css”>
<!–
@import url(”estilo.css”);
–>
</style>
Como explicado anteriormente, os seletores indicam a quais elementos uma determinada regra se aplica. Existem dezenas de formas de se combinarem elementos na especificação de um seletor e isso dá um grande poder de modularização ao CSS. Além disso, existem algumas formas de seletores especiais que fazem uso de dois atributos comuns a todos elementos - os atributos id e class. Um outro tipo de seletores, conhecidos como pseudo-seletores, indicam classes especiais de propriedades de um objeto. Um exemplo de pseudo-seletor é :hover que indica o estilo de um elemento quando o mouse está sobre o mesmo.
Nota: Nos exemplos seguintes, as reticências indicam um conjunto qualquer de declarações. Mantenha em mente também, que algumas das combinações se referem à especificação CSS2 e não são implementadas por todos os navegadores.
Como vimos, a forma mais simples de seletor é aquela que especifica apenas um elemento.
Por exemplo:
h1 { … }
Elementos podem ser também agrupados na regra. Por exemplo:
h1, h2, h3 { … }
A regra acima, por exemplo, indica que todos elementos h1, h2 e h3 possuem as propriedades especificadas no bloco de declarações seguinte.
Relações entre os elementos também podem ser especificadas. Por exemplo:
h1 h2 { … }
h1 > h2 { … }
h1 + h2 { … }
A primeira linha do exemplo acima indica que as declarações se aplicam a todos elementos h2 que são descendentes de qualquer elemento h1. A segunda linha indica que as declarações de aplicam a todos elementos h2 que são filhos de qualquer elemento h1. Por fim, a última linha indica que as declarações se aplicam a todos elementos h2 que seguem imediatamente um elemento h1. Note a diferença entre descendente e filho: o primeiro é um elemento que aparece em qualquer posição hierárquica dentro de outro elemento; o segundo aparece na posição hierárquica imediatamente abaixo de seu pai.
Uma outra forma se criar um seletor é usar, como mencionado acima, o atributo class de um elemento. Por exemplo:
.footer { … }
div.footer { … }
A primeira linha do exemplo acima indica que as declarações se aplicam a qualquer elemento cujo atributo class seja footer. A segunda linha restringe as declarações a qualquer elemento div cujo atributo class seja footer. O atributo class de um elemento qualquer pode especificar múltiplas classes.
O atributo id, como também foi mencionado acima, também pode ser usado para criar um seletor. Por exemplo:
#footer { … }
div#footer { … }
As mesmas regras para o atributo class se aplicam aqui com as seguintes exceções: um elemento só pode ter um único atributo id e o atributo id deve ser único no documento.
Finalmente, seletores podem ser especificados por meio de pseudo-classes. Esses pseudo-classes recebem esse nome por simularem partes ou eventos específicos para um elemento. Por exemplo:
a:hover { … }
p:first-line { … }
Na primeira linha, as declarações serão aplicadas a qualquer elemento a quando o mouse estiver sobre o mesmo. Na segunda linha, as declarações serão aplicadas à primeira linha de qualquer elemento p. As demais linhas não receberão os estilos especificados.
Os seletores podem ser combinados de qualquer forma necessária. Por exemplo:
body > ul.links li#root:hover { … }
No exemplo acima, as declarações seriam aplicadas a qualquer elemento li no estado hover (ou seja, com o mouse em cima do mesmo) cujo atributo id fosse root e que descendesse de um elemento ul cujo atributo class fosse links e que fosse, por sua vez, um filho de um elemento body. Como você pode ver, a regra é complexa e mostra que o CSS é realmente muito poderoso. Identificar e criar essas regras pode ser uma tarefa complexa. Uma ferramenta muito útil para qualquer desenvolvedor CSS é o Selectoracle - http://gallery.theopalgroup.com/selectoracle/, que explica qualquer regra CSS em uma linguagem acessível (o idioma pode ser inglês ou espanhol).
A especificação CSS possui ainda maneiras de formar outros tipos de seletores, usando, por exemplo, qualquer outro atributo de um elemento ou sua posição na cadeia hierárquica.
Esses seletores ainda não são suportados por todos navegadores, mas podem ser entendidos e aprendidos na especificação.
Você está visualizando o histórico da categoria CSS.