As folhas de estilo em cascata (CSS) permitem que você transforme a aparência de suas páginas da web. De fontes e cores a espaçamento e layout geral, todos os tipos de ferramentas de design estão ao seu alcance. Embora CSS seja uma linguagem complicada em sua totalidade, existem apenas dois conceitos básicos que você precisa entender para começar.
Tudo começa identificando exatamente qual parte da página você deseja estilizar.
Um arquivo CSS contém uma série de regras que descrevem como um arquivo HTML deve ser formatado. Cada regra consiste em duas partes: o que estilizar e como estilizar. A primeira parte é controlada por uma série de termos conhecidos como “seletores”.
Os exemplos neste artigo incluem declarações de estilo, mas eles não são o foco: os próprios seletores são.
Historicamente, havia três níveis de seletor CSS (ou versões) com vários graus de suporte do navegador. Em 2020, de acordo com Can I Use , todos eles estão disponíveis para mais de 99 por cento dos usuários em todo o mundo.
O nível 1 introduziu os quatro tipos fundamentais de seletores que cobrem um grande número de casos, ainda hoje.
| Padrão | Fósforos |
|---|---|
E |
todos os elementos E |
.c |
todos os elementos com class = "c" |
#myid |
o elemento com id = "myid" |
E F |
um elemento F dentro de um elemento E |
| Pseudo-classes | |
E:link |
um hiperlink para uma página que não foi visitada anteriormente |
E:visited |
um hiperlink para uma página que já foi visitada |
E:active |
um hiperlink que está atualmente selecionado |
| Pseudo-elementos | |
E::first-line |
a primeira linha formatada de um elemento E |
E::first-letter |
a primeira letra formatada de um elemento E |
O seletor mais simples é o “seletor de tipo”. Ele tem como alvo todas as instâncias de um elemento, como um parágrafo ou texto em negrito:
p { margin-bottom: 0; } b { font-family: sans-serif; }
O atributo class permite que mais semânticas sejam adicionadas a um elemento HTML, como um tipo específico de parágrafo. Esses elementos podem ser selecionados em CSS da seguinte maneira:
.intro { font-weight: bold; }
Este seletor corresponderia a:
…
Mas observe que também corresponderia a:
…Se você deseja que ele se aplique apenas a parágrafos de introdução, pode combinar o seletor de tipo e o seletor de classe:
p.intro { font-weight: bold; }
O atributo de id HTML deve ser único dentro de um documento, por exemplo, se você tiver:
…
Esse deve ser o único elemento com um id de “conteúdo”. Um seletor de ID permite que você direcione esse elemento específico em um documento:
#contents { color: #333; }
A rigor, um “combinador”, porque esse seletor trata do espaço entre dois outros. HTML é hierárquico, conforme explicado em nossa visão geral do DOM . Um seletor descendente permite que um elemento seja identificado por seu contexto dentro de outro elemento:
table b { font-weight: normal; }
Os pseudo seletores têm como alvo classes ou elementos que não existem explicitamente, mas são disponibilizados de qualquer maneira. Pense neles como bônus de conteúdo especial:
p::first-line { text-transform: uppercase; }
Use uma vírgula para combinar seletores em uma lista se desejar aplicar o mesmo conjunto de regras a cada um. Ao invés de:
th { padding: 1em; } td { padding: 1em; }
Você pode escrever:
th, td { padding: 1em; }
Uma folha de estilo é uma série de regras que usam um seletor para corresponder a um elemento, mas o que acontece quando mais de uma regra corresponde a um determinado elemento? O comportamento resultante é regido pela "especificidade" que define qual regra é usada em um caso como:
p.intro { color: black; } p { color: gray; }
Nesses casos, a regra que tem prioridade é definida por sua especificidade, da seguinte forma:
Ao calcular a especificidade, cada nível é considerado apenas se dois seletores tiverem a mesma pontuação no nível superior, então “#contents” é mais específico do que “article.news p.author.special” porque o anterior “ganha” nos seletores de ID.
A próxima revisão dos seletores CSS introduziu os seletores de atributos, expandiu em pseudo classes e pseudo-elementos, e adicionou dois novos combinadores.
| Padrão | Fósforos |
|---|---|
* |
qualquer elemento |
E > F |
um elemento F filho de um elemento E |
E + F |
um elemento F imediatamente precedido por um elemento E |
| Seletores de atributos | |
E[foo] |
um elemento E com um atributo "foo" |
E[foo="bar"] |
um elemento E cujo atributo "foo" é exatamente "bar" |
E[foo~="bar"] |
um elemento E cujo atributo "foo" é uma lista de valores separados por espaços em branco, um dos quais é "bar" |
E[foo|="en"] |
um elemento E cujo atributo "foo" tem uma lista de valores separados por hífen começando com "en" |
| Pseudo-classes | |
E:first-child |
um elemento E, primeiro filho de seu pai |
E:lang(fr) |
um elemento do tipo E na linguagem "fr" |
| Pseudo-elementos | |
E::before |
conteúdo gerado antes do conteúdo de um elemento E |
E::after |
conteúdo gerado após o conteúdo de um elemento E |
O “*” corresponde a qualquer elemento. Muitas vezes não é tão útil, mas se quiser redefinir as margens padrão, por exemplo, você pode fazer isso:
* { margin: 0; }
Os seletores de atributos permitem que os estilos sejam direcionados de forma muito específica, filtrados por um atributo de elemento:
a[title] { text-decoration: underline dotted; }
Semelhante ao combinador descendente, mas este corresponde apenas aos filhos imediatos, não aos descendentes mais abaixo na árvore. Por exemplo, “ul> li” corresponderá apenas ao texto da “Seção 1” aqui, e não à “Seção 1.1”:
Section 1
Section 1.1Section 1.2h1 + p { font-weight: bold; }
Freqüentemente útil para controlar margens, ou um parágrafo introdutório sem uma classe específica, este seletor combina um elemento somente se ele imediatamente segue outro. No exemplo, apenas o primeiro parágrafo aqui será correspondido, não o segundo:
Contents
some extra text
Introductory paragraph
Following paragraph
Observe que esse seletor considera apenas os elementos - não o texto - ao decidir qual é o próximo irmão.
Algumas propriedades CSS herdam seu valor de um elemento ancestral. Na prática, isso significa - por exemplo - que definir a face da fonte do elemento “corpo” significa que cada parágrafo, tabela, etc. também usa a mesma face da fonte.
Claro, isso é exatamente o que você esperaria, mas considere uma propriedade que não herda: “margem”, por exemplo. Você não gostaria que cada parágrafo individual ou pedaço de texto em negrito tivesse a mesma margem de todo o documento.
Relacionado: Exemplos de código CSS simples que você pode aprender em 10 minutos
Uma boa regra é direcionar os elementos da maneira mais geral que fizer sentido - não direcione todos os elementos individuais quando um simples seletor de “corpo” for suficiente.
Muitas outras pseudo classes foram adicionadas neste nível, junto com alguns seletores de atributo e um novo combinador.
| Padrão | Fósforos |
|---|---|
E ~ F |
um elemento F precedido por um elemento E |
| Seletores de atributos | |
E[foo^="bar"] |
um elemento E cujo atributo "foo" começa com a string "bar" |
E[foo$="bar"] |
um elemento E cujo atributo "foo" termina com a string "bar" |
E[foo*="bar"] |
um elemento E cujo atributo "foo" contém a substring "bar" |
| Pseudo-classes | |
E:root |
um elemento E, raiz do documento |
E:nth-child(n) |
um elemento E, o enésimo filho de seu pai |
E:nth-last-child(n) |
um elemento E, o enésimo filho de seu pai, contando a partir do último |
E:nth-of-type(n) |
um elemento E, o enésimo irmão de seu tipo |
E:nth-last-of-type(n) |
um elemento E, o enésimo irmão de seu tipo, contando a partir do último |
E:last-child |
um elemento E, último filho de seu pai |
E:first-of-type |
um elemento E, primeiro irmão de seu tipo |
E:last-of-type |
um elemento E, último irmão de seu tipo |
E:only-child |
um elemento E, filho único de seu pai |
E:only-of-type |
um elemento E, único irmão de seu tipo |
E:empty |
um elemento E que não tem filhos (incluindo nós de texto) |
E:target |
um elemento E sendo o destino do URI de referência |
E:enabled |
um elemento E da interface do usuário que está habilitado |
E:disabled |
um elemento E da interface do usuário que está desativado |
E:checked |
um elemento E da interface do usuário que é verificado |
E:not(s) |
um elemento E que não corresponde ao seletor simples s |
Você pode selecionar elementos com um atributo que começa com um dado valor: a[href^="https:"], termina com um dado valor: img[src$=".gif"]ou contém um valor: a[*="value"].
As pseudo classes adicionais incluem “: último-filho”, “: vazio” (para corresponder a um elemento sem conteúdo) e “: verificado” que corresponde a um elemento como uma entrada de caixa de seleção, mas apenas quando está marcada.
Semelhante ao Combinador de Irmãos Adjacentes do Nível 2, ele corresponde a qualquer irmão que vier depois do outro, não apenas o próximo:
h1 ~ p { font-size: 110%; }
Agora você sabe quase tudo que há para saber sobre como selecionar parte de uma página da Web usando CSS. Agora você está pronto para estilizar suas páginas com a grande variedade de propriedades CSS que cobrem tudo, desde cores até layout.
Crédito da imagem: Pankaj Patel / Unsplash
Embora você possa usar uma calculadora gráfica em seu computador, o interpretador da linguagem de programação Python pode funcionar como uma calculadora de mesa. É uma piada de corrida tão popular na comunidade Python que foi mencionada no tutorial oficial. Veja como você pode usar Python como calculadora.
Como programador, você deve enfrentar desafios para sobreviver e construir algumas maravilhas no campo de desenvolvimento ou programação. Portanto, se você está procurando aprender uma linguagem de programação avançada para aprimorar suas habilidades profissionais, Java é um dos melhores candidatos.
Aprender uma nova linguagem de programação como Python torna-se fácil se você tiver um roteiro abrangente detalhando quais conceitos aprender como um iniciante e como progredir ainda mais para alcançar o próximo marco. Mesmo os programadores intermediários devem freqüentemente revisar seus fundamentos para construir uma base sólida para si mesmos.
Hoje em dia, é prática comum construir um site ou aplicativo que ajusta sua interface de usuário dependendo do navegador ou do dispositivo. Existem duas abordagens para atingir esse objetivo. O primeiro envolve a criação de diferentes versões de seu site ou aplicativo para diferentes dispositivos. Mas é ineficiente e pode levar a erros imprevisíveis.
Trabalhar com números é parte integrante da programação. Cada linguagem de programação fornece suporte para manipular números de muitas maneiras diferentes. Neste artigo, você aprenderá como encontrar o número total de dígitos em um inteiro usando abordagens iterativas, baseadas em log e baseadas em string.
Os contêineres são altamente benéficos para o desenvolvimento, implantação e gerenciamento de software em um ambiente virtual. O Docker é útil no processo de conteinerização, mas não é a única plataforma disponível. Se você estiver procurando por alternativas ao Docker, não procure mais. Esta lista mostra algumas alternativas do Docker ricas em recursos e eficientes para usar em seu próximo projeto.
SQL vs. NoSQL: Qual é o melhor banco de dados para seu próximo projeto?
Incorporar serviços de terceiros em suas postagens do WordPress é uma maneira empolgante de cativar o interesse de um visitante. O conteúdo incorporado também fornece dicas visuais que tornam a digitalização mais fácil. O WordPress facilitou a adição desse tipo de conteúdo.
Node.js é um ambiente de tempo de execução JavaScript que permite executar JavaScript fora dos navegadores da web, tornando-o uma escolha popular para o desenvolvimento de todos os tipos de aplicativos. Parte de sua popularidade se deve à grande quantidade de pacotes NPM disponíveis para facilitar a experiência do desenvolvedor.
Solidity é a linguagem de programação usada por contratos inteligentes na blockchain Ethereum. É uma linguagem de programação orientada a objetos com tipagem estática.
Os emblemas do GitHub podem aumentar a legibilidade de um repositório, fornecendo aos usuários uma maneira rápida de capturar as métricas do repositório. Badges podem ser embutidos em seu README.md para esclarecer a importância e necessidade de seu projeto para outros desenvolvedores. Como resultado, os leitores têm uma ideia muito rápida do repositório, verificando os emblemas anexados.
Os dias comemorativos internacionais são uma boa forma de dar reconhecimento a questões sociais, dias históricos e respetivas carreiras. O Dia Internacional do Programador celebra o papel que os programadores desempenham para melhorar a vida cotidiana. O mundo civilizado em que vivemos é produto do trabalho árduo dos programadores.
Quer seja uma consulta de banco de dados ou resultados de operações matemáticas, o método de formato de string Python oferece uma maneira mais dinâmica e atraente de apresentar os resultados a um usuário.
No início deste ano, a Microsoft lançou a versão prévia do Visual Studio 2022 no mundo selvagem da programação. Esta é uma boa notícia! É um IDE extremamente popular, mas precisa de um ajuste ou talvez até mesmo uma revisão, dado o ritmo de mudança no ecossistema DevOps no qual ele prospera.
Métricas de software são medidas usadas para quantificar vários aspectos de seu software. Esses aspectos podem variar de custo, qualidade e eficiência da equipe de desenvolvimento.
Como um usuário do Windows, você provavelmente já se deparou com as palavras .NET Framework pelo menos uma vez. É uma estrutura de software desenvolvida pela Microsoft que permite criar e executar programas C #, C ++, F # e Visual Basic. A versão mais recente do .NET é 4.8, mas seu computador pode precisar de uma versão mais antiga do .NET (como .NET 3.5) para executar alguns aplicativos.
Se você é um desenvolvedor Python, pode se beneficiar muito com a variedade de estruturas disponíveis. Embora algumas estruturas sejam mais adequadas para grandes ecossistemas, outras se especializam em atender a objetivos de desenvolvimento específicos. Continue lendo para aprender os recursos básicos, usos e diferenças entre dois frameworks Python: Flask e CherryPy.
Muitos programadores adoram resolver problemas matemáticos complicados usando código. Ajuda a aguçar a mente e melhorar as habilidades de resolução de problemas. Neste artigo, você aprenderá a encontrar os menores e os maiores quadrados e cubos perfeitos de n dígitos usando Python, C ++ e JavaScript. Cada exemplo também contém uma saída de amostra para vários valores diferentes.
A execução do Python a partir do terminal costuma ser inevitável. No entanto, se você acabou de instalar o Python no Windows 10 pela primeira vez, executá-lo por meio do Terminal do Windows só será possível se for adicionado à variável de ambiente PATH do Windows.
A instrução if é a força motriz da programação lógica. Como resultado, um melhor domínio do Python é um acréscimo significativo às suas habilidades de programação em Python.
Embora você possa usar uma calculadora gráfica em seu computador, o interpretador da linguagem de programação Python pode funcionar como uma calculadora de mesa. É uma piada de corrida tão popular na comunidade Python que foi mencionada no tutorial oficial. Veja como você pode usar Python como calculadora.
Como programador, você deve enfrentar desafios para sobreviver e construir algumas maravilhas no campo de desenvolvimento ou programação. Portanto, se você está procurando aprender uma linguagem de programação avançada para aprimorar suas habilidades profissionais, Java é um dos melhores candidatos.
Aprender uma nova linguagem de programação como Python torna-se fácil se você tiver um roteiro abrangente detalhando quais conceitos aprender como um iniciante e como progredir ainda mais para alcançar o próximo marco. Mesmo os programadores intermediários devem freqüentemente revisar seus fundamentos para construir uma base sólida para si mesmos.
Hoje em dia, é prática comum construir um site ou aplicativo que ajusta sua interface de usuário dependendo do navegador ou do dispositivo. Existem duas abordagens para atingir esse objetivo. O primeiro envolve a criação de diferentes versões de seu site ou aplicativo para diferentes dispositivos. Mas é ineficiente e pode levar a erros imprevisíveis.
Trabalhar com números é parte integrante da programação. Cada linguagem de programação fornece suporte para manipular números de muitas maneiras diferentes. Neste artigo, você aprenderá como encontrar o número total de dígitos em um inteiro usando abordagens iterativas, baseadas em log e baseadas em string.
Os contêineres são altamente benéficos para o desenvolvimento, implantação e gerenciamento de software em um ambiente virtual. O Docker é útil no processo de conteinerização, mas não é a única plataforma disponível. Se você estiver procurando por alternativas ao Docker, não procure mais. Esta lista mostra algumas alternativas do Docker ricas em recursos e eficientes para usar em seu próximo projeto.
SQL vs. NoSQL: Qual é o melhor banco de dados para seu próximo projeto?
Incorporar serviços de terceiros em suas postagens do WordPress é uma maneira empolgante de cativar o interesse de um visitante. O conteúdo incorporado também fornece dicas visuais que tornam a digitalização mais fácil. O WordPress facilitou a adição desse tipo de conteúdo.
Node.js é um ambiente de tempo de execução JavaScript que permite executar JavaScript fora dos navegadores da web, tornando-o uma escolha popular para o desenvolvimento de todos os tipos de aplicativos. Parte de sua popularidade se deve à grande quantidade de pacotes NPM disponíveis para facilitar a experiência do desenvolvedor.
Solidity é a linguagem de programação usada por contratos inteligentes na blockchain Ethereum. É uma linguagem de programação orientada a objetos com tipagem estática.
