PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

04/12/2010

Simulador CSS e HTML – Ótimo para iniciantes…

 css

Teste trabalhos em CSS e HTML

Se você está começando ou aprendendo a utilizar códigos CSS, o CCSDESK é perfeito para você fazer testes e simulações antes de usá-los no seu site ou blog.

Help

CSS (Casdading Style Sheets) ou Folha de Estilo em Cascata, para quem não sabe, é uma linguagem similar e complementar ao HTML, que controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, ou seja, todo o layout de um site. (leia: O que é CSS?)

O CSSDESK é um simulador online e gratuito, que permite você fazer testes com códigos HTML e CSS, com visualização em tempo real. Depois dos testes, você pode copiá-los para o seu site, ou fazer o download do arquivo HTML completo.

Entretanto, para quem ainda não conhece bem a estrutura da linguagem,  o simulador cria arquivos separados, um em HTML e outro em CSS, ou seja, cria uma Folha de Estilo Externa. Se optar em fazer o download da sua simulação, o aplicativo irá criar uma página HTML em Folha de Estilo Interna. Veja abaixo o que significa isto e como colocar o CSS no seu site:

warning_48

Atenção: O CSSDESK não roda no Internet Explorer (versões 8.0 e inferiores)

Como inserir códigos “CSs”

Existem 3 maneiras para você usar códigos CSS em um site:

1) Folha de Estilo Externa (usada para criação de templates e layouts de sites)

Nesta maneira, você cria um arquivo em HTML e relaciona os arquivos CSS separados em outras pastas na estrutura do site.

Exemplo:

Arquivo HTML

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

<body>
<div>
<p>Testando o CSSDESK!</p>
</div>
</body>

Observe o seletor link rel=”stylesheet” type=”text/css” href=”URL do arquivo CSS,que indica o caminho onde fica o arquivo CSS hospedado.

Arquivo mystyle.css (armazenado separadamente)

div {
background: #f4f4f4;
width:530px;
height: 20px;
}
p {
color: red;
margin-left:50px;
}

2) Folha de Estilo Interna (usada para páginas HTML simples)

Nesta maneira, você insere o código CSS junto com o HTML no mesmo arquivo.

Exemplo:

<head>
<style type="text/css">
div {
background: #f4f4f4;
width:530px;
height: 20px;
}
p {
color: red;
margin-left:50px;
}
</style>
</head>

<body>
<div>
<p>Testando o CSSDESK!</p>
</div>
</body>

Observe que a tag <style type=”text/css”> insere o código CSS na estrutura HTML. Não esqueça de fechar com </style>.

ATENÇÃO: Usar <style type=”text/css”> somente entre as tags <head> … </head>, portanto em uma página HTML completa.

3) Folha de Estilo em Linha (usada para alterações dentro de uma página HTML – deve ser usada entre as tags <body> …. </body>)

Nesta maneira, você poderá mesclar o código HTML com o CSS. Esta é uma forma condensada ideal para alterar o código HTML de blogs ou inserir códigos CSS em publicação de posts e widgets. (Leia: Widget, o que é e para que serve?)

<div style="background: #f4f4f4;width:530px;height: 20px;">
<p style="color: red; margin-left:50px;">Testando o CSSDESK!</p>
</div>

Observe atributo style=”…“ utilizado junto com a tag, indicando a inclusão de um código CSS.

No exemplo descrito acima você terá o seguinte resultado, veja-o abaixo:

Testando o CSSDESK!

warning_48

ATENÇÃO: Em um site, você pode utilizar as 3 maneiras para inserir códigos CSS, dependendo da estrutura, organização e necessidade.

Para inserir códigos CSS em blogs, posts, módulos ou widgets, use somente Folha de Estilo em Linha, a não ser que você tenha conhecimento avançado ou experiência em criação de templates…

Utilizando o CSSDESK

Buddy

 

Acesse o site: cssdesk.com

 

imageO aplicativo é bem simples, possui uma divisão para códigos HTML, outra para códigos CSS e a tela de visualização.

Primeiro, altere a cor do fundo da tela de visualização selecionando a cor em [Background] no menu superior.

image Se desejar outra cor ou imagem, use o seguinte código na divisão do CSS

body {
background-color: #CECECE;
}

image

Altere a cor (código em laranja) para a cor que desejar inserir no fundo da tela de visualização.

ou

body {
background-image: url("http://www.visualdicas.com.br/images/stories/visualdicaslogoopcional.png");
}

image

Altere a URL da imagem (em laranja) para inserir outra imagem qualquer…

Pronto, definido o fundo de tela agora é só você ir escrevendo os códigos HTML e CSS para fazer a simulação.

Abaixo iremos mostrar um exemplo de aplicação, onde criamos uma caixa de estilo simples…

Código HTML

image Código CSS

image Tela de Visualização

image Agora você poderá copiar os códigos e inserir manualmente o seu trabalho no site ou blog usando  uma das maneiras explicadas acima…

Fazendo o download (clique em [Download] no menu superior), você obterá o arquivo completo no formato Folha de Estilo Interna

image

Veja como ficou a página HTML cssdesk.html gerado pelo CSSDESK:

<!DOCTYPE html>

<html>  

<head>
    <title>CSSDesk</title>

    <style type="text/css">
          div.caixateste{

color: yellow;
/* estrutura da caixa */
background-color: orange;
margin: 50 50 auto;
width: 200px;
padding: 100px;
text-align: center;
/* canto arredondado - não funciona no IE */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* sombra da caixa - não funciona no IE */
-webkit-box-shadow: rgba(0,1,1,1.2) 0px 2px 5px;
-moz-box-shadow: rgba(0,1,1,2.2) 0px 1px 5px;
box-shadow: rgba(0,1,1,2.2) 0px 1px 3px;
}
    </style>
  </head>

  <body>
    <div class="caixateste"><b>CAIXA DE TESTE</b></div>
  </body>
</html>

Para incluir o nosso exemplo neste artigo, por exemplo, devemos modificar manualmente o código para o formato Folha de Estilo em Linha…

<div style="color:yellow; background-color: orange; margin: 50 50 auto; width: 200px;padding: 100px; padding: 100px; text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px;-webkit-box-shadow: rgba(0,1,1,1.2) 0px 2px 5px;-moz-box-shadow: rgba(0,1,1,2.2) 0px 1px 5px;box-shadow: rgba(0,1,1,2.2) 0px 1px 3px;"><b>CAIXA DE TESTE</b></div>

Depois de modificado, teste o código no CSSDESK, faça as alterações que achar necessárias e cole o código no post. Observe que o código deverá ser descrito na divisão HTML apenas…

image

Agora veja o resultado do nosso exemplo:

CAIXA DE TESTE

 

Para compartilhar o código clique em [Share] no menu superior. O CSSDESK irá gerar um endereço URL que você poderá compartilhar com outros usuários…

Confira o nosso exemplo clicando no link gerado:

http://cssdesk.com/2bk3x (Folha de Estilo Externa)

http://cssdesk.com/J3cBM (Folha de Estilo em Linha)

Agora é com você…. Bom trabalho!

3 comentários:

Ambiente de Leitura CR disse...

Cheguei pelo Google. Obrigado pela dica. Tô burilando o CSS do meu blog e a sugestão de uso de um simulador veio em boa hora.

El Lobo disse...

Excelente sandbox, valeu primo!

Unknown disse...

Dica legal :)

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics