Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Trabalho de TIC Alter 4

    Enviado por

    yorany físico
    9 visualizações13 páginas

    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?

    Denunciar este documento

    Direitos autorais:

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

    Trabalho de TIC Alter 4

    Enviado por

    yorany físico

    Direitos autorais:

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

    Trabalho de TIC

    Tema: CSS

    Turma A2
    Grupo nº04
    Sala 10
    Laboratório 01
    SubTemas: Integrantes:
    Cascata; ● Nº22- Isabel Solendo;
    Cáculo de especificidade; ● Nº24- João Paulo Caingona;
    Ordem de especificação; ● Nº26- Joel Adão;
    Anotação; ● Nº28-Kisi Daniel;
    ● Nº30-Madalena Velhote;
    Herança. ● Nº32-Marcelo Pakisi;
    ● Nº34-Miltom Alves;
    ● Nº36- Valdemar Domingos;
    ● Nº38- Zandala Bartolomeu.
    O que é css?
    As Folhas de Estilo em Cascata (Cascating Style Sheets) tratam-se ou designam-se por
    uma linguagem de estilo criado pelo consórcio WC3 em 1996, encontrando-se na versão
    3, é utilizada como uma forma para inserir estilos dos conteúdos de uma página Web,
    como por exemplo: fontes, cores, espaçamento e tamanhos.

    Para que as mesmas concretizem a sua acção de forma correta, estilizando váriados
    elementos HTML em uma página, ele utiliza várias regras e padrões de funcionamento
    para uma maior precisão em estilizar. Tais padrões e regras serão citados a seguir.

    Cascata
     
    A cascata é o algoritmo para resolver conflitos em que várias regras CSS se aplicam a um
    elemento HTML.O mesmo é dividido em quatro estágios, a saber:
    1
    Posição e ordem de aparecimento:
    A ordem em que suas regras CSS aparecem e como elas aparecem é levada em
    consideração pela cascata enquanto ela calcula a resolução de conflitos;

    Ex:
    button{
    font-size:30px;
    background:linear-gradient(orange,yellow);
    background:linear-gradient(pink,blueviolet);
    }

    Especificidade:
    Algoritmo que determina qual seletor CSS é mais específico, usando um sistema
    de ponderação ou pontuação para fazer esses cálculos (Falaremos mais
    detalhadamente sobre especificidade nos temas seguintes).
    2
    Ex:
    <span class="A2">Turma A2 trabalho-prova</span>

    .A2{
    font-size:40px;
    color:#7a7a7a; /*tom de cinza*/
    }
    span{
    font-size:30px;
    color:#003E7B; /*tom de azul*/
    }

    Origem:
    A cascata leva em consideração a origem do CSS, origem esta que inclui a folha de estilo interna do navegador,
    estilos adicionados por extensões do navegador ou sistema operacional e css de autoria.

    Importância:
    Algumas regras de css são mais pesadas do que outras, especialmente com o tipo de regra “!important”. Com
    esta informação é possível fazer com que um atributo local seja mais lepado que um link CDN por causa da
    regra desta regra, ou até a o atribuido declarado primeiro pode ter mais peso pela acção da mesma.
    3
    Ex:
    <body>
    <ul> CSS:
    <li>Grupo</li>
    <li>Dos</li> ul{ color:grenn !
    <li>Pares</li> important; color:purple;
    </ul> }
    </body>

    Cálculo de Especificidade
     
    Especificidade é à maneira de como os navegadores definem quais valores de propriedades são os mais
    relevantes para o elemento a ser utilizado, ou seja, ele segue uma determinada ordem/ regra colocada numa
    composição de diferentes tipos de Seletores.

    Regras de estilo aplicados:

    1. Se os estilos de diferentes pesos são aplicadade a um mesmo elemento, o estilo que tiver o maior peso séra
    aplicado. E se os estilos tiverem o mesmo peso, os estilos que tiverem mais a baixo serão aplicados. Isto é
    feito atravéz do “Efeito Cascata”.
    4
    Ex:
    <p class=“you winner”>Testando</p>

    .you{color:red;}
    .winner{color:blue}

    2. Quando dois seletor de mesmo peso são aplicados a um elemento, é contado como 2x o peso.

    Ex:
    <p class=“you winner”>Testando</p>

    .you .winner{color:yellow;}
    .winner{color:orange}

     
    Os Seletores com maior especificidade / perioridade são:
    ID (Identificador);
    Classes, Classes-pseudo e atributos;
    Elementos, Elementos-pseudo. 7
    5
    Especificidades
     
    A especificação é a maneira de como os navegadores definem quias valores de propriedades são os
    mais relevantes para o elemento a ser utilizado.
    A especificação é baseada apenas nas regras impostas na composiçaõ de diferentes tipos de seletores.]

    Ordem crescente de especificação


     
    A seguite lista de seletores está incluinda na especificação:

    .Seletores Universais (corresponde a qualquer elemento. Ex: *{} );


    .Tipo de Seletores (por tipo de elemento);
    . Classes de Seletores (corresponde aos elementos com base nos seus atributos “class”);
    . Atributo Seletores (representa um elemento com o atributo de nome attr);
    . Pseudo-classes (palavra-chave adicionada a seletores que especifica um estado especial do
    elemento seleccionado);
    .Seletores ID (selecionam um elemento com base nos seus atributos “id”);
    .Estilo Inline (regras CSS são declaradas dentro da tag de abertura do elemento HTML com uso do
    atributo “style”).
    6
    Alguns exemplos:
    <Selectores Universais: Pseudo-elemento:

    p>ITEL</p> button{
    <span>ITEL</span> font-size:30px;
    <h1>ITEL</h1> color:#fff;
    <h4>Itel</h4> background-color:#003E7B;
    box-shadow:0px 0px 5px silver;
    **{ border-radius:10px;
    font-weight: 700px; }
    text-decoration- line:underline; button:hover{
    } /* todos os elementos terão essas background-color:#003E;
    propriedades */ }

    Estado antes do click Estado depois do click


    Anotação
     
    Tal como em HTML, também é possivel fazer anotações em um código CSS, proporcionando uma melhor
    compreensão do código ou até mesmo permitindo uma localização mais rapidada a certas regras CSS.
    A sintaxe de uma anotação em CSS é composta de uma barra (/) seguida de dois asteriscos (**) e porfim
    coloca-se uma outra barra para se encerrar o comentário. O texto do comentário deve ser colocado
    entre os asteriscos.
    Ex:
     
    /* Estilos gerais da página
    -------------------------------*/
    body{
    margin:0; background:#EEEEEE;
     
    /* Estilos de class bIoco_texto
    ------------------------------------*/
     
    bloco_texto( font-family:Arial; font-size:16px;
    font-weight:bold;
    text-align:justify;
    8
    Herança
     
    A cascata do CSS, significa justamente a possibilidade de elementos filhos herdarem características de
    estilização de elementos superiores, estas definidas por suas propriedades, que podem ou não passar aos
    seus descendentes seus valores.
    Simplificando, as alterações que forem feitas em uma tag pode ou afeta todos os elementos no seu interior,
    para alterar, terá que se fazer uma alteração especializada do elemento ou tag interna.
    Ex:

    <body>
    <p>Turma A2 exemplo</p>
    <h2>Exemplo Turma A2</h2>
    <span>A2 Turma Exemplo</span>
    <body>
     
    /*CSS*/
     
    body{
    font-weight:700;
    color:blueviolet;
    }
    Conclusão
     
    Com a execução deste trabalho concluímos que os temas desenvolvidos anteriormente são
    essenciais para o desenvolvimento de sites utilizando as regras css corretamente, de
    forma eficiente e esclarecem como a atribuição de estilo funcion.
    OBRIGADO!!!

    13

    Você também pode gostar