,

,

,

ee, ‘Aplca-se a qualquer elemento HTML. ‘Aplica-se a qualquer elemento HTML. ‘Aplca-se a qualquer elemento HTML. 151393010412023, 13:37 Linguagem de marcagéa e esilos - CSS Recursos de textos e fontes Texto A catllzagao 6e textos com 0 uso de CSS € divdica em duas partes. Em lnhas geval, os navegadores aplicam estilos padtées quando renderizam conteldos textuals. Vela a segulealgumas propriedades CSS que alterar esse comportamento pat. O layout do texto Espagamento entre os caracterese nas allnhamento em rlagio a0 container. Estilos das fontes Famila,tamanho, efeitos como negro ete Em linhas gerai, os navegadores aplicam estilos padtées quando renderizam conteidos textuas, Vamos conhecer, @ seguir, algumas propriedades (68S que alteram esse comportamento padréo Alinhamento de texto A propriedade textaign é usada para controlar o alinhamento do texto em razio do container ne qual es inserido. ‘Tal proriedade pode assumir quatro valores: lf right, center «justly. Como os romes indicam, essas propriedades alinham o texto & esquerda, & direita, 20 centro ou de forma justificada, Espacamento entre linhas [A propriedade line-height permite ateraro espagamento vertical entre as linhas de texto, Seus valores possiveisséo: Normal Valor padro do navegador (entre 1 € 1.2 em relagéo ao font-size, éependendo do navegador). Numero Valor inteiro ou decimal que serd mulipicado a0 tamanho da font. Comprimento YValor unidades come pixels, pontos, “em etc. ‘Armaneira mais recomendada para declarar 0 espagamento entre lirhas & ulizando 0 valor em nimero, Desse modo, 0 espacamento seré 0 resultado da maltplicagdo do valor definido pelo tamanho da fonte hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 16139soroa2023, 1337 Linguagem de marcagéo ¢ estes - CSS Exemplo Lne-height 1.5 font-size: 12px; onde valor 1.5 seré multiplicado pelo valor da propriedade font-size, resultando no valor de 18px de espagamento, Espacamento entre letras e palavras [As propriedades letter-spacing e ward-spacing permitem alterr o espacamento entre letras e/au palavras, Podem assumir valores de comprimento pt ete Fontes Em relago as fontes, ha propriedades CSS para define familia, tamanho, estilo, entre ouras possibilidades, Vamos conhecer as propriedades mais usadas? Font family ssa propriedade 6 utiizada pare defini a familia da fonteutiizada em pagina web ou em partes de seu conteddo, Utlizando essa propriedade, é possvel defini, por exemplo, desde uma nica fonte a umalsta de fontes, onde os seus valores so declarados em ordem de importéncla, da esquerda para direlta. Desse modo, caso determinada fonte no esteja disponivel no dispositive cliente, a préxima fonte definida serd usad, e assim eucessivamente, Caso nenhuma das fontes definidas estea disponivel na cliente, o navegador faré uso de uma forte padtio Estes so exemplos de familia de font: Aral, Verdana, Times New Roman (fonles com nomes compostos devem ser declaradas ullizando- se aspas), entre ouras, Essas fontes e algumas outras formam o corjunto chamado de Fontes Seguras para web (Web Safe Fonts). Sempre que possivel, deve-se dar preferéncia&utllzagio dessas fontes seguras, pois possuem suporte pela maiorla dos sistemas operacionals. Fontsize Apropriedade font-size &responsével por defini tamanho do texto. Seus valores podem ser definidas com a utilzagio de diferentes Uunidades de medida, coma pixels além de porcentagem ete Font-style Propriedade usada na estiizagSo de textos aplicanco o efeito de itlico. Seus valores possiveis so: normal (ou sea, ia oefito do texto, sendo 0 estilo padrio de todo element), talc e oblique (uma versio mais inclinada em relaglo a0 itaico). (0 peso de uma fonte é define com a utlizagSo dessa propriedade. Com ela, ¢ possivel aplicaro efeto de negrita em uma escala. Seus valores possiveis s80: normal, bo, lighter bolder (aumentam ou diminuem o peso da fonte em relaglo ao peso da fonte de sev elemento pal), e uma escala numérica de 100 2900, hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 171893010412023, 13:37 Linguagem de marcagéa e esilos - CSS Existem boas praticas e cudados a serer levados em considerago quando se trabatha com estilzaeao de fontes usando CSS. Um desses culdacios diz respeito ao controle sobre a possivl degrada que pode ocorrer na pagina, Portanto, deve-se tomar os devidos cuidados optando pela utlizago de uma lista de fontes e mantendo por timo as fontes genércas, como Serif, Sans Serf e Monospace, Desse modo, haverd maior ‘garantia controle sobre o que o usuério vera como resultado, Web fontes [As Web Fontes slo um importante recurso em termos de tipografa, Se antes a sua estilzaglo ficava restritaaqueles disponiveis nos sistemas, ‘operacionais dos usuarios, a partir da implementagdo da regra @fontface tomou-se possive autlizagdo de Web Fontes, Essa nova propriedade permite a utilzacdo de fortes que, ao serem definidas, so balxadas pelo navegador no momento de carregamento da pagina. Logo, sua utllzacéo permite um contrale maior do layout de uma pagina no que cz respeto as fortes, além da possibidade de serem usadas fontes com maior apelo Como utilizar a regra @font-face ‘A declarago da regra @font-face& eita pela definicdo de das princ/pas propriedades: font-family este. Na primeira, defnimos um nome para a familia da fonte que estamos importando, usando-0 a0 longo do arquivo CSS. A segunda aponta para a una qual o arquivo da fonte se encontra \Vamos vera seguir a fonte Awesome sendo declarada wait Toutes awevcme.wo6f2") format (*wof82"), SSEL(_//atvecnsentoncecataaisponivel/anee/avesone.wott") formac(“wot#"), ‘url ("//outrositeondeafonteestadi sponivel/fonts/awesone.cot') format ("enbedded-opentype") ‘Como podemos observar, além das propriedades font-family sre, hd outras que podem ser aplicadas as web fontes. Em relagdo a font-family, a partido momento da sua declarago, o nome definido poderd ser utlizado para estiizar qualquer outro elemento ao longo do CSS ~ considere que podemos tanto utiizar uma dnica familia de fontes para o documento HTML intero como a combinagdo de diferentes familias, 0 cédigo também mostra que as fontes incorporadas podem tanto estar hospedadas localmente quanto na internet Além disso, hé outros elementos na declaragie dos quals ainda ndo falamas. Séo eles: as fungdee local e format. CCabe destacar tamisém 08 diferentes tips existentes de Web fontes, Aprofundaremos esses elementos extra a segul. A fungao local ssa fungio indica ao navegador que, antes de fazer o downloaé da fonte defnid, deverdvetficar se elajéesté disponive na rmdquina do usuério. hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 181393010412023, 13:37 Linguagem de marcagéa e esilos - CSS A fungao format lararviros formatos de fontes,indicando ‘Também chamada de dia, essa funge opcional utiizada quando se deseja d justamenteo formato de cada uma, No exemplo acima, temas 08 formatos “wot, “waft2", “ti e “eo”. oa Como utilizar a regra @font-face sobre oassunto, acess verso online deste contedo, Tipos de Web Fontes Estio disponiveis, atualmente, alguns tipos de web fortes, cujaescolha deve considerarfatores coma @ compatiilidade com a maioria dos navegadores © 0 tamanho dos arquivos. Veja a seguir 08 tipos mais comuns de web fontes, Navegadores x Versées (iniciais com suporte) Tipo Google Chrome Firefox Intemet Explorer / Edge Safari Opera T1F/OTF 49 3 90 aa 00 hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 1988930/08/2028, 13:37 Linguagem de marcagéa e esilos - CSS Navegadores x VersGes (inciais com suporte) Tipo Google Chrome Firefox Intemet Explorer / Edge Safari Opera WorF 50 36 90 51 na ‘WorF2 360 350) - - 269 sve 49 - ~ a2 90 cor - - 60 - - Como visto na tabela, alguns tipos oferecem melhor suporte em relagdo aos navegadores mais atuas. Entretanto,ndo dio suporte as verses antigas. ts reforga a recomendagio anterior Atencao Considere eempre utllzar diferentes fontes para oferecer uma melhor expecincia aos usustios. Abreviaturas ou atalhos {As Folhas de Estilo permite a aplicagio de algumas propriedades utlizando abreviaturas ou atalhos. O exemple a seguir mosira as duas formas de realizar uma mesma declaragSo pt margin-top: 1epx; : mee PC nargin-bottom: 8px; margin: -10px- 6px 8px: 4px; margin-right: 6px; , margin-left: 4px; t pt padding-top: 1px; ni ESA - Bx padding: 1@px 6px 8px 4px; padding-right: 6px; } padding-left: 4px; ¥ hitpsistecine.azureedge netiepostorio!00212t/00458rindex himit 201393010412023, 13:37 Linguagem de marcagéa e esilos - CSS pt border-width: 2px; pt border-style: solid; border: 2px solid Dl#ccecec; border-color: Di#ccceee; | } Pt background-color: Ill#e00000; background-image: url (imagem. jpg) 5 background-repeat: no-repeat; background-position: top left; pt background: Ml #200000 url (imagem.jpg) Pt font-size: Lem; line-height: 1.5em,3 font-weight: bold; font-style: italic; font-family: verdana; pt font: 1em/1.5em bold italic: verdana; ? list-style: ¢ list-style: #000209; list-style-type: disc; , list-style-position: outside; 5 list-style-image: url (imagen. jpg); Ga Fontes Neste video, vemos as propriedades CSS relacionadas a fonts. Para assist a um video sobreoassunto acessea fo] D versio online deste conte. = hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 211393010412023, 13:37 Linguagem de marcagéa e esilos - CSS Falta pouco para atingir seus objetivos. Vamos praticar alguns conceitos? Questao 1 Sobre a esizagdo de textos e Fontes, os navegadores possuem estlos padrbes para esses tos de elemente, Lage, 6 corteto dizer que 0s estlos aplicados por padréo pelos navegadores existem para permit que 0 controle do layout do conteddo da pagina fue nas maos do usuario, e nfo do desenvolvedor. ‘os navegadores padronizam os estlos dos elementos de texto fonte para garantirem a usabilidade e acessibilidade das paginas. ‘CSS permite total controle sobre os elementos de texto e font, Com iss, todo © controle fica nas mos do desenvolvedor, © que poderd alterar qualquer aspecto desses elementos, torando assim a pagina uniforme, uma vez que no dependeré do estilo padrao dos navegadores, que slo diferentes entre si femora a CSS permita a estlizagdo de textos e fontes, 0s navegadares sempre terdo controle sobre o layout da pi podendo, inclusive, redefini os estlos CSS que ndo estejam de acordo com os padrBes de acessiblidade. C85 permite controle apenas parcial sobre os elementos de font, pols alguns navegadores padronizam os esilos desses F elementos. Por outro lado, em relagdo aos elementos de texto, o contole 6 total e exclusive dos desenvolvedores, Indopendentemente do estlo padtdo dos navegadores que veniam a exbir a pagina Parabéns! A alternativa C esta correta. ‘ASS permite total controle sobre qualquer elemento em uma pigina, Deve-se ter em mente, a0 utlizéla,ndo sé as preocupagées com ‘estética, mas também com usabildade e acessibiidade, garantinéo assim a melhor experiéncia possvel aos usuérios. Questao 2 ‘Assinale a afmativa coreta quanto utlizagao ce web fontes em relagdo as fontes CSS padrdes. or serem mais leves, uma vez que so natvas, as fontes definidas por meio de CSS sempre serio renderizadas, sem qualquer tipo de restriglo, em qualquer sistema operacional hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 221393010412023, 13:37 Linguagem de marcagéa e esilos - CSS © _Asweb fontes dever ser usadas em detrimento das fontes pacro por terem maior apelo visual ‘Amelhorescolha em relagdo aos estlos de fontes é néo usar nem fontes padrdo nem web fontes, ou seja, é deixar que ique a ceargo do navegador escolher a fonte padtio de acordo com as disponive's no sistema operacional do usustio. ‘Alem de fornecerem mais opgées, em termos visuals, as web fontes, quando usadas adequadamente, garantem uma menor > __degradacio das paginas, uma vez que née haverd dependéncia do ambiente do ususrio, quanto @ este possulr undo a fonte definica Para obter maior garantia® controle sobre o resultado final a ser exibido ao usuiri, evitando a ocorréncia de possive's _degradages na pagina, & necessétio opta pela utlizacéo de fontes genéricas em detvimento da utlizagdo de umalista de fontes. Parabéns! A alternativa D esta correta. 'As we fontes permitern um maior controle visual sobre como cada usuario vera o site, diminuindo assim a dependéncia de fatores externos, ‘como a cisponibilidade de fontes no computador do Vsitante 3 - Conceitos avancados de CSS Ao final deste médulo, vocé sera capaz de identificar os conceitos de box model, pseudoclasses, pseudoelementos e posicionamento Conceitos de box model Nos médulos anteriores, vimos os conceitos basicos de CSS, sua sintaxe, seus elementos e suas formas de integtapao com HTML. Abordamos também como aprimoraro design de paginas com os estilos de cores texto e fonts, hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 231393010412023, 13:37 Linguagem de marcagéa e esilos - CSS Neste médulo, vangaremos um pouce mais e percorreremos os conceilos de Box Model (modelo de caixas ou reténgules), Pseucoclasses @ Peeudoelementas e Pasicionamente, (0s elementos de uma pigina web si representados por uma caixa que possulo formato de um reténgulo, Uma boa analogla aqui seria ‘compararmos a marcagdo HTML a brinquedos de bloco. Nos brinquedos de bloco, por exemplo, hd pecas de diferentes tamanhos, arguras, alturas, cores e formatos. Tendo em mAos tais elementos, € 10880 papel montéos, encaixélos de forma harmoniosa para ao fina, obtermos o resultado esperado. Para chegar a esse resultado, & importante entendermos o comportamento, a composigao e as caractersticas de cada bloco, assim como os estos ‘que podem receber, Nesse sentido, dentro do cancelto de Box Model ~ que, em CSS, estérelacionado a designe layout ~ nossos boxes possuem quatro componentes principals: margem (margin), borda (border), preenchimento (padding) e conteddo (content), ‘Aimagem anterior nos ajuda a compreender a composiggo do Rox Model de maneira prética, Repare que foram definidas 3 caixas com o elemento «

, para cada uma delas, foram definidos diferentes estos, come largura, aura e corde fundo, Para a

com identificader box.exemple" {foram declarados ainda valoves para margin, padding, border e content. hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 240993010412023, 13:97 Linguagem de marcagéa e esilos - CSS |Armargem, como indicado do lado direto da figura Componentes do Box Model, fez com que um espago fosse criado entre primetra, a ‘segunda ea ultima div. Também cxiou um espagamento entre a box exemaloe a lateral esquerda da pagina. As margens de um elemento podem ser controladas com as propriedades CSS margin-op, margin-bottom, margirright e marginteft ~além do atalho margin, como visto no céaligo de exerplo ‘Aborda delimita a rea do elemento - altura elargura.Além disso, permite que uma cor diferente seja definica para essas extensdes do elemento. € controlada pela propriedade CSS border e derivadas ~ com as quais a largura, a cor € o tipo de borda podem ser definidos, © tamanho declarado para a borda é somado ao tamanho declarado para o elemento, compondo, assim, o seu tamanho final Padding 7 Para entender a fungio do padding, repare que os textos da primeira e da uima

estdo colados no topo e na lateral esquerda Entretanto,na div do melo, hd ur espagamento em relago ao topo e lateral esquerda, Esse espaco de preenchimento equvale a0 padding, ‘Assim como a margem, suas dimensdes so a altura e largura Alentese para a seguinte cferenca: margin dl respeto ao espago entre elementos: jé padding referese ao contetdo interno do préprio ‘elemento, além de fazer parte dele. Na prética, isso sigifica que adv #box_exemplo, ca largura fol declarada como 400 px e altura como 200px tem, na verdade, S00px de altura e 200px de largura. Ou sea, o paddling aumentou suas dimensées: width + paddingight + padding leit => 400px-+ S0px + S0px = S00px height + paddingtop + padding-bottom => 200px-+ S0px + S0px = 300px Para controlar 0 preenchimento de um elemento, so utlizadas as propriedades C88 padding-top, padding-bottom, paddingrighte paddling lett além do atalno padding Essa 62 rea interna do elemento, ocupada pelo seu contedde. Suas dimensées edo altura elargura Além disso, sua cor de fundo (background), cor da fonte (colt) de seu conteido, sua largura (width, min width, maxc-wiéth) e altura (height, mlrhelght, max-helght) podem ser estiizadas com CSS. o Resultado dos componentes do box model no navegador Neste video, vemos a representagio dos componentes do box model em uma pagina web. Para assist um video sobre oassunto,acessea versa online deste conteuda hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 251393010412023, 13:37 Linguagem de marcagéa e esilos - CSS Conceitos de pseudoclasses e pseudoelementos Uma declaragio CSS é composta pelo elemento que se deseja eslizar, pela propriedade a ser estlizada e pelo valor a ser atribuido.Além disso, vimos que o elemento pode ser definido de maneira ampla (utlzando-se o nome da tag), especiiea (pele seu identifieador Unica) e seletiva (coma utlizagdo de classes). Um elemente fil pode, ainda, herdar as propiedades de um elemento pa. Todos esses modes de defini estila so bastante abrangentes, Entretanto,existem algumas formas especiais e mult tes para se aplicarestlos: as psoudoclasses e os pseudoslementos. Veremos a seguir as ‘suas definicbes e como utllzéas, Pseudoclasses [As pseudoclasses so utlizadas para defnirum estado especial de um elemento, Por exemplo, pademos mudar o estilo de um elemento a0 passarmos o mouse sobre ele (evento mouseover). Esse nove estilo &temporério, ou soja, ndo corresponde ao seu estado natural. Também podemos mudaro estilo de um lik que fol clicado, alterando sua cor eu alguma outa propriedade. A sintaxe para declaraglo da pseudoclasse & composta pela palavra-chave cerrespondente ao nome da pseudoctasse precedide pelo sinal de dois pontes. Vela o exemple @ segue dichoverbackground-coler:#000000;) Peeudoclasse Como declarar Para que serve active active Seleciona todos 03 links ativos. checked inputtohecked Seleciona todos 0s campos input checados fiest-cild Viist-child Seleciona todo primeira item de list, lastchild Wiast-hild Seleciona todo time tem de Ista, hover divhover Seleciona todas as divs no evento mouseover, Pseudoelementos (0s pseudoelementos so palavras-chave que, adiclonadas/relacionadas a um seletor, petmitem que uma parte espectica dele sea estlizada, A imagem a seguir mostra duas declaragdes CSS, uma sem e outra com 0 uso de pseudoelemento. Em ambas, 6 defnida que a primeira letra de texto ‘em um pardgrafo tenha tamanho e cor diferentes do restante do texto, hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 261393010412023, 13:37 Linguagem de marcagéa e esilos - CSS ‘al east oe peatooectos ‘Ao analsar,codificaretestar 0 cécigo acim, vocé percebera que, no primeiro parégrafo, fo necessario utilizar um elemento a mals, @tag< span >, ‘20 redor da primeira letra do texto para poder estlizéla, Jno segundo pardgrafo, o mesma estilo fl alcangado apenas com o use do pseudoelementofrstetter. A utlizacéo do pseudoelemento diminul a quantidade de cédigo, torsando sua compreenséo mais clara CCabe destacar outro ponto do exernpo relacionado &sintaxe dos pseudoelementos:neles s80 usados dols pontos duplos (ou dobrados) para a declarago, Esse uso proposital é para diferenciéos das pseudoclasses, Exempla Para que serve sates imgzater Inseri conteido apés 0 elemento indica. before iisbetore Inserrcontedo antes do elemento indicado, frst leer prfiratleter Selecionara primeira letra do elemento indicado fist ine pristine Selecionar a primeira linha do elemento indicado selection pseection Seleciona a porgio de um elemento que &selecionado pelo usuatio o Pseudoclasses e Pseudo-Elementos Para assist ur video sobre o assunto,acessea versio online deste conteddo. Posicionamento hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 271393010412023, 13:37 Linguagem de marcagéa e esilos - CSS Para tratarmos de posicionamento em CSS, precisaremos recorrer a alguns conceitos ja vistos ~ sobretudo aos relacionados ao Box Model, além de relembrarmos que os elementos HTML possuem padres de estilo ¢ comportamento naturas, Alguns desses padtées diferem um pouce de um navegador para outro, Aim disso, podem ser modifcados por CSS, onde as tas dferencas slo resolvidase, de fato, um padro de compartamento pode ser defnid. Conceitos de layout Layout em colunas e Grid Layout Esses dois conceitos séo importantes quando tratamos da estratura visual de paginas HTML. Em uma definigdo simplista, ambos tratam de como (08 elementos boxes poder ser posicionados organizados em uma pagina. Veja na figura layout CSS em colunas, logo a seguir a estutura em ccolunas de uma pagina Em termos de HTML, apenas utlizando boxes (header, footer, section aside, nay, dv etc), os elementos fcar'am empilhados uns sobre os outros. Para aplcaro layout visto na figura layout CSS em colunas e posicionar os elementos na pagina precisaremos uiilizar CSS, A propriedade position A propriedade CSS responsive pela psicionamento é a position. Seus valores possives ao: stati, relative, fixed, absolute e sticky. Além disso, ‘as proptiedades top, bottom, right e left so usadas em conjunto, a fim de definir os valores das respectivas dstancias e, consequenternente, do posicionamento, Tals propriedades, inclusive, s6 podem ser usadas quando for defnido um valor para position. A seguir apresentaremos cada uma dessas cinco propriedades. Position static Essa & a posigdo padrio dos elementos. Desse mati, elementos defnidos como static ou sem a propriedade postion so posicionados naturalmente, de acordo com 0 luxo normal da pga, no assumindo nenhuma localizagéo especial, Inclusive, as propriedades top, bottom, right © left nfo sio refletidas em elementos estaticos. Position relative ‘A definigdo da propriedade ‘postionelative" para um elemento faz com que ele seja posicionado de modo relativo & sua posigo normal. Com isso, ‘20 definirmos valores para as propriedades top, bottom, right elf, alustamos @ sua posigéo em relacéo & sua posico natural Position fixed hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 281393010412023, 13:37 Linguagem de marcagéa e esilos - CSS (0 valor Fixed ¢ utlizado quando desejamos defiir uma posiglofixa para um elemento na pagina, Com isso, ndependentemente do serall, de rolarmos a pina para cima ou para balxo, 0 elemento sempre permanecera.no mesmo local. As propriedades top, bottom, ight e left devern ser usadas para defniro ugar no qual o elemento seréfixado, Esse elemento & posicionado em relagdo & viewport/janela do navegador. Com isso, ele “*iutuaré” sobre os demais conteddes da pagina ficando fixo onde foi colacado e no ocupande, assim, a posigao original na qual foi declarado no HTML. Position absolute [A posigdo absolute faz com que um elemento seja posicionado em relagdo &localizacéo do seu elemento ancestral mals préximo ~ 0 qual também dverd estar pasicionado, ou seja, ndo poderd ser stale. ‘Quando a elemento definide como absolute foro primeir elementa da pagina ele entéo seré posicionado em relagdo a0 < body >. Com isso, tal elemento acompanharé arolager da pégina Position sticky Esse valor para a propriedade position faz com que um elemento seja posicionado com base na posi¢éo de rolagem da pagina (scroll). Comisso, ‘seu comportamente vara enreo relative & 0 fixado, ependendo da posico do scral Tal propriedade & mais recente em termos de especificagzo, assim no possui suporte em todas as versées dos navegadores. Eusada, normalmente, quando queremas cri um efeito de sobreposi¢io de contetido, Na prética,o elemento évsualizado ao abrirmas uma pagina, Ac rolarmos para baixo, ele se mantém fixo, com os demais conteddos passando sob ele. o A propriedade position Para assist um video sobre oassunto,acessea versa online deste conteuda Falta pouco para atingir seus objetivos. Vamos praticar alguns conceitos? Questao 1 £m relagdo as propriedades e cimensSes do box model representado pelo elemento « dv >, cujosestilos so defnidos abaixo,assinale a afrmativa coreta di \width'S00pximportant border: 5px sold black; hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 291393010412023, 13:37 Linguagem de marcagéa e esilos - CSS padding-top: 10px padding-right 10px: padding-bottom: Spx; margin-left sopx ) | Ailargura fina da div sera de S00, 8 Alargura fnal da div serd de 520px © Alargura final da div serd de 510px —Alargura final da div serd de 570px. & ——Alargura final da dv seré de S90px Parabens! A alternativa B esta correta. Como visto, as cimens6es de largura e altura so alteradas de acordo com a borda e o padding definidos. No exemplo da questo, temos: '500px + 5px (borda da dita) + Spx (borda da esquersa) + 10px (padding da creta) = 520. Questao 2 No fragmento de c6digo abaixo, a propriedade position com o valor relative & definida para o elemento « p>. Considerando o cédigo HTML © 85, assinale a afrmativa coreta,

Texto

mt positionselative; ) tag

sera posicionada de forma relativa em relagao ao seu elemento ancestral, ou sea, em relagao a < dv > B_Atag

seté posicionada em funglo da tag , uma vez que nfo fol dectarada uma propriedade position para a< dv > © tag

ser posicionada da mesma forma como se nenhuma propriedade de posicionamento Ihe fosse stribuida, hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 301393010412023, 13:37 Linguagem de marcagéa e esilos - CSS Para assumie a posigSo relative, tag

precisara estar lcalzada fora da < dv > ou de qualquer outro elemento pal Por estat localizada dentro da

, a tag

seré posicionada em fungio da tag , que é um elemento ancestral da tag dive Parabéns! A alternativa C esta correta. ’As propriedades de posicionamento precisam ser utlizadas em conjunto com as propriedades top, bottom, right e left ~e seus respectivos valores. Do contréro, nenhuma mudanga seré aplicada ao seu posicionamento. No cédigo acima, a declaracao CSS sera ignorada pelo navegador. 4 - Frameworks CSS Ao final deste modulo, vocé sera capaz de reconhecer Frameworks CSS. Visao geral Frameworks e CSS Como visto nos médulos anteriores, a CSS 6 uma tecnologia poderose,Nexvele,muitas vezes, complexa, Sdo vias propredades e multos valores possiveis. Indmeras combinagSes podem, inclusive, e sobrepor umas as outa. ‘Amarcagdo HTML tem um comportamento natural em relagdo aos elementos, além de pequenas variagées de um navegador para outto. Por outro lado, hé bastante similaridade em relagio aos layouts de diversos sites. O sites de e-commerce, por exemple, costumam ter um layout bem parecide para facta a experiéncia do usuéro ao trafegar entre um ¢ outro, Nesses casos, 6 comum ser utlzad o ditado de que ndo é necessério reinventar a roda, Esse ditado, inclusive, 6 um bom ponto de partida para falarmos sobre frameworks CSS, a comecar pela sua definigdo Frameworks podem ser definidos como um conjunto de componentes reutilizaveis que permitem a otimizagao do processo de programaga hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 311393010412023, 13:37 Linguagem de marcagéa e esilos - CSS Nesse contexto, a maloria dos frameworks CSS mantém similaridades entre si, além de prés e contras espectios, que v8o desde a facildade de ‘aprendizagem ao suporte e & documentacéo disponives, entre outros fatores Logo, a escotha de um framework pode se dar por fatoresobjetivos, relacionados as suas caractersticas ou aos requisitos especificos de um determinado projeto, ou mesmo por fatoressubjetivos, como gosto pessoal. Ao decidir utilzar um framework, é fundamental ter em mente 0 quarto le poderé auxliélo em seu trabalho, Para isso, ¢ importante conhecer suas as principals caracteristicas,além das vantagens e desvantagens de cada ope. A seguir, trés dos principa's frameworks CSS existentes sero apresentados: Bootstrap, Foundation e Semantic UL Frameworks Bootstrap Fol desenvolvido pela equpe do Tuter em 201, posteriormente, passou a ser mantida de modo independente. Sualicenga é open source e, _atualmente, é 0 framework CSS mais popular ‘Trate-se de um framework responsivo baseado na premissa mobilefist~ cujo foco inicial so os dispositvos movelse, em seguida, 0s desktops, Possul componentes prontos para uso (readtowse) desenvolvidos em HTML, OSS e Javascript, Sistema de grid (0 Grid Layout é um sistema de layout generallzado, Com énfase em linhas e colunas, pode parecer um reterne a0 layout da tabela, mas hi muito mals no layout da grade do que no layout da tabela (MEVER, 2017). Uma das principals caracteristicas dos frameworks CSS 6 0 seu Sistema de Grids. Enquanto a grid é um elemento de design, uma ferramenta que serve para ordenar elementos vieuas,o Sistema de Grid em um Framework consiste em uma série de containers, inhas colunas que server para arranjare alishar contetido. Embora compartir da mesma fundamentagdo teérica, hd pequenas diferengas de implementacdo entre os frameworks. ‘Aid do Bootstrap, por exernplo, possul 12 colunase 5 breakpoints esponsives, que sie pontos de quebra nos quais o layout seré ajustado para atendera diferentes resolugdes de ela. Esses breakpoints so: Extra small Small Medium. Large Na prética, esse sistema deve ser coretamente utiizado para que todos os elementos da pina sejam ainhados e visualizados em diferentes tamannos de tela, Extra small ‘small Medium Large Extra large <8 76px 2576px 2768px 2992px 21200px ‘Max container width None auto) S40 7200 860% 1140px hitps:stecine azureedge netitepostoriol00212t/00468rindex hime 3213930/08/2028, 13:37 Linguagem de marcagéa e esilos - CSS Extra smi ‘smal Medium Large <576px 576% >768px 2992px 21200px lass prefix cok ccokmd: ceollge col Hof columns. 2 ‘Gutter wieth 30px (15px on each side of a column) Nestable Yes Column ordering Yes Como utilizar o Bootstrap ara utlizar © Bootstrap, 6 necessérlo Inclut a sua biblioteca, composta por dels arqulvos: um CSS e outro Javascript. Essa instalagdo & simples © pode ser feta pela inclusdo dos respectivos arquivos dretamente na HTML, (uta forma de instalagdo ¢ por meto de ferramentas gerencladoras de pacotes, como npm ou gem. Em termos de dependénc completa de todas as suas funcionalidades, énecesséilo alnda incl outras bibllotecas Javascript a Jquery ea Popper para autlizagio Por dtima & importante ter cuidado com as verses do framework em tetmos de compatibiidade, tanto em relagdo a bibliotecas de terceitos ‘quanto em relago a funcionalidades em desuso/depreciadas. Comentario (© Bootstrap possul inimeras classes predefiidas para as mais diversas necessidades. Para ullzélas, 6 preciso corbin las com uma marcagio HTML predefinida, conforme dacumentagdo oficial Por exemplo: hd uma classe que pode ser aplicada em tabelas para ctiaro eflto zebra {atterndncia de cores entre as linhas da tabela) a “table-striped". Para usar essa classe, basta incluir seu nome no aributo class de uma tabela, oe Demonstra¢do usando framework Boostrap "Neste vide, veremos sobre 0s conjuntas de componentes reutlizavels: os frameworks CSS, Para assist um video sobre oassunto,acessea versa online deste conteuda hitpsistecine.azureedge netiepostorio!00212t/00458rindex himit 33139soio200, 18:37 Linguagem de marcgio e sos - CSS Foundation (0 segundo framework @ ser abordado é 0 Foundation, ciado em 2011 e que esté entre os mals conhecidos e utlizados. & um framework esponsivo, baseado na abordagern mobiles Sua principal caractrstica 6 fazer uso nati do péprocessador de CSS, charade de SASS. Sistema de grid (0 Sistema de Grid do Foundation também & compost por 12 colunas. Nas versies mals ecentes, 0 slstema bésico de grid fo substtuide por um nove sistema, o XY grid. Em tal sistema, novas funcionalidades foram adicionadas, como ainhamento vertical e horizontal, dimensionamento automiatico e grid vertical completa Como utilizar 0 Foundation A forma de utilzago do Foundation é semelhante & da Bootstrap: é preciso inclut um arquive CSS e outro Javaserpt ou ent wtlizar um ‘erenciador de pacates. Além disso, é recomendado também inelur a Biblioteca jQuery. [Arespelte da compatibilidade aplica-se 0 que fol dito anteriormente:algumas funcionalidades so descontinuadas entre uma versio ou outra. Logo, 6 preciso tomar cuidado para que nada deixe de funcionar ao atualizarversbes. Comentario Em termos de recursos extras, destaca-se nesse framework a existéncia de recursos especticas para a criagéo de HTML responsivo para e-mail ‘Trate-ce do Foundation for Emals Semantic Ul Mais recente entre 0s 3 frameworks aqui apresentados, 0 Semantic UI se destaca por utlizar, nativamente, um préprocessador CSS, oLESS, € a biblioteca Javascript Jquery. Também é um framework open source, Uma importante particularidace desse framework é que suas classes utilizam sintaxe de inguagem natural, como substantvos, por exemplo, para vincular conceitos de maneica mais intutva, Como utilizar o Semantic UI ‘A sua incluso 6 semelhante a dos dema's frameworks vistos anterlormente, ou sea, por melo de arquvos CSS e JS, além da Biblioteca Query ou Via gerenciadores de pacotes Outros frameworks ‘Além dos 3 frameworks vistos anterormente, hd véros otros clsponives,sendo 08 mais conhecidos os seguintes Pure Considerado o framework mis leve, fo! desenvohido pela Yahoo. hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 3403930/08/2028, 13:37 Linguagem de marcagéa e esilos - CSS Materialize CSS ‘Baseado no Material Design, ambos ctiados pelo Google e utilizados em seus produtos. Bulma Framework baseado unieament CSS, nd faz uso de Javascript Skeleton Framework minimalista. Possul apenas 400 linhas de c6digo. Em suma, como visto em suas definigdes e em seus exemplos de utlizagao, os frameworks tém a mesma finalidade, servindo para as mesmas fungdes. Em outras palavras, tudo que é passive riar com um framework também é passivel com outro. or outro lado, hd prés e contras em cada um deles, como tamanho do framework e seus impactos no carregamento da pagina, faciidade ou lficuldade de aprendizagem e simplicidade de sintaxes. Hi varios comparativos na intemet que aprofundam essa discusso, elencando os pontos fortes efracos de cada framework. Na pratica, é recomendavel, sempre que possivel, utilizar um framework. Escolha aquele que melhor se adequar & sua necessidade. Na davida, escolha 0 mais utilizado ~ afinal de contas, ele nao deve ser o mais usado a toa. o Foundation e Semantic Ul Para assist um video sobre oassunto,acessea ‘versao online deste conteudo, Vantagens e desvantagens da utilizac¢do de frameworks 'Na pitca, no existe uma recomendacko definitva sobre usar ou néio um framework ern um projete web. Se, por um lado, a tlheagso de frameworks ajuda a otimizar 0 tempo de desenvolvimento, por outro lado, tra um pouco do controle do programador sobre o que esti sendo feito, ‘uma vez que néo 6 recomendado alterar 0 comportamento padr8o dos cédigos forecidos pelos frameworks. A sequi listeremos algumas vantagens, bem como desvantagens, que so citadas de maneira mais comumente ‘Como vantagens, podemos destacar Padronizacao do cédigo hitpsistecine.azureedge netiepositorio!002124/00458rindex himit 3513930/08/2028, 13:37 Linguagem de marcagéa e esilos - CSS Muito vatido, sobretudo quando se trabaiha em equipe, Economia de tempo io & preciso crar todo 0 eédige CSS do zero Seguimento de padrées 0s frameworks estdo sempre antenados as especiicagdes e recomendagdes oficial. Compatibilidade entre navegadores Funcionam em diferentes navegadores, [A segut Istaremos algumas desvantagens ‘Tamanho/peso do framework Pode impactar no carregamento da pégina Restricées de design LLembre-se de que o framework possul um layout padrao, baseado em grids. Isso pode acabarlimitando a imaginago no momento de ctiagdo do design ou impactando no tempo de desenvolvimento para que seja passive encaixar 0 layout criado no pa estabelecdo pelo framework Curva de aprendizado [Aprencer a utllzar adequadamente um framework pode levaralgum tempo, hitpsistecine.azureedge netiepostorio!00212t/00458rindex himit 3813930/04/2028, 13:37 Linguagem de marcagéa e esilos - CSS Controle sobre o codigo Sendo obrigado a utlizar a estrutura definide pelo framework, acabemos por perder o controle total sobre o cécigo, Além disso, utlizar frameworks sem uma boa base teérica sobre CSS pode limitaro seu entendimento e aprendizado, o Vantagens e desvantagens da utilizacao de Frameworks eee ee eared ee Vero one deste conto, Ny) Falta pouco para atingir seus objetivos. Vamos praticar alguns conceitos? Questao 1 Em relagdo a utlizagdo de frameworks, assinale a afirmativa incoreta ualquer componente ou estilo cisponibiizados pelos frameworks podem ser produzidos apenas com cédigo CSS e Javascript, 04 seja, sem a utlizagao de frameworks. 0s frameworks so um importante recurso que auxiliam no desenvolvimento, diminuinds o tempo, padronizando 0 cédigo ® g2rantindo uma maior compatbildade entre navegadores e diepositivos Para um melhor resultado, 6 importante ular vérias frameworks em um mesme projeta. Com isto, é possivel aproveltar 0 que “ada um oferece de melhor. [Nao ha um melhor ou um plor framework. Cada um oferece vantagens e desvantagens, prs © contras. Inclusive, alguns podem ser a melhor opedo para um determinado projetae para outo no, hitpsistecine.azureedge netiepostorio!00212t/00458rindex himit 371393010412023, 13:37 Linguagem de marcagéa e esilos - CSS -Aescolha do framework a ser utlizado ¢ complexa, pols eles s80 bem distintos, Apenas uma minora das frameworks CSS rmantém similaridades entre s Parabéns! A alternativa C esta correta. A.llizagdo de virios framewarks CSS em um mesmo projet pode causar inimeros problemas, por exemplo confltos de estilos, uma vez que alguns compartham entre sios mesmos nomes de seletores. Logo, éImprescindvel utilizar apenas um framework por projet. Questo 2 Dentre as opgdes abaixo, assinale a que néo representa uma vantagem em se utlzar frameworks CSS. A Flexiblidade e adaptabitcade © Possibiidade de apcendizager, © Auxtlo-em tarefasrepettivas. Colaboragiono trabalho em grup. F Garantia de controle sobre 0 cédigo Parabéns! A alternativa A esta correta. O sistema de Grids dos Frameworks, embora bastante di acaba fazendo com que, em multas situagdes, seja necessério adaptar layout do ‘site a0 Framework no o contri, Considerac6es finais Este estudo nos apresentou a CSS, inguagem de estilo responsdvel pela camada visual em uma pagina web e pela consequente separagdo ene apresentaglo e contedide, Ao longo dos tépicas, foram apresentadas a sua deingdo, sua sintaxe, seus elementos, suas propriedades e formas de Integragdo com HTML. Alguns aspectos foram abordados de maneira mais aprofundade, como as propridades relacionadas a textos es fontes, ‘a pseudoclasses, os pseudoelementos e os conceitos de box model e de posicionamento, Ao final, um importante recurso fol descrito~ os frameworks CSS. Toda a abordagem te6ria fo permeada por exemplos alguns exercicios a fim de estimular a apicagdo prética e uma melhor _assimilagdo dos contetidos apresentados. hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 381393010412023, 13:37 Linguagem de marcagéa e esilos - CSS Q Podcast Para encerrar,ouga um breve resuma sobre a linguagem de marcaglo eestilos CSS. Para oui odio, acesse versio nine dete conte, Referéncias Meyer, €; WEVL, E. CSS: The Definitve Guide [6.1] O'Reilly Media, Inc, 2017, Explore + Para aprofundar seus conhecimentos sobre o Sistema de Grids, ecomendamos a letura do lvro CSS: The Definitive Gulde, de Eric Meyer e Estelle Weyl. Indicamos também a pagina da W3Schools, ue disponibiliza inimeros tutorials sobre os mals dversos assuntos relacionados ao desenvolvimento web. Busque por + C88 Pseudoctasses; + Google Fonts; 3S ROB Color, + CSSHSL Cole, Indicamos também uma galeria de web fontes da Google com suporte em tados os navegadores, chamada de Google Fonts, Mozila também dlisponibiiza diversos tutorials e artigos de suporte ao desenvolvimento web. Sugerimos a letura de: + Fundamental text and font styling + CSS Mecia Queries, Se quiser praticar a elaboragio de cédigos e visualizar a renderizagio no navegador, Indicamos dois recursos omine- 0 Codepen e o JSFiddle hitps:stecine azureedge netitepostorio!00212t/00468rindex hime 39139

Você também pode gostar

• Plano de Ensino - Cálculo II - Ciências Da Computação

  

  Ainda não há avaliações

  Plano de Ensino - Cálculo II - Ciências Da Computação

  2 páginas
• Plano de Ensino I. Identificação: Universidade Federal de Goiás Câmpus Jataí

  

  Ainda não há avaliações

  Plano de Ensino I. Identificação: Universidade Federal de Goiás Câmpus Jataí

  5 páginas
• Plano de Ensino (Matemática Discreta 2014.2)

  

  Ainda não há avaliações

  Plano de Ensino (Matemática Discreta 2014.2)

  5 páginas
• ACFrOgAlspoOJLScn18 - yjGKbTw Xezl1rsitw5uU oIJx3bm1PQXFKBIDJsrb06ZwjqutLZfaOqhHXrzoD8O5SkO1ZH - CRri0EjsnFopTWaN6mLbU kZSBjRBSH56U

  

  Ainda não há avaliações

  ACFrOgAlspoOJLScn18 - yjGKbTw Xezl1rsitw5uU oIJx3bm1PQXFKBIDJsrb06ZwjqutLZfaOqhHXrzoD8O5SkO1ZH - CRri0EjsnFopTWaN6mLbU kZSBjRBSH56U

  4 páginas
• Product Backlog User Stories

  

  Ainda não há avaliações

  Product Backlog User Stories

  1 página