introduÇÃo Às folhas de estilo em cascata (cascading … · 2016. 8. 16. · estrutura de uma...
TRANSCRIPT
![Page 1: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/1.jpg)
INTRODUÇÃO ÀS FOLHAS DE ESTILO
EM CASCATA
(CASCADING STYLE SHEETS, CSS)
Conferencia 4
Programação Web
MSc. Yoenis Pantoja Zaldívar
![Page 2: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/2.jpg)
![Page 3: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/3.jpg)
![Page 4: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/4.jpg)
Todas as páginas
presentadas tem o
mesmo código HTML.
Essa aparência pode-
se melhorar mediante
'folhas de estilo'.
Vista por defecto
![Page 5: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/5.jpg)
OBJETIVOS
Identificar a sintaxis correita das
regras CSS.
Descrever os principais elementos
que componem as folhas de estilo.
![Page 6: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/6.jpg)
RESUMO
As Folhas de Estilo em Cascata (CSS)
Funcionamento básico.
Tipos de selectores
![Page 7: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/7.jpg)
BIBLIOGRAFÍA
Eguíluz Pérez Javier, Introducción a CSS, Capítulos 1, 2, 3 y 4. Disponible en: http://progwebisutic.wordpress.com e http://www.librosweb.es
Hernán Ruiz Marcelo, Programación Web Avanzada, pág. 108-119
W3C, Guía de Referencia Rápida de CSS 2.1, disponible en: <http://w3c.org>
![Page 8: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/8.jpg)
ENLACES DE INTERÉS
Validador de CSS
http://jigsaw.w3.org/css-validator/
Guía de Referencia
http://www.w3c.es/Divulgacion/GuiasRef
erencia/CSS21/
Recurso Web de desenho com CSS
http://www.csszengarden.com/tr/espanol/
![Page 9: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/9.jpg)
Marcar os conteúdos,
desenhar o que é um
parágrafo, o que é um
encabezado, uma
lista de elementos,
etc.
CSS
Definir o aspecto (a
apresentação) dos
conteúdos: cor,
tipografía, tamanho,
margen, etc.
¿CSS?
XHTML
![Page 10: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/10.jpg)
CSS (CASCADING STYLE SHEETS)
Linguagem criado para controlar a
apresentação dos documentos XHTML.
É a melhor forma de separar os conteúdos e
sua apresentação.
É utilizado na criação de páginas Web
complexas.
Definen o efecto visual das etiquetas HTML
e seus conteúdos.
![Page 11: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/11.jpg)
FUNCIONAMENTO BÁSICO DE CSS
¿Como utilizar CSS num documento?
1) Directamente nos elementos XHTML.
2) No mesmo documento XHTML.
3) Desde um arquivo externo.
![Page 12: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/12.jpg)
INCLUIR CSS NUM DOCUMENTO
1) Directamente nos elementos HTML
<body>
<p style="color: blue; font-family:Verdana;">
Aniversario de Angola
</p>
</body>
![Page 13: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/13.jpg)
Se a página tem 20
parágrafos e vocé quiere
aplicar o mesmo aspecto
a todos
¿Como fazer isto?
![Page 14: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/14.jpg)
2) No mesmo documento (X)HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS en el propio documento</title>
<style type="text/css">
p { color: blue; font-family: Verdana; }
</style>
</head>
…
INCLUIR CSS NUM DOCUMENTO
Regra de estilo CSS
![Page 15: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/15.jpg)
Se o website tem 20
páginas e vocé quiere
aplicar o mesmo aspecto
a todos os parágrafos do
website
¿Como fazer isto?
![Page 16: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/16.jpg)
3) Desde um arquivo externo.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS en el propio documento </title>
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
</head>
…
INCLUIR CSS NUM DOCUMENTO
![Page 17: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/17.jpg)
ESTRUTURA DE UMA REGRA CSS
Uma regra de CSS está formada por 2
partes:
A declaração utiliza-se para definir “qué
tem que fazer” e o selector define “em qual
elemento se estabelece a regra”.
SELECTOR DECLARAÇÃO
![Page 18: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/18.jpg)
ESTRUTURA DE UMA REGRA CSS
![Page 19: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/19.jpg)
SELECTORES BÁSICOS
1. Selector universal
2. Selector de tipo ou etiqueta
3. Selector descendente
4. Selector de clase
5. Selector de id
Combinação de selectores básicos
![Page 20: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/20.jpg)
SELECTORES BÁSICOS
• Selector universal
* { color: white; padding: 0; }
![Page 21: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/21.jpg)
SELECTORES BÁSICOS
Selector de tipo ou etiqueta
p {color: green;}
h1 {color: red;}
h2 {color: red;}
table {color: red;}
/* se podem agrupar */
p, h1, h2, table { color:red; }
![Page 22: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/22.jpg)
SELECTORES BÁSICOS
Selector descendente
p strong { font-family: Verdana; }
<p>
<strong>Viva Angola</strong>
</p>
![Page 23: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/23.jpg)
EXEMPLOS
footer p { color: green; }
table p strong {font-family: Tahoma}
section article a {font-size: 20}
table tr td {color: red}
This is logic?
![Page 24: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/24.jpg)
SELECTORES BÁSICOS
Selector de id
#myparagraph { color: red; font-size: 18; }
<p id=“myparagraph”>Isto é um texto </p>
<p id=“outro”>Curso ISUTIC</p>
<a href=“detalhes_noticia.php”>Ver agora </a>
![Page 25: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/25.jpg)
SELECTORES BÁSICOS
Selector de clase
.enlace { color: green; }
<p id=“myparagraph”>Isto é um texto </p>
<p>Curso ISUTIC</p>
<a href=“page2.php” class=“enlace” > Leer
agora</a>
![Page 26: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/26.jpg)
SELECTORES BÁSICOS
Combinação de selectores básicos
p.aviso {…}
p .aviso {…}
.aviso .especial { ... }
div.aviso span.especial { ... }
![Page 27: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/27.jpg)
EXERCICIOS
articles.cuba p#myparagraph {...}
div p.primary, p.last {...}
table#mytable,div p a {...}
.corpo section.principal p.first, a#one {}
![Page 28: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/28.jpg)
TAREFA
Estudiar as pseudo-clases e os
pseudo-elementos.
Bibliografía: Epígs. 6.2 y 7.1.2 do livro
Introducción a css.pdf
![Page 29: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/29.jpg)
UNIDADES DE MEDIDA
Utilizam-se para definir a altura, largura e
márgens dos elementos e para estabelecer
o tamanho do texto mostrado.
CSS divide as unidades de medida em 2
grupos: absolutas e relativas.
![Page 30: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/30.jpg)
UNIDADES DE MEDIDA
Unidades relativas:
• em, relativa com respeito ao tamanho
de letra do sistema do usuario
• ex, relativa com respeito ao tamanho
da letra x do sistema do usuario
• px, (píxel) relativa com respeito à
pantalha do usuario
![Page 31: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/31.jpg)
UNIDADES DE MEDIDA
Porcentaje: Sempre está referenciado a
outra medida.
Ej: body { font-size: 1em; }
h1 { font-size: 200%; }
O tamanho estabelecido para o elemento <h1>
é equivalente a 2em.
![Page 32: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/32.jpg)
UNIDADES DE MEDIDA
• Unidades absolutas:
in, inches o pulgadas (2.54 centímetros)
cm, centímetros
mm, milímetros
pt, puntos (1 punto = 1 in/72 = 0.35 mm)
pc, picas (1 pica =12 puntos = 4.23 mm)
![Page 33: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/33.jpg)
CORES
![Page 34: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/34.jpg)
CONCLUSÕES…
¿Cuais são os componentes de
uma regla de estilo?
¿Cuais são os tipos de
selectores básicos?
![Page 35: INTRODUÇÃO ÀS FOLHAS DE ESTILO EM CASCATA (CASCADING … · 2016. 8. 16. · ESTRUTURA DE UMA REGRA CSS Uma regra de CSS está formada por 2 partes: A declaração utiliza-se para](https://reader034.vdocuments.net/reader034/viewer/2022051916/60077754a0fd2a180c549563/html5/thumbnails/35.jpg)
INTRODUÇÃO ÀS FOLHAS DE ESTILO
EM CASCATA
(CASCADING STYLE SHEETS, CSS)
Conferencia 4
Programação Web
MSc. Yoenis Pantoja Zaldívar