Exercicios - Estruturas de decisão

           Exercícios propostos               

1. Em uma escola, a média final é dada pela média aritmética de três notas. E a mesma tem o seguinte esquema de avaliação.

Media	Situção do aluno
0 – 4.9	Recuperação
5 – 6.9	Admitido/prova final
7 – 10	Dispensado

                               

2. Desenvolva um programa que a partir da entrada das três notas mostre a situação do aluno. No caso do aluno em recuperação e admitido/prova final, mostre também quanto o aluno irá precisar para passar. No caso da recuperação a nota necessária para passar é dada por 10 – Média + 2 e na prova final é dado por 10 – Média.

3. Em uma loja de CD´s existem apenas quatro tipos de preços que estão associados a cores. Assim os CD´s que ficam na loja não são marcados por preços mas sim por cores.

    a. Desenvolva o algoritmo que a partir da entrada da cor o software mostre o preço. A loja está atualmente com a seguinte tabela de preços.

Cor	Preço
Verde	10,00
Azul	20,00
Amarelo	30,00
Vermelho	40,00

4.  Desenvolva um programa capaz e encontrar o maior dentre 4 números inteiros quaisquer dados pelo teclado.

5. Desenvolva um programa capaz de verificar se um número inteiro qualquer, dado como entrada, é par ou impar.

6. Determine o salário bruto e Liquido de cada funcionário de uma Escola tendo em conta que o, os Engenherosauferem 10.900 Mt/h, Doutores 15.400 Mt/h e Técnico 5.000 Mt/h. 

7. A secretária de Meio Ambiente que controla o índice de poluição mantém 3 grupos que são altamente poluentes do meio ambiente. O índice de poluição aceitável varia de 0,05 até 0,25. Se o índice sobe para 0,3 as indústrias do 1º grupo são intimadas a suspenderem suas   actividades, se o índice crescer para 0,4 as indústrias do 1º e 2º grupo são intimadas a suspenderem suas actividades, se o índice atingir 0,5 todos os grupos devem ser notificados a paralisarem suas actividades. Faça um algoritmo que leia o índice de poluição medido e emita a notificação adequada aos diferentes grupos de empresas.

8. Preparar um programa para ler a base e a altura de um triângulo e imprimir a área (area = 0.5 * base * altura). Durante a preparação dos dados para este programa é possível que se cometa um erro e entrem valores negativos para a base ou a altura. Isto é indesejável, pois a saída impressa será negativa. Prever no programa a possibilidade de verificar valores negativos na entrada de dados. Se um valor negativo for fornecido, imprimir uma mensagem identificando este valor como a base ou a altura (isso permite corrigir o erro mais facilmente). Testar o programa cuidadosamente. Tomar cuidado no caso de ambos os valores serem negativos. Isso produziria uma área positiva e o erro não seria detectado.

9. Encontrar o dobro de um número caso ele seja positivo e o seu triplo caso seja negativo, imprimindo o resultado.

10. Desenvolva um programa que leia o valor de uma determinada compra e o código da forma de pagamento. Com base neste código, o programa deverá calcular e imprimir o valor a pagar, a forma de pagamento e o valor de cada parcela, se for o caso. 

de 1,	À vista, com 8% de desconto
2	À vista no cartão, 4% de desconto
3	Em 2x, preço normal sem juros
4	Em 4x, preço acrescido de 8%
Qualquer outro código	Opção inválida

11. Ler o comprimento dos três lados de um triângulo (a, b, c) e determinar o tipo de triângulo, com base nos seguintes casos:

    a) Se A >= B + C, nenhum triângulo é formado.

    b) SeA2 =B2 +C2 , é formado um triângulo retângulo.

    c) SeA2 >B2 +C2 , é formado um triângulo obtusângulo.

    d) SeA2 <B2 +C2 , é formado um triângulo acutângulo.

 Observações:

    A é o maior dos lados

    B e C são os outros dois lados

    Prever no programa a possibilidade de serem fornecidos dados negativos e indicar erro.

12. Ler um conjunto de quatro valores i, a, b, c, onde i é um valor inteiro e positivo e a, b, c, são

quaisquer valores reais distintos e os escreva. A seguir:

    Se i = 1 escrever os 3 valores a, b, c em ordem crescente.

    Se i = 2 escrever os 3 valores a, b, c em ordem decrescente.

    Se i = 3 escrever os 3 valores de forma que o maior valor entre a, b, c fica entre os outros 2

13. Escrever um programa que lê o instante do início e do término do jogo, ambos subdivididos em 2 valores distintos, a saber: horas e minutos. Calcular e escrever a duração do jogo, também em horas e minutos, considerando que o tempo máximo de duração de um jogo é de 24 horas  e que o jogo pode iniciar em um dia e terminar no dia seguinte.

14. Faça um programa que leia dois inteiros, que representam a idade e o tempo de contribuição de um trabalhador e informe se ele pode se aposentar ou não. Os critérios para aposentadoria são:

    • Ter pelo menos 65 anos de idade;

    • Ou ter trabalhado pelo menos 30 anos;

    • Ou ter pelo menos 60 anos e trabalhado pelo menos 25.

15. João resolveu configurar o seu celular para despertar em um determinado horário. Dados a hora e minuto que João configurou o celular e a hora e o minuto em que ele deseja que o celular toque, faça um programa que determine quantas horas e minutos faltam para que o celular de João dispare o alarme. Note que o horário programado para despertar pode estar no dia posterior ao da programação por João, por exemplo: João pode desejar que o celular toque às 17 horas, sendo que o momento em que ele configurou o despertador foi às 18h30, o que nos dá uma diferença de 22h30 horas.

16. Escreva um programa em C que peça ao usuário para inserir um ano e determine se ele é bissexto ou não

17. Escreva um programa em C que implemente uma calculadora simples. O programa deve pedir ao usuário para inserir dois números e um operador (+, -, *, /) e, em seguida, exibir o resultado da operação.

Read More

Estrutura de controle - sequencial e de Decisão

       ESTRUTURA DE CONTROLE          

As estruturas de controlo exercem um papel preponderante na criação de um programa, e independentemente da linguagem de programação utilizada as estruturas de controle é que determinam o fluxo da execução de um programa. Elas podem ser:

• Estruturas sequênciais
• Estruturas de decisão; 
• Estruturas de repetição. 

      Estrutura de controle sequencial
Nesse tipo de estrutura, o fluxo do programa é executada de forma sequencial e cada instrução é executado apenas uma única vez e após o termino da instrução anterior.

    Comando 1
    Comando 2
    Comando 3
       …
    Comando n

A sintaxe de um programa que obedece a estrutura sequencial é ilustrada acima. Numa programa que obedece uma estrutura sequencial podem existir n comandos e cada comando é executado após o comando anterior e é mantida a ordem de execução.

Características principais de um programa em com a estrutura sequencial:

• As instruções são executadas de forma sequencial;
• É mantida a ordem de execução das instruções e cada instrução é executada uma única vez e após o término da anterior.

Um exemplo de um programa sequencial em C é apresentado a seguir

Exemplo 1

#include <stdlib>;
int main{
        printf("Bem vindo ao Sistema \n");
        printf("Obrigado pela sua presença");
}

Como resultado de execução o programa ira exibir a seguinte mensagem:

Bem vindo ao sistema!
Obrigado pela sua presença

Neste exemplo temos um programa em C que exibe na tela duas mensagens sendo a primeira Bem vindo ao sistema e a segunda Obrigado pela sua presença. A ordem de exibição das mensagens satisfaz a ordem de execução do programa.

No exemplo a seguir também estamos perante o mesmo cenário em que o resultado da execução corresponde a ordem de execução do programa. 

   Exemplo 2:

    #include <stdlib>
    int main (){
          int n1, n2, s;
          printf(‘Introduz o primeiro número’);
          scanf("%d ",&n1);
          printf(‘Introduz o segundo númeroa’);
          scanf("%d ",&n2);
          s = n1 + n2;
          printf("A soma é igual %d : ",s);
     }

Programa que efectua a soma de dois números

Descrição do código linha por linha

1. Declaração de variáveis: São declaradas as variáveis n1, n2 e s para armazenar o primeiro valor, o segundo número e a soma respectivamente.
2. Recorre-se ao comando printf para exibibir a mensagem Introduz o primeiro número : e posisiona o cursor na linha seguinte
3. Recorrendo ao comando scanf Lê-se o primeiro número introduzido usando o teclado
4. Recorre-se ao comando printf para exibibir a mensagem Introduz o segundo número : e posisiona o cursor na linha seguinte graças a presença de \n
5. Lê o segundo número introduzido
6. Efectua-se a soma dos dois números e armazena se o resultado da execução passo a passo
7. Exibe a soma determinada na linha anterior e a mensagem A soma é igual.
8. Termina a execução.

            Estrutura de decisão            

Nem sempre que as situações da vida são lineares, em várias situações nós precisamos tomar decisões que dependem da satisfação de determinadas condições. Por exemplo, num dia de sol com uma temperatura acima de 35º C para definirmos a nossa agenda para o final de semana, tipo de roupa a usar, depende da temperatura que se faz sentir, se a temperatura for abaixo de zero graus não fará sentido usarmos roupa de verão.

Em uma estrutura de decisão pode existir uma condição ou várias que definem o fluxo de execução da instrução ou conjunto de instruções, mas a execução de uma determinada instrução depende da satisfação de uma determinada condição podendo haver execução de uma instrução quando esta condição for verdadeira e outra instrução quando a condição for falsa. Nesse contexto uma condição é uma expressão lógica.

Na programação temos um cenário similar em que o fluxo da execução de uma programação depende da satisfação de uma dada condição podendo haver execução de uma instrução quando esta condição for verdadeira e outra instrução quando a condição for falsa.

As estruturas de decisão que podem definir fluxo de execução podem ser:

• De decisão simples
• Composta
• De selecção

            Estrutura de decisão simples            

Numa estrutura de decisão simples ou estrutura de desvio condicional simples, temos a execução de uma instrução ou conjunto de instruções apenas quando a expressão lógica for verdadeira. 

Sintaxe

  If (condição)
     Intrução;

A estrutura de decisão simples é representada pela seguinte sintaxe:

No exemplo 3 temos uma estrutura de decisão simples que exibe uma mensagem Aprovado quando o valor da média é superior a 10.

Exemplo 3

    #include <stdio.h> 
    int main (){
        float t1, t2, media;
        printf("Introduz o valor de teste1 e teste 2");
        scanf("%f, %f ",&t1,&t2);
        media = (t1 + t2)/2
        If (media >10) 
        printf("Aprovado");
    } 

          Estrutura de decisão composta          

Numa estrutura de decisão composta ou estrutura de desvio condicional composta, o resultado da execução depende da avaliação da expressão lógica. Se a expressão lógica for verdadeira, uma instrução ou conjunto de instruções serão executados e caso a avaliação da mesma expressão for falsa(caso contrário), uma instrução ou conjunto de instruções serão executados. 

A estrutura de decisão composta é representada pela seguinte sintaxe:

Sintaxe:

      If (condição) {
          Intrução 1

      }else{

          Intrução 2

      }
No exemplo 2 temos uma estrutura de decisão composta na qual é avaliada a media, e se a media for maior que 10 será exibida a mensagem Aprovado e caso contrário é exibida a mensagem Reprovado.

Exemplo 4

            #include <stdio.h>
         int main (){
             float t1, t2, media;
             printf("Introduz o valor de teste1 e teste 2");
             scanf("%f, %f ",&t1,&t2);
             media = (t1 + t2)/2
             If (media >10) {
                printf("Aprovado");
             else
                printf("Reprovado" );
          }

          Estrutura de decisão múltipla          

Numa estrutura de decisão múltipla, o resultado da execução depende da avaliação da expressão lógica e podem existir inúmeras condições. A primeira condição é antecedida por um if, e as restantes por um else if. Se a expressão lógica for verdadeira, uma instrução ou conjunto de instruções serão executados e caso a avaliação da mesma expressão for falsa(caso contrário), uma instrução ou conjunto de instruções serão executados.  

A estrutura de decisão múltipla é representada pela seguinte sintaxe:

Sintaxe:

      If (condição 1) {
          Intrução 1;

      }else if(condição 2){

          Intrução 2;

      }else if(condição 3){

                        Intrução 3;

      }       ...

       else if (condição n){

          instrução n;

      }

No exemplo 5 temos uma estrutura de decisão múltipla na qual é avaliada a media, e se a media for maior ou igual a 14 será exibida a mensagem Dispensado, se a média for maior ou igual a 10 será exibida a mensagem Admitido e caso contrário é exibida a mensagem Excluído.

Exemplo 5:

         #include <stdio.h>
         int main (){
             float t1, t2, media;
             printf("Introduz o valor de teste1 e teste 2");
             scanf("%f, %f ",&t1,&t2);
             media = (t1 + t2)/2
             If (media >=14) {
                printf("Dispensado");
             }else If (media >=10) {

                printf("Admitido" );

             }else{

                printf("Excluído" );

             }

          } 



            Comando Switch case               

Uma instrução switch permite que uma variável seja testada quanto à igualdade em relação a uma lista de valores. Cada valor é chamado de caso, e a variável que está sendo activada é verificada para cada caso de switch.

Este comando permite nos evitar o recurso ao if, fornecendo nós o switch como um comando alternativo. É uma forma de reduzir a complexidade de vários if … else encadeados.
É muito utilizado, principalmente para uso em estruturas de menu.

Sintaxe

     switch(expressao) { 

           case (constante) : 

                 instrução 1; 

                 break; // opcional 

           case (constante) : 

                 instrução 2; 

                 break; // opcional 

          case (constante) : 

                 instrução 3; 

                 break; // opcional

               ...

          case (constante) : 

                 instrução n; 

                 break; // opcional

          default : // opcional

                 instruções;

      }

As regras a seguir se aplicam a uma instrução switch case:

• A expressão usada em uma instrução switch deve ter um tipo inteiro ou char ou ser de um tipo de classe em que a classe tenha uma única função de conversão para um tipo integral ou enumerado.
• pode ter qualquer número de instruções case em um switch. Cada case é seguido pelo valor a ser comparado e dois pontos.
• A constante em um case deve ser o mesmo tipo de dados que a variável definida no switch e deve ser uma constante ou literal.
• Quando a variável que está sendo considerada é igual a um case, as instruções que seguem o case serão executadas até que uma declaração de interrupção seja alcançada.
• Quando uma instrução de interrupção é alcançada, o switch termina e o fluxo de controle salta para a próxima linha após a instrução do switch.

Nem todo case precisa conter uma interrupção. Se nenhuma interrupção aparecer, o fluxo de controle avança para os casos subsequentes até que uma interrupção seja atingida.

Uma instrução de switch pode ter um case predefinido opcional, que deve aparecer no final do switch. O case padrão pode ser usado para executar uma tarefa quando nenhum dos casos for verdadeiro. Nenhuma interrupção é necessária no case predifinido.

No exemplo a seguir é ilustrado um programa que verifica o dia da semana, o utilizador digita um número no intervalo de 1 a 7 e o programa vai retornar o dia da semana equivalente ao número.

Exemplo 6:

       #include <stdio.h>

       int main (void ){

           int valor;

           printf ("Digite um valor de 1 a 7: ");

           scanf("%d", &valor);

   

           switch ( valor ){

                   case 1 :

                   printf ("Domingo\n");

                   break;

                   case 2 :

                   printf ("Segunda\n");

                   break;

                   case 3 :

                   printf ("Terça\n");

                   break;

                   case 4 :

                   printf ("Quarta\n");

                   break;

                   case 5 :

                   printf ("Quinta\n");

                   break;

                   case 6 : 

                   printf ("Sexta\n");

                   break;

                   case 7 :

                   printf ("Sabado\n");

                   break;

                   default :

                   printf ("Valor invalido!\n");

            }

       return 0;

       }

Exercicios de aplicação

Read More

Lecture 5 - HTML Responsive Site Design

          Site responsivo                     

Um site responsivo, é um site que se adapta automaticamente à tela do dispositivo usado pelo utilizador. Isso é, não importa se o utilizador esta aceder o site recorrendo a desktop, notebook, Ipad ou smartphone, o site vai sempre se encaixar no tamanho do visor do aparelho para facilitar a leitura e visualização do conteúdo da página. A proposta é adaptar as dimensões dos componentes do site para que se moldem ao tamanho de cada tela, melhorando a usabilidade do site.

Como desenvolver um Site exclusivo para Mobile?

A abordagem que trataremos no curso é a de fazer adaptações na mesma página para ser compatível com CSS3. Como faremos caso queiramos fazer um Site exclusivo para mobile? Do ponto de vista de código, é a abordagem mais simples: basta fazer sua página levando em conta que a tela será pequena (em geral, usa-se width de 100% para que se adapte à pequenas variações de tamanhos de telas entre smartphones diferentes). Uma dificuldade estará no servidor para detectar se o utilizador está vindo de um dispositivo móvel ou não, e redirecioná-lo para o lugar certo. Isso costuma envolver código no servidor que detecte o navegador do utilizador usando o User-Agent do navegador. É uma boa prática também incluir um link para a versão normal do Site caso o utilizador não queira a versão móvel.

 Configurando o Viewport

Ao criar páginas responsivas, adicione o seguinte elemento <meta> em todas as suas páginas:

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 


Isso definirá a janela de exibição da sua página, que fornecerá ao navegador instruções sobre como controlar as dimensões e a escala da página.

os smartphones modernos têm telas grandes e resoluções altas, justamente para nos permitir ver sites complexos feitos para Desktop. A tela de um iPhone 4S por exemplo é 960px por 640px. Celulares Android já chegam a 1280px, o mesmo de um Desktop. Ainda assim, a experiência desses celulares é bem diferente dos Desktops. 1280px em uma tela de 4 polegadas é bem diferente de 1280px em um notebook de 13 polegadas. A resolução muda. Celulares costumam ter uma resolução em dpi bem maior que Desktops. Como arrumar nossa página? Os smartphones sabem que considerar a tela como 1280px não ajudará o usuário a visualizar a página otimizada para telas menores. Há então o conceito de device-width que, resumidamente, representa um número em pixels que o fabricante do aparelho considera como mais próximo da sensação que o usuário tem ao visualizar a tela. 

Imagens responsivas

Imagens responsivas são imagens que se adaptam perfeitamente a qualquer tamanho de navegador e do dispositivo. Para o efeito é necessário recorrer a propriedade width Se a propriedade largura do CSS estiver definida como 100%, a imagem será responsiva e aumentará e diminuirá a escala.

Exercícios: adaptações para mobile

1) Usando a página HTML index.html e estilo.css efectue adaptações de modo a tornar a página responsiva
Declare a tag meta com o viewport dentro da página index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 Pode escrever o CSS de adaptação em um novo arquivo, chamado mobile.css. Crie esse arquivo e o importe no head do index.html (Após os imports já existentes). Use media queries para que ele só seja aplicado em resoluções de no máximo 320px (celulares comuns).

<link rel="stylesheet" href="css/mobile.css" media="(max-width: 320px)">

  2) Nossa página hoje tem o tamanho de 940px e é centralizada (com o uso do seletor .container). Para deixarmos a página mais flexível nos celulares, precisamos remover esse tamanho absoluto e colocar algum que faça mais sentido em telas menores, onde queremos ocupar quase que a tela toda (deixando apenas uma pequena margem). Para isso, edite mobile.css:  

 .container {
             width: 96%;
           }

Já é possível redimensionar a tela para 320px e ver que o site começa a se adaptar. Mas ainda há bastante trabalho pela frente. 

3) Próximo passo: vamos ajustar os elementos do topo da página. Vamos centralizar o logotipo na página, esconder as informações (secundárias) sobre a Sacola e ajustar o menu para ficar abaixo do logo e não mais posicionado à direita.

 header h1 { text-align: center; } 
 header h1 img { max-width: 50%; }
 .sacola { display: none; } 
 .menu-opcoes { position: static; text-align: center; } 

Lembre-se que, anteriormente, nosso menu estava com position:absolute para ficar a direita do logo. Agora, queremos deixá-lo fluir abaixo do logo; bastou restaurar o position:static. Teste novamente com o navegador redimensionado. 

 4) Ajustamos a posição do menu do topo e, automaticamente, os links se 

posicionaram formando duas linhas. Mas repare como estão próximos uns dos outros. Será que o nosso usuário consegue clicar neles usando seu celular? Vamos aumentar o espaço entre eles:

.menu-opcoes ul li { display: inline-block; margin: 5px; } 

5) Ajuste a seção de busca, o menu da esquerda e a imagem de destaque. Como eles são muito grandes, em mobile, é melhor renderizarmos um em cima do outro sem quebrar em colunas. Vamos ocupar 100% da tela com o menu e a busca. A imagem de destaque deverá ser redimensionada para ocupar 100% da tela e não estourar o tamanho. 

        .busca, 

      .menu-departamentos, 

      .destaque img { 

            margin-right: 0;

            width: 100%; 

           } 

Teste esse passo no navegador redimensionado. 

6) Falta apenas ajustarmos os painéis de destaques de produtos. Por ora, eles estão com tamanhos absolutos ocupando metade da tela e mostrando 6 elementos, com 3 por linha. Vamos manter o painel com 3 elementos por linha, mas vamos fazer os dois painéis encaixarem um em cima do outro. Para isso, basta tirarmos a restrição de largura do painel para ele ocupar a tela toda.

         .painel { 

          width: auto; 

      }

Com relação aos produtos nos painéis. Vamos precisar redimensioná-los para encaixar 3 em cada linha. Uma boa maneira é colocar cada elemento com 30% do painel, totalizando 90%, e deixando espaço para as margens. Já a imagem interna de cada produto deverá ocupar 100% do seu quadrado (o que ajustamos).      

          .painel li { 

           width: 30%; 

      } 

    

      .painel img { 

        width: 100%; 

     } 

7) O que acontece em resoluções maiores de 320px? Nosso design volta ao padrão de 940px e ficamos com scroll horizontal. A maioria dos smartphones tem 320px de largura, mas nem todos, e nosso layout não se ajusta bem a esses outros. Até mesmo aqueles com 320px de largura, ao girar o aparelho em modo paisagem, a resolução é maior (480px num iPhone e mais de 500px em muitos Androids). O melhor era que nosso layout adaptável fosse usado não só em 320px mas em diversas resoluções intermediárias antes dos 940px que estabelecemos para o site Desktop. Podemos ajustar nossa media query para aplicar o CSS de adaptação a qualquer tamanho de tela menor que os 940px do Desktop (ou seja, no máximo, 939px): 

<link rel="stylesheet" href="css/mobile.css" media="(max-width: 939px)">

 Teste, novamente, redimensionando o navegador para várias resoluções diferentes. 

Repare que, como fizemos um layout fluido, baseado em percentagens, os elementos se ajustam a diferentes resoluções sem esforço. É uma boa prática usar percentagens e, sempre que possível, evitar o uso de valores absolutos em pixels. 

8) (opcional) Se você fez os exercícios opcionais anteriores do controle de pause/play no banner, precisamos reposicionar o controle de pause/play: 

                    .play, .pause { 

                          top: auto; 

                          right: auto; 

                          left: 10px; 

                          bottom: 10px; 

          } 

Read More

Lecture 4 - CSS Regras

             Lecture 04 – Precedencia            

As vezes nos deparamos com situações em que tentamos aplicar um estilo CSS em um elemento e não funciona e ficamos preocupados. Isso as vezes acontece porque aplicamos dois ou mais  estilos ao mesmo elemento, e CSS acaba dando prioridade a um determinado elemento. No entanto como saber qual é o estililo que tem mais precedência. O CSS utiliza três regras principais: Cálculo de Especificidade, herança e cascata.

     «« Cálculo de Especificidade     

Considere que o seu documento html contém um parágrafo com uma classe "loja"  aplicando as seguintes regras de css:

p {

    font-size: 12 px;

}

p.loja {

     font-size: 14px;

 }

Qual será o estilo a ser aplicado? O tamanho do texto no parágrafo será 14px ou 12px?

 Para este cenário, será aplicado 14px. A segunda linha de css (p.loja) é mais específica que a primeira quando se trata de seu parágrafo de classe = "loja". No entanto, às vezes a especificidade não é tão fácil de identificar.

Por exemplo, considere o seguinte html e css

<div id = "barra lateral">

<p class = "loja"> texto aqui </p>

</div>

div p.loja {font-size: 14px}

#sidebar p {font-size: 12px}

A primeira linha de css pode parecer mais específica à primeira vista, mas na verdade é a segunda linha acima que seria mais específica ao tamanho da fonte do seu parágrafo. Por que?

Para responder à pergunta, precisamos considerar as regras de especificidade.

A especificidade é calculada contando vários componentes do seu css e expressando-os de uma forma (a, b, c, d). Isso ficará mais claro com um exemplo, mas primeiro os componentes.

•        Elemento, pseudo elemento: d = 1 - (0,0,0,1)

•        Classe, pseudo classe, atributo: c = 1 - (0,0,1,0)

•        Id: b = 1 - (0,1,0,0)

•        Estilo embutido: a = 1 - (1,0,0,0)

Um ID é mais específico que uma classe é mais específico que um elemento.

Você calcula a especificidade contando cada uma das opções acima e adicionando 1 a, b, c ou d. Também é importante observar que 0,0,1,0 é mais específico que 0,0,0,15. Vejamos alguns exemplos para tornar o cálculo mais claro.

• p: 1 elemento - (0,0,0,1)

• div: 1 elemento - (0,0,0,1)

• #sidebar: 1 id - (0,1,0,0)

• barra lateral div #: 1 elemento, 1 id - (0,1,0,1)

• div # barra lateral p: 2 elementos, 1 id - (0,1,0,2)

• div # sidebar p.bio: 2 elementos, 1 classe, 1 id - (0,1,1,2)

Vamos ver novamente o exemplo acima

div p.loja {tamanho da fonte: 14px} - (0,0,1,2)

#sidebar p {font-size: 12px} - (0,1,0,1)

O segundo tem maior especificidade e, portanto, tem precedência.

Um último ponto antes de seguirmos em frente. A importância supera a especificidade. Quando você marca uma propriedade css com! Importante, você substitui as regras de especificidade e, portanto,

div p.loja {font-size: 14px !important}

#sidebar p {font-size: 12px}

significa que a primeira linha de css acima tem precedência em vez da segunda. ! important ainda é principalmente um truque em torno das regras básicas e é algo que você nunca deve precisar se entender como as regras funcionam.

         Herança       

Os elementos herdam estilos de seu container. Se você definir a tag body para usar color: red, o texto de todos os elementos dentro do corpo também ficará vermelho, a menos que seja especificado de outra forma.

Porém, nem todas as propriedades de css são herdadas. Por exemplo, margens e preenchimentos. Se você definir uma margem ou preenchimento em uma div, os parágrafos dentro dessa div não herdarão a margem e o preenchimento que você definir na div. O parágrafo usará a margem e o preenchimento padrão do navegador até que você declare o contrário.

Você pode definir explicitamente uma propriedade para herdar estilos do container. Por exemplo, você pode declarar

   

    p {margin: inherit; padding: inherit}

       Cascata         

No nível mais alto, a cascata é o que controla toda a precedência de css e funciona da seguinte maneira.

1. Encontre todas as declarações css que se aplicam ao elemento e propriedade em questão.
2. Classifique por origem e peso. Origem refere-se à fonte da declaração (estilos de autor, estilos de usuário, padrões do navegador) e peso refere-se à importância da declaração. (o autor tem mais peso que o usuário que tem mais peso que o padrão.! importância tem mais peso que as declarações normais)
3. Calcular especificidade
4. Se duas regras são iguais em todas as opções acima, a última declaração tera precedência. CSS incorporado no html sempre tem mais precedência, mais que as folhas de estilo externas, independentemente da ordem no html.

         Exercicios         

1.      Considere o seguinte trechos de código CSS:     p {cor: azul}, p {cor: laranja}
Aplicando CSS, o que você pode prever sobre a cor do parágrafo?

  2. Considere o código a seguir, o mesmo que vimos acima:

p         p {  color: blue; font-size: 15px; color: green;}

      
     3. Considere o seguinte HTML e CSS. .para é a classe do elemento p.
                    .para {cor: laranja} 
                     p {cor: verde}

                  Qual é a côr que sera aplicado no parágrafo. 

             4 . Considerando o trecho CS:

                     # p1 {cor: verde}

                     .para {cor: amarelo}

                 Mais uma vez, decida qual cor será dada ao parágrafo.

             5 .  Considere o código HTML e CSS abaixo:

                   <p id = "p1" class = "para" style = "color: blue"> Um parágrafo </p>     

          p {cor: laranja} 

                    Qual é a formatação que será aplicada?

              

               6. Crie uma página HTML e com base nas regras CSS aqui abordadas(Cálculo de especificidade, Herança e Cascata), efectue a estilização da página .

           Referencias          

  

  https://vanseodesign.com/css/css-specificity-inheritance-cascaade/

Read More