; Ao menos uma propriedade: a cor de fundo (background-color); Ao menos um valor para a propriedade: blue. Essa declaracao de estilo faria com que todas as tags
do documento apresentassem a cor azul ao fundo. O exemplo utilizou apenas uma declaragao (propriedade + valor), mas é possivel inserir em conjunto varias outras. Além dos aspectos mencionados acima, ha outros importantes quanto a sintaxe: A propriedade e seu valor devem ser separados por dois pontos Uma declaragao deve ser separada da declaragao subsequente com a utilizagao do ponto-e- virgula *:"; O conjunto de estilos aplicados a um seletor é envolvido por chaves “{" e “}’ Vamos ver a seguir um exemplo de duas propriedades dadas a tag
e o resultado dessas declaragdes no navegador. Fonte: Elaborado pelo autor no Notepad++. Figura 2: Demonstragao da aplicagao de estilos SELETORES Vimos nos exemplos anteriores um estilo sendo declarado em uma tag HTML
. Nés nos referimos a essa tag como sendo 0 seletor ao qual o estilo foi aplicado. Ha muitos outros seletores disponiveis além daqueles correspondentes as tags HTML, conforme veremos a seguir. SELETORES CLASS E ID O seletor de classe ¢ definido a partir da declaragao do atributo “class” em um elemento HTML. Jd 0 de identificagao € definido com o atributo “id”. Importante frisar que, embora um elemento possa ter mais de uma classe, teré somente um identificador. Em termos de nomenclatura para a definigaio do nome da classe ou do identificador, ndo existe uma regra a ser seguida. Procure utilizar nomes que facam sentido, que tenham relagao com a funcao do elemento na pagina e que, de fato, ajude a identificé-lo ou classificd-to. Logo abaixo, podemos ver um exemplo de sintaxe correspondente a declaragao desses dois atributos na HTML e na CSS. Na primeira parte da imagem, é apresentado um fragmento de cédigo HTML. Repare que uma mesma classe, a “texto vermelho’, foi atribuida tag
e a uma das tags
. Com isso, vemos que uma classe pode ser atribuida a mais de um elemento. Agora note a sintaxe para atribuigao de miltiplas classes a um elemento na segunda tag
, a qual foram atribuidas as classes “texto_descricao” e “ Em relagao ao cédigo CSS, veja que o seletor de ID é representado por uma “#” eo de class por um *.", seguidos de seus nomes. Além disso, foram apresentadas duas formas de sintaxe que produzirao 0 mesmo efeito. A diferenga entre elas é que, na segunda, o nome da tag a qual a identificagao ou classe foi atribuida precede o respectivo sinal Fragmento HTML Fonte: Elaborado pelo autor no Notepad++. Figura 3: Sintaxe de declaracao de seletores de classe e identificagao. RESTRIGOES E BOAS PRATICAS NA UTILIZAGAO DO IDENTIFICADOR Embora nao exista um padrao ou preferéncia quanto a utilizar o seletor “id” ou “class”, importante frisar novamente que um “id” deve ser aplicado a apenas um elemento, enquanto a “class’ pode ser aplicada a um ou varios elementos. Embora 0 navegador nao faa uma verificagdo se um mesmo “id” foi utilizado em diferentes elementos, tal método pode trazer alguns problemas de estilizagao e comportamento, uma vez que esse seletor também é bastante usado pelo Javascript. Frente a isso, adote a boa pratica de definir identificadores Unicos. SELETORES DE ATRIBUTO Esses seletores utilizam nomes de atributos dentro de colchetes, sendo possivel combind-los com valores. Abaixo sao mostrados alguns dos seletores de atributo disponiveis: [checked] - Seleciona todos os elementos que possuem 0 atributo “checked”; [type='text’] - Seleciona todos os elementos do tipo “text”. Os seletores de atributo sao bastante flexiveis, permitindo inumeras combinagoes. Por exemplo, é possivel usa-los para selecionar todas as imagens com uma determinada extensao, selecionar todos os elementos com o atributo title contendo determinado valor ete. SELETORES BASEADOS EM RELACIONAMENTO E possivel declarar estilos utilizando a relagao entre os elementos. A tabela a seguir mostra os principais seletores baseados em relacionamento. Pret ate Qualquer elemento P que seja descendente (filho, neto etc.) de um elemento H1. Hi>P — Qualquer elemento P que seja filho de um elemento H1. > Qualquer elemento P que seja o préximo irmao de um elemento H1 (ou H1+ seja, 0 proximo filho de um mesmo pai). Atengao! Para visualizacao completa da tabela utilize a rolagem horizontal Tabela 1: Principais seletores baseados em relacionamento, Para uma melhor compreensao quanto a descendéncia e parentesco mencionados acima, veja a figura abaixo. Essa é uma representagao simbolica da Arvore DOM (representagao estruturada do documento HTML em formato de arvore) contendo elementos representando tags HTML. Veja ainda a explicagao de cada relagao e aplicaco dos seletores baseados em relacionamento. html read 0 owt aa B18 cescencent ino) dent m 92 esse age si apieaves ‘ce tiies 7 mp ; - ira ot Topas parentes (nds, thos domerm pals dv) Nesvaaoeio oe elcavals os ettoes mee Fonte: Elaborado pelo autor. Figura 4: Relacao entre elementos em uma pagina HTML. PROPRIEDADES Existem inumeras propriedades CSS, desde as definidas pela sua especificagao, ditas propriedades padrao, até as proprietérias, que funcionam apenas em alguns navegadores. A fim de garantir uma maior compatibilidade, assim como otimizar o desenvolvimento, deve-se sempre dar preferéncia as primeiras. A seguir so apresentadas algumas das propriedades mais comuns da CSS. CTY Background Border Top, Bottom, Righ e Left Color Font-family, Font-size, Font-weight, etc. Height List-style, List-style- image, etc. ttt Estilizar 0 fundo de elementos. Para tal ha uma série de propriedades, além do atalho “Background”, como “background-color”, “packground-image” etc. Controla as bordas de um elemento, sendo possivel definir suas cores, espessuras, entre outras propriedades. Controlam o posicionamento, relativo ou absoluto, dos elementos em relaco a outros elementos. Estila a cor do contetido textual de um elemento. Ha uma série de propriedades para estilizar o contetido textual de um elemento no que diz respeito a fonte, como a familia de fontes, seu tamanho, peso (mais clara ou mais escura - negrito) etc. Definir a altura de um elemento. Ha algumas propriedades para estilizar as listas HTML. Margin Padding Position Text-... Width Z-index Atengao! Para visualizago completa da tabela ul Controla a distancia em fungao da margem de um elemento para outro, Controla a distancia entre as bordas e 0 contetido de um elemento. Define como um elemento deve ser posicionado na pagina Muitas propriedades controlam o comportamento do contetido textual de um elemento, como alinhamento (justificado, centralizado ete.), aparéncia (sublinhado etc.) etc. Definir a largura de um elemento. Definir a profundidade de um elemento — usado, por exemplo, para sobreposigdio de elementos. ¢ a rolagem horizontal Tabela 2: Lista de propriedades CSS mais comuns. INTEGRANDO A CSS A HTML Ha trés formas usuais de aplicar estilos em um documento HTML fazendo uso de CSS: Inline, Interna e Externa, Além dessas, a HTMLS permite ainda a aplicagao em Escopo. Vamos conhecer um pouco mais de cada uma delas? Fonte: Unsplash CSS INLINE Essa forma implica em declarar o estilo CSS diretamente na tag, no cédigo HTML. Veja a seguir um exemplo de um estilo apresentado anteriormente sendo aplicado de forma Inline. null Fonte: Elaborado pelo autor no Notepad++. @ Figura 5: Aplicagao de estilo Inline A declaragao Inline faz uso do atributo “style” procedido por declaragdes separadas por ponto- e-virgula *;". Esse atributo pode ser usado em qualquer tag HTML. CSS INTERNA Também chamada de CSS Incorporada, é declarada na segdo
do documento HTML. null Fonte: Elaborado pelo autor no Notepad++. Figura 6: Aplicagao de estilo CSS intema. A declaragao Inline faz uso do atributo “style” procedido por declaragées separadas por ponto- e-virgula *;". Esse atributo pode ser usado em qualquer tag HTML. CSS EXTERNA Nesse caso, os estilos sao declarados em um arquivo externo, com extenséio “.css" e vinculados ao documento HTML por meio da tag ou da diretiva @import dentro da tag . Ambos os exemplos podem ser vistos logo a seguir: null Fonte: Elaborado pelo autor no Notepad++. Figura 7: Aplicagao de Estilo Extema CSS EM ESCOPO Essa forma de aplicacao de estilo foi criada a partir da HTMLS. Com ela, é possivel aplicar estilos no Ambito de escopo, ou seja, especificos para as segdes da pagina onde foram declarados, incluindo os seus elementos filhos. No cédigo abaixo, a tagrecebera os estilos definidos, sendo a mesma regra valida para outros estilos e elementos que, porventura, venham a fazer parte da
com a cor azul. Isso significa que a tag
herdou 0 estilo. definido para o seu pai, a tag
que sejam filhas de tags
na cor vermelha. Esse foi um exemplo simples. A CSS ¢ bastante flexivel e nos permite definir diferentes niveis de especificidade. Entretanto, é importante termos cuidado com a sobreposigao de estilos — diferentes estilos definidos para um mesmo elemento em diferentes partes de nosso cédigo CSS. A regra, nesse caso, 6: prevalecera o estilo mais especifico. No exemplo acima, a primeira declaragao (para a tag div) é generalizada; a segunda (div p), especifica. DICAS SOBRE AS REGRAS DE PRECEDENCIA A regra de precedéncia em relagao as formas de inclusdio da CSS segue a seguinte ordem: Os estilos Intemos e de escopo tém precedéncia sobre estilos em arquivos externos; Os estilos Inline tém precedéncia sobre estilos internos, de escopo e externos. Quanto aos seletores, a regra de precedéncia segue a seguinte ordem: Seletores de elemento (utilizagao apenas do nome da tag) sdo os de menor precedéncia, por serem muito genéricos; ¥ Seletores de classe tém mais precedéncia que os de elemento; ¥ Seletores de identificagao tém mais precedéncia que os de classe. 'IMPORTANT Veja este novo exemplo: pt color: blue!important; } div pf color: red; )
Texto do pardgrafo que é "filho" da DIV
na cor vermelha, pois sua declarago de estilo é mais especifica que a utlizada para a tag
(texto azul), que é generalizada, Entretanto, a utilizagao do valor important, que se enquadra no que chamados de ess hack, na declaraco mais generalizada, faz com que esse estilo se sobreponha ao especifico. Logo, o cédigo acima resulta na apresentagao do texto dentro da tag
na cor azul. CSs3 ACSS, atualmente, esta em sua terceira verso, a CSS3. Dentre as diversas novidades dessa versao, destacam-se: Melhorias nos seletores, com novas possibilidades de selecao: primeiro e/ou ultimo: elemento, elementos pares ou impares etc.; Efeito gradiente e de sombra em textos e elementos; Bordas arredondadas; Manipulagao de opacidade; Controle de rotago e perspectiva; Animagées. Fonte: Pixabay VERIFICANDO O APRENDIZADO 1. A RESPEITO DA INTEGRAGAO HTML E CSS, ASSINALE A AFIRMATIVA CORRETA: A) Tanto a HTML quanto a CSS so renderizadas pelo navegador que, interpretando as tags de marcagao e os estilos que Ihes so aplicados, as exibe em tempo de execugao/requisigao pelo usuario. B) Todo 0 eddigo CSS € compilado pelo servidor web que o transforme em cédigo HTML nativo a fim de que possa ser exibido no navegador. C) ACSS inline, incorporada e de escopo sao renderizadas diretamente pelo navegador, juntamente com a HTML. Ja a CSS externa, por nao estar dentro do arquivo HTML, precisa ser compilada pelo servidor web antes de ser renderizada. D) Apenas a partir da HTMLS, com a possibilidade de declaragao de estilos em escopo, os navegadores passaram a dar suporte a renderizago da CSS e do HTML sem necessidade de compilagao, 2. SOBRE A ESPECIFICIDADE, ASSINALE A OPGAO QUE CORRESPONDE AO ESTILO MAIS ESPECIFICO E QUE, CONSEQUENTEMENTE, SERA APLICADO AO ELEMENTO < P > ABAIXO:
TEXTO DO PARAGRAFO.
Texto do paragrafo.
...
color cor de textos
,
, .
CONSIDERANDO O CODIGO HTML E CSS, ASSINALE A AFIRMATIVA
CORRETA.
TEXTO ser posicionada de forma relativa em relacao ao seu elemento ancestral, ou
seja, em relagao a < div >. B) A tag < p > serd posicionada em fungao da tag < body >, uma vez que néo foi declarada
uma propriedade position para a < div >
C) A tag sera posicionada da mesma forma como se nenhuma propriedade de
posicionamento Ihe fosse atribuida.
D) Para assumir a posigo relativa, a tag precisaria estar localizada fora da < div > ou de
qualquer outro elemento pai.
GABARITO.
1. Em relagao as propriedades e dimensées do Box Model representado pelo elemento <
div >, cujos estilos sao defi
los abaixo, assinale a afirmativa correta.
div
width:500pxlimportant;
border: Spx solid black;
padding-top: 10px;
padding-right:10px;
padding-bottom: 5px;
margin-left:50px;
}
A alternativa "B " esta correta.
Como visto, as dimensées de largura e altura sao alteradas de acordo com a borda e o padding
definidos. No exemplo da questao, temos: 500px + Spx (borda da direita) + 5px (borda da
esquerda) + 10px (padding da direita) = 520px.
2. No fragmento de cédigo abaixo, a propriedade position com o valor relative é definida
para o elemento < p >. Considerando o cédigo HTML e CSS, assinale a afirmativa
correta,
Texto Você também pode gostar
