Aula 13 Tabela de Atributos CSS Exemplos com HTML

Aula 13- Atributos CSS básicos e link para folha de estilos em códigos HTML

Devido as limitações impostas pelo código HTML, podemos experimentar problemas em páginas exibidas em diversas plataformas (PC, Smartphone,tablets,Windows, Linux, Mac, UNIX, etc)

Surge o CSS como um código complementar usado especialmente para interagir com o HTML para que a página possa ganhar mais poder em formatação. Porem ao incluir o código CSS junto ao HTML num mesmo arquivo, a interpretação do código ficará mais complexas. Imagine um texto contendo dois idiomas mesclados, não seria ideal se pudessemos ler cada um em separado?

O CSS é um arquivo de texto criado assim como o HTML (usando programas próprios ou o famoso bloco de notas/editor de texto puro txt). Vale ressaltar que a sintaxe do CSS é totalmente diferente do HTML! Ou seja, CSS não é HTML e suas "tags" são diferentes.

Há meios de usar o CSS junto com HTML num mesmo arquivo, porém o correto é criar um arquivo em separado com extensão .css e fazer um link dentro do HTML para este arquivo!  Ensinaremos mais adiante com fazer isso!

Algumas dicas básicas de como o CSS funciona:

Com o uso do CSS poderemos economizar tempo, e poupar linhas extras de tags HTML para definir o estilo de apenas um trecho ou até mesmo todo o nosso documento. Veja exemplos simples usando CSS junto com HTML no mesmo arquivo!

Para definir estilos em seções reduzidas de uma página se utiliza a etiqueta . Com seu atributo style indicamos em sintaxe CSS as características de estilos. Vemos com um exemplo, colocaremos um parágrafo onde vamos visualizar determinadas palavras na cor verde. Ignore o # usado antes das Tags aqui apenas para poder escrever o código no Blog sem Interpretação do Navegador!

<#p > isto é um parágrafo com várias palavras <#SPAN style="color:green">de cor verde<#/SPAN>. é muito fácil. <#/p>

Faça este teste num HTML seu para ver o resultado durante a aula!

Aqui estamos mesclando CSS+HTML num mesmo arquivo,mas permitindo recursos que antes não tínhamos condições de utilizar! Este é o poder do CSS!

Agora vamos ver como podemos definir um parágrafo inteiro de cor vermelha e outro de cor azul. Para isso, utilizamos o atributo style. 

<#p style="color:#990000"> Isto é um parágrafo de cor vermelha. <#/p> <#p style="color:#000099"> Isto é um parágrafo de cor azul. <#/p>

Com a etiqueta "div" podemos definir seções de uma página e aplicar estilos com o atributo style, ou seja, podemos definir estilos de uma só vez a todo um bloco da página. Tudo que estiver dentro desta etiqueta estará sendo escrito com a formatação definida no "div style". Quanto formos mudar de formatação teremos que encerrar com /div.

<#div style="color:#000099; font-weight:bold"> <#h3>Estas etiquetas vão em <#i>azul e negrito<#/i><#/h3> <#p> Continuamos dentro do DIV, por isso permanecem os estilos. <#/p> <#/div>

Avançando em CSS

No exemplo vemos que se utiliza a etiqueta , se coloca o nome da etiqueta que queremos definir os estilos e entre chaves -{ }- colocamos em sintaxe CSS as características de estilos que queremos dar a nossa página.

OBS: Escreva em Aula o código HTML abaixo sem usar o #. Usamos o # aqui pois se não ele seria interpretado em nosso Blog! o # para as Cores deve ser digitado normalmente!

<#html>
<#head>
<#title>Exemplo de estilos para toda uma página<#/title>
<#STYLE type="text/css">

H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
<#/STYLE>
<#/head>
<#body>
<#h1>Página com estilos<#/h1>
Bem-vindos...
<#p>Desculpe não escrever muito, mas isto é um exemplo sem importância<#/p>
<#/body>
<#/html> 

Como se pode apreciar no código, definimos que a etiqueta H1 se apresentará:

• Sublinhada
• Centralizada

Também, por exemplo, definimos que no corpo do texto inteiro da página (etiqueta BODY) serão aplicados os seguintes estilos:

• Cor do texto negro
• Cor do fundo acinzentado
• Margem lateral de 1 centímetro

Cabe destacar que se aplicamos estilos à etiqueta BODY , estes serão herdados pelo resto das etiquetas do documento. Isto será sempre assim, e no caso de que não volte a definir estes estilos nas seguintes etiquetas, dominará esta etiqueta. Este detalhe pode ser visto na etiqueta "P" , que tem definidos estilos que já foram definidos para "BODY" . Os estilos que são aplicados são os da etiqueta "P".

CSS Mais Poderoso. Definindo Arquivo .CSS

Poderemos melhorar a criação de nossa página/site, separando os arquivos de estilo (.css) do arquivo de página (.html) para isso devemos criar um arquivo onde somente colocamos as declarações de estilos de página e linkar todas as páginas do site com esse arquivo. Dessa forma, todas as páginas compartilham uma mesma declaração de estilos e, portanto, se a mudamos, mudarão todas as páginas. As vantagens são para se economizar em linhas de código HTML (o que reduz o peso do documento) e se evita repetir dezenas de tags, e com isso deixar nosso HTML cada vez mais longo e confuso de se interpretar.

Veremos agora como o processo para incluir estilos com o arquivo externo. 

1 - Criamos o arquivo com a declaração de estilos (usando editor de texto puro)

Do mesmo modo que já criamos nossos códigos HTML, vamos criar um arquivo de texto normal, que ao salvar vamos atribuir a extensão .css para lembrarmos sobre sua função. O texto que devemos incluir deve ser escrito exclusivamente em sintaxe CSS, ou seja, seria errado incluir o código HTML nas etiquetas e etc. Podemos ver um exemplo a seguir: 

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
} 

2 - Linkamos a página com a folha de estilos 

Para isso, vamos colocar a etiqueta com os atributos:

• rel="STYLESHEET" indicando que o link é com uma folha de estilos
• type="text/css" porque o arquivo é de texto, em sintaxe CSS
• href="estilos.css" indica o nome do arquivo fonte dos estilos (salve na mesma pasta onde vai criar o código HTML)

Vejamos um exemplo abaixo! Ignore e não digite o # pelas razões explicadas anteriormente nas tags.

<#!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<#html>
<#head>
 <#link rel="STYLESHEET" type="text/css" href="estilos.css">
 <#title>Pagina que lê estilos<#/title>
<#/head>

<#body>
<#h1>Pagina que lê estilos<#/h1>
Esta pagina tem no cabeçalho a etiqueta necessária para linkar com a folha de estilos. É muito facil
<#br>
<#br>
<#table width="300" cellspacing="2" cellpadding="2" border="0">
<#tr>
    <#td>Isto está dentro de um TD, logo tem estilo próprio, declarado no arquivo externo<#/td>
<#/tr>
<#tr>
    <#td>A segunda fila do TD<#/td>
<#/tr>
<#/table>

<#/body>
<#/html> 

Os estilos se herdam de uma etiqueta para outra, tal como foi indicado anteriormente. Por exemplo, se tivermos declarado no alguns estilos, em geral, estas declarações também afetarão à etiquetas que estejam dentro desta etiqueta.

Em muitas ocasiões mais de uma declaração de estilos afeta a mesma parte da página. Sempre se leva em conta a declaração mais particular. Porém, as declarações de estilos podem ser realizados de múltiplas formas e com várias etiquetas, também entre essas formas existe uma hierarquia de importância pra resolver conflitos entre várias declarações de estilos diferentes para uma mesma parte da página. Pode ser visto a seguir, esta hierarquia, primeiro colocamos as formas de declarações mais gerais, e portanto, menos respeitadas em caso de conflito:

• Declaração de estilos com arquivo externo. (para todo o site web)
• Declaração de estilos para toda a página. (com a etiqueta,que são inseridas no cabeçalho do documento. 

É importante assinalar que a sentença de importação do arquivo CSS deve ser escrita na primeira linha da declaração de estilos, algo parecido ao código seguinte. 

<#style type="text/css">
#@import url ("estilo.css");
#body{
#background-color:#ffffcc;
}
<#/style> 
O funcionamento é o mesmo que se escrevêssemos todo o arquivo a importar dentro das etiquetas dos estilos, com a garantia de que, se redefinimos dentro do código HTML (entre as etiquetas) estilos que haviam ficado definidos no arquivo externo, os que se aplicarão serão os que tivermos redefinido.

Assim, no exemplo anterior, mesmo que tivéssemos definido em estilo.css uma cor de fundo para a página, a cor que prevaleceria seria o definido em seguida da importação: #ffffcc 

A diferença entre este tipo de importação do tipo e a que vimos anteriormente: 

<#link rel="stylesheel" type="text/css" href="folha.css"> 

É que @import url ("estilo.css") costuma ser utilizado quando existe umas pautas básicas no trabalho com os estilos (que se definem em um arquivo a importar) e uns estilos específicos para cada página, que se definem a seguir, dentro do código HTML entre as etiquetas , como é o caso do exemplo visto anteriormente.

Atributos e Sintaxe CSS

• Para definir um estilo se utilizam atributos como font-size,text-decoration... seguidos de dois pontos e o valor que lhe desejamos atribuir. Podemos definir um estilo a base de definir muitos atributos separados por ponto e vírgula.
• Exemplo:
  font-size: 10pt; text-decoration: underline; color: black; (o último ponto e vírgula da lista de atributos é opcional) 
  
  
• Para definir o estilo de uma etiqueta basta a escrevermos seguida da lista de atributos fechados entre chaves.
• Exemplo:
  H1{text-align: center; color:black} 
  
  
• Os valores que se podem atribuir aos atributos de estilo podem ser vistos em uma tabela no seguinte capítulo. Muitos destes valores são unidades de medida, por exemplo, o valor do tamanho de uma margem ou o tamanh da fonte. As unidades de medida são as seguintes:

Pontos	pt
Polegadas	in
Centímetros	cm
pixels	px

Para facilitar tua vida criamos uma tabela de atributos de estilos para CSS, as mais usadas é claro!

Por hora ficamos por aqui. Até a próxima Aula!

JMJG

Instrutor/Eng Eletrônico

LEIA MAIS...