Você está na página 1de 27

CSS Básico

Desenvolvimento em Web I
Rafael França
Formas de utilizar CSS

Existem 3 formas para incluir o código CSS


na página.
- Inline
- Interno
- Externo
Inline

O código é inserido dentro do próprio


elemento, utilizando o atributo "style". Nesta
forma, somente o elemento no qual foi
inserido o css será afetado.

<p style="color:#B000FF;">CSS dentro das tags HTML</p>


Interno

O código é inserido na página e pode ser


reutilizado dentro desta mesma página.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Seu título</title>
<meta charset="utf-8">
<style type="text/css">
.texto {color:#B000FF;}
</style>
</head>
<body>
<p class="texto">Estilo chamado através do head da página</p>
</body>
</html>
Externo

O código css é inserido em um arquivo externo e


ligado à página através da tag "link". Este arquivo
afetará todas as páginas nas quais for inserido.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Seu título</title>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<p class="texto">Estilo chamado através do head da página</p>
</body>
</html>
Seletores

Seletores CSS ajudam a especificar melhor


o elemento que deve ser afetado.
- Tags
- Classes
- Identificadores
Tags
ul {
margin: 0;
padding: 0;
}
Classes
.aviso {
color: red;
}
Identificadores
#rodape {
background-color: #333;
}
Prioridades do CSS

Precisamos entender de que forma o CSS


trabalha.
Prioridades:
- Cascata
- Mais específico
- Utilizando o "!important"
Cascata

O CSS (folha de estilo em cascata), se utiliza


do método de sobrescrita para identificar a
propriedade a ser utilizada.
.aviso {
color: blue;
}

(...)

.aviso {
color: red;
}
Mais específico

O CSS sempre dará prioridade ao mais


específico.
p.aviso {
color: blue;
}

(...)

.aviso {
color: red;
}
Utilizando o "*!important*"
.aviso {
color: blue !important;
}

(...)

.aviso {
color: red;
}
Unidades de Medida

CSS oferece um número de unidades diferentes


para a expressão de comprimento. Algumas têm
sua história em tipografia, como o ponto (pt) e a
paica (pc), outros são conhecidos devido a seu uso
diário, como centímetro (cm) e polegada (in). E há,
também, uma unidade "mágica" que foi inventada
especificamente para CSS: px.
Unidades de Medida

As unidades em e ex dependem da fonte e podem


ser diferentes para cada elemento no documento.
em é, simplesmente, o tamanho da fonte. Em um
elemento com a fonte de 2in, 1em será, portanto,
2in.
Unidades de Medida

A unidade ex é raramente usada. Seu propósito é


expressar tamanhos relacionados à "altura do x" de
uma fonte. A altura do x é, grosso modo, a altura de
letras em minúsculo como a, c, m, ou o. Fontes que
têm o mesmo tamanho (e, portanto, o mesmo em)
podem variar muito o tamanho de suas letras em
minúsculo, e, quando é importante que alguma
imagem, por exemplo, se iguale à altura do x, a
unidade ex está disponível.
Unidades de Medida

A rem ("root em") é o tamanho de fonte do


elemento-raiz do documento.

Outras unidades em desenvolvimento permitem


especificar tamanhos relativos à janela do leitor.
São a vw e vh. A vw é 1/100 da largura da janela e vh
é 1/100 da altura da janela.
Cores

Detalharemos as diferentes formas de se


escrever a sintaxe para os valores de cores
em CSS.
Código hexadecimal

#FFF = #FFFFFF
#CF9 = #CCFF99
#cde = #ccddee
#49c = #4499cc
Código rgb

rgb(145, 230, 50)


rgb(20%, 0%, 70%)
Código rgba

rgba(145, 230, 50, 1)


rgba(20%, 0%, 70%, .5)
Palavra-chave
p {color: aqua;}
div {background-color: teal;}
Baseado no sistema
operacional do usuário
p {color: ThreeDLightShadow;}
div {background: ButtonShadow;}

Exemplos:

ActiveBorder, ActiveCaption, AppWorkspace,


Background, ButtonFace, ButtonHighlight,
ButtonShadow, ButtonText, CaptionText, GrayText,
Highlight, HighlightText, InactiveBorder,
InactiveCaption, InactiveCaptionText, InfoBackground,
InfoText, Menu, MenuText, Scrollbar,
ThreeDDarkShadow, ThreeDFace, ThreeDHighlight,
ThreeDLightShadow, ThreeDShadow, Window,
WindowFrame, WindowText
Seletores Complexos
Pattern Meaning Described in CSS level
section

* any element Universal 2


selector

E an element of type E Type selector 1

E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute 2
selectors

E:hover

E.warning an E element whose class is "warning" (the document language Class 1


specifies how class is determined). selectors

E#myid an E element with ID equal to "myid". ID selectors 1

EF an F element descendant of an E element Descendant 1


combinator

E>F an F element child of an E element Child 2


combinator
Display

Block

O elemento se comporta como um bloco.


Ocupando praticamente toda a largura
disponível na página. Elementos de
parágrafo (p) e título(h1, h2, ...) possuem
esse comportamento por padrão.
Display

Inline

O elemento se comporta como um elemento


em linha. Exemplos de elemento que se
comportam assim são por exemplo as tags
span e a.
Display

Inline-Block

Semelhante ao inline, no entanto, ao


definirmos inline-block em um elemento,
conseguimos definir as propriedades de
largura e altura para ele. Coisa que não
conseguimos em um elemento com display:
inline.

Você também pode gostar