Desenvolvimento
WEB - CSS
O que é client-side e server-side?
Existem dois tipos de linguagens para desenvolvermos
para
internet:
as
linguagens client-side e
as
linguagens server-side. Você pode ver estes nomes
meio diferentes em outros lugares como por exemplo,
front-end, se referindo às linguagens client-side e
SERVER-SIDE
As linguagens server-side são linguagens que o
SERVIDOR entende. Isso quer dizer que vai escrever
um código onde o servidor vai processá-lo e então vai
mandar para o seu navegador a resposta.
CLIENT-SIDE
As linguagens client-side são linguagens onde
apenas o seu NAVEGADOR vai entender. Quem
vai processar essa linguagem não é o servidor,
mas o seu browser.
Exemplo
Por exemplo: se criarmos um script em linguagem
back-end (PHP, Asp, Java, Ruby, etc) que apenas
calcula a soma de 2 + 2, será o SERVIDOR (ou back, o
server) que calculará este resultado. Se fizermos esse
cálculo em alguma linguagem front-end, como o
JavaScript, quem calculará essa conta é o BROWSER
do usuário. Por isso o termo client ou front.
Exemplos de linguagens
Essas linguagens são linguagens client-side. É o que vamos aprender
durante todo esse conteúdo:
HTML (xHTML, HTML4, HTML5...)
CSS (CSS2.1, CSS3...)
JavaScript
Essas são linguagens server-side, são as linguagens com que os
programadores back-end trabalham:
PHP
ASP
Java
Ruby
Python
O que é CSS
é uma linguagem de folhas de estilo
utilizada para definir a apresentação de
documentos escritos em uma linguagem
de marcação, como HTML ou XML. O seu
principal benefício é a separação entre o
formato e o conteúdo de um documento.
Cenário
Não ter um layout pode parecer aceitável se tudo o
que você queira seja apenas uma coluna de conteúdo.
Mesmo assim, se um usuário estiver utilizando o
navegador expandido em uma tela muita larga, isso
se torna ruim para ler: depois de cada linha seus olhos
percorrem uma longa distancia até o início da próxima
linha. Redimensione a janela do seu navegador para
entender o que estou dizendo!
Hoje – documento padrão
<html>
<head>
<title>Código CSS - Entendendo a folha de estilos</title>
</head>
<body>
<h1>Sou a tag h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit.
Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate
interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis
turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit.
Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate
interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis
turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
</body>
</html>
Tipos de CSS
Existem diversas maneiras de se incluir códigos css em
seu site, são elas:
Folha Inline
Declarando na mesma página ou Folha de
Incorporada ou Interna
Utilizando um arquivo externo ou Folha de Estilo
Código CSS Inline
O css inline é pouco utilizado em websites por deixar o
código "poluído" com muita informação, mas é muito
utilizado na criação de mailings e e-mail marketing.
Sua utilização é bem simples, para usá-lo, basta
inserir o style dentro da própria tag html que ele
receberá o efeito.
Como ele é aplicado diretamente naquela tag
específica, é impossível reutilizar ele em outra tag,
tendo que sempre copiar e colar ou criar um novo
para cada tag que você queira estilizar.
Hoje – documento padrão
<html>
<head>
<title>Código CSS - Entendendo a folha de estilos</title>
</head>
<body>
<h1 style="font-style: italic;">Sou a tag h1</h1>
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat
ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris
porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut.
Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis
mi dignissim auctor quis eget augue.</p>
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ulla
</body>
Código CSS na mesma página
Esse tipo de declaração é um pouco diferente da
declaração inline, ela é aplicada na mesma página onde
estão as tag's a serem estilizadas, mas são declaradas de
forma global, evitando assim que precisemos inserir o
estilo em cada tag específica.
Código CSS na mesma página
<html> <head>
<title>Código CSS - Entendendo a folha de estilos</title>
<style type="text/css">
h1{
font-style: italic;
}
p{
color: red;
}
</style>
</head> <body> <h1>Sou a tag h1</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
Código CSS na mesma página
Se repararmos, o efeito obtido será o mesmo,
mas viram que a declaração está diferente?
Nesse exemplo nós declaramos de forma
global, ou seja:
Toda tag h1 terá o efeito declarado
Toda tag p terá o efeito declarado
Código CSS na mesma página
Mas e se nós quisermos aplicar diferentes efeitos
para cada tag p, por exemplo, como faríamos?
É aí que começa a entrar os atributos
de id e class, dessa forma podemos colocar
efeitos apenas nos elementos em que possuem
aquele id ou aquela class.
Código CSS na mesma página
<html> <head>
<title>Código CSS - Entendendo a folha de estilos</title>
<style type="text/css"> h1{ font-style: italic; } #fundo{ background-color: #a3a9fa; } .paragrafo{ color: red; } .paragrafo2{ color: #0018ff; } </style> </head> <body> <div id="fundo"> <h1>Sou a tag h1</h1>
<p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
<p class="paragrafo2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
</div>
</body> </html>
Código css externo
Agora veremos a declaração de css mais utilizada, a externa. Basicamente ela
se consiste em você colocar todo o código css em um arquivo externo .css e no
html você apenas linkar/chamar esse arquivo para que o código seja estilizado.
Para fazer esse link temos que usar o código abaixo:
Listagem 5: Linkando css externo
O nome do arquivo será:
estilo.css
h1{
font-style: italic;
}
#fundo{
background-color: #a3a9fa;
}
.paragrafo{
color: red;
}
.paragrafo2{
color: #0018ff;
}
Código html
<html>
<head>
<title>Código CSS - Entendendo a folha de estilos</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head> <body> <div id="fundo"> <h1>Sou a tag h1</h1><p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
<p class="paragrafo2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
</div>
</body> </html>
