O que significa a sigla CSS?
CSS é a sigla para Cascading Style Sheets que em português foi traduzido para folhas de estilo em cascata e nada mais é, que um documento onde são definidas regras de fomatação ou de estilos, a serem aplicadas aos elementos estruturais de marcação.
Foram criadas à época antiga de marcar documentos web e basicamente calcados em estruturação para mídia tipográfica, não imputando qualquer relevância ao texto com elas marcado e nada significam para leitores de tela ou mecanismos de busca por exemplo.
CSS permite que você retire da marcação HTML toda a formatação (apresentação) do documento WEB. Quem vai determinar cores, formas, tipos e tamanhos, posicionamento e em fim todo o "visual" da página são as CSS.
Quais as vantagens de se usar CSS ?
As principais:
- controle total sôbre a apresentação do site a partir de um arquivo central;
- agilização da manutenção e redesign do site;
- saida para diferentes tipos de mídia a partir de uma versão única de HTML;
- redução do tempo de carga dos documentos Web;
- adequação simplificada aos critérios de acessibilidade e usabilidade;
- elaboração de documentos consistentes com as aplicações de usuários futuras;
- aumento considerável na portabilidade dos documentos Web.
Como escrevo uma regra CSS?
A sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abaixo:
seletor {propriedade: valor;}
Nota: ao conjunto propriedade: valor denominamos declaração CSS.
Por exemplo:
p {text-indent:10pt;} é uma regra CSS
p é o seletor.
{text-indent: 10pt} é a declaração CSS.
text-indent - é a propriedade CSS
10pt - é o valor CSS
Posso incluir comentários nas regras CSS?
É recomendável que se faça amplo uso de comentários para fornecer informações sobre os seletores, propriedades e valores declarados, com o intuito de facilitar futuras modificações ou mesmo entendimento do código gerado. Os comentários devem estar entre as marcas /* e */ e podem ser inseridos em qualquer espaço em branco dentro da folha de estilos. Não são permitidos comentários aninhados.
/* Isto é um comentário CSS */
O que é efeito cascata das CSS?Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do pêso ( importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso (importância, prioridade) determinada pela ordem do efeito cascata.
Entre várias folhas de estilo lincadas têm maior prioridade aquela importada por último (mais próxima da tag < /head>. O mesmo ocorre entre as folhas importadas (@import)
O que é declaração CSS?
Declaração CSS e o fragmento de uma regra CSS dentro dos colchetes { }. A declaração CSS compõe-se de duas partes: a propriedade e o valor e uma regra CSS pode conter várias declarações separadas por um ponto-e-vírgula.
Por exemplo:
h1 {color: #000000; /* esta linha contém a declaração CSS */ }
Posso atribuir mais de uma declaração a um seletor?
Sim, as declarações devem ser separadas por ponto-e-vírgula.
Por exemplo:
p {
background: #FFFFFF;
color: #000000;
}
O que é seletor?Seletor é uma entidade que identifica um elemento HTML ou define uma classe ou pseudo classe na qual a regra de estilo será aplicada.
Por exemplo:
p {font-size: 12px;}
O seletor é p (elemento HTML parágrafo) e a regra CSS escrita determina que os parágrafos terão uma fonte de tamanho 12px.p, ul {text-indent: 10pt;}
Os seletores são p e ul. O que é seletor tipo ID?
Seletor tipo ID é um identificador individual associado a UM E SOMENTE UM elemento HTML no documento. Não se pode ter mais de um elemento HTML com a mesma ID, ao contrário das classes, que podem ser aplicadas a vários elementos HTML em um mesmo documento.
A sintaxe para o seletor ID é o caracter # , seguido de um nome que você "inventa". Este nome pode conter letras de a-z, A-Z, dígitos 0-9, espaço, hífen, ou caracter de escape. Caracteres Unicode 161-255, bem como qualquer caracter Unicode de código númerico, contudo não podem começar com um (traço) ou um número.
Por exemplo:
#menu {
color: #000000;
background:#FFFFFF;
}
Como posso centrar um elemento nível de bloco? Declare sua largura e ajuste suas margens esquerda e direita para um valor auto (automático).
#tudo {
width:760px;
margin-left:auto;
margin-right:auto;
}
A regra CSS acima centra na tela, qualquer que seja a resolução do monitor, um bloco com 760px de largura.Nota: O Internet Explorer não reconhece esta regra. Para contornar isto usamos um artifício (hack) que consiste em declarar mais uma regra só para o IE como mostrado abaixo:
#tudo {
width:760px;
margin-left:auto;
margin-right:auto;
text-align:center; /* Para o IE */
}
Devo usar " " (aspas) ao declarar URL? O uso de aspas duplas ou simples ao declarar URL nas folhas de estilo é facultativo.
No exemplo abaixo todas as três formas de declaração estão corretas.
#tudo {
background-image:url(imagem.gif)
}
#tudo {
background-image:url('imagem.gif')
}
#tudo {
background-image:url("imagem.gif")
}
Como retirar o sublinhado dos links? Retira-se o sublinhado do link com a propriedade text-decoration ajustada para none
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration:none;
}
ou ainda
a:link, a:visited, a:hover, a:active {
text-decoration:none;
}
Mas, cuidado ao retirar o sublinhado dos links. Assegure-se de que
esta prática não irá tornar seus links pouco identificáveis na página.
Considere neste caso declarar um fundo colorido para
o link.
a:link {
text-decoration:none;
background-color:#FFFFCC;
}
esta regra retira o sublinhado e coloca um fundo colorido no link.
Como estilizar links de maneira diferente na mesma página?Criando-se classes para cada uma das maneiras que se queira estilizar.
a.maneira1:link {
text-decoration:none;
background-color:#FFFF00;
}
a.maneira2:visited {
text-decoration:underline;
background-color:#0000FF;
}
a.maneira3:hover {
text-decoration:overline;
background-color:#FF0000;
}
e no HTML:
<a class="maneira1">Meu link_1</a>
<a class="maneira2">Meu link_2</a>
<a class="maneira3">Meu link_3</a>