Desenvolvimento de sites css

Desenvolvimento de Sites

O que é CSS ?

• CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata e é definida como:

• Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.

Por que CSS ?

• A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site. Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do site

• Temos aqui três conjuntos de 'tags' - as tags, normalmente são aos pares, mas nem sempre é assim. Englobando toda a página temos o par de tags <html>...</html>. A primeira <html> é a 'tag de abertura' e a 'tag' de fechamento é a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html.

<body> ...</body>• O par de tags <body>...</body> engloba todo o

conteúdo da sua página Web, texto, imagens, filmes Flash - e tudo mais.

<p>...</p>.• Cria-se um parágrafo, colocando texto entre o par

de tags <p>...</p>. Em HTML, um parágrafo é um bloco constituido de uma ou mais sentenças separado do próximo bloco por um espaço

<h1>...</h1>• Para títulos, existem seis níveis distintos de

ênfase, indo desde o mais alto nível <h1>...</h1> até o mais baixo<h6>...</h6>

Folha de estilos

• Uma folha de estilos é conceitualmente bem simples, ela é uma página contendo definições ou especificações de estilos, que instrui o navegador como apresentar os diferentes elementos de uma página

• Para simplificar, começaremos construindo nossa folha de estilos dentro da própria página Web

Os estilos que iremos usar serão definidos dentro do par de tags <head>...</head> como mostrado a seguir...

• type="text/css" diz ao navegador que estamos usando um arquivo de texto puro para descrever nossos estilos, nada de especial aqui.

• title="mystyles" tem por finalidade identificar seus estilos através de um nome de sua livre escolha.

• media="all" Você pode ter uma folha de estilos para descrever como sua página será apresentada na tela de um computador (media="screen") e outra completamente diferente para formatar sua página para impressão (media="print").

• Os caracteres  se constituem em um modo de se 'esconder' texto em uma página Web - você verá os textos somente na marcação do código. Isto é denominado 'comentario', e uma vez que os estilos estão dentro da seção <head>...</head> do documento, eles não deverão aparecer na apresentação.

Definir• A primeira coisa que faremos será definir os

estilos para a página como um todo, o body da página. Tudo que estiver dentro das tags <body>...</body> terá este estilo ou conjunto de estilos que lhe for aplicado.

Criando uma regra css

Criando uma regra css• Devemos clicar em nova regra desta forma vamos

criar uma folha de estilos .....

Em primeiro lugar devemos Selecionar o texto para podermos criar um novo estilo

Agora classificamos o cabeçalho

1

2

3

4

• Agora salvaremos escolher Um nome para o nosso Novo estilo OBS: O arquivo deverá Obrigatoriamente ser salvo Na pasta do SITE

• Devemos salvar nosso estilo na mesma pasta que os nossos outros arquivos já estão salvos

• Nessa etapa iremos definir qual o padrão que iremos usar .

Nome Função

color cor da fonte

font-family tipo de fonte

font-size tamanho de fonte

font-style estilo de fonte

font maneira abreviada para todas as propriedades

Adicionando css• Agora com o estilo já

salvo basta selecionar o texto que ira receber o estilo vá em parágrafo e selecione o correspondente

• Estilo anexado ao texto

Atividade• Faça um site sobre Uma escola de informática• O site deve conter .

• 4-paginas• Home• Historia• Peças• contato

Desenvolvimento de sites css

Documents

Transcript of Desenvolvimento de sites css