*Importante: Para ler e interpretar este post, caso não tenha conhecimentos em HTML, recomendo que leia o post "HTML: Conceitos e Introdução". Para abrir este post, basta "Clicar aqui." Tenha ótimos estudos!
(3.0) Introdução ao CSS: Com suas abreviaturas de "Estilo de Texto em Cascata", abrange resumidamente, um padrão de cores, posicionamentos, fontes e definições de mecanismos em uma página HTML, através de uma folha de estilos. Sempre que for salvar uma folha de estilos, digite da seguinte forma: ("nomedoarquivo".css), pois você está identificando para o navegador e para a página HTML que os estilos da página serão dados a uma folha externa, cuja extensão é uma folha de texto em cascata.
__________________________________________________________________________________________
(3.1) Formas de utilização: externo, embutido e inline: Basicamente o uso do CSS pode ser dado em três padrões de utilização, uma folha de estilos externa, que gerencia os mecanismos da página HTML como um todo, embutido: dentro do código HTML com diversas funções, tais como: plano de fundo, fontes, cores das letras, por exemplo. E por último o elemento inline, que é usado em comandos específicos dentro de uma tag no HTML. Veja em exemplo os três estilos:
- CSS Externo:
O código na folha de estilos:
O código visualizado em um navegador:
__________________________________________________________________________________________
- CSS Embutido:
O código visualizado em um navegador:
__________________________________________________________________________________________
- CSS Inline:
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.2) Tipos de seletores: Elemento html, ID, classe, pseudo-classe e descendente: Estes seletores carregam em si informações determinadas sobre um conjuntos de dados, ou seja, elementos dentro de um seletor carregam informações padronizadas em uma folha de estilo. O elemento ID é denominado com um sinal ("#" + "nome_definido"), o elemento classe é denominado com um sinal ("." + "nome_definido"), o elemento pseudo-classe é caracterizado por definir diferentes posicionamentos em diferentes lugares dentro de uma única página, além de adicionar efeitos especiais em alguns seletores, por exemplo: a função hover. O elemento descendente é denominado por realizar uma combinação de seletores simples. Logo abaixo, observe o uso dos elementos: ID, classe e pseudo-classe:
- Seletor ID:
O código na folha de estilos:
O código visualizado em um navegador:
__________________________________________________________________________________________
O código na folha de estilos:
O código visualizado em um navegador:
__________________________________________________________________________________________
- Seletor pseudo-classe:
*OBS: Note que a função hover deve vir após o link, tornando um efeito de mouse.
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.3) Propriedades de cores e fundo: Você já deve ter percebido o uso de elementos de cor, nos exemplos vistos até o devido instante. Normalmente os elementos acompanhados de "color", são conceituados com padrões RGB, nomes em inglês, ou uma sequência de caracteres de notações hexadecimais. Porém usar cores segundo seus devidos nomes em inglês, limita as possibilidades de cores, por exemplo: as tonalidades de uma mesma cor, por isso são usados os comandos hexadecimais.
+ (3.3.1) Cor do primeiro plano: color. Este elemento pode ser aplicado a subtítulos, tabelas, menus, parágrafos, com o intuito de aplicar cores aos elementos, através de uma folha de estilos. Segue abaixo o exemplo:
O código na folha de estilos:
O código visualizado em um navegador:
__________________________________________________________________________________________
+ (3.3.2) Cor do segundo plano: background-color. Neste elemento podemos definir a cor de fundo de uma página como um todo, ocupando o seu espaço total do visor, através de uma folha de estilos, ou seja com o CSS, caso futuramente você desejar alterar o plano de fundo de uma sequência de páginas, basta apenas abrir a folha de estilos e alterar, ao invés de abrir página por página do HTML e ir alterando os atributos de background. Segue o exemplo:
O código na folha de estilos:
O código visualizado em um navegador:
__________________________________________________________________________________________
+ (3.3.3) Imagem de fundo: background-image, background-repeat, background-attachment. Comandos usados para atribuir imagens como plano de fundo, em que a função: "repeat" refere-se a uma repetição do plano de fundo, podendo ser horizontalmente ou verticalmente. E por último a função "attachment", definida para informar se a imagem de fundo rolará com o conteúdo da página ou será fixa.
- Atributo Background-image:
O código na folha de estilos:
*OBS: Note que estou importando uma imagem de nome "plano.jpg", esta imagem deve estar em uma pasta, ou no mesmo local da página, como é o caso deste código.
O código visualizado em um navegador:
__________________________________________________________________________________________
- Atributo Background-repeat: Neste comando a letra "y" representa uma repetição horizontal, enquanto a letra "x" representa uma repetição vertical. Observe os dois exemplos:
O código na folha de estilos:
O código visualizado em um navegador:
*OBS: Perceba que no exemplo a cima, a repetição foi horizontal, basta alterarmos o comando CSS, inserindo a letra "x", no lugar da letra "y" e mudamos a repetição para: vertical.
O código na folha de estilos:
O código visualizado em um navegador:
- Atributo Background-attachment: Note que nesta função, o plano de fundo não desce junto com a barra de rolagens da página, pois estamos declarando o comando "fixed".
O código na folha de estilos:
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.4) Propriedades de formatação visual: Caracterizadas por definirem os tamanhos de largura e altura das imagens ou objetos de uma página web. Para facilitar o nosso aprendizado, e economizar nosso tempo vou usar o CSS dentro do código HTML.
Width: Define a largura do elemento.
Height: Define a altura do elemento.
O código visualizado em um navegador:
(3.4.2) Posicionamento: position, float, clear;
Position: Define a posição do elemento.
Float: Define a posição flutuante do elemento.
Clear: Comando utilizado para definir os detalhes do comando float, e incrementar o posicionamento do objeto para o lado esquerdo ou direito.
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.5) Propriedades de borda: Normalmente estas propriedades são utilizadas em tabelas, e são caracterizadas por definir diversos elementos da tabela, tais como: cores, largura, bordas, etc. Irei demonstrar todos os comandos e ao final, desenvolver uma única página envolvendo parte deles.
(3.5.1) Largura da borda: border-width, border-top-width, border-right-width, border-bottom-width, border-left-width;
Todos esses comandos são usados principalmente para definir: espessuras das bordas, que podem ser: thin, medium ou thick, além de definir individualmente cada parte das laterais de uma borda.
(3.5.2) Cor da borda: border-color, border-top-color, border-right-color, border-bottom-color, border-left-color;
Todos esses comandos são usados respectivamente junto aos comandos de borda, porém, sua principal característica é definir as cores das bordas, por exemplo: as cores laterais, interiores e exteriores.
(3.5.3) Estilo da borda: border-style, border-top-style, border-right-style, border-bottom-style, border-left-style;
Todos esses comandos são usados em conjunto com os comandos anteriores, porém sua característica é definir os estilos de cada borda individualmente, podem ser definidos seus posicionamentos, seu formatos, etc. Os principais estilos de borda são: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset. Observe os códigos da página abaixo, e tente você mesmo incrementar os comandos vistos até agora em uma única página.
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.6) Propriedades de margem: Usadas para definir diversos elementos de margens em um conjunto de texto, um formulário, ou até mesmo uma tabela, podendo ser posicionada, colorida, e conter espaçamentos.
(3.6.1) Tamanho da margem: margin, margin-top, margin-right, margin-bottom, margin-left;
Estes comandos são usados para definir o tamanho de cada margem individualmente, ou em conjunto. Os tamanhos da margem podem ser dados em pixels "PX". Observe o exemplo abaixo:
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.7) Propriedades de espaçamento: Usados para gerenciar os espaçamentos de uma margem, tabela, ou borda, dentre vários outros atributos.
(3.7.1) Espaçamento: padding, padding-top, padding-right, padding-bottom, padding-left;
Estes comandos são usados para definir os tamanhos dos espaçamentos individualmente ou agrupadamente, e os valores dos espaçamentos também são dados em pixels. Segue o exemplo abaixo:
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.8) Propriedades de fontes tipográficas: São propriedades que definem um padrão de fontes para uma página web, definindo o estilo da fonte, o tamanho, as cores, a família de fontes, além de outros recursos.
(3.8.1) Família de fontes: font-family: Caracterizado por definir um grupo familiar de fontes, por exemplo: com serif, sem serif, cursive, etc. Ou um tipo específico de fonte, como: Times New Woman, Georgia, Arial, Courier, etc. O intuito sempre é definir um padrão.
(3.8.2) Estilo da fonte: font-style: Caracterizado por definir os estilos da fonte, por exemplo: normal (fonte na vertical), italic (fonte inclinada), oblique (fonte obliqua), etc.
(3.8.3) Variante da fonte: font-variant: Caracterizado por definir um estilo de texto, de modo "caixa alta", para uma única palavra ou um conjunto, sendo frase ou parágrafo, ou seja é utilizado um comando do tipo: "small-caps".
(3.8.4) Peso da fonte: font-weight: Caracterizado por apresentar valores tais como: bolder, bold ou lighter, que servem para definir a largura do texto em negrito.
(3.8.5) Tamanho da fonte: font-size: Comando bem conhecido, é conceituado por apresentar a definição do tamanho da fonte, podendo receber valores em pixels, porcentagens, ou medium, larger e smaller, xx-small, xx-large, dentre outros. Abaixo segue um exemplo com alguns dos comandos mencionados. *Obs: Não se esqueça de testar os demais.
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.9) Propriedades de texto: São propriedades que definem o posicionamento de textos, suas posições com recuo, ou centralizadas, por exemplo, além de definir padrões para o texto, como indentação, espaçamento, etc.
(3.9.1) Recuo primeira linha: text-indent: Comando utilizado para definir recuos à esquerda da primeira linha.
(3.9.2) Alinhamento: text-align: Comando utilizado para alinhar o texto, sobre valores como: center, justify, right, left (valores em pixels ou porcentagens)
(3.9.3) Efeitos decorativos: text-decoration: Comando utilizado para definir efeitos no texto que tornam padrões decorativos, como por exemplo um texto em sublinhado, com o comando (underline), ou outras decorações como: overline, blink, line-throught, etc.
(3.9.4) Maiúsculas/minúsculas: text-transform: Comando caracterizado por definir um texto em letras maiúscula e minúsculas (uppercase ou lowercase), podendo também se aplicar um padrão de caixa alta.
(3.9.5) Entrelinhas: line-height: Conceituado basicamente por definir a distância entre as linhas de um texto, tais como seu espaçamento. Abaixo um exemplo dos comandos citados:
O código visualizado em um navegador:
__________________________________________________________________________________________
(3.10) Propriedades de listas: Conceituadas por gerenciarem estilos, posicionamentos, modelos e padronizações nas listas de um elemento.
(3.10.1) Estilo de marcadores:
○ list-style-type: Elementos conceituados por definirem o estilo dos marcadores da lista, que carregam em si valores como por exemplo: circle, square, upper-latin, upper-roman, upper-alpha, disc, dentre outros.
○ list-style-image: Elementos que definem a inserção de uma imagem como marcador da lista, que carrega em si outros comandos, tais como: posicionamento da imagem, borda da imagem, largura e altura da imagem, etc. Observe o código HTML exemplificando abaixo:
O código visualizado em um navegador:
Tente treinar todos os comandos mencionados neste post e nos posts anteriores, se tiver alguma dúvida esclareça, até a próxima.
