Sistemas Para Internet: CSS

Aplicação

CSS

A utilização das "folhas de estilo" CSS (Cascading Style Sheets) são estilos compostos por camadas e tem como atribuição a apresentação em páginas (a aparência). O desenvolvimento das páginas em HTML, por exemplo, é concatenado ao uso das folhas de estilo que definirá registros de aparência global ou pontual aos elementos das páginas ou de todo o site.

Aplicação externa, embutida ou inline

Aplicação Externa

Os estilos criados estão em um arquivo à parte e são vinculados a qualquer página que os requisite através do código para que nestas páginas o estilo não precise ser novamente criado, o que é basicamente o que o CSS faz, facilita.

Isso é feito pela inclusão do link para o arquivo, por tag dentro do elemento <head> da página onde o estilo se aplicará:

<link rel="stylesheet" type="text/css" href="arquivo.css">

Então para resumo final. O arquivo que será buscado está com todo o estilo - ou partes de estilo porque há outras formas de aplicar estilos - em seu conteúdo e será aplicado a qualquer página que o requisitar.

Aplicação Embutida

Para usar a aplicação embutida bastará incluir no elemento <head> as regras:

<style type="text/css">

Desta forma se pode trabalhar com o CSS de forma pontual à página.

Aplicação Inline

Ao aplicar o CSS Inline se aplica o estilo a um elemento particular através do atributo sytle:

<p style="border-style: groove; color: red;">
Texto
</p>

Aplicação
CSS
A utilização das "folhas de estilo" CSS (Cascading Style Sheets) são estilos compostos por camadas e tem como atribuição a apresentação em páginas (a aparência). O desenvolvimento das páginas em HTML, por exemplo, é concatenado ao uso das folhas de estilo que definirá registros de aparência global ou pontual aos elementos das páginas ou de todo o site.

Aplicação externa, embutida ou inline

Aplicação Externa

Os estilos criados estão em um arquivo à parte e são vinculados a qualquer página que os requisite através do código para que nestas páginas o estilo não precise ser novamente criado, o que é basicamente o que o CSS faz, facilita.

Isso é feito pela inclusão do link para o arquivo, por tag dentro do elemento <head> da página onde o estilo se aplicará:

<link rel="stylesheet" type="text/css" href="arquivo.css">

Então para resumo final. O arquivo que será buscado está com todo o estilo - ou partes de estilo porque há outras formas de aplicar estilos - em seu conteúdo e será aplicado a qualquer página que o requisitar.

Aplicação Embutida

Para usar a aplicação embutida bastará incluir no elemento <head> as regras:

<style type="text/css">

Desta forma se pode trabalhar com o CSS de forma pontual à página.

Aplicação Inline

Ao aplicar o CSS Inline se aplica o estilo a um elemento particular através do atributo sytle:

<p style="border-style: groove; color: red;">
Texto
</p>

Esta formatação então poderá ser aplicada como atributo aos elementos.

Exemplo de código:
<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>
<p class="one">Parágrafo.</p>
<p class="two">Parágrafo.</p>
<p class="three">Parágrafo.</p>
<p style="border-style: groove; color:red;"><b>Nota:</b> A propriedade "border-width" não funciona se usada só. Use a propriedade "border-style" para criar as bordas primeiro.</p>
</body>

</html>

Seletores

O seletor é uma declaração onde os demais elementos da árvore seguirão o mesmo padrão:

p { color : #f00; }

A parte da regra correspondente ao seletor é o que está antes do sinal "{" (chave de abertura). Desta forma todos os elementos de parágrafo do documento estarão na cor vermelha.

Seletor ID

O seletor ID estilizará o elemento que o tiver e é representado desta forma #id (com sustenido):

#cor

{

background-color:yellow;

}

Nas imagens respectivos exemplos de código e apresentação no browser:

Seletor classe

Representado por um ponto "." tem como alvo elementos com valor para seu atributo class:

p.info { background-color:#FFBB00 }

Logo, esta regra será aplicada a todo elemento <p> com classe "info".

Caso necessário "globalizar" a atribuição do seletor basta não declarar o elemento.

Pseudo-classes

São usadas para adicionar efeitos especiais a alguns seletores:

a:link {color:#FF0000;} /* link */

a:visited {color:#00FF00;} /* link visitado */

a:hover {color:#FF00FF;} /* mouse sobre o link */

a:active {color:#0000FF;} /* link selecionado */

As pseudo-classes podem ser combinadas com classes CSS:

a.red:visited {color:#FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

O link será mostrado em vermelho caso já visitado.

Cores

Para adicionar uma cor de fundo a uma classe:

background-color:#DC143C;

A cor do primeiro plano é adicionada como atributo à classe com "color":

color:#DC143C;

Imagem
Para adição de imagens usar os comandos:

background-image: Exibe como fundo a imagem selecionada.
background-repeat: Este comando indica se a imagem se repetirá.
A forma correta da aplicação: background-repeat: atributo;
background-attachment: Fixa a imagem ao fundo (com atributo "fixed").
Como: background-attachment: fixed;
Exemplo de código:

<!DOCTYPE html>
<html>
<head>
</head>
<style>
article{
background-color:bisque;
margin:10px; padding:10px;
width: 700px; height: 700;
}
img{margin:2px; float:none;}
p{margin:0px;}
</style>
<body>
<article>
<img src="landscape.jpg">
<p>Esta é uma bela foto!</p>
</article>
</body>
</html>

No navegador

Estilos

Formatação

Quando se quer formatar tamanhos no CSS se usa width e height (largura e altura):

width: 700px;

height: 700px;

Posicionamento

Com float se indica a localização de uma imagem por exemplo:

float: right;

Bordas

Para bordas temos:

border-width: Largura da borda.

border-top-width: Largura superior.

border-right-width: Largura para parte direita.

border-bottom-width: Para parte inferior.

border-left-width: E parte esquerda.

Exemplo de código:

<!DOCTYPE html>

<html>

<head>

<style>

{

border-style:solid;

border-top-width:15px;

}

</style>

</head>

<body>

<p><b>Note:</b> A "border-top-width" não funcionará se colocado só. É necessário criar bordas primeiro ao usar a propriedade "border-style".</p>

</body>

</html>

Navegador:

Exemplo de borda
Para os seguintes comandos segue-se o mesmo padrão anterior: border-color, border-top-color, border-right-color, border-bottom-color, border-left-color, border-style, border-top-style, border-right-style, border-bottom-style e border-left-style.

Como visto acima já temos uma forma de usar border-style. Vamos agora adicionar uma cor:

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:solid;
border-top-width:15px;
border-color:yellow;
}
</style>
</head>

<body>
<p><b>Note:</b> A "border-top-width" não funcionará se colocado só. É necessário criar bordas primeiro ao usar a propriedade "border-style".</p>
</body>
</html>

No navegador:

Com cor

Propriedades das margens e espaçamento

Propriedades das margens (tamanho): margin, margin-top, margin-right, margin-bottom, margin-left.

Propriedades de espaçamento: padding, padding-top, padding-right, padding-bottom, padding-left.

Nota-se que margin será para margem externa enquanto padding para margem interna.

Exemplos de aplicação em CSS:

margin: 0px;

padding: 7px;

Propriedades de fontes tipográficas

font-family: Define a família da fonte. Sans-serif e Serif por exemplo.

font-style: Aplica estilos às fontes: p.italic {font-style: italic}

font-variant: Uma forma de aplicação: p.small {font-variant: small-caps;}. Esta forma definirá o parágrafo em fonte small-caps.

font-weight: Aplicação: p.normal {font-weight:normal;}

font-size: Definirá o tamanho da fonte: h2 {font-size:200%}

Exemplo:

<!DOCTYPE html>

<html>

<head>

<style>

p.normal {font-weight:normal; color:#FF7000;}

p.leve {font-weight:lighter; color:#FF7000;}

p.negrito {font-weight:bold; color:#FF7000;}

</style>

</head>

<body>

<p class="normal">Parágrafo.</p>

<p class="leve">Parágrafo.</p>

<p class="negrito">Parágrafo.</p>

</body>

</html>

No navegador

Propriedades de texto

text-indent: Esta propriedade definirá a indentação para a primeira linha de um bloco.

text-align: Descreve como o conteúdo da própria linha de um bloco é alinhado.

text-decoration: Decoração a ser adicionada ao texto de um elemento usando a cor do elemento.

text-transform: Controla elementos de capitalização do texto.

line-height: Em um elemento cujo conteúdo é composto de elementos a nível inline o "line-height" especificará a altura das caixas das linhas dentro do elemento.

Exemplo de código:

<!DOCTYPE html>

<html>

<head>

<style>

p.small {line-height:70%;}

p.big {line-height:200%;}

</style>

</head>

<body>

<p>

Páragrafo com line-height padrão.<br>

O padrão do line height na maioria dos navegadores é entre 110% e 120%.<br>

</p>

Parágrafo com line-height menor.<br>

</p>

Parágrafo com line-height maior.<br>

</p>

</body>

</html>

No navegador

Propriedades de lista

Estilos de marcadores:

list-style-type: Especifica o tipo de marcador de item de lista em uma lista.

list-style-image: Substitui o marcador por uma imagem.

Exemplo de código:

<!DOCTYPE html>

<html>

<head>

<style>

{

list-style-image:url('sqpurple.gif');

}

</style>

</head>

<body>

<ul>

<li>Leite</li>

</ul>

</body>

</html>

No Navegador

Páginas

terça-feira, 11 de fevereiro de 2014

CSS

Nenhum comentário:

Postar um comentário