o Olá pessoal aqui é o Fábio Barbosa não Treinamentos e nesse vídeo de nosso curso de html com CSS e vamos fazer uma introdução ao CSS CSS é uma sigla que significa cascading Style sheets é tecnologia que a gente vai entregar para aplicar formatação e estilos as nossas páginas HTML e nesse vídeo fazer uma pequena introdução ao tema e mostrar um exemplo de CSS em Ação Então vamos lá o que é o CSS especificamente as queimas raio-x ou em português folhas de estilo em Cascata é uma tecnologia que a gente vai entregar para estilizar o conteúdo de um documento HTML ou seja para controlar a apresentação dos documentos o HTML controla na estrutura da página como a gente já viu os nossos vídeos anteriores Mas quem vai dar aparência nessa página é o CSS que tem uma folha de estilos uma folha de estilos é uma coleção de regras de formatação que a gente aplica a um documento html o estilo Zara pode estar no próprio documento HTML mais ou mais comum a gente usar o documento à parte para colocar esse estais esses estilos que a gente já vai ver que se trata para gente abrir com CSS de três formas distintas a gente pode aplicar as marcações CSS na forma inline ou seja Já fica direto no elemento HTML dentro no documento que não é muito comum a gente pode aplicar o CSS incorporado Ou seja a gente usa um elemento especial HTML chamado Style que permite colocar as regras CSS no próprio documento HTML eu vou mostrar como fazer isso daqui a pouco o Cruzeiro e o mais comum usar uma folha de estilos externa ou seja a gente vai ter um documento com extensão. CSS no qual a gente vai estar todas as regras que você aplicadas para as nossas páginas de uma vez uma coisa importante que os estilos eles são aplicados na ordem em que eles são encontrados nesses documentos fazendo então que a gente não de cascateamento dos estilos desde e até o celular do último estilo assim encontrado numa sequência é aplicado se houver um estilo anterior que se aplica ao mesmo elemento a mesma parte do seu documento algum tempo a gente vai ter melhor desses conceitos fazendo na prática tá importantíssimo como que é sintaxe de uma regra CSS então regra CSS a unidade de construção da folha de estilos e ela tem esse formato a regra inteira ela é formada por um seletor e uma declaração sendo que a Declaração é formada por um par propriedade: valor com. E, no final e a declaração sempre entre Chaves a negra composta por esses dois elementos o seletor vai indicar em quem eu vou aplicar a regra a propriedade é o que eu vou modificar essa nessa nesse seletor e o valor é o valor em cima eu vou aplicar para essa propriedade eu tô aqui um exemplo para ficar mais claro aqui tem uma regra CSS que aplica três declarações o seletor é esse elemento aqui p vou parar ou seja regra vai ser aplicada sempre que apareceu elemento P na página HTML todos os parágrafos vão receber essa regra três declarações uma pulinha vejo que o ponto-e-vírgula vai fazer a separação entre elas dentro das chaves e nós temos os pares propriedade valor por exemplo propriedade text Trace online alinhamento do texto valor dessa propriedade centro significa que os textos que estiverem dentro dos parágrafos ficaram centralizados na terra color color é a cor do texto ou seja os todos os textos que estiverem dentro de parágrafos estarão na cor amarela Yellow tamanho da fonte Font size and pixels ideia mesmo então os textos que estiverem dentro de parágrafos terão 20 E é assim que a gente vai ajustar essas propriedades dos nossos documentos não mais utilizando atributos HTML mas sim por meio dessas regras essas que são muito mais poderosas e a gente vai ter vários tipos de seletores vamos conhecer alguns deles aqui seletor Universal é um que representa todos os elementos que é basicamente o asterisco então se você usa um asterisco no lugar do nome do seletor você tá dizendo que a regra CSS criado e se aplica todo mundo na parte todo mundo no documento HTML aqui por exemplo eu tô dizendo que a cor do texto de todos os pontos dentro do documento serão vezes é o sexto serão vezes color.
ui ser teu aniversário que usa esporadicamente pois assim vai fazer um reset na página a gente que a gente vai usar o seletor de tipo ter me chamado de seletor de elemento que aquele que vai aplicar o CSS um elemento em particular Oi e o seletor estivesse que tem o nome do elemento na frente coisa do P aplicando uma regra um para um parágrafo ou H1 aplicando uma regra um elemento H1 dica de cabeça jogar um no caso aqui a propriedade color é a cor do texto tem um bar vai aplicar quando texto vermelho é parágrafo e amarela para cabeça legal também temos seletores de classe e de either o seletor de classe e a ver com o estilo nos alimentos que tenham o atributo classe definido por exemplo classe Verde vai ter o texto na cor verde e como é que a gente representa esse centro de clássico um pontinho ponto e o nome da classe na frente Lembrando que o nome da classe é você que cria as classes a gente que cria lá no HTML depois a gente vem aqui no CSS formatos também posso fazer o seguinte classe Verde mas somente dos elementos H1 Então coloca o nome do elemento. Nome da classe aí esse estilo vai ser aplicado somente nos elementos h eu tenho definição da classe verde eu também posso aplicar as regras em inglês utilizando o seletor de ID ever be você vai aplicar o estilo um elemento que tem o atributo ID definido pois Patri poder cor azul somente cor azul aí eu vou dizer que é o ID colocando o hashtag aqui na frente então todo elemento tiver o ID cor azul vai receber essa formato assim e da mesma forma que a gente ver com a classe eu também posso fazer isso por elemento específico então todo elemento pagar um que tenha o e cor azul vai receber essa formatação uô IP Ele é bem mais específico que a classe que no geral a gente usa para aplicar um estilo a vários elementos distintos para os alunos podem ter a mesma próxima geralmente um elemento vai ter uma ideia a gente ainda tem também o seletor de atributo que diz respeito ao atributo específico dentro de um elemento a gente vai trabalhar com isso posteriormente a gente vai seguir umas Convenções para Os Clássicos são legais para manter um histórico mais legível pois é nunca usar espaços em branco nos nomes direi classe não empregar caracteres especiais e tomar cuidado que o CSS é que esse estive então toma cuidado com esses com essas regrinhas em SIP beleza fiz uma pequena introdução então CSS expliquei onde você aplica o CSS Quais os tipos de seletores o que a propriedade que é tributo é valor vamos ver um exemplo em ação para isso eu tenho aqui um documento HTML criado bem simples é um documento bem simples ele tem apenas um cabeçalho H1 uma cabeçada h22 parágrafos três na verdade com esse aqui de baixo e uma lista de itens eu vou mostrar essa página aqui que não tem formatação nenhuma a exceção deste elemento HTML strong vamos ver como é como é que se a página aparece para nós então tá aqui essa página do jeito que ela está aqui no nosso documento até dar 11 a partir de os cabeçalhos H1 e H2 os parágrafos uma lista de itens não ordenados e mais um parágrafo no final Verde aqui é só uma estrutura mesmo entre absolutamente nenhum tipo de formatação aplicado aqui agora eu vou usar um CSS basicão para ficar uma formatação Zinho primeiro eu vou fazer o seguinte eu vou aplicar um CSS direto nesse documento a gente pode fazer isso utilizando o elemento Style que vai pode ser colocado aqui no cabeçario eu vou aqui no red Depois esse título até pular uma linha aqui ó e vou colocar o elemento E ai ai é legal e aqui dentro aplico o estilo vamos supor que eu queira formatar os meus cabeçalhos H2 então eu vou dizer que o seletor rh2 e isso é da dois abro abro as minhas chaves e querem específica que ele vai estar por exemplo Centralizado só centralizar the text pra cima alarme vejo que aparece uma grande lista que de propriedades usando uma ideia adequado começo que eu tô usando aqui que eu vi as coisas é isso é muito útil porque talvez você não lembra de todas as propriedades eu nem conheço a todas essas eu vou trabalhar então context online eles: e ele também mostrar fazer de novo aqui testline: Quais são os valores possíveis no caso eu quero Center escrevo Center vão ter ido beleza com esse estilo aqui o cabeça da dois deve ficar Centralizado eu vou salvar o documento e a saúde e vou Recarregar página pra gente ver que acontece lembra que esse aqui é o cabeçario h2ovo que acontece Olha só Já carreguei aí ele ficou Centralizado automaticamente bem simples passo para este aplicar aquele CSS e esse é para se perguntando eu vou dar um documento legal quer dizer que se eu quiser formatar cada um juntos elements basta colocar um um estilo aqui exato você pode colocar os estilos aqui mas é evidente que se você fizer isso para um documento que é muito grande e que tenha muitas formações distintas o documento HTML pode ficar confuso e poluído e difícil de lidar e aí diz talvez você quer aplicar essa formatação esse estilo CSS em várias páginas ao mesmo tempo nesse caso teria de ficar copiando os estilos é que página por página para evitar esse problema que a gente faz a gente cria uma folha de estilos e eu tenho uma já criada aqui que é esse documento eu chamo Eu batizei de estilos pontos CSS basta criar o documento normal de texto da o nome que você quiser para ele com a extensão. CSS E aí você coloca todas as regras que você quer ficar dentro dele nesse caso eu tenho aqui uma duas três horas quatro CSS a regra CSS um aplicada a um parágrafo outro aplicada parágrafos cuja classe = centro Olha só vou usar aplicação e centro parágrafo Centro depois é o cabeçalho H1 e a minha lista não-ordenada eu apliquei algumas formatações por exemplo para todos os parágrafos cor de texto Azul tamanho da fonte 20 pixels agora se o parágrafo tiver a classe centro definida ele vai estar alinhado no centro acordo ele vai ser diferente vai ser verde e também é bom que vai ser o mesmo 20 fixas Onde eu posso colocar um pouquinho maior por exemplo 25 fixa só para diferenciá-lo cabeça legal uma cor do texto vai ser vermelha e para minha lista não-ordenada veja coloquei aqui quatro propriedades a posição necessário vos Y em onde ela vai ficar na página e sim e um site significa dente você vai entender que isso vendo na prática list-style-type Circle é a bolinha que vai representar os elementos da lista background uma cor de fundo por isso eu preciso de estar opposition pra mostrar onde vai ficar essa bolinha aqui do cercou e o pede que é uma distância até a margem Não se preocupe se você não tá entendendo especificamente o que significa cada item desses aqui que a gente vai ter uma aula para cada elemento HTML com seus estilos vai ter uma aula só para estilizar elementos H mas só para utilizar listas e assim por diante Beleza eu vou explicar detalhadamente cada um like aqui só mostrando que acontece o documento estilo CSS aqui já criado agora eu vou voltar na minha página Oi e a minha página não sabe que eu tenho esse documento criar eu preciso indicar aqui dentro que é para usar aquela folha de estilos como é que eu faço isso faço assim ó aqui no cabeçalho ainda eu vou colocar um link o réu igual vocês ficar o tipo que vai ser um caso stylesheet e vou dar vou dizer que a referência HF é igual e aí coloca o nome do arquivo melhor que investe nos pontos CSS Play com esse nome eu coloco este nome aqui e fecha esse cara então essa linha Aqui tá dizendo que é para importar todos os estilos que estão dentro desse arquivo para esse documento HTML para aplicar nos elementos agora vou salvar eu vou recarregar minha página Vamos ver o que acontece com ela e olha só olha a diferença de exibição da minha página já apareceu aqui vermelho aqui ficou em azul esse último parágrafo também os dois parágrafos foram formatados simultaneamente mesmo estando em partes diferentes da página esse Já ficou Centralizado em outra cor aponta um pouquinho maior Dá para perceber a minha lista tá com fundo cinza bolinhas vazadas a bolinha dentro desse bloco cinza tem uma distância entre o bloco e o texto e assim por diante tudo isso é feito usando aquele CSS ainda Tá feinho mas a gente vai aprender um novo tempo com deixar isso aqui bastante apresentável bem legal mesmo para o usuário poder Navegar com tranquilidade pelas suas páginas web 10 ei pessoal nesse vídeo fiz uma pequena em breve introdução ao CSS no próximo vídeo eu mostrar como é que é possível agrupar e combinar os eletrônica repondo a gente poder começar a aplicar estilos seletor por seletor elemento por elemento Espero que você tenha gostado aproveita para se inscrever Tá na Mente Se você não for inscrito ainda já for inscrito clique no Sininho aqui embaixo para ativar as notificações realizadas Quando a gente tiver conteúdo novo postado aqui no canal e se você quiser ajudar após um treinamento só nesse membro do nosso clube de canais aqui na descrição do vídeo tem um link e também o botão seja membro do YouTube para você se informar e descobrir como é que você se torna amigo do nosso clube de canal e não deixe de acessar o nosso site que é o www.
bose. com treinamentos. com.
