Folhas de estilo permitem que você separe o conteúdo do seu documento da sua representação gráfica. Como exemplo, ao invés de uma expressão do tipo:
<font face="Arial" size="+2" color="red">Estilo misturado com o texto</ font>
Você utiliza algo mais organizado, como:
<div class="estilo">Estilo separado do texto</d v>
E então você definiria uma classe de nome estilosa onde os atributos, como tipo de fonte, tamanho e cor seriam definidos. Essa definição pode inclusive estar armazenada num arquivo separado do seu documento, sendo que neste último é necessár io apenas uma referência ao arquivo que contenha os estilos.
O mecanismo mais utilizado para criar folhas de estilo para um arquivo HTML é o Cascading Style Sheet , ou CSS. Em CSS, o estilo estilosa para o exemplo acima poderia ser definido como:
div.estilo {
color: red;
font-family: Arial;
font-size: 14;
}
As CSS NÃO são case sensitive, ou seja, não diferencia letras maiúsculas e minúsculas. Por exemplo as palavras história, História e HISTÓRIA são palavras iguais.
Porém, se acostume a escrever códigos CSS com letras minúsculas, não use palavras com letras maiúsculas no seu código.
Pasicamente, a sintaxe das CSS consiste em:
elemento { atributo: valor;
atributo1: valor;
atributo-composto: valor;
}
Todo atributo composto é separado por hífen.
O uso do ponto e vírgula é obrigatório na separação dos atributos.
Caso o leitor queira inserir comentários dentro do código, basta delimitá-los com as marcações /* e */.
Exemplo
h1 {
/* Isto é um comentário */
font-family: verdana;
/* font-size: 20 px;
color: blue; */
}
O comentário descrito acima oculta o tamanho e a cor da fonte da tag de cabeçalho h1.
Os comentários são muito úteis quando temos CSS prontas. Ao invés de apagar um atributo use comentários para ocultar os atributos. Ficando mais fácil de corrigir algum erro futuro.
Podemos usar a folha de estilo em 4 formas diferentes com o mesmo resultado, observe:
1) usando qualquer tag html
Podemos usar qualquer tag html para usar a folha de estilo, tais como: body, h1, p, table, a, img, etc. Veja o exemplo usando a tag "h1" de cabeçalho.
<html>
<head>
<title>Folha de estilo </title>
<style type="text/css">
h1 {
font-family:Verdana;
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>Testando a folha de estilo</h1>
</body>
</html>
Resultado:
2)Usando o atributo style
O exemplo acima pode ser substituído pelo atributo style dentro de uma tag html, veja.
<html>
<head>
<title>Folha de estilo </title>
</head>
<body>
<h1 style="font-family:Verdana; font-size: 20px; color: blue;">Testando a folha de estilo</h1>
</body>
</html>
3) Usando seletores
Podemos inserir dentro de uma tag html um seletor CSS, por exemplo: podemos inserir na tag DIV 3 seletores titulo, conteudo e rodape através do atributo id. Dentro da tag style colocamos um # antes do seletor. Veja o exemplo abaixo:
<html>
<head>
<title>Folha de estilo</title>
<style type="text/css">
#titulo{background-color: blue}
#conteudo{background-color: green}
#rodape{background-color: red}
</style>
</head>
<body>
<div id="titulo">O livro</div>
<div id="conteudo">Este livro foi elaborado com o objetivo de
fornecer ao leitor uma base de informações para que tenha condições de
desenvolver folhas de estilo rapidamente.</div>
<div id="rodape">Todos direitos reservados</div>
</body>
</html>
Resultado
4) Usando classes
Uma classe é semelhante ao seletor, em vez de usamroms o atributo id, usamos o atributo class; em vez de usarmos o símbolo #, usaremos o . ponto, veja o exemplo:
<html>
<head>
<title>Folha de estilo</title>
<style type="text/css">
.esquerda{text-align: left}
.centro{text-align: center}
.direita{text-align: right}
</style>
</head>
<body>
<p class="esquerda">Texto a esquerda</p>
<p class="centro">Texto no centro</p>
<p class="direita">Texto a direita</p>
</body>
</html>
Resultado
Esta tabela é um resumo da folha de estilo:
| Código | Atributo | |
| Seletor | # + elemento1 | id = "elemento1" |
| Classe | . + elemento2 | class = "elemento2" |
| Estilo | Não tem | style = "atributo1: valor; atributo2: valor;" |
| Tag | Nome da tag | Não tem |
Sintaxe:
(...)
<style (...)>
[# + elemento1] ou [. + elemento2] ou [nome_da_tag] {
atributox: valor;
atributoy: valor;
}
</style>
(...)
< [nome_da_tag] [id="elemento1"] ou [class="elemento2"] ou [style="atributo1: valor; atributo2: valor;"]>
(...)
</[nome_da_tag>
<html>
<head>
<title>Folha de estilo</title>
<style type="text/css">
h1 {
color: blue;
font-family: Arial
}
.class01 {
color: red;
font-family: "Courier New"
}
#seletor {
color: green;
font-family:Arial
}
</style>
</head>
<body>
<h1>Cabeçalho h1 com CSS </h1>
<h1 id="seletor">Cabeçalho H1 com seletor CSS </h1>
<br>
<br>
<h2>Cabeçalho H2 normal</h2>
<h2 class="class01"> cabeçalho H2 com Classe CSS</h2>
<p class="class01"> Parágrafo com classe CSS </p>
<br>
<br>
<h3 style="color:yellow; font-size:20px"> Cabeçalho h3 usando style CSS </h3>
</body>
</html>
Podemos resumir a folha de estilo em 4 formas diferentes
1) Usando qualquer tag html
2) Usando o atributo style
3) Usando seletores e
4) Usando classes
Exemplo 1:
<html>
<head>
<title>Folha de estilo </title>
</head>
<style type="text/css">
.texto {
font-family: Verdana;
font-size: 20px;
color:blue;
background-color:green;
text-align:center;
}
</style>
<body>
<p class="texto">Testando a folha de estilo</p>
</body>
</html>
Exemplo 2:
<html>
<head>
<title>Folha de estilo </title>
</head>
<body>
<p style="font-family: Verdana; font-size: 20px; color:blue;
background-color:green; text-align:center;">Testando a folha de
estilo</p>
</body>
</html>
Exemplo 3:
<html>
<head>
<title>Folha de estilo </title>
</head>
<style type="text/css">
p {
font-family: Verdana;
font-size: 20px;
color:blue;
background-color:green;
text-align:center;
}
</style>
<body>
<p>Testando a folha de estilo</p>
</body>
</html>
Exemplo 4:
<html>
<head>
<title>Folha de estilo </title>
</head>
<style type="text/css">
#texto {
font-family: Verdana;
font-size: 20px;
color:blue;
background-color:green;
text-align:center;
}
</style>
<body>
<p id="texto">Testando a folha de estilo</p>
</body>
</html>
O resultado é sempre o mesmo:
Todos os 4 exemplos dão o mesmo resultado: tipo de texto - verdana, tamanho 20 pixels, cor azul, cor de fundo verde, texto alinhado no centro, e a mensagem na tela "Testando a folha de estilo".
A diferença está no CSS empregado:
Para criar um arquivo CSS esterno, basta definir os elementos e suas formatações em um editor de texto, e salvá-lo com a estenção .css , veja exemplos de definições:
h1 {color: blue}
body {background-image: imagem.gif}
ul {list-style-type: circle}
A primeira linha do código define a cor do cabeçalho H1. A segunda define a imagem do plano de fundo, ao passo que a terceira define o tipo de marcador da lista.
Salvando essa seqüência em um arquivo chamado formato.css , ele será chamado com atributo da tag <link>, dentro da tag <head>, na página Html, com as informações de cabeçãlho da página:
<head>
<link rel="stylesheet" type="text/css" href="formato.css">
</head>
Dê preferência à definição das folhas de estilo em arquivos CSS separados, ao invés de incluí-las no código Html, principalmente quando um site é composto por várias páginas e se deseja manter uma padronização de layout. Arquivos externos significam folhas de estilos reaproveitáveis: é possível montar "bibliotecas" de arquivos CSS para os mais diversos fins. Além disso, o fato de essas definições estarem desvinculadas do conteúdo das páginas, não só resulta em um código mais "limpo" e legível, mas também facilitam futuras manutenções e alterações.
Agora que você estudou a fundo os elementos da folha de estilo, tais como: seletores, classes, tags e estilo. Neste momento iremos estudar alguns atributos e seus valores, cada um funciona diferente um do outro.
Selecionamos alguns atributos para estudar a fundo seus valores.
Os atributos que selecionamos são:
Observemos alguns atributos abaixo:
Atributo: font-family
Definição: define o tipo de fonte
Valores: Arial, Verdana, Sans-serif e outros
Exemplo: font-family: Arial;
Observe que alguns atributos são separados por hífens.
Atributo: font-size
Definição: define o tamanho da fonte
Valores: pixels, porcentagem, polegadas, centímetros, milímetros e outros; veja tabela abaixo:
Unidade |
Descrição |
% |
Indica valor percentual. Exemplo: 10% |
in |
Indica valor em polegadas. Exemplo: 2in |
cm |
Indica valor em centímetros. Exemplo: 5cm |
mm |
Indica valor em milímetro. Exemplo: 15mm |
em |
1 em equivale ao tamanho atual de uma fonte. Isso significa que 2em é igual a duas vezes o tamanho da fonte atual. Exemplo: se um elemento é exibido com 10pt, a medida 2 equvalerá à fonte 20pt,. Esta unidade de medida é muito útil em CSS, pos se adapata automaticamente à configuração de fonte que cada browser utiliza. |
ex |
Um ex equivale à metida x-height de uma fonte (aproximadamente metade do tamanho de uma fonte). Exemplo: 2ex. |
pt |
indica valores em pontos (1pt = 1/72in). Exemplo: 4pt. |
pc |
Indica valor em picas (1pc = 12pt). Exemplo: 2pc. |
px |
Indica valor em pixels Ium ponto de tela do computador). Exemplo: 3px. |
| Observação: devido à variação nas resolução dos monitores, definida por cada pessoa, torna-se difícil com qual configuração de vídeo as páginas serão acessadas. A utilização de unidades de medida, como polegadas e centímetros, principalmente para valores maiores, pede causar a vizualização incorreta de um site que diz respeito as imagens e elementos que ultrapassam o espaço disponível. Portanto, o uso de falores percentuais pode ser bastante interessante, pois isso calculará as medidas em função do espaço disponível, mantendo a proporção dos elementos. |
Exemplo: font-size: 30px;
Atributo: color
Definição: define a cor da fonte
Valores: veja tabela:
| Definição da cor | Descrição | Exemplos |
| Nome da cor | Existem aproximadamente 150 nomes de cores válidos que podem ser utilizados. É a maneira mais fácil de definir uma cor, porém, isso não garante que todos os browsers aceitarão tal definição | Blue |
| rgb(n, n, n) | No sistema RGB (Red, Green e Blue), as cores são obtidas a partir da mistura dessas cores, e suas proporções podem variar de 0 a 255. Quando é atribuído valor zero às três cores, ou seja, na ausência desses três tons, obtemos o Preto. | rgb(0, 0, 0) -> Preto |
| rgb(n%,n%,n%) | Trata-se de uma variação do sistema RGB que utiliza valores percentuais para balancear o nível de cada uma das três cores. A cor preta, que no sistema RGB tradicional é definida por rgb(0,0,0), com valores percentuais sria rgb(0%,0%,0%). O valor 255 equivale a 100% | rgb(0%, 100%, 0%) |
#rrggbb |
Uma cor tem sua representação em escala hexadecimal mediante um código composto pelo caractere "#", segundo por uma sequência de seis caracteres alfanuméricos (0 - 9 e A - F). Cada par de caracteres corresponde às cores vermelho, verde e azul. Se a representação da cor preta no sistema RGB é feita com o formato rgb(0,0,0), no hexadecimal será #000000. Quando um valor hexadecimal for composto por pares de valores idênticos, é possível "abreviar" esses valores, omitindo o par e indicando-o apenas uma vez. Veja os exemplos seguintes: #000000 = #000 |
#000000 ou #000 Preto |
Tabela de cores primárias e secundárias
| Código RGB | Código Hexadecimal |
Nome da cor em inglês |
Cor |
| rgb(0,0,0) | #000000 | Black | Preto |
| rgb(255,0,0) | #FF0000 | Red | Vermelho |
| rgb(0,255,0) | #00FF00 | Lime | Verde |
| rgb(0,0,255) | #0000FF | Blue | Azul |
| rgb(255,255,0) | #FFFF00 | Yellow | Amarelo |
| rgb(0,255,255) | #00FFFF | Cyan | Azul claro |
| rgb(255,0,255) | #FF00FF | Magenta | Lilás |
| rgb(192,192,192) | #C0C0C0 | Silver | Cinza |
| rgb(255,255,255) | #FFFFFF | White | Branco |
Atributo: background-color
Definição: define a cor de fundo.
Valores: veja a tabela RGB descrito anteriormente.
Exemplo: background-color: blue;
Atributo: background-image
Definição: define uma imagem de fundo
Valores: caso a imagem esteja no mesmo diretório, basta indicar o nome do arquivo, exemplo:
background-image: url("foto.gif");
Se as imagens estiverem por exemplo, na pasta imagens, o caminho competo deverá ser indicado, exemplo:
background-image: url("./imagens/foto.gif");
Exemplo prático:
<style type="text/css">
body{
background-image: url("plano_de_fundo.jpg")
}
</style>
Este exemplo insere uma imagem de fundo no navegador.
Eu lhe pergunto:
Qual é a diferença entre a tag <div> e a tag <span>?
Todos eles são tagns html.
A difereça é que a tag <div> é usado como um parágrafo, semelhante a tag <p> de parágrafo; e a tag <span> é usado num trecho de um texto dentro de um parágrafo.
Ambos são muito usados pelo CSS, principalmente a tag <div>
A tag <div> possui dois atributos que se relacionam com as CSS:
| class | Serve para fazer referênca a uma classe definida na seção de estilos. |
| style | Por meio desse atributo, é possível definir um estilo dentro da própria tag <div> |
Exemplo:
<html>
<head>
<title> Trabalhando com a tag div e a tag span </title>
<style type="text/css">
div {background-color: #FFFF99;}
span {background-color: #CC99FF;}
</style>
</head>
<body>
<h1>Supremo de frango</h1>
<b>Igredientes</b><br>
<div>3 peitos de frongo / 2 dentes de alho / sal e pimenta do
reino / 1 limão / farinha de trigo / 2 ovos batidos / 300g de presunto /
óleo / queijo ralado. </div>
<b>Modo de preparo</b><br>
<p>Corte o peito de <span>frango</span> em filés
pequenos. Tempere com <span> alho, sal, pimenta e suco de
limão</span> Passe na farinha, nos ovos e na farinha. Frete em
óleo quente. Faça molho bechamel grosso <span>(farinha de trigo,
leite e manteiga).</span> Pré aqueça o forno alto. Coloque o
<span>frango</span> num refratário, espalhe por cima
presunto, molho, polvilhe com queijo ralado e gratine.</p>
</body>
</html>
É possível agrupar todos os atributos de uma só vez, listando cada formatação, lado a lado, sem vírgula, veja:
p{
color:blue;
font-style: italic;
font-size:20px;
font-family:Verdana;
}
Agrupando os atributos font:
p {
color:blue;
font:italic 20px Verdana;
}
Esse agrupamento de atributos só pode ser feito para o caso de pertencerem à mesma família. O exemplo acima font-style, font-size e font-family pertencem a mesma família: font. É importante lembrar que o atributo "color", não penrtence á família "font" e, portanto, não pode ser incluído na definição da fonte.
Um grande exemplo do uso das pseudoclasses são os links e os menus.
A partir do elemento link e utilizando as pseudoclasses, é possível criar um botão que, ao pressionar o mouse, tem sua aparência alterada (como se fosse precionado).
Veja a tabela de pseudoclasses:
| Pseudoclasse | Descrição |
| :hover | Acrescenta estilo a um elemento quando o mouse é posicionado sobre ele. |
| :link | Acrescenta estilo a um link não visitado |
| :visited | Acrescenta estilo a um link visitado |
| :active | Acrescenta estilo a um elemento quando ele estiver com foco. |
Como se pode perceber, as pseudoclasses são mais voltadas a links. A utilização delas nos poupa da necessidade de utilizar scripts de outras linguagens para determinar o que acontece em determinado evento.
Veja exemplo:
<html>
<head>
<title> Pseudoclasse </title>
<style type="text/css">
a.botao{
font-family:Verdana;
font-size:12px;
padding:5px;
background-color:black;
color:white;
border: 2px solid pink;
text-decoration:none;
}
/* Usando a pseudoclasse: hrover */
a.botao:hover{
background-color:white;
color:black;
}
/* Usando a pseudoclasse: active */
a.botao:active {
background-color:blue;
color:white;
}
</style>
</head>
<body>
<a href="#botao1" class="botao">Botão 1</a> |
<a href="#botao2" class="botao">Botão 2</a> |
<a href="#botao3" class="botao">Botão 3</a> |
<a href="#botao4" class="botao">Botão 4</a> |
<a href="#botao5" class="botao">Botão 5</a> |
</body>
</html>
Teste as pseudoclasses link e visited e veja o resultado:
/* Usando a pseudoclasse: link */
a.botao:link {
background-color:green;
color:white;
}
/* Usando a peseudoclasse visited */
a.botao:visited{
background-color:red;
color:black;
}
No seu navegador fica uma coisa estranha, use-os os 2 últimos com moderação.
Abaixo uma lista com os valores CSS admitidos para estilização do cursor.
Passe o mouse sobre o valor, para ver o aspecto do cursor.
| cursor: wait |
| cursor: crosshair |
| cursor: n-resize |
| cursor: se-resize |
| cursor: help |
| cursor: text |
| cursor: ne-resize |
| cursor: sw-resize |
| cursor: pointer |
| cursor: move |
| cursor: nw-resize |
| cursor: e-resize |
| cursor: default |
| cursor: w-resize |
| cursor: s-resize |
Obs: o cursor animado não funciona no Firefox.
Também é possível utilizar um cursor personalizado:
O código para um cursor da Internet, seria o seguinte, recomendo-lhe que utilize a Folha de Estilos CSS, que pode ser encontrada em:
cursor: url('Endereço do cursor');
Em Endereço do cursor, aqui deverá adicionar o endereço do seu cursor, mas lembre-se de que ele deve terminar em ".ani" ou ".cur".
Obs: não valem os formatos ".gif", ".jpg" ou ".png" ou senão dá erro.
<html>
<head>
<title>Untitled Document</title>
</head>
<style TYPE="text/css">
<!--
#cursor {
cursor:url("cursor.ANI");
}
-->
</style>
<body>
<p id="cursor" style="width:400px; height400px; background-color:#00FF99"> </p>
</body>
</html>
Passe o mouse em cima do quadrado e veja o resultado:
<< Clique aqui para alterar as cores da sua barra de rolagem>>
| Exemplo: |
<html> <body> |
| Resultado: |
Existem vários navegadores na internet:
O navegador mais usado pela maioria dos usuários é o Internet Explorer, da Microsoft.
Porém o Internet Explorer não obedece os padrões da W3C (Word Wide Web Consortium). Fazem parte dessa padronização as linguagens Html, Xhtml, XML e CSS entre outras.
Se você criar uma página só para o Internet Explorer, ficará distorcido em outros navegadores e vice-versa.
Porém, um navegador que está se popularizando é o Firefox. Se você que construir sites você deve trabalhar com estes 2 navegadores tanto para o Internet Explorer quanto para o Firefox.
Para ajustar o formato de um site para fários navegadores alguém criou a sigla hack.
Hack é um código CSS que fica invisível em outro navegador, mas quando é no Internet Explorer este código ajusta os erros causados do outro navegador, ficando similar a ele mesmo.
Este código é uma underline colocado ao lado do atributo.
Veja exemplo:
<html>
<head>
<title> Hack </title>
<style type="text/css">
h1{
/* Este código será visto em outros navegadores */
font-family:Verdana;
font-size:20px;
color:red;
background-color:blue;
text-align:left;
/* hack: Este código será visto no Interent Explorer */
_font-family: Arial;
_font-size:30px;
_color:blue;
_background-color:red;
_text-align:right;
}
</style>
</head>
<body>
<h1>Testando no Internet Expole ou em outro navegador</h1>
</body>
</html>
Teste este código no Internet Explorer e depois teste este mesmo código em outro navegador e veja a diferênça. Se você quer ver melho o resultado aconselho a usar o Firefox.
Obs: só use o hack para ajustar os navegadores |
Resultado:
O Html difundiu o conceito de tabelas, com o tempo, verificou-se que, construir sites só com tabelas era muito trabalhoso, se eu quizesse inserir mais algum detalhe toda a estrutura da tabela era modificado.
Com o tempo, o CSS difundiu o conceito de tabless, trata-se de um padrão de desenvolvimento de páginas com layouts não beseados em tabelas.
Criar páginas em tabless torna o desenvolvimento das páginas mais leves e mais flexíveis, na medida em que o conteúdo livre se adaptará a qualquer browser, plataforma etc.
Algumas pessoas cofundem os dois conceitos, dizendo que tabless condena qualquer uso de tabelas, mas não se trata exatamente disso. Esse padrão defende o uso de tabelas apenas para tabular dados, ou seja, para o propósito original da tag criada.
o exemplo a seguir mostra uma página criada em tabless com:
Veja a figura
Criar um arquivo CSS externo ajuda na manutenção de um site. Imagine modificar mais de 200 arquivos html um por um. Um único arquivo CSS externo basta para a manutenção.
<html>
<head>
<title>Home</title>
<link href="tabless.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="geral">
<div id="topo"><h1>Tabless</h1></div>
<div id="menu">
<ul class="menu">
<li>Home</li>
<li>Quem Somos</li>
<li> Nossa Meta</li>
<li>Nossos clientes</li>
<li>Fale conosco</li>
</ul>
</div>
<div id="conteudo">Area do conteúdo</div>
<div id="rodape">Todos direitos resevados</div></div>
</body>
</html>
Iremos usar também um arquivo CSS esterno, com o nome de tabless.css.
#geral {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 776px;
}
#topo {
background-color: #00FF00;
height: 120px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #009933;
}
h1 {
font-size: 36px;
color: #009900;
padding-left: 20px;
padding-top: 30px;
}
#menu {
background-color: #00CCCC;
width: 150px;
float: left;
}
#conteudo {
background-color: #99CC00;
float: left;
width: 616px;
padding-top: 10px;
padding-right: 5px;
padding-left: 5px;
}
#rodape {
background-color: #00FF99;
clear: left;
}
#menu ul {
border: thin dotted #00FF66;
padding-right: 10px;
padding-left: 10px;
list-style-type: none;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#menu ul li {
}
Uma das diretrizes das CSS
que decide qual a regra de estilo que deve ser aplicada em caso de
conflito entre duas ou mais regras chama-se “efeito cascata”.
Se você, ao escrever sua folha de estilo declarar na segunda linha do arquivo uma regra assim:
Linha 2 - p {font-size:14px;}
a seguir continuar escrevendo outras regras e lá embaixo na trigésima linha escrever:
Linha 30 - p {font-size:12px;}
cria um conflito entre duas regras para o tamanho da fonte nos parágrafos.
Aí eu pergunto:
Qual será o tamanho da fonte nos parágrafos do documento?
Resposta: 12px. Por que?
Porque uma (existem várias) das diretrizes do efeito cascata estabelece que a regra de estilo escrita depois (ou posteriormente) no fluxo da folha de estilos, prevalece sobre aquelas escritas anteriormente. É isto o que acontece no exemplo acima, a regra escrita na trigésima linha prevalece sobre a anterior, escrita na segunda linha.
No entanto, é possível definir a prioridade de um estilo em relação ao outro com o uso da declaração !important após a definição do valor do atributo, independente de localização da estilização:
<style type="text/css">
h1 {font-color: blue !important; }
</style>
No exemplo anterior, mesmo que o estilo definido esteja em um arquivo externo e exista uma formatação para a tag <h1> no código HTML, é o estilo com a marcação !important que será obedecido.
Suponha que no exemplo anterior tenha sido alterada a regra escrita na linha 2 conforme mostrado a seguir:
Linha 2 - p {font-size:14px !important;}
…
Linha 30 - p {font-size:12px;}
Agora o tamanho da fonte nos parágrafos será 14px, pois a declaração
que contém !important assume a prioridade, ‘quebrando’ o efeito
cascata.
Notar que !important deve ser escrito logo após o valor da propriedade na declaração CSS
(propriedade: valor), com ou sem espaço, (aconselho a deixar um
espaço para maior legibilidade) e antes do ponto e vígula que termina a
declaração.
Atenção: Ressalto que !important só perde para outra !important mais específica.
Assim, uma regra de estilo contida em uma folha de estilos externa e cuja declaração seja com !important, prevalece inclusive sobre um estilo inline (aquele declarado dentro da tag HTML com o atributo style)
Tenho a imagem, que quero utilizar mas apenas partes no meu código sem ter que cortar a imagem, mas mapeando com o CSS.
Imagem pura sem recorte:
Lembrando que a propriedade background-position pode receber parâmetros de 3 tipos: posições, porcentagem e unidades.
background-position: ESQUERDApx TOPOpx;
(valor) -Y(posição [esquerda] ) e X(posição [topo] )
Valores:
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
Recortando a imagem
<div style="width:16px; height:16px;background-image:url(sprites.jpg); background-position:0px 0px"></div>
<div style="width:16px; height:16px;background-image:url(sprites.jpg); background-position:16px 0px"></div>
<div style="width:16px; height:16px;background-image:url(sprites.jpg); background-position:0px -16px"></div>
<div style="width:16px; height:16px;background-image:url(sprites.jpg); background-position:16px -16px"></div>
<div style="width:16px; height:16px;background-image:url(sprites.jpg); background-position:0px -32px"></div>
<div style="width:16px; height:16px;background-image:url(sprites.jpg); background-position:16px -32px"></div>
<div style="width:16px; height:16px;background-image:url(sprites.jpg); background-position:0px -48px"></div>
<div style="width:16px; height:16px;background-image:url(sprites.jpg); background-position:16px -48px"></div>
Outro exemplo em CSS e DHTML:
<head>
<style>
.sprite, a.first_e, a.first_d, a.last_e, a.last_d, a.previous_e, a.previous_d, a.next_e, a.next_d
{
background-Image:url('sprites.jpg');
display:block; /* Usado para quebrar linha line breaks are created with the block value. */
width: 16px;
height: 16px;
/* Aqui, como não foi explicitada a propriedade background-position, é assumido o valor default: 0 0.
*/
}
/* Observe acima, que temos uma classe sprite e fazemos as demais classes herdarem dela várias
propriedades, nas classes abaixo apenas o que não existe na classe sprite */
/* Iniciar em 0,0 e pegar 16x16 */
.first_e { background-position: 0px 0px; }
/* Iniciar em 16,0 e pegar 16x16 */
.first_d { background-position: 16px 0px; }
/* Iniciar em 0,-16 e pegar 16x16 */
.previous_e { background-position: 0px -16px; }
/* Iniciar em -16,-16 e pegar 16x16 */
.previous_d { background-position: -16px -16px; }
/* Iniciar em 0,-32 e pegar 16x16 */
.next_e { background-position: 0px -32px; }
/* Iniciar em -16,-32 e pegar 16x16 */
.next_d { background-position: -16px -32px; }
/* Iniciar em 0,-48 e pegar 16x16 */
.last_e { background-position: 0px -48px; }
/* Iniciar em -16,-48 e pegar 16x16 */
.last_d { background-position: -16px -48px; }
</style>
</head>
<body>
<!-- No caso sobrescrevemos a âncora-->
<a class="first_e" onMouseOver="this.className='first_d';" onMouseOut="this.className='first_e';"></a>
<a class="previous_e" onMouseOver="this.className='previous_d';" onMouseOut="this.className='previous_e';"></a>
<a class="next_e" onMouseOver="this.className='next_d';" onMouseOut="this.className='next_e';"></a>
<a class="last_e" onMouseOver="this.className='last_d';" onMouseOut="this.className='last_e';"></a>
</body>
Se você deseja criar uma página html+CSS e deseja imprimir numa impressora o seu trabalho, o resultado é insatisfatório.
O CSS possue uma espécie de "reggra de estilo" definida como @media, cuja função é delimitar as folhas utilizadas para visualização de uma página na tela do computador (screen) ou para impressão (print). Veja sua estrutura:
<style type="text/css">
@media tipo_de_mídia {
Definição do(s) estilo(s)
.
.
.
}
</syle>
Veja um exemplo que define atributos distintos para cada tipo de mídia (tela ou impressora) e também como proceder caso existam atributos comuns para elas:
<style type="text/css">
@media screen{
p {font-family:Verdana; font-size:15px;}
}
@media print {
p{font-family: serif; font-size:10px;}
}
@media screen, print {
p {font-style:italic;}
}
</style>
No caso demonstrado, tanto para a visualização da página na tela do computador quanto para a impressão, os parágrafos seriam formatados em itálicos.
Porém a fonte seria menor para a mídia impressa.
Salve um icone de 16x16 no root do site com o nome de favicon.ico.
Coloque o arquivo no diretório principal do seu site.
Insira na linha entre o <HEAD> e o </HEAD>.
Insira o código abaixo:
No Internet Explorer (Aceita em sites em ASP, PHP ou JSP):
<link rel="shortcut icon" href="http://www.seusite.com/favicon.ico" />
No Firefox:
<link rel="shortcut icon" href="favicon.ico" />
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
| multiple | (sem valor) |
| Valor | Exemplo: |
| nome da cor | blue |
| rgb(n, n, n) | rgb(255, 0, 0) |
| rgb(n%, n%, n%) | rgb(0%, 100%, 0%) |
| #rrggbb | #00FF00 |
| #rgb | #0F0 |
| Valor | Exemplo: |
| nome da cor | blue |
| rgb(n, n, n) | rgb(255, 0, 0) |
| rgb(n%, n%, n%) | rgb(0%, 100%, 0%) |
| #rrggbb | #00FF00 |
| #rgb | #0F0 |
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
| (vazio) | (sem valor) |
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es |
| Português | Dreamweaver | Valor |
| percentual | % | % |
| pixels | px |
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
Esta coluna utiliza o atributo float e ocupa 30% do espaço total da página, que contém duas colunas
Esta segunda coluna ocupa 70% da tela e também utiliza o atributo float: left e é posicionada ao lado da Coluna 1.
Esta terceira coluna ocupa 60% da tela e utiliza o atributo clear: left, posicionando esta coluna abaixo da Coluna 1 e 2.
Esta coluna utiliza o atributo float e ocupa 30% do espaço total da página, que contém duas colunas
Esta segunda coluna ocupa 70% da tela e também utiliza o atributo float: left e é posicionada ao lado da Coluna 1.
Esta terceira coluna ocupa 60% da tela e utiliza o atributo clear: left, posicionando esta coluna abaixo da Coluna 1 e 2.
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
| Valor | Exemplo: |
| nome da cor | blue |
| rgb(n, n, n) | rgb(255, 0, 0) |
| rgb(n%, n%, n%) | rgb(0%, 100%, 0%) |
| #rrggbb | #00FF00 |
| #rgb | #0F0 |
Se você já precisou posicionar elementos fixos na tela, com certeza já percebeu que esse tipo de posicionamento é falho no Internet Explorer 6 e menores, mas, como sempre existe uma forma de fazer as “coisas funcionarem” no IE.
Para que position:fixed funcione no IE6 e anteriores, faremos o uso de expressões proprietárias para converter fixo em absoluto:
#elemento_fixo {
position: fixed;
top: 100px;
}
* html #elemento_fixo {
position: absolute;
top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+100+"px" : body.scrollTop+100+"px");
}
Como podem ver, o elemento que possuir o id “elemento_fixo” sempre irá ficar posicionado a 100px do topo independente do scroll da página. Existem outras formas de se obter esse mesmo resultado, mas essa é a mais simples e com certeza a mais suja.
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
| Português | Dreamweaver | Valor |
| pixels | pixels | px |
| pontos | points | pt |
| polegadas | in | in |
| centímetros | cm | cm |
| milímetros | mm | mm |
| picas | pc | |
| ems | em | |
| exs | es | |
| percentual | % | % |
Ullamco laboris nisi consectetur adipisicing elit, cupidatat non proident. Ut enim ad minim veniam, sunt in culpa in reprehenderit in voluptate. Ut labore et dolore magna aliqua. Duis aute irure dolor eu fugiat nulla pariatur.
Ut enim ad minim veniam, cupidatat non proident, ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sed do eiusmod tempor incididunt quis nostrud exercitation. Ut labore et dolore magna aliqua. Duis aute irure dolor.
Velit esse cillum dolore in reprehenderit in voluptate sed do eiusmod tempor incididunt. Sunt in culpa eu fugiat nulla pariatur. Excepteur sint occaecat qui officia deserunt ut labore et dolore magna aliqua. Duis aute irure dolor sed do eiusmod tempor incididunt ullamco laboris nisi.
Ullamco laboris nisi consectetur adipisicing elit, cupidatat non proident. Ut enim ad minim veniam, sunt in culpa in reprehenderit in voluptate. Ut labore et dolore magna aliqua. Duis aute irure dolor eu fugiat nulla pariatur.
Ut enim ad minim veniam, cupidatat non proident, ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sed do eiusmod tempor incididunt quis nostrud exercitation. Ut labore et dolore magna aliqua. Duis aute irure dolor.
Velit esse cillum dolore in reprehenderit in voluptate sed do eiusmod tempor incididunt. Sunt in culpa eu fugiat nulla pariatur. Excepteur sint occaecat qui officia deserunt ut labore et dolore magna aliqua. Duis aute irure dolor sed do eiusmod tempor incididunt ullamco laboris nisi.
Ullamco laboris nisi consectetur adipisicing elit, cupidatat non proident. Ut enim ad minim veniam, sunt in culpa in reprehenderit in voluptate. Ut labore et dolore magna aliqua. Duis aute irure dolor eu fugiat nulla pariatur.
Ut enim ad minim veniam, cupidatat non proident, ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sed do eiusmod tempor incididunt quis nostrud exercitation. Ut labore et dolore magna aliqua. Duis aute irure dolor.
Velit esse cillum dolore in reprehenderit in voluptate sed do eiusmod tempor incididunt. Sunt in culpa eu fugiat nulla pariatur. Excepteur sint occaecat qui officia deserunt ut labore et dolore magna aliqua. Duis aute irure dolor sed do eiusmod tempor incididunt ullamco laboris nisi.
Ullamco laboris nisi consectetur adipisicing elit, cupidatat non proident. Ut enim ad minim veniam, sunt in culpa in reprehenderit in voluptate. Ut labore et dolore magna aliqua. Duis aute irure dolor eu fugiat nulla pariatur.
Ut enim ad minim veniam, cupidatat non proident, ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sed do eiusmod tempor incididunt quis nostrud exercitation. Ut labore et dolore magna aliqua. Duis aute irure dolor.
Velit esse cillum dolore in reprehenderit in voluptate sed do eiusmod tempor incididunt. Sunt in culpa eu fugiat nulla pariatur. Excepteur sint occaecat qui officia deserunt ut labore et dolore magna aliqua. Duis aute irure dolor sed do eiusmod tempor incididunt ullamco laboris nisi.