CSS
A utilização das "folhas de estilo" CSS (Cascading Style Sheets) são estilos compostos por camadas e tem como atribuição a apresentação em páginas (a aparência). O desenvolvimento das páginas em HTML, por exemplo, é concatenado ao uso das folhas de estilo que definirá registros de aparência global ou pontual aos elementos das páginas ou de todo o site.
Aplicação externa, embutida ou inline
Aplicação Externa
Os estilos criados estão em um arquivo à parte e são vinculados a qualquer página que os requisite através do código para que nestas páginas o estilo não precise ser novamente criado, o que é basicamente o que o CSS faz, facilita.
Isso é feito pela inclusão do link para o arquivo, por tag dentro do elemento <head> da página onde o estilo se aplicará:
<link rel="stylesheet" type="text/css" href="arquivo.css">
Então para resumo final. O arquivo que será buscado está com todo o estilo - ou partes de estilo porque há outras formas de aplicar estilos - em seu conteúdo e será aplicado a qualquer página que o requisitar.
Aplicação Embutida
Para usar a aplicação embutida bastará incluir no elemento <head> as regras:
<style type="text/css">
Desta forma se pode trabalhar com o CSS de forma pontual à página.
Aplicação Inline
Ao aplicar o CSS Inline se aplica o estilo a um elemento particular através do atributo sytle:
<p style="border-style: groove; color: red;">
Texto
</p>
Aplicação
CSS
A utilização das "folhas de estilo" CSS (Cascading Style Sheets) são estilos compostos por camadas e tem como atribuição a apresentação em páginas (a aparência). O desenvolvimento das páginas em HTML, por exemplo, é concatenado ao uso das folhas de estilo que definirá registros de aparência global ou pontual aos elementos das páginas ou de todo o site.
Aplicação externa, embutida ou inline
Aplicação Externa
Os estilos criados estão em um arquivo à parte e são vinculados a qualquer página que os requisite através do código para que nestas páginas o estilo não precise ser novamente criado, o que é basicamente o que o CSS faz, facilita.
Isso é feito pela inclusão do link para o arquivo, por tag dentro do elemento <head> da página onde o estilo se aplicará:
<link rel="stylesheet" type="text/css" href="arquivo.css">
Então para resumo final. O arquivo que será buscado está com todo o estilo - ou partes de estilo porque há outras formas de aplicar estilos - em seu conteúdo e será aplicado a qualquer página que o requisitar.
Aplicação Embutida
Para usar a aplicação embutida bastará incluir no elemento <head> as regras:
<style type="text/css">
Desta forma se pode trabalhar com o CSS de forma pontual à página.
Aplicação Inline
Ao aplicar o CSS Inline se aplica o estilo a um elemento particular através do atributo sytle:
<p style="border-style: groove; color: red;">
Texto
</p>
Esta formatação então poderá ser aplicada como atributo aos elementos.
Exemplo de código:
<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Parágrafo.</p>
<p class="two">Parágrafo.</p>
<p class="three">Parágrafo.</p>
<p style="border-style: groove; color:red;"><b>Nota:</b> A propriedade "border-width" não funciona se usada só. Use a propriedade "border-style" para criar as bordas primeiro.</p>
</body>
</html>
Seletores
Seletores
O seletor é uma declaração onde os demais elementos da árvore seguirão o mesmo padrão:
p { color : #f00; }
A parte da regra correspondente ao seletor é o que está antes do sinal "{" (chave de abertura). Desta forma todos os elementos de parágrafo do documento estarão na cor vermelha.
Seletor ID
O seletor ID estilizará o elemento que o tiver e é representado desta forma #id (com sustenido):
#cor
{
background-color:yellow;
}
Nas imagens respectivos exemplos de código e apresentação no browser:
Seletor classe
Representado por um ponto "." tem como alvo elementos com valor para seu atributo class:
p.info { background-color:#FFBB00 }
Logo, esta regra será aplicada a todo elemento <p> com classe "info".
Caso necessário "globalizar" a atribuição do seletor basta não declarar o elemento.
Pseudo-classes
São usadas para adicionar efeitos especiais a alguns seletores:
a:link {color:#FF0000;} /* link */
a:visited {color:#00FF00;} /* link visitado */
a:hover {color:#FF00FF;} /* mouse sobre o link */
a:active {color:#0000FF;} /* link selecionado */
As pseudo-classes podem ser combinadas com classes CSS:
a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
O link será mostrado em vermelho caso já visitado.
Cores
Para adicionar uma cor de fundo a uma classe:
background-color:#DC143C;
A cor do primeiro plano é adicionada como atributo à classe com "color":
color:#DC143C;
Imagem
Para adição de imagens usar os comandos:
background-image: Exibe como fundo a imagem selecionada.
background-repeat: Este comando indica se a imagem se repetirá.
A forma correta da aplicação: background-repeat: atributo;
background-attachment: Fixa a imagem ao fundo (com atributo "fixed").
Como: background-attachment: fixed;
Exemplo de código:
<!DOCTYPE html>
<html>
<head>
</head>
<style>
article{
background-color:bisque;
margin:10px; padding:10px;
width: 700px; height: 700;
}
img{margin:2px; float:none;}
p{margin:0px;}
</style>
<body>
<article>
<img src="landscape.jpg">
<p>Esta é uma bela foto!</p>
</article>
</body>
</html>
No navegador
Estilos
Formatação
Quando se quer formatar tamanhos no CSS se usa width e height (largura e altura):
width: 700px;
height: 700px;
Posicionamento
Com float se indica a localização de uma imagem por exemplo:
float: right;
Bordas
Para bordas temos:
border-width: Largura da borda.
border-top-width: Largura superior.
border-right-width: Largura para parte direita.
border-bottom-width: Para parte inferior.
border-left-width: E parte esquerda.
Exemplo de código:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:solid;
border-top-width:15px;
}
</style>
</head>
<body>
<p><b>Note:</b> A "border-top-width" não funcionará se colocado só. É necessário criar bordas primeiro ao usar a propriedade "border-style".</p>
</body>
</html>
Navegador:
Exemplo de borda
Para os seguintes comandos segue-se o mesmo padrão anterior: border-color, border-top-color, border-right-color, border-bottom-color, border-left-color, border-style, border-top-style, border-right-style, border-bottom-style e border-left-style.
Como visto acima já temos uma forma de usar border-style. Vamos agora adicionar uma cor:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:solid;
border-top-width:15px;
border-color:yellow;
}
</style>
</head>
<body>
<p><b>Note:</b> A "border-top-width" não funcionará se colocado só. É necessário criar bordas primeiro ao usar a propriedade "border-style".</p>
</body>
</html>
Para os seguintes comandos segue-se o mesmo padrão anterior: border-color, border-top-color, border-right-color, border-bottom-color, border-left-color, border-style, border-top-style, border-right-style, border-bottom-style e border-left-style.
Como visto acima já temos uma forma de usar border-style. Vamos agora adicionar uma cor:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:solid;
border-top-width:15px;
border-color:yellow;
}
</style>
</head>
<body>
<p><b>Note:</b> A "border-top-width" não funcionará se colocado só. É necessário criar bordas primeiro ao usar a propriedade "border-style".</p>
</body>
</html>
No navegador:
Com cor
Propriedades das margens e espaçamento
Propriedades das margens (tamanho): margin, margin-top, margin-right, margin-bottom, margin-left.
Propriedades de espaçamento: padding, padding-top, padding-right, padding-bottom, padding-left.
Nota-se que margin será para margem externa enquanto padding para margem interna.
Exemplos de aplicação em CSS:
margin: 0px;
padding: 7px;
Propriedades de fontes tipográficas
font-family: Define a família da fonte. Sans-serif e Serif por exemplo.
font-style: Aplica estilos às fontes: p.italic {font-style: italic}
font-variant: Uma forma de aplicação: p.small {font-variant: small-caps;}. Esta forma definirá o parágrafo em fonte small-caps.
font-weight: Aplicação: p.normal {font-weight:normal;}
font-size: Definirá o tamanho da fonte: h2 {font-size:200%}
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-weight:normal; color:#FF7000;}
p.leve {font-weight:lighter; color:#FF7000;}
p.negrito {font-weight:bold; color:#FF7000;}
</style>
</head>
<body>
<p class="normal">Parágrafo.</p>
<p class="leve">Parágrafo.</p>
<p class="negrito">Parágrafo.</p>
</body>
</html>
No navegador
Propriedades de texto
text-indent: Esta propriedade definirá a indentação para a primeira linha de um bloco.
text-align: Descreve como o conteúdo da própria linha de um bloco é alinhado.
text-decoration: Decoração a ser adicionada ao texto de um elemento usando a cor do elemento.
text-transform: Controla elementos de capitalização do texto.
line-height: Em um elemento cujo conteúdo é composto de elementos a nível inline o "line-height" especificará a altura das caixas das linhas dentro do elemento.
Exemplo de código:
<!DOCTYPE html>
<html>
<head>
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
Páragrafo com line-height padrão.<br>
Páragrafo com line-height padrão.<br>
O padrão do line height na maioria dos navegadores é entre 110% e 120%.<br>
</p>
<p class="small">
Parágrafo com line-height menor.<br>
Parágrafo com line-height menor.<br>
Parágrafo com line-height menor.<br>
Parágrafo com line-height menor.<br>
</p>
<p class="big">
Parágrafo com line-height maior.<br>
Parágrafo com line-height maior.<br>
Parágrafo com line-height maior.<br>
Parágrafo com line-height maior.<br>
</p>
</body>
</html>
No navegador
Propriedades de lista
Estilos de marcadores:
list-style-type: Especifica o tipo de marcador de item de lista em uma lista.
list-style-image: Substitui o marcador por uma imagem.
Exemplo de código:
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Café</li>
<li>Leite</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
No Navegador
