CSS – PRIMEIROS PASSOS
BY:
ROBERTO VINICIUS DA SILVA
BACHAREL EM CIÊNCIA DA COMPUTAÇÃO - UNICID
O QUE É CSS??
• CSS É AABREVIAÇÃO PARA O TERMO EM INGLÊS ‘CASCADING STYLE SHEET’, TRADUZIDO
PARA O PORTUGUÊS COMO >> “FOLH...
SINTAXE DO CSS
A REGRA DO CSS CONSITES EM “SELETOR” E “DECLARAÇÃO”
• SELETOR CORRESPONDE AO ELEMENTO HTML QUE VOCÊ QUER MO...
CSS EXEMPLE
P {COLOR:RED;TEXT-ALIGN:CENTER;}
• ESSE SIMPLE CÓDIGO CSS, FAZ COM QUE TODOS ELEMETOS P DE PARÁGRAFO,
TENHAM C...
COMENTÁRIOS NO CSS
• COMENTÁRIOS SÃO USADOS PARA EXPLICAR ALGUM COMANDO, COLOCAR UMA
DICA, QUE SOMENTE VOCÊ QUE ESTA PROGR...
ID & CLASS SELECTOR
• EM HTML VOCÊ USA ID PARA ESPECIFICAR UMA IDENTIFICAÇÃO A UM COMANDO, PARA ESPECIFICAR ESSE ID NO CSS...
INSERINDO O CSS NO HTML
SÃO ESSES TRÊS ;
• EXTERNAL STYLE SHEET
• INTERNAL STYLE SHEET
• INLINE STYLE
SÓ VOU DAR ÊNFASE A ...
CSS – PRIMEIROS PASSOS
• ISSO FOI SÓ UMA IDEIA DE COMO FUNCIONA CSS, TUDO ISSO VOCÊ PODE
ENCONTRAR NO SITE;
• HTTP://WWW.W...
Próximos SlideShares
Carregando em…5
×

CSS - Primeiros Passos (básico)

242 visualizações

Publicada em

Para você ter uma base

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
242
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS - Primeiros Passos (básico)

  1. 1. CSS – PRIMEIROS PASSOS BY: ROBERTO VINICIUS DA SILVA BACHAREL EM CIÊNCIA DA COMPUTAÇÃO - UNICID
  2. 2. O QUE É CSS?? • CSS É AABREVIAÇÃO PARA O TERMO EM INGLÊS ‘CASCADING STYLE SHEET’, TRADUZIDO PARA O PORTUGUÊS COMO >> “FOLHAS DE ESTILOS EM CASCATA”. • ESTILO EM CASCATA SÃO MECANISMOS SIMPLES PARAADICIONAR ESTILO AO HTML {FONT, IMAGE, COLORS, ANIMATION, ETC.} NÃO É ATOA QUE DIZEM; HTML > ESTRUTURAA PÁGINA | CSS > PARAAPRESENTAR| JAVA SCRIPT > DAR VIDA • CSS TAMBÉM RESOLVEU VÁRIOS PROBLEMAS QUE HAVIA NO HTML ANTIGAMENTE CORES, FONT IMAGENS ERAM TODAS INSERIDAS E EDITADAS NO HTML, CONSEQUENTEMENTE O CÓDIGO FICAVA GIGANTESCO, E BAGUNÇADO, COM CSS VOCÊ PODE USAR OUTRA PÁGINA PARA ESSAS CONFIGURAÇÕES, OU SEJA, POLPA ESPAÇO E O CÓDIGO FICA MAIS ORGANIZADO...
  3. 3. SINTAXE DO CSS A REGRA DO CSS CONSITES EM “SELETOR” E “DECLARAÇÃO” • SELETOR CORRESPONDE AO ELEMENTO HTML QUE VOCÊ QUER MODIFICAR. • A DECLARAÇÃO VEM SEMPRE DENTRO DAS CHAVES {} E CADA PROPRIEDADE É SEPARA POR PONTO E VÍRGULA > ; < • PROPRIEDADE EQUIVALE EQUIVALE AO NOME, TAL COMO COR, FONT-STYLE, TEXT-DECORATION, ETC. • VALOR COMO DIZ, EQUIVALE AO VALOR DA PROPRIEDADE, 12PX (TAMANHO), BLUE (COR),ETC. VCX
  4. 4. CSS EXEMPLE P {COLOR:RED;TEXT-ALIGN:CENTER;} • ESSE SIMPLE CÓDIGO CSS, FAZ COM QUE TODOS ELEMETOS P DE PARÁGRAFO, TENHAM COR VERMELHA, E FIQUE CENTRALIZADOS. • REPAREM QUE AO FINAL DE CADA DECLARAÇÃO ELE ENCERRA COM PONTO E VIRGULE ; E SUAS DECLARAÇÕES FICAM DENTRO DAS CHAVES {}
  5. 5. COMENTÁRIOS NO CSS • COMENTÁRIOS SÃO USADOS PARA EXPLICAR ALGUM COMANDO, COLOCAR UMA DICA, QUE SOMENTE VOCÊ QUE ESTA PROGRAMANDO VISUALIZARA, E NÃO SERA VISTO POR NINGUÉM NO BROWSER • OS COMENTS, SÃO COLOCADOS ENTRE TRAÇO E ASTERISCO; /* */ • EXEMPLO; /* ESSE É MEU PRIMEIRO COMENTÁRIO */ /* TBM PODE É USADO PARA FAZER COMENTÁRIO COM VÁRIAS LINHAS */
  6. 6. ID & CLASS SELECTOR • EM HTML VOCÊ USA ID PARA ESPECIFICAR UMA IDENTIFICAÇÃO A UM COMANDO, PARA ESPECIFICAR ESSE ID NO CSS VOCÊ UTILIZA HASHTAG EM SEGUIDA O ID. • EX: #HEAD { COLOR: BLUE; TEXT-ALIGN:RIGHT; } O ID > HEAD > VAI TER COR AZUL E ALINHADO A DIREITA, SÓ E SOMENTE SÓ O HEAD, ESPECIFICADO POR # E HEAD • CLASS SELECTOR MSM PRINCIPIO DO ID, SÓ QUE ELE COMEÇA COM PONTO (.) NO LUGAR DO HASHTAG (#), ASSIM ELE SE APLICARÁ A TODOS OS ELEMENTO COM A CLASS HEAD • EX:; .HEAD { COLOR: GREEN; TEXT-ALIGN: CENTER;} • GRUPO DE SELETORES. ^QUANDO VOCÊ TIVER SELETORES COM AS MSMS CONFIGURAÇÕES VOCÊ PODE FAZER ASSIM H1, H2, P { COLOR: BLUE; TEXT-ALIGN: GREEN; }
  7. 7. INSERINDO O CSS NO HTML SÃO ESSES TRÊS ; • EXTERNAL STYLE SHEET • INTERNAL STYLE SHEET • INLINE STYLE SÓ VOU DAR ÊNFASE A 1 DELES, O MAIS UTILIZADO NO MERCADO DE TRABALHO ATUALMENTE, EXTERNAL STYLE SHEET. PARA INSERILO,BASTA VOCÊ INSERIR NO HTML ENTRE AS TAG HEAD, O COMANDO ABAIXO <HEAD> <LINK REL="STYLESHEET" HREF="MYSTYLE.CSS"> </HEAD> REL > ESPECÍFICA O TIPO DE LINK, NO CASO CSS (STYLESHEET) HREF > É O LOCAL EM QUE ESTÁ SALVO O NOME DO AQUIVO CSS, ‘MYSTYLE.CSS’
  8. 8. CSS – PRIMEIROS PASSOS • ISSO FOI SÓ UMA IDEIA DE COMO FUNCIONA CSS, TUDO ISSO VOCÊ PODE ENCONTRAR NO SITE; • HTTP://WWW.W3.ORG/STYLE/CSS/ • HTTP://WWW.W3SCHOOLS.COM/CSS/DEFAULT.ASP

×