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 ...

Abra o editor de código de sua preferência
- Notepad++
- VSCode
- Atom
- SublimeText etc.
Crie um novo arquivo em branco chamado estilo.css
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

https://www.w3schools.com/colors/colors_picker.asp
Google: color picker
http://htmlcolorcodes.com/color-picker/

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>