Css PDF

css
Cascade Style Sheets

O que é CSS
 CSS significa Cascading Style Sheets

 CSS descreve como os elementos HTML devem ser exibidos
no ecrã, no papel, etc.
 CSS economiza muito trabalho. Pode controlar o layout de
várias páginas da web de uma só vez
 Folhas de estilo externas são armazenadas em arquivos
CSS
Demo
 Será mostrada uma página HTML com quatro

estilos diferentes.
https://www.w3schools.com/css/css_intro.asp
Porquê usar CSS?
 O CSS é usado para definir estilos para páginas da

Web, incluindo o design, layout e variações de
exibição para diferentes dispositivos e tamanhos
de tela.
CSS resolveu um grande problema
 HTML nunca foi destinado a conter para formatar uma página web!
 HTML foi criado para descrever o conteúdo de uma página da web, como:
<h1> Este é um cabeçalho </ h1>
<p> Este é um parágrafo. </ p>
 Quando tags como <font> e atributos de cores foram adicionados à

especificação do HTML 3.2, começou um pesadelo para os programadores.
 O desenvolvimento de grandes sites, onde fontes e informações de cores
foram adicionadas a cada página, tornou-se um processo longo e caro.
 Para resolver este problema, o World Wide Web Consortium (W3C) criou CSS.
 CSS removeu a formatação de estilo da página HTML
CSS poupa imenso trabalho
 As definições de estilo são normalmente salvas em

arquivos .css externos.
 Com um arquivo de folha de estilo (CSS) externo, pode

alterar-se a aparência de um site inteiro alterando apenas
um arquivo!
Sintaxe do CSS
Seletor Declaração/Declarações
H1 {color: blue; font-size:12px;}

propriedade valor
 Um conjunto de regras CSS consiste num seletor e um bloco de declaração: O seletor aponta
para o elemento HTML que se deseja estilizar.
 O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.
Sintaxe do CSS
Seletor Declaração/Declarações
H1 {color: blue; font-size:12px;}

propriedade valor
 Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.
 Uma declaração CSS termina sempre com um ponto-e-vírgula e os blocos de declaração são
delimitados por chavetas
Sintaxe do CSS
Exemplo:
<html>
<head>
<style>
p{
color: red;
text-align: center;
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Seletor de elementos
<style>
p{
color: red;
text-align: center;
}
</style>
 O seletor seleciona elementos de uma página com base no seu nome
(neste caso, todos os elementos <p> serão alinhados ao centro, com

uma cor de texto vermelha)
Três maneiras de inserir CSS
Há 3 maneiras de inserir CSS
 estilo em linha
 folha de estilo interno
 folha de estilo externo
As 3 formas podem coexistir numa página HTML, mas, em caso de repetições, a

prioridade de atuação é na ordem acima referida.
Estilos em linha
Um estilo em linha (inline) pode ser usado para

aplicar um estilo único para um único elemento.
Para usar estilos em linha, juntar o atributo de
estilo ao elemento relevante. O atributo de estilo
pode conter qualquer propriedade CSS.
<h1 style="color:blue;margin-left:30px;">Isto é um
destaque</h1>
Folha de estilo interno
Uma folha de estilo interna pode ser usado se uma página tem um estilo único.
Estilos internos são definidos dentro do elemento <style>, dentro da seção <head> de
uma página HTML:
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
Folha de estilo externo
Com uma folha de estilo externa pode mudar-se o aspeto de um site
inteiro, alterando apenas um arquivo!
Cada página deve incluir uma referência ao arquivo de folha de estilo

externa dentro do elemento <link>. O elemento <link> vai dentro da
seção <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Folha de estilo externo
Uma folha de estilo externa pode ser escrito em qualquer editor de
texto.
O ficheiro não deve conter quaisquer tags HTML.
O ficheiro de folha de estilo deve ser salvo com a extensão .css.
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy; margin-left: 20px;
}
RESUMO
Sintaxe para a integração de uma folha de estilos externa
<head>
<link rel=“stylesheet” type=“text/css”
href=“nome_do_ficheiro.css”/>
</head>
Código de uma folha de estilos externa
17
RESUMO
Sintaxe para definição de folha de estilos interna
Sintaxe para definição de folha de estilos local
<p style=“PropriedadesCss1: valor;

PropriedadeCss2: valor”> Parágrafo com estilo
CSS local</p>
18
Comentários em CSS
 Os comentários são usados para explicar o código e podem ajudar a editar o
código-fonte numa data posterior.
 Comentários são ignorados pelos navegadores.
 Um comentário CSS começa com / * e termina com * /. Comentários também
podem abranger várias linhas:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Cores em CSS
 Especificação das cores
 Nome: blue;
 Código: rgb(0, 0, 255); rgba(0, 0, 255, 0.5); #0000ff
 Cor do fundo
background-color: rgba(100, 100, 100, 0.75);
Cores em CSS
 Cor do texto
color: blue;
 Cor dos limites

border: rgb(255,0,0);
Texto em CSS
 Alinhamento
text-align: center (right, left, justify);
 Decoração
text-decoration: none (overline, line-through, underline);
 Maiúsculas/minúsculas
text-transform: capitalize (uppercase, lowercase);
Texto em CSS
 Indentação
text-indent: 50px;
 Espaçamento entre letras

letter-spacing: 3px;
 Espaçamento entre palavras

word-spacing: 10px;
Fontes em CSS
 Tipode letra
font-family: "Times New Roman" (Arial,
Calibri);
 Estilo
de letra
font-style: normal (italic, oblique);
Fontes em CSS
 Tamanho da letra
font-size: 20px (100%);
 Espessurada letra
Font-weight: normal (bold);
Fontes em CSS
 Estilo abreviado/resumido
font: "Times New Roman" italic bold

15px;
Definição das margens
 margin-top
 margin-right
 margin-bottom
 margin-left
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
A propriedade margin permite

definir várias marges de uma só
vez.
p{
margin: 25px 50px 75px 100px; (Top, right, bottom, left)
}
p{
margin: 25px 50px 75px 100px; (Top, right, bottom, left)
}
A propriedade margin permite

definir várias marges de uma só
vez.
p{
margin: 25px 50px; (Top, right + bottom, left)
}
p{
margin: 25px; (Top + right + bottom + left)
}
Tabelas
Border (limite)
table, th, td {
border: 1px solid black;
}
Border-collapse (limite único)
table, th, td {
border-collapse: collapse;
}
Tabelas
Width e height (largura e altura)

table{
width: 100%; height: 90%;
}
Align (alinhamento)
th{
text-align:center; vertical-align: middle; (Top ou bottom)
}
Tabelas
Padding (espaço entre a borda e o conteudo)

td{
padding:15px;
}
Background-color e color (cor do fundo e cor do texto)
Igual ao que já foi estudado
Listas
Os estilos são aplicados tanto a listas ordenadas como não-ordenadas

List-style-type (tipo de item da lista)
ul{
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
Hiperligações
Podem ser formatados com qualquer definição CSS

a{
color: hotpink;
}
Estado da ligação
a:link - um, ligação unvisited normais
a:visited - um link o usuário visitou
a:hover - um link quando o usuário mouses sobre ele
a:active - um link no momento em que for clicado
Hiperligações
Também podem ser formatados com qualquer definição CSS

a :hover{
color: lightblue;
}
a :visited{
color: lightgreen;
}
a{
text-decoration:none;
}
Hiperligações
Também podem ser formatados com qualquer definição CSS

a{
text-decoration:none;
}
a:hover {
text-decoration:line-through;
}
Seletor id
 Este seletor usa o atributo id de um elemento HTML para selecionar um

elemento específico
 O id de um elemento é único dentro de uma página, então é usado para
selecionar um elemento único!
 Para selecionar um elemento com um id específico, usar um cardinal (#)
seguido pelo id do elemento.
 A regra de estilo abaixo será aplicada ao elemento HTML com id =
"para1":
#para1 {
text-align: center;
color: red;
}
Seletor id
<html>
Exemplo: <head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>Este parágrafo não será afetado pelo estilo</p>
</body>
</html>
Seletor class
 O seletor class seleciona elementos

com um atributo de classe específico.
.center {
text-align: center;  Para selecionar elementos com uma
color: red; classe específica, usar um ponto (.)
} seguido do nome da classe.
 No exemplo, todos os elementos HTML

com class = "center" serão vermelhos e
alinhados ao centro
Seletor class <html>
<head>
Exemplo:
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Seletor class
 Pode especificar que somente determinados elementos HTML específicos devem ser
afetados por uma classe.
 No exemplo abaixo, apenas os elementos <p> com class = "center" serão centrados:
…
p.center {
text-align: center;
color: red;
}
…
<h1 class="center">Este cabeçalho não será afetado</h1>
<p class="center">Este parágrafo será vermelho e centrado</p>
…
Seletor class
 Os elementos HTML também podem associados a mais do que uma classe.

 No exemplo abaixo, o elemento <p> será estilizado de acordo com class = "center" e class = "large":
…
<style>
p.center {
text-align: center;
color: red;
p.large {
font-size: 300%;
</style>
…
<p class="center large">Este parágrafo é afetado por duas classes</p>
Agrupando seletores
 Se houver elementos com as mesmas definições de estilo, assim:

h1 {text-align: center; color: red;}
h2 {text-align: center; color: red;}
p {text-align: center; color: red;}
 Será melhor agrupar os seletores para minimizar o código.

 Para agrupar seletores, separar cada seletor com uma vírgula.
 No exemplo abaixo, agrupamos os seletores do código acima:
h1, h2, p {
text-align: center;
color: red;
}

Css PDF

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 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

css

Cascade Style Sheets

 CSS significa Cascading Style Sheets

 Será mostrada uma página HTML com quatro

 O CSS é usado para definir estilos para páginas da

<h1> Este é um cabeçalho </ h1>

<p> Este é um parágrafo. </ p>

 Quando tags como <font> e atributos de cores foram adicionados à

 As definições de estilo são normalmente salvas em

 Com um arquivo de folha de estilo (CSS) externo, pode

H1 {color: blue; font-size:12px;}

H1 {color: blue; font-size:12px;}

 O seletor seleciona elementos de uma página com base no seu nome

(neste caso, todos os elementos <p> serão alinhados ao centro, com

Há 3 maneiras de inserir CSS

As 3 formas podem coexistir numa página HTML, mas, em caso de repetições, a

Um estilo em linha (inline) pode ser usado para

Cada página deve incluir uma referência ao arquivo de folha de estilo

Código de uma folha de estilos externa

Sintaxe para definição de folha de estilos local

<p style=“PropriedadesCss1: valor;

 Cor dos limites

 Espaçamento entre letras

 Espaçamento entre palavras

font: "Times New Roman" italic bold

A propriedade margin permite

A propriedade margin permite

Width e height (largura e altura)

Padding (espaço entre a borda e o conteudo)

Os estilos são aplicados tanto a listas ordenadas como não-ordenadas

Podem ser formatados com qualquer definição CSS

Também podem ser formatados com qualquer definição CSS

Também podem ser formatados com qualquer definição CSS

 Este seletor usa o atributo id de um elemento HTML para selecionar um

<p id="para1">Hello World!</p>

 O seletor class seleciona elementos

 No exemplo, todos os elementos HTML

<h1 class="center">Red and center-aligned heading</h1>

 Os elementos HTML também podem associados a mais do que uma classe.

 Se houver elementos com as mesmas definições de estilo, assim:

 Será melhor agrupar os seletores para minimizar o código.

Você também pode gostar