Introdução CSS

1. CSS - INTRODUÇÃOProf.ª. Giorgia Barreto L. Parrião [2017] DESIGN WEB

2. DEFINIÇÃO CSS é uma linguagem para estilos que define o layout de documentos HTML. É um mecanismo simples para adicionar estilos: fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e etc. Qual é a diferença entre CSS e HTML? HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. Profª Giorgia Barreto Lima Parrião 2

3. VANTAGENS  Economizar o seu tempo.  Diminuir o tamanho do código de sua página.  Sua página irá carregar mais rapidamente.  Mais facilidade de manter e fazer alterações na página.  Mais controle no layout da página.  Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); Profª Giorgia Barreto Lima Parrião 3

4. MÉTODOS DE APLICAÇÃO EM HTML Método in-line (direto no html) <body style =“background-color: black”> Método interno (tag style) <style type=“text/css”> body { background-color: black;} </style>

5. Método externo (link para uma folha de estilos) <link rel=“stylesheet”type=“text/css” ref=“estilo.css”> Dentro do estilo.css body {background-color: black;} 5

6. Forma de inserção no código HTML <html> <head> <title>Minha página com CSS </title> <link rel=“stylesheet”type=“text/css” href=“estilo.css”> </head> <boby> <h1>Está página tem estilo</h1> </body> </html> 6

7. REGRA CSS É a unidade básica de uma folha de estilo (a menor porção do código) capaz de produzir um efeito de estilização. Composta por dois componentes: seletor e declaração Prof.ª Giorgia Barreto Lima Parrião 7

8. COMPONENTES Profª Giorgia Barreto Lima Parrião 8 Seletor: É a tag do elemento da marcação ou uma entidade capaz de definir com precisão em qual lugar da marcação será aplicada a regra CSS. Um seletor pode conter mais de uma declaração. Compreende Declaração: Determina os parâmetros de estilização. :  Propriedade: característica do elemento  Valor: refere-se a quantidade ou qualidade do elemento

9. SINTAXE Profª Giorgia Barreto Lima Parrião 9

10. EXEMPLO Profª Giorgia Barreto Lima Parrião 10

11. DIV A tag <div> define uma divisão ou uma seção em um documento HTML, é frequentemente utilizado para bloquear o grupo de elementos para formatá-los com estilos. serve para formatar as caixas dando tamanho, bordas, cores e outras funcionalidades. O elemento div deve ser inserido na body. toda div deverá ser nomeada através do atributo id , conforme exemplo: <div” atributo id= “nome” > Entre <div id= “nome”> e </div> coloca-se o conteúdo. 11

12. Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um mecanismo genérico para agrupar e prover estrutura aos documentos. Uma id e/ou class é em geral usada para fornecer uma identidade a uma div ou span com o propósito de fornecer uma referência para estilização por CSS ou captura por um script. HTML <DIV CLASS="sidebar">Matemática</DIV> CSS DIV.sidebar { font-family: "Arial"; font-size: 12pt; text-align: right; background-color: #C0C0C0; margin-left: 10px; margin-right: 10px; } 12

13. DIV - EXEMPLO CSS Style { background: white; font-size: 36px;} HTML <body> <div id=“Style”> conteúdo </div> </body> 13

14. ATRIBUTO CLASS a função do atributo "class" é nomear a <div>. Com ele podemos definir diferentes estilos para um mesmo elemento. Por exemplo, se quiséssemos ter 2 tipos de parágrafos "<p>" em nosso site (um alinhado à direita e outro centralizado) Fazemos assim:

15. CSS p.right {text-align: right} p.center {text-align: center} HTML <p class="right"> Este outro parágrafo está direita </p> <p class="center"> Este outro parágrafo está centralizado </p> Profª Giorgia Barreto Lima Parrião 15

16. ATRIBUTO ID  Assim como a "class“ sua função é nomear a <div>.  Com o atributo ID podemos definir um estilo único para ser utilizado em muitos elementos.

17. CSS #right {text-align: right} HTML <p id="right"> Este paragrafo também ficará alinhado à direita </p> <h3 id="right"> Este header também ficará alinhado à direita </h3> Observação: o atributo ID deve ter valor único no documento. 17

18. DIFERENÇAS Profª Giorgia Barreto Lima Parrião 18 CLASS Vários estilos para um único elemento (seletor). ID Estilo único para muitos elementos (seletor). . x

19. PROPRIEDADE: FLOAT A propriedade float serve para posicionar duas ou mais divs uma do lado da outra. 19 Top Left Right Bottom

20. CSS #box{ width: 400px; border: 2px; solid red; text- align: justify; padding: 20 px; margin: 30px; float: left;} #box2 {width: 300px; border: 2px; solid blue; text- align: justify; float: left;} HTML <body> <div id=“box”>conteúdo</div> <div id=“box2”> conteúdo </div> </body> Profª Giorgia Barreto Lima Parrião 20

21. APLICAÇÕES Com CSS podemos formatar:  Background  Textos  Fontes  Margens  Bordas  Listas  Tabelas http://www.w3schools.com/css/css_examples.asp

22. EXERCÍCIO 1. Crie um site com 3 páginas (home, produtos, contato) utilizando a linguagem de marcação HTML. A. HOME: Deverá conter uma apresentação do produto comercializado pela empresa escolhida por você. B. PRODUTOS: Apresentar pelo menos 6 produtos com a apresentação de foto, descrição do produto e valor. C. CONTATO: Formulário de contato (Nome, e-mail, telefone, endereço, campo para deixar o recado e botão submit e reset) Profª Giorgia Barreto Lima Parrião 22

23. Orientações  A escolha do cliente é livre, exceto produtos ilegais e imorais.  Vocês deverá utilizar todos os elementos e atributos de HTML necessários à construção da sua página.  O layout da página é livre desde que não contenha nenhuma imagem ou texto imoral ou ilegal.  Você deverá escolher a forma de inserção da Folha de Estilo (CSS) para inseri-la ao seu site.  A Folha de estilo do site será criada na aula 2 de CSS. Profª Giorgia Barreto Lima Parrião 23

24. BIBLIOGRAFIA Profª Giorgia Barreto Lima Parrião 24  Silva, Mauricio S. Fundamentos de HTML 5 e CSS3. São Paulo: Novatec, 2015.

25. Prof.ª Giorgia Barreto Lima Parrião 25 Obrigada! Obrigada!!! Prof.ª. Giorgia Barreto

Introdução CSS

Introdução CSS

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a Introdução CSS

Similar a Introdução CSS(20)

Mais de Giorgia Barreto Lima Parrião

Mais de Giorgia Barreto Lima Parrião(20)

Introdução CSS