desenvolvimento de sites css
Post on 28-Jun-2015
561 Views
Preview:
TRANSCRIPT
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 <!-- e --> 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
top related