web design > html (aula 2)

Web DesignQuando os sonhos se tornam realidade... (2)

Web Design

Como vimos, o HTML é responsável pelo conteúdo e pelas estruturas de marcação das páginas, as TAGS.

Web Design

E após a marcação estrutural, é hora de dar forma e estilo visual aos elementos de acordo com o layout desenvolvido. E essa "estilização" é feita utilizando o CSS (Cascate Style Sheets).

Web Design

CSS, a Sintaxe: h1 { color: green }

Seletor (TAG)

Propriedade Valor

Declaração

Web Design

CSS, a Sintaxe: h1 { color: green } /* exemplo de comentário */

Seletor (TAG)

Propriedade Valor

Declaração

Web Design

Com intuito de facilitar a aplicação de estilo aos seletores (tags), o CSS conta com recurso de IDs e CLASSes.

Web Design

Onde, ID - identificadores exclusivos, só pode ser utilizado uma vez. Class - prédefinições de estilo, podem ser usadas quantas vezes quiser.

Web Design

Exemplo de aplicação, ID - no CSS, é identificado por #ex.: #cabecalho { background:black } Class - é identificado por um . antes do seletorex.: .box { border: 1px solid #000 }

Web DesignVamos praticar um pouquinho...

Web DesignWebsite pessoal (continuação)


body

#container#coluna-direita

#corpo

#rodape


Após a marcação estrutural, precisamos aplicar as dimensões corretas aos boxes (DIVs). Podemos agrupar as definições de estilo dentro de uma tag <STYLE>, que deverá ser declarada no <HEAD> do arquivo.


Exemplo:...<head>

<title>Titulo do site</title><style>

body { background-color: black; }</style>

</head>...

Web Design

<continua />

web design > html (aula 2)

Education