FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


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
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 wrote:
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

Ena Ena!! Tantos!!

Obrigado! Razz
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
Wink 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
gabrielzambrin
o css só muda o stilo de como vai ser exibido o html intao bem dificil de acontece isso, e se quiser investir é legal passo horas mexendo nisso

flws
thales_
Acho que sim cara, do jeito que ta HTML vai desaparecer
D'Artagnan
puts nem ia reviver um tópico dessa idade, mas depois que responderam

Sério? vcs estudaram CSS por quantos segundos?

O CSS Funciona baseado no HTML! não existe CSS sem HTML, vcs estão esquecendo a função de cada linguagem


HTML (xHTML, HTML 4 e HTML5) - São linguagens de marcação para criar estruturas de informação, você só faz a estrutura do documento (paragrafos, formúlarios, listas)

CSS - é linguagem e Estilização, ela pega a estrutura do HTML e Estiliza, formatando caixas, listas, paragrafos , blocos Etc


Tanto que o HTML5 e o CSS3 nunca estiveram tão em pauta, hoje a opinião generalizada é que o HTML5 e as novas tecnologias relativas vão substituir a maior parte do que existe em Flash.
rafael2112
Seria o fim de se usar algumas propriedades do HTML como tabelas para fazer o Layout.
Vanilla
rafael2112 wrote:
Seria o fim de se usar algumas propriedades do HTML como tabelas para fazer o Layout.


Na verdade, tabelas nunca existiram com essa função. A função das tabelas é uma só: exibir dados tabulados. Simples assim. Very Happy
gueda
D'Artagnan wrote:

Sério? vcs estudaram CSS por quantos segundos?


husahuashusahusa resposta mais sincera impossível! Very Happy
As explicações foram muito boas também, pessoal comenta que será o fim do html, por causa do CSS e nem sabe para que serve! hsauushahsa
leandrow
inesquecivel wrote:
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/


Faltou um "quote" aí, não?
Related topics
css + html
Czy tworzysz strony internetowe?
Positioning images with HTML
CSS - CSS Tutorial for skin maker
"Convert to Css" with Html Kit
Los 50 mejores sitios diseñados en CSS
O Fim de Fidel
Voo virtual no computador
conflicting codes (CSS, JS & HTML)
[help=html,php]Error en forma de contacto...
2012, Fim do mundo ou nova era?
Haiti - O Fim do mundo acontecendo
2012
BLAH! CSS + HTML!
Reply to topic    Frihost Forum Index -> Language Forums -> Portuguese

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.