CSS - Primeiros Passos (básico)

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 >> “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...

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 ASSIM
H1, H2, P {
COLOR: BLUE; TEXT-ALIGN: GREEN;
}

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’

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

CSS - Primeiros Passos (básico)

Recomendados

Recomendados

Más contenido relacionado

Similar a CSS - Primeiros Passos (básico)

Similar a CSS - Primeiros Passos (básico) (20)

CSS - Primeiros Passos (básico)