[Tutorial] Introdução ao Webdesign > lição 2 - CSS

[ilovehentai]

Introdução ao Webdesign > lição 2 - CSS

Oi a todos.

Para o tema dos CSS (folhas de estilo em cascata), é necessário ter por bases o HTML (Hyper text linguage markup), se precisar de saber um pouco mais acerca do mesmo pode ler a primeira lição deste tutorial aqui -> Introdução ao Webdesign > lição 1 - HTML.

Folhas de estilo em cascata (Cascading Style Sheets), o que é isso e quem se lembrou disso?

As CSS são utilizadas para estilizar o conteúdo de uma página escrita numa linguagem de markup tal como o HTML, basicamente o CSS permite formatar elementos tais como fontes, cores, limites, imagens, layout etc..
Enquanto o HTML assegura uma estrutura base a página, o CSS permite a sua formatação e composição visual. O CSS permite assim a redução de redundâncias de elementos de formatação, a simplificação da complexidade do código da página, permite a possibilidade de uma mesma página possuir mais que um layout, tanto no browser como na impressão ou noutros formatos.
Assim o que dantes o HTML se encarregava de fazer tudo, estrutura e aspecto, agora separamos e atribuimos o aspecto as folhas de estilo.

As CSS estão actualmente na versão 2.0 e actualmente não existem browser que integram totalmente todas as funcionalidades que elas oferecem, em últimos testes realizados, o Safari destacava-se por ser o browser que mais respeitava as regras dos CSS.

Mmmm parece interessante, como será o aspecto de um estilo?

A Sintaxe das CSS divide-se em 3 elementos:
O selector, a propriedade e o seu valor, tomamos de seguida este exemplo:

Code Select Expand


body { background-color: #CCCCCC }
Neste exemplo o selector é o body, a propriedade a background-color e o seu respectivo valor #CCCCCC
Basciamente neste exemplo o estilo será aplicado ao Body da página HTML em questão, e definimos que a cor de fundo da mesma seja um cinza claro.
Reparamos que na Sintaxe as propriedades de um selector ficam englobadas por entre chavetas "{}" e que o elemento que separa uma propriedade do seu valor são dois pontos ":"

É possível haver mais que uma propriedade associada a um selector para tal temos que separar as propriedades por ponto e linha ";"
tal como neste exemplo:

Code Select Expand


body { background-color: #CCCCCC; margins: 0; }
Para facilitar a leitura da formatação das CSS podemos e devemos (na minha opinião) quebrar linhas entre as propriedades da seguinte maneira

Code Select Expand


body {

background-color: #CCCCCC;

margin: 0;

}
Assim ajudará na leitura e compreensão das CSS.

É possível agrupar vários selectores que virão a assumir as mesmas propriedades e valores, assim evitamos de repetir código, para agrupar selectores, basta separá-los por uma vírgula "," , assim:

Code Select Expand


h1, h2, h3, h4, h5, h6 {

color: #339900;

}
Desta forma todos os elementos de heading do HTML ficarão com a cor verde.

Muito bem, acho que até já percebi, mas eu queria formatar elementos do meu site em qualquer parte..!?

Para além dos selector de TAG HTML que vimos nos exemplos anteriores, é possível criar selectores que poderão ser associados a qualquer elemento do HTML, a esses selectores chamamos de class ou seja selectores class. Assim poderemos criar uma class CSS que terá propriedades e valores próprios e associar a vários distintos elementos da nossa página de forma a assumirem todos o mesmo aspecto. Vemos o seguinte exemplo:

Code Select Expand


.textos {

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:normal;

color:#EEEEEE;

line-height: 15px;

}
Neste exemplo reparamos que o selector recebeu no seu início um ponto "." esse ponto o faz destinguir e ser reconhecido como class, assim sempre que definirmos uma class acrescentaremos ao seu nome um ponto no início. As propriedades da class "textos" indicam que a font a usar primordialmente será a Arial, com o tamanho 11 e um peso normal. Terá como cor um cinza claro e um espaceamento entre linhas de 15 píxeis.
Essa Class poderá ser usada em várias TAG\\'s HTML de forma a criar a formatação do texto, por exemplo:

Code Select Expand

Este heading ficará formatado com a class textos

Este parágrafo ficará também formatado com a class textos

>

Todo o conteúdo desta célula ficará também formatado com a class textos


Ok mas eu até queria formatar o conteúdo dos meus parágrafos, mas queria ter 3 tipos de formatações diferentes

Agora que conhecemos os selectores de TAG e selectores Class é possível combiná-los de forma a criar várias opções de formatação para a mesma TAG
seguimos este exemplo:

Code Select Expand


p.right {

text-align: right;

}

p.center {

text-align: center;

}
Neste exemplo combinamos o selector da TAG <p> de parágrafo e criamos em 2 exemplos duas class no primeiro a class chamada right, ao qual terá como propriedade o alinhamento do texto a direita e no segundo a class chamada center que terá como propriedade o alinhamento do texto ao centro. Vejamos como aplicar este exemplo:

Code Select Expand

Este parágrafo está alinhado a direita

Este parágrafo está alinhado ao centro

Atribuindo a class right ou center dentro de uma TAG p formatamos o texto contido dentro da TAG. Assim várias TAG de parágrafo podem ter diferentes formatações. Caso a class não for definida numa TAG neste exemplo o parágrafo não sofrará qualquer influência vinda das CSS.

Ui há varios tipos de selectores?

Bem já vimos 2, agora falaremos do terceiro, o ID selector, esse selector é porreiro porque é chamado nas TAG pelo atributo ID e o ID pode ser chamado por sua vez por código como o caso do Javascript. Então poderemos alterar conteúdos dentro de um elemento com um ID através do Javascript, isso acontece por exemplo com filosofias tais como o AJAX (veremos mais para o fim)

O selector ID é iniciado por um cardinal "#" tal como a class o cardinal é colocado no início do nome do selector.

Code Select Expand


p #format_center {

text-align: center;

color: red;

}
Existe algumas coisitas que deveria saber agora antes de começar a criar as minhas folhas de estilo?

Sim é importante saber que:

Nunca começar nomes de class ou ID com números, não funciona no FireFox.
É possível comentar nas folhas de estilo para isso basta envolver o texto entre /* */ por exemplo:

Code Select Expand

/*Comentário CSS*/
Os comentários podem se encontrar em qualquer sítio das CSS, dentro de uma class entre chavetas, por fora etc..


Ok vamo-la criar as folhas de estilo, mas como implemento isto na minha página?

Existe duas maneiras de implementar as CSS no nosso HTML, ou directamente na nossa página ao qual iremos inserir dentro das TAGs <style></style> ou então poderemos inserir num documento com a extenção *.css esse documento contém apenas as nossas CSS e poderá ser linkado aos nossos ficheiros HTML.

Comecemos por inserir um exemplo directamente dentro do nosso ficheiro HTML por exemplo:

Code Select Expand







Primeiro antes de decompor o exemplo, entendemos que quando colocamos CSS dentro do nosso HTML, é aconselhado a colocar entre as TAG <head></head> do documento.
Todo o código CSS vê-se depois envolvo das TAG <style></style>, podemos verificar que existe o atributo type esse vai indicar que tipo de estilo está a ser aplicado ao HTML, neste caso dizemos "text/css" repare que existe os seguintes caracteres em torno do nosso CSS <!-- --> estes servem para comentar código em HTML, tal como nós comentamos código em CSS da seguinte forma /*meu comentário*/ no HTML é possível comentar assim <!-- meu comentário -->, mas porque aí perguntam vocês?!
Bem se caso o nosso browser for muito antigo e não suportar a TAG <style> por algum motivo, então de forma a evitar que o Browser imprime o código CSS na página envolvemos como comentário, assim o Browser velho irá ignorar o código CSS.

Este Css só poderá ser aplicado no documento HTML onde é escrito, de forma a podermos criar CSS das quais poderemos usar em todo o nosso website, podemos criar um documento CSS e conectá-lo aos nossos HTML.

Para criarmos um documento CSS podemos usar um editor de texto, por exemplo o NotePad ++, apenas termos de ter o cuidado de salvar com a extenção *.css . Dentro do nosso documento Css podemos escrever os nossos selectores a vontade com as suas propriedades e valores, é necessário dizer que não se deve usar a TAG <style></style> dentro de um documento CSS, essa TAG apenas se refere a documentos HTML.

o conteúdo de um documento CSS ficará com este aspecto:

Code Select Expand


@charset "utf-8";

/* CSS Document */




Agora basta apenas ligá-lo ao documento HTML, pode fazê-lo da seguinte forma:

Code Select Expand



Este link fica localizado na Head do ficheiro HTML, onde indica no href a localização do ficheiro CSS e o tipo.

O que há a saber mais acerca das CSS?

Com os CSS podemos formatar e controlar, texto, fontes, fundos (background), limites de contorno, padding, margens, limites de contorno e muito, muito mais.. e podemos aplicar essas formatações a quase tudo dentro do HTML, desde de tabelas a formulários etc ... veja o seguinte exemplo que demostra o uso de várias propriedades:

Code Select Expand


.exemplo{

font-family:Arial, Helvetica, sans-serif;

font-size:10px;

font-style: italic;

line-height: 15px;

font-weight: bold;

font-variant: small-caps;

text-transform: uppercase;

color: #006600;

text-decoration: overline;

background-attachment: fixed;

background-color: #00CC00;

background-image: url(imagem.png);

background-repeat: repeat;

background-position: 0px 0px;

letter-spacing: normal;

text-align: left;

vertical-align: middle;

word-spacing: normal;

white-space: normal;

margin: 3px;

padding: 2px;

float: left;

height: 200px;

width: 200px;

border: 1px solid #999999;

}
Um último aspecto de que vou tocar acerca das CSS são as pseudo-Class.

Graças as Pseudo-Class podemos controlar coisas como os links, a sintaxe de uma pseudo-class se assemelha ao seguinte:

Code Select Expand

a:link {color: #FF0000}
Repara que primeiro temos o selector de TAG a referente a TAG <a> </a> e depois separado por 2 pontos ":" temos a pseudo-class link que se refere a todos os link intactos. Então vejamos esse exemplo seguinte:

Code Select Expand


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

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

a:hover {color: #FF00FF}   /* mouse over link */

a:active {color: #0000FF}   /* link seleccionado*/
Neste exemplo vemos o uso de pseudo class em Selectores a em que em cada acção a cor do texto contido na TAG <a></a> mudará.

As pseudo-class podem ser utilizadas em qualquer tipo de selectores. Poderá pesquisar mais através da internet para saber mais acerca deste assunto.

Conclusão:

De momento aprendemos o uso de CSS para a formatação de conteúdos no nosso documento HTML, contudo sabemos que também podemos usar para a formatação das nossas páginas, como tal mais há a dizer acerca deste assunto. Na próxima lição aprenderemos a projectar um layout para o nosso site, usaremos o photoshop e o freehand para compormos o layout de forma a numa fase seguinte construir com HTML e CSS a página em si.

Espero que tenham gostado, voltarei em breve, cumps a todos

[Dav7]

fico a aguardar a próxima lição!

[nunojsilva]

o conteúdo de um documento CSS ficará com este aspecto:

Code Select Expand


@charset "utf-8";

/* CSS Document */





Convém salientar que neste ficheiro deve estar também definida uma cor de texto, e cores para os links.
O ficheiro, assim como está, pode causar certos problemas.