CSS - Cascading Style Sheets

CSS - Cascading Style Sheets
Folha de Estilos em Cascata Profa:Tânia Neuenschwander

Introdução Qual é a diferença entre HTML e CSS?
CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. O HTML é uma linguagem interpretada.

A sintaxe básica das CSS
Seção { propriedade: valor;} Onde: Seção: é TAG que receberá a propriedade Propriedade: é uma característica da TAG Valor: é a color, tamanho, fonte... ; : encerra o comando Exemplo: body {background-color: #FF0000;}

Estrutura Básica do HTML
Onde aplicar CSS? 1ª maneira(in-line): É utilizando o atributo style do HTML, dentro da própria TAG que receberá o estilo. Exemplo: <body style="background-color: #FF0000;“>

Onde aplicar CSS? 2ª maneira (Interno): Utilizando a TAG style do HTML, na seção head. Exemplo: <head> <style type="text/css"> body {background-color: #FF0000;} </style> </head>

Onde aplicar CSS? 3ª maneira (externa): É lincar para uma folha de estilos, que é um arquivo de texto com a extensão .css. No documento HTML (.htm) cria-se um link para a folha de estilos (.css). Exemplo do link: <head> <link rel=“estilo" type="text/css" href=“style.css" /> </head>

Exemplo Estrutura Básica
Vantagem do CSS A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML.

Criando uma Pagina HTML
Propriedades do CSS 'color‘: define a cor da letra de uma seção: Ex. h1 {color: #00FF00;} o texto do cabeçalho de nível 1 será verde. 'background-color‘: define a cor do fundo de uma seção: Ex. h2 {background-color: #0000FF;} a cor do fundo do cabeçalho de nível 2 será azul. body { background-color: #FFCC66; } a cor do fundo da página será “mostarda”.

Propriedades do CSS ‘background-image’: define uma imagem de fundo
body {background-color: #FFCC66; background-image: url(“imagem.jpg");} a imagem será exibida como fundo de página. ‘background-repeat’: define como a exibição da imagem será repetida. background-repeat: repeat-x – repete na horizontal background-repeat: repeat-y – repete na vertical background-repeat: no-repeat – não repete

Propriedades do CSS background-attachment: define se a imagem de fundo ficará fixa ou não. Background-attachment: scroll - imagem rola com a pág Background-attachment: fixed - imagem fica fixa. background-position: define a posição da imagem (do topo e da margem esquerda). background-position: 2cm 2cm – 2cm do topo e da margem esquerda background-position: 50% 25% background-position: top right – canto superior direito (válido: top, bottom, center, left e right)

Propriedades do CSS Background extendido: Background abreviado:
body{ background-color: #FFCC66; background-image: url(“imagem.gif"); background-repeat: no-repeat; background- attachment: fixed; background-position: bottom right ;} Background abreviado: body{background: #FFCC66 url(“imagem.gif") no-repeat fixed bottom right;} ou seja: background: [color] [image] [repeat] [attachment] [position]

Propriedades do CSS font-family: define uma lista de fontes para uma seção da página. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: serif;} h3 {font-family: monospace;} font-variant: texto normal ou small-caps font-weight :define quão negrito será a fonte (um nº no intervalo de 100 a 900). font-size: define o tamanho da fonte (20px, 1cm, 12pt, 2em) Abreviado font: italic bold 30px arial, sans-serif

Propriedades do CSS Formatação do texto:
text-indent: 30px; (recuo 1ª linha) text-align: center; (Alinhamento) text-decoration: underline; (sublinhado) (overline – linha acima ou line-through tachado) letter-spacing: 6px; (espaço entre letras) text-transform: uppercase; (maiúsculo) (ou capitalize ou lowercase - minúsculo )

Comandos Básicos Separadores – Linha Horizontal
Propriedades do CSS Formatação de links pseudo-classe: a:link {color: green;} (link não visitado) a:visited {color: yellow;} (link visitado) a:active {background-color: blue;} (link ativo) a:hover {color:red; font-style: italic;} (sobre o link) Você pode retirar o sulinhado do link a { text-decoration:none; }

Comandos Básicos Separadores - Parágrafo
Propriedades do CSS Usando class e id para estilizar seções Formata a seção especial: (.nome_da_class) .inicio {fonte-size: 2cm; color= blue; letter-spacing: 6px; } Faz uso da classe: (seção class=“nome_da_class”) <h1 class="inicio">Cabeçalho com formatado diferente</h1> Cria e formata o identificador: #c1 { color: red; } Faz uso da identificação na seção: <h1 id="c1">Cabeçalho 1 a ser diferenciado</h1>

Propriedades do CSS Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos . Exemplo 1: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } Exemplo 2: body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }

Propriedades do CSS Padding pode ser entendido como "enchimento“, ele define simplesmente a distância entre a borda e o conteúdo do elemento. Exemplo: h1 { background: yellow; padding: 20px 20px 20px 80px; } Width define a largura de um elemento. Height define a altura de um elemento.

Propriedades do CSS Bordas: border-width: define a espessura das bordas. Valores válidos thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. border-color: define as cores para as bordas. border-style: define o tipo da borda. Valores válidos:dotted, dashed, solid, double, groove, ridge, inset, outset. Podemos indexar as bodas utilizando: border-top-style border-bottom-color border-right-style border-left-width

Propriedades do CSS Exemplos: H1 { border-top-style: solid; border-top-color: red; border-bottom-style: solid; border-bottom-color: blue; border-right-style: solid; border-right-color: green; border-left-style: solid; border-left-color: orange; } p { border-width: 1px; border-style: solid; border-color: blue; } p { border: 1px solid blue; } <!* idem ao anterior */>

Propriedades do CSS Agrupando elementos (span e div) No estilo: span.benefit { color:red; } #bom { background:blue; } #ruim { background:red; } No html: <p>Para ter uma vida <span class="benefit">feliz</span> e <span class="benefit">saudável</sp an>: <div id="bom"> <ul>É bom: <li>Comer frutas e verduras</li> <li>Praticar esportes</li> <li>Viajar</li> <li>Dormir bem </li> </ul> </div> <div id="ruim"> <ul>Não é bom: <li>Comer gordura animal</li> <li>Trabalho em excesso</li> <li>Vida ociosa</li>

Propriedades do CSS <html> <head> <title>Barra de Navegação</title> <style type="text/css"> .barNav a { font: 12px Arial, Verdana,Helvetica,sa ns-serif; color: #000; text-decoration: none; background: #FFC50C; text-align: center; padding: 1px 5px; margin-right:1px; border: 1px solid #000; } .barNav a:hover { color: #666; background: #FCFCFC; border: 1px solid #666; <body> <p class="barNav"> <a href="caminho/arqui vo.html" >Home </a> <a href="caminho/arqui vo.html">Quem somos</a> <a href="caminho/arqui vo.html">Portfólio </a> <a href="caminho/arqui vo.html">Contato </a> </p> </body> </html>

CSS - Cascading Style Sheets

Apresentações semelhantes

Apresentação em tema: "CSS - Cascading Style Sheets"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

CSS - Cascading Style Sheets

Apresentações semelhantes

Apresentação em tema: "CSS - Cascading Style Sheets"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback