Estilo é quando sua página Web é personalizada visualmente. Praticamente é a definição de como a página vai parecer. Logicamente pode ser feito com HTML, mas o estilo tem algumas propriedades a mais, além de poder ser modificado em um arquivo diferente, sem prejudicar o teu código HTML. Basicamente ele trabalha com os objetos presentes na página HTML já existente e modifica sua forma, cor, fonte, alinhamento, etc. Pode ser usado para qualquer elemento da página, inclusive a própria página principal (<body>).
Muitas vezes é chamado também de CSS (Cascading Style Sheet), por contar com os objetos definidos como classes e apenas acrescentando as propriedades, como um bloco aberto e fechado por chaves e definido como fim de linha o ponto-e-vírgula. Agora a pergunta "então isto é uma linguagem de programação?" tem como resposta um não. Linguagem de programação é considerada quando ela pode ser interpretada e compilada, tendo as estruturas principais (laços, condições, etc.), que o CSS não possui. Portanto, ela também não é uma linguagem de marcação, pois não contém tags, nem script. Ela é uma linguagem simplesmente de estilo, pois conta apenas com as classes de objetos e suas propriedades.
Para simplificar, veja o que pode ser feito com a tag HTML <body> :
body {
background-color: #FFFF00;
font-family: Georgia;
}
Esta classe define que todos os elementos dentro da tag <body> terão fonte do tipo Georgia, e que o plano de fundo da página será amarelo (#FFFF00 = yellow). Isto pode ser feito em HTML? Pode. Mas este foi um exemplo apenas, para entendimento da estrutura CSS. Vejamos agora, como faríamos isso para uma entrada de texto:input[type="text"] {
background-color: #FFFF00;
font-family: Comic Sans MS;
color: #0000FF;
}
Resultado:
Já este efeito não se dá para fazer com HTML puro. Imagine que você queira construir um formulário de cadastro Web, em que haja campos obrigatórios e opcionais. Não seria visualmente melhor marcar os campos obrigatórios com um fundo vermelho claro (#FFFBFB), para o usuário perceber que ali ele tem que colocar algum dado?
Os estilos, assim como o Javascript são embutidos no HTML ou pode vir de uma fonte ou arquivo externo. Temos três formas de declarar o estilo: Externo, em que todas as propriedades estão dentro de um arquivo com a extensão .css, interno, em que se abre uma tag <style> dentro da página HTML, seja no cabeçalho (<head>), seja no corpo da página, e local, em que se declara dentro da própria tag onde se deseja colocar o estilo:
Estilo Externo:
(dentro de um arquivo .css)
input[type="text"] {
background-color: #FFFBFB;
font-family: Georgia;
}
(dentro da página HTML, faz a chamada ao arquivo)<link href="nome_do_arquivo.css" rel="stylesheet" type="text/css" />Estilo Interno:
<html>
<head>
<style>
input[type="text"] {
background-color: #FFFBFB;
font-family: Georgia;
}
</style>
</head>
<body>
.
.
.
Estilo Local:<input type="text" style="background-color:#FFBFBF; font-family:Georgia" /> <!--A tag input não precisa de fechamento, pois ela é apenas uma sentença, e não um bloco. Basta uma barra antes de fechar a tag. Comentários em HTML são feitos usando os dois sinais nos extremos desta frase.-->Para mais dúvidas sobre estilos, segue o link para um tutorial bem resumido e prático aqui
Por hoje é só... Até a próxima!!! :)
Nenhum comentário:
Postar um comentário
Codifique tua mensagem aí: