Scribd Logo
Carregar

Bem-vindo(a) ao Scribd!

  • 31 visualizações

    Fundamentos Do CSS V 1.0

    Enviado por

    contratossemobs.lucas
    Este documento fornece uma introdução aos fundamentos do CSS, incluindo o que é CSS, como declará-lo, como depurá-lo e o que pode ser criado com CSS. O documento também descreve os pré-requisitos e as etapas que serão cobertas ao longo da trilha de aprendizagem de CSS.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd

    Fundamentos Do CSS V 1.0

    Enviado por

    contratossemobs.lucas
    31 visualizações23 páginas
    Este documento fornece uma introdução aos fundamentos do CSS, incluindo o que é CSS, como declará-lo, como depurá-lo e o que pode ser criado com CSS. O documento também descreve os pré-requisitos e as etapas que serão cobertas ao longo da trilha de aprendizagem de CSS.

    Descrição original:

    Fundamentos CSS, Normalmente ensinado no ensino técnico das escolas.

    Título original

    Fundamentos do CSS v 1.0

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Este documento fornece uma introdução aos fundamentos do CSS, incluindo o que é CSS, como declará-lo, como depurá-lo e o que pode ser criado com CSS. O documento também descreve os pré-requisitos e as etapas que serão cobertas ao longo da trilha de aprendizagem de CSS.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Fazer download em pptx, pdf ou txt
    31 visualizações23 páginas

    Fundamentos Do CSS V 1.0

    Enviado por

    contratossemobs.lucas
    Este documento fornece uma introdução aos fundamentos do CSS, incluindo o que é CSS, como declará-lo, como depurá-lo e o que pode ser criado com CSS. O documento também descreve os pré-requisitos e as etapas que serão cobertas ao longo da trilha de aprendizagem de CSS.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Fazer download em pptx, pdf ou txt
    de 23

    Fundamentos do CSS

    Michele Queiroz Ambrosio


    Desenvolvedora Front-end

    @programi_

    [1]
    Sobre Mim
    Como entrei na área de tecnologia?

    • (2012-2013)
    Curso técnico em informática na ETEC;
    • (2014-2017)
    Faculdade de Ciência da Computação na UNISO;
    • (2017-atualmente)
    Desenvolvedora Front-end na Eduzz.
    [2]
    Sobre Mim
    Como você pode me encontrar nas
    redes sociais?
    • Instagram: @programi_
    • Twitch: twitch.tv/michele_ambrosio
    • LinkedIn: Michele Ambrosio
    • Github: @micheleambrosio

    [3]
    Objetivo Geral
    Ao longo dessa trilha você vai estar aprendendo:

    • Fundamentos do CSS;
    • Estilizações básicas com CSS;
    • Unidades de Medida;
    • Posicionamentos e displays;
    • Alinhamento de elementos (flexbox e grid layout);
    • Responsividade;
    [4]
    Objetivo Geral
    Ao longo dessa trilha você vai estar aprendendo:

    • Pseudo-elementos
    • Pseudo-classes;
    • Transições;
    • Animações;
    • Convenções no CSS e frameworks.
    [5]
    Pré-requisitos

    É importante que você já tenha uma base de HTML, para


    acompanhar os exemplos e conseguir estilizar suas páginas.
    Nosso foco vai ser totalmente no CSS.

    [6]
    Ferramentas utilizadas

    • VSCode;
    • Plugins para VSCode: Live Server e Emmet;
    • Google Chrome.

    [7]
    Percurso
    Etapa 1 Introdução ao CSS

    Etapa 2 Seletores

    Etapa 3 Combinadores

    [8]
    Percurso
    Etapa 4 Propriedades de dimensionamento

    Etapa 5 Propriedades de espaçamento

    [9]
    Etapa 1

    Introdução ao CSS

    [10]
    O que é CSS?
    • Cascading Style Sheets (CSS), ou Folha de Estilo em Cascata,
    é um mecanismo para adicionar estilos a um documento
    web (HTML);
    • Determina como deve ser o layout de uma página e como os
    elementos do nosso site deve ser;
    • Criado em 1994 por Hakon Wium Lie para facilitar a
    programação de sites.
    [11]
    O que é CSS?

    • 1995 o CSS1 foi desenvolvido pela W3C;


    • 1997/1999 o CSS ficou popularmente conhecido;
    • Atualmente se encontra na versão CSS3.

    [12]
    O que o CSS não é?

    • O CSS é uma linguagem de estilos;


    • Não é uma linguagem de programação;
    • Não é uma linguagem de marcação.

    [13]
    O que pode ser criado com CSS?
    • Layouts e estilização de páginas web;
    • Animações;
    • Formas geométricas e desenhos;
    • Filtros;
    • Contadores.
    [14]
    Propriedades e valores

    Uma propriedade é uma característica de um elemento do


    nosso HTML (cor de fundo, largura, altura, espaçamento, etc).
    Um valor define o resultado de uma propriedade e como o
    navegador deve exibir o estilo daquele elemento.

    [15]
    Propriedades e valores

    propriedade: valor;

    Por exemplo:

    [16]
    Formas de declarar o CSS
    CSS Inline: adicionamos o código CSS utilizando o atributo style
    dentro das tags HTML, elemento por elemento.

    [17]
    Formas de declarar o CSS
    CSS Interno: código CSS é adicionado dentro da tag <head> da
    página HTML. Dentro da tag <head> adicionamos outra tag,
    a <style>, e colocamos as regras CSS nessa área.

    [18]
    Formas de declarar o CSS
    CSS Externo: é criado um arquivo com a extensão .css com
    todas as regras CSS que queremos aplicar e esse arquivo é
    referenciado no HTML da página através da tag <link>.

    [19]
    Depurando o CSS
    O processo de depuração (conhecido como debug), é uma
    forma de identificar problemas no código-fonte de uma
    aplicação e entender seu comportamento

    [20]
    Depurando o CSS
    Todos os navegadores possuem uma ferramenta voltada para
    os desenvolvedores que permite examinar nossos sites,
    requisições para recursos externos, entre outros. Essa
    ferramenta é conhecida como Dev Tools.

    [21]
    Depurando o CSS
    Para abrirmos o Dev Tools do Google Chrome, temos os
    seguintes atalhos:
    • Segundo botão do mouse > Inspecionar;
    • CTRL + SHIFT + I;
    • CTRL + SHIFT + C;
    • F12.
    [22]
    Vamos ver o Dev Tools funcionando na prática!

    [23]

    Você também pode gostar