css
DESCRIPTION
Tópicos sobre CSSTRANSCRIPT
BRUNOMARANHÃO
CSS
CSS1 - Conteúdo2 - Introdução3 - Utilização4 - Editor5 - Tipos de chamada6 - Sintaxe7 - class x id8 - Seletores9 - Hierarquia10 - Estilização11 - Imagens12 - Sprite13 - Pseudo-elemento14 - Posicionamento15 - Elementos block e inline16 - Listas e tabelas17 - Hacks18 - Dica essencial19 - Criação de um template básico
BRUNOMARANHÃO
Conteúdo
CSSFolhas de estilos em cascataCascading Style Sheets (CSS)
Linguagem de marcação de hipertextoHypertext markup language (HTML)
BRUNOMARANHÃO
Introdução
CSSCSS x Tabelas
Tableless!A tabela é vilã?
BRUNOMARANHÃO
Utilização
CSSAptana
Dreamweaver $$
Notepad++
Bloco de notas
BRUNOMARANHÃO
Editor
CSSinline > tag interna > arquivo externoinline<h1 style="font-size: 18px;">
tag interna<style> h1 {font-size: 18px;}</style>
arquivo externo<link rel="stylesheet" type="text/css" href="css/estilos.css"/>
BRUNOMARANHÃO
Tipos de chamada
!importantfont-size: 18px !important;
CSSseletor {propriedade: valor;}
p { font-family: Arial; color: #FFFFFF; font-size: 12px; }
BRUNOMARANHÃO
Sintaxe
CSSnão único x únicocódigo de barras x número de série
<div id="box1" class="box_azul"><div id="box2" class="box_azul">
BRUNOMARANHÃO
class x id
CSS#minha_div p strong { font-weight: bold; color: blue; text-decoration: underline;}_________________________
ul.menu_principal li { border: 1px solid #000000; display: block; float: left; height: 20px; padding: 0 5px; width: 70px;}
BRUNOMARANHÃO
Hierarquia
div div {color: red;}
div>div {color: red;}
CSSfont-weight: bold;color: blue;text-decoration: none;text-transform: uppercase;border: 1px dotted #5F5F5F;text-align: center;width: 200px;height: 40px;...
BRUNOMARANHÃO
Estilização
CSSbackground: url("../imgs/degrade.png") left top no-repeat;
background: url("../imgs/degrade.png") left top repeat-x;
BRUNOMARANHÃO
Imagens
CSSImagem inteira:
img.minha_imagem {display: block;background: url("../imgs/degrade_sprite.png") 0 0 repeat-x;width: 240px;height: 87px;}
img.minha_imagem:hover {background-position: 0 -87px;}
BRUNOMARANHÃO
Sprite
CSSseletor.classe:pseudo-elemento {propriedade: valor;}
:first-letter:first-line:first-child:before:after:focus:hover
BRUNOMARANHÃO
Pseudo-elemento
CSS• position• margin• padding• float• top right bottom left• display • z-index
BRUNOMARANHÃO
Posicionamento
CSSblock x inline x none
Alguns elementos block:
div hr p h1 table ul ...
Alguns elementos inline:
span a strong img input select ...
BRUNOMARANHÃO
Elementos block e inline
CSSul li (marcadores)ol li (números)list-style: none;_____________________
table thead tr thtable tbody tr td
BRUNOMARANHÃO
Listas e tabelas
CSSNavegadores diferentes = problemas<link href="todos_navegadores.css" rel="stylesheet" type="text/css"><!--[if IE]> <link href="somente_ie.css" rel="stylesheet" type="text/css"> <![endif]--><!--[if lt IE 7]> <link href="ie_6_e_anteriores.css" rel="stylesheet" type="text/css"> <![endif]--><!--[if !IE]>--> <link href="nao_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
Todosleft: 240px;
Chrome e IEleft 260px\9;
IE_left: 270px;
IE7*left: 280px;
BRUNOMARANHÃO
Hacks
CSSFIREBUG!Quem implementa ou usa HTML e CSS não vive sem o Firebug.
Opções:- Firebug para Chrome- DragonFly para Opera
BRUNOMARANHÃO
Dica essencial
CSSPrática
BRUNOMARANHÃO
Criação de um template básico
