Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao CSS
CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior produtividade Maior facilidade de actualização
Implementação Os estilos podem ser inseridos nos documentos de três maneiras diferentes: Externas - Por meio de um link direcionado para um arquivo de style sheet em separado, funcionando para uma ou mais páginas web. Internas - Por meio de uma inserção de um style sheet numa única página web Em linha - Pelo acréscimo de atributos de estilo inline em algumas tags
Externas Neste caso temos um ficheiro exterior que pode ser associado a vários ficheiros html Exemplo do que temos de escrever no ficheiro html <html> <head> <link rel=“STYLESHEET” href=“estilo.css” type=“text/css”> <title>...</title> </head> <body>...
Internas Definidas num documento específico. Permitem aplicar o estilo apenas a esse documento. O elemento style têm de ser escrito dentro do head. <html> <head> <style type=“text/css”> h1 {color:#00ff00} h2 {color:#ffff00} P {color: #ffffff} </style> </head> <body> <h1>nivel 1</h1> <h2>nivel 2</h2> <p>paragrafro</p> </html>
Em linha Pelo acréscimo de atributos de estilo inline em algumas tags como <p>, <div>, ou <span> Exemplo <div style="margin-left: 0.5in; font-size: 10pt"> Este deve ser um bloco indentado com algum <span style="font-weight: bold; background: #FFFF00"> texto selecionado</span> dentro dele </div>
Precedência dos CSS A ordem de precedência dos cascading style sheets é esta: atributos de estilos inline têm precedência sobre tags de style inseridas tags de style inseridas por sua vez têm precedência sobre style sheets por link
Sintaxe Sintaxe Exemplo Selector { propriedade:valor} Body { background-color: #FFFFFF } Selector { propriedade:valor; propriedade:valor} P { text-align:center; color:red} Selector { propriedade:valor; Propriedade:valor } P text-align: center; Color: black; Font-family:arial Selector,selector,selector { propriedade:valor } H1,h2,h3 { color: green }
Sintaxe Tecnologia dos Media Exemplo: Ficheiro HTML no body <h1>Tecnologia dos Media</h1> <p> Informática </p> Ficheiro CSS H1 { color:red } P { color:blue } Resultado: Tecnologia dos Media Informática
Tipos de selectores Selectores de classe Um selector de classe permite identificar um conjunto de ocorrências de um elemento e atribuir-lhes um estilo comum. A classe pode ser : genérica - .rd{ color:blue} <p class=rd>texto em azul</p> <h1 class=rd>texto tambem em azul</h1> um tipo de elementos, ou seja só fica associada a um tipo de elementos p.p1 { color: red } <p class=p1>texto em vermelho</p>
Tipos de selectores Selectores de ID Um selector de ID permite identificar uma única ocorrência de um elemento HTML. Os selectores ID são criados pelo carácter # seguido do nome. #nome { color:blue; background: black } <p id=nome>Só este elemento é que é identificado como nome</p>
Herança Um aspecto importante de algumas propriedades é o facto de se propagarem para os elementos "filhos". Exemplo: <body> <h1>Título</h1> <p>Parágrafo: texto, texto, texto, texto, texto.</p> ... </body> body { font-family: Verdana, Arial, sans-serif; font-size: 14px; } Neste exemplo, não é necessário voltar a definir estas propriedades para os elementos H1 e P. Todos os elementos "filhos" do BODY vão herdar as propriedades de texto definidas para o BODY.
DIV e SPAN Existem dois elementos genéricos que não têm significado semântico nem produzem nenhum efeito, mas permitem definir secções/blocos e são muito usados com CSS. Permitem agrupar conteúdo em unidades lógicas: <div>: quebra o fluxo normal do documento <span>:mantém o fluxo normal do conteúdo <div class="zonaesquerda"> <p>texto, texto, texto</p> </div> <div class="zonacentral"> <h1>Título</h1> <p> texto, texto, texto, <span class="nota">texto, texto</span>, texto</p> <p> texto, texto, texto, texto, texto, texto</p>
DIV e SPAN Título Css .Zonaesquerda { color: green } .zonacentral { color: yellow } .nota { color: red } Resultado: texto, texto, texto Título texto, texto, texto, texto, texto texto texto, texto, texto, texto, texto, texto
Pseudo-elementos p:first-line { text-transform: uppercase } Pseudo elementos são elementos fictícios que não existem em HTML e que se referem a uma sub parte do elemento HTML. Utiliza-se o separador : entre o nome do elemento e do pseudo-elemento. p:first-line { text-transform: uppercase } p:first-letter {font-size: 200%}
Unidades de medida Unidade Descrição % Percentagem de qualquer unidade 1 em é igual ao tamanho da fonte do elemento corrente ex 1 ex é aproximadamente metade da altura da fonte px pixels Unidade Descrição cm Centímetros in Polegadas mm Milímetros pt Ponto (1 pt é 1/72 polegadas )
Unidades de cor Unidade Descrição Exemplo do vermelho Nome da cor red rgb(x,y,z) Um valor rgb rgb(255,0,0) rgb(x%,y%,z%) Uma percentagem rgb rgb(100%,0%,0%) #rrggbb Um número hexadecimal #ff0000
Texto Propriedade Descrição Valores Exemplo font-size (herdado) Ajusta o tamanho do texto tamanho (pt, in, cm, px) percentagem { font-size: 12pt } { font-size: 200% } font-family (herdado) Ajusta os tipos de letra e as alternativas (em ordem de preferência) nome do tipo de letranome da família da fonte { font-family: Trebuchet MS, Sans-serif } text-decoration (não herdado) Efeitos sobre o texto none underline overline line-through {font-decoration: overline} font-weight (herdado) Ajusta o peso do tipo normal bold bolder lighter { font-weight: bold } font-style (herdado) Texto em itálico normal italic {font-style: italic}
Texto Propriedade Descrição Valores Exemplo text-align (herdado) Alinhamento do texto left Center right justify { text-align: center } text-indent (herdado) indentação da primeira linha do texto tamanho (pt, in, cm, px) { text-indent: 0.5in } line-height (herdado) Altura das linhas de um bloco de texto. tamanho (pt, in, cm, px) percentagem {line-height: 18p t} { line-height: 200% } vertical-align (não herdado) Alinha o texto verticalmente dentro do elemento baseline sub super top text-top middle bottom { vertical-align: top }
Padding Propriedade Descrição Valores Exemplo padding (herdado) Espaço entre a borda do elemento e o conteudo do elemento tamanho (pt, in, cm, px) { padding: 20px } padding-top padding -left padding -bottom padding -right (herdado) Em relação a cada um dos lados {padding-top: 0.5in }
Cor e background Propriedade Descrição Valores Exemplo color (herdado) Cor do texto Unidades da cor { color: red } background-color (não herdado) Cor de fundo de um elemento { background-color: black} Background-image (não herdado) Ajusta as imagens do fundo url {background-image: url(‘imagem1.jpg’)}
margens Propriedade Descrição Valores Exemplo margin (não herdado) Permite especificar a margem do elemento tamanho (pt, in, cm, px) { margin: 8px } margin-top margin-left margin-bottom margin-right (não herdado) Permite especifar cada uma das margens { margin-top: 12pt }
Contornos Propriedade Descrição Valores Exemplo border (herdado) Ajusta o contorno do elemento grossura: em pixels. estilo: none, dotted, dashed, solid, double. cor: valor da cor. { border: 4px double green; } border-top border-left border-bottom border-right (não herdado) Ajusta cada um dos contornos { border-top: 2px dotted red; }
Listas Propriedade Descrição Valores Exemplo list-style-type herdado) define a aparência do marcador de cada item de uma lista. Não numéricos: disc circle square { list-style-type: disc; } Numéricos: decimal decimal-leading-zero lower-roman upper-roman Lower-latin upper-latin { list-style-type: upper-roman; }
Posicionamento Com CSS é possível alterar o fluxo normal de uma página e definir o posicionamento de cada elemento
Posicionamento Todos os elementos têm a propriedade position que estabelece a forma de "cálculo" da posição de um elemento. 4 alternativas: static: o elemento é posicionado segundo o fluxo normal. O valor por defeito. relative: a posição da "caixa" é calculada em relação à posição normal (static). absolute: permite posicionar relativamente ao elemento pai. fixed: o cálculo da posição é igual ao método absoluto, mas o elemento pai é a "janela de visualização" (viewport).
Posicionamento A propriedade position, é usada juntamente com: top: deslocamento do lado superior do elemento. left: deslocamento do lado esquerdo do elemento. bottom: deslocamento do lado inferior do elemento. right: delocamento do lado direito do elemento. e: width: largura do elemento. height: altura do elemento. As unidades podem ser: Fixas: pixels (px), points (pt), centímetros (cm), milímetros (mm). Relativas: em, percentagem (%)
Posicionamento Exemplo: Div=parte1 Div=parte2 Div=parte2a Div=parte2b <div class=parte1>1º bloco de informação</div> <div class=parte2> 2º bloco de informação <br><br> <div class=parte2a> 1º sub bloco de informação <br> Este bloco está inserido no 2º bloco. </div><br> <div class=parte2b> 2º sub bloco de informação <br> Este bloco também está inserido no 2º bloco, após o bloco anterior. <div class=parte2c> 3º sub bloco de informação <br> </div> <div class=parte3>3º bloco de informação </div> Div=parte1 Div=parte2 Div=parte2a Div=parte2b Div=parte2c Div=parte3
Posicionamento Continuação do exemplo parte CSS: .parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; color:#ffffff; .parte2a { background-color:#666666; font-size:12pt; width:400px; margin-left:30px; .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; .parte3 { background-color:#cccccc; font-size:14pt; width:460px; padding:20px;
Resultado
Posicionamento Relativo A posição é calculada em relação à localização natural do elemento. p { position: relative; top: 10px; right: 50px; }
Posicionamento .parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; color:#ffffff; position:relative; top:20px; left:40px; .parte2a { background-color:#666666; font-size:12pt; width:400px; margin-left:30px; .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; .parte3 { background-color:#cccccc; font-size:14pt; width:460px; padding:20px;
Resultado
Posicionamento Absoluto A posição do elemento é calculada em relação ao "pai". Temos a questão de saber qual é o pai? Exemplo 1: Uso isolado do position absolute Neste caso o pai deste elemento passa a ser o body, por isso o elemento foi lá para cima Exemplo 2: Uso do position absolute com position relative Neste caso o pai deste elemento passa a ser o elemento que tem a position relative. Nota o elemento que usa o absolute tem de estar dentro do elemento que usa o relative div { position: relative; p { position: absolute; top: 10px; left: 50px; } p { position: absolute; top: 10px; left: 50px; }
Posicionamento .parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; color:#ffffff; .parte2a { background-color:#666666; font-size:12pt; width:400px; margin-left:30px; position:absolute; top:0; right:0; .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; .parte3 { background-color:#cccccc; font-size:14pt; width:460px; padding:20px;
Resultado
Posicionamento .parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; color:#ffffff; position:relative; .parte2a { background-color:#666666; font-size:12pt; width:400px; margin-left:30px; position:absolute; top:0; right:0; .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; .parte3 { background-color:#cccccc; font-size:14pt; width:460px; padding:20px;
Resultado
Posicionamento Fixo p { position: fixed; top: 50px; left: 10px; } Igual ao posicionamento absoluto, mas relativamente à janela. p { position: fixed; top: 50px; left: 10px; }
Posicionamento Float A propriedade float permite desligar o elemento do fluxo normal e deslocá-lo para a esquerda ou direita da linha. O mais interessante é que o restante conteúdo pode fluir paralelamente ao elemento. Valores possíveis: none, left, right; img { float: left; }