CSS - Primeiros Passos (básico)
8
CSS – PRIMEIROS PASSOS BY: ROBERTO VINICIUS DA SILVA BACHAREL EM CIÊNCIA DA COMPUTAÇÃO - UNICID
-
Upload
roberto-da-silva -
Category
Technology
-
view
35 -
download
3
Transcript of CSS - Primeiros Passos (básico)
CSS – PRIMEIROS PASSOSBY:
ROBERTO VINICIUS DA SILVA
BACHAREL EM CIÊNCIA DA COMPUTAÇÃO - UNICID
O QUE É CSS??• CSS É A ABREVIAÇÃ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 PARA ADICIONAR ESTILO AO
HTML {FONT, IMAGE, COLORS, ANIMATION, ETC.}
NÃO É ATOA QUE DIZEM;
HTML > ESTRUTURA A PÁGINA | CSS > PARA APRESENTAR| 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...
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
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 {}
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 */
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 ASSIMH1, H2, P {
COLOR: BLUE; TEXT-ALIGN: GREEN;
}
INSERINDO O CSS NO HTMLSÃ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’
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
