Desenvolvimento de sites css
-
Upload
washington-oliveira -
Category
Documents
-
view
558 -
download
1
Transcript of Desenvolvimento de sites css
![Page 1: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/1.jpg)
Desenvolvimento de Sites
![Page 2: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/2.jpg)
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.
![Page 3: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/3.jpg)
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
![Page 4: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/4.jpg)
• 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.
![Page 5: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/5.jpg)
<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.
![Page 6: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/6.jpg)
<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
![Page 7: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/7.jpg)
<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>
![Page 8: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/8.jpg)
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
![Page 9: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/9.jpg)
• 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...
![Page 10: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/10.jpg)
• 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").
![Page 11: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/11.jpg)
• 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.
![Page 12: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/12.jpg)
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.
![Page 13: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/13.jpg)
Criando uma regra css
![Page 14: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/14.jpg)
Criando uma regra css• Devemos clicar em nova regra desta forma vamos
criar uma folha de estilos .....
![Page 15: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/15.jpg)
Em primeiro lugar devemos Selecionar o texto para podermos criar um novo estilo
Agora classificamos o cabeçalho
![Page 16: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/16.jpg)
1
2
3
4
![Page 17: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/17.jpg)
• Agora salvaremos escolher Um nome para o nosso Novo estilo OBS: O arquivo deverá Obrigatoriamente ser salvo Na pasta do SITE
![Page 18: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/18.jpg)
• Devemos salvar nosso estilo na mesma pasta que os nossos outros arquivos já estão salvos
![Page 19: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/19.jpg)
• Nessa etapa iremos definir qual o padrão que iremos usar .
![Page 20: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/20.jpg)
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
![Page 21: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/21.jpg)
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
![Page 22: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/22.jpg)
• Estilo anexado ao texto
![Page 23: Desenvolvimento de sites css](https://reader035.fdocument.pub/reader035/viewer/2022062419/558fd0271a28ab391b8b4660/html5/thumbnails/23.jpg)
Atividade• Faça um site sobre Uma escola de informática• O site deve conter .
• 4-paginas• Home• Historia• Peças• contato