O Que é "CSS"?
Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como por exemplo o: HTML ou XML. O seu principal benefício é a separação entre o formato e o conteúdo de um documento variado.
Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.
Com a variação de atualizações dos navegadores (browsers) como Internet Explorer que ficou sem nova versão de 2001 a 2006, o suporte ao CSS pode variar. O Internet Explorer 6, por exemplo, tem suporte total a CSS1 e praticamente nulo a CSS2. Navegadores mais modernos como Google Chrome e Mozilla Firefox tem suporte maior, inclusive até a CSS3, ainda em desenvolvimento.
A interpretação dos navegadores pode ser avaliada com o teste Acid2, que se tornou uma forma base de revelar quão eficiente é o suporte de CSS, fazendo com que a nova versão em desenvolvimento do Firefox seja totalmente compatível a ele assim como o Opera já é. O Doctype informado ou a ausência dele determina o quirks mode ou o strict mode modificando o modo como o CSS é interpretado e a página desenhada.
Exemplos de Codigo CSS
/* comentário em css, semelhante aos da linguagem c */
body
{
font-family: Arial, Verdana, sans-serif;
background-color: #FFF;
margin: 5px 10px;
}
O código acima define fonte padrão Arial, caso não exista substitui por Verdana, caso não exista define qualquer fonte sans-serif. Define também a cor de fundo do corpo da página (background-color: , #FFF = Codigo da cor).
Sua necessidade adveio do fato de o HTML (Hyper Text Markup Language) aos poucos ter deixado de ser usado apenas para criação de conteúdo na web, e portanto havia uma mistura de formatação e conteúdo textual dentro do código de uma mesma página. Contudo, na criação de um grande portal, fica quase impossível manter uma identidade visual, bem como a produtividade do desenvolvedor. É nesse ponto que entra o CSS.
As especificações do CSS podem ser obtidas no site da W3C "World Wide Web Consortium", um consórcio de diversas empresas que buscam estabelecer padrões para a Internet.
É importante notar que nenhum navegador suporta igualmente as definições do CSS. Desta forma, o web designer deve sempre testar suas folhas de estilo em navegadores de vários fabricantes, e preferencialmente em mais de uma versão, para se certificar de que o que foi codificado realmente seja apresentado da forma desejada.
Exemplo de CSS aplicado em XML
Arquivo *.XML com ligação para uma folha de estilos em cascata:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css.css"?>
<schedule>
<date>Tuesday 20 June</date>
<programme>
<starts>6:00</starts>
<title>News</title>
With Michael Smith and Fiona Tolstoy.
Followed by Weather with Malcolm Stott.
</programme>
<programme>
<starts>6:30</starts>
<title>Regional news update</title>
Local news for your area.
</programme>
<programme>
<starts>7:00</starts>
<title>Unlikely suspect</title>
Whimsical romantic crime drama starring Janet
Hawthorne and Percy Trumpp.
</programme>
</schedule>
O arquivo *.CSS que formata o XML anterior:
@media screen {
schedule {
display: block;
margin: 10px;
width: 300px;
}
date {
display: block;
padding: 0.3em;
font: bold x-large sans-serif;
color: white;
background-color: #C6C;
}
programme {
display: block;
font: normal medium sans-serif;
}
programme > * { /* All children of programme elements */
font-weight: bold;
font-size: large;
}
title {
font-style: italic;
}
}
CSS e JavaScript
Pop-up não-bloqueável
<html>
<head>
<style type="text/css">
# popup {
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}
</style>
<script type="text/javascript">
function abrir() {
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}
function fechar() {
document.getElementById('popup').style.display = 'none';
}
</script>
</head>
<body onload="abrir()" >
<div id="popup" class="popup">
Esse é um exemplo de popup utilizando o elemento <code>div</code>. Dessa maneira esse
pop-up não será bloqueado.
<small><a href="javascript: fechar();">[X]</a></small>
</div>
<a href="javascript: abrir();">Abrir pop-up</a>
<a href="javascript: fechar();">Fechar pop-up</a>
</body>
</html>
Nenhum comentário:
Postar um comentário