Guia CSS – 5ª parte: Divs

Postado por: Pedro Rogério em
  • 14 jul
  • 0

As Divs(divisões), são elementos em níveis de bloco do (x)HTML usados para definir seções de um arquivo (x)HTML. Uma divisão pode conter todas as peças que compõem sua página, incluíndo divisões adicionais, imagens, texto.

Por exemplo, você define uma divisão dentro de um arquivo (x)HTML colocando o seguinte código dentro das tags <body></body>:


<div>
Aqui vai o conteúdo do site
</div>

E na hora de aplicar algum estilo você deve prosseguir da seguinte forma, o HTML fica assim:

Continuar lendo »

Guia CSS – 4ª parte: Utilizando ids

Postado por: Pedro Rogério em
  • 14 jul
  • 2

Os seletores de ID são semelhantes as classes, mas há uma diferença, eles só podem seu usados uma única vez em uma página (x)HTML. Seu uso geralmente é denominado para elementos de disposição da página, que geralmente são usados uma única vez, e os seletores de classe ficam a cargo de estilizar o resto de nossa página.

Vamos pegar como exemplo uma div que contém o nosso site:


<div id="container">
Aqui vai o conteúdo do site
</div>

Continuar lendo »

Guia CSS – 3ª parte: Utilizando classes

Postado por: Pedro Rogério em
  • 10 jul
  • 3

Os seletores de classe permitem que você determine diversos estilos dentro de um mesmo elemento (x)HTML. Ele é similar aos estilos inline. As classes podem seu usadas diversas vezes dentro de um arquivo (x)HTML, diferentemente do ID, que só pode ser usado uma vez, mas isso veremos em um próximo artigo. Para um melhor entendimento vamos a um exemplo, eu gerei uma definição para um parágrafo:


p {
   font-size:1.6em;
   color:#F00;
}

Tudo bem, mas eu quero que uma parte do meu parágrafo fique em verde e negrito, aí é que iremos usar uma classe, então, vamos criar a mesma:


.boldgreen {
  color: #008080;
  font-weight: bold;
}

Para uma melhor compreensão, veja um exemplo em funcionamento. Como você pode reparar, os seletores de classe começam com (.), e quanto ao nome das mesmas, elas ficam ao seu critério.

Tradução do artigo original de: CSS Basics.

Guia CSS – 2ª parte: Sintaxe CSS

Postado por: Pedro Rogério em
  • 3 jul
  • 5

Continuando o guia sobre CSS, hoje iremos ver a Sintaxe CSS, ela é um pouco diferente da sintaxe (x)HTML, mas é bem fácil, ela consiste em 3 partes:

seletor { propriedade:valor }

Onde: O seletor é o elemento (x)HTML que você deseja denominar, a propriedade é o valor real da propriedade, e o valor é o estilo que se aplica a essa prorpiedade. Cada seletor pode ter propriedades múltiplas, e cada propriedade dentro desse seletor pode ter valores independentes. A propriedade e o valor são separados por dois pontos e ficam contidos dentro de 2 colchetes. As propriedades múltiplas são separadas por ponto e vírgula. Os valores múltiplos dentro de uma propriedade são separados por vírgula, e se um valor individual contiver mais de uma palavra, você deve colocá-lo dentro de uma citação. Abaixo você pode ver um exemplo:


body {
     background:#cccccc;
     font-family:"Trebuchet MS", Verdana, Arial, serif;
}

Como podem ver acima, eu separei o valor da propriedade font-family por vírgula, e coloquei a fonte Trebuchet MS dentro de uma citação. O resultado no navegador seria que o corpo da página teria a cor cinza e as fontes seriam as que eu defini alí, pelo menos as que a grande maioria dos usuários tem instaladas no computador.

Continuar lendo »

Guia CSS – 1ª parte: Introdução as CSS

Postado por: Pedro Rogério em
  • 26 jun
  • 2

Com esse artigo vou iniciar um série deles explicando as propriedades CSS. Um ótimo guia básico para aqueles que estão iniciando em CSS, e o primeiro deles é uma breve introdução:

As CSS (folhas de estilo em cascata), permitem que você separe toda a formatação do seu site do código (x)HTML. Enquanto você trabalha encima do HTML, o CSS fica por conta da formatação das fontes, cores, background, bordas, efeitos em links, etc., tudo isso concentrado em um arquivo. Existem várias maneiras de se usar o CSS, seja ela internamente ou externamente.

Utilizando estilos internamente

Quando estamos usando estilos internos, nós simplesmente colocamos o nosso CSS dentro das tags <head></head> do nosso código (x)HTML. Você pode ver um exemplo logo abaixo:


<html>
<head>
<title></title>
<style type="text/css">
Aqui você coloca o código CSS
</style>
</head>
<body>
</body>
</html>

Nesse método toda cada página (x)HTML terá seu respectivo código CSS para a formatação da página. Esse método é ideal para aqueles sites de uma página ou para quem está iniciando no assunto.

Continuar lendo »

Páginas:«12