Programação Web

Prof. Alan Ferreira dos Santos

O que é o CSS?

CSS é quem formata a informação marcada em HTML.

 

Com CSS podemos formatar diversas características básicas como:

  • cores
  • fundo
  • fontes
  • margens
  • espaçamentos
  • posições

Como utilizar?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Inline</title>
  </head>
  <body>
    <h1 style="color: blue;">Aplicando um CSS</h1>

    <p style="font-size: 1.2em;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

Como utilizar?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Interno</title>
    
    <style>
    	#titulo1 {
        	color: blue;
        }
        
        .paragrafo {
        	font-size: 1.2em;
        }    
    </style>
  </head>
  <body>
    <h1 id="titulo1">Aplicando um CSS</h1>

    <p class="paragrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

Como utilizar?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Externo</title>

    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1 id="paragrafo1">Aplicando um CSS</h1>

    <p class="paragrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

#paragrafo1 {
  color: blue;
}

.paragrafo {
  font-size: 1.2em;
}

Como utilizar?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Externo</title>

    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>Aplicando um CSS</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

h1 {
  color: blue;
}

p {
  font-size: 1.2em;
}

Seletores

Representa uma estrutura que condiciona quais elementos serão formatados.

seletor {
  propriedade: valor;
}

Podem ser encadeados ou agrupados:

section p {
  color: red;
}

strong, em {
  color: red;
}

Seletores Complexos

Seletores são a alma do CSS.

 

Seletores complexos facilitam e nos dão precisão ao formatar:

 

  • Elementos com atributo específico;
  • Elementos com um valor específico em um atributo;
  • Elementos filhos de um determinado pai;
  • Elementos que precedem de outro;
  • Elementos habilitados e desabilitados;
  • Campos obrigatórios de um formulário.

Pseudo-classes

Manipulam um determinado estado do elementos.

 

Podem ser dinâmicas ou estruturais:

 

  • Passar o mouse por cima;
  • Elemento visitado;
  • Elemento ativo;
  • Elemento com foco;
  • Encontrar elementos específicos.

Pseudo-elementos

Permitem acessar informações inacessíveis e referenciar conteúdos que não existem.

 

  • Encontrar a primeira letra de um texto;
  • Encontrar a primeira linha de um texto;
  • Adicionar um elemento antes ou depois de um elemento existente.

Guia de Propriedades

A Propriedade Display

Especifica o tipo de caixa de renderização usada por um elemento

 

Também pode ocultar um elemento

A Propriedade Float

Determina se o elemento deve sair do seu fluxo natural

A Propriedade Float

/* Esquerda */
float: left;

/* Direita */
float: right;

/* Padrão */
float: none;

/* Global values */
float: inherit;

Propriedades Background

São 8 as propriedades para estilizar o fundo de um elemento

Propriedades Background

/* Cor de Fundo */
background-color

/* Imagem de Fundo */
background-image

/* Posicionamento do Fundo */
background-repeat

/* Determina a movimentação do fundo */
background-attachment

/* Determina o posicionamento do fundo */
background-position

/* Determina a área do fundo */
background-clip

/* Determina a posição de origem do fundo */
background-origin

/* Determina o tamanho do fundo */
background-size

/* Atalho */
background

EAD - CSS3

By Alan Ferreira dos Santos

EAD - CSS3

Programação Web EAD

  • 264

More from Alan Ferreira dos Santos