Post on 15-Jul-2020
CSS
Karen Frigo Busolin
O que é CSS ?
Significa Cascading Style Sheets
Estilos define como mostrar elementos
HTML
Estilos foram adicionandos no HTML 4.0
Estilos na solução de
problemas HTML nunca deve a intenção de conter tags parar formatar um
documento
Quando a tag <font> e os atributos de cores surgiram no HTML 3.2 foi um pesadelo para os desenvolvedores web, pois cada site tinha sua cor e sua fonte. Assim, o desenvolvimento acabava virando um demorado e caro processo.
Para resolver esse problema o W3C criou o CSS.
No HTML 4.0, toda a formatação poderia ser removida do documento HTML e armazenada em um arquivo separado com todas as formatações de estilo.
Hoje, todos os browsers suportam CSS.
CSS Sintaxe
A regra do CSS tem duas partes: o seletor e a(s)
declaração(s).
O seletor é normalmente o elemento que desejamos estilizar.
Cada declaração consiste em uma propriedade e um valor.
A propriedade é o atributo do estilo que vocêe deseja modificar e cada propriedade tem um valor.
CSS Sintaxe
Uma declaração CSS sempre deve terminar com ponto-e-vírgula;
Uma declaração em group são envolvidos por chaves.
p {color:red;text-align:center;}
p { color:red; text-align:center; }
Regras
Exemplo - HTML
Exemplo - CSS
Exemplo - CSS
Id Selector
Usado para especificar um estilo em um
elemento único.
Utilizar "#"
Exemplo
#para1
{
text-align:center;
color:red;
}
Nunca inicie um ID com um número, pois
não irá funcionar no Firefox.
Class Selector
Example
.center {text-align:center;}
O seletor de classe é utilizado para especificar o estilo para um grupo de elementos.
Isso permite setar um estilo particular para qualquer elemento HTML da mesma classe.
Como utilizar CSS
Existem 3 maneiras de inserir um estilo:
External style sheet
Internal style sheet
Inline style
External Style Sheet
O seletor de classe é utilizado para especificar o estilo para um grupo de elementos.
Um external style sheet é ideal quando o estilo será aplicado em diversas páginas. Com o external style sheet você pode alterar o estilo de um página inteira, mudando somente o link.
Dica: Não deixe espaços em branco na propriedade value e nas unidades, pois não irá funcionar no Firefox.
External Style Sheet
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Internal Sytle Sheet
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Um internal style sheet deve ser usado quando um
documento tem seu estilo único.Você pode
definir um estilo interno na seção head, utilizando
a tag <style>.
Inline Styles
<p style="color:sienna;margin-left:20px">This
is a paragraph.</p>
O seletor de classe é utilizado para
especificar o estilo para um grupo de elementos.
CSS Background
Define as propriedades que são utilizadas
para aplicar efeitos de fundo.
background-color
background-image
background-repeat
background-attachment
background-position
Exemplo
Exemplo
Como aplicar
Nome – nome da cor
"red"
RGB – um valor RGB
"rgb(255,0,0)"
Hex – um valor Hexadecimal
"#ff0000"
Imagem
body {background-image:url('paper.gif');}
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
Normal
Normal
Repeat-X
Repeat-X
No – Repeat
No – Repeat
Exemplo
Exemplo
Propriedades
Property Description Values CSS
background Atribui todas as propriedades do fundo em uma única declaração
background-color background-image background-repeat background-attachment background-position inherit
1
background-attachment Atribui uma imagem de fundo na tela mesmo tendo scroll, ou seja, a imagem permanece no lugar.
scroll fixed inherit
1
Propriedades
Property Description Values CSS
background-color Atribui uma cor de fundo color-rgb color-hex color-name transparent inherit
1
background-image Atribui uma imagem ao fundo url(URL) none inherit
1
Propriedades
Property Description Values CSS
background-position Atribui uma posição inicial para posicionamento da imagem
left top left center left bottom right top right center right bottom center top center center center bottom x% y% xpos ypos inherit
1
background-repeat Atribui se a imagem irá se repetir ou não
repeat repeat-x repeat-y no-repeat inheri
1
Texto
Texto
Alinhamento
Alinhamento
Decoração
Decoração
Transform
Transform
Identar
p {text-indent:50px;}
Propriedades
Property Description Values
color Sets the color of a text color
direction Sets the text direction ltr rtl
line-height Sets the distance between lines normal number length %
letter-spacing
Increase or decrease the space between characters
normal length
Propriedades
Property Description Values
text-align Aligns the text in an element left right center justify
text-decoration
Adds decoration to text none underline overline line-through blink
text-indent Indents the first line of text in an element
length %
Propriedades
Property Description Values text-transform Controls the letters in an element none
capitalize uppercase lowercase
1
vertical-align Sets the vertical alignment of an element baseline sub super top text-top middle bottom text-bottom length %
1
white-space Sets how white space inside an element is handled
normal pre nowrap
1