CSS
Pablo Leon Rodrigues
1. Cascading Style Sheets
1. CSS
2. Sintaxe
3. Incorporar
4. Seletores
5. Unidades de medida absolutas
6. Unidades de medida relativas
CSS
Cascading Style Sheets (CSS) é uma linguagem de estilos, que ao ser incorporada ao HTML permite alterar a
aparência gráfica dos componentes da página. Atualmente o CSS está na versão 3, porém foi apresentada em
1994.
Podemos classificar os recursos da linguagem em diferentes módulos, cada qual com finalidade específica.
Selectors 2D Transformations
Box Model 3D Transformations
Backgrounds Animations
Image Values and Replaced Content Multiple Column Layout
Text Effects User Interface
Sintaxe
A linguagem CSS3 fornece, basicamente, um vasto conjunto de propriedades de estilo, funções e outras
construções que podemos utilizar para modificar algum aspecto da aparência dos elementos HTML5.
Uma propriedade de estilo é definida por um nome e um valor. Por exemplo, se desejamos justificar
determinado texto, podemos escrever o seguinte trecho de código:
text-align: justify;
└────┬────┘ └──┬──┘
propriedade valor
A propriedade chama-se text-align e seu valor foi configurado para justify, o qual indica que o texto deve ser
justificado. Ao final, é necessário colocar ; . Um mesmo elemento pode receber diversas configurações de
estilo através do uso de diferentes propriedades.
Incorporar
A incorporação de código CSS3 a documentos HTML5 pode ser realizada de três formas distintas:
arquivo externo
elemento <style>
atributo style (inline)
Estilos inline são aqueles que acompanham o elemento, sendo definidos no atributo style. Devem ser utilizados
com cautela, pois são difíceis de alterar quando aparecem em grande quantidade no documento. É o caso do
elemento h1 do documento apresentado na sequência. Perceba que o estilo se aplica somente ao elemento.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Titulo</h1>
</body>
</html>
Quando utilizamos o elemento <style> temos maior flexibilidade na aplicação dos estilos, diferentemente
do modo inline, podemos aplicar o mesmo estilo a vários elementos do documento por meio de regras. O
elemento <style> deve ser adicionado dentro de <head> e todas as regras de estilo devem ser escritas
como conteúdo do elemento.
<!DOCTYPE html>
<html>
<head>
<title>Minha primeira página Web</title>
<style>
body {
background-color: rgb(159, 169, 170);
}
h1, h2, h3, h4, h5, h6 {
color: black;
text-transform: uppercase;
}
</style>
</head>
</html>
A terceira forma, em que utilizamos a vinculação de um arquivo com regras de estilo ao documento é a mais
utilizada. Isso porque, quando pensamos em um site, devemos considerar a existência de muitos documentos e,
todos eles compartilhamento da mesma apresentação. Logo, ao deixarmos as regras de estilo em um único
local, podemos facilmente compartilhá-las em todos os documentos sem a necessidade de repetir código.
Para realizar a vinculação de um arquivo CSS ao documento devemos utilizar a tag <link> , que também
deve estar na <head> .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>Minha primeira página Web</title>
<link href="estilos.css" rel="stylesheet"/>
</head>
</html>
Em caso de mais de uma forma ser utilizada simultaneamente, a prioridade fica com as propriedades inline,
seguidas daquelas definidas para o documento na tag <style> e, por último, as regras oriundas dos arquivos
incorporados via <link> .
Seletores A regra acima tem como seletor p , indicando que
todos os elementos do tipo parágrafo do documento
Seletores são parte de uma regra de estilo. Sua
devem receber as propriedades de estilo definidas.
função é orientar o navegador, por meio de um
Cada par de propriedade:valor corresponde a
padrão de pesquisa, a encontrar os elementos que
uma declaração. Perceba que toda declaração finaliza
devem receber o estilo no documento
com um ; e que as declarações ficam envolvidas
p { entre chaves {} .
text-align: center;
color: yellow;
font-family: "Arial", cursive;
font-size: 40px;
}
Universal Id
Todo elemento da página irá receber o estilo. Todo elemento HTML possui um atributo chamado
Utilizamos * como seletor. id . Este atributo é utilizado para identificar de forma
única um elemento no documento. Isso significa que
* { dois elementos não podem compartilhar o mesmo
margin: 0px; valor em id . No CSS, podemos especificar um
} seletor para valores de id utilizando o caractere #
acompanhado do valor de id correspondente.
Elemento #cabecalho {
background-color: black;
Especificamos o nome dos elementos HTML que
}
devem receber o estilo no seletor.
p {
color: black;
}
Classe
Outro atributo global de elementos do HTML5 chama-se class . Diferentemente de id , diferentes
elementos podem compartilhar do mesmo valor em class e, além disso, vários valores são aceitos, deixando-se
um espaço entre eles. Seletores baseados em classe são amplamente utilizados. Sua construção requer o uso
do caractere ponto . acompanhado do nome da classe.
Podemos deixar o seletor mais específico, associando com um seletor de elemento, como em p.teste . A
interpretação, neste caso, é todo parágrafo que contém a classe teste.
.artigo {
text-align: justify;
}
p.teste {
color:red
}
Descendentes
Utilizamos este tipo de seletor para aplicar estilos a elementos com base em seus elementos "pai". Podemos
selecionar, por exemplo, todos os parágrafos ( <p> ) que são descendentes de artigos ( <article> ),
desconsiderando os demais.
article p {
font-family: 'Roboto', sans-serif;
}
Observe que este seletor considera descendentes diretos e indiretos. Para ser mais restritivo e considerar
somente elementos que são "filhos" diretos, devemos utilizar o símbolo > , conforme o exemplo a seguir:
article > p {
font-family: 'Roboto', sans-serif;
}
Elementos irmãos
São seletores que consideram elementos de mesmo nível ("irmãos", pois são filhos do mesmo "pai"). Para
aplicar um estilo específico para o primeiro parágrafo ( <p> ) que segue um título de segundo nível ( <h2> ),
poderíamos utilizar o operador + que indica adjacência:
h2 + p {
font-family: 'Roboto', sans-serif;
}
Se a adjacência não for necessária, apenas a idéia de ser "irmão", utilizamos o operador ~ :
h2 ~ p {
font-family: 'Roboto', sans-serif;
}
Atributos
São seletores utilizados para selecionar elementos que contenham um atributo específico sua definição.
a[href] {
font-family: 'Roboto', sans-serif;
}
input[type="text"] {
background-color: yellow;
}
a[target="_blank"] {
background-color: yellow;
}
Seletor Exemplo Descrição
Seleciona todos os elementos com um atributo de
[attribute] [target]
destino
[attribute=value] [target="_blank"] Seleciona todos os elementos com destino="_blank"
Seleciona todos os elementos com um atributo title
[attribute~=value] [title~="flower"] que contém uma lista de palavras separadas por
espaços, uma das quais é "flor"
Seleciona todos os elementos <a> com um valor de
[attribute^=value] a[href^="https"]
atributo href começando com "https"
Seleciona todos os elementos <a> com um valor de
[attribute$=value] a[href$=".pdf"]
atributo href terminando com ".pdf"
Seleciona todos os elementos <a> com um valor de
[attribute*=value] a[href*="w3schools"]
atributo href contendo a substring "w3schools"
Pseudo-Elementos Para primeira linha:
São seletores que permitem estilizar partes de um
elemento e não sua integralidade. Por exemplo,
p::first-line {
podemos estilizar somente a primeira linha de um
color: #ff0000;
parágrafo através da regra a seguir.
font-variant: small-caps;
}
p::first-line {
font-family: 'Roboto', sans-serif; Para primeira letra
}
p::first-letter {
Observe que, para todo e qualquer pseudo-elemento,
color: #ff0000;
devemos utilizar a sintaxe a seguir (usar ::):
font-size: xx-large;
}
selector::pseudo-element {
property: value;
}
Seletor Exemplo Descrição
::after p::after Insira algo após o conteúdo de cada elemento <p>
::before p::before Insira algo antes do conteúdo de cada elemento <p>
::first- p::first-
Seleciona a primeira letra de cada elemento <p>
letter letter
::first-line p::first-line Seleciona a primeira linha de cada elemento <p>
::marker ::marker Seleciona os marcadores dos itens da lista
Seleciona a parte de um elemento que é selecionado por um
::selection p::selection
usuário
Pseudo-Classes
Pseudo-classes são utilizadas para selecionar elementos com base em algum estado específico
Observe que, para toda e qualquer pseudo-classe, devemos utilizar a sintaxe a seguir (usar : )
selector:pseudo-class {
property: value;
}
O seletor abaixo modifica a cor de todos os links visitados:
a:visited {
color: forestgreen;
text-decoration-color: hotpink;
}
Seletor Exemplo Descrição
:active a:active Selects the active link
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:hover a:hover Selects links on mouse over
:link a:link Selects all unvisited links
Seletor por negação
Seleciona todos os elementos que não atendem a condição especificada.
div:not(.oculto) {
background-color:red;
}
Unidades de medida absolutas
As medidas absolutas, como pixels ( px ), polegadas ( in ), centímetros ( cm ), etc., são especificadas com um
valor fixo que não é afetado pelo ambiente ou contexto da página. Elas fornecem uma precisão absoluta e são
consistentes independentemente do dispositivo ou configuração de exibição.
Isso significa que medidas absolutas resultam em elementos com tamanhos fixos e invariáveis,
independentemente do tamanho da tela ou do navegador em que estão sendo exibidos. De modo geral, tal
característica impõe problemas de adaptação em dispositivos com tamanhos de tela variados, especialmente
em dispositivos móveis ou em layouts responsivos.
No CSS3 temos a disposição diversas medidas absolutas, contudo a que utilizamos com maior frequência é o
pixel ( px ).
font-size: 16px;
width: 300px;
Unidades de medida relativas
Diferentemente das absolutas, as medidas relativas, como % (porcentagem), em (relativo ao elemento pai),
rem (relativo ao elemento raiz), vw (viewport width), vh (viewport height), etc… são dimensionadas com
base em algum aspecto do ambiente de layout, como o tamanho da fonte, largura da tela ou tamanho do
elemento pai.
São muito utilizadas, pois elas se ajustam dinamicamente conforme o contexto, proporcionando uma melhor
adaptação a diferentes dispositivos e ambientes de visualização. São fundamentais para criar layouts
responsivos, onde os elementos se ajustam de acordo com o tamanho da tela, garantindo uma experiência
consistente em dispositivos variados.
Deste modo, ao usar medidas relativas, é possível manter proporções consistentes entre elementos em
diferentes partes do layout, pois eles são dimensionados proporcionalmente em relação ao ambiente de
exibição.
Porcentagem (%) Viewport Width (vw) e Viewport
Unidade relativa as proporções do elemento pai.
Height (vh)
Referem-se à largura e altura da janela de
width: 50%; visualização do navegador, respectivamente.
Em (em)
width: 50vw;
Unidade relativa ao tamanho da fonte do elemento height: 80vh;
pai.
Viewport Minimum (vmin) e Viewport
font-size: 1.2em; Maximum (vmax)
Rem (rem) Referem-se à menor ou maior dimensão da janela de
visualização do navegador (largura ou altura),
REM define o tamanho relativo à fonte do elemento respectivamente.
raiz (normalmente o elemento <html> ).
width: 50vmin;
margin-left: 2rem; height: 80vmax;
https://developer.mozilla.org/en-US/docs/Learn/CSS
https://diegolusa.github.io/web
