O que é CSS – benefícios de utilização
O Cascaliding Style Sheets (CSS) é uma "folha de estilo" composta por "camadas" e utilizada para definir a apresentação(aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação, como HTML, XML E XHTML. O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.
Com a evolução dos recursos de programação as páginas da internet estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos também precisou ser aprimorada.
Com a evolução dos recursos de programação as páginas da internet estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos também precisou ser aprimorada.
Foram criadas novas tags e atributos de estilo para o HTML e em resumo ele passou a exercer tanto a função de estruturar o conteúdo quanto de apresentá-lo para o usuário final. Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas. Ou seja, as alterações teriam que ser feitas manualmente, uma a uma. A partir destas complicações, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout. Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, permitiu um compartilhamento de formato e reduziu a repetição no conteúdo estrutural de uma página.
Com isto, as linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo de uma página enquanto o CSS encarregou-se da aplicação dos estilos necessários para a aparência dela. Isto é feito por meio da criação de um arquivo externo que contém todas as regras aplicadas e, com isto, é possível fazer alterações de estilo em todas as páginas de um site de forma fácil e rápida.
O CSS também permite que as mesmas marcações de uma página sejam apresentadas em diferentes estilos, conforme os métodos de renderização (como em uma tela, impressão, via voz, baseadas em dispositivos táteis, etc.). A maioria dos menus em cascata, estilos de cabeçalho e rodapé de páginas da internet, por exemplo, atualmente são desenvolvidos em CSS.
#todoform th {
background: #000000;
/* definido a cor preta para o fundo do título */
padding:10px;
/* afastamento de 10 pixels */
font: bold 20px arial, verdana, helvetica, sans-serif;
/* letras em negrito com 20 px e familia arial, verd.... */
border-bottom:3px solid #ff9900.
/* uma borda inferior solida de 3 pixels na cor laranja */
}
2. Formas de utilização (externo, embutido, inline)
O CSS externo é utilizado para organizar o código HTML quando há um grande número de estilo a ser aplicado ou então quando o mesmo estilo é aplicado em diferentes páginas ao mesmo tempo, reaproveitando a formatação já existente em um arquivo .CSS.
/* CSS */
p {
color: #F00;
font-family: arial;
font-size: 20px;
}
<html>
<head>
<title> teste css </title>
<!-- tag para adicionar o css externo na pagina -->
<link rel="stylesheet" type="text/css" href="post1.css" />
</head>
<body>
<!-- Aplicando o css no elemento p -->
<p> CSS externo </p>
</body>
</html>
O CSS no estilo embutido todos os códigos em CSS se encontram dentro da tag style no qual o estilo será aplicado somente na pagina que foi definido.
<html>
<head>
<title> teste css </title>
<!-- o css embutido deve ser adicionado depois dessa tag -->
<style TYPE="text/css">
h1 {
color: #0000FF;
font-family: arial;
font-size: 12px;
</style>
</head>
<body>
<!-- Aplicando o css embutido no elemento h1 -->
<h1> CSS embutido </h1>
</body>
</html>
O CSS no estilo inline é aplicado quando se necessita estilizar somente um elemento em especifico.
<html>
<head>
<title> teste css </title>
</head>
<body>
<!-- Aplicando o CSS inline -->
<p style="background: blue; color: white;">CSS in line</p>
</body>
</html>
3. Tipos de Seletores (elemento HTML, id ou Classe)
Um seletor CSS é uma declaração em um formato que casa com todos os elementos que sigam aquele formato na árvore do documento. Quando todas as condições estabelecidas no formato da declaração são satisfeitas o seletor o seletor casa com o elemento (ou elementos) no documento e as regras escritas no seletor são aplicadas.
p { color:#foo;}
O seletor é a parte da regra CSS que está antes do sinal "{ (chave de abertura) }. O seletor aqui [e p. que casa com todos os elementos p do elemento p do documento e faz com que qualquer texto dentro de um parágrafo seja na cor vermelha. Bem básico
4. Sintaxe:
. Comentário
A sintaxe utilizada para comentar uma linha ou um bloco de linhas em CSS é /* Digite seu comentário */
. Regras CSS
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML.
Um conjunto de regras CSS formam uma folha de estilos.
Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor.
/* Folha de estilo */
/* Regras CSS :*/
p /* seletor */{
color /* propriedade*/ : #F00 /* valor*/;
font-family : arial;
font-size: 10px;
}
#SeletorID {
color: #0F0;
font-family: arial;
font-size: 15px;
}
5. Unidades
. Relativas(px,em,ex)
É aquela tomada em relação a uma outra medida. Folhas de estilo em cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes mídia.(ex. de uma tela de monitor para uma impressora laser).
O valor é tomado em relação:
. px: tamanho em pixel (relativo ao elemento)
.em: tamanho relativo a fonte utilizada no elemento ao qual esta inserido
.ex: corresponde a altura da fonte 'x'.
.Absolutas(in,cm,mm,pt,pc)
É aquela que não esta referenciada a qualquer outra unidade e nem é herdada. São unidades de medida de comprimento definidas nos sitemas de medidas pela pela física e em fim são conhecidos (centímetros, polegadas etc..). São indicadas para serem usadas quandoas mídias de exibição são perfeitamente conhecidas.
.in: polegadas
.cm: centímetros
.mm: milímetros
.pt: pontos
.pc: picas (1pica=12pontos)
.Porcentagem
Valores em porcentagem são relativos a um outro valor anterior declarado. Este valor anterior há que estar bem definido e em geral esta definição está em uma determinada propriedade do mesmo elemento, na propriedade do elemento "pai (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatação (por exemplo: a largura do bloco de conteúdo).
p { font-size: 20px }
p { line-heigth: 120% } /*120% de 'font-size'=12px*/
