‘09104/2028, 10:37 FUNDAMENTOS DE DESENVOLVIMENTO DE SOFTWARES AULAS Prof. Leonardo Gomes(09104/2028, 10:37 UNINTER CONVERSA INICIAL Vamos dar continuidade aos contetidos de desenvolvimento de paginas web discutindo outra tecnologia de muita importéncia para ditar a aparéncia das paginas. Essa tecnologia é 0 cascading style sheets (CSS, folha de estilo em cascata), em que apenas trocando 0 arquivo CSS de uma pagina web é possivel alterar completamente o layout de um mesmo contetido, tecnologia mais relevante para essa funcdo. Vamos aprender tanto a sintaxe geral quanto especificacées dos principais comandos da linguagem de estilos. TEMA 1 — DEFINICAO DO CSS © cascading style sheets (CSS, folha de estilo em cascata) controla como os elementos so apresentados na tela, enquanto o HTML diz 0 que a pagina deve ter, por exemplo, e indica onde estdo os paragrafos, imagens, listas etc. © CSS vai dizer como esses paragrafos devem ser, que fonte de texto utilizam, qual o tamanho da imagem, que cor deve aparecer a numeraco da lista e assim por diante. E quanto ao nome cascata? O que quer dizer? Assim como uma cascata no mundo real é composta por sucessivas quedas d'agua, o estilo das paginas segue uma organizacao similar. E possivel criar varios arquivos para definir a aparéncia da pagina. Primeiramente, um layout bem genérico de todo o site como um todo, depois um arquivo mais especifico descrevendo uma pagina em particular, outro mais especifico ainda para descrever como a tabela deve funcionar dentro daquela pagina em particular, por exemplo. Cada elemento HTML vai combinando essas instruces de layout seguindo todas tanto quanto possivel e, em caso de conflito, optar pela instrugdo mais especifica e menos generalista. hitpslunvitus.unintr.comfavalwebiroa! anear042020, 1097 UNINTER, E possivel descrevermos HTML e CSS dentro de um mesmo arquivo e colocar tudo em um Unico arquivo .html. No entanto, como boa pratica de escrita de paginas web, é interessante separar em um arquivo .¢ss préprios, tornando, assim, 0 projeto mais organizado. Pense que, quando uma atualizacao na pagina for necesséria e ela afetar apenas o estilo da pagina, somente o arquivo .css correspondente precisard ser modificado Em versdes mais antigas do HTML, como a verso 3.2, algumas fungdes de estilo foram adicionadas na linguagem, por exemplo: a tag font servia para definir fonte de texto, entre outros exemplos. E esse tipo de estratégia para definir estilo se mostrou muito ineficiente pela quantidade de retrabalho gerado. Vamos supor que vocé tenha um site composto por 50 paginas web diferentes. Cada pagina web tem seu proprio arquivo .html e, como as paginas pertencem ao mesmo site, a ideia é que todas compartilhem a mesma imagem de fundo, estilo de texto, cores, organizacao dos botées nas paginas entre outros. Todos esses cédigos de estilo eram entao repetidos 50 vezes ~ afinal, sao 50 arquivos diferentes e, caso em algum momento no futuro desejassemos trocar o tamanho da fonte, essa mudanga deveria ser feita 50 vezes. Vale salientar que, além de ser ineficiente do ponto de vista da quantidade de trabalho envolvido, s4o 50 oportunidades de um erro acontecer. Ja com o CSS, esse problema do retrabalho na definigao do estilo das paginas foi solucionado, uma vez que vocé pode escrever o estilo das paginas uma tinica vez, em uma linguagem prépria para descrever estilos, e as 50 paginas podem carregar esse mesmo arquivo, evitando retrabalho. Ainda é possivel utilizar tags de estilo HTML; pontualmente, pode ser interessante ainda fazer pequenas intervengées dessa maneira, porém, reforgando 0 que ja foi dito, é uma boa pratica de desenvolvimento e o estilo deve ser colocado em paginas .css préprias. Outra vantagem do CSS é que foi criado pela propria World Wide Web Consortium (W3C, Consércio da Rede Mundial de Computadores), que é a organizacdo composta por um consércio de diversas empresas, érgéos governamentais e independentes e responsavel pela padronizacéo da WWW. E, sendo assim, ela é completamente integrada ao HTML, especialmente a partir da versao 5 A pagina da w3schools, além de possuir excelente material sobre html, também detém um 0 material sobre CSS. Da pagina da w3schools, veja um exemplo de uma mesma pagina HTML modificando apenas 0 contetido do arquivo de estilo CSS hitpslunvitus.unintr.comfavalwebiroa! anoon4i2023, 10.27 UNINTER, Figura 1 — Representacao dos diferentes estilos que uma pagina pode assumir modificando apenas 0 CSS sem modificar o contetido HTML. A primeira representacao no canto superior esquerdo nao possui estilo nenhum. O contetido original pode ser encontrado no link . Acesso em: 23 fev. 2023 mente Welcome t» My Homepage Page,Different eats, No siyles Delete Tee Co Homepage Use the menu to select diferent Stylesheets TEMA 2 - SINTAXE Neste tépico, vamos discutir a sintaxe do CSS, novamente recomendamos para testes o editor de texto do visual studio code ou o site do jsfiddle, por meio do link (acesso em: 23 fev. 2023). Caso vocé esteja fazendo o teste por um editor de texto, recomendamos criar uma tag como ultima coisa dentro do contetido da tag head da sua pagina, tudo o que hitpslunvitus.unintr.comfavalwebiroa! ano‘09/04/2028, 10:37 UNINTER estiver dentro da tag style sera cédigo CSS e néo mais HTML. Se estiver testando por meio do jsfiddle, pode editar no documento CSS a parte. Experimente criar no html da pagina um cabecalho h1 com algum texto qualquer, por exemplo

sou um teste

. Em um primeiro momento, deverd aparecer em preto, em fonte maior que o texto normal, o contetido da tag. Porém, se desejarmos modificar 0 comportamento das tags h1 em nosso documento, podemos fazer no CSS 0 cédigo h1 { colorblue; font-size:12px). Esse cédigo CSS ira transformar 0 comportamento das tags h1 para fonte tamanho 12 pixels e cor azul Vamos analisar em detalhes. Seletor Declaracao © primeiro trecho dos comandos CSS é 0 seletor e, como o nome sugere, trata-se da selecdo Propriedade Valor Propriedade Valor dos elementos afetados. Na sequéncia entre chaves, vem a declaracao, seletor e declaracao sio separados por um espaco. A declaragéo pode alterar diversas propriedades — no exemplo, esta alterando as propriedades color e font-size, que, respectivamente, modificam a cor e o tamanho da fonte do texto. Perceba que, logo apés cada propriedade, vem o simbolo dois-pontos, 0 novo valor da propriedade em questo. Por fim, ponto-e-virgula fecha a definigéo de cada propriedade. A propriedade color foi alterada para blue — que, do inglés, significa azul. Tem diversas formas de definir cores no CSS, e 0 nome das cores em inglés é uma dessas formas. A propriedade font-size foi alterada para 12 pixels, mas existem varias formas de mensurar tamanho de fonte no CSS, e contagem de pixels é uma delas também. E importante observar que essa mudanca afeta todos os componentes com tag h1 na nossa pagina. Se desejarmos fazer uma selecao mais especifica, afetar apenas um Unico h1 em particular ou uma classe deles, também temos estratégias para isso, que serao abordadas no tépico a seguir. TEMA 3 - SELETOR hitpslunvitus.unintr.comfavalwebiroa! snoon4i2023, 10.27 UNINTER, Neste tdpico, vamos debater um dos aspectos mais importantes para se compreender e fazer bom uso do CSS: 0 seletor. Como o nome sugere, ele seleciona quais elementos html serao afetados por aquele comando, Podemos classificar alguns tipos diferentes de seletores. Veremos cada um deles em maiores detalhes: seletor universal, por tag, por classe e pseudoclasse, entre outros. 3.1 SELETOR UNIVERSAL O seletor universal seleciona todos os elementos e é representado pelo asterisco *. Ele é interessante de ser utilizado sempre que desejamos afetar todos os elementos da pagina — por exemplo, para definirmos a cor de texto verde para todos os elementos, ficaria da seguinte forma: 3.2 SELETOR POR TAG O seletor por tag ira selecionar todos os elementos da pagina que possuam tag com aquele mesmo nome. No exemplo a seguir, as tags h1 terdo a cor do texto modificadas para verde, e os paragrafos terdo a cor de fundo alteradas para vermelho, 3.3 SELETOR POR CLASSE Por vezes, queremos selecionar tags especificas que possuem alguma coisa em comum - digamos, por exemplo, que certos paragrafos e cabecalhos em nossas paginas alertam o usuario de alguma informagao essencial e desejamos dar um destaque somente para esses elementos. Entao, na hora criarmos o html da pagina, podemos identificar esses elementos como pertencentes a certa classe alerta e depois, no CSS, modificar as caracteristicas somente dessa classe. Veja no exemplo a seguir hitpslunvitus.unintr.comfavalwebiroa! aneosi04i2023, 10:37 UNINTER hi class: ae SEW Leith eae As informacées sao sigilosas e de p yi Bielabeet (8-40) a color:red; Para classificar 0 elemento html, basta colocar a propriedade class com 0 nome da classe que vocé quiser criar. E possivel que um elemento pertenga a varias classes e, portanto, basta separa-las por espaco, por exemplo < p class="alerta titulo” >. © elemento p pertence, ao mesmo tempo, a classe alerta e a classe titulo, J4 no css, ¢ importante marcar 0 seletor com o ponto . para indicar que se trata de uma classe. O seletor por id é feito para identificar individualmente um elemento. Dos varios paragrafos que a sua pagina possui, um vocé deseja estilizar de forma diferente dos demais. Para isso, o parégrafo deve ser identificado com a propriedade id, muito semelhante ao que foi feito com o seletor por classe, e, em vez do ponto, no css, o marcador de id sera a cerquilha #. Confira o exemplo a seguir. hitpslunvitus.unintr.comfavalwebiroa! 79osi04i2023, 10:37 UNINTER p> paragrafo 1... paragrafo 2... p> paragrafo 3...

(maior que). E 0 que quer dizer "filhos"? Seriam aqueles elementos que sao contetidos diretamente de um outro elemento. Veja que, em uma pagina html padrao, todo o contetido da pagina estd dentro da tag body - portanto, sao filhos de body e, por sua vez, body e head estdo dentro do contetido da tag html - logo, sao filhos de html. No exemplo a seguir, temos uma tag div com id div? e todos os filhos diretos dessa div especifica terdo cor de texto azul hitpslunvitus.unintr.comfavalwebiroa! angosi04i2023, 10:37 UNINTER div id: hi>Meus paragrafos paradgrafo 1... p paragrafo 2... P paragrafo 3... P div> p> paragrafo 4 p> paragrafo 5... > p { color: Neste exemplo, repare que esto sendo selecionadas apenas as tags p que sejam filhos do elemento com id div? ~ a tag h7 sera ignorada e as tags p, que nao sao filhos de div7, também. A propésito, a tag div nao possui nenhum efeito sozinha no html, ela serve para gerar divisées légicas para situagdes como essa, em que se deseja separar alguns elementos de outros e dar comportamento especifico para ele por meio de cédigo css ou Javascript associados. A tag span possui a mesma finalidade - geralmente, div sao blocos maiores e span para blocs menores de uma inica linha. Note que o sinal de maior > seleciona somente os filhos diretos, caso desejasse selecionar todos os descendentes, tanto filhos diretos como filhos de filhos, bastaria omitirmos o sinal de maior, no exemplo ficaria. hitpslunvitus.unintr.comfavalwebiroa! angon4i2023, 10.27 UNINTER, Outra forma de selecionarmos no css é por irmaos, que entendemos que sejam as tags que estéo no mesmo nivel hierarquico que também sejam filhos do mesmo elemento-pai. Temos dois simbolos distintos para isso, O simbolo do mais +, que marca o irmao mais préximo, e til ~ que, seleciona todos os irmaos, Confira no exemplo a seguir. div id: p id="pari"> paragrafo 1.. p> paragrafo 2... p p> paragrafo 3... div p> paragrafo 4... p> paragrafo 5... + p{color:b No exemplo, temos dois CSS distintos: um com o sinal de + e outro com o sinal de ~. Teste ambos e veja a diferenga: no primeiro caso, esta sendo selecionado o préximo paragrafo-irmao daquele com id par e, no segundo caso, todos os irmaos e ndo apenas o mais préximo. O seletor por pseudoclasse seleciona elementos que recebem determinada classe interna do sistema. Isso acontece mediante certas condigdes: se 0 elemento atende aquelas condigées, tera a classe e sera alterado, caso contrario nao. E possivel tornar 0 css um pouco mais interativo com isso. © exemplo classico de pseudoclasse é 0 hover, que é marcada quando o elemento esta com o cursor do mouse sobre ele, Confira o exemplo a seguir hitpslunvitus.unintr.comfavalwebiroa! 10119os104i2023, 10:37 UNINTER paragrafo paragrafo fot Tar 1a ne) paragrafo paragrafo No exemplo, os paragrafos que estiverem com o cursor sobre si mesmos mudarao sua cor para vermelho. A lista de possiveis pseudoclasses é bem extensa, e alguns exemplos sao: active ~ para quando um link é esta sendo clicado; checked - para quando um checkbox ou radiobutton esta marcado; * :empty - para quando um determinado elemento no tem filhos; e first-child — para quando o elemento é o primeiro filho de seu elemento pai Recomendamos o site da w3schools para a listagem completa das pseudoclasses com exemplos. TEMA 4 - ORDEM DA CASCATA DE ESTILO Neste tépico, vamos entender melhor um conceito da precedéncia da ordem de estilo, Suponha que miltiplas regras CSS estejam afetando um mesmo conjunto de elementos html e que essas regras estejam afetando algumas propriedades em comum: qual regra que vai valer de verdade? Em outras palavras, qual regra tera precedéncia? hitpslunvitus.unintr.comfavalwebiroa! amieosi04i2023, 10:37 UNINTER head body {font-family: Arial; font-size: 14px;} p {font-size: 16px;} {font-family : ca;font-size : 20px;} div id: span class=" tel tl elke Cea Corpo da pagina... Este exemplo contém trés regras CSS. Todas as trés regras CSS definem a propriedade font-size e duas das regras CSS definem a propriedade font-family. A regra CSS para o elemento body é herdada pelos elementos div, span e p. Além disso, 0 elemento span possui uma regra CSS direcionada a ele por sua classe logo e 0 elemento p possui uma regra CSS direcionada a todos os elementos p. Quais estilos acabam sendo aplicados para os elementos span e p elementos? Quando o navegador precisa decidir quais estilos aplicar a um determinado elemento HTML, ele usa um conjunto de regras de precedéncia CSS. Dadas essas regras, 0 navegador pode determinar quais estilos aplicar. As regras sao: 1. Apresenca do comando !important. 2. Especificidade dos seletores de regras CSS. hitpslunvitus.unintr.comfavalwebiroa! 1at9osi04i2023, 10:37 UNINTER 3. Sequéncia de declaracao. Detalhes do que essas regras significam nas segées a seguir. Observe que a precedéncia CSS ocorre no nivel da propriedade CSS, Portanto, se duas regras CSS tiverem como destino © mesmo elemento HTML e a primeira regra CSS tiver precedéncia sobre a segunda, todas as propriedades CSS especificadas na primeira regra CSS terao precedéncia sobre as propriedades CSS declaradas na segunda regra. No entanto, se a segunda regra CSS contiver propriedades CSS nao especificadas na primeira regra CSS, elas ainda serdo aplicadas. Em outras palavras, as regras CSS so combinadas quando possivel. Se vocé precisar que uma determinada propriedade CSS tenha precedéncia sobre todas as outras regras que definem a mesma propriedade para os mesmos elementos HTML, vocé pode adicionar a instrugao important, a qual tem precedéncia mais alta de todos os fatores de precedéncia. Confira o exemple. font-size: 18px; a style div class= Texto especial. div hitpslunvitus.unintr.comfavalwebiroa! 13/19si04/2029, 1037 UNINTER Neste exemplo, a precedéncia no que diz respeito a propriedade font-size seria a da classe especial por ser mais especifica; no entanto, por conta da instru¢do !important, tem prioridade a instrugo font-size:16px. 4.2 ESPECIFICIDADE DOS SELETORES As prioridades seguem a abstragdo de uma cascata, dai o nome cascading style sheets (folha de estilo em cascata, CSS). Todos os atributos sdo aplicados de forma combinada e, em caso de conflito, vale aquele cujo seletor seja mais especifico, conforme o Quadro 1 a seguir. Quadro 1 — Seletores e especificidades Seletor Descrigao: Estilo herdado Especificidade mais baixa de todos os seletores — trata-se do estilo herdado do elemento- pai Hierarquicamente acima do estilo herdado e abaixo dos demais, temos o seletor universal elemento Maior especificidade do que o seletor universal e estilos herdados. atributo Maior especificidade do que o seletor de elemento. classe Maior especificidade do que atributos, elementos e seletores universais. id Especificidade mais alta que o seletor de classe. Seletor combinado ‘Obtém a especificidade dos seletores combinados, Propriedade definida | Especificidade mais forte que o seletor de ID. internamente com atributo style Por fim, se temos dois atributos conflitantes com o mesmo seletor, 0 que vale é o que vem por Ultimo, pois o que sequencialmente veio depois tera maior prioridade. TEMA 5 - PRINCIPAIS COMANDOS CSS Neste t6pico, vamos discutir alguns dos principais comandos CSS e mostrar exemplos de uso. 5.1 CORES hitpslunvitus.unintr.comfavalwebiroa! vaneosi04i2023, 10:37 UNINTER As cores no CSS sao utilizadas em diversos comandos distintos e existem trés formas de representa-las, conforme a lista a seguir. * Nome das cores em inglés: existe uma lista vasta de nomes de cores em inglés que é reconhecida pelo CSS que internamente substitui por uma cor predefinida, € uma representacdo muito Util para realizar testes rapidos e tornar o cédigo facilmente legivel Importante notar que nao é sensivel a maidsculas e mintisculas, red, Red ou RED vao representar a cor vermelha da mesma forma * Valor RGB: a sigla RGB vem das palavras red, green, blue (vermelho, verde, azul) e diz respeito & combinagao dessas cores. O padréo RGB é muito famoso e utilizado em diversos outros contextos, especialmente digitais. Quando combinadas, essas trés cores-base podem gerar qualquer outra cor do espectro visivel, pois a ideia é que cada canal de cor seja representada por um entre 0 e 255 (ou seja, 1 byte para cada canal de cor), e é representado sempre na ordem vermelho, verde e azul; entdo, por exemplo: RGB (255,105,0) é uma cor que combina 100% de vermelho — por isso 0 255, um pouco acima dos 40% de verde — por isso 105, e nada de azul - por isso 0 valor 0 no fim, 0 que da uma cor alaranjada. * Valor hexadecimal: essa representacao é igual a RGB, porém, um pouco mais compacta, em vez de utilizarmos ntimeros decimais, utilizamos hexadecimal 2 digitos para cada canal de cor com uma cerquilha na frente e todos os valores juntos, por exemplo: #001100 é igual a RGB (0,255,0), que representa a cor verde. 5.2 BACKGROUND-COLOR © background-color é um atributo que modifica a cor de fundo do elemento, por exemplo: Os exemplos anteriores sao trés formas distintas de colocar a cor azul-clara no fundo de todo o corpo da pagina 5.3 BACKGROUND-IMAGE hitpslunvitus.unintr.comfavalwebiroa! 1519on4i2023, 10.27 UNINTER, © background-image @ o atributo para colocar uma imagem de fundo nos elementos selecionados. Veja no exemplo a seguir que é necessério colocar, no entanto, o endereco relative do arquivo contendo a imagem dentro dos parénteses comando url). Caso o elemento seja maior do que a imagem, ela, por padrdo, iré se repetir vertical e horizontalmente. Com a propriedade background-repeat, é possivel configurar esse comportamento para que a imagem nao se repita ou seja repetida apenas em um eixo, Os valores para 0 atributo sao: no-repeat, repeat-x ou repeat-y. Respectivamente nao repete, repete no eixo horizontal, repete no eixo vertical. Perea background- image: url ("im; background-repeat: No exemplo, a imagem gatinhos,jpg, que esta localizada na pasta imgs, sera adicionada ao fundo do corpo da pagina e, caso a pagina seja mais larga do que a imagem, ela sera repetida horizontalmente, mas nao verticalmente. ‘A margem & como chamamos 0 espaco que fica em volta da borda do elemento HTML, e é possivel configurar quanto de espaco vazio desejamos que exista em torno daquele elemento. Confira no exemplo a seguir os atributos margin-top, margin-bottom, margin-right e margin-left, respectivamente a quantidade de pixels que tera de espaco no topo, fundo, direita e esquerda: margin-top :1@@px; margin-bottom: 1@@px; margin-right: 15@p: margin-left: 8@px; hitpslunvitus.unintr.comfavalwebiroa! 16119on4i2023, 10.27 UNINTER, Existem formas mais simplficadas de descrever o tamanho das margens. Caso apenas com o atributo margin seja fornecido com um Unico valor, ele vale para todos os lados. Se dois valores forem dados, o primeiro ir para as margens verticais e o segundo para as horizontais. E, caso quatro valores sejam dados, dai sero aplicados para as margens superior, direita, inferior e esquerda, nessa ordem. © conceito de padding, preenchimento, é semelhante ao da margem, porém, enquanto a margem é 0 espagamento externo a partir da borda, o preenchimento é 0 espacamento interno a partir da borda. No exemplo a seguir, vemos que as mesmas légicas da margem também se aplicam padding-top: 10@px; padding-bottom: 10 padding-right: padding-left Text-align indica como o nome sugere o alinhamento do texto. Por padrao, todo o texto é alinhado esquerda, mas podemos centralizar ou alinhar a direita por meio dessa configuragao. Veja © exemplo a seguir: os elementos h1, h2 e h3 estao respectivamente alinhados no centro, esquerda e direita: h1{ text-align: h2{ text-align h3{ text-alig hitpslunvitus.unintr.comfavalwebiroa! amineos1042028, 1037 univreR Para configurar a estilizagao de texto, existem diversos pardmetros que podemos querer configurar, como a familia da fonte, tamanho da fonte, estilo italico ou estilo obliquo, negrito etc. No exemplo a seguir, demonstramos como esses parametros séo configurados: No exemplo anterior, vemos o comando que o atributo font-family configura a familia da fonte e seus parametros. Com font-style, configuramos 0 estilo, que pode ser tanto itélico como obliquo; font-size para configurar o tamanho da fonte; font-weight, que da a espessura das letras, no exemplo, bold quer dizer negrito. FINALIZANDO Aqui, discutimos os principais conceitos envolvendo o CSS, suas aplicages e primeiros exemplos, bem como, em maiores detalhes, sua sintaxe, o seletor e algumas das principais propriedades que podemos manipular por intermédio do CSS. REFERENCIAS css introduction. w3 Schools, is. dJ Disponivel em: . Acesso em: 17 fev. 2023; DEITEL, P. J. A, RICH. Internet Applications e desenvolvimento Web para programadores. Sao Paulo: Pearson Prentice Hall, 2008. FLANAGAN, D. Java Script: 0 guia definitivo. 6. ed. Porto Alegre: Bookman Companhia Editora Itda, hitpslunvitus.unintr.comfavalwebiroa! 18119‘09104/2028, 10:37 UNINTER FLASTCHART, F. HTML 5: embarque Imediato. Rio de Janeiro: Brasport Livros e Multimidia Ltda. JSFIDDLE. Disponivel em: . Acesso em: 17 fev. 2023, OLIVEIRA, C. L. V. JavaScript descomplicado: programagio para a Web, IOT e dispositivos méveis Sao Paulo: Erica, 2020. PUREWAL, S. Aprendendo a desenvolver aplicagées Web. Sao Paulo: Novatec, 2014. ios de orientacao a objetos com JavaScript. Sao Paulo: Novatec, 2014 hitpslunvitus.unintr.comfavalwebiroa! 19/9