Curso Online de CSS Noções Fundamentais

Curso Online de CSS Noções Fundamentais

Noções fundamentais para iniciar os estudos em CSS

Continue lendo

Autor(a):

Carga horária: 5 horas

De: R$ 40,00 Por: R$ 23,00
(Pagamento único)

Certificado digital Com certificado digital incluído

Noções fundamentais para iniciar os estudos em CSS



  • Aqui você não precisa esperar o prazo de compensação do pagamento para começar a aprender. Inicie agora mesmo e pague depois.
  • O curso é todo feito pela Internet. Assim você pode acessar de qualquer lugar, 24 horas por dia, 7 dias por semana.
  • Se não gostar do curso você tem 7 dias para solicitar (através da pagina de contato) o cancelamento ou a devolução do valor investido.*
  • Adquira certificado ou apostila impressos e receba em casa. Os certificados são impressos em papel de gramatura diferente e com marca d'água.**
* Desde que tenha acessado a no máximo 50% do material.
** Material opcional, vendido separadamente.

Modelo de certificados (imagem ilustrativa):

Frente do certificado Frente
Verso do certificado Verso
  • Cascading Style Sheets (CSS)

    Cascading Style Sheets (CSS)

    Professor: Pablo Fortes

  • Style Sheets

    CSS

    Style Sheets

    Descrição de regras de estilo que indicam ao browser como apresentar os diversos elementos de um documento HTML (idêntico aos tipos de parágrafos do MSWORD).
    Vêm substituir os atributos de formatação dos elementos HTML.
    Ex:



    Forma de separar a apresentação do documento da sua estrutura.
    A maioria das propriedades das style sheets podem ser utilizadas em qualquer Elemento HTML.

  • Documento HTML sem regras de estilo

    CSS


    Formatação sem CSS Example



    Heading1




    Heading2


    Documento HTML sem regras de estilo

  • Documento HTML com regras de estilo

    CSS

    Documento HTML com regras de estilo


    Formatacao com CSS

    h1 {
    color: red; margin-left: 10%
    }
    h2 {
    color: orange; margin-left: 5%
    }

    Heading1


    Heading2

  • CSS – Noções fundamentais

    CSS

    CSS – Noções fundamentais

    Todo o mecanismo de CSS – Cascading Style Sheets é baseado em regras e Style Sheets.
    Regra – Definição dos aspectos de estilo de um ou mais elementos.
    Style Sheet - Conjunto de uma ou mais regras a aplicar a um documento HTML.

    Exº: Style Sheet com uma única regra
    h1 { color: red }

  • Definição de Regras de estilo

    CSS

    Definição de Regras de estilo

    Cada regra de estilo é constituída por duas partes:
    Selector – É a ligação entre o documento HTML e o estilo a ser definido. Identifica o(s) elemento(s) a que a regra se aplica (normalmente o nome de um elemento HTML, ex: body, p, h1, etc.).
    Bloco de Declarações
    Um bloco de declarações é delimitado por ‘{ }’ e é constituído por declarações, separadas por ‘;’.
    Declaração – Define a propriedade de estilo a aplicar aos elementos identificados pelo selector. Uma declaração é constituída por duas partes, separadas por ‘:’ :
    Propriedade – nome do efeito/característica a aplicar.
    Valor – Valor a aplicar à propriedade.

  • Agrupar regras selectores

    CSS

    Agrupar regras selectores

    É possível agrupar regras com declarações iguais, para diferentes selectores numa única regra:

    h1 { font-weight: bold }
    h2 { font-weight: bold }
    h3 { font-weight: bold }

    Equivalente a

    h1,h2,h3 { font-weight: bold }

    Um selector pode ter mais que uma declaração:

    h1 { color: red }
    h1 { text-align: center }

    Escrevendo várias regras para o mesmo selector

    h1 { color: red;
    text-align: center;
    }

    Agrupando várias declarações para o mesmo selector, separadas por ‘;’

  • Associar Style Sheets a documentos HTML

    CSS

    Associar Style Sheets a documentos HTML

    Uma Style Sheet afecta as características do documento HTML a que está associada. Esta associação pode ser efectuada de 4 formas:
    Associar a style sheet externa ao documento - através do elemento dentro do elemento .
    Associar a style sheet local ao documento - através do elemento dentro do elemento .
    Associar uma regra da style sheet a um elemento em particular (regras inline) - através do atributo style.
    Importação de uma Style Sheet – através da clausula @import das CSS (não utilizada na disciplina).

  • Associação de uma Style Sheet externa (1)

    CSS

    Associação de uma Style Sheet externa (1)

    Uma Style Sheet externa, pode ser associada a uma página HTML através do elemento .
    A utilização de Style Sheets externas é recomendada quando o mesmo estilo é aplicado a uma grande quantidade de páginas (ex: um site).
    Utilizando esta técnica, a alteração do aspecto de um site inteiro, consegue-se modificando apenas um único ficheiro.

    body { margin: 0px } td.leftborder { background-color: lightgrey; width: 15% } td.topborder { background-color: red; height: 15% } td.qqm { } a { color: black } .modeltitle { font-family: arial, " times new roman mt extra bold " } table.maintable { height: 100%; width: 100% }

    style.css

  • Associação e uma Style Sheet externa (2)

    CSS

    Associação e uma Style Sheet externa (2)

    No elemento pode ser definido o parâmetro “media” que define o(s) meio(s) de vizualização ao qual a style sheet deve ser aplicada.
    Possibilita, por exemplo, a existência de regras de estilo diferentes para apresentação em ecrã e impressão.

    Valores possíveis para media:
    all, aural, braille, embossed, handheld, print, projection, screen, tty, tv

  • Definição local – Elemento <style>

    CSS

    Bach's home page

    body { background-color: silver }
    h1 { color: red }


    Bach's home page


    Johann Sebastian Bach was a prolific composer. Among his works are:




    • the Goldberg Variations

    • the Brandenburg Concertos

    • the Christmas Oratorio


    Historical perspective


    Bach composed in what has been referred to as the Baroque period.


    Definição local – Elemento

    Estes estilos apenas podem ser aplicados a elementos da página onde foram definidos.


Matricule-se agora mesmo Preenchendo os campos abaixo
R$ 23,00
Pagamento único
Processando... Processando...aguarde...
Autorizo o recebimento de novidades e promoções no meu email.

  • Cascading Style Sheets (CSS)
  • Style Sheets
  • Documento HTML sem regras de estilo
  • Documento HTML com regras de estilo
  • CSS – Noções fundamentais
  • Definição de Regras de estilo
  • Agrupar regras selectores
  • Associar Style Sheets a documentos HTML
  • Associação de uma Style Sheet externa (1)
  • Associação e uma Style Sheet externa (2)
  • Definição local – Elemento &lt;style&gt;
  • Regras inline
  • Estrutura em árvore e herança
  • Herança de propriedades de estilo
  • Propriedades não herdadas
  • Selectores
  • Selectores de tipo
  • Selectores de atributos
  • Selectores com o atributo class
  • Selectores com o atributo id
  • Selectores contextuais
  • Combinar selectores
  • Declarações – Propriedades
  • Declarações – Valores
  • Valores - Dimensões
  • Valores - Percentagens
  • Valores - URIs
  • Valores - Cores
  • CSS Box Model
  • Margem, paddding e border - Exemplo
  • O elemento &lt;SPAN&gt;
  • Inline Boxes
  • O elemento &lt;DIV&gt;
  • Block Boxes
  • Esquemas de posicionamento
  • Posicionamento Flutuante
  • Posicionamento flutuante – exemplo (1)
  • Posicionamento flutuante – exemplo (2)
  • Posicionamento
  • Posicionamento absoluto
  • Posicionamento absoluto - exemplo
  • Posicionamento relativo
  • Posicionamento relativo - exemplo
  • Posicionamento – exemplo completo (1)
  • Posicionamento – exemplo completo (2)