Principais Propriedades CSS
Principais Propriedades CSS
Principais Propriedades
Propriedades de texto
Nessa sessão veremos algumas das principais propriedades utilizadas para customizar textos em
páginas HTML.
text
A propriedade text e suas variações são propriedades independentes que são utilidadas
para controlar diferentes aspectos do texto em um elemento HTML.
• text-align
Controla o alinhamento do texto dentro de um elemento. Pode ter valores como left ,
right , center e justify .
Exemplo:
JavaScript
p { text-align: center; }
CSS
p { text-transform: uppercase; }
CSS
p { text-transform: lowercase; }
CSS
p { text-transform: capitalize; }
4. none : Não aplica nenhuma transformação ao texto. O texto é exibido conforme está na
fonte.
CSS
p { text-transform: none; }
Estes valores são utilizados para modificar o caso das letras no texto, proporcionando
diferentes estilos de exibição. Escolha o valor que melhor atenda aos requisitos de design do
seu projeto.
Exemplo:
JavaScript
p { text-indent: 20px; }
1. Hexadecimal:
O formato hexadecimal é uma maneira comum de representar cores no CSS. Consiste em
seis caracteres, onde os dois primeiros representam a intensidade da cor vermelha, os
dois seguintes a intensidade da cor verde, e os dois últimos a intensidade da cor azul.
CSS
2. RGB:
O formato RGB representa a cor usando os componentes de vermelho (R), verde (G) e azul
(B). Cada componente pode variar de 0 a 255.
CSS
3. RGBA:
O formato RGBA é semelhante ao RGB, mas inclui um valor de opacidade (alfa) que varia
de 0 a 1. Isso permite tornar a cor parcialmente transparente.
CSS
4. Nome da Cor:
Algumas cores têm nomes associados, como red , blue , green , entre outros.
CSS
Exemplo de aplicação:
CSS
Resultado:
font
CSS
p { font-style: italic; }
CSS
p { font-variant: small-caps; }
CSS
p { font-weight: bold; }
4. font-size : Define o tamanho da fonte. Pode ser especificado em unidades como pixels,
em, rem, porcentagem, etc.
CSS
p { font-size: 16px; }
CSS
Você pode combinar essas propriedades conforme necessário para ajustar a aparência da
fonte no seu documento HTML. Por exemplo:
CSS
Agora, se preferir agrupar essas propriedades usando a propriedade font , isso seria feito
assim:
CSS
cssCopy code p { font: italic bold 18px "Times New Roman", serif; }
Exemplo:
CSS
Resultado:
letter-spacing
CSS
CSS
Essa propriedade é útil quando você deseja ajustar sutilmente o espaçamento entre as letras
para melhorar a legibilidade ou obter um efeito de design específico.
Exemplo:
CSS
h1 { letter-spacing: 4.9px; }
Resultado:
line-height
A propriedade line-height define a altura da linha em um bloco de texto. Pode ser definida
como um número puro (múltiplo da altura da fonte) ou como uma unidade específica.
Exemplo:
CSS
CSS
Exemplo:
CSS
h1 { line-height: 90px; }
Resultado:
Unidades de medida
As unidades de medida no CSS são utilizadas para especificar tamanhos e distâncias em
propriedades como largura, altura, margens, espaçamento, entre outras. Existem diferentes tipos
de unidades de medida no CSS, e elas podem ser classificadas em unidades absolutas e unidades
relativas.
Unidades de medida absolutas
1. Pixels ( px ):
• Exemplo:
CSS
2. Polegadas ( in ):
• Exemplo:
CSS
3. Centímetros ( cm ):
• Exemplo:
CSS
4. Milímetros ( mm ):
• Exemplo:
CSS
• Exemplo:
CSS
h1 { font-size: 18pt; }
6. Picas ( pc ):
• Exemplo:
CSS
p { line-height: 1.5pc; }
Unidades de medida relativas
1. Em ( em ):
• Exemplo:
CSS
p { margin-left: 2em; }
2. Rem ( rem ):
• Exemplo:
CSS
3. Porcentagem ( % ):
• Exemplo:
CSS
4. Viewport Width ( vw ):
• Exemplo:
CSS
• Exemplo:
CSS
• Exemplo:
CSS
Considerações finais
• Escolha da Unidade:
• Combinação de Unidades:
CSS
1. Opacidade ( opacity ):
A propriedade opacity permite ajustar a opacidade de um elemento, variando de 0
(totalmente transparente) a 1 (totalmente opaco).
Exemplo:
CSS
Neste exemplo, o elemento <div> terá uma opacidade de 70%, tornando-o parcialmente
transparente.
2. Transparência de Cores:
Outra maneira de alcançar a transparência é utilizando cores RGBA (Red, Green, Blue, Alpha),
onde o componente alfa ( A ) controla a opacidade da cor. O valor alfa varia de 0 (totalmente
transparente) a 1 (totalmente opaco).
Exemplo:
CSS
Neste exemplo, o fundo do elemento <p> será vermelho com 50% de opacidade.
3. Transições de Opacidade:
É possível criar efeitos de transição suaves na opacidade usando a propriedade transition .
Exemplo:
CSS
Neste exemplo, a opacidade da <div> é reduzida suavemente ao passar o mouse sobre ela,
graças à transição configurada.
4. Pseudo-elemento ::before e ::after com Opacidade:
É possível aplicar opacidade a pseudo-elementos ::before e ::after para criar camadas
adicionais de elementos com diferentes níveis de transparência.
Exemplo:
CSS
div::before { content: ""; display: block; width: 100px; height: 100px; back
ground-color: blue; opacity: 0.8; }
5. Propriedade backdrop-filter :
A propriedade backdrop-filter permite aplicar efeitos visuais, como desfoque ou
escurecimento, na área atrás de um elemento.
Exemplo:
CSS
Flexibilidade e Espaçamento
A flexibilidade e o espaçamento são aspectos cruciais no design de layouts em CSS,
especialmente quando se trata de criar interfaces responsivas e atraentes.
Flexbox
Propriedades do Flexbox:
1. display: flex; ou display: inline-flex; :
CSS
2. flex-direction :
CSS
3. justify-content :
CSS
4. align-items e align-self :
CSS
CSS
O sistema de layout de grade (Grid Layout) é uma poderosa ferramenta no CSS para criar
layouts bidimensionais, ou seja, layouts em duas dimensões: linhas e colunas. Ele fornece
uma maneira eficiente de organizar elementos em uma grade, facilitando a criação de designs
complexos e responsivos.
Conceitos Básicos
1. Contêiner de Grade ( display: grid; ):
CSS
2. Linhas e Colunas:
CSS
3. Áreas da Grade:
CSS
1. justify-items e align-items :
CSS
2. justify-content e align-content :
CSS
3. justify-self e align-self :
CSS
Unidades de Fração fr
CSS
CSS
Exemplo:
CSS
Resultado:
margin
CSS
Exemplo:
CSS
Resultado:
padding
CSS
Exemplo:
CSS
Resultado:
Estilizar listas em HTML é uma prática comum para melhorar a aparência visual e a
usabilidade. As listas podem ser estilizadas de várias maneiras usando CSS.
CSS
Este exemplo estiliza uma lista não ordenada removendo os marcadores padrão e
adicionando um marcador circular personalizado para cada item da lista.
Este exemplo estiliza uma lista ordenada removendo os números padrão e adicionando
números personalizados para cada item da lista.
4. Estilização de Listas Aninhadas:
CSS
Este exemplo estiliza listas aninhadas, adicionando marcadores diferentes para os itens
aninhados e ajustando o espaçamento entre eles.
Estas são apenas algumas técnicas básicas, e a estilização de listas pode ser adaptada de
acordo com as necessidades específicas do design. Ao estilizar listas, é importante
considerar a acessibilidade e garantir que a hierarquia da lista seja mantida para os leitores de
tela e outros dispositivos.
cursor
O cursor em uma página web é um indicador visual que mostra a posição onde uma ação do
usuário pode ser executada (como clicar, selecionar texto, etc.). O CSS oferece uma variedade
de valores para a propriedade cursor , permitindo que você personalize o cursor de acordo
com a ação esperada.
1. auto :
CSS
2. pointer :
• Descrição: Indica que a mão deve ser mostrada, indicando que o elemento é clicável.
CSS
3. default :
CSS
4. move :
CSS
CSS
6. crosshair :
CSS
7. not-allowed :
CSS
8. wait :
CSS
Esses são apenas alguns exemplos, e existem muitos outros valores de cursor disponíveis. A
escolha do valor depende da ação que você deseja indicar ao usuário e do contexto do seu
design. Personalizar o cursor pode melhorar a experiência do usuário e fornecer pistas visuais
sobre a interatividade de certos elementos na sua página.
Propriedades de Layout
display
A propriedade CSS display controla como um elemento HTML é exibido na página. Ela
determina se o elemento se comportará como um bloco, um elemento em linha ou de alguma
outra maneira específica. Aqui estão alguns dos valores mais comuns para a propriedade
display :
display: block :
• Elementos com display: block são exibidos como blocos retangulares e normalmente
começam em uma nova linha. Eles ocupam toda a largura disponível e podem ter
margens, preenchimento e bordas.
display: inline :
• Elementos com display: inline são exibidos em linha com o texto ou outros
elementos em linha. Eles não iniciam uma nova linha e geralmente não podem ter
margens, preenchimento e bordas.
display: inline-block :
display: none :
• Elementos com display: none são totalmente ocultos e não ocupam espaço na página.
Eles não são renderizados.
display: flex :
display: grid :
• A propriedade display: grid cria um contêiner de layout em grade, onde você pode
definir linhas e colunas para organizar elementos em um layout de grade. É útil para criar
layouts complexos e alinhados.
Essas são apenas algumas das opções de valores para a propriedade display . A escolha do
valor de display afeta o comportamento e a apresentação do elemento na página, e é uma
parte fundamental do design de layout em CSS.
background
CSS