Aula05 - Introdução Ao CSS

Aula 05
Ricardo Artur P. Carvalho Webdesign
Introdução ao CSS
Padrões Web (Web Standards)

A W3C (World Wide Web Consortium)
é uma organização responsável pelo
desenvolvimento de especificações técnicas e
parâmetros para orientar a produção de sites
e aplicações para a web que sejam acessíveis
em diferentes navegadores e suportes.
O que é HTML?
HTML é a linguagem para descrever a estrutura das páginas da
web. O HTML permite os autores sejam capazes de:
• Publique documentos com cabeçalhos, texto, tabelas,
listas, fotos etc.
• Recuperem informações online via links hipertextuais a
um clique de botão.
• Crie formulários para conduzir transações com servidores
remotos, para usar em pesquisas de informação , reservas,
pedidos de produtos, etc.
• Incluir planilhas, videoclipe, sons e outras aplicações
diretamente nos documentos.
O que é HTML?
No HTML os autores descrevem a estrutura das páginas
usando a marcação (markup). Os elementos da linguagem
funcionam como etiquetas do conteúdo como “parágrafo”,
“lista”, “tabela” e assim por diante.
O que é XHTML?
XHTML é uma variante de HTML que usa a sintaxe XML,
a Extensible Markup Language. XHTML possui todos os
mesmos elementos (para parágrafos etc.) que a variante
HTML, mas a sintaxe é um pouco diferente. Isso porque
XHTML é uma aplicação XML em que é possível utilizar outras
ferramentas XML junto com ela (como o XSLT, a linguagem
para transformação de conteúdo XML).
O que é CSS?
CSS (Cascading Style Sheets) é a linguagem para descrever
a apresentação das páginas da Web, incluindo cores, layout
e fontes. A linguagem CSS permite adaptar a apresentação
para dispositivos diferentes tais como telas grandes,
pequenas ou impressoras. A linguagem CSS é independente
da HTML e pode ser usada com qualquer linguagem baseada
em XML .
O que é CSS?
A separação da linguagem HTML da CSS facilita a
manutenção de sites, o compartilhamento de estilos em
diferentes páginas e a construção de páginas para diferentes
ambientes. Isso é conhecido como a separação da estrutura
(ou conteúdo) de sua apresentação.
O que é CSS?
Cascading Style Sheets, também conhecida como Folha de
Estilos, serve para aplicar estilos a uma estrutura HTML ou
XML. O efeito “cascata” refere-se à aplicação dos estilos em
todos os elementos hierarquicamente inferiores.
Portanto, para dominar a linguagem CSS é importante
conhecer a hierarquia da linguagem HTML.
Efeito Cascata
body {color: #FF0000;} (define a cor do texto como vermelha)
<body>
<div>
<p>
<a> </a>
<strong> </strong>
</p>
</div>
</body>
Sintaxe
A sintaxe básica de uma regra CSS é a seguinte:
seletor {propriedade: valor;}

valor da propriedade
propriedade do
tag (Ex: body)
seletor (Ex: width, font,
classe (Ex: .destaque)
background-color, etc.)
id (Ex: #container)
Modos de especificação
Uma folha de estilo pode ser incorporada,
normalmente, das seguintes maneiras:
• Inline (na linha)
• Embedded (incorporada)
• Linked (vinculada
Inline
O estilo aplicado localmente na tag HTML
mediante o atributo “style”.
O texto segue normal e, de repente, fica vermelho.
<p> O texto segue normal e, de repente, fica
<span style=“color:red”>vermelho.</span></p>
CSS Inline
Embedded
O estilo incorporado no HTML mediante a tag
“style” formando um bloco de estilo (no head).
<html>
<head>
<title>Brigadeiro delícia </title>
<style type= “text/css”>
p {font-family: Arial; color: #FF0000;}
</style>
</head>
<body>...</body>
</html>
Linked
Vincula-se um arquivo externo (CSS) ao
documento HTML mediante a tag <link>
<html>
<head>
<title>Brigadeiro delícia </title>
<link rel= “stylesheet” href= “estilo.css”
type= “text/css”>
</head>
<body>...</body>
</html>
Algumas propriedades
color: define a cor do texto (red ou #FF0000)
background-color: define a cor de fundo
width: define a largura do seletor
height: define a altura do seletor
text-align: define o alinhamento do texto (center, left)
font-family: define a família tipográfica
font-size: define o tamanho da fonte
font-weight: define o peso da fonte (bold, normal)
font-style: define o estilo/inclinação (italic, normal)
Mãos a obra

Aula05 - Introdução Ao CSS

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula05 - Introdução Ao CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Aula 05

Ricardo Artur P. Carvalho Webdesign

Padrões Web (Web Standards)

seletor {propriedade: valor;}

Você também pode gostar