Css introdução - madson dias
-
Upload
yago-augusto -
Category
Documents
-
view
197 -
download
16
Transcript of Css introdução - madson dias
![Page 1: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/1.jpg)
@omadson
![Page 2: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/2.jpg)
Introdução
CSS - @omadson 2
![Page 3: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/3.jpg)
• Uma folha de estilos é um conjunto de regras que
informa a um programa, responsável pela formatação
de um documento, como organizar a página, como
posicionar e expor o texto e, dependendo de onde é
aplicada, como organizar uma coleção de documentos.
CSS - @omadson 3
![Page 4: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/4.jpg)
• Separar apresentação da estrutura
• Controle absoluto da aparência da página
• Páginas mais leves
• Manutenção de um grande site
CSS - @omadson 4
![Page 5: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/5.jpg)
• Lista de regras
• Seletor
• Folha de estilos
CSS - @omadson 5
seletores { declarações; }
![Page 6: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/6.jpg)
• As regras podem estar dentro de um arquivo de texto
com extensão “.css” ou embutidas em um arquivo
HTML.
CSS - @omadson 6
propriedade: valor;
![Page 7: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/7.jpg)
• As regras podem estar dentro de um arquivo de texto
com extensão “.css” ou embutidas em um arquivo
HTML.
CSS - @omadson 7
h1 { font-size: 24pt; }
h1 { color: blue; }
h1 { font-size: 18pt; }
![Page 8: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/8.jpg)
• As regras podem estar dentro de um arquivo de texto
com extensão “.css” ou embutidas em um arquivo
HTML.
CSS - @omadson 8
h1 {
font-size: 24pt;
color: blue;
font-size: 18pt;
}
![Page 9: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/9.jpg)
• Inline
• Tag style
• Tag link
CSS - @omadson 9
![Page 10: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/10.jpg)
• Inline
• Tag style
• Tag link
CSS - @omadson 10
<p style=“color: red;”>...</p>
![Page 11: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/11.jpg)
• Inline
• Tag style
• Tag link
CSS - @omadson 11
<style>
p {
color: red;
}
</style>
![Page 12: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/12.jpg)
• Inline
• Tag style
• Tag link
CSS - @omadson 12
<link
rel=stylesheet
type=text/css
href=local/arquivo.css
>
![Page 13: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/13.jpg)
• O atributo media.
o all
o print
o screen
o aural
o handheld
CSS - @omadson 13
![Page 14: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/14.jpg)
• Os comentários em CSS podem ser da seguinte forma:
CSS - @omadson 14
/*
comentários
*/
![Page 15: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/15.jpg)
• Os estilos “herdam” propriedades de várias maneiras.
Uma das formas é através da própria hierarquia do
HTML.
CSS - @omadson 15
body {
color: red;
background-color: blue;
}
![Page 16: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/16.jpg)
class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS - @omadson 16
![Page 17: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/17.jpg)
class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS - @omadson 17
HTML
<p class=p1>...</p>
![Page 18: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/18.jpg)
class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS - @omadson 18
CSS
.p1 { color: #000; }
![Page 19: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/19.jpg)
class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS - @omadson 19
![Page 20: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/20.jpg)
class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS - @omadson 20
HTML
<p id=p1>...</p>
![Page 21: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/21.jpg)
class id • Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS - @omadson 21
CSS
#p1 { color: #000; }
![Page 22: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/22.jpg)
• http://goo.gl/Av799
• http://goo.gl/KKCSA
• http://goo.gl/bIpa7
• http://goo.gl/tMu8P
• http://goo.gl/Pw1h
• http://goo.gl/kqIf
• http://goo.gl/5aVWN
• http://goo.gl/QvWMN
CSS - @omadson 22
![Page 23: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/23.jpg)
• http://omadson.wordpress.com @omadson
• http://yagoacp.wordpress.com @Yago_A
• http://jedersonsecundino.wordpress.com @JedersonS
CSS - @omadson 23
![Page 24: Css introdução - madson dias](https://reader034.fdocument.pub/reader034/viewer/2022052601/5590b0c21a28abfd058b4602/html5/thumbnails/24.jpg)
Obrigado!
CSS - @omadson 24