Seletores personalizados

Anotações relacionada a aula 15

1. Indicar Fontes em CSS: Sintaxe e Tipos

Para especificar fontes em CSS, utiliza-se a propriedade font-family. A sintaxe básica envolve listar um ou mais nomes de fontes, separados por vírgula. O navegador tentará usar a primeira fonte da lista; se não estiver disponível no sistema do usuário, tentará a próxima, e assim por diante.

Exemplo:

body {
          /* Tenta usar Open Sans, se não der, tenta Arial, se não der, usa qualquer sans-serif disponível */
          font-family: "Open Sans", Arial, sans-serif;
        }
        
        h1 {
          /* Tenta usar Merriweather, se não der, tenta Georgia, se não der, usa qualquer serifada */
          font-family: Merriweather, Georgia, serif;
        }

2. Teoria das Cores no Design de Websites e Melhores Práticas

A teoria das cores estuda como as cores interagem e como podem ser combinadas para criar harmonia visual e transmitir mensagens. No design de websites, ela é crucial para a estética, usabilidade, acessibilidade e identidade da marca.

3. Medidas Absolutas em CSS (cm, mm, in, px, pt, pc)

Medidas absolutas definem um tamanho fixo, que não depende de outros elementos ou do tamanho da janela do navegador.

Por que usar (com cautela): px é útil quando se precisa de um controle preciso sobre o tamanho de elementos que não devem mudar, como bordas finas ou ícones com dimensões exatas. As unidades físicas são mais adequadas para definir estilos de impressão.

4. Medidas Relativas em CSS (em, ex, rem, vw, vh, %)

Medidas relativas têm seu tamanho definido em relação a outro valor, tornando-as ideais para designs responsivos e acessíveis.

Benefícios: Criação de layouts fluidos, adaptáveis a diferentes tamanhos de tela (responsividade) e que respeitam as preferências de tamanho de fonte do usuário (acessibilidade).

5. Recomendações da W3C sobre Fontes e Unidades

O W3C (World Wide Web Consortium), através de suas especificações (CSS) e diretrizes (WCAG), estabelece padrões e boas práticas:

Em resumo, o W3C promove o uso de tecnologias web de forma semântica, acessível e interoperável, favorecendo unidades relativas, fontes da web otimizadas e design consciente da acessibilidade.

6. Fontes Modernas e Fluidas para Websites

Fontes "modernas e fluidas" são aquelas que:

Recomendações Atuais e Exemplos Populares (Muitas disponíveis no Google Fonts):

7. Propriedade font (Shorthand)

A propriedade font é um atalho (shorthand) para definir várias propriedades de fonte em uma única declaração CSS. Ela pode definir: font-style, font-variant, font-weight, font-stretch, font-size, line-height e font-family.

Exemplos:

p {
          /* Define: italic, normal variant, bold weight, normal stretch, 1em size, 1.5 line-height, Arial family (ou sans-serif) */
          font: italic bold 1em/1.5 Arial, sans-serif;
        }
        
        h1 {
          /* Define apenas o obrigatório: normal style/variant/weight/stretch, 2.5rem size, normal line-height, Georgia family (ou serif) */
          font: 2.5rem Georgia, serif;
        }
        
        .special-text {
          /* Define: normal style, small-caps variant, 400 weight, normal stretch, 16px size, 1.4 line-height, "Open Sans" family (ou sans-serif) */
          font: small-caps 400 16px/1.4 "Open Sans", sans-serif;
        }

Atenção: Usar o shorthand font redefine todas as propriedades que ele pode controlar para seus valores iniciais, a menos que você as especifique explicitamente na declaração.

8. Repositórios Externos de Fontes Gratuitas

Existem vários sites que oferecem fontes de alta qualidade, muitas delas gratuitas para uso em projetos web:

9. @font-face, font-family, Formatos e Fontes Personalizadas

Para usar fontes que não são "web safe" e que você mesmo hospeda (em vez de usar um serviço como Google Fonts), você utiliza a regra CSS @font-face.

10. Extensões de Navegador: ColorZilla e Font Ninja

São ferramentas (extensões/add-ons para navegadores como Chrome, Firefox) que auxiliam desenvolvedores e designers a inspecionar elementos visuais em páginas web.

Ambas as extensões otimizam o fluxo de trabalho, permitindo identificar rapidamente estilos visuais sem mergulhar profundamente no DevTools do navegador.

11. Propriedades CSS para Alinhamento de Texto

CSS oferece diversas propriedades para controlar a disposição e apresentação do texto dentro de seus elementos contêineres: