CSS - O fim do HTML?

hive

Tenho lido por aí sobre esse código, o CSS, que permite formatar e adicionar estilos a web sites sem a utilização de tabelas e com mais recursos de formatação e efeitos do que o HTML. O dreamweaver esta vindo com ferramentas para CSS e tenho visto muitos sites grandes aderindo ao CSS.
Eu comecei a aprender algumas coisinhas aqui e achei interessantes.

Alguém aí manja de CSS? Pode passar uns links e algum relato de uso.

To pensando em investir um tempo e aprender bem esse tal de Cascading Style Sheet (qu não é nenhuma novidade, eu sei, mas só agora me interessei

Valeu Cool

)

mariohs

Tem um tutorial bem básico na w3schools. é bom pra começar a aprender...

Quanto á morte do HTML, não concordo, acho que ambos caminham juntos e não existem um sem o outro. Só por curiosidade, não sei se você conhece o CSS Zen Garden, um site de "concurso" de design em CSS, todos os designs são feitos sobre exatamente o mesmo código fonte, apenas mudando a folha de estilos (css), tem vários templates muito bons e dá pra fazer muita coisa com CSS. Uma grande utilidade por exemplo é você apresentar a mesma folha de estilos para todas as suas páginas e quando quiser mudar, mudar apenas a folha, fazendo assim, todo o seu site mudar de acordo com o estilo.

olha um exemplo (só vai funcionar se voce estiver usando o firefox)
http://www.phoenity.com/newtedge/

pra formatação básica de fontes, olha o link
http://somacon.com/p334.php

se quiser um tutorial sobre css no wordpress seguem os links
http://www.alexking.org/software/wordpress/styles/sample.php?wpstyle=rubric
http://www.tamba2.org.uk/wordpress/graphicalcss/

Uma outra coisa: Tabelas e Frames hoje em dia tendem a ficar obsoletos, evite usá-los em seus sites.
Mais uma: Procure sempre obedecer os padrões web da w3c. Um site muito bom sobre web standards é o Tableless, e tem também um blog, que é muito bom de um cara chamado Bruno Torres.

Desculpe a enxurrada de links... e espero ter ajudado Wink

inesquecivel

Algo que pode ser útil a todos

O que é CSS
Comentamos brevemente o que são as folhas de estilo em cascata e explicamos uma série de efeitos rápidos e interessantes que se pode fazer com elas.

CSS, é uma tecnologia que nos permite criar páginas web de uma maneira mais exata. Graças às CSS somos muito mais donos dos resultados finais da página, ppodendo fazer muitas coisas que não se podia fazer utilizando somente HTML, como incluir margens, tipos de letra, fundos, cores...

CSS são as siglas de Cascading Style Sheets, em português Folhas de Estilo em Cascata. Neste artigo vamos ver alguns dos efeitos que se podem criar com as CSS sem necessidade de conher a tecnologia inteira.

Para começar

As Folhas de Estilo em Cascada se escrevem dentro do código HTML da página web, somente em casos avançados se podem escrever em um arquivo a parte e linkar a página com esse arquivo. À princípio vamos utilizar a maneira mais direta de aplicar estilos aos elementos da página, mais adiante veremos a declaração em arquivos externos. Para isso, e isto é a primeira lição de este artigo, vamos conhecer um novo atributo que se pode utilizar em quase todas as etiquetas HTML: style.

Exemplo:

<p style="color:green;font-weight:bold">O parágrafo sairá com a cor verde e em negrito</p>

Dentro do atributo style se devem indicar os atributos de estilos CSS separados por ponto e vírgula ( Wink

. Durante este artigo vamos conhecer muitos atributos de CSS, os dois primeiros que vimos aqui são:

Color: indica a cor do conteúdo, na etiqueta onde estivermos utilizando, geralmente indica a cor do texto.

Font-weight: indica a grossura do texto. Bold serve para colocar em negrito.

Cor nos links

Com HTML definimos a cor dos links na <body>, com os atributos link, vlink e alink. Isto nos permite mudar a cor dos links para todo o documento, mas e se quisermos mudar a cor de um link em concreto, para que tenha outra cor que a definida na etiqueta <body>?

Para fazer isto utilizaremos o atributo style dentro do link:

<a href="mienlace.html" style="color:red">

Assim sairá o link na cor vermelho, independentemente do definido para todo o documento.

Espaçamento entre linhas

Com CSS podemos definir o espaço que entre cada linha do documento, utilizando o atributo line-height. Por exemplo, podemos definir que para todo um parágrafo o espaço entre cada uma de suas linhas seja 25 pixels:

<p style="line-height: 25px;">
Um parágrafo normal no qual cada uma das linhas está separada 25 pixels da otra. Há de colocar suficiente texto como para que se vejam 2 linhas, assim sairão separadas
</p>

Espaçamento entre caracteres

Pode-se definir também o espaço entre cada caractere. Isto se faz com o atributo de CSS letter-spacing. Vejamos um exemplo:

<p style="letter-spacing:12cm">
Este parágrafo tem as letras espaçadas por 1 centímetro.
</p>

Este atributo, assim como ocorre com muitos outros de CSS, não está suportado para todos os navegadores. Em concreto Netscape, em sua versão 4 ainda não o inclui.

Links sem sublinhado

Um dos efeitos mais significativos e fáceis de realizar com CSS é eliminar o sublinhado dos links de uma página web. Existe um atributo que serve para definir a decoração de um texto, se está sublinhado, riscado, ou se não tem nenhuma destas "decorações". É o atributo text-decoration, neste caso indicaremos em um link que não queremos decoração:

<a href="mipagina.html" style="text-decoration:none">

Incluir estilos para todo um site web

Una de las características más potentes de la programación con hojas de estilo consiste en definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas.

Vejamos agora todo o processo para incluir estilos com um arquivo externo.

1- Criamos o arquivo com a declaração de estilos

É um arquivo de texto normal, que pode ter qualquer extensão, apesar de que lhe podemos atribuir a extensão .css para lembrarmos de que tipo de arquivo é. O texto que devemos incluir deve ser escrito exclusivamente em sintaxe CSS, é um pouco diferente da sintaxe que utilizamos dentro do atributo style. Estaria errado incluir código HTML neste arquivo: etiquetas e outras. Podemos ver um exemplo a seguir.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Linkamos a página web com a folha de estilos

Para isso vamos colocar a etiqueta <LINK> com os atributos
rel="STYLESHEET" indicando que o link é uma folha de estilo.
type="text/css" porque o arquivo é de texto, em sintaxe CSS.
href="estilos.css" indica o nome do arquivo fonte dos estilos.
Vejamos uma página web inteira que linkar com a declaração de estilos anterior:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lê estilos</title>
</head>
<body>
<h1>Página que lê estilos</h1>
<p>
Esta página tem no cabeçalho a etiqueta necessária para linkar com a folha de estilos. É muito fácil.
</p>
</body>
</html>

As CSS têm muito mais possibilidades

As Folhas de Estilo em Cascada são um padrão muito amplio, com umas especificações e possibilidades muito grandes. Neste artigo vimos alguns efeitos interessantes para realizar mesmo que não tenhamos nenhum conhecimento prévio. Entretanto, o melhor para trabalhar com esta tecnologia é conhece-la bem, graças a isso, os resultados serão muito mais surpreendentes.

Para ampliar esta informação e conhecer mais sobre CSS se pode encontrar um manual em criarweb.com http://www.criarweb.com/css/

asturmas

O fim do html n sera de certesa..
Como ja disseram eles complementam-se um ao outro..

Tutoriais:

http://www.apostilando.com/sessao.php?cod=3
http://www.codigofonte.com/css/
http://www.csszengarden.com/tr/portuguese/
http://www.linhadecodigo.com.br/desenvolvimento/hcd.asp
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.imasters.com.br/secao.php?codSecao=32
http://www.tableless.com.br/categorias/web-standards/css/
http://www.criarweb.com/workshop_css/
http://www.criarweb.com/artigos/173.php?manual=11
http://www.vivaolinux.com.br/dicas/verDica.php?codigo=2372
http://www.macromedia.com/br/tutorial/css.html
www.crieseuwebsite.com/desenvolvimento.php?area=css
http://www.linuxmall.com.br/index.php?category=livros_css
http://www.supertrafego.com/mini_curso_css.asp
http://www.imasters.com.br/cssinterativo/
http://www.htmlstaff.org/css.php
http://www.hipermasters.com/?secao=css
http://www.codigofonte.net/?secao=dicas&Gling=css

Se persisares de mais tutoriais diz!
CUmps

romano

Obrigado asturmas pelos links uteis.
Quanto a o tópico é evidente que o html está para durar. O css apenas o complementa e torna-o mais fácil.
Eu não percebo nada de programação e os ficheiros css têm sido a minha salvação. É um conceito muito interessante de como podemos mudar o aspecto más não a forma.

rafazamboni

nossa.. dúvido que o css tire o html de cena...
pelo menos não por enquanto (pra num dizer alguns anos)

mas acho q um dia uma nova programação entrará no lugar do html.. algo talvez mais simples e mais funcional...

é só aguardar para ver...

MAS FIM DO HTML DUVIDOO

asturmas

Mais simples ke o html?
Duvido muito mas prontos...
O html ja e simples..ainda mais?

Cumps

rafazamboni · Last edited by rafazamboni on Thu Jan 19, 2006 4:57 am; edited 1 time in total

sim sim...
acho que mais simples sim.. e muito mais elaborado... mais funcional...

nada se evolui para complicar.. sempre se buca a simplicidade nas coisas facilitando o seu uso... pq com o html seria diferente?

gnomme

asturmas

Mais elaborado e possivel mas mais simpls n sei...
gnomme, ainda arranjo mais...
Na parte ingles nos tutoriais tens la mais uns kuantos postos por min..
Basta usar o google e tens o mundo todo a teus pes Razz

Vou ver se arranjo mais uns kuantos..

Mas o ideal...

Usa o google Wink

Cumps

miau

Apesar de nao utilizar muito css, creio que isto seja improvável.
A sua própria utilizaçao depende do html.
Para mim, ambos formam um conjunto, que bem utilizados produzem ótimos resultados. Smile