CSS Apoio v19

ESCOLA SECUNDÁRIA DE CALDAS DAS TAIPAS
2022-2023
CURSO PROFISSIONAL DE TÉCNICO DE MULTIMÉDIA
Sistema(s) de Informação – 10/11ºAno
UFCD […] APOIO - CSS –(V19)
NOTAS INTRODUTÓRIAS
Para mais informação sobre os conteúdos aceder ao site, por exemplo,
www.w3schools.com
INCLUSÃO DE UM FICHEIRO (CSS) COM REGRAS CSS NUM DOC HTML
No documento/ficheiro HTML…na secção <head> 

<link rel="stylesheet" href="caminho/nomeficheiro_com_os_estilos.css" type="text/css">
Ex: <link rel="stylesheet" href="estiloscss/estilos.css" type="text/css">
REGRAS CSS NUM DOC HTML: DEFINIDAS INLINE OU INCORPORADAS
CSS definido INLINE

Regras definidas na própria TAG.
<TAG style=”propriedade1:valor1; propriedade2:valor2;”>
Ex:
<p style=”font-size:14px;font-family:Arial;color:blue;”> bla bla bla </p>
CSS definido incorporado

Regras definidas na secção <head> do Exemplo:
documento html <html>
… <head>
<head> <title>Programação em HTML e CSS</ title>
… <style type="text/css">
<style type="text/css"> #texto{
---Regras do css (por TAG, por classe ou por ID) font-family: arial;
</style> color: red;
… }
</head> </style>
… </head>
<body>
<p id=”texto”>Parágrafo utilizando estilo
incorporado</p> </body>
</html>
PÁG: 1 - 7
2022-2023
DEFINIÇÃO DE REGRAS (SINTAXE GERAL): NA FORMA DE CSS INCORPORADO OU CSS VINCULADO (EXTERNO)
Pelo nome da TAG Por class Por id

TAG .nome_class #nome_id
{ { {
propriedade1: valor1; propriedade1: valor1; propriedade1: valor1;
propriedade2: valor2; propriedade2: valor2; propriedade2: valor2;
… … …
propriedadeN: valorN; propriedadeN: valorN; propriedadeN: valorN;
} } }
INCLUIR NUMA TAG REFERÊNCIA A MAIS DO QUE UM GRUPO ID OU CLASS
Para abreviar (não repetir) o código CSS pode-se quando possível, associar IDs com classes ou associar
várias classes.
<TAG id=”estilos_id” class=”estilos_classe1> …
<TAG class=”estilos_classe1 estilos_classe2 estilos_classe3> …
CORES EM CSS
As cores podem ser definidas aplicadas aos elementos (letras, limites, linhas, etc) ou fundos (páginas,
parágrafos, tabelas, linhas de tabelas, colunas de tabelas, etc.
Podem ser definidas por nome, formato rgb, hexadecimal, etc:
EXs:
color: white;
color: rgb(0, 191, 255);
color: #F5F297;
e a fundos …
background-color: green;
background-color: rgb(12, 191, 255);
background-color: #F126A3;
OBS: a forma de definir cores em CSS é aplicada a fundos, cores de linhas, cor da letra, etc.
Para obter os códigos das cores, poderá consultar os sites (entre outros):
 http://html-color-codes.info/Codigos-de-Cores-HTML/
 http://www.efeitosespeciais.net/tabela.htm
 http://www.webcalc.com.br/utilitarios/rgb_hex.html
PÁG: 2 - 7
2022-2023
REGRAS E PROPRIEDADES EM CSS
FORMATAÇÃO DA LETRA
Para as TAGS: <body>;<p>; <span>; <table>; <tr>; <td>; etc
 font-family: (lista) tipos (fontes) de letra a usar (Ex: Arial, Courier, Verdana, etc)
 font-size: Tamanho das letras (unidades possíveis: px, % ou em)- (Ex: 12px)
 font-style: Estilo (ex: itálico) das letras; opções: normal ou italic.
 font-weight: Espessura (ex: negrito) das letras; opções: lighter, normal, bold ou bolder.
 text-decoration: Efeitos (ex: sublinhado) a aplicar ao texto; opções: none, underline, overline, line-
through.
 color: cor do texto (por nome, rgb, hexadecimal)
 text-shadow: permite formatar um texto com efeito de sombra…
Sintaxe:
text-shadow: Sombra_horizontal (px) sombra_vertical(px) [raio (px) do efeito de blur da sombra]
[cor_da_sombra];
Nota: só os dois primeiros são obrigatórios (os que estão dentro de parêntesis retos são opcionais)
text-shadow: 2px 2px #FF0000; Sombras na horizontal e vertical com 2px e cor
vermelha (OBS: sem efeito de blur;)
text-shadow: 2px 2px 8px #FF0000; Sombras na horizontal e vertical com 2px, raio do efeito
Exemplos
de blur 8px e sombra de cor vermelha

color: white; Cor da letra branca;
text-shadow: 2px 2px 4px #000000; Sombras na horizontal e vertical com 2px e raio do efeito
de blur 4px e sombra de cor preta
APRESENTAÇÃO DOS PARÁGRAFOS (BLOCOS DE TEXTO)
Para as TAGS: <body>; <p>; <table>; <tr>;<td>; etc
 text-align: Alinhamento do texto. Opções: left, right, justify, center.

 text-indent: Alinhamento da primeira linha de um bloco de texto (%, cm, px)
 line-height: Altura de cada linha num bloco de texto, para definir o espaço entre linhas (%)
 letter-spacing: Espaçamento entre letras (ex: 5px).
 word-spacing: Espaçamento entre palavras (ex: 10px).
 padding: Distância do bloco de texto os limites (borders) [Ex: padding:10px;]
 width: para as tags referentes ao conceito de caixa (<p>; <table>; <td>; …); define o comprimento
(em px ou %, por exemplo)
PÁG: 3 - 7
2022-2023
FUNDO:: COR OU IMAGEM
Para as TAGS: <body>; <p>; <span>; <table>; <tr>;<td>; etc
Com uma cor…
 background-color: cor do fundo (por nome, rgb, hexadecimal)

Exemplos
o background-color: yellow;
o background-color: rgb(125, 12, 245);
o background-color: #20FF1A;
Com uma imagem…
 background-image: url(“caminho+nome do ficheiro de imagem”).

Exemplo: background-image: url(“fundos/padrao.gif”);
ALINHAR UMA IMAGEM/PARÁGRAFO “INTEIRO” NUMA PÁGINA (EXTERIOR A TAGS DO TIPO CONTENTOR)::
EXEMPLO DE UMA REGRA CSS – DEFINIDA ATRAVÉS DE UMA CLASS
Centrar Esquerda Direita

.ao_centro { .a_esq { .a_dir {
float:none; float:none; float:none;

display:block; display:block; display:block;
margin-left:auto; margin-left:0; margin-left:auto;
margin-right:auto; margin-right:auto; margin-right: 0;
} } }
LIMITES (BORDER)
Para as TAGS: <p>; <table>; <tr>;<td>; <h1>…<h6>;etc
OBS: «border = limite»

border-top
border-left border-right
border-bottom
Formas de identificar os quatro limites do “retângulo”

border-left (refere o limite esquerdo)
border-right (refere o limite direito)
border (refere os quatro limites, de uma só vez)
border-top (refere o limite superior)
border-bottom (refere o limite inferior)
Características (propriedades) dos limites
style (estilo da linha do limite) dotted; dashed; solid; double; etc
PÁG: 4 - 7
2022-2023
color (cor da linha do limite) Igual ao referido sobre as cores
width (espessura da linha do limite) Definido em px
radius (permite definir cantos “redondos”) Definido em px
Exemplos
border: 1px solid green; Formata os 4 limites com a espessura (width) a 1px; estilo (style) linha
sólida; cor (color) a verde;
OBS: definir tudo de uma vez
border-left: 2px dotted red; Formata só o limite da esquerda com a espessura (width) a 2px; estilo
(style) linha pontilhada; cor (color) a vermelho;
border: 2px solid #000000; Formata os 4 limites com a espessura (width) a 2px; estilo (style) linha
border-radius: 5px; sólida; cor (color) a preta (em hexadecimal); e ainda; formata os cantos com
aspeto arredondado, com raio (radius) 5px
border-left-style: double; Define cada um dos limites de forma diferente:

border-left-width: 2px; -esquerdo, com linha dupla, espessura 2px e cor azul;
border-left-color: blue; -superior, com linha tracejada, espessura 1px e cor vermelha;
-direito, com linha dupla, espessura 2px e cor verde;
-inferior, com linha pontilhada, espessura 1px e cor vermelha;
border-top-style: dashed;
border-top-width: 1px;
border-top-color: red;
border-right-style: double
border-right-width: 2px
border-right-color: green;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: red;
OBS: para mais informação aceder, p.e., o site www.w3schools.com/css/css_border.asp
LINHAS HORIZONTAIS
Para a TAG: <hr />
 height: “espessura” da linha
 width: comprimento da linha (em px ou em %)
 color: cor da linha
 background-color: cor da linha …
Ex: <hr style="width: 80%; height:2px;border-width:0;color:gray;background-color:gray" />
PÁG: 5 - 7
2022-2023
TABELAS
 Largura de uma tabela (table) ou colunas da tabela (td)
width: em % ou em px; Exemplo:width:600px; width:80%;
Ex:
o table {width:80%;}
o td {width: 25%;}
 Altura de uma linha (tr ou td) de uma tabela (table)
height: Npx; Ex: height:50px;
 Formatar limites:
Ex:
table, th, td {
border: 1px solid black;
}
NOTAS:
o th corresponde à primeira linha da tabela (linha cabeçalho)
o como table e th/td têm os respetivos borders (vai aparecer limites duplos) para evitar esta
situação pode-se acrescentar a regra CSS border-collapse: collapse;
 Para definir (mais) distância entre o texto nas células (td) e os limites das células:
padding: Npx; Exemplo:padding:6px;
 Alinhar elementos nas células (td):
text-align: left; right; center

vertical-align: top; bottom; middle
 Centrar uma tabela na página (sem contentor):
margin: 0 auto;
 Efeito zebra na tabela (linhas ou colunas)
Linhas parestr:nth-child(even){background-color: #f2f2f2}
Linhas ímparestr:nth-child(odd){background-color: #f2f2f2}
Colunas parestd:nth-child(even){background-color: #f2f2f2}
Colunas ímparestd:nth-child(odd){background-color: #f2f2f2}
OBS: nos exemplos acima pode-se acrescentar ou definir um outro conjunto de regras (ex: formatar
letra, parágrafo, etc)
PÁG: 6 - 7
2022-2023
SELETOR HOVER (QUANDO O PONTEIRO DO RATO ESTÁ POR CIMA DO ELEMENTO)
Para as TAGS: <body>; <p>; <span>; <table>; <tr>;<td>; etc
hover  permite definir um conjunto de formatações para os elementos que estejam sob o ponteiro
do rato…
Definição por TAG…
TAG:hover {Regras CSS; }
Ex: p:hover { align-text: justify; color: blue;}
Definição por CLASSE…
TAG.nome_classe:hover {Regras CSS; }
Ex: p.titulo:hover {font-family: Arial; font-size:14px; background-color: yellow;}
CAIXAS:: SOMBRAS
Para as TAGS: <p>; <table>; <tr>;<td>; etc
Obs: para ver mais exemplos aceder a https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
box-shadow: tamanho_horizontal tamanho_vertical blur cor;
Exemplos:
 box-shadow: 20px 20px grey;
 box-shadow: 20px 20px 30px grey;
PÁG: 7 - 7

CSS Apoio v19

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

CSS Apoio v19

Enviado por

Direitos autorais:

Formatos disponíveis

ESCOLA SECUNDÁRIA DE CALDAS DAS TAIPAS

INCLUSÃO DE UM FICHEIRO (CSS) COM REGRAS CSS NUM DOC HTML

No documento/ficheiro HTML…na secção <head> 

REGRAS CSS NUM DOC HTML: DEFINIDAS INLINE OU INCORPORADAS

CSS definido INLINE

CSS definido incorporado

Pelo nome da TAG Por class Por id

INCLUIR NUMA TAG REFERÊNCIA A MAIS DO QUE UM GRUPO ID OU CLASS

Podem ser definidas por nome, formato rgb, hexadecimal, etc:

REGRAS E PROPRIEDADES EM CSS

Para as TAGS: <body>;<p>; <span>; <table>; <tr>; <td>; etc

de blur 8px e sombra de cor vermelha

APRESENTAÇÃO DOS PARÁGRAFOS (BLOCOS DE TEXTO)

Para as TAGS: <body>; <p>; <table>; <tr>;<td>; etc

 text-align: Alinhamento do texto. Opções: left, right, justify, center.

FUNDO:: COR OU IMAGEM

Para as TAGS: <body>; <p>; <span>; <table>; <tr>;<td>; etc

Com uma cor…

 background-color: cor do fundo (por nome, rgb, hexadecimal)

Com uma imagem…

 background-image: url(“caminho+nome do ficheiro de imagem”).

Centrar Esquerda Direita

float:none; float:none; float:none;

Para as TAGS: <p>; <table>; <tr>;<td>; <h1>…<h6>;etc

OBS: «border = limite»

Formas de identificar os quatro limites do “retângulo”

style (estilo da linha do limite) dotted; dashed; solid; double; etc

color (cor da linha do limite) Igual ao referido sobre as cores

width (espessura da linha do limite) Definido em px

radius (permite definir cantos “redondos”) Definido em px

border-left-style: double; Define cada um dos limites de forma diferente:

OBS: para mais informação aceder, p.e., o site www.w3schools.com/css/css_border.asp

Para a TAG: <hr />

 height: “espessura” da linha

 width: comprimento da linha (em px ou em %)

 color: cor da linha

 background-color: cor da linha …

Ex: <hr style="width: 80%; height:2px;border-width:0;color:gray;background-color:gray" />

 Largura de uma tabela (table) ou colunas da tabela (td)

width: em % ou em px; Exemplo:width:600px; width:80%;

 Altura de uma linha (tr ou td) de uma tabela (table)

height: Npx; Ex: height:50px;

padding: Npx; Exemplo:padding:6px;

 Alinhar elementos nas células (td):

text-align: left; right; center

 Centrar uma tabela na página (sem contentor):

 Efeito zebra na tabela (linhas ou colunas)

Linhas parestr:nth-child(even){background-color: #f2f2f2}

Linhas ímparestr:nth-child(odd){background-color: #f2f2f2}

Colunas parestd:nth-child(even){background-color: #f2f2f2}

Colunas ímparestd:nth-child(odd){background-color: #f2f2f2}

SELETOR HOVER (QUANDO O PONTEIRO DO RATO ESTÁ POR CIMA DO ELEMENTO)

Para as TAGS: <body>; <p>; <span>; <table>; <tr>;<td>; etc

Definição por TAG…

TAG:hover {Regras CSS; }

Ex: p:hover { align-text: justify; color: blue;}

Definição por CLASSE…

TAG.nome_classe:hover {Regras CSS; }

Ex: p.titulo:hover {font-family: Arial; font-size:14px; background-color: yellow;}

Para as TAGS: <p>; <table>; <tr>;<td>; etc

Obs: para ver mais exemplos aceder a https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

box-shadow: tamanho_horizontal tamanho_vertical blur cor;