CSS: Folhas de Estilo em HTML5 – Fundamentos Web

/* Exemplo básico */ 
p { color: blue; font-size: 14px; }

/* Estrutura: seletor { propriedade: valor; } */ 
h1 { color: #333; font-family: "Arial", sans-serif; }

/* Exemplo com propriedade e valor */ 
p { text-align: center; color: #1a2a6c; }

/* cor de fundo e imagem de background */ 
header {
  background-color: #f5f5f5;
  background-image: url('banner.png');
  background-repeat: no-repeat;
  background-position: center top;
}

/* Exemplo de semântica com CSS */ 
header, footer { padding: 20px; }
section { margin-bottom: 20px; }

Texto original

O texto original pode conter falhas de gramática ou de concordância, isso ocorre porque ele foi obtido por um processo de extração de texto automático.

Texto extraído do video Fundamentos de Internet e Web - CSS - Cascading Style Sheets

Olá pessoal, do bem? Tando sequência ao conteúdo disciplina de fundamentos de internet web, nessa semana, ou seja, uma semana 6, o assunto a ser tratado, são as folhas de estilo, a, ou, mais conhecido como CCS, as queidinhas, tá? Então, o conteúdo da semana envolve, ele é tratado do CCS, né? Invence o CCS, o que é que ele é utilizado, com a integração dele com o image Macaçolco, com a HTML, tá? Com que eu aplico estilos, seretivos, ou seja, minhas HTML, né? Então, por exemplo, o bar e as sessões, né? Ao divis, enfim, de modirap, com que eu formato melhor esses elementos, que, nativamente, são processados de forma padrão, tá? Quando a gente na clica, foi distinto, tá? Então, por exemplo, um das de cor, um post-ealamento de conteúdo, decoração da página de modiral, né? Um imagem de fundo, né? Entre outros, tá? E nessa aula, vou deixar para vocês praticarem, eu vou mostrar isso aqui no editor de texto, tudo com o conteúdo de uma página que envolve a melhor formatação de uma página usando CCS, tá? Eu vou usar a HTML de 5, o jumbo com CCS, tá? E tem um link nos slides, né? Que depois vai ser possível vocês baixar-me esse conteúdo, né? E ver o vídeo, modificar, melhorar, né? Usá-lo como base para vocês desenvolver seus próprios sites, ok? Bom, o CCS significa que a folha de estilha em casca, tá? É o link do artista, ela define apresentação de documentos, tá? E permite aplicar de forma seletiva, tá? Estilos elementos do documento sobre a TMI, tá? Então, exemplo, de os CCS selecionar todos os elementos para a página e tornar o texto dentro deles, deles vejo, né? Então todos os paraagros, dentro de uma página, não se é da perver.
Ou selecionar todos os elementos, dar um de uma página e tornar o texto deles.
Azul, tá? Antes do CCS, o que aconteceu aqui, todos os configurações referentes à apresentação dos elementos da TMI era feita pelos atribústios próprio da TMI.
O que acontece, na verdade, aqui, a própria linguagem de marcação, né? Quem obtida dentro dos braços, já tem o próprio braços, já tem uma folha de estilha padrão, tá? Não se pega o clome, o Firefox, o ópera, o VVOD, por exemplo.
Já tem folha de estilha padronizados, que se nós não aplicarmos uma folha de estilha própria, né? E da forma de nós desejamos que aquela informação se veja formatada, o próprio braços já faz uma préformatação antes de colocar que o tamanho da fonte para determinar o elemento, é fixada em 12, que a cor é preta, o que a cor é vermelho, tá? Então, existir um jambia tem espadronizado, mas que, com os das coisas estilhas, permitem que nós façamos no modificação, né? Então, a primeira especificação do CCS foi em 1996, tá? Inicialmente usando um browser e, no jambia mais utilizado, que é o Internet Explorer 3.
0, e em 2000 foi empregado o Internet Explorer 5.
0, né? Não é pessoal.
Bom, a maneira mais atual, assim, a partir do HTML4, já não é mais utilizado, antibutos, a apresentação dos elementos da HTML, tá? Então, desde o HTML4, é mais comum, uso de folhas de xíus para formatar os elementos, não, não, de forma ativa o HTML, tá? E o CCS passou se usado para permitir configuração mais dinâmica do ponto de vista de formatar melhor a página, né? Com a diferença de cores, de fontes, né? De funcionamento dos conteúdos, tá? Tem isso já é padrão, inclusive, nós até me alicínio.
Qualquer vantagem, né? As vantagem de se utilizaram o CCS, tá? Especialmente separar o conteúdo da apresentação.
Então, uma coisa é o conteúdo da página, ou seja, esse conteúdo que é solicitado pelo browser, né? A través de uma arquisição HP lá, a Procebidoro Web, que os pés dessas páginas, tá? Então, quando o cliente, o browser faz o pedido para essa página, essa página vem através de uma arquisição HP, usando o método verde.
Efeito da um luge dessa página, uma pegador, reprouluza essa página, com isso que ela chega na máquina, né? No notebook, chega no celular, no usuário, tá? E a interface de rede, né? E a canal de comunicação, caveado, aéreo, né? O que é Wi-Fi? E o browser recebe vai formatar isso.
Se existe uma folha de estilo, já, pre-determinada para como que eu vou apresentar aquele conteúdo ok? Se não, ele vai ser apresentado de forma podendo ensar, né? Com qualquer browser faz, né? A vantagem do CCS que o conteúdo é um e a forma que eu me apresento ele é outro, tá? O lógico, a melhor apresentação do conteúdo facilita um entendimento do conteúdo, por exemplo, tá? Então, o que eu formato no jornal em preço, dentro da Web, né? O que é que, por exemplo, pego um jornal com uma folha de São Paulo, um estadão, né? Que era como um mente lito, né? Um papel, né? Aí, eu continuo sendo, basicamente, né? Mas isso tem um alternativo esse jornal, né? Um Web, como eu formato toda a informação, né? Possível colocar toda a informação que tá no papel, uma página Web.
Vês não? O função da quantidade com o conteúdo? Talvez sim, porque se você modifica o tamanho da fonte, o estilo da fonte, tem fonte com o estilo aumenta o uso da área, né? Do braço, né? Da área útil do braço, enfim, então as folhas de estes ajudam a gente a demarcar melhor o ambiente, né? Não que vai ser apresentável com o conteúdo, tá? E além disso, realizar a formatação do texto, é o mais límite, né? Além de permitir a assessoria de voz.
E a gente é um conjunto de regras, né? Pra gente trabalhar com o CCS, tá? Então os regras são simplesmente as regras, são de vídeo em duas partes.
Então tem uma parte que trata do setor, tá? Que o setor, basicamente, ou não de elemento da HTML, no começo com o setor de regras, tem um setor, tem o qual é o elemento que eu quero modificar em relação a a formatação, ele seleciona os elementos, o elemento, acelem os elementos acelisados.
E a declaração, tá? Então, a declaração é uma regra simples, especificando quais as propriedades daquele elemento que eu quero esfilizar.
Então tem o elemento, qual é a propriedade dele que eu quero esfilizar? Quero esfilizar fonte, eu quero esfilizar tipo de fonte ou tamanho da fonte ou a cor da fonte.
Faz parte da declaração as propriedades, né? E a forma pelo qual você estiliza o elemento da HTML e o valor da propriedade.
Então o valor da propriedade escolhe uma dentida em muitas aparências possíveis para um determinado propriedade.
Qual é o valor dela? Então por exemplo, quero modificar a propriedade fonte.
Qual é o valor da propriedade fora do propriedade da fonte? Qual é o valor da propriedade da fonte? 12, 15, 20, 20, 20.
Ah, eu pergunto isso depois.
Então, como é que é feito isso na prática? Como é a condicação em CSS? Então eu tenho o seletor aqui, a chave ou o seletor.
Então, aplicado aqui, no caso aqui, o elemento.
É a propriedade cor.
Eu quero notificar o valor da sua propriedade que é azul.
Quero modificar uma outra propriedade daquele elemento que eu tenho da fonte e o valor dela que é 10.
Então, a árvore fecha o chave.
Dentro da declaração.
Então, veja que nós temos aqui essa divisão entre chave, cero, pô, seletor, e a declaração.
É muito importante ter semente para trabalhar com folhas vestidos dentro de uma parte da propriedade da fonte.
Então, como que eu posto criar essas hegras? Como é que eu coloco crivas hegras, vestidos que eu aplicados a auser, o elemento, o tremelho dentro de uma parte.
O que eu vou fazer isso de forma externa, um arquivo com extensão.
ccs e chamar esse arquivo dentro do documento da tremelho.
Então, separam conteúdo das cores estilos.
Então, dentro desse arquivo CSS, eu vou tratar de como é que eu estilo para cada elemento da tremelho que eu quero modificar.
Eu vou pondo isso de apresentação do conteúdo.
O terramento, usando o ATG-style, eu posso embarcar dentro da tremelho, todo vez que eu inicie o ABMA-TG-S, e o que feche o ABMA-TG-S.
Tudo que está ali dentro está relacionado a uso de CSS.
Ou o patrimonso em live.
Corro de essas hegras.
Então, se há regras em diversos lugares, às vezes acontece de uma parte de HTML, a várias formas, a várias maneiras de incluir os flores de estilo.
Ou porque não vale a pena colocar tudo isso no arquivo, porque a quantidade de estilizações são pequenas, são poucas, uma própria regras de quem é que teta a toda parte do documento.
Se tiver várias regras de lugares, a gente tem que considerar.
Se tem a propriedade repetida, se manda em só uma rebra, vou perder sendo a área abaixo, então primeiro em live, pois interno, pois interno, e depois o público pode um do brósofo.
Para se não tiver nada que vai mandar, esse mandador aqui, o que eu padrão do brósofo.
Bom, como que eu prego estiliza os eletivos aos elementos da tremelho? Então, nessa aula, com o período da semana, a gente vai falar de alguns propriedades elacional ao fundo, da página do material, propriedade de texto, classes identificadores, com o que eu faço na população usando o modificando a fonte, links, cabelas e leitos.
Então, alguns propriedades que eu posso utilizar, a gente ficar em relação ao fundo na parede da comela, e a cor do fundo, a imagem, eu coloco, como que repito essas repéditeções desses imagens no background, um poca-nexo que luta a funcionamento greta.
Por exemplo, considerando a linguagem de CSS, vou definir que dentro do elemento bóri, vou colocar o background da cor azul.
E também, dentro dele, a imagem do background vai ser imagem.
png, por isso eu copelo outro imagem.
Em casa aqui, eu dou suindo que essa imagem está dentro do mesmo diretório, da minha página da tremelho, dentro da folha de estir.
Também, eu posso fazer repetição dessa imagem, determinada um eixo, tanto o menjo-lipse, um contorneixo-fisim, enfim, tá? Então, várias abordagens aqui, repetição dentro do corpo, da parte, tá? Posso colocar no topo, mais direita, posso colocar em um topo, mais esquerda, enfim, tá? Então, eu posso complementar as alterações dessas propiedades, dentro do mesmo elemento bóri, quando o que for? Quando o esforço processado, quando o documento que eu tenho foi processado, essa elemento bóri no HTML vai ser lido, vai ser chamado, o aflau delacionado folha de estir, o nettololamento bóri, e ele vai ser transformado.
Sua verdade é o texto, nós temos algumas que podem se montificar dos com a cor, o alieamento do texto, a decoração dele, transformar o texto.
Então, por exemplo, a cor, ela pode ser modificada por nome, por uma evolução da exadecima ou a eb, tá? O alieamento do texto pode ser feito de forma tocada na esquerda, direita, centralizado, ou tu de ficada, tá? A decoração, por exemplo, o seu que quiser colocar um texto sublinhado, né? Então, eu posso transformar esse texto com letras só no maiúsculo, só no musculo, tá com a primeira letra, é maiúsculo, resto no musculo, pfica, tá? Além disso, posso criar class identificadores, isso arte uma coisa bastante interessante, vai ficar.
Então, eu crie uma class, que é um distilo, é um específico, um elemento, tá? E defino uma propriedade que eu quero alterar, por exemplo, o h1, um elemento adonado, não quer ter a propriedade de cor, e sempre para ele colocar, com o vermelha, né? Isso é como eu declaro dentro do barquí, ponto ccs, o déficit estilo.
E assim, como eu uso dentro do, na página da temer, né? Então, eu faço referência class, né? Colaba class, corre a class que eu estou usando, que é g1, é o conteúdo daquele elemento, né? Então, isso vai servir no caso de que isso é pra dar um.
É, pra class, mais pra gente, por exemplo, né? Eu posso identificar que, com ponto, né, antes do nome da class, né? Que isso vai aprendir, cantando elementos, a dar um, da dois, parar, enfim, pode dizer, eu faço a chamada essa classe aqui, dentro do elemento da temer, tá? No caso aqui, o da dois, o cara aqui, ok? E eu posso criar estidos aplicados a todos elementos, com a dedicação por muito, tá? Pra isso, eu preciso considerar um atributo global ID do HTML, né? Então, é assim que eu defini, eu estiro pra valer pra todos elementos, tá? A gente segue na frente e a propriedade e o valor da propriedade que eu quero multiplicar, tá? Então, quando eu chamar class e test, eu quis que me fico aqui, isso vai valer pra todos os aviados, que eu fiz em parte, no que ele sai, tá? E, corre elas só as fontes, né? Eu só não te fico várias propriedades, tá? É, família da font, o estilo dela, o piso, né? Que às vezes, ela vai ser normal, você vai ser mais carregada, né? Eu tava manhina dela, eu tava manhia de surgú, eu tava manhina relativo, tá? Eu vou te surgú, foi aí, em pontos, né? Se foi relativo, você vai ser muito, muito pequenas, por cima de pequenas, que vai ser pequenas, que vai ser médio, né? Além disso, eu posso fazer modificação de links, tá? Por exemplo, quando eu faço o mouse sobre um link, né? Eu vou modificar a cordela, né? Quando eu seleciono o link, quando o link já foi visitado, quando ele ainda não foi visitado, na fantasia eu posso fazer a costificação de induz, fazer perigo, tá? Mesmo a forma que eu me dificulto, fonte, tamanho, é, é, modifico texto, é, com o tamanho da fonte do texto, o color, o elemento do texto, né? Eu também posso me modificar as informações de uma papel, né? Então, é, a borda dela, o corpo, a o estilo, esse passamento, né? É, é, é importante, tá? Muito importante, os estilos, estilos aplicados, quando nós já consideramos como vai ser o leal de da parte, então, sempre, primordial, primeiro define como que é o leal de da parte, não quiser como é que é a estrutura base, né? Na, na, como os, as informações, como você desiste, que as informações sejam apresentadas dentro de uma parte não é, tá? Então, em geral é bom utilizar as sessões, né? As quais são separadas, protex, né? Essas sessões, elas vão representar caixas, né? Dentro de, de uma parte da primeira, vão mostrar no próximo slide.
Essas caixas possuem funcionamento, possuem estilo, os quais não podem modificar.
Então, sempre consideram, por exemplo, quando vou me ouvir, é, é, uma, no site web, né? Considerar, primeramente, como vai ser o meu leal? Então, como se fosse a fundação do seu quadro da primeira, né? Meu leal de precise, tá? Então, aqui, o que é a uma sessão que eu quero mostrar, não é um nociso, tem uma sessão, né? Ou uma parte que voou, dentro do, o leal, que vai ser responsável, no seu logo do site, né? Alguns gente na navegação, uma parte contiativa, sobre o determinado conteúdo, uma parte que relacionada ao RADAP, que as informações, bem presas, que as informações da universitária que eu trabalho, é a ontem que for nações, é sobre o que eu faço, não é, por exemplo, tá? É, nada mais importante, interessante, para fazer a plástica, porqueles de limitações.
Então, do tempo nós temos aqui, pra fazer esse vídeo, ó, né? Eu deixo aqui um link, um exemplo de layout, em HTML5, com o CSS, para vocês, preenarem o que ficar, tá? Então, quando vocês fizeram download desse material, tá? Eu fiz esse link que vai contar como diretor, que tem uma página HTML com o seu conteúdo, e as forestivos, tá associado àquele layout, tá? Então, faça a identificação, vocês desejaram, fazer as outrasções, trem, bastante.
Eu acho que, com esse layout, dá pra ver a saia fazer alguns sites, tá? É bastante interessante, né? Para mostrar algumas informações aí na.
.
.
na.
.
.
na.
.
.
na.
.
.
na cidade que você reside, né? Por exemplo, mostrar alguma informação sobre o produto, que você deseja divulgar, né? Não é uma coisa muito dinâmica, né? Mas, às vezes, a gente se está.
.
.
Destei importante também, irrelevante, né? Fiz fazer a demonstração disso, porqueles que você deseja, porqueles.
Ah! Bom, as diferenças que eu utilizei nesses.
.
.
para a semana, né? São.
.
.
são essas, tá? Então, muito bom aqui.
É dois links, tá? Na verdade, bastante.
.
.
É importante, isso é interessante, que é o da.
.
.
na musíma, né? Que trata.
.
.
Com isso, né? Como.
.
.
como desenvolver forestivos, né? Desde o barato, tá? Também.
.
.
Trabalhar com HTML5, tá? E.
.
.
esses dois sites que eu utilizo para mostrar, pois elas são as oleiras, as nossas sites, bastante interessantes também, esse semana de que, na primeira vez, cinco, né? Porque é de leão, tipo, aqui.
Bom, então, é o que eu queria mostrar para a essa semana, tá? No desejo vocês consigam.
.
.
fazer várias notificações de conteúdo que eu apresento aqui, nos exemplos, no exemplo que eu deixo de vocês notificarem, tá? Então, não deixam de ler os textos, os básios, os materiais de apoio, tá? Quando eles aparecem para o semana, tá? E practiquem bastante.
Qualquer dúvida, entre contato com o músculo, tá? Então, espero ver vocês na semana 7, que a gente vai tratar.
Em um momento, começou o fim de um conteúdo da TMR, tá? Um computação dele, um sector Web, em repressões dos informações lá, mas é lá.
Tá, um abraço a todos, e a gente vai seguir na semana 7.