Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Anotacoes Curso Web Master

    Enviado por

    guilherme
    6 visualizações4 páginas
    anotacoes

    Título original

    anotacoes curso web master

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    TXT, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    anotacoes

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato TXT, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    6 visualizações4 páginas

    Anotacoes Curso Web Master

    Enviado por

    guilherme
    anotacoes

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato TXT, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 4

    -----------------------------------------------------------------------------------

    -----------------------------------------------------------------------------------
    -
    basico do site <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>

    </body>
    </html>
    -----------------------------------------------------------------------------------
    -----------------------------------------------------------------------------------
    -
    tags basicas html

    <head> e a cabeca do site

    <title> para definir o titulo

    <body> e todo o conteudo no site

    <h4, h3, h2 e h1> sao o titulo


    <p> e o paragrafo do site
    <spam> seria um frase no ste que nao iria para outra linha diferente do <p>
    que iria para outra linha
    <br> para nao pular uma linha caso esteja usando <p>
    <b> para deixar em negrito
    <i> deixa em etalico
    <u> com anderline

    <img src=""> para colocar uma imagem


    width="" para definir o a largura da imagem (o tamanho ja sera setado
    de acordo com a imagem) (tbm pode definir nao so em numero mais tbm em porcentagem)
    height="" para definir o tamanho

    <a href="LINK">NOME PARA O LINK</a> para adicionar links

    <table></table> e como uma tabela (inica a tabela)


    width="" para dar espaco entre as palavras (colocar dentro do <table>
    ex:<table width="">
    align="" para decidir onde vai ficar a tabela (direita (right) esquerda
    (left) centro (center))
    <tr></tr> e a linha entre as palavras na tabela (inicia a linha na
    tabela)
    <td></td> e onde estara escrito o conteudo da tabela (inicia o lugar da
    tabela)

    <form></form> e um formulario

    (php kkkkkk https://youtu.be/XkVayhYz9sk)


    -----------------------------------------------------------------------------------
    -----------------------------------------------------------------------------------
    -
    O tamanho m�nimo � 320px.
    Tem tamb�m 375, 420, 520, 768, 860, 960, 1024, 1200, 1280 e 1366 .
    tamanhos q n tenho 1440, 1680, 1920 e 2560
    -----------------------------------------------------------------------------------
    -----------------------------------------------------------------------------------
    -
    tags para nao esquecer e parar de chutar css

    criar css em outra folder: {<link href="css/style.css" rel="stylesheet"


    type="text/css">}

    tag obrigatoria para programar responsivamente {<meta name="viewport"


    content="width=device-width, initial-scale=1.0, maximum-scale=1.0">} (!ATEN�AO:
    colocar
    esta tag antes da tag que chama outra pasta do sript css)

    x=largura y=altura

    transform: tranlate((X-50%), (Y-50%)) translateX(-50%); translateY(-50%); =


    esta e a forma certa de mudar posicoes com responsivo

    !important assim: .div{font: tahoma; !important} = serve para dar toda a


    importancia a esta tag mesmo e outra tag tenha um nivel de especificacao maior ou
    este-
    ja abaixo desta

    box-sizing: border-box; = faz com que se vc definir padding ou border ele n


    cresce a mais

    margin 0 auto no css e para colocar o documento no centro

    text align para colocar em posicoes right, left e center, sempre colocar text
    align na div mad

    line-height= para manupular a altura de um texto que esta dento da box

    overflow:visble= e o padrao se vc colocar um texto e botar uma cor de fundo


    que seja menor que o texto q vc definiu so vai ficar a cor de fundo e o
    resto do texto vai continuar sem cor de fundo

    overflow:hidden= se vc colocar um texto e botar uma cor de fundo que seja


    menor que o texto q vc definiu o overflow vai cortar todo o texto e deixalo so ate
    onde tiver a cor de fundo

    overflow:auto= se vc colocar um texto e botar uma cor de fundo que seja menor
    que o texto q vc definiu o overflow vai criar uma sroll bar para vc entender tudo

    display: inline deixa os elementos em uma linha so mais nao permite setar
    width e height, porem tbm ele fica dando um espaco entre os elementos, como se
    tivesse
    uma margin ali, isso acontece gracas ao enter que e dado para organizar o
    codico, para tirar isto pode dar um comentario invisivel entre uma quebra de linha
    e
    outra

    display-block: deixa os elementos como estao mas cria toda uma margin
    invisivel que sobra de sua width, com isso ele ocupa toda a sua area mesmo que
    esteja so-
    brando espaco, com isso obviamente n e possivel colocar nenhum elemento ao
    seu lado, tbm e interessante usar margin (left, right or center): AUTO, que faz com

    que toda a sua margin right por exemplo jogue todo o seu elemento para a
    direita sem voce precisar fazer algum calculo de px ou % {!ATEN�AO display: block
    ja e
    padrao no navegador}

    display:inline-block: fusao display: block e display: inline, o display:


    inline-block diferente do display: inline e possivel setar altura e largura, e
    dife-
    rente do display: block o display: inline-block nao cria uma margin invisivel
    do que sobra do width, podendo assim desde que o outro elemento tenha display:in-
    line ou display: inline-block colocar outro elemento ao lado deste

    opacity: se define apenas com numero, ela literalmente modifica a opacidade


    do elemento, ex: se vc colocar opacity: 0; o elemento vai ficar sem opacidade ne-
    nhuma e ficando assim invisivel

    clear: (both, right e left):a clear faz com que se existir algum elemento a
    direita ou esquerda aquele conteudo vai sair dali e vai descer para baixo
    (clear: both; vai setar dos dois lados right e left, e clear right ou left
    vai setar especificamente de um desses dois lados

    float=(left,right): faz o elemento flutuar, se tiver um elemento abaixo


    deste, ele ira entrar dentro do elemento, que esta com float, e literalmente como
    se
    o elemento comecasse a flutuar e ficasse outro elemento abaixo dele, e o
    elemnto com float o cobrindo-o. O elemento float nunca esconde o conteudo, mesmo
    escon-
    dendo o elemento, mas ainda assim se vc n definir uma cor para o conteudo ele
    ira ficar invisivel, note que o conteudo vai ficar com float mas seriaum tipo de
    float que faria ele ficar como se estivesse em uma terceira camada, tipo
    assim, o elemento normal fica na segunda camada, o elemento com float na terceira,
    mas o conteudo do elemento que esta com float fica na primeira camada, se
    existir dois elementos com float como os dois estarao na terceira camada, nenhum
    vai
    ficar acima do outro. Qualquer conteudo normal (2 camada), sempre vai tentar
    se encaixar entre os espacos que sobrarem dos elementos com float

    position: relative;= com isso voce pode setar um espaco entre (top, right,
    bottom e left), lembrando que ele funciona como uma margin, ou seja cria uma margem
    invisivel ali onde entao nao e possivel colocar nenhum elemento ou centeudo
    ali.

    position: absolute;= e igual relative, porem vc pode setar (top, right,


    bottom e left): 0; podendo assim jogar o elemento totalmente para algum desses
    lados,
    observe que essa propriedade e parecida com float, ou seja ela tbm flutua. Se
    voce quiser usa-la dentro de outra div, a div pai nao poder ter a
    position: static; (padrao), porque se nao ela ira sair para fora da div pai,
    coloque de preferencia na div pai position: relative;

    z-index: number; = se define por numeros, com ela vc pode definir qual box
    fica na frente na frente, por exemplo, se tiver duas box com (position: absolute;),
    com o zindex vc pode definir com numeros qual vai ficar na frente, "QUANTO
    MAIOR O NUMERO MAIS NA FRENTE ELA VAI FICAR"

    vertical-align: center, right, bottom ou left; = com isso vc pode alinhar uma
    box onde quiser

    border-radius: se define com numeros e px; = com esta propriedade vc pode


    arrendondar sua box
    word-wrap: break-word; = faz o conteudo se encaixar certinho dentro de uma
    box

    white-space: nowrap; = faz com que o conteudo nunca se quebre dentro de uma
    box

    white-space: pre; = faz com que se tiver mais de um espaco ou quebra de linha
    no conteudo, o navegador ira interpretar isso (pre-line ele ira interpretar apenas
    as quebras de linhas)

    border-collapse: collapse; = faz com que as bordas possam se colidir

    background: linear-gradient (duas ou mais cores); = com ele vc pode fazer uma
    cor ir de uma para outra (DETALHE vc pode selecionar a partir de onde o linear
    vai comecar, assim: background: linear-gradient: (to right bottom); = a aqui
    no caso comeca a partir da direita e termine em baixo), vc tbm
    pode definir quanto de porcentagem vai ter certa cor, assim: background:
    linear-gradient (70% 30%); uma cor vai ter 70% e a outra 30%, se vc colocar
    radial-gradient ao inves de linear-gradient = o gradient vai ser um circulo

    5min aula
    -----------------------------------------------------------------------------------
    -----------------------------------------------------------------------------------
    -

    Você também pode gostar