A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Pedro Costa Introdução ao CSS 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao CSS.

Apresentações semelhantes


Apresentação em tema: "Pedro Costa Introdução ao CSS 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao CSS."— Transcrição da apresentação:

1 Pedro Costa Introdução ao CSS 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao CSS

2 Pedro Costa Introdução ao CSS 2 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 CSS

3 Pedro Costa Introdução ao CSS 3 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 Implementação

4 Pedro Costa Introdução ao CSS 4 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......

5 Pedro Costa Introdução ao CSS 5 h1 {color:#00ff00} h2 {color:#ffff00} P {color: #ffffff} nivel 1 nivel 2 paragrafro 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.

6 Pedro Costa Introdução ao CSS 6 Pelo acréscimo de atributos de estilo inline em algumas tags como,, ou Exemplo Este deve ser um bloco indentado com algum texto selecionado dentro dele Em linha

7 Pedro Costa Introdução ao CSS 7 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

8 Pedro Costa Introdução ao CSS 8 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 }

9 Pedro Costa Introdução ao CSS 9 Sintaxe Exemplo: Ficheiro HTML no body Tecnologia dos Media Informática Ficheiro CSS H1 { color:red } P { color:blue } Resultado: Tecnologia dos Media Informática

10 Pedro Costa Introdução ao CSS 10 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} texto em azul texto tambem em azul um tipo de elementos, ou seja só fica associada a um tipo de elementos p.p1 { color: red } texto em vermelho

11 Pedro Costa Introdução ao CSS 11 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 } Só este elemento é que é identificado como nome

12 Pedro Costa Introdução ao CSS 12 Herança Um aspecto importante de algumas propriedades é o facto de se propagarem para os elementos "filhos". Exemplo: Título Parágrafo: texto, texto, texto, texto, texto.... 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.

13 Pedro Costa Introdução ao CSS 13 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: : quebra o fluxo normal do documento :mantém o fluxo normal do conteúdo texto, texto, texto Título texto, texto, texto, texto, texto, texto texto, texto, texto, texto, texto, texto

14 Pedro Costa Introdução ao CSS 14 DIV e SPAN 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

15 Pedro Costa Introdução ao CSS 15 Pseudo-elementos p:first-line { text-transform: uppercase } p:first-letter {font-size: 200%} 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.

16 Pedro Costa Introdução ao CSS 16 Unidades de medida UnidadeDescrição %Percentagem de qualquer unidade em1 em é igual ao tamanho da fonte do elemento corrente ex1 ex é aproximadamente metade da altura da fonte pxpixels UnidadeDescrição cmCentímetros inPolegadas mmMilímetros ptPonto (1 pt é 1/72 polegadas )

17 Pedro Costa Introdução ao CSS 17 Unidades de cor UnidadeDescriçãoExemplo do vermelho Nome da corO nome da corred rgb(x,y,z)Um valor rgbrgb(255,0,0) rgb(x%,y%,z%)Uma percentagem rgbrgb(100%,0%,0%) #rrggbbUm número hexadecimal#ff0000

18 Pedro Costa Introdução ao CSS 18 Texto PropriedadeDescriçãoValoresExemplo 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 textonone 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áliconormal italic {font-style: italic}

19 Pedro Costa Introdução ao CSS 19 Texto PropriedadeDescriçãoValoresExemplo 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 }

20 Pedro Costa Introdução ao CSS 20 Padding PropriedadeDescriçãoValoresExemplo 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 tamanho (pt, in, cm, px) {padding-top: 0.5in }

21 Pedro Costa Introdução ao CSS 21 Cor e background PropriedadeDescriçãoValoresExemplo color (herdado)Cor do textoUnidades da cor{ color: red } background-color (não herdado) Cor de fundo de um elemento Unidades da cor { background-color: black} Background-image (não herdado) Ajusta as imagens do fundo url{background-image: url(imagem1.jpg)}

22 Pedro Costa Introdução ao CSS 22 margens PropriedadeDescriçãoValoresExemplo 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 tamanho (pt, in, cm, px) { margin-top: 12pt }

23 Pedro Costa Introdução ao CSS 23 Contornos PropriedadeDescriçãoValoresExemplo 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 grossura: em pixels. estilo: none, dotted, dashed, solid, double. cor: valor da cor. { border-top: 2px dotted red; }

24 Pedro Costa Introdução ao CSS 24 Listas PropriedadeDescriçãoValoresExemplo 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; }

25 Pedro Costa Introdução ao CSS 25 Posicionamento Com CSS é possível alterar o fluxo normal de uma página e definir o posicionamento de cada elemento

26 Pedro Costa Introdução ao CSS 26 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).

27 Pedro Costa Introdução ao CSS 27 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 (%)

28 Pedro Costa Introdução ao CSS 28 Posicionamento Exemplo: 1º bloco de informação 2º bloco de informação 1º sub bloco de informação Este bloco está inserido no 2º bloco. 2º sub bloco de informação Este bloco também está inserido no 2º bloco, após o bloco anterior. 3º sub bloco de informação Este bloco também está inserido no 2º bloco, após o bloco anterior. 3º bloco de informação Div=parte1 Div=parte2 Div=parte2a Div=parte2b Div=parte2c Div=parte3

29 Pedro Costa Introdução ao CSS 29 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; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; }.parte2a { background-color:#666666; font-family:arial; 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; font-family:arial; font-size:12pt; width:400px; margin-left:30px; }.parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

30 Pedro Costa Introdução ao CSS 30 Resultado

31 Pedro Costa Introdução ao CSS 31 Posicionamento Relativo A posição é calculada em relação à localização natural do elemento. p { position: relative; top: 10px; right: 50px; }

32 Pedro Costa Introdução ao CSS 32 Posicionamento.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }.parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; position:relative; top:20px; left:40px; }.parte2a { background-color:#666666; font-family:arial; 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; font-family:arial; font-size:12pt; width:400px; margin-left:30px; }.parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

33 Pedro Costa Introdução ao CSS 33 Resultado

34 Pedro Costa Introdução ao CSS 34 Posicionamento Absoluto A posição do elemento é calculada em relação ao "pai". Temos a questão de saber qual é o pai? p { position: absolute; top: 10px; left: 50px; } div { position: relative; p { position: absolute; top: 10px; left: 50px; } 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

35 Pedro Costa Introdução ao CSS 35 Posicionamento.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }.parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; }.parte2a { background-color:#666666; font-family:arial; 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; font-family:arial; font-size:12pt; width:400px; margin-left:30px; }.parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

36 Pedro Costa Introdução ao CSS 36 Resultado

37 Pedro Costa Introdução ao CSS 37 Posicionamento.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }.parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; position:relative; }.parte2a { background-color:#666666; font-family:arial; 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; font-family:arial; font-size:12pt; width:400px; margin-left:30px; }.parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

38 Pedro Costa Introdução ao CSS 38 Resultado

39 Pedro Costa Introdução ao CSS 39 Posicionamento Fixo Igual ao posicionamento absoluto, mas relativamente à janela. p { position: fixed; top: 50px; left: 10px; }

40 Pedro Costa Introdução ao CSS 40 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; }


Carregar ppt "Pedro Costa Introdução ao CSS 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao CSS."

Apresentações semelhantes


Anúncios Google