Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

wcarriello

css

Por , em Javascript

Recommended Posts

wcarriello    0

wcarriello
Postado

Devido ao avanço da Internet, novos recursos foram incorporados ao HTML como Scripts, Applets, DTHML, etc. Um desses avanços, que contribuiu muito com o aperfeiçoamento dos documentos HTML são as folhas de estilo em cascata ou "Cascading Style Sheets", também conhecidas como CSS.

 

As folhas de estilo foram primeiramente implementadas pela Microsoft em 1996 no seu navegador Internet Explorer 3.0. Logo outras produtoras como a Netscape também as adotaram. Com um desenvolvimento maior da Microsoft, seus novos navegadores sempre incorporam novos recursos para as CSS que só após algum tempo são adotadas por outros browsers, portanto, podem haver pequenas incompatibilidades entre eles quando usamos as CSS.

 

Na prática, folhas de estilo são basicamente um conjunto de definições inseridas (ou referenciadas externamente) em seus documentos, que determinam como os elementos HTML serão mostrados pelo navegador. A primeira vantagem é evitar a repetição de elementos como <B>, <I>, <FONT COLOR="">, <FONT FACE=""> e <FONT SIZE="">. A outra vantagem é que você pode definir estilos globais para todo o seu site, ou seja, se você alterar um estilo global, todas as páginas serão alteradas automaticamente.

 

Os estilos podem ser inseridos nos documentos de várias maneiras diferentes:

 

Arquivo de estilos

Por meio de um link direcionado para um arquivo de style sheet em separado, funcionando para uma ou mais páginas web. Este é o método recomendado, porque ele permite usar um único style sheet para várias páginas, talvez até para um site inteiro, o que é muito mais eficiente. Este método também separa inteiramente as especificações do style sheet do conteúdo da página, o que elimina qualquer chance de browsers não compatíveis com CSS confundirem as informações do style com o conteúdo da página.

 

Neste caso, você define os estilos num arquivo em separado com a extensão “.css”, e faz uma referência a ele através de uma tag de LINK que se posiciona entre os tags de HEAD de cada arquivo HTML que irá utilizá-lo. Exemplo:

 

<html>

<head>

<link rel="STYLESHEET" href="styles/stylesheets.css" type="text/css">

<title>...</title>

</head>

<body>...

Observe o atributo "type=text/css", também usado na tag <STYLE> logo abaixo, para identificar o arquivo referido como cascading style sheet.

 

Estilos no documento

Por meio da inserção de um style sheet em uma única página web. Neste caso, você define os estilos dentro de uma tag de STYLE que se posiciona dentro da tag HEAD. Exemplo:

 

<html>

<head>

<style type="text/css">

<!--

P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }

H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }

-->

</style>

...</head>

<body>...

 

Observe que as especificações do estilo são inseridas dentro de uma tag de comentário "<!-- ... -->". Isto é para assegurar que os browsers que não suportam CSS não interpretarão estas linhas como conteúdo a ser mostrado.

 

Estilos na tag

Pelo acréscimo de atributos de estilo inline em algumas tags como <P>, <DIV>, ou <SPAN>. Neste caso você especifica um estilo para um único bloco de texto, ou usa a tag <SPAN> para especificar o estilo para uma palavra ou frase. Exemplo:

 

<div style="margin-left: 0.5in; font-size: 10pt">

Este deve ser um bloco indentado com algum

<span style="font-weight: bold; background: #FFFF00"> texto selecionado</span>

dentro dele

</div>

 

Em alguns casos você pode especificar diferentes características de estilo para o mesmo elemento por meio da combinação de um arquivo de style sheet referenciado em link com a inserção de uma tag de style, e também com atributos de estilo inline. Se estas diferentes especificações entrarem em conflito entre si, o browser tem que decidir qual dos valores deve usar. Essa escolha é feita com base numa ordem de precedência (isto é precisamente o que se quer dizer com cascading style sheets - "folhas de estilo em cascata"). A ordem de precedência dos cascading style sheets é esta:

 

A formatação HTML padrão (<B>, <I>, etc) tem precedência sobre qualquer estilo;

Atributos de estilos inline têm precedência sobre tags de STYLE inseridas;

Tags de STYLE inseridas por sua vez têm precedência sobre style sheets por LINK;

É importante lembrar esta ordem de precedência para que você saiba que valores de style irão sobrepujar os outros.

 

Fonte.: www.catabits.com.br

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito