Cap 3 CSS - Introducao Actualizado

Cadeira: Tecnologias e Programação Web
Cap. III – Introdução ao CSS
Eng. Helton L. General
Maputo, 2022
Objectivos
No fim da aula o estudante podera:
Criar Comentários.
Inserir imagens de fundo e/ou cores.
Formatar textos.
3. CSS: Comentários

Definir comentários em HTML
/* Comentarios */
Definir comentários em CSS

3. CSS: Definição
A sigla CSS (Cascading Style Sheets)
É uma linguagem de estilos que define o layout

de documentos escritos, geralmente, em
linguagem HTML.
3. CSS: Sintaxe
A sintaxe do CSS tem estrutura simples: é uma

declaração de propriedades e valores
separados por um sinal de dois pontos “:”, e
cada propriedade é separada por um sinal de
ponto e vírgula “;” da seguinte maneira:
selector {
propriedade: valor;
propriedade: valor;
}
3. CSS: Sintaxe
selector {
propriedade: valor;
}
 SELETOR: identificação de elemento para o qual
será aplicada a regra; o elemento poderá ser
identificado a partir de sua tag, seu ID ou sua
classe;
 PROPRIDEDADE: atributo ao qual será aplicado a
regra;
 VALOR: valor propriamente dito a ser aplicado na
propriedade seleccionada; para aplicação do

valor, observe que se usa o símbolo de dois-
pontos (“:”) ao invés do símbolo de igualdade (“=“)
3. CSS: exemplo
estilo.css:
p{
TAG
text-align: right;
}
#parag{
ID
text-align: center;
}
.parag2 {
Class
text-align: left;
}
3. CSS: exemplo
index.html:
<p> conteudo</p>
estilo.css:
p{
text-align: right;
}
3. CSS: exemplo
index.html:
<p class=“fontePequena”> conteudo1</p>
<p class=“fonteGrande”> conteudo2</p>
estilo.css:
p.fontePequena {
font-size: 12px;
}
p.fonteGrande {
font-size: 24px;
}
3. CSS: exemplo
index.html:
<h6 class=“fonteGrande”>titulo</h6>
<p class=“fontePequena”> conteudo1</p>
<p class=“fonteGrande”> conteudo2</p>
estilo.css:
p.fontePequena {
font-size: 12px;
}
p.fonteGrande {
font-size: 24px;
}
.fonteGrande {
font-size: 24px;
}
3. CSS: exemplo
Possibilidade de aplicação de mais de uma regra a
um mesmo elemento HTML: especificação de
mais de uma classe no atributo CLASS
<p class=”p1 p2”>Conteudo</p>
estilo.css:
.p1{
font-size: 12px;
}
.p2{
text-align: center;
}
3. CSS: exemplo: agrupamento
estilo.css:
p{
text-align: center;
}
h2{
text-align: center;
}
h3{
text-align: center;
}
3. CSS: exemplo
estilo.css:
p, h2, h3 {
text-align: center;
}
3. CSS: Declaração de propriedades
Essas propriedades podem ser declaradas de
três maneiras diferentes.
 Duas formas Internamente ao código HTML

 Uma externamente
A primeira delas é como um atributo style no

próprio elemento (próprio tag):
<p style="color: blue; background-color:

green;">
Conteudo
</p>
A outra maneira de se utilizar o CSS é

declarando suas propriedades dentro de uma
tag <style> dentro da tag mãe <head>
<style>
p{
color: blue;
background-color: green;
}
</style>
Essas propriedades podem ser declaradas de três
maneiras diferentes.
A terceira maneira de declararmos os estilos do

nosso documento é com um arquivo externo,
geralmente com a extensão .css.
A indicação de uso de uma folha de estilos

externa deve ser feita dentro da tag <head>
do nosso documento HTML:
<head>

<link rel = “stylesheet” href=“css/estilo.css”>
</head>
Dentro do arquivo estilo.css
p{
color: blue;
background-color: green;
}
3. CSS propriedades: Cores
Esta e a propriedade mais comum, pois se

aplica a muitos selectores. As cores no CSS
obedecem o padrão hexadecimal RGB e as mais
básicas podem também ser designadas pelo
nome.
color: blue;
color: LightGray;
color: SlateBlue;
3. CSS propriedades: Plano de fundo
background-color: Preenchera o documento

com a cor desejada.
<h1 style="background-color:rgb(255, 99, 71);">...

</h1>
preto: rgb(0,0,0)
branco: rgb(255,255,255)
<h1 style="background-color:#ff6347;">...</h1>
Branco: #ffffff
Preto: #000000
background-image - O valor atribuído a esta

propriedade, devera ser o nome do arquivo da
figura, que devera estar localizada na mesma
pasta da folha de estilos ou com o caminho até a
imagem especificado. Quando o plano de fundo
e preenchido por uma imagem, surgem mais
propriedades a serem especificadas.
background-position: A posição da imagem na

página. Top, center ou bottom combinados com
left, center e right.
background-repeat: Opção usada para repetir a

imagem pelo plano de fundo.
3. CSS
Exemplo
body {
background-color: #FFFFFF;
background-image: url(“..\img\imagem.jpg");
background-position: bottom right;
background-repeat: no-repeat;
}
3. CSS propriedade Texto
O texto pode ter características alteradas em

CSS que não poderiam ser alteradas em HTML.
color - Define a cor do texto.
text-ident - Define a distancia de recuo do

texto no inicio do paragrafo.
line-height - Define o espaçamento entre as

linhas.
text-align - Define o alinhamento do texto, que

pode ser ao centro, a direita, a esquerda ou no
estilo justificado.
text-decoration - Define a decoração de um

texto e é feita com os seguintes valores:
underline (sublinhado), overline
(sobrelinhado),line-through (uma linha em cima
do texto) e blink (faz piscar o texto).
text-transform - Define uma transformação ao
texto, que podem ser as seguintes:
- torna-las todas maiúsculas - uppercase;
- todas minúsculas - lowercase;
- todas as primeiras letras maiusculas -
capitalize.
h1 {
color: #DDA0DD;
text-decoration: underline;
text-transform: uppercase
}
h2 {
color: #3366FF;
text-decoration: line-through;
text-transform: none
}
p{
text-ident: 1cm;
line-height: 2px;
text-align: center
}
3. CSS propriedade Font
Como na secção anterior, todas as

propriedades são aplicadas a selectores
relacionados a textos, como <p> e <h1>.
font-family - Refere-se a família da fonte. O

valor pode ter o nome específico da fonte
(Verdana, comic, san serif, times new roman)
ou de fontes genéricas (menospace, serif). Vale
lembrar que a fonte escolhida deverá estar
instalada na máquina do usuário.
CSS propriedades: fonte
font-size: Pode-se escolher o tamanho da fonte

usando valores numéricos ou nomenclaturas:
x-small, xx-small, x-large, xx-large, small,

medium, large, smaller e larger.
Exemplo 1
 Encontre em anexo o exemplo 1 com toda a
arvore de um projecto, e a localizacao
correcta dos ficheiros.
Obrigado pela atenção

Cap 3 CSS - Introducao Actualizado

Enviado por

Dados do documento

Descrição 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

Cap 3 CSS - Introducao Actualizado

Enviado por

Direitos autorais:

Formatos disponíveis

Cadeira: Tecnologias e Programação Web

Cap. III – Introdução ao CSS

Eng. Helton L. General

Inserir imagens de fundo e/ou cores.

Definir comentários em CSS

É uma linguagem de estilos que define o layout

A sintaxe do CSS tem estrutura simples: é uma

propriedade seleccionada; para aplicação do

<p class=”p1 p2”>Conteudo</p>

 Duas formas Internamente ao código HTML

A primeira delas é como um atributo style no

<p style="color: blue; background-color:

A outra maneira de se utilizar o CSS é

A terceira maneira de declararmos os estilos do

A indicação de uso de uma folha de estilos

Dentro do arquivo estilo.css

Esta e a propriedade mais comum, pois se

background-color: Preenchera o documento

<h1 style="background-color:rgb(255, 99, 71);">...

background-image - O valor atribuído a esta

background-position: A posição da imagem na

background-repeat: Opção usada para repetir a

O texto pode ter características alteradas em

color - Define a cor do texto.

text-ident - Define a distancia de recuo do

line-height - Define o espaçamento entre as

text-align - Define o alinhamento do texto, que

text-decoration - Define a decoração de um

Como na secção anterior, todas as

font-family - Refere-se a família da fonte. O

font-size: Pode-se escolher o tamanho da fonte

x-small, xx-small, x-large, xx-large, small,

Você também pode gostar