Please enable JavaScript.

Coggle requires JavaScript to display documents.

LINGUAGEM DE MARCAÇÃO E ESTILO CSS - Coggle Diagram

- - - - CSS INTERNA
        
        CSS Incorporada, é declarada na seção <head> do documento HTML.
        
        <html>
        <head>
        <style type = "text / css">
        p{
        background-color : blue;
        }
        </style>
        </head>
        
        A declaração Inline faz uso do atributo “style” procedido por declarações separadas por ponto-e-vírgula “;”. Esse atributo pode ser usado em qualquer tag HTML.
      - CSS EXTERNA
        
        estilos são declarados em um arquivo externo, com extensão “.css” e vinculados ao documento HTML por meio da tag <link> ou da diretiva import dentro da tag <head>
        
        <html><head><link rel = "stylesheet" type = "text/css" href = "estilo.css" />
        ....
        
        <html><head><style type = "text/css">
        import url("estilos.css");
        .....
      - CSS INLINE
        
        declarar o estilo CSS diretamente na tag, no código HTML
        
        <p style = "background-color: blue;" >Texto do Parágrafo </p>
        
        A declaração Inline faz uso do atributo “style” procedido por declarações separadas por ponto-e-vírgula “;”. Esse atributo pode ser usado em qualquer tag HTML
      - CSS EM ESCOPO
        
        específicos para as seções da página onde foram declarados, incluindo os seus elementos filhos.
        
        <div><style type = "text/css">
        /Estes eslios serão aplicados apenas dentro desta Div/
        p{
        background-color : blue;
        }
  - - - Ao menos uma propriedade: a cor de fundo (background-color);
        
        Background
        
        Text-...
        
        Position
        
        Padding
        
        Controla a distância entre as bordas e o conteúdo de um elemento.
        
        Width
        
        Z-index
        
        Definir a profundidade de um elemento – usado, por exemplo, para sobreposição de elementos.
        
        Margin
        
        Controla a distância em função da margem de um elemento para outro.
        
        List-style, List-style-image, etc.
        
        Height
        
        Font-family, Font-size, Font-weight, etc.
        
        Color
        
        Top, Bottom, Righ e Left
        
        Controlam o posicionamento, relativo ou absoluto, dos elementos em relação a outros elementos.
        
        Border
      - Ao menos um valor para a propriedade: blue.
      - O seletor: nesse caso, a tag HTML <p>;
        
        Seletores Class e ID
        
        seletor de ID é representado por uma “#” e o de class por um “.”,
        
        Seletores de atributo
        
        nomes de atributos dentro de colchetes, sendo possível combiná-los com valores.
        
        [checked] - Seleciona todos os elementos que possuem o atributo “checked”;
        [type=’text’] - Seleciona todos os elementos do tipo “text”.
        
        Seletores baseados em relacionamento
        
        H1 P
        
        Qualquer elemento P que seja descendente (filho, neto etc.) de um elemento H1.
        
        H1 > P
        
        Qualquer elemento P que seja filho de um elemento H1.
        
        H1 + P
        
        Qualquer elemento P que seja o próximo irmão de um elemento H1 (ou seja, o próximo filho de um mesmo pai).
        
        Árvore DOM (representação estruturada do documento HTML em formato de árvore)
      - REGRINHAS
        
        A propriedade e seu valor devem ser separados por dois pontos “:”;
        
        Uma declaração deve ser separada da declaração subsequente com a utilização do ponto-e-vírgula “;”
        
        O conjunto de estilos aplicados a um seletor é envolvido por chaves “{“ e “}”.
  - - - há um estilo específico definido para todas as tags <p> que sejam filhas de tags <div>
    - - FORMAS DE INCLUSÃO DE CSS
        
        Os estilos Internos e de escopo têm precedência sobre estilos em arquivos externos;
        Os estilos Inline têm precedência sobre estilos internos, de escopo e externos.
      - SELETORES
        
        Seletores de elemento (utilização apenas do nome da tag) são os de menor precedência, por serem muito genéricos;
        
        Seletores de classe têm mais precedência que os de elemento;
        
        Seletores de identificação têm mais precedência que os de classe.
        
        CSS hack
        
        !important
        
        esse estilo se sobreponha ao específico
    - - aplicação de propriedades a elementos pais seja herdada pelos seus elementos filhos.
      - nem todas as propriedades CSS podem ser herdadas pelos filhos. Um exemplo são as propriedades relacionadas à formatação das boxes
- - - - HSL, com as notações hsl() e hsla().
      - RGB, com as notações rgb() e rgba()
      - palavras-chave, onde podem ser usados os nomes das cores (seguindo as definidas pela especificação CSS) ou a notação hexadecimal. Ex.: blue, red, #FFFFFF etc;
    - - color
        
        cor de textos
        Elementos que contenham texto, como <h1> ... <h6>, <p>, <header>, <section>, etc.
      - background-color
      - border-color
      - outline-color
        
        cor da borda externa
  - - - text-align
        
        left, right, center e justify
    - - line-height
        
        Normal – valor padrão do navegador (entre 1 e 1.2 em relação ao font-size, dependendo do navegador);
        
        Número – valor inteiro ou decimal que será multiplicado ao tamanho da fonte;
        
        Comprimento – valor unidades como pixels, pontos, “em” etc.
    - - letter-spacing e word-spacing
        
        “px”, “pt” etc.
  - - - efeito de itálico. Seus valores possíveis são: normal (ou seja, tira o efeito do texto, sendo o estilo padrão de todo elemento), italic e oblique (uma versão mais inclinada em relação ao itálico).
    - - negrito em uma escala. Seus valores possíveis são: normal, bold, lighter e bolder (aumentam ou diminuem o peso da fonte em relação ao peso da fonte de seu elemento pai); e uma escala numérica que vai de 100 a 900.
  - - - font-family
      - src
        
        aponta para a url onde o arquivo da fonte se encontra.
      - fontes incorporadas podem tanto estar hospedadas localmente quanto na internet
      - funções local e format
        
        fç local
        
        indica ao navegador que, antes de fazer o download da fonte definida, deverá verificar se ela já está disponível na máquina do usuário.
        
        fç format
        
        Também chamada de dica, essa função opcional é utilizada quando se deseja declarar vários formatos de fontes, indicando justamente o formato de cada uma. No exemplo acima, temos os formatos “woff”, “woff2”, “ttf” e “eot”.
  - - - Google Chrome
        
        SVG
        
        4.0
        
        WOFF2
        
        36.0
        
        WOFF
        
        5.0
        
        TTF/OTF
        
        4.0
      - Firefox
        
        TTF/OTF
        
        3.5
        
        WOFF
        
        3.6
        
        WOFF2
        
        35.0
      - Internet Explorer / Edge
        
        TTF/OTF
        
        9.0
        
        WOFF
        
        9.0
        
        EOT
        
        6.0
      - Safari
        
        WOFF
        
        5.1
        
        WOFF2
        
        36.0
        
        TTF/OTF
        
        3.1
        
        SVG
        
        3.2
      - Opera
        
        WOFF2
        
        26.0
        
        SVG
        
        9.0
        
        WOFF
        
        11.1
        
        TTF/OTF
        
        10.0
- - - - Sistema de Grid
        
        12 colunas.
        
        sistema básico de grid foi substituído por um novo sistema, o XY Grid. Em tal sistema, novas funcionalidades foram adicionadas, como alinhamento vertical e horizontal, dimensionamento automático e grid vertical completa.
      - Como utilizar o Foundation
        
        é preciso incluir um arquivo CSS e outro Javascript ou então utilizar um gerenciador de pacotes. Além disso, é recomendado também incluir a Biblioteca jQuery.
  - - - pré-processador CSS, o LESS, e a biblioteca Javascript Jquery. Também é um Framework open source.
      - utilizam sintaxe de linguagem natural, como substantivos, por exemplo, para vincular conceitos de maneira mais intuitiva.
  - - - Sistema de Grid
        
        Sistema de Grid em um Framework consiste em uma série de containers, linhas e colunas que servem para arranjar e alinhar conteúdo.
        
        A grid do Bootstrap, por exemplo, possui 12 colunas e 5 breakpoints responsivos, que são pontos de quebra nos quais o layout será ajustado para atender a diferentes resoluções de tela. São eles: extra small, small, medium, large e extra large.
        
        -# of columns
        
        12
        
        Gutter width
        
        30px (15px on each side of a column)
        
        Class prefix
        
        .col-
        
        .col-sm-
        
        .col-md-
        
        .col-lg-
        
        .col-xl-
        
        Nestable
        
        s
        
        Max container width
        
        None (auto)
        
        540px
        
        720px
        
        960px
        
        1140px
        
        Column ordering
        
        s
      - Como utilizar o Bootstrap
        
        é necessário incluir a sua biblioteca, composta por dois arquivos: um CSS e outro Javascript
        
        através de ferramentas gerenciadoras de pacotes, como npm ou gem
        
        é necessário ainda incluir outras bibliotecas Javascript, a Jquery e a Popper.
  - - - Baseado no Material Design, ambos criados pelo Google e utilizados em seus produtos;
    - - Framework baseado unicamente em CSS, não faz uso de Javascript;
    - - Considerado o framework mais leve, foi desenvolvido pela Yahoo;
    - - Framework minimalista. Possui apenas 400 linhas de código.
  - - - Economia de tempo, uma vez que não é precisar criar todo o código CSS do zero;
      - Seguimento de padrões, já que os Frameworks estão sempre antenados às especificações e recomendações oficiais;
      - Padronização do código, muito válido, sobretudo, quando se trabalha em equipe;
      - Compatibilidade entre navegadores.
    - - Restrições de design – lembre-se de que o framework possui um layout padrão, baseado em grids. Isso pode acabar limitando a imaginação
      - Curva de aprendizado – aprender a utilizar adequadamente um Framework pode levar algum tempo;
      - Controle sobre o código – sendo obrigado a utilizar a estrutura definida pelo Framework, acabamos por perder o controle total sobre o código
      - Tamanho / peso do Framework, que pode impactar no carregamento da página;
- - - - :first-child
        
        li:first-child
        
        Selecionar todo primeiro item de lista.
      - :last-child
        
        li:last-child
        
        Selecionar todo último item de lista.
      - :checked
        
        input:checked
        
        Selecionar todos os campos input checados.
      - :hover
        
        div:hover
        
        Selecionar todas as divs no evento mouseover.
      - :active
        
        a:active
        
        Selecionar todos os links ativos.
  - - - conteúdo
  - - - ::after
        
        img::after
        
        Inserir conteúdo após o elemento indicado.
      - ::before
        
        h1::before
        
        Inserir conteúdo antes do elemento indicado.
      - ::first::letter
        
        p::first-letter
        
        Selecionar a primeira letra do elemento indicado.
      - ::first-line
        
        p::first-line
        
        Selecionar a primeira linha do elemento indicado.
      - ::selection
        
        p::selection
        
        Seleciona a porção de um elemento que é selecionado pelo usuário.
  - - - Com isso, independente do scroll, de rolarmos a página para cima ou para baixo, o elemento sempre permanecerá no mesmo local. As propriedades top, bottom, right e left devem ser usadas para definir o lugar onde o elemento será fixado. Uma curiosidade sobre esse elemento é que ele é posicionado em relação à viewport/janela do navegador. Com isso, ele “flutuará” sobre os demais conteúdos da página, ficando fixo onde foi colocado e não ocupando, assim, a posição original onde foi declarado no HTML.
    - - posicionado em relação à localização do seu elemento ancestral mais próximo – o qual também deverá estar posicionado (ou seja, não poderá ser static).
        Quando o elemento definido com absolute for o primeiro elemento da página, ele então será posicionado em relação ao <body>. Com isso, tal elemento acompanhará a rolagem da página.
    - - faz com que ele seja posicionado de modo relativo à sua posição normal
    - - seja posicionado com base na posição de rolagem da página (scroll)
    - - são posicionados naturalmente, de acordo com o fluxo normal da página, não assumindo nenhuma localização especial.