Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Target Target  • Seg 15 Set 2014 - 19:21

[CSS] Folha de estilo - Basic Tutorial Empty [CSS] Folha de estilo - Basic Tutorial Seg 15 Set 2014 - 19:21

Cascading Style Sheets ou simplesmente CSS é uma folha de estilo que nela podemos criar um estilo para nossas classes HTML.
A CSS é utilizada em quase todos os sites (alguns sites que falam sobre HTML não utilizam CSS).
Ela é composta por camadas e estas camadas definem como serão exibidos um determinado elemento.
Vejamos um pequeno exemplo:

Código:

<body>
<div class="conteudo-da-pagina"> </div>
</body>

O nosso body pode-se dizer quer é o "todo" do site, podemos utilizar o CSS para definir qual é a cor do nosso body.

Código:

body {
background: #000 /* Aqui ele diz algo como "Ei, você terá a cor preta!" */
}

Não é necessário utilizar hexadecimal para definir a cor, podemos usar também o rgb, vejamos:

Código:

body {
background: rgb(0, 0, 0)
}

Também pode-se usar o rgba:

Código:

body {
background: rgba(0, 0, 0, 0.5)
}

E também usando o nome da cor (em inglês):

Código:

body {
background: black
}
Com o Cascading Style Sheets você pode criar impressionantes sites. O CSS é o maior aliado da HTML, juntos eles fazem coisas incríveis, não precisamos ir muito longe, vejam aqui a BestSkins, o nosso menu, as categorias, todo este website foi desenvolvido com HTML e CSS (Utilizamos o jQuery e Javascript para desempenhar algumas funções). Não se utiliza o CSS só com HTML, também pode-se usar ele ao lado do PHP.
A maioria dos menus são feitos com o CSS.
Algumas das classes mais utilizadas da CSS são:

Código:

background -> cor de fundo
color -> cor da fonte
border -> borda, usando o valor em pixels (mais utilizado é pixels) e determinando o estilo se é dashed, dotted, double, groove, solid, outset, ridge.

Usa-se o CSS pra fazer outros tipos de efeitos, podemos usar ele como style="" dentro das divs e/ou classes HTMLs:

Código:

<div class="conteudo" style="background:#fff;color:#000">
Aqui vai o conteúdo
</div>

Bem pessoal, está é minha pequena contribuição. Mais pra frente vou ir postando mais sobre o CSS e suas utilidades e funções, por enquanto é apenas o básico pra entendermos como funciona.

Qualquer dúvida, pode me mandar uma mp que estarei tirando as dúvidas! Very Happy

Release's Release's  • Seg 15 Set 2014 - 19:25

[CSS] Folha de estilo - Basic Tutorial Empty Re: [CSS] Folha de estilo - Basic Tutorial Seg 15 Set 2014 - 19:25

Agora eu vi firmeza em Belo Tutorial , vai ajudar bastante os iniciantes ...

delkawy delkawy  • Seg 15 Set 2014 - 19:36

iConnect iConnect  • Ter 16 Set 2014 - 17:31

[CSS] Folha de estilo - Basic Tutorial Empty Re: [CSS] Folha de estilo - Basic Tutorial Ter 16 Set 2014 - 17:31

Olá,
Obrigado por compartilhar connosco.

Até Mais...

Conteúdo patrocinado  • 

[CSS] Folha de estilo - Basic Tutorial Empty Re: [CSS] Folha de estilo - Basic Tutorial

Permissões neste sub-fórum
Não podes responder a tópicos