Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS - introdução
Search
Madson Dias
March 10, 2012
Programming
0
22
CSS - introdução
Madson Dias
March 10, 2012
Tweet
Share
More Decks by Madson Dias
See All by Madson Dias
Recozimento Simulado
omadson
0
210
Markdown para Latex
omadson
0
1.2k
Latex: Coisas que eu aprendi na marra!
omadson
0
250
Python? Até vovó consegue!
omadson
0
170
Falar em público
omadson
0
21
Programação orientada a objetos #2
omadson
0
79
Programação orientada a objetos #1
omadson
0
25
CSS - fontes
omadson
0
28
CSS - texto
omadson
0
25
Other Decks in Programming
See All in Programming
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
690
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Software Architecture
hschwentner
6
2.3k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
CSC509 Lecture 04
javiergs
PRO
0
300
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.7k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.1k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
4 Signs Your Business is Dying
shpigford
185
22k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
@omadson
Introdução CSS - @omadson 2
• 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
• 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
• Lista de regras • Seletor • Folha de estilos
CSS - @omadson 5 seletores { declarações; }
• 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;
• 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; }
• 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; }
• Inline • Tag style • Tag link CSS -
@omadson 9
• Inline • Tag style • Tag link CSS -
@omadson 10 <p style=“color: red;”>...</p>
• Inline • Tag style • Tag link CSS -
@omadson 11 <style> p { color: red; } </style>
• Inline • Tag style • Tag link CSS -
@omadson 12 <link rel=stylesheet type=text/css href=local/arquivo.css >
• O atributo media. o all o print o screen
o aural o handheld CSS - @omadson 13
• Os comentários em CSS podem ser da seguinte forma:
CSS - @omadson 14 /* comentários */
• 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; }
class id • Você também pode definir seus próprios seletores
utilizando os atributos class e id. CSS - @omadson 16
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>
class id • Você também pode definir seus próprios seletores
utilizando os atributos class e id. CSS - @omadson 18 CSS .p1 { color: #000; }
class id • Você também pode definir seus próprios seletores
utilizando os atributos class e id. CSS - @omadson 19
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>
class id • Você também pode definir seus próprios seletores
utilizando os atributos class e id. CSS - @omadson 21 CSS #p1 { color: #000; }
• 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
• http://omadson.wordpress.com @omadson • http://yagoacp.wordpress.com @Yago_A • http://jedersonsecundino.wordpress.com @JedersonS CSS
- @omadson 23
Obrigado! CSS - @omadson 24