As CSS (Cascade Style Sheets) têm a seguinte nomenclatura:
"selector", a propriedade ("property") e o valor ("value").
selector {property: value}
cada "selector" pode ter várias propriedades "property", sendo obrigatório a separação das mesmas com o ";".
Exemplo:
body {background: #CCFFFF; margin: 0px;}
ou
body {
background:#CCFFFF;
margin: 0px;
}
CLASS
Class: cria uma "biblioteca" de estilos que pode ser aplicado em qualquer tag. Este tipo de CSS tem sempre um "." (ponto) antes do nome e não deve ter inicialmente um número.
Exemplo:
CSS
.texto {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
margin: 4px;
padding: 2px;
}
HTML
<p class="texto">o meu texto</p>
TAG
Tag: aplica um estilo para uma tag específica, como o . Este tipo de CSS é descrito com o nome da tag, sem qualquer ponto "." no início ou aspas.
Exemplo:
CSS
body {
background: #000000;
margin: 0px;
Significa que a página vai ter um pano de fundo ("background") preto e sem margens.
Avançado:
Podemos aplicar estilos para pseudo-tag (como efeitos de texto para links) e IDs (por exemplo: aplicações de estilos nas DIV e Layers)
A nomenclatura é a seguinte:
selector:pseudo-class {property: value}
"Pseudo-tag":
a:link {color: #FFFFFF;text-decoration: underline;}
(a tag significa "anchor" (ancora), que permite fazer uma Hiperligação ("Hyperlink") para uma outra página ou para um outro lugar da mesma página)
Exemplo:
CSS
a.texto:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a.texto:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FF0000;
text-decoration: underline;
}
a.texto:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
background:#0000FF;
text-decoration: underline;
}
HTML
<p class="texto">Texto <a
href="http://www.w3schools.com" class="texto">Link</a></p>
O "ID selector"
É possível definir estilos para elementos do HTML com o "ID Selector". Este tipo de CSS é descrito um asterisco "#" antes da designação e, também, não deve conter um número no início.
Exemplo:
CSS
#div_amarelo {
background-color:#FFFF00;
width:150px;
height:150px;
margin:30px;
padding:10px;
}
HTML:
<div id="div_amarelo">
<p class="arial">Esta Div tem:<br>
altura: 150 px <br>
largura: 150 px <br>
fundo: amarelo <br>
margem de 30 px<br>
padding: 10 px </p>
</div>
"Comentários" nas CSS
No código HTML existe basicamente este comentário:
<!-- o meu comentário -->
No código CSS existe somente este comentário:
/* o meu comentário */
Tempo
Bem-vindo
Bem-vindos ao meu blog.
O objectivo deste blog é deixar algumas ideias, tutoriais e dicas sobre CSS - Cascading Style Sheet.
Caso tenham alguma dúvida deixam aqui a vossa questão. ;)
Lista de blogues
Seguidores
Arquivo
Quem está online?
Visitas
Subscrever:
Enviar feedback (Atom)
0 comentários:
Enviar um comentário