Fundamentos de Internet e Web - CSS - Cascading Style Sheets

[Música] E aí [Música] o Olá pessoal tudo bem em consequência ao conteúdo da disciplina de fundamentos de internet web nessa semana ou seja uma semana 6 o açúcar ser tratado Esses são as folhas de estilo a ou mais conhecido como CSS cascading Style sheets a tão o ponteiro da semana envolve vou tratar no CSS né E já seu CSS porque utilizado para integração dele com uma imagem marcação com HTML tá outra aplico estilos seletivos ao acionamento da primeira alimentam desenhar pouco o Bari a sessões né Aos livros e finas de um modo geral como que

eu formato o melhor esses elementos nativamente são processados de forma padrão a quando a gente não acredita Afrodite A então por exemplo mudança de couro funcionamento de conteúdo decoração da página de modo geral né com imagem de e a ir pessoal vou deixar para vocês praticar eu vou mostrar isso aqui no editor de texto né pelo condutor de uma página que envolve a melhor formatação de uma página usando CSS Ah eu vou usar HTML5 junto com CSS tá e tem um link nos slides né e depois vai ser com se vocês baixarem esse conteúdo né

e modificar em ele horário né os valores com base nos fizemos dele seus próprios próprios sites Ok bom você SL significa folha de estilo em Cascata tá melhor linguagem assistir para definir a apresentação de documentos e Pimentinha aplicar de forma seletiva tá estilos é alimentos em documentos HTML A então exemplo o CSS selecionado todos os alimentos para aqui uma página e tornar o texto Dentro Dele deles Verde então todos os parágrafos Não Param seda vermelho ou selecionar todos os alimentos a dar uma página de jornal tecido deles azo a antes do CSS o que acontecia

aqui todos os configurações referentes a apresentação dos elementos HTML era feita pelos atributos próprios ml Então o que acontece na verdade aqui a própria linguagem de marcação né que é embutida dentro dos braços já tem o próprio braço já tem uma folha de estilo padrão tá nosso pega o Chrome ou Firefox eo ópera Vivaldi por exemplo aqui por isso padronizados se não aplicarmos uma folha de estilo próprio né Nós desejamos que aquela informação sem formatá-lo o próximo já faz uma pré formatação antes e coloca é que o tamanho da fonte para ele o tempo que

estava em 12 que a cor é preta o repolho vermelho tá então existe um aumento nesse padronizado mas que com os políticos e permitem que nós passamos modificações né Então a primeira especificação dos SSP 1996 tá inicialmente usando um browser e já na mais utilizado que a Internet Explorer 3.0 em 2000 foi pregado internet explo a 5.0 banheira mais atual sem a partir da do lattemiele quatro já não mais utilizado atributo de apresentação para os elementos HTML tá então desde o primeiro quarto com mais comum uso de folhas de X para formatar esses elementos não

não falar é o ativo HTML tá E vocês passou seus olhos vai permitir configuração mais imaginando que o ponto de vista de formatar melhor a página né ponto de vista de cores de fontes né de funcionamento dos conteúdos vive tá tem esse já é padrão cozido na dependência da medicina qual que é a vantagem né algumas vantagens de se utilizar o CSS a especial realmente separar o conteúdo apresentação é uma coisa o conteúdo da página o seu conteúdo que é solicitado pelo browser né através de uma aquisição http lá pro servidor web que os pedras

espargos A então quando o cliente o braço e faz o pedido para sua aparência página vem através de Marques São APP os argumentos do DF efeito download dessa página no navegador reproduzem essa página pois ela chega na máquina né no notebook ou chega no celular do usuário o Iah interface de rede né eu ia causa de comunicação cadeado aéreo né e é o wi-fi e o braço e recebe Vai formatar isso se existe uma folha de estilo já é pré-determinada para como que eu vou apresentar a ele conteúdo Ok se não ele vai ser apresentado

de forma organizada como qualquer negócio faz tá vantagens Esse é o conteúdo é um EA forma como apresenta ele outro a costa a melhor apresentação do conteúdo facilita o entendimento do conteúdo por exemplo aqui que o formato um jornal impresso dentro da UEFI é que eu pego um jornal com uma folha de São Paulo Estadão né aqui era comumente e no clipe na papel né ainda continua sendo logicamente né mas estão alternativo esses jornais a web no formato toda a informação não é possível colocar toda informação que tá no papel uma página Web vez não

funcionou costurar enquanto eu uso Talvez sim se você é muito fica tamanho da fonte estilo da Fonte em fonte cujo estilo é aumenta o uso da área né do graus e na da área útil no próximo então as folhas de shissô ajuda a gente já de marcar melhor a o ambiente né que vai ser apresentado com t u a e além dos realizar a formatação do texto forma mais limpa né e além de permitir a acessibilidade O que é existe o conjunto de regras né É para a gente trabalhar com com CSS tá ou regra

não simplesmente as regras são divide em duas partes uma parte de trás no seletor a que o seletor basicamente ao longo do elemento html no começo conjunto de regras Então vamos diretor e Qual é o elemento que eu quero modificar em relação ao a formatação tá ele selecionar os elementos o elemento a serem os elementos a serem utilizados e a declaração tá então a liberação é uma regra simples que especificando Quais as propriedades daquele elemento eu quero utilizar não tem um elemento qual a propriedade dele que eu quero utilizar quer utilizar fonte para utilizar tipo

de fonte o tamanho da fonte ou a cor da fonte a e faz parte da declamação as propriedades né é a forma pela qual os eu utilizo elemento HTML e o valor da propriedade tá então o valor da propriedade escolhi uma de muitos aparência as possíveis para determinado a propriedade a qual é o valor dela à por exemplo é o modificar propriedade Font Qual o valor da propriedade de floricultura o pedaço de tamanho da fonte Qual o valor do tamanho da fonte 12 15 20 a diferença depois então como é que é feito isso na

prática né como que é complicação e CSS da UTI o seletor né aqui né chave ou seletor tá aplicado aqui no caso aqui alimento é HTML né Qual é a propriedade cor eu quero machucar o valor da sua propriedade no que é azul pa é uma dica uma outra propriedade do elemento que o tamanho da fonte tá e o valor dela que é 10 né Então abre fechado né dele para tu ver nós temos aqui se divisão entre chave ser pelo setor É de coração é muito importante tem semente Vamos trabalhar com por existir a

dentro uma página do 500 ml só como que eu posso criar suas regras tá é que ocorre criou as regras de estilos fosse aplicados aos elementos ml dentro uma Pátio a posso fazer isso de forma externa um arquivo com extensão. CSS e chamar esse arquivo dentro do documento HTML tá você para com e as folhas assistiram também desse arquivo CSS eu vou tratar de qualquer estilo para cada elemento da pnl que eu quero modificar não pode risco de apresentação de conteúdo inteiramente usando a tag Style eu posso embarcado dentro do corte das ml toda vez

que eu inicio a brumatex a eu e fecho ela o que está ali dentro está relacionado à ao uso de CSS a roupa tributos em lycra tá o nome dessa vez Então se a regras em diversos lugares são as vezes acontece de uma página HTML a várias várias formas há várias maneiras de incluir os folhas de estilos a ou porque não vale a pena colocar tudo isso no arquivo por porque a quantidade de utilizações São pequenas né um poucas eu a própria regra de quem arquiteta a toda a parte do Mr tá mas se tiver

a várias se tiver vários regras para ajudar a gente tem considerar-se de propriedade repetida se mantém só uma regra a obedecendo a ordem abaixo então primeiro em maio os interno os externa e depois puxa o dono pronto para se não tiver nada que vai mandar isso é mandatório aqui vou fazendo dor não ok Como que é o aplicativo seletivos os elementos da temer tá e nessa ao ver a vida acontecer mais vai falar de algumas propriedades relacionado ao fundo da página grau de propriedade de texto classes identificadores ou que eu faço um lação usados modificando

a fonte né links tabelas e Leão a algumas propriedades que eu posso utilizar notificar em relação ao fim na panela com ele né é a cor do fundo a imagem que eu coloco né como que eu repito essas repetição dessas imagens né no bacground colocar nexo que lugar posicionamento dele tá Eu por exemplo ele considerando a linguagem CSS né eu vou definir aqui dentro do elemento Bori né eu vou colocar o background da cor azul a e também é dentro dele a imagem de background a imagem com png de seu papel de mar caso aqui

do sumido que essa imagem está dentro do mesmo diretório da minha página da tmr dentro da frente Este é também eu posso fazer repetição dessa imagem né determinada nicho né É [Música] e tudo mais bonitos com 14 x enfrentar várias agora só abordagens aqui a São dentro do corpo da baixo tá posso colocar lá no topo né mais direita colocar um pouco mas esquerda me xingar Eu posso complementar as alterações das propriedades 500 do mesmo elemento Box rosto isso é o esforço é processado né quando o documento Eles começam você sabe é essa tag essas

elemento ordem não vai ter vai ser ligo né vai ser chamado o aplauso relacionada a folha de estilo né problema Dori ele vai ser transformar um pedaço de texto nós temos algumas né que podem ser modificados com a cor o alinhamento não teria sua decoração dele é transformar o texto para preservar o corpo na pode ser modificada a promoção é só decimal.em RB a o alinhamento do texto pode ser feito de forma eu coloco a esquerda direita se atualizaram a decoração por exemplo se eu quiser colocar um texto isso alinhado né com impostos transformar esse

texto uma letra some maiúsculos São Lucas tá com a primeira letra em maiúsculo o resto minúscula enfim a E além disso eu posso criar classe identificadores isso é uma coisa bastante interessante porque tá então eu crie uma classe com muito estilo na específico um elemento a defino a uma propriedade que eu quero ter a sua por exemplo o H1 alimentação que ela tá na propriedade de cor e sempre para ele colocar o vermelha né E se eu como declaro dentro do arquivo pode ser CS nem o verbo de estilo e assim como eu uso dentro

do na página HTML né Tem um faço referência Class né lavar Gracie Qual é a parte que eu tô usando já um o conteúdo daquele elemento né eu isso vai servir no caso aqui só para não em qual a próxima sobre a gente por exemplo né eu posso mais ficar aqui O que é um treino antes do nome da classe né que isso vai preencher tanto elementos H1 H2 paragraph Abrir eu faço a chamada essa classe aqui dentro do elemento da primeira casa que horário hoje aqui tá eu posso crédito Obrigado a todos elementos de

identificação comum a para isso eu preciso considerar um atributo Global aí de do HTML né então é assim que defino é o seu pra valer para todos elementos a hashtag na frente e a propriedade e valor da propriedade que eu quero modificar tu mandou chamar o assistência que significa aqui isso vai valer para todos os alvéolos e lin parte daquele site tá em relação às Fontes né o próximo de cá várias propriedades está família fonte o estilo dela eles várias vezes só você normal só que vai ser mais carregada vendo o tamanho dela amanhã cedo

Tu seu tamanho relativo à obsoleto aí em pontos né foi relativo se ela vai ser muito muito pequenas próximo pequenas vai ser pequenas que você médico tem um arrozinho né Além disso eu posso fazer modificação deles a por Caso Por exemplo quando eu faço o mouse sobre o link né em algo modificar a cor dele né lá quando eu seleciono link o condomínio já foi visitável quando ele não dela foi visitado tô aqui não posso fazer notificação inclusive dos sempre ele está mais uma forma que o edifíco fonte tamanho M a onde fica o texto

o tamanho da fonte do texto a cor alimentos por meio de texto mas também posso modificar as informações de uma tabela né então a borda vela cor aos tiro espaçamento a é importante tá muito importante os ficheiros destinando-se aplicados quando nós já consideramos como vai ser o layout da página então sempre ele é primordial primeiro definir como que é o layout da página como é que é esse trabalho né na música nossas informações como você deseja que as informações sejam apresentadas dentro de uma página não é tá então em geral é bom que usar as

sessões nessa quais são separados por tags né Essas sessões elas vão representar caixas né dentro de um de uma parte da primeiro mostrar o próximo slide essa o funcionamento o seu estilo sim coisas foram de carro então você consideram por exemplo né quando for devolver é uma no site web né mostrava claramente qual Esse é o meu medo de tá eu posso fosse a fundação da sua página da sim o meu layout para esse esse tá então aqui eu quero ter uma sessão era mostrar nossos tem uma sessão de uma parte que eu vou dentro

do layout vai ser responsável no céu logo do site né algumas vezes navegação umas partes contém artigos sobre temas bloqueou não parte que relacionada ao rodapé das informações da empresa que tem informações da Universidade do trabalho contém informações É sobre o que eu faço um representá-lo é nada mais importante interessante fazer a plástica tá por conta de limitações bom então do tempo nós temos aqui na fazer esse vídeo aula lá eu deixo aqui um link um exemplo de layout em HTML 5 CSS para vocês treinarem os ficar tá então quando vocês fizeram download desse material

tá no Face link que vai aprontar o diretório e tem uma página HTML ou seu conteúdo e as folhas estilos a associada aquele layout aqui pronto faça uma notificação vocês desejarão fazer as alterações tem bastante eu acho que vai estrear você dá para pensar em fazer algum site tá é bastante interessante né para mostrar algumas informações aí na na velocidade que você reside né É Por Esse é o corpo mostrar uma informação sobre um produto que você deseja divulgar né É uma coisa muito dinâmica né mas a gente mais estável deixei importante também relevante nessas

fizeram é isso que você dizia presa bom a diferença que eu utilizei nesta semana né são só esses pratos não tenho ninguém muito bom aqui tem dois links na verdade bastante importante interessante que é o da amamos vivo né trata começo né Vamos Envolver por existires né minha dentro do barco tá também a trabalhar no HTML 5 par e esses dois sites que utilizo para mostrar Pois é o sinal soleados nós somos mais próximo de texto que a gente também esse semantic da pml 5 né pedir legal Ok é o que eu queria mostrar para

essa semana a desejo vocês consigam fazer várias notificações do conteúdo apresenta aqui maus exemplos um exemplo que eu deixo para vocês não ficarem tá então deixa a ver os textos básicos os materiais já foi a quando eles aparecem uma semana tá e pratique bastante qualquer dúvida entre em contato conosco a quero ver vocês lá sinal certinho que a gente vai tratar de um momento do começo ao fim de conteúdo das Mr a situação dele aí no centro R recuperação das informações na armazenados tá Um abraço a todos e se ver na semana 7 [Música]