Introdução A

<HTML> e {CSS}

Parte 2

Introdução CSS

Introdução CSS

slides.com/bbarbosa85/intro-css

Acompanhe em

Sumário

Introdução CSS

  • Inclusão e sintaxe
  • Seletores
  • Fontes e estilos de textos
  • Cores
  • Imagem de fundo
  • Tamanhos e blocos
  • Bordas e margens
  • Flutuação de elementos
  • Posicionamento e camadas
  • Cascateamento de estilos
  • Responsividade
  • BÔNUS: Transformação com Bootstrap 

Referências

Editores de Código

Introdução CSS

CSS

Cascading Style Sheets

  • Descreve como um documento Web é exibido
    • Tela
    • Papel
    • Outras mídias
  • Interpretada pelos Navegadores
  • Estilos, efeitos, interações

http://www.csszengarden.com/

Introdução CSS

Exemplo de poder do CSS

Meu primeiro CSS ...

  1. Abra o editor de código de sua preferência
    • Notepad++
    • VSCode
    • Atom
    • SublimeText etc.
       
  2. Crie um novo arquivo em branco chamado estilo.css
     
  3. Salve o arquivo na mesma pasta do HTML da parte 1

Introdução CSS

MEU Segundo HTML ...

Introdução HTML

<!DOCTYPE html>
<html>
    <!-- Cabeçalho -->
    <head>
      <title>Título da Página</title>
      <meta charset="UTF-8">
      <meta name="description" content="Free Web tutorials">
      <meta name="keywords" content="HTML,CSS,XML,JavaScript">
      <meta name="author" content="John Doe">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <!-- Corpo -->    
    <body>
        <h1>Título</h1>
        <p>Parágrafo</p>
    </body>
</html>

Inclusão

<p style='color: green'>Texto verde</p>

Arquivo separado  (.css)

Inline

<head>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<head>
    <style> </style>
</head>

Cabeçalho HTML

Introdução CSS

Sintaxe

Introdução CSS

Comentários

/* Este é um comentário CSS e não faz nada */
  • Marcar o código
  • Facilitar leitura e manutenção

Introdução CSS

Seletores

Introdução CSS

body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}

tag

todos do mesmo tipo

Seletores

Introdução HTML

<p>
    Algum texto <span class='texto-vermelho'>com destaque vermelho</span>
</p>

html

.class

.texto-vermelho {
    color: red;
}

CSS

todos com atributo contendo a classe

Seletores

Introdução HTML

<ul id='menu-principal'>
    <li><a href='#'>link 1</a></li>
    <li><a href='#'>link 2</a></li>
    <li><a href='#'>link 3</a></li>
</ul>

html

#id

#menu-principal {
    background-color: black;
    color: white;
}

CSS

apenas o elemento com o id

Textos

  • font-family
  • font-style
  • font-size (px | em)
  • font-weight

Introdução CSS

Fonte

PropriedadeS

Textos

  • color
  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • text-shadow
  • line-height

Introdução CSS

estilização

PropriedadeS

Introdução HTML

[5 minutos]

Estilizar títulos e parágrafos

  • Coloque cada tag de subtítulo de uma fonte e tamanho diferentes
     
  • Alinhe parágrafos
    • esquerda, direita e centro
       
  • Coloque cor nos parágrafos
     

BÔNUS

  • Aplique mais de uma classe em vários elementos.
    Ex: cor e alinhamento

Desafio !

<h1>Titulo</h1>
<h2>Subtítulo</h2>
<h3>Subtítulo</h3>
<h4>Subtítulo</h4>
<h5>Subtítulo</h5>

<div>
    <p>Parágrafo A</p>
</div>

<div>
    <p>Parágrafo B</p>
</div>

<div>
    <p>Parágrafo C</p>
</div>

Cores

Introdução CSS

PropriedadeS

Nominal

  • red
  • green
  • blue etc.

Lista: 140 cores nomeadas aceitas por todos os navegadores

Cores

Introdução CSS

PropriedadeS

hexadecimaL

RGB

256 x 256 x 256 = 16.777.216

0 a 9 + A a F = 16

16² x 16² x 16² = 16.777.216

Cores

Introdução CSS

Seletores de Cores

PropriedadeS

Encurtando ...

#FF0099  é o mesmo que  #F09

Introdução HTML

background

Separadamente

Fundo

PropriedadeS

  • background-color
  • background-image  ( url: 'caminho p/ imagem'  | none)
  • background-repeat  ( no-repeat | repeat | repeat-x | repeat-y )
  • background-attachment:
  • background-position ( px | top | middle | center | bottom )

Encurtando ...

não importa se falta algum, contanto que esteja na ordem

.item-pug {
    background: #FFF url('https://d30y9cdsu7xlg0.cloudfront.net/png/7346-200.png') no-repeat center center;
}

Introdução HTML

[5 minutos]

Monte uma tela:

  • Fundo totalmente cinza
  • Título Amarelo
  • Imagem centralizada sem repetir

 

Bônus

  • insira um parágrafo
    • fundo claro
    • texto escuro

Desafio !

Tamanhos e blocos

  • width           largura
  • height          altura

Introdução CSS

Tipos de Bloco

PropriedadeS

  • display
    • inline
    • block
    • inline-block
    • none

<span>

<div>, <fieldset>

( px | em | ex | % | auto )

Borda, PREENCHIMENTO, margem

Introdução CSS

PropriedadeS

Introdução CSS

PropriedadeS

  • border-width
  • border-style
  • border-color
  • border-radius*

Borda

  • margin-top
  • margin-right
  • margin-left
  • margin-right

MArgem

  • padding-top
  • padding-right
  • padding-left
  • padding-right

preenchimento

Borda, PREENCHIMENTO, margem

Introdução CSS

PropriedadeS

ENCURTANDO

.alguma-classe{

    /* preenchimento */
    padding: 20px 10px;
    
    /* borda */
    border-width: 1px 0 5px;
    border-style: solid;
    border-color: #000;

    /* margem */
    margin: 10px;
}

Borda, PREENCHIMENTO, margem

Se falta algum tamanho, utiliza o mesmo do lado oposto.

Introdução HTML

[10 minutos]

Quero Caixas!

  • Monte 4 caixas de texto com cores de fundo distintas
    • span
    • div com 50% de largura
    • fieldset com 70% de largura
    • p

 

BÔNUS

  • margem e preenchimento
  • bordas coloridas

Desafio !

FLUTUAção

Introdução CSS

PropriedadeS

float

left | right | none

  • textos
  • caixas
  • imagens
  • listas etc.

CLEAR

left | right | both

Posicionamento

Introdução CSS

PropriedadeS

position

  • static
  • relative
  • absolute
  • fixed
  • top
  • bottom
  • left
  • right

Distância

z-index

Quem fica mais  por cima

Introdução HTML

[10 minutos]

Mais caixas!!

Pegue suas caixas coloridas e posicione-as conforme a imagem ao lado.

 

BÔNUS

  • Centralize a caixa cinza na tela.
    Dica: use margem

Desafio !

Cascateamento

Ordem da declaração

  • o último prevalece!
     

Especificidade

  • classes aninhadas
  • está contido em
  • é filho de
  • é sucessor de
     

!important

Introdução CSS

/* aninhado */
.caixa.texto-vermelho{ 
    color: red;
}


/* está contido em */
.caixa p span { 
    color: purple;
} 


/* é filho de */
.caixa > span { 
    color: magenta;
} 


/* é sucessor de */
.caixa + .caixa p{ 
    color: yellow;
}


/* !important */
p {
    color: blue !important;
}

RESPONSIVIDADE

  • Adaptação ao tamanho da tela
  • Fluidez na troca

 

 

 

 

 

  • montar da menor pra maior tela
  • maior tela no fim do arquivo

 

Introdução CSS

.caixa { 
    width: 100%;
}


/* Tablets */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px){
   .caixa
   {
      width: 50%;
   }
}


/* Desktop */
@media only screen 
  and (min-width: 1025px){
   .caixa
   {
      width: 33%;
   }
}

Boas práticas

Introdução HTML

[10 minutos]

Tornar site responsivo

Desafio !

*, html {
    font-family: sans-serif;
    padding: 0;
    box-sizing: border-box;
}
body{
    padding: 0;
    margin: 0;
    background: #FFF;
}

#principal {
    margin: 20px 0;
}

#logo{
    text-align: center;
    display: inline-block;
    width: 100%;
}
    #logo img{
        width: 40%;
    }

#menu{
    background-color: #FFF;
}
    #menu ul{
        margin: 0 0 15px;
        padding: 5px;
        text-align: center;
    }
    #menu li{
        display: inline;
        margin: 0;
        padding: 0;
    }
        #menu li a{
            text-decoration: none;
            color: #e62263;
            font-weight: bold;
            padding: 10px;
            margin: 0;
        }
        #menu li a:hover{
            color: #FFF;
            background-color: #e62263;
        }

#destaque{
    text-align: center;
    background-color: #e62263;
    color: #FFF;
    padding: 20px;
}
    #destaque h2{
        color: rgba(255,255,255,0.7);
        font-weight: normal;
        font-size: 1.2em;
    }

#caracteristicas{
    border-bottom: 2px solid #e62263;
    padding: 10px 20px;
    text-align: center;
}
    #caracteristicas > .item{
        padding-bottom: 20px;
    }
        #caracteristicas > .item img{
            width: 100%;
            border: 10px solid #CCC;
        }
        #caracteristicas > .item b{
            display: block;
            width: 100%;
            color: #e62263;
            font-size: 1.3em;
            padding: 15px;
            text-transform: uppercase;
        }
        #caracteristicas > .item span{
            color: #666
        }

    #caracteristicas a.botao{
        display: inline-block;
        padding: 20px;
        background-color: #e62263;
        color: #FFF;
        text-transform: uppercase;
    }
    #caracteristicas a.botao:hover{
        background-color: #333;
    }

#quebra{
    background: #333;
    padding: 20px;
    text-align: center;
    position: relative;
    width: 100%;
    height: 200px;
}
    #quebra::after {
      content: "";
      background: transparent url('http://lorempixel.com/400/200/sports/5') no-repeat center center;
      opacity: 0.3;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: 1;
    }
    #quebra p{
        color: #FFF;
        font-size: 1.5em;
        text-shadow: 0 2px 2px #000;
        position: relative;
        z-index: 2;
    }

#rodape{
    padding: 30px;
    text-align: center;
}
<!DOCTYPE html>
<html>
    <!-- Cabeçalho -->
    <head>
      <title>Hot Site</title>
      <meta charset="UTF-8">
      <meta name="description" content="Curso HTML CSS">
      <meta name="keywords" content="HTML,CSS">
      <meta name="author" content="Bruno Barbosa">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="estilo.css">
    </head>

    <!-- Corpo -->
    <body>
        <div id='principal'>

            <!-- Menu -->
            <div id='menu'>
                <a id='logo' href='#'>
                    <img src='https://i.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d--lion-logo-modern-logo.jpg' />
                </a>

                <ul>
                    <li><a href='#'>O Produto</a></li>
                    <li><a href='#'>Preço</a></li>
                    <li><a href='#'>Contato</a></li>
                </ul>
            </div>

            <!-- Destaque -->
            <div id='destaque'>
                <h1>Produto Rox</h1>
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
            </div>

            <!-- Caracteristicas -->
            <div id='caracteristicas'>
                <p class='item'>
                    <img src='http://lorempixel.com/400/200/sports/1' />
                    <b>Seção A</b>
                    <span>Descrição de alguma coisa que eu faço bem</span>
                </p>

                <p class='item'>
                    <img src='http://lorempixel.com/400/200/sports/2' />
                    <b>Seção B</b>
                    <span>Descrição de alguma coisa que eu faço bem</span>
                </p>

                <p class='item'>
                    <img src='http://lorempixel.com/400/200/sports/3' />
                    <b>Seção C</b>
                    <span>Descrição de alguma coisa que eu faço bem</span>
                </p>
                <a class='botao acao' href='#'>Compre Já</a>
            </div>

            <!-- Banner de Quebra -->
            <div id='quebra'>
                <p>
                    USE THIS SPACE FOR <b>PROFOUND THOUGHTS</b>.<br/>
                    OR AN ENORMOUS AD. WHATEVER.
                </p>
            </div>

            <!-- Rodapé -->
            <div id='rodape'>
                © Site HMTL 2017
            </div>
        </div>
    </body>
</html>

HTML

CSS

Bônus:

Transformação com Bootstrap

  • html se adequa ao CSS
  • estilos pré-definidos
  • maior agilidade

Introdução CSS

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

CDN

http://getbootstrap.com/

</style>

brunovb

bruno@tagplus.com.br

bbarbosa85

b.barbosa85

Introdução CSS

Parte 1
Introdução <HTML>

Introdução CSS

By Bruno Barbosa

Made with Slides.com

Introdução CSS

Material do curso de introdução ao CSS

  • 189

More from Bruno Barbosa