Embed Size (px)
Citation preview
INTRODUÇÃO ÀS FOLHAS DE ESTILO
EM CASCATA
(CASCADING STYLE SHEETS, CSS)
Conferencia 4
Programação Web
MSc. Yoenis Pantoja Zaldívar
Todas as páginas
presentadas tem o
mesmo código HTML.
Essa aparência pode-
se melhorar mediante
'folhas de estilo'.
Vista por defecto
OBJETIVOS
Identificar a sintaxis correita das
regras CSS.
Descrever os principais elementos
que componem as folhas de estilo.
RESUMO
As Folhas de Estilo em Cascata (CSS)
Funcionamento básico.
Tipos de selectores
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>
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/
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
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.
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.
INCLUIR CSS NUM DOCUMENTO
1) Directamente nos elementos HTML
<body>
<p style="color: blue; font-family:Verdana;">
Aniversario de Angola
</p>
</body>
Se a página tem 20
parágrafos e vocé quiere
aplicar o mesmo aspecto
a todos
¿Como fazer isto?
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
Se o website tem 20
páginas e vocé quiere
aplicar o mesmo aspecto
a todos os parágrafos do
website
¿Como fazer isto?
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
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
ESTRUTURA DE UMA REGRA CSS
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
SELECTORES BÁSICOS
• Selector universal
* { color: white; padding: 0; }
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; }
SELECTORES BÁSICOS
Selector descendente
p strong { font-family: Verdana; }
<p>
<strong>Viva Angola</strong>
</p>
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?
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>
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>
SELECTORES BÁSICOS
Combinação de selectores básicos
p.aviso {…}
p .aviso {…}
.aviso .especial { ... }
div.aviso span.especial { ... }
EXERCICIOS
articles.cuba p#myparagraph {...}
div p.primary, p.last {...}
table#mytable,div p a {...}
.corpo section.principal p.first, a#one {}
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
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.
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
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.
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)
CORES
CONCLUSÕES…
¿Cuais são os componentes de
uma regla de estilo?
¿Cuais são os tipos de
selectores básicos?
INTRODUÇÃO ÀS FOLHAS DE ESTILO
EM CASCATA
(CASCADING STYLE SHEETS, CSS)
Conferencia 4
Programação Web
MSc. Yoenis Pantoja Zaldívar
