[Css] O Que é? é como usar?

Jamers Rodrigues · Dezembro 9, 2012

CSS é a sigla para Cascading Style Sheets.

que em português foi traduzido para folhas de estilo em cascata e nada mais é, que um documento onde são definidas regras de fomatação ou de estilos, a serem aplicadas aos elementos da marcação de um documento HTML.

Qual é finalidade das CSS?

A finalidade das CSS é a de retirar da marcação toda e qualquer declaração que vise a apresentação do documento. Isto significa dizer que tags do tipo <font>, <b>, <i> bem como uso de colunas e linhas de tabelas para obtenção de espaçamentos não são admitidos ou admitidos com restrições em um projeto Web com CSS. Vale dizer simplificando: HTML para estruturação e CSS para apresentação.

Porque devo usar CSS?

CSS permite que você retire da marcação HTML toda a formatação (apresentação) do documento WEB. Quem vai determinar cores, formas, tipos e tamanhos, posicionamento e em fim todo o "visual" da página são as CSS. As vantagens estão relatadas nas respostas a seguir.

Quais as vantagens de se usar CSS ?

Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais:

controle total sôbre a apresentação do site a partir de um arquivo central;

agilização da manutenção e redesign do site;

saida para diferentes tipos de mídia a partir de uma versão única de HTML;

redução do tempo de carga dos documentos Web;

adequação simplificada aos critérios de acessibilidade e usabilidade;

elaboração de documentos consistentes com as aplicações de usuários futuras;

aumento considerável na portabilidade dos documentos Web.

Qual é a diferença entre CSS e HTML?

HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

OK, isto soa um tanto técnico e confuso. Mas, por favor continue lendo. Tudo fará sentido em breve.

Em tempos passados quando a Madonna era virgem e um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto é um cabeçalho " ou "isto é um parágrafo" usando tags HTML tais como <h1> e <p>.

À medida que a Web ganhava popularidade, os designers começavam a sentir a necessidade de encontrar meios de construir layout para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo a tag <font> que se diferenciava das tags originais do HTML pelo fato de destinar-se à layout — e não à estrutura.

Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites.

CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo a separação dos estilos de apresentação da marcação dos conteúdos torna a manutenção dos sites bem mais fácil.

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

  <title>Minha primeira página CSS</title>

</head>

<body>

<!-- Menu de navegacao do site -->

<ul class="navbar">

  <li><a href="index.html">Home page</a>

  <li><a href="pensamentos.html">Pensamentos</a>

  <li><a href="cidade.html">Minha cidade</a>

  <li><a href="links.html">Links</a>

</ul>

<!-- Conteudo -->

<h1>Minha primeira página CSS</h1>

<p>Bem vindos à minha página estilizada!

<p>Minha página não contém imagens, mas pelo

menos está estilizada.

Ela contém links, ainda que eles não levem

a lugar algum…

<p>Deveria haver mais textos aqui porém eu

ainda não decidi o que escrever.

<!-- Date e assine sua página, isto é educado! -->

<address>Construida em 15 de dezembro de 2004<br>

  por mim mesmo.</address>

</body>

</html>

Adicione as cores..


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

  <title>Minha primeira página CSS</title>

  <style type="text/css">

  body {

    color: purple;

    background-color: #d8da3d }

  </style>

</head>

<body>

[etc.]

Adicione as Fontes


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

  <title>Minha primeira página CSS</title>

  <style type="text/css">

  body {

    font-family: Georgia, "Times New Roman",

		  Times, serif;

    color: purple;

    background-color: #d8da3d }

  h1 {

    font-family: Helvetica, Geneva, Arial,

		  SunSans-Regular, sans-serif }

  </style>

</head>

<body>

[etc.]

Creditos:

Majour e Jamerson.

Depois eu continuo em outro topico, apenas coloquei uma apresentação pra vocês ver, na proxima vou ensinar como utilizar o css e as 3 funções..

Mozark · Dezembro 9, 2012

Nao entendi o que esse HTML,ta fazendo aki,na parte de CSS.

Jamers Rodrigues · Dezembro 10, 2012

Ai e um exemplo do HTML, para como usar o CSS.

iria colocar uma imagem , mas to com preguiça;;

Mozark · Dezembro 10, 2012

Ah entendi.é que aki,nao apareceu voce usando CSS,ali por isso perguntei mais agora ta diferente e certo.

Parabéns.

Jamers Rodrigues · Dezembro 10, 2012

Só usei do 2° exemplo para lá, porque o 1° é o codigo.

Vampira · Dezembro 10, 2012

Muito bom e bem explicado, REP +

Entrar

[Css] O Que é? é como usar?

Posts Recomendados

Jamers Rodrigues 43

Link para o post

Compartilhar em outros sites

Mozark 43

Link para o post

Compartilhar em outros sites

Jamers Rodrigues 43

Link para o post

Compartilhar em outros sites

Mozark 43

Link para o post

Compartilhar em outros sites

Jamers Rodrigues 43

Link para o post

Compartilhar em outros sites

Vampira 121

Link para o post

Compartilhar em outros sites

Participe da conversa

Quem Está Navegando 0 membros estão online

TibiaKing

Open Tibia Server

Redes Sociais

Anuncie no TibiaKing

Fóruns

Anuncie

Informação Importante