Web Design e HTML avançado (pgs 100-124) – Fim do Livro
Fontes
Uma fonte é uma representação consistente dada a um alfabeto. Inclui objetos que alteram a forma do símbolo sem alterar seu significado. As características exigidas de uma fonte são tipo (ou família), tamanho, formato e peso. Para especificar o texto, você deve especificar a fonte especificando seu tipo, forma, peso e tamanho. CSS fornece propriedades como família de fontes, tamanho de fonte, estilo de fonte e peso de fonte para definir essas propriedades. Além disso, diferentes tipos de funções permitem considerar diferentes tipos de fontes.
Font-Family:
Uma família de fontes (ou fontes) é especificada com a propriedade Font Family. Aceita uma lista de valores separados por vírgula que representam nomes de fontes que podem não existir no sistema do usuário. Se o substantivo raiz tiver mais de uma palavra, coloque-o entre aspas.
Exemplo:
Font-Size:
A propriedade Font-Size altera o tamanho da fonte, que pode ser especificado como um valor absoluto ou relativo.
Exemplo:
O tamanho pode ser especificado em unidades como pontos, pixels, centímetros, milímetros e polegadas.
Font-Style e Font-Weight:
O tipo de fonte é afetado pela espessura da fonte (altera a espessura) e pelo tipo da fonte (altera o itálico).
Font-Variant:
A função de alteração de fonte permite aplicar uma fonte diferente. As opções mais comuns são “small caps” e “small caps”. Coloque as palavras em maiúscula, não em minúsculas.
Propriedade Font:
Se quiser definir vários aspectos do seletor de uma só vez, você pode usar o estilo da fonte para definir a ordem correta dos elementos.
Atributos de Texto
Nesta parte contém alterações e recursos relacionados ao texto, incluindo alteração de texto para controlar letras maiúsculas e minúsculas e texto maiúsculo para adicionar ou remover efeitos de maiúsculas e minúsculas, como sinais e sintomas.
Text-Transform:
A propriedade text-conversion converte o texto em letras maiúsculas ou minúsculas.
Text-Decoration:
O recurso de marca de texto permite adicionar ou remover efeitos decorativos ao texto.
Text-Align e Vertical-Align:
Essas propriedades controlam o alinhamento horizontal e vertical do texto.
Exemplo:
Text-Indent
Realiza a endentação da primeira linha do bloco de texto.
Exemplo:
Cores
Abrange funções relacionadas a cores, como color para definir a cor do texto, background.color para definir a cor de fundo e background-image para adicionar uma imagem de fundo.
Color:
É utilizada para definir a cor do texto da página.
Exemplo:
Background-Color:
É uma propriedade para definir uma cor de fundo de um determinado elemento.
Exemplo:
Background-Image:
Usada para definir uma imagem ao fundo de um determinado elemento.
Exemplo:
Background-Repeat:
É uma propriedade que controla como a determinada imagem de fundo será repetida na página.
Exemplo:
Background-Position e Background-Attachment
São usadas para controlar o posicionamento e a fixação da imagem de fundo da página.
Exemplo:
Propriedade de Classificação
Esta seção contém os principais recursos que permitem usar estilos de forma sistemática, agrupando elementos em categorias específicas. As categorias incluem linhas, blocos, blocos e objetos invisíveis.
Display:
As propriedades de exibição desempenham um papel importante na decisão de como exibir um elemento. Ele oferece opções como Nenhum, que desativa a visibilidade do elemento, Bloco, que cria uma nova caixa para colocar o objeto, Lista de elementos em um bloco com um marcador de linha e Linha, que define o elemento como parte de um bloco.
Exemplo:
White-Space:
Controla a propriedade de espaço em branco dentro de um elemento. Define se quebras de linha, espaços, tabulações, etc. devem aparecer na tela. Isso é algo a considerar ou não quebrar a linha.
Exemplo:
List-Style
A propriedade estilo de lista e suas variantes (tipo de estilo de lista, imagem de estilo de lista e posição de estilo de lista) são fundamentais na formatação de itens de lista, controlando tipo de caractere, imagem e posição do caractere.
Exemplo:
Controle de Blocos
As propriedades margin e padding desempenham um papel crucial no controle das bordas internas e externas de um elemento de bloco. Eles podem ser aplicados de diversas maneiras, como definir todas as margens de uma vez ou separadamente para cada lado (superior, direita, inferior, esquerda).
Margin e Padding:
As margens externas e internas são definidas usando as propriedades de margens e preenchimento. Eles podem afetar todas as arestas de uma vez ou podem ser aplicados a cada lado separadamente.
Exemplo:
Border-Width, Border-Color e Border Style:
Para controlar certos aspectos das bordas, como espessura, cor e estilo, usamos as propriedades border-width, border-color e border-style. Eles podem ser usados individualmente ou em grupos.
Exemplo:
Border:
Borda Superior, Borda Inferior, Borda Esquerda e Borda Direita agrupam as configurações de cor, estilo e espessura para cada uma das quatro bordas.
Exemplo:
Width e Height
As propriedades de largura e altura permitem controlar o tamanho do elemento do bloco alterando a altura e a largura do bloco.
Exemplo:
Float:
O recurso flutuante permite colocar um bloco à direita ou à esquerda da janela do navegador, permitindo que o restante do texto flua ao redor dele.
Exemplo:
Clear
O atributo clear é usado para evitar que blocos flutuem em torno de imagens ou blocos que usam o atributo float. Isto tem o mesmo efeito que o atributo explícito em HTML.
Exemplo:
Posicionamento
A posição dos objetos em HTML pode ser absoluta ou relativa. As propriedades position, top e left desempenham um papel vital neste controle.
Position, top e left:
A propriedade position requer que as propriedades top e left especifiquem a posição absoluta ou relativa do objeto. A origem da posição absoluta é o canto superior esquerdo do navegador, enquanto a posição relativa refere-se à posição anterior do objeto.
Exemplo:
Z-Index
A propriedade Z-index permite organizar objetos por camada e especificar sua profundidade na visualização. Quanto maior o número, maior o nível.
Exemplo:
Visibility:
A propriedade Visibilidade controla a visibilidade do bloco, tornando-o visível ou invisível. Ao contrário da largura, a visualização preserva o espaço ocupado por um bloco.
Exemplo:
Conclusão
Concluindo todo o conteúdo até agora, o HTML (Hypertext Markup Language) ainda é extremamente importante nos dias de hoje, desempenhando um papel essencial na criação e estruturação de páginas web. A sua importância reside na capacidade de fornecer uma base sólida para o desenvolvimento de conteúdos online, criando assim interfaces acessíveis e intuitivas para utilizadores em diferentes dispositivos e plataformas. O HTML também é a espinha dorsal da Web Semântica, facilitando a interpretação precisa do conteúdo pelos mecanismos de pesquisa e facilitando a indexação e categorização eficientes das informações. A evolução contínua do HTML e suas versões mais recentes, como o HTML5, incluem recursos avançados que expandem suas capacidades, tornando-o ainda mais importante para a criação de experiências digitais interativas ricas. Em suma, o HTML continua a ser a tecnologia central sobre a qual a web moderna foi construída e desenvolvida.
