Introdução ao CSS - Desenvolvimento Web Parte 04

07082023 1146 Desenvolvimento Web Desenvolvimento Web Parte 04 s Para Refletir 01 Introduca CSS a httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 136 07082023 1146 Desenvolvimento Web r Desenvolvimento Web Parte 04 s Para Refletir 01 Inicio de conversa httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 236 07082023 1146 Desenvolvimento Web Nesta parte vamos explorar o tema introdugao ao CSS Assista 0 video com os principais topicos sobre o tema e anote suas duvidas Envie suas duvidas no Classroom da disciplina Classroom Atividades Duvidas sobre o contetido interaja com o professor e colabore com seus colegas Aproveite para aprofundar os estudos explorando o material organizado na segao SAIBA MAIS awe DO oa J Be aH 4 Pia ied a aie NY Re 4 ae ae Bi hy i ae BS N 7 jf A We ad y de é Si Re t bi i ay ae y Baw ng ae lad a x ical iceman A ae rf E 4 S 57 TA aba ae Fs A J x i pene S i L aS 3 Se el a Le a X a oe x a Vina Sa i le a Fei a a a eS a a r g ve er 4 a Ae ie Py httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 336 07082023 1146 Desenvolvimento Web 4 fl y ey i i i os 1a Le YG ry as A ic a Pa a ss Tt S SS mi D A P 7 1 Nil nD er Ni i Q a Os objetivos de aprendizagem desta parte sao Entender o que é 0 CSS Estudar a estrutura e sintaxe basica da linguagem Compreender os principais seletores CSS Aprender as principais propriedades da linguagem Integrar CSS e HTML de diferentes formas inline interno e externo Associar a prioridade de aplicagao das regras Reconhecer as principais unidades para definiao de cores e tamanhos httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 436 07082023 1146 Desenvolvimento Web aculdad JIMPNCTA Desenvolvimento Web Parte 04 Para Refletir 01 Conteudo A seguir vamos ao video httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 536 07082023 1146 Desenvolvimento Web wee gee ee ee eee eee ee NEaD Faculdade Impacta Clique no icone ao lado e aproveite para fazer suas anotacdes durante os estudos utilizando o Google Keep httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 636 07082023 1146 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 736 07082023 1146 Desenvolvimento Web Desenvolvimento Web Parte 04 s Para Refletir 01 Leitura do texto de apoio httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 836 07082023 1146 Desenvolvimento Web professor para esclarecer suas duvidas Classroom Atividades Duvidas sobre o contetido Introdugao ao CSS Prof MSc Yuri Maximian Rottner Dirickson Texto revisto atualizado e ampliado por Prof Dr Rafael Will M de Araujo Resumo O HTML é uma linguagem de marcagao que permite definir a estrutura de um documento com os seus recursos visuais e textuais mas nos da pouco controle de como mostrar esses recursos O CSS 6 uma linguagem que complementa o HTML pois permite definir os estilos apresentacao do documento através de um conjunto de regras e sem alterar o conteudo semantico das paginas web O que é a linguagem CSS A linguagem HTML 6 usada para definir quais elementos visuais desejase exibir nas paginas web Ela também permite definir a semantica deste conteudo mas a sua capacidade de formatar e embelezar o que esta sendo mostrado é limitada Quando é necessario estilizar 0 conteudo empregamos uma outra tecnologia conhecida por CSS que um acrénimo para Cascading Style Sheets em portugués Folhas de Estilo em Cascata Assim como o HTML o CSS também passou por diversas revis6es para adicionar mais capacidades e flexibilidade a linguagem Atualmente é possivel criar animag6des que somadas a algumas funcionalidades da linguagem JavaScript acabaram por substituir outras tecnologias usadas para criar animagdes como por exemplo o Adobe Flash Essa flexibilidade se da nas centenas de propriedades que o CSS define Entender todas elas de uma unica vez é impraticavel inclusive muitas propriedades ainda serao adicionadas ao longo do tempo com a evolugao dos navegadores Portanto o mais importante é entender como o CSS é aplicado como funciona seu mecanismo de selegao entender as propriedades mais utilizadas e as maneiras de incorporalo ao codigo HTML Como usar 0 CSS O CSS é uma linguagem diferente usada para definir regras de estilos aos elementos presentes em um documento HTML e por este motivo nao é considerada uma linguagem de programacao Toda regra CSS deve ser aplicada sobre um ou mais elementos do HTML ou seja o funcionamento do CSS é intimamente ligado ao HTML apesar do HTML httpssites google comfaculdadeimpactacombridwp4pli1 8authuser1 936 07082023 1146 Desenvolvimento Web extensao css Tambem é possivel escrever diretamente dentro do arquivo HTML de duas formas a interna onde o cddigo CSS deve ficar contido entre as tags stylestyle por sua vez contida dentro do head da pagina e a maneira inline na qual é possivel escrever propriedades CSS diretamente no atributo style de uma tag HTML Cada uma dessas formas possui seu objetivo vantagens e desvantagens mas a maneira externa arquivo separado é a mais recomendada e mais amplamente utilizada Quando definimos um arquivo CSS externo o mesmo deve ser importado dentro do documento HTML Para isso utilizase a tag link informando o valor stylesheet no atributo rel de forma similar ao exemplo a seguir link relstylesheet hrefarquivocss Sintaxe basica do CSS As regras definidas no CSS sao descritas através de propriedades onde cada propriedade sera escrita no formato nome e valor separadas pelo caractere dois pontos Por exemplo se quisermos deixar o texto de um paragrafo no HTML em negrito devemos definir a regra fontweight bold ja para fonte em italico definimos a regra font style italic E possivel escrever varias propriedades CSS para um mesmo elemento separandoas por ponto e virgula Se usarmos a maneira inline de declarar o CSS escrevemos quantas propriedades quisermos diretamente no atributo style ex p stylefontweight bold fontstyle italicEste pardgrafo esta em negrito e itdlicop O problema do inline é que o reaproveitamento de regras nao existe Caso quiséssemos que todos os paragrafos tenham a mesma formatagao teriamos que copiar todas as propriedades deste para os outros paragrafos dificultando a manutengao Para evitar este problema o CSS permite escrever uma regra mais geral que seja aplicada a todos os paragrafos No head do documento podemos usar a tag stylestyle que permite escrever cédigo CSS diretamente no HTML de forma a escrever regras aplicaveis a pagina inteira No caso dessa separagao precisamos dizer sobre quais elementos HTML aquelas propriedades serdo aplicadas utilizando um seletor de elementos A sintaxe muda um pouco nesse caso A Figura 41 mostra como ficaria o exemplo anterior escrevendo CSS separadamente dentro da tag style Neste caso uma regra CSS 6 composta de um seletor de elementos HTML depois abrese uma regiao de propriedades com o par de chaves e dentro dessa regido escrevemos a lista de propriedades a ser aplicada nos elementos selecionados todas separadas por ponto e virgula Figura 41 Exemplo de CSS interno httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1036 07082023 1146 Desenvolvimento Web head meta charsetUTF8 titleExemplotitle style pt fontweight bold fontstyle italic style head body pEste paragrafo esta em negrito e italicop pEste outro paradgrafo também esta em negrito e italicop body html Exemplo Google Chrome Exemplo x v CG File homerwilltmpfsDiskexemplohtml QQ x 7 20 Este paragrafo esta em negrito e italico Este outro paragrafo também esta em negrito e italico Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1136 07082023 1146 Desenvolvimento Web vepuiau vw wvuwv ei uryuivesv VAMNLYTIIVY weee VMNLGITIVUY owvey WYVMITIVY VUVY UV WHI rIyVtluUuUuY VY CSS interno facilita a manutengao e reaproveitamento de codigo mas ainda nao possibilita que uma mesma regra seja aplicada no site inteiro isto 6 em outros documentos HTML Por isso é indicada a separagao do cddigo CSS em um arquivo externo que precisa ser importado através da tag link para que suas regras passem a valer na pagina A Figura 42 exemplifica a definigao e importagao de um arquivo CSS externo O resultado visual no navegador é idéntico ao da Figura 41 e por isso foi omitido Figura 42 Exemplo de CSS externo Arquivo estiloscss i fontweight bold fontstyle italic Arquivo HTML DOCTYPE html html head meta charsetUTF8 title title A tag link a seguir importa o arquivo CSS para este arquivo HTML link relstylesheet hrefestiloscss head body p p p p body html httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1236 07082023 1146 Desenvolvimento Web Propriedades basicas do CSS O CSS define uma infinidade de propriedades mas algumas delas sao muito usadas no dia a dia portanto é importante conhecélas A seguir categorizamos algumas das principais Propriedades que permitem mudar a forma como um texto é apresentado fontfamily indica a fonte a ser usada Algumas observacées importantes A fonte usada precisa estar presente instalada no computador do usuario Por isso nao utilize fontes obscuras E possivel especificar varias fontes separadas por virgulas O navegador usa a primeira que o utilizador tenha Seonome da fonte tiver mais de uma palavra 6 necessario usar aspas O ultimo valor desta propriedade devera ser uma classe de fonte mais genérica como serif sansserif cursive fantasy monospace fontsize indica o tamanho da fonte fontweight indica se a fonte é negrito ou nao Alguns valores possiveis normal bold bolder lighter valores de 100 a 900 aumentando de 100 em 100 fontstyle indica se o texto deve ser escrito em italico ou nao Alguns valores possiveis normal italic oblique textdecoration indica se o texto deve ser sublinhado ou nao Alguns valores possiveis none underline overline linethrough texttransform muda a capitalizagdo das letras Alguns valores possiveis none capitalize uppercase lowercase Propriedades que permitem alinhar texto nao funcionam para alinhar outros elementos textalign permite alinhar o texto dentro de um elemento Alguns valores possiveis sao center left right justify textindent permite indentar a primeira linha de um paragrafo Os valores desta propriedade podem ser um comprimento ou uma percentagem Propriedades que permitem mudar o espagamento entre as varias componentes do texto letras palavras linhas paragrafos etc letterspacing e wordspacing permitem mudar o espacgamento entre letras ou entre palavras Os valores permitidos sao um comprimento ou normal lineheight altera a altura de uma linha sem alterar o tamanho da fonte Os valores permitidos sao um comprimento uma percentagem ou normal Propriedades que permitem definir cores color permite modificar a cor de um texto backgroundcolor permite modificar a cor de fundo de um elemento Cores httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1336 07082023 1146 Desenvolvimento Web VYIIIINIIY vey veiuUurLT ieee ve ULuUui Wwiue vvllipviry u vigiu ANY YVUY UYVUUYY VY NILYV vuu cada uma dessas cores e portanto cada um dos trés canais de cor utiliza numeros variando de 0 a 255 Usamos a notacao rgbRED GREEN BLUE onde colocamos valores numéricos no lugar dos nomes das cores Podemos usar também a notacao hexadecimal onde temos trés numeros hexadecimais que vao de 00 até FF para representar a composiao RGB A Tabela 41 mostra algumas cores e suas representacdes nas duas notacoes Tabela 41 Exemplo de notagoes de cores no CSS Vermelho red rgb255 0 0 FFOO00 Verde green rgb0 255 0 OOFFOO Azul blue rgb0 0 255 OOOOFF Preto black rgb0 0 0 000000 Branco white rgb 255 255 255 FFFFFF Amarelo yellow rgb255 255 0 FFFFOO Purpura purple rgb128 0 128 6A0DAD Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1436 07082023 1146 Desenvolvimento Web sempre interpretaga na versao rgp USUaimMente nos nossos codigOS USS USaMoOS a representagao em hexadecimal por ser mais concisa Uma maneira simplificada de definir cores mais comuns é através de valores constantes Nos navegadores existem ao menos 140 cores com nomes ja prédefinidos em inglés red green blue black white etc Seletores CSS Ao separar as regras CSS das tags HTML seja dentro da tag style ou em arquivos externos precisamos informar em quais elementos as propriedades serdo aplicadas Para isso usamos os Sseletores CSS Esses seletores possuem uma sintaxe propria muito poderosa e flexivel para encontrar elementos HTML das mais diversas maneiras Vamos revisar os seletores mais importantes Uma lista mais completa pode ser consultada em CSS Selector Reference sd Seletores por tipo E o seletor mais intuitivo e corresponde ao seletor usado no arquivo CSS do exemplo da Figura 42 O CSS permite que usemos o nome da tag para indicar que todas as ocorréncias daquela tag no documento HTML seguirao as mesmas regras definidas por este seletor Seletores por ID Em muitas situagdes nao desejamos estilizar todas as ocorréncias de uma tag mas sim um unico elemento especifico do documento Uma das formas de se alcangar isso é definir um identificador Unico para aquele elemento através do atributo id Desta forma o CSS permite definir regras especificas para esse elemento através do seletor de ID que possui a sintaxe iddoelemento A Figura 43 mostra um exemplo de seletor por ID Por simplicidade a partir deste exemplo iremos omitir as tags de estrutura do documento HTML Figura 43 Exemplo de seletor CSS por ID Arquivo CSS escolhido fontweight bold fontstyle italic Arquivo HTML httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1536 07082023 1146 Desenvolvimento Web e Exemplo Google Chrome Exemplo x v CG File fhomerwilltmpfsDiskexemplohtml O Este pardgrafo esta em negrito e italico Ja este paragrafo nao possui estilo algum Fonte do autor 2022 Seletores por classe O seletor por id permite selecionar apenas um elemento especifico do documento HTML Se quisermos aplicar um determinado estilo a varios elementos mas nao todos do mesmo tipo podemos usar o seletor por classe Toda tag HTML permite definir um atributo chamado class cuja funao é criar categorias ou classes que queiramos usar no CSS para flexibilizar o uso dos seletores Por exemplo podemos criar uma categoria de paragrafos importantes que tera como estilo estarem em negrito e italico ao mesmo tempo Colocamos a propriedade class nos que terao este estilo e usamos o seletor nomedaclasse na regra do CSS A Figura 44 mostra um exemplo do uso de seletor por classe Note que os dois primeiros paragrafos pertencem a mesma categoria chamada de importante mas o Ultimo paragrafo nado Figura 44 Exemplo de seletor CSS por classe Arquivo CSS importante fontweight bold fontstyle italic Arquivo HTML httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1636 07082023 1146 Desenvolvimento Web italicop pEste paragrafo néo possui estilo algump ExemploGoogle Chrome Exemplo x v CG File homerwilltmpfsDiskexemplohtml Q O Este pardgrafo esta em negrito e italico Este pardgrafo também esta em negrito e italico Este paragrafo nao possui estilo algum Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1736 07082023 1146 Desenvolvimento Web las com espacos Com isso é possivel que regras definidas por seletores de classes diferentes sejam aplicadas a um mesmo elemento Outro detalhe importante 6 que as classes nao sao restritas a nenhum tipo de tag especifica ou seja no exemplo da Figura 44 se existisse um elemento h7 com classe importante ele também teria seu texto exibido em negrito e italico Se quisermos ter certeza de que apenas elementos p de classe importante recebam esse estilo 6 possivel combinar os seletores escrevendo pimportante Nesse tipo de combinagao o tipo da tag sempre vem antes do seletor de classe Por fim também é possivel agrupar classes diferentes para criar regras novas Por exemplo podemos criar uma regra que paragrafos que sejam de classe urgente e importante tenham todas negrito italico e cor vermelha Para isso escrevemos a regra pimportanteurgente Neste caso a ordem entre os seletores de classe nao importa mas o de tipo vem antes sempre Podemos suprimir o seletor de tipo e escrever apenas importanteurgente nesse caso o seletor se refere a qualquer elemento que possua as duas classes ao mesmo tempo A Figura 45 ilustra um exemplo com agrupamento de classes Note que os dois seletores definem regras para a classe importante enquanto que o ultimo serve tanto para a classe importante como também para a classe urgente mas so é aplicado para paragrafos O texto entre indica comentarios no cddigo que serao ignorados pelo navegador Figura 45 Exemplo de seletor CSS com agrupamento de classes Arquivo CSS importante Funciona para qualquer tag com a classe importante texttransform uppercase pimportanteurgente Funciona somente para paragrafos tag p com as classes importante e urgente fontweight bold fontstyle italic color red Arquivo HTML httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1836 07082023 1146 Desenvolvimento Web p classimportante urgenteEste paragrafo possui duas classesp p classimportanteEste paragrafo possui apenas a classe importantep Exemplo Google Chrome Exemplo x v CG File homerwilltmpfsDiskexemplohtml wW O Se ESTE TITULO POSSUI DUAS CLASSES ESTE PARAGRAFO POSSUI DUAS CLASSES ESTE PARAGRAFO POSSUI APENAS A CLASSE IMPORTANTE Fonte do autor 2022 Seletores de atributos O CSS também permite selecionar elementos por atributos HTML especificos e valores especificos Usamos 0 nome do atributo entre colchetes para selecionar elementos que possuam o atributo especificado Por exemplo o seletor ahref seleciona todos os elementos a ancoras que tenham o atributo href definido E possivel selecionar elementos cujos atributos possuem algum valor especifico exemplo alhrefparagrafo ou que contenham uma parte do valor exemplo ahrefimpacta e outras possibilidades CSS Attribute Selectors sd Seletores de agrupamento Caso tenhamos um mesmo conjunto de propriedades que deve ser aplicado a diferentes seletores podemos reaproveitar codigo e agregar varios seletores em um Unico Para isso separamos os varios seletores usando virgulas Quaisquer seletores podem ser agrupados por tipo ID classe etc e a ordem do agrupamento nao faz diferengca no seletor A Figura 46 ilustra um exemplo de seletores agrupados Figura 46 Exemplo agrupamento de seletores Arquivo CSS httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 1936 07082023 1146 Desenvolvimento Web texttransform uppercase Arquivo HTML hlTitulohl1 pParagrafo 1p pParagrafo 2p a hrefhttpwwwnasagovLink para a Nasaabr a hrefhttpwwwimpactaedubr classlinkcomumLink para a Impactaa Me eC eles Ce eel Exemplo x v CGC File fhomerwilltmpfsDiskexemplohtml Q w ae ge TITULO PARAGRAFO 1 PARAGRAFO 2 Link para a Nasa LINK PARA A IMPACTA Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2036 07082023 1146 Desenvolvimento Web E possivel também escrever seletores de posicdo relativa a outros elementos Por exemplo podemos pegar um elemento que esteja dentro de outro usando os seletores de descendéncia ou elementos irmaos de outros dentro do mesmo elemento usando seletores de adjacéncia CSS Combinators sd O seletor nav a seleciona todos os elementos que estao dentro de um elemento nav Podemos usar qualquer outra combinacgao como por exemplo div p para selecionar todos os pardagrafos dentro de tags div ou entao divimportante purgente para selecionar todos os paragrafos com o atributo class urgente dentro da div com id importante A Figura 47 mostra um exemplo deste seletor Figura 47 Selecionando todos os links dentro de uma nav Arquivo CSS nav a color green textdecoration none Arquivo HTML nav a hrefhttpwwwnasagov abr a hrefhttpwwwimpactaedubr a nav a hrefhttpwwwnasagov a br a hrefhttpwwwimpactaedubr a httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2136 07082023 1146 Desenvolvimento Web e Exemplo x ra CC CM ean tiles Bll tema lal Q 0 Be Link para a Nasa dentro da tag nav Link para a Impacta dentro da tag nav Link para a Nasa fora da tag nav Link para a Impacta fora da tag nav Fonte do autor 2022 Existem também os seletores de adjacéncia e No primeiro seletor exemplo div p seleciona todo paragrafo que esteja depois de uma div desde que tenham o mesmo pai Ja o seletor div p seleciona apenas os paragrafos que estejam definidos imediatamente apos tags div Figura 48 Exemplo do uso de seletores de adjacéncia Arquivo CSS div p color red div p color green Arquivo HTML httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2236 07082023 1146 Desenvolvimento Web pParagrafo 2p div Contetdo da div 1 div pParagrafo 3p pParagrafo 4p pParagrafo 5p section section pparagrafo 6p section ExemploGoogle Chrome Exemplo ao w CG File homerwilltmpfsDiskexemplohtml Q i sr 2 Seen Paragrafo 1 Paragrafo 2 Conteudo da div 1 Paragrafo 3 Paragrafo 4 Paragrafo 5 paragrafo 6 Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2336 07082023 1146 Desenvolvimento Web As pseudoclasses e os pseudoelementos sao categorias adicionais que colocamos em seletores para ter mais flexibilidade na selegao dos elementos sem alterar o HTML que ja existe As pseudoclasses permitem definir estilos que dependem do estado dos elementos Por exemplo é possivel alterar estilos se um determinado elemento é o primeiro filho de um outro exemplo pfirstchild ou se um elemento a ancora ja foi visitado ou nao avisited ou se o cursor do mouse esta em cima de um link ahover ou se algum campo de formuldrio esta com foco inputfocus etc CSS Pseudoclasses sd Ja os pseudoelementos permitem definir estilos para partes especificas do elemento selecionado como a primeira linha de um paragrafo pfirstline ou a primeira letra de um item de lista lifirstletter CSS Pseudoelements sd Vamos praticar Para melhor entender como funciona essa grande quantidade de seletores existe um jogo online para esse aprendizado O jogo é feito inteiramente em HTML CSS e JS tem link para o cddigo fonte e treina em praticamente todas as combinagées de seletores Acesse ele em httpsflukeoutgithubio Priorizagao de regras Conforme nossas regras CSS vao crescendo e se espalhando nao é dificil esbarrar em regras que podem ser conflitantes como mostrado no exemplo da Figura 49 Neste caso as regras por classe urgente e importante aplicam estilos diferentes e parcialmente conflitantes no paragrafo Figura 49 Exemplo de regras conflitantes Arquivo CSS importante color blue fontstyle italic urgente color red fontweight bold Arquivo HTML httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2436 07082023 1146 Desenvolvimento Web ExemploGoogle Chrome Exemplo x v CGC File homerwilltmpfsDiskexemplohtml By iw 2 OO Paragrafo com duas classes Fonte do autor 2022 O navegador processa as regras CSS na ordem que ele encontra Portanto a primeira regra elementos de classe importante é aplicada ao paragrafo e ele ganha fonte azul e italico Ja a segunda regra elementos de classe urgente aplica no elemento uma fonte vermelha e negrito Neste momento o navegador substitui a cor azul pela vermelha uma vez que ha conflito e mantém o estilo de fonte em italico e negrito pois nenhuma dessas propriedades conflitam Considere agora o exemplo da Figura 410 onde ha uma inversao do ocorrido Figura 410 Exemplo de priorizagao de seletores Arquivo CSS importante color blue fontstyle italic urgente color red fontweight bold Arquivo HTML p classurgente idimportanteParagrafo com um id e uma classep httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2536 07082023 1146 Desenvolvimento Web Desenvolvimento Web Parte 04 s Para Refletir 01 e EXemplo x 7 er PLAT FAM UL ULL PLES ho C0010 en nS a 2 OO Paragrafo com um id e uma classe Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2636 07082023 1146 Desenvolvimento Web Ce PU CI UU QU GC Ue OU purge eu au referente a primeira regra Isso se deve ao mecanismo de priorizagao de regras do CSS que leva em consideracdo trés aspectos Cascade and inheritance sd 1 Posigao das Regras 2 Especificidade dos Seletores 3 Importancia Antes de aplicar as regras definidas no CSS o navegador faz um ranking de regras mais especificas e as aplica a partir da menos especifica até a mais especifica Esse grau de especificidade é baseado em valores que o CSS atribui para cada tipo de seletor contido na regra Nao somos obrigados a saber esses valores o navegador cuida disso mas é importante saber que Seletores de tipo e pseudoelementos sao os menos especificos Seletores de classe atributos ou pseudoclasses sao mais especificos que os anteriores Seletor por ID 0 mais especifico de todos Usar regras no atributo style definicdo inline é o jeito mais especifico de todos Portanto no exemplo anterior a cor azul permaneceu pois o seletor por ID é mais especifico do que o de classe portanto foi aplicado apos a de classe resultando na fonte azul Combinar diferentes tipos de seletores aumenta o grau de especificidade fazendo uma regra ser aplicada antes da outra independente da ordem de declaraao Existe uma palavra chave para fazer uma determinada propriedade ganhar em importancia de todas as outras e prevalecer nesse ranking que o navegador faz A declaracao important feita logo apds o valor de uma propriedade desfaz todas essas regras de especificidade da propriedade marcada com ela para garantir que seja aplicada Entretanto seu uso NAO é recomendado sempre que possivel pois ela torna a depuracgao de problemas e a manutengao do cddigo CSS muito complicada httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2736 07082023 1146 Desenvolvimento Web Cascade and inheritance MDN Web ODocs sd Disponivel em httpsdevelopermozillaorgen USdocsLearnCSSBuildingblocksCascadeandinheritance Acesso em 11 jul 2022 Css Selector Reference W3Schoolscom sd Disponivel em httpswwwws3schoolscomcssrefcssselectorsasp Acesso em 11 jul 2022 Css Attribute Selectors W3Schoolscom sd Disponivel em httpswwww3schoolscomcsscssattributeselectorsasp Acesso em 11 jul 2022 Css Combinators W3Schoolscom sd Disponivel em httpswwww3schoolscomcsscsscombinatorsasp Acesso em 12 jul 2022 Css Pseudoclasses W3Schoolscom sd Disponivel em httpswwww3schoolscomcsscsspseudoclassesasp Acesso em 13 jul 2022 httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2836 07082023 1146 Desenvolvimento Web pgeoc7 Desenvolvimento Web Parte04 Para Refletir 01 Saiba mals Clique no link abaixo e leia o guia do Google sobre fundamentos de CSS Aprenda CSS webdev Treine sobre seletores propriedades e pseudoclasses em CSS O objetivo do jogo é selecionar elementos da tela da maneira correta httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 2936 07082023 1146 Desenvolvimento Web f é nn 7 h i é tiS ra httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 3036 07082023 1146 Desenvolvimento Web Select the plates No worries youve got this Youre about to learn CSS Selectors Selectors are how you pick which element to apply styles to Exhibit 1 A CSS Rule pt marginbottom 12px Here the p is the selector selects all p elements and applies the marginbottom style To play type in a CSS selector in the editor below to select the correct items on the tableIf you get it right youll advance to the next level Hover over the items on the table to see their HTML markup v FLUKEOUT CSS Diner Where we feast on CSS selectors Github sd Disponivel em httpsflukeoutgithubio Acesso em 25 jul 2022 httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 3136 07082023 1146 Desenvolvimento Web Desenvolvimento Web Parte 04 s Para Refletir 01 Finalizando httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 3236 07082023 1146 Desenvolvimento Web Nesta parte buscamos os seguintes objetivos de aprendizagem Entender o que é 0 CSS Estudar a estrutura e sintaxe basica da linguagem Compreender os principais seletores CSS Aprender as principais propriedades da linguagem Integrar CSS e HTML de diferentes formas inline interno e externo Associar a prioridade de aplicagao das regras Reconhecer as principais unidades para definiao de cores e tamanhos Reflita sobre o conteudo que vocé explorou e faca um debate com seus colegas e professores pelo Classroom ou na prdéxima aula ao vivo live Fique atento ao prazo de encerramento da atividade continua que compodem esses conteudos de aprendizagem Esperamos que vocé tenha aprofundado seus conhecimentos durante os estudos e tenha aproveitado todo o conteudo apresentado httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 3336 07082023 1146 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 3436 07082023 1146 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 3536 07082023 1146 Desenvolvimento Web Desenvolvimento Web Parte04 s Para Refletir 01 Nucleo de Educagao a Distancia Faculdade Impacta Telefone 11 55935382 Hordrio de atendimento 10h as 18h httpssitesgooglecomfaculdadeimpactacombrdwp4pli1authuser1 3636