Baixar para ler offline
Post 4
- 1. O que éCSS O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento. Fonte: TECMUNDO LINK: http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htm Formas de utilização (Externo, embutido, inline) Externo - Existem 3 maneiras de colocarmos configurações de cores, fontes, tamanhos e outros em CSS para usarmos uma delas e a referencia do CSS como arquivo externo. <link rel="stylesheet" type="text/css" href="arquivo.css" /> Embutido – Comando CSS fica dentro da página HTML. Permite que a página fique dentro de outra página. <style type="text/css"> a { background: #ff9; color: #00f; text-decoration: underline; } </style> Inline – Possibilita que só aquele elemento seja estabilizado. <p style="border-style: groove; color: red;"> Copyright 2007 </p>
- 2. Tipos de Seletores(elemento HTML,Id ou Classe) Elemento HTML - Seletor universal ou seja qualquer elemento. *{ color: #000000; } Aplicável a todos os elementos ID - Seleciona o elemento <e> identificado com id. h1#chapter1 { text-align: center; } <e id="Id"... /> Classe – Seletor de classe: seleciona os alementos <e> em que se aplicou a “classe”. h1.pastoral { color: green; } <e class="classe"... /> Sintaxe @import "folha.css" tipo-midia; /* Comentários */ @media tipo-midia { seletor { Propriedade: valor(es); } };
- 3. Unidades Relativas Px – Tamanhode pixels (relativo ao dispositivo) Em – Tamanho relativo à fonte utilizada no elemento ao qual está inserido Ex – Corresponde à altura da fonte ‘x’ Absolutas In – Polegadas (1 polegada=2,54 cm) Cm – Centímetros Mm – Milímetros Pt – pontos (1pt=1/72 polegadas) Pc – Picas (1 pica=12 pontos) Porcentagem % - Porcentagem 0 – Valor ‘0’ não requer atribuição de unidade Exemplos de códigos usando CSS
- 4. Código – <!DOCTYPE> <html.lang="pt-br"> <head> <title>Folhas deEstilo</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div> <p>fatec fatec</p> <p>texto 2</p> </div> </body> </html> 1º Salvar o documento em formato CSS. 2º Inserir a imagem no mesmo diretório. LINK DA PÁGINA: file:///E:/FATEC%20CARAPICU%C3%8DBA/S%C3%ADtios/LAB/Aula%20- %202/CSS/ex20.html