Escolar Documentos
Profissional Documentos
Cultura Documentos
DE SISTEMAS PHP
Introdução
Páginas Hyper Text Markup Language (HTML), ou linguagem de marcação
de hipertexto, são criadas para realizar a apresentação de dados na web.
Para formatar essas páginas, dispomos de folhas de estilo em cascata, do
inglês cascading style sheets (CSS), que servem para organizar e estilizar o
conteúdo por meio de instruções e comandos que permitem apresentar
elementos HTML de forma padronizada, proporcionando redução de
esforço e aumento de produtividade.
Neste capítulo, você irá estudar a formatação em elementos de uma
página web com CSS3, classes e seletores de Id com CSS3 e media query
para diferentes dispositivos.
arquivo de estilos, todas as páginas que incorporam esse arquivo terão sua
apresentação modificada.
Para criar um arquivo de estilos, basta definir as propriedades dos seletores
e salvar em um arquivo com a extensão CSS. É possível incorporar mais de
um arquivo de estilo, no entanto, você precisa ter cuidado para que as defini-
ções de um arquivo não repitam as de outro, pois o navegador irá utilizar as
definições do arquivo incorporado por último.
As definições de estilo podem ser aplicadas a qualquer elemento de um
documento HTML, desde o próprio corpo da página, definido pela tag <body>,
até itens específicos, como os títulos de <h1> à <h6>. Para definir os estilos,
edite o arquivo CSS e indique o seletor e suas propriedades, conforme você
verá a seguir.
Textos
Textos podem ser estilizados em vários elementos dentro de uma página
web, ou seja, qualquer elemento que contenha texto pode ter uma formatação
específica, como o corpo da página, um parágrafo, um título ou as linhas de
uma tabela. Essa formatação envolve a fonte, a cor, o tamanho, a indentação,
o alinhamento e várias outras propriedades.
Para formatar um elemento, você deve especificar o seletor (h1, p, etc.) e as
suas propriedades (font-family, font-size, color, etc.) (FREEMAN;
ROBSON, 2014), conforme demonstrado na Figura 2.
https://goo.gl/AC9K13
Caixas
Em um documento HTML, cada elemento é representado por um box, isto é,
por uma caixa retangular que abriga o seu conteúdo. Em geral, essas caixas
são definidas para <div>, que são elementos que abrigam outros elementos.
No entanto, as caixas podem ser criadas para qualquer outro elemento, como
parágrafos, botões, títulos, etc. (SILVA, 2012).
Sendo uma caixa, é possível atribuir as seguintes propriedades: conteúdo
(content), espaçamento (padding), borda (border) e margem (margin). Cada
uma dessas propriedades define um item das dimensões da caixa, como você
pode ver na Figura 4.
Para definir o tamanho de uma caixa, você deve fazer um cálculo que acrescente
tanto largura como altura nas dimensões de espaçamento e borda. Isso significa que
uma caixa cujo conteúdo possua 200px de largura, 10px de espaçamento e 2px de
borda vai ocupar 212px de largura total. No entanto, para evitar inúmeros cálculos,
no CSS3 foi criada uma propriedade chamada box-sizing, que modifica o comporta-
mento da caixa garantindo que ela obedecerá a largura definida pela propriedade
width, independentemente das dimensões de espaçamento e borda, dessa forma ela
reduz o tamanho do conteúdo para se encaixar na largura definida, respeitando as
propriedades padding e border.
https://goo.gl/5izT6c
8 Criação de páginas com CSS3
Seletor de classe
Os seletores de classe são úteis para definir estilos diferentes para elementos
HTML do mesmo tipo. Isso significa que você pode declarar diversos estilos,
com propriedades distintas, e selecionar aqueles que desejar para aplicar aos
seus elementos.
Apesar de ser mais comum o uso de apenas um seletor de classe em cada
elemento HTML, é possível aplicar estilos de mais de um seletor de classe.
Nos casos em que as propriedades se sobrepõem, o navegador utilizará o estilo
da propriedade da classe que for chamada primeiro.
Você pode criar um seletor de classe específico para determinado tipo de
elemento HTML, como colunas de tabelas, por exemplo, ou criar seletores
de classe para uso genérico, isto é, que podem ser utilizados em elementos
de qualquer tipo.
Para criar um seletor de classe, inicialmente você deve especificar um
nome para ele. Esse nome deve significar algo que referencie o estilo que será
aplicado. Você pode escolher quaisquer caracteres para nomear os seletores
de classe, exceto caracteres especiais e o caractere espaço em branco (EIS;
FERREIRA, 2012).
Criação de páginas com CSS3 9
Não defina o nome do estilo conforme alguma propriedade, como uma cor, pois,
futuramente, pode haver a necessidade de trocar a cor das páginas e o nome do estilo
pode gerar confusão. Como boa prática, utilize sempre nomes que representam algo
sobre o layout de uma forma geral, evitando caracteres especiais e números sequenciais,
como estilo1, estilo2, etc.
Para criar seletores de classe genéricos, ou seja, que podem servir para
qualquer tipo de elemento HTML, você não deve inserir o seletor na declaração
de classe, mantendo apenas o nome criado, precedido de um ponto, conforme
apresentado na Figura 9.
Seletor de Id
Diferentemente de um seletor de classe, que pode ser usado por diversos
elementos HTML de uma página web, um seletor de Id só pode ser usado
uma única vez dentro do documento. A nomenclatura é muito parecida com
a do seletor de classe genérico, tendo como única diferença a troca do ponto
“.” pelo sustenido “#”, como você pode observar na Figura 10.
https://goo.gl/fHnyR
Criação de páginas com CSS3 13
O media query pode ser aplicado na chamada do CSS pela tag <link> e,
também, pode fazer parte do conteúdo do arquivo CSS. Nesse caso, sua chamada
ocorre da mesma forma como a de um arquivo CSS qualquer, e o tratamento
é realizado dentro desse arquivo de estilos. Nos exemplos a seguir, o estilo
será aplicado apenas nos dispositivos com resolução máxima de 800 pixels.
Media query na chamada do CSS:
Você pode combinar media query com operadores lógicos para montar
expressões complexas. Essa combinação é chamada de media feature, sendo
os seguintes operadores suportados: only, not, or e and (SILVA, 2012).
aspect-ratio
color
color-index
device-aspect-ratio
Criação de páginas com CSS3 15
device-height
device-width
grid
height
monochrome
orientation
resolution
scan
width
https://goo.gl/o1td6E
Entre as propriedades que podem ser usadas, as mais comuns são: min-
-width, min-height, max-width, max-height, width e height. A partir delas,
podemos, por exemplo, adaptar as páginas para apresentar o comportamento
responsivo, ajustando-as adequadamente conforme os diferentes tamanhos
de tela.
EIS, D.; FERREIRA, E. HTML5 e CSS3: com farinha e pimenta. São Paulo: Lulu.com, 2012.
FREEMAN, E.; ROBSON, E. Use a cabeça! Programação em HTML 5. Rio de Janeiro: Alta
Books, 2014.
MOZILLA. Usando media queries. [S.l.], c2005-2017. Disponível em: <https://developer.
mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries>. Acesso em: 06 dez. 2017.
SILVA, M. S. A propriedade CSS font. [S.l.]: Maujor, 2016a. Disponível em: <http://www.
maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php>. Acesso em:
06 dez. 2017.
SILVA, M. S. CSS3: desenvolva aplicações web profissionais com uso dos poderosos
recursos de estilização das CSS3. São Paulo: Novatec, 2012.
SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec, 2015.
SILVA, M. S. Gradiente linear das CSS3. [S.l.]: Maujor, 2016b. Disponível em: <http://
www.maujor.com/tutorial/css3-gradientes-lineares.php>. Acesso em: 06 dez. 2017.
WORLD WIDE WEB CONSORTIUM. Seletores. São Paulo: W3C, c2004-2008. Disponível
em: <http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-seletores>. Acesso
em: 06 dez. 2017.