Scribd
Carregar
27 visualizações37 páginas

HTML - Css Parte 2

Enviado por

akashizindale
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
27 visualizações37 páginas

HTML - Css Parte 2

Enviado por

akashizindale
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 37

Introdução ao HTML / CSS

parte 2

Prof. Maurício Braga


CSS

◼ Com a evolução do padrão HTML, a linguagem


passou a receber novas tags, que permitiam não
apenas estruturar o conteúdo, mas também definir o
seu visual (ex: tag FONT).

◼ Com os sites crescendo de tamanho, uma simples


alteração na cor dos títulos das seções de cada
página pode significar muito tempo de trabalho;
 Ex: em um site com 30 páginas com uma média de 4
títulos por página teríamos que alterar 120 tags (!)
CSS

◼ Da necessidade de dissociar a linguagem de marcação da sua


apresentação surgiu o CSS (Cascading Style Sheet - Folha de
Estilo em Cascata).

◼ Desta forma o uso dos elementos HTML passam a ser destinados


exclusivamente para marcar e estruturar o conteúdo do documento.

◼ A tarefa de estilização fica sob a responsabilidade das regras de


estilo (regras CSS).
Vantagens do uso do CSS

◼ Economia de tempo de criação e manutenção (pelo


isolamento dos códigos de formatação aplicado a várias
páginas HTML em um único arquivo ".css");

◼ Redução do código das páginas HTML;

◼ Redução do tempo de carregamento das páginas HTML;

◼ Simplicidade (CSS descreve apenas estilos);


CSS

◼ Uma regra CSS compõe-se de três partes: um seletor,


uma propriedade e um valor no formato:
seletor {
propriedade: valor;
}
 Seletor: seleciona os elementos sobre os quais as
propriedades serão aplicadas. (ex: aplicar a propriedade
sobre todos os parágrafos).
 Propriedade: seu valor determina como o conteúdo é exibido
(ex: setar a cor de background para vermelho);
CSS

◼ Existem três formas de configurarmos o CSS:


 Na linha onde temos nossa tag, adicionamos a
propriedade do CSS usando o atributo style (CSS
inline).
 Definindo a estilização dentro da seção HEAD
através da propriedade style.
 Através de um arquivo externo.

◼ Arquivos externos são a forma mais comum de uso do


CSS.
CSS inline

◼ Utilizado quando queremos aplicar um estilo a


elementos específicos de uma página.

◼ Na linha onde temos nossa tag, adicionamos a


propriedade do CSS usando o atributo style usando a
sintaxe: <tagname style="property:value;">

◼ Dessa maneira, temos que definir o estilo para cada


tag que queremos customizar.
CSS inline

◼ Exemplos:
 <h1 style=“text-align: center”>
 <p style=“font-size: 24px”>
 <h1 style="font-family:algerian;">Teste.</h1>
 <p style="font-family:'Segoe script'">Teste</p>
 <p style="font-family:'Cambria';font-size:20px;color:black">
Exemplo CSS inline
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Este cabeçalho está na cor azul.</h1>

<h1 style="color:yellow;">Já este cabeçalho está na cor amarela.</h1>

<p style="color:red;">Este parágrafo está na cor vermelha.</p>

</body>
</html>
Exemplo CSS inline
Propriedade style dentro do HEAD
(CSS interno)

◼ Usado para definir regras que serão aplicadas apenas


na página onde as regras foram escritas.

◼ As regras são definidas dentro da tag HEAD. Ex:

<style>
p{
text-align: center
}
</style>
Exemplo CSS interno
<html>
<head>
<style>
body {background-color: black;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Um cabeçalho na cor azul.</h1>
<h1>Mais um cabeçalho na cor azul.</h1>
<p>Um parágrafo na cor vermelha.</p>

</body></html>
Exemplo CSS interno
CSS externo

◼ As regras de estilo podem ser definidas em um arquivo


externo com extensão .css.

◼ Na seção HEAD, indicamos qual é o arquivo CSS


utilizado para definir o estilo da página.
 Ex: <link rel="stylesheet" href="style.css">
Exemplo – página HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Olá Mundo!</h1>
<p>Exemplo CSS em arquivo externo.</p>
</body>
</html>
Exemplo – arquivo estilo.CSS
h1 {
color: white;
background-color: red;
border: 1px solid black;
}
p{
background-color: rgb(0, 191, 255);
color: rgb(255, 255, 255);
padding: 50px;
}
Exemplo – resultado
Exemplos propriedades CSS

◼ color → define a cor de um elemento. Ex: color: blue


◼ background-color → define a cor de fundo do elemento.
◼ font-family → define a fonte a ser utilizada. Pode receber
mais de um parâmetro. Ex: font-family: "Arial",
"Helvetica", sans-serif;
◼ font-style → define o estilo da fonte (normal, italic,
oblique).
◼ text-align → define o alinhamento do texto. Ex: text-
align: right; text-align: justify;
Exemplos propriedades CSS

◼ line-height → tamanho da altura em pixels de cada linha

◼ letter-spacing → tamanho do espaço em pixels entre


cada letra;

◼ word-spacing → tamanho do espaço em pixels entre


cada palavra;

◼ text-indent → tamanho em pixels da margem da primeira


linha do texto;
Exemplos propriedades CSS

p {
line-height: 3px;
letter-spacing: 3px;
word-spacing: 5px;
text-indent: 30px;
}
Exemplos propriedades CSS
◼ background-image → permite indicar um arquivo de imagem para
ser exibido ao fundo do elemento. Ex:

h1 { background-image: url(../img/minha_imagem.jpg); }

◼ PS: o .. é necessário se o CSS estiver em uma pasta própria, então


temos que “recuar” para a pasta anterior do projeto e de lá passar
para a pasta img.

◼ Podemos também apontar para um local na internet:

body {
background-image: url(https://site.com/imagem.jpg);
}
Bordas

◼ para cada borda de um elemento, podemos determinar sua cor, seu


estilo de exibição e sua largura. Por exemplo:

body {
border-color: red;
border-style: solid;
border-width: 1px;
}

◼ Ou de forma resumida: body { border: 1px solid red; }

◼ Para que o efeito da cor sobre a borda surta efeito, é necessário


que a propriedade border-style tenha qualquer valor diferente do
padrão none.
Exemplo com propriedades de borda

◼ Se adicionarmos na
propriedade p do arquivo
CSS do exemplo anterior
as propriedades abaixo,
teremos o resultado ao
lado:
◼ border-color: green;
◼ border-style: solid;
◼ border-width: 25px;

◼ Ps: teste outras opções em


vez de solid, como dashed,
dotted, double, groove ...
Bordas

◼ Podemos aplicar a borda em apenas em um dos lados ou parte


deles, variando também a cor se desejarmos:

h1 {
border-top: 1px solid red; /* borda vermelha em cima */
border-right: 1px solid blue; /* borda azul à direita */
border-bottom: 1px solid black; /* borda preta embaixo */
border-left: 1px solid red; /* borda vermelha à esquerda */
}
Dimensões – width e height

◼ Podemos determinar as dimensões de um elemento usando as


propriedades height (altura) e width (largura). Ex:

p{
height: 200px;
width: 100px;
}
◼ Com essa regra CSS para o parágrafo, todos os parágrafos da
nossa página ocuparão 200 pixels de altura e 100 pixels de largura.
Espaçamentos - padding

◼ A propriedade padding é utilizada para definir um espaçamento


interno em elementos da página, isto é, a distância entre o limite do
elemento, sua borda, e seu respectivo conteúdo) e tem as
subpropriedades listadas a seguir:

◼ padding-top , padding-right, padding-bottom e padding-left

◼ Essas propriedades aplicam uma distância entre o limite do


elemento e seu conteúdo acima, à direita, abaixo e à esquerda
respectivamente.

◼ Por padrão, o padding (preenchimento) é definido como 0.


Espaçamentos - padding

◼ Podemos definir todos os valores para as


subpropriedades do padding em uma única propriedade
padding.

◼ Se passarmos somente um valor para a propriedade


padding, esse mesmo valor é aplicado em todas as
direções.

◼ p { padding: 10px; }
Espaçamentos - padding

◼ Para adicionar o padding apenas na parte superior ao conteúdo,


use a propriedade padding-top. Para os outros lados, use padding-
bottom, padding-left, e padding-right. Exemplo:

th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
Espaçamentos - padding

◼ Se passados quatro valores, serão aplicados


respectivamente a padding-top, padding-right,
padding-bottom e padding-left.

◼ p { padding: 10px 20px 15px 5px; }


Seletores específicos

◼ É possível aplicar estilos de forma mais específica, limitando o seu


uso, sem se aplicar a todos os elementos do mesmo tipo. Ex:

figure img {
width: 200px;
}

◼ No exemplo, a largura de 200px será aplicada apenas a tag img que


está dentro de uma tag <figure>.
Seletores específicos - id

◼ É possível aplicar estilos de forma mais direta, a partir de um id


definido na página HTML. Ex:

HTML:
<img src="img/MJ.png" alt=“Michael Jackson" id=“img_michael">

CSS:

#img_michael {
width: 500px;
}
Seletores específicos - class

◼ Outra forma de aplicar estilos de forma mais direta, é usando a


propriedade class. Ex:

HTML:
<img src="img/MJ.png" alt=“Michael Jackson" class=“img_michael">

CSS:

.img_michael {
width: 500px;
}
Seletores específicos

◼ Quanto mais específico é o seletor, maior sua prioridade.

◼ A prioridade do seletor pelo id é superior a prioridade do seletor


pela classe, a qual é superior a prioridade da tag.

◼ É preferível usar estilos apontando para classes no CSS do que


referenciar um tipo de tag (p, h1 etc) diretamente.

◼ Ao nomear classes, lembre-se de fazer referência ao papel que


essa classe exerce na página.
Seletores específicos

◼ Um ID tem que ser único na página, enquanto uma classe pode ser
aplicada a vários elementos (tags);

◼ Além disso, Um elemento pode ser associado a mais de uma classe


ao mesmo tempo, o que nos permite aplicar diferentes regras de
estilo ao mesmo tempo:

◼ <nav class="menu-opcoes menu-cabecalho">


Seletores específicos

◼ Neste exemplo o texto em H1 ficará na cor verde.

<body>
<h1 class= "H1_pela_classe" id="H1_pelo_id">cor verde</h1>
</body>
/* CSS*/
/* Prioridade baixa */
h1 { color: black; }
/* Prioridade média */
.H1_pela_classe { color: red; }
/* Prioridade mais alta */
#H1_pelo_id { color: green; }
Espaçamentos - margin

◼ A propriedade margin é parecida com a propriedade padding,


exceto que ela define um espaçamento externo (adiciona espaço
após o limite do elemento, ou seja, é um espaçamento além do
elemento em si).

◼ margin-top
◼ margin-right
◼ margin-bottom
◼ margin-left

◼ Existe a versão reduzida margin, que funciona da mesma forma que


a propriedade padding.
Introdução ao HTML / CSS
parte 2

Prof. Maurício Braga

Você também pode gostar