Masterclass de desenvolvimento de web HTML e CSS — crie seu primeiro site | Luis Carlos | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Masterclass de desenvolvimento de web HTML e CSS — crie seu primeiro site

teacher avatar Luis Carlos, Engineer, Web Developer and Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

39 aulas (2 h 56 min)
    • 1. Trailer

      1:40
    • 2. Introdução

      1:10
    • 3. Editor de código

      1:46
    • 4. Estrutura de HTML

      2:24
    • 5. Elementos de HTML principais

      1:39
    • 6. Atributos HTML

      1:42
    • 7. Crie título e Heading e Create da página

      3:05
    • 8. Adicione seus primeiros parágrafos

      3:13
    • 9. Formatação de texto

      4:34
    • 10. Inserir imagens

      2:23
    • 11. Listas em HTML

      2:18
    • 12. Crie links

      4:46
    • 13. Tabelas

      2:52
    • 14. Introduza comentários

      1:43
    • 15. Estilos de HTML

      2:58
    • 16. Formulários em HTML

      5:43
    • 17. Formulários de HTML II

      2:59
    • 18. Introdução com conteúdo de multimédia

      0:48
    • 19. Adicione vídeos em uma página

      2:57
    • 20. Insira áudio - HTML5

      2:02
    • 21. Etiqueta de objeto

      1:40
    • 22. Adicione conteúdo interativa usando a etiqueta de destaque - HTML5

      1:25
    • 23. Adicione vídeos no YouTube

      3:13
    • 24. Crie uma lista de reprodução do YouTube

      2:54
    • 25. Introdução para CSS

      1:48
    • 26. Sintaxe em CSS

      3:16
    • 27. Selecionadores do curso e ID

      6:35
    • 28. Como adicionar de CSS

      8:27
    • 29. Modelo de caixa - ordas, marem e adicionando

      8:25
    • 30. Propriedades de fonte em CSS

      6:51
    • 31. Propriedades de texto

      5:04
    • 32. Elementos de bloco e inline (a dividindo e a parte)

      5:42
    • 33. Propriedades de largura e altura

      5:23
    • 34. Propriedade de posição

      9:47
    • 35. Propriedades de Float e clear

      7:02
    • 36. Unidades comparativas e absolutas

      14:56
    • 37. Projeto #1 - crie uma galeria de web com HTML e CSS

      13:44
    • 38. Projeto #2 - formulário da página

      16:49
    • 39. Felicitação

      0:19
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

2.589

Estudantes

1

Projeto

Sobre este curso


A


HTML é uma linguagem de poder que vai ajudar você a desenvolver o aplicativo móvel, sites e trabalhe com outras linguagens como o JavaScript ou PHP que permite a criar páginas de dinâmicas.

B3fTBjg.jpg

Por que participar deste curso?

Este curso vai ajudar a aprender o básico de HTML, HTML5 e CSS, e é destinado para usuários que não tenha conhecimento de HTML e não conhecimento de HTML e que querem adquirir os conceitos básicos desta linguagem.

Ter uma boa compreensão do HTML é uma as principais chaves para desenvolver conteúdo de sites, e, neste curto curso, você vai aprender os conceitos básicos do idioma.

Depois de concluir esse curso, você pode criar uma página de conteúdo estática no futuro aprofundar seu conhecimento de HTML, bem como aprender os primeiros conceitos de CSS.

No final!

Boa sorte!!

O que você vai aprender neste curso:

  • Escolha do editor de código

  • Estrutura
    de documentos em HTML
  • Elementos e atributos de HTML(5)

  • Criação de parágrafos e formato de texto

  • Introduza de comentários

  • Criação de tabelas e listas para exibir dados em formatos diferentes

  • Hiperlinks para se conectar com outras páginas e "salto" para o conteúdo da página interna

  • Criação de formas

  • Uso de imagens e multimídias (vídeo e áudio)

  • Crie uma lista de reprodução no YouTube

  • Entenda o uso de CSS para de páginas de estilo

  • Sintaxe de CSS básico

  • Uso de modelos de caixa de CS, de CSS e algumas propriedades de CSa para estilo sua página

  • Uso de cursos e selecionadores de ID

  • Entenda importância e como o modelo de caixa

  • Define elementos de bloco e inline

  • Posicione elementos em diferentes pontos da página para criar uma estrutura de layout

  • Propriedades de largura e altura

  • Propriedade de posição

  • Propriedades de Float e clear

  • Unidades de relativa e Relative

  • #Project- criação na galeria de web
  • #Project- formulário na site

 

Qual é o público de alvo?

  • Este curso é destinado para iniciantes no mundo da tecnologia e desenvolvimento web



Se você quer aprender mais na área de desenvolvimento da web em

Conheça seu professor

Teacher Profile Image

Luis Carlos

Engineer, Web Developer and Instructor

Professor

Currently, I am an exciting Engineer and Trainer , who loves to learn and share knowledge and new experiences.

As Trainer participated in many projects directed to student in the areas of math, computer science, new technologies and web development . Several years of training helped me developed many skills that contribute to the personal development of each people.

You can follow some of my articles in my website where i share some tutorials in the area of new technologies.

Follow me on Skillshare!

 

 

 

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Trailer: Eu bem-vindo ao HTML e CSS kers. Somos a vida real no mundo. Desenvolvimento fora da Web Meu nome é Wish College. Sou desenvolvedor e instrutor da Web, e esse será o nosso guia nas próximas horas. Indus Class Você vai aprender linguagem HTML Isso é os elementos estruturais básicos usados para criar páginas da Web e CSS para o estilo de conteúdo de pH, levando-o a um perfeitamente fora e design. Você aprenderá o grau HTML e CSS ouro de uma forma simples, eficiente e engraçada. Discursivo é dividido em modelos onde você aprende no primeiro. Todos os elementos básicos usados em uma arma são apresentados também. O adiantamento. Uma vez que permitem que você leve seu site para outro nível no segundo módulo, Vou ensinar-lhe a sintaxe e propriedades fora da linguagem CSS, que melhoram o design do seu site. No final da discussão, você será um HTML e CSS especialistas ser capaz de construir seus próprios sites sem complicações na montanha rural e desfrutar 2. Introdução: o mundo da Internet e seu crescimento. Traga-nos uma série de novos desafios e possibilidades como criar o seu negócio online, gerar conteúdos multimédia, utilizar aplicações de redes sociais e outros tipos de serviços para criar conteúdos online. Usamos o site por sua linguagem HTML, que é definido S uma linguagem de marcação protege usado para estática onde o conteúdo da página esta linguagem é usada para descrever a estrutura fora páginas da web usando marcação. HTML é a linguagem que permite representar muitos conteúdos diferentes. A linguagem como elementos representados por técnicos que são usados para criar conteúdos como tabelas de Vera Griff, imagens, links de papel e assim um. Nos próximos vídeos, você aprenderá a criar alguns desses conteúdos em seu site. 3. Editor de código: L O alunos depois de aprender na primeira classe utilitário off língua veg Daniel. Apresento agora o software usado para escrever cabra para várias línguas, incluindo HTML. O programa usou seus suportes e inteligente e moderno código aberto, onde você pode escrever o seu frio mais rápido, reconhecendo automaticamente diferentes elementos de culto e usar o âmbito de vida para na direita e coluna, que permitem que você abra com um rato. Clique no navegador usando este Aiken no painel direito do aplicativo. A esquerda e a coluna listam os arquivos de trabalho, e abaixo há uma exibição de pasta. Neste último mais completo. Você pode visualizar um arquivo com um clique sem realmente abri-lo. Um duplo clique abre o arquivo para edição, adicionando-o à lista de arquivos de trabalho Para instalar. Você tem que ir a este site briquetes ponto io e clique em chaves de download. Para começar o download no arquivo stel, você precisa seguir instruções que são muito fáceis. Em cerca de dois minutos, vocês se encaixam furtivamente. O último passo é ir para seus programas e selecionar colchetes para iniciar o aplicativo. Agora você pode começar a escrever código HTML. Vejo-te a seguir. Estudantes de 4. Estrutura de HTML: O objetivo principal desta aula é aprender a estrutura básica, muitas vezes. Documento HTML. Antes de começar, vou criar um novo arquivo de e-mail para usar para a forma como as mortes de página que eu quero criar . Eu vou para homens um arquivo, selecionar novo e seguro em arquivos de pasta com nome, home e extensão HTML. Como eu disse antes de um arquivo HTML como diferentes tipos de conteúdo razão pela qual usamos X para distinguir entre eles. A estrutura principal. Documentos html forno como um Siris de imposto que são comuns a todos os documentos que eu vou agora no Criado arquivado os decks que fazem peças fora dessa estrutura. Primeiro, HTML deve começar com o tipo de documento declaração pato tipo HTML. Esta declaração define a morte. Este documento está em conformidade com a versão cinco off html. Os documentos HTML começa agora com HTML deck, e nós cortar html na parte inferior do documento que é o elemento raiz, muitas vezes página html. Próximo. O elemento é o primeiro elemento a aparecer após a tag HTML de abertura. No documento em que colocamos coisas como o título da página Usando tecnologia de título, adicionamos JavaScript ao nosso patch com script, tecnologia, link final para folhas de estilo externas e outro recurso é finalmente a parte visível fora do documentos. Onde escrevemos grande parte do nosso casaco. Esta parte fora do documento HTML está entre a tag body start e end Nós temos agora. Desligue meu instrutor. Nosso documento definido Você está agora pronto para criar o conteúdo em sua página web. 5. Elementos de HTML principais: Bem-vindo novamente a este novo vídeo. Agora que a estrutura do documento está definida. Vamos ver, quais são os elementos em um arquivo HTML? Como eu disse na introdução HTML como elementos representados por tags um elementos HTML geralmente consiste em startek e um Antec com o conteúdo inserido entre eles. Detectar o nome especificado. Um certo tipo de conteúdo que pode ser um risco de adição de imagem, tabelas de referência menos cessar e outros tipos de conteúdo. Quando você usa o software e escreve o sinal menor que você pode ver, isso é aparecer um monte de texto que você pode usar quando você escreve uma dívida, ele automaticamente cria o deck final como você vê quando eu crio a estrutura de documentos . Nesta situação de exemplo. Eu escrevi uma tag de parágrafo começando e terminando tecnologia, e agora eu escrever tabela de tecnologia que é usado para criar tabelas em HTML. Agora que você sabe usar texto para criar conteúdos diferentes, vamos passar para o próximo nível. Não perca o próximo vídeo, onde você aprenderá o que são elementos, atributos e sua importância 6. Atributos HTML: os elementos HTML. Como você viu antes, eu representei por Tex. Cada elemento pode ter um braço são atributos uma raiz líquida fornecer informações adicionais sobre um elemento. Eles são sempre especificados no startek e geralmente vêm com um nome de tributo e valor correspondente. Vou abrir agora. Detectar que é usado para imagens. E m g tec. Se você se lembra, Eu disse no vídeo Elementos HTML que geralmente startek como uma tecnologia final correspondente. O técnico de imagem é um dos textos que não seguem esta regra. Apenas tendo um pau começando retornando agora para a tecnologia de imagem no mínimo de atributos que eu vou mostrar para primeiro fazer com a morte recebe um número que especifica o com fora da imagem, eo outro é o que eu tenho que recebe o eu tenho fora da imagem inserida com estes dois atributos. Você sempre pode alterar o tamanho da imagem em sua página da Web. São apenas dois atributos. A morte. Um elemento de imagem pode f quando adicionamos imagens nos vídeos futuros, você pode ver mais atributos para este elemento 7. Crie título e Heading e Create da página: Olá novamente e parabéns pelo alcance no. Apesar da maldição, você aprenderá nas melhores lições a diferença convencer e texto que você pode usar em HTML. Agora é hora de construir um site. O principal objetivo para as próximas lições é criar texto e imagens, conteúdo em páginas, fora do site e links de papel F para navegar entre eles. A equipe que vou desenvolver é uma agência de viagens onde vou descrever e sempre um destino. A primeira mudança que vou fazer na página é a dívida do título aparece no topo, alterando o conteúdo fora da tecnologia do título para viajar conosco. Agora vou escrever meu tópico usando a tecnologia de adição. Html. eddings fornecem informações valiosas, destacando tópicos importantes e para entender a estrutura dos documentos. Outra grande vantagem é usar motores de busca morte, adicionando como um indicador de que texto é mais importante em uma página. Se você tem que comer uma página integral, a que usa Eddings deve aparecer acima dessa. A morte não está nos resultados das buscas. HTML usar seis níveis fora adicionando decks idade 12 h seis, onde a idade um define o mais importante e um seis. O menos importante ter. Então eu vou escrever o meu qualquer coisa usando o código HTML, começando com a tecnologia-lo um e inserindo os decks que é usado. S página tópico fez como eu lhe disse antes de um soco que fala sobre destino de viagem disfarçado. Vou falar sobre a Índia e descrever algumas informações sobre este país para esses caras. Eu coloquei a mensagem de boas-vindas para ele. No entanto, entre adicionar Tex, vou fazer outra cópia e mudar a adição de tecnologia aos dois anos e ver as diferenças entre eles. Agora que eu faço as mudanças, você pode ver as diferenças no irmão usando a revisão de vida para começar no topo com ter um e abaixo com qualquer coisa para no topo. Você pode ver a viagem título com a gente que eu mudar na tecnologia título. Tenho agora o meu tópico principal em Onde, Compromisso Usando os finais. Próximo vídeo, vou falar sobre parágrafos 8. Adicione seus primeiros parágrafos: Bem-vindos de novo, estudantes. Neste ponto fora da classe, alteramos o título da página e escrevemos o tópico principal usando a tecnologia de adição. É hora de escrever algum texto sobre o assunto da página. Vou entrar nisto agora. Os parágrafos. Eles são um dos mais utilizados. Html TEX O parágrafo Tech é usado em pares, o deck de abertura usando P indo antes dos textos ref urso e a carne de tecnologia de fechamento vai atrás do texto. Você deve usar os parágrafos para blocos de texto dentro de sua página da Web. O navegador em quebras de linha automaticamente antes e depois de seus parágrafos para dar uma aparência consistente à página . Na minha pasta made, eu tenho um arquivo chamado Text India, onde eu tenho os decks que eu quero para a página. Só precisa abrir, copiar e agora inserir entre a tag de parágrafo. Agora que eu colar o texto, vamos salvar o arquivo e ver como ele fica no navegador. Você pode ver agora o texto em nossa própria página com a adição acima. Embora no meu arquivo HTML, o texto de cópia aparece com muitas linhas e espaços manu entre palavras. O navegador não reflete essas linhas diferentes em especiarias, aparecendo todos os decks cair com isso. As linhas em espaços são ignoradas pelo navegador. Se eu fizer agora uma cópia fora do conteúdo parágrafo, você pode ver que a página como outro urso ref final para usar fora pais. Como eu disse anteriormente, em quebras de linha no início. Índios fora da nova barreira Se você quiser ter mais quebras de linha entre parágrafos ou 80 e acima de texto, imagem ou outro conteúdo, você pode usar a tecnologia de quebra de linha que é representada por B R. Este deck como apenas abertura pau eu uso agora meu arquivo html para colocar quebras de linha dentro. Meu primeiro ref sobressalente mordeu as palavras Oceano e Índia e outro entre os dois parágrafos com o texto principal que você pode ver no navegador. X esperava que você tenha uma quebra de linha após o trabalho oceânico e se mais uma quebra de linha entre os riffs do urso, quebras de linha são muito úteis, e não podemos simplesmente soltá-los em nosso HTML onde quer que queiramos alterar o espaçamento entre certos elementos. Após estes dois textos, você aprenderá na próxima lição algum texto para formar um texto. Vejo-te em breve 9. Formatação de texto: Olá novamente depois que falamos sobre parágrafos e tags de quebra de linha, vamos apresentar os novos técnicos, começando com negrito e itálico quando eu quero definir um texto bowl. Eu costumava ser tecnologia que pode ser usado em uma única ou várias palavras para a frente e pode ser definido dentro de outra tenda como um parágrafo ou um link de salto ou fora, apenas usando a tecnologia ousada isso para tributar. Um negrito e itálico foram usados em versões mais antigas fora do HTML. Eles são declarativos como depreciados, mas os navegadores devem continuar a suportar textos depreciados, mas eventualmente os stands são susceptíveis de se tornar obsoletos. No futuro. No entanto, isso foi substituído pela tecnologia de ênfase representada por E. M e a tecnologia de AVC por padrão. Isso é exibido em itálico e negrito, respectivamente, para que possamos usá-los como substituições de diretores. Além disso, estes novos textos são cumpridos com os novos padrões HTML mais recentes, a ênfase ed stroke html Tex. Eu usei da mesma forma que outros textos. Colocamos a tag de abertura antes do texto e, em seguida, a tecnologia de fechamento após o texto que queremos escrever. Eu estou indo agora para usar nossa página HTML para estes dois textos em situações primeiro para formá-lo com forte valor da tecnologia, Índia No meu parágrafo Só preciso colocar a palavra dentro. O forte começa uma tecnologia final para a outra situação. Eu quero criar fora do ref urso. Nós tínhamos formatos de ênfase fortes. O texto. Isto é um texto. Nós tinha forte tag olhando para a página depois de salvar você ver o resultado esperado com o mundo com forte formato de ênfase dentro urso, ref e o próximo fora. Vamos fazer agora o mesmo procedimento com a E. M. Tech. Usei as mesmas palavras para fazer essa mudança. Primeiro, a palavra Índia dentro do texto e em seguida o texto onde eu vou mudar os decks de forte. Espere enfatizar Destacar-se que permite que o texto com tamanho tele esperar no navegador é visível. As mudanças usando a tecnologia GM do Martek é a próxima a falar. Esta tag é usada. Se você quiser destacar partes do seu texto, vamos ver agora como ele fica no navegador. Eu uso novamente a palavra Índia para colocar entre esta nova tecnologia que abre o navegador. Você pode ver as dívidas distrito. Gosto de fazer palavras como disse antes, depois do Martek. É hora de tag pequena que, como o nome diz, define um texto menor usando Agora este deck para desligar. Texto fora do meu árbitro nu e ver os resultados. Com a adição fora esta nova tag no navegador, você vê que parte off urso esquerda texto agora é menor, os dois lastex nossa visão e, em vez disso, o primeiro definido separado fora do texto que é excluído em um documento e o segundo uma palavra nossos técnicos que é inserido em um documento. No próximo exemplo, eles serão usados em conjunto. Eu quero excluir a palavra Índia e colocar Tailândia é o trabalho que eu quero colocar em tamanho texto negócio é Índia e em vez vale a Tailândia. Para a palavra excluída, o navegador bater uma linha para abaixo valor excluído, eo trabalho inserido é agora sublinhado depois na tecnologia de inserção. Ele está tão longe agora, estudantes, vejo vocês na próxima lição 10. Inserir imagens: Bem-vindos novamente alunos depois que tivemos texto Informa. Vamos agora usar a imagem em nossa página web. Para adicionar imagens você tem que usar a imagem. Eu sou G que só tem uma tecnologia de partida. Eu vou escrever meu Ted usando para atributos importantes que fornecem informações adicionais sobre este elemento HTML. O primeiro e o mais importante depois produziu a fonte que especifica os animais de estimação fora do arquivo. Vou ter minha fonte escrevendo CRC e a etapa final que está no meu diretório principal. E se o nome fora da Índia que J. Peg, você pode ver que software reconhecido automaticamente difamar imagem dívida está no meu diretório principal , o que é muito útil. Os outros três atributos importantes são o ult que especifica um texto alternativo para uma imagem. Se a imagem não puder ser exibida. Finalmente, o TIC e com fora da imagem para colocar a imagem com o tamanho que você quer, Eu vou se eu agora o Alltech e escreve texto Índia imagem após dis tag I direito, Eu tenho com valor para centenas de pixels e eu quero fazer com o valor off 300 pixels Agora eu salvei o documento e eu posso ver a imagem no meu navegador. Se você alterar um fora do tamanho em rotas, por exemplo, eu tenho 200 você pode ver que a imagem aparece com tamanho diferente. Como esperado, Menos ação que eu quero fazer é mudar o nome da imagem, para não ser reconhecido pelo navegador e pode ver o texto que definimos no deck, tudo mudando no meu casaco para a Índia. Um. Vejo isso no navegador. A imagem agora não é reconhecida e o texto na imagem aparece. O próximo passo desta página é ligar para páginas fora do site usando um por links. 11. Listas em HTML: Para este novo vídeo, você vai aprender a criar listas. HTML oferece duas maneiras para especificar menos de informações que devem conter quando o nosso mercado menos elementos usando tecnologia você l você criar um A Norbert menos marcado com balas e com tecnologia O l e encomendá-lo menos que fornece um número de menos para este exemplo e usando ph próprio dot html Eu quero criar um em ordem, pelo menos após a morte imagem eu estou na página antes de começar o meu menos vai criar um parágrafo com texto, conhecer as principais cidades da Índia. E depois deste texto, vou colocar a minha lista em ordem com três nomes de cidades, começando com a minha tecnologia Você l eu definir que i f e na lista de ordem e entre o u l começando e terminando tecnologia, Eu coloquei cada elemento na minha lista dentro a tecnologia l I primeiro elemento fora menos é texto Balmain. O segundo será Deli City e último Elements bracelete são que eu tenho agora na minha página listada três cidades usando uma lista ordenada como você pode ver no navegador se você mudar de você l 20 l você vê que em vez de balas você números F em cada elemento fora do são liberados. Como você pode ver, é muito fácil criar leasing com HTML. Por exemplo. Você pode usar essas listas fora de cidades para criar um indivíduo de rua apenas morto. Descreva cada cidade usando abril de duas linhas entre as páginas. É apenas uma sugestão para usar esta lista. Obrigado e te vejo na próxima lição. 12. Crie links: Olá, faça esta nova aula. Eu quero criar qualquer por link entre duas páginas diferentes e usar links internos para saltar com parte especificada fora da página atual, começando com April Inc. Primeiro, eu vou copiar minha própria página e criar outra dívida. Eu dou o nome sobre dot html agora acabou de abrir o novo arquivo HTML e elite os textos mais antigos e substituiu a nova dívida de conteúdo. Eu quero que a minha segunda página tenha certeza de que o segundo tom é diferente. O novo texto está no meu arquivo de texto que usei na minha primeira página. Vou copiar agora o texto e fazer a mudança no novo campo. Depois de mudar o texto, eu uso outra imagem usando este mesmo casaco. Eu só preciso selecionar no meu diretório principal a imagem que pensamos viagem ponto Jay Pek em vez India dot jay pek. Agora tenho minhas duas páginas com todo o conteúdo que eu quero, e é hora de criar o Sperling. A tecnologia que é definida para links de abril é o ATEC. Uma das respostas mais importantes inicializa esse elemento é um rascunho de atributos, que indica o destino do link que pode ser um link externo para e onde Patch é simplesmente um novo dedo do pé de pesquisa. Outra página que eu tenho no meu diretório. Vou abrir a minha tecnologia e o meu atributo. Um rascunho recebe minha segunda página sobre dot html agora apenas F dois direita entre o início e e marcar o texto que como o April Inc eu escrevo para dext disfarçado sobre nós e fechar finalmente, Atec assistindo agora os tubos no navegador. Eu posso ver que o por link nos decks e se eu clicar Eu abri a página sobre dot html s nós queríamos agora só precisa criar um link da página sobre dot html para a página inicial. Ele placas sobre ponto html i f. Para usar o mesmo importava para se conectar ao seu próprio campo com um rascunho de página de recebimento no ponto html e direito na página, criando um abril ligado à página inicial que terminamos. Agora, a parte de link mais profunda você pode navegar agora entre essas duas páginas. Outra opção é vincular a uma parte específica do documento em vez de outra página. Se você quiser vincular a uma parte específica, você pode usar atributos de ideia que permitem identificar uma parte do seu tom e gem para a seção usando qualquer página por link vincula nossos direitos quatro vezes quando você tem um monte de informações em uma Web e deseja dar ao usuário uma maneira de saltar para uma seção específica. No exemplo seguinte, eu usei este método apenas para ir de baixo para fora da mordida, fiquei no topo usando qualquer pérola e criando um I D. No cabeçalho fora da página Para esta situação, eu coloquei na minha tecnologia de adição e eu d com nome back top, e esta parte fora do documento agora é reconhecida. Com isso, eu d agora só precisa criar um link na parte inferior da página para saltar para o topo, usando na minha tecnologia o atributo, um rascunho com a tag de cinzas e a idéia que eu dou no topo. Tendo o último passo é escrever borda superior do texto para F qualquer texto de pérolas para saltar para o topo da página. Eu só vou fazer algumas cópias fora da imagem para colocar mais conteúdo na página e ver melhor o efeito fora do novato. O link inferior agora está pulando para o início como você pode vê-lo. Então, por agora, vejo você na próxima lição 13. Tabelas: Olá. É hora de criar estábulos em seu site. Tabelas HTML são certos para quando você deseja apresentar informações de uma forma clara e estruturada, sendo mais fácil de organizar isso, como texto, imagens e links. Vamos dar uma olhada no HTML usado para criar uma tabela. Existem quatro textos principais usados para criar tabelas. Uma tabela HTML é definida com a tecnologia de tabela que define a tabela inicial e ter correspondido, terminando tecnologia até o fim. Fora da mesa, a linha da tabela é definida com tecnologia TR. O outro é definido com th tecnologia, que pela tabela de exibição falha Eddings com ambos distante Matt e Central dando mais ênfase à nossa coluna de tabela. Methink um dados de tabela é definido com Tedy e é usado para escrever diferentes tipos de dados na célula. Todos estes textos distantes como uma tecnologia de início e fim para definir o início e o fim cada elemento. Para o próximo exemplo, eu quero fazer uma tabela com duas colunas e duas linhas, que saiu da rosa é o final da tabela. Como eu disse anteriormente, a tabela começa com a tecnologia da tabela, e depois disso eu quero meu papel principal usando o TR Tech. E agora eu defino os dados dentro da linha como adição, usando o th duas vezes porque eu tenho duas células para colocar dados de cabeçalho dentro do th tex que eu escrevo adicionando um e indo para e minha linha é agora termina para criar a segunda linha. Eu agora a minha tecnologia tr e entre o início eo fim em Tech, Eu criar dois textos TD para colocar minha filha nas duas células, escrevendo dados um e datado para agora. É hora de salvar minhas alterações e ver os resultados no navegador. Como esperado, obtemos uma tabela que subiu por duas colunas com adição na primeira coluna e que na outra linha, como você pode ver, é muito fácil criar tabelas usando HTML. Vejo você na próxima lição. 14. Introduza comentários: para esta lição, vou falar sobre fora para fazer comentários em seus casacos. O stick comentários é usado para inserir comentários que não serão exibidos em seu navegador e não afetam seu casaco HTML e correspondente. Onde pH espera A principal vantagem de usar comentários é a explicação fora do direito e casaco ter especial relevância quando o usuário está dando os primeiros passos em HTML, ou mesmo para usuários com mais experiência quando eles usam casaco muito extenso e trabalhar em muitos projetos e às vezes são muito meses sem trabalhar em alguns desses projetos. Como você pode ver nesta página, eu já coloquei os comentários da Siri fora para inseri-los. Eu usei a tecnologia comum, e entre a tecnologia de início e fim, eu insiro os comentários que explicarão cada parte fora do casaco, cada elemento diferente que eu sou. No meu arquivo. Sempre comentar, apenas dizendo que tipo de conteúdo para chamado colocará como parágrafo, estábulos, listas e assim por diante. Se você quiser, você pode adicionar comentários mais extensos para explicar em detalhes o que cada parte do casaco faz. Neste exemplo, Eu escrevo um comentário dizendo que eu ordenei lista usando o ol Tech para explicar o que o empilhado isso É tudo por agora. Vejo-te na próxima lição 15. Estilos de HTML: como anteriormente. Eu disse, o HTML é usado com a proposta de criação de conteúdo para as páginas da Internet. Mas quando falamos sobre a aparência de seus elementos, HTML é muito limitado. O que? Não é bom. Se você está tentando dar a um site um layout pessoal ou identidade, sua proposta deste vídeo é apenas para dar uma pequena introdução aos estilos fora do conteúdo HTML para destacar algum do potencial fora da linguagem folhas de estilo em cascata, também conhecido como CSS, retornando à aparência fora dos elementos. O CSS é o que permite que você faça as alterações fora de cor, posição e outras propriedades fora de elementos, usando um atributo com estilo de nome que recebe uma propriedade CSS e um valor correspondente que permitem a alteração fora do estilo no Elemento HTML. Então, a regra principal é o uso de um estilo associado ao ataque, e para este exemplo eu usei no ataque, P criou um estilo Edward para alterar a cor da propriedade fora do texto com valor azul. A propriedade e o valor irão definir o que alterar nos elementos HTML para o parágrafo deste cara irá modificar o chamador de texto para azul. Como você pode ver no navegador. Existem outras propriedades usadas em parágrafos que podemos usar. Estilo de erva daninha Atributo como texto a linha para alinhamento de texto, tamanho do telefone e família divertida. Para fundos de texto, você pode aplicar Martin uma regra em sua tecnologia. Só precisa separar cada um governado por meio de dois pontos. Quero me candidatar agora. Outra regra para este parágrafo. Alterar o tamanho do texto Usando a propriedade fun size com valor 14 pixels no navegador é visível. As mudanças com este novo valor Outra grande mudança que podemos fazer é a cor de fundo fora da página que por padrão é branco. Estas alterações devem ser aplicadas dentro do corpo startek se você quiser aplicar a cor a toda a página usando a propriedade cor de fundo dentro da tag body, eu defini cor de fundo com luz valor logo após salvar o arquivo, podemos ver que o processo agora reflete essas alterações com a nova cor de fundo cinza claro. É tudo por enquanto. Obrigado 16. Formulários em HTML: Bem-vindo novamente a este novo vídeo. Os próximos minutos são dedicados à criação de formulários. Formulários HTML são um dos principais pontos de interação entre o usuário e um site. Eles permitem que os usuários enviem diferentes tipos de dados do site datado que na maioria das vezes é Cento, um servidor Web que tem a função de receber e gerenciar dados. Um formulário HTML pode ser feito de campos de texto, botões, botões, , caixas seleção, caixasde seleção ou botões de opção. A principal diferença entre o formulário HTML e o documento HTML simples é que a maior parte do tempo os dados coletados pelo formulário são enviados para um servidor Web. Como eu disse anteriormente na unidade daquele cara configurar servidor Web para receber e processar os dados . A proposta deste vídeo não é configurar um servidor Web. É aprender a criar diferentes tipos de farms usando campos de texto, enviar botões e botões de opção, começando com o casaco que ajuda você a entender melhor para criar a fazenda. O formulário HTML sempre começar com Fordham Tech que representa uma seção de documento que contém controles interativos para enviar informações para um servidor Web dentro iniciar e fechar formulário Tech é onde nós inserimos os diferentes elementos. O elemento mais popular é o elemento de entrada HTML que é usado para criar controles interativos para formulários baseados na Web, a fim de aceitar dados do usuário, Existem diferentes tipos de elementos de entrada como campos de texto, botões de opção, caixas de seleção e outras. O primeiro exemplo a ser exibido usa dois tipos de campos de texto de elementos para receber informações e um botão de envio. Comece a escrever meu casaco. Eu crio a seção de início e fim usando o formulário técnico. O próximo passo é adicionar os elementos fora do farm, inserindo tecnologia de entrada que há um atributo chamado Type que recebe os elementos tipo off disfarçados. Quero um campo de texto para direitos, que este elemento receba um texto de valor. O próximo depois é o nome do atributo que eu usei para receber o nome pelo qual o valor em certo no campo de texto será reconhecido para disfarce. Eu dou o atributo nome, valorizo o meu nome. A última ação é o nome certo antes que a tecnologia de entrada apareça as etapas antes do campo de texto inserir fazendo uma visão geral. Primeiro i f um elemento de entrada que é do texto do tipo e vamos receber um valor que será reconhecido como o meu nome no navegador é visível. Isto em Patel Mint, onde podemos escrever textos agora é hora de criar outro elemento semelhante que recebe a idade em vez de nome. Acabei de bater o casaco anterior e agora idade antes de entrada Tech e mudou o atributo nome para a minha idade para ser reconhecido. Agora com este novo nome, menos mudança para Mike é alterado o tipo para ele próximo ao número porque agora neste campo, eu quero receber uma idade que é representado por um número para enviar Agora esta fazenda nós sente que eu tenho para colocar qualquer botão put. Eu tenho que alterar o tipo de texto para enviar porque agora eu tenho que enviar informações necessárias Este elemento de entrada como um valor após rota que recebe dívidas, morte enviar botão mostra. Eu só quero que aparece texto enviar no botão. O programa do navegador era agora esta árvore elementos de entrada primeiro recebe texto, outros números e para o último para confirmar os dados inseridos, você pode ver que o segundo campo que recebe números como setas para aumentar e diminuir o número que você colocou no campo. Esta situação só é possível porque o campo foi definido como número e não texto. O detalhe final é o endereço que você pode ver no topo da página, onde você vê negando atributo que eu defini como meu nome e minha idade que agora estão recebendo as informações que eu escrevo nos dois campos. Meu nome recebeu informações desejo e minha idade. O número 35. Este é um inteligente esperou em informações de luta que foi apresentado na fazenda. 17. Formulários de HTML II: após o primeiro formulário, é hora de criar um farm que receba senhas. Eu quero agora um novo formulário com o registro que recebe tipo de texto e cada valor meu registro no nome atitudes. No segundo elemento de entrada, quero receber a melhor palavra. Então meu elemento colocar como uma senha de tipo para o texto, não ser visível. Eu defino agora lá durante a noite para o acordo com o meu melhor valor. O último elemento é o botão enviar como criamos no exercício anterior. Eu posso ver agora no navegador este novo formulário que é muito usado em situações sobre indicação em sites. Agora que eu sempre formar com arrastar Best e enviar botão, Eu vou ter um botão de rádio para o último formulário criado para definir o gênero fora da pessoa. Para usar este tipo fora elemento de entrada, Eu tenho que mudar o tipo para rádio e atributos definidos. Nove com valor meu gênero para meus dois elementos de entrada. Quando você tem uma lista de botões de opção desenvolvidos dado ao nome depois, ele deve ser o mesmo para cada opção no mínimo para garantir que Onley uma entrada de rádio no grupo pode ser selecionada quando o farm é enviado, ele irá incluir o conteúdo off value atributo que eu defini para cada botão de opção selecionado para o primeiro elemento de entrada desenvolvido. A Defiant é macho e a segunda fêmea. Eu tenho agora a minha nova fazenda com o botão de rádio e no navegador Arnel visível as mudanças com estes novos tipos de campo. A última alteração é a adição de um botão que faz a reinicialização das informações que você coloca no farm. Isso pode ser útil quando estamos preenchendo o formulário e há um erro por escrito. Eu só preciso de outro elemento de entrada onde eu defino minhas redefinições de tipo, e eu quero que o botão apareça com o botão de redefinição de texto abrindo o navegador. Você vê que ao selecionar este botão, as informações nos diferentes campos de texto brilharão como esperado 18. Introdução com conteúdo de multimédia: multimídia como sons, música e arquivos de vídeo podem adicionar alguns conteúdos interativos para atrair e toda a atenção dos espectadores. Sites com esses conteúdos são frequentemente preferidos por departamentos de marketing porque fora sua capacidade de apresentar completamente branding usando casaco que tem sido disponível por anos. Agora você pode esvaziar qualquer número de diferentes tipos de arquivos multimídia, criando conteúdo incrível em um site. Nos próximos vídeos, mostrarei um texto em HTML da Siri que lhe permitirá adicionar elementos multimídia com o proposto off alcançando o conteúdo de uma página web. 19. Adicione vídeos em uma página: Olá. Esta é a primeira lição onde eu uso um vídeo elemento multimídia que é usado para especificar vídeo em documentos HTML. Para introduzir este tipo de conteúdo, Eu usei vídeo de ataque que tem a função Toe final vídeo união documento. Na auto-introdução da equipe ao HTML, você aprende que os elementos podem ter atributos. Dívida fornece informações adicionais sobre o elemento específico para este tipo de elemento. Há dois atributos importantes que eu terminei com, como usar nas imagens, porque se eu e com não são definidos a promessa, meu flicker cargas de vídeo descontroladamente. Para este exemplo, eu uso elemento de vídeo com o com off para 100 pixels, e eu tenho off 300 pixels. Finalmente, os atributos de controles é usado para oferecer controles que permitem ao usuário controlar a reprodução de vídeo , incluindo busca de volume e buzz currículo Blais Vic. Dentro do vídeo, eu usei esta pilha AR que recebe arquivos de vídeo alternativos, que o navegador pode escolher. O Browder simplesmente usará os primeiros formatos reconhecidos que usei para esses caras para atributos neste elemento. CRC dois especifica a fonte de vídeo e o tipo de atributo para nos informar o tipo de mídia da Internet fora do recurso de mídia para este exemplo. O arquivo é filme que e antes, e o tipo é vídeo em antes de eu usar um nome antes do arquivo, mas arquivo html suporta outros dois formatos de vídeo diferentes. Onde eles e abraçar. Finalmente, o texto entre o vídeo Tex só é exibido na morte do navegador não suportam os elementos de vídeo disfarçados. Eu coloquei a mensagem inválida, irmão. Depois de terminar o frio, vamos ver como fica no irmão de vídeo. Como esperado como um sério fora. Quais funções eles ajudam você a gerenciar o conteúdo de vídeo. Agora, se você quiser isso, o vídeo começa automaticamente em sua página. Apenas f para alterar os controles de atributos quando eu acredito e você vê no navegador depois de salvar as alterações. Death Review Começa por si mesmo. É tudo por enquanto, Estudantes. Vejo você na próxima lição. 20. Insira áudio - HTML5: Olá depois de David você. Vamos falar sobre você. Esse é outro elemento multimídia importante quando eu quero inserir sons. Eu usei tecnologia valor e, como o vídeo usa controles atributo para exibir de seus controles como Bligh arcos n volume . Então eu comecei meus elementos de áudio que na morte através dele controla ao lado o elemento fonte que permite que você especifique alternativa. Todos os arquivos que o irmão pode escolher no navegador usarão o primeiro formato reconhecido , como no vídeo. Para estes elemento eu uso contra CRC atributo para receber o arquivo de origem. E para este exemplo, eu quero explodir um arquivo carga doca tipo tipo de onda atributo, especifica o tipo de arquivo para esses caras e agora o arquivo e recebe o valor Al do wife. Além do elemento de valor de hortelã caminho longe suporta outros tipos off arquivos e entre e ogg . Finalmente, o texto entre o valor começa e a tecnologia de fechamento será exibido no navegador que não suportam esses elementos. Assim como exemplo individual, Eu agora a mensagem irmão inválido. Para esses elementos no navegador, agora você tem o vídeo da lição anterior e inserido audiófilo. Só precisa usar o botão de reprodução para iniciar esses arquivos. Então, por agora, te vejo na próxima lição 21. Etiqueta de objeto: Olá. É hora de introduzir um novo elemento. O objeto rejeitado elemento de objeto de e-mail representam um recurso externo que pode ser tratado como uma imagem ou simplesmente um recurso a ser e liderado por um plug in. Você pode usar esse elemento para esvaziar multimídia em suas páginas da Web. Como Como você visualiza arquivos flash ou simplesmente outra página da Web em seus documentos HTML? Para este primeiro exemplo, eu defino um objeto com o com off 300 pixels, e eu tenho off 200 pixels e recebe-o que atribui o nome fora do recurso para este caso. Arquivo de vídeo ponto m Antes, depois de salvar, você pode ver este arquivo carregando no irmão. O próximo bloco F casaco I introduzindo Steph um arquivo de vídeo. Um arquivo HTML que eu m. Em outra pasta Call Tim Plight e usando a falta. Negamos que estou indexando esse HTML com o trigo fora 800 pixels, e eu pensei 600 pixels. Os resultados no navegador é outro arquivo HTML que você pode ver na página e aparece após o mais leve em determinado vídeo. É tudo por enquanto. Os alunos veem-te em breve 22. Adicione conteúdo interativa usando a etiqueta de destaque - HTML5: Olá e bem-vindo novamente. O próximo passo para mostrar-lhe é que tecnologia fez HTML no elemento é usado para terminar um aplicativo externo ou conteúdo interativo. O que chamamos de um plug in para este próximo exemplo eu simplesmente vou terminar outro vídeo como as doenças objeto que eu defini meu com e eu tenho para este exemplo com um com off 600 pixels e eu pensei 400 pixels e o arquivo de origem é agora dado por CRC Atributo que recebe o filme arquivo um ponto mp para estes stick não tem ser uma parte fora html quatro e seu novo na versão cinco. Uma diferença entre objeto e elemento, em seguida, vazio é que o primeiro s começando e tecnologia e eles apenas f tecnologia de abertura. Como você pode ver, você pode ver no navegador o objeto e vídeo que definimos na propriedade source. É assim por enquanto. Vejo-te na próxima lição 23. Adicione vídeos no YouTube: Bem-vinda de novo. A maneira mais fácil de reproduzir vídeos com HTML está usando você para A diferença entre os exemplos anteriores é que eu usei vídeos que foram salvos no meu diretório principal, mas para disfarçar, minha fonte será os animais de estimação de vídeo na Internet para reproduzir um em sua página da Web usando você para usar a tecnologia de quadro I que especifica em seu quadro de linha. Comece a escrever meu resfriado. Eu abri eu quadro e especificado trigo fora 400 pixels, e eu pensei 300 pixels para mudar isso. Eu mencionei fora do jogador os atributos SRC Me dê quem são l vídeo que eu quero jogar e para disfarce. Eu copio um Warrell que eu tenho no meu arquivo de texto e melhor para o meu editor de peles. Como faço para obter este link? Basta ter que ir para o YouTube e, em seguida, depois de selecionar um vídeo, você clicar em compartilhar e selecionar Opção e e aparece em S. R. C. Atributos o link que você precisa para ganhar o link de vídeo que é diferente do link original fora do vídeo. Está visível agora. Você faz vídeo no navegador após esta etapa? Se eu quiser reproduzir automaticamente o vídeo quando um usuário visita a página, só precisa ter um dedo do pé de perímetro simples. Seu YouTube, que são l também jogar com realmente um. Faremos isso tocar automaticamente. O valor padrão está fora de jogo com o valor zero que faz vídeo. Não jogue fora. Você pode ver no navegador que com esta reprodução automática ativar o vídeo começa quando eu abrir a página. Outra opção é reproduzir o vídeo em loop sem parar para fazer essa alteração. Eu ainda o circuito de perímetro e dar um ao Valley, e agora o vídeo vai fazer o loop como nós queremos. Loop com valor. Zero é o valor padrão deste perímetro. Eu executar agora o filme novamente e colocar o vídeo no final para ver que o vídeo vai começar novamente automaticamente. Os últimos caras a mostrar é a exibição desligada. O jogador controla que, por padrão, é muito um. O que faz exibir os controles. Se você quiser remover os controles, só precisa alterar os controles Perímetro para o valor zero e os controles serão desativados como você pode ver agora na página. Coisas 24. Crie uma lista de reprodução do YouTube: Olá e bem-vindo novamente, Você sabe, agora, fora para terminar vídeos do YouTube em sua página da Web, alterar algumas propriedades para os vídeos como ativar e desativar os controles, loop vídeo e mudar os lados fora do vídeo jogador para este novo exercício, Eu quero adicionar um vídeo, mas usando uma playlist do YouTube em vez de fora de um único vídeo como você fez na lição anterior . Se você ainda se lembra de Wims um vídeo do YouTube, Eu uso a tecnologia moldura olho terminando os atributos SRC. Coloquei-os vestidos para conseguir este endereço. Eu seleciono o vídeo que eu quero, em seguida, clicando em compartilhar e selecione final de opção e aparece em SRC-los o vestido que você precisa copiar para o seu editor de casaco agora começando. Tínhamos ligado para a minha playlist. Vou criar a tecnologia I frame e primeiro defini o tamanho do jogador com um trigo de 500 pixels e ensinei 400 pixels. Seguinte s são ver onde vou receber o endereço da lista de reprodução para receber a lista de reprodução. Você sempre pode usar este casaco padrão que eu tenho em comum. O truque é a idéia que aparece no final do endereço após o símbolo do veículo para ter este eu d. Eu vou para você onde eu selecionei cada fazer seguinte. Selecionei o nome do canal para exibir todas as listas de reprodução fora do canal. E depois disso, eu seleciono a segunda lista de reprodução que F 138 vídeos. A lista de reprodução está agora aberta e eu tenho que selecionar no topo o vestido I d. Isso é ao lado do símbolo de igual. Esta é a idéia que eu tenho que adicionar ao meu endereço S r. C fazendo agora a cópia. Eu abri o navegador e você pode ver que o menos s 130 18 anos como esperado para melhor para os próximos vídeos fora da lista de reprodução. Só precisa ir para os controles Botões para mudar para o próximo vídeo playlist. Isso é tudo por enquanto. Obrigado. 25. Introdução para CSS: Olá. Neste ponto, você aprendeu a linguagem HTML que é usada para criar conteúdo de página que, por padrão segue o fluxo normal de uma página da Web. Mas esta linguagem não leva em conta a criação fora de estilos como o tipo fora frente. Os chamadores jovens posicionam diferentes elementos, alteram o tamanho da imagem e outros detalhes. É aqui. Dívida, CSS lugar. Um papel importante que está sendo descendente. Por quê? Para estilo plano texto da Web com fundos acadêmicos, links de abril Fornecendo um controle poderoso sobre a apresentação muitas vezes. CSS do documento HTML. As folhas de estilo em cascata também conhecidas podem ser facilmente separadas do HTML. O que se torna muito fácil de modificar todo o olhar fora do site. Existem outras grandes vantagens fora CSS sendo fácil de aprender e entender o aumento de baixas velocidades em uma página da Web como uma manutenção fácil, e você pode reutilizar o mesmo estilo porcaria em várias páginas da Web. Nas próximas lições, você verá como criar estilos para páginas de desgaste, a fim de pensar em vantagem de todos esses benefícios em folhas de estilo em cascata. Obrigado 26. Sintaxe em CSS: Como eu disse antes. CSS é usado para alterar o estilo de elementos criados inv envelhecido ml frio. O primeiro passo importante é criar um estilo para criar estilos que perdi F Uma regra de dívida consiste em um seletor e um bloco de declaração que está em uma estrutura delimitada por uma chave sem ping e a de fechamento, onde um seletor está em HTML tecnologia como uma compensação ou melhor tag ref em que um estilo será aplicado. O bloco declaração como uma única propriedade ou o grupo de propriedades como cor com dívida TIC são as propriedades selecionadas que eu quero alterar o estilo, usando os valores que é a parte que atribui um valor particular para a propriedade que estão mudando no currículo. Eu quero alterar uma tecnologia HTML que é dada por um seletor que é, uma propriedade que eu quero assinar com um respectivo valor. Para ser mais claro no exemplo abaixo, eu quero mudar a cor para verde e fundos de texto para verdana fora do meu parágrafo. A dívida está definida no meu casaco. Como você pode ver na imagem ser tag é o meu seletor, cor e fonte família são as propriedades que eu quero alterar e verde n verdana nossos desenvolvedores que eu quero atribuir às propriedades. Se você quiser alterar mais de uma propriedade para uma tecnologia específica como neste exemplo, você tem que usar uma semi coluna entre cada par fora de propriedade e valor. Outra situação diferente é onde você deseja afetar mais de uma tag HTML com o mesmo estilo. Para essa situação, você usa uma coluna para separar cada um fora do seletor para alterar. Eu vou agora com interminável antes tarifa e eu apliquei para a adição da mesma regra que eu aplicar para o parágrafo. Então eu só preciso usar este novo seletor para compartilhar a regra de parágrafo com ter tecnologia. Isso é o que eu fiz agora onde eu aplicar a regra criada para o meu elemento tendo como você vê no navegador. Ter texto agora é afetado com o mesmo estilo criado para o parágrafo. Obrigado 27. Selecionadores do curso e ID: Olá outra vez. Nós já vimos os seletores HTML que são usados para representar textos como parágrafos, e tudo é como você viu anteriormente. Mas você também pode definir seus próprios seletores usando classes e I d seletores. Os benefícios de usar classes e I DS é que você pode ter o mesmo elemento HTML, mas apresentá-lo de forma diferente dependendo de sua classe ou I D. Então eu posso ter mais de um parágrafo em uma página que pode ter estilos diferentes porque eles usam classes diferentes ou IDs no CSS. Um seletor de classe é o nome precedido por um ponto e um seletor de I. D é um nome precedido por um caractere Nash, agora mais detalhadamente e começando com óculos como eu disse pode ser usado quando você quer diferentes estilos de um determinado elemento. Para este exemplo, eu tenho dois parágrafos e, em seguida, adicionar, e eu quero estilizar dois parágrafos usando texto, cor e tamanhos de fonte diferentes . Primeiro parágrafo com tamanho frontal 20 pixels e cor azul e segundo par riff peidando pixels e cor marrom. Dentro do nosso HTML frio. Atribuímos uma determinada classe usando os atributos de classe dentro da nossa tecnologia para a situação. Preciso de aulas diferentes porque quero estilos diferentes. Definindo o primeiro parágrafo com o nome primeiro e segundo com o nome. Em segundo lugar, quando eu defini essas duas classes em CSS, sempre começando com que seguido bicicleta Sobrenome que eu uso para a classe primeiro, tamanho frontal com valor 20 pixels e cor azul e para os meus segundos classe as mesmas propriedades frente tamanho, mas agora com valor 14 pixels e cor com valor marrom, você pode distinguir agora esses estilos diferentes no navegador. Como você pode ver. Outra coisa que eu posso fazer que é um pouco diferente é afetar todos os elementos que eu quero com o mesmo estilo. Para este exemplo, eu só quero ter o mesmo estilo usado para o primeiro parágrafo no meu elemento tendo, juntando a adição com classe primeiro usando coma para separar os dois textos. E agora o estilo é semelhante a ambos os elementos. Então a grande vantagem de usar classes é que eu posso reutilizar os mesmos estilos em vários elementos. Próximo passo é I D seletores Dívida em CSS permitem que você meta elementos por seus valores I D. A grande diferença quando comparado com as classes, é que eu os seletores, são únicos. Então você pode aplicar em Lee para o conteúdo fora de um elemento. Se você se lembrar em HTML, I d pode ser usado para criar uma ferramenta âncora para uma parte específica fora da página. E se você incluir Martin quando eu d. O navegador não vai saber para onde ir quando você faz referência ao i D. Porque que eu d é usado em diferentes partes fora do documento HTML. Isso é o que você vê no arquivo próprio dot html que eu crio anteriormente, onde eu tenho uma âncora definida que faz esse link de parada saltou para o elemento que, como o i d back top que é a minha adição de um elemento. Se você tiver mais de um elemento com estes I d. Nomeie o navegador, não sei para onde ir. Este é um exemplo simples para entender por que eu d é usado apenas uma vez que teríamos mesmo valor. Então, usando o exemplo anterior usado em óculos, eu mudo agora classe para I D. E onde eu defini os estilos em vez de usar um ponto antes de morrer. O nome que usei a tecnologia de hash para esta primeira situação. Eu não mudo o estilo do meu elemento de adição. Como esperado, a final. Eu vou colocar um semelhante como quando eu usei óculos aplicando diferentes estilos para os parágrafos. Se agora eu quero mudar o estilo para o final para ser semelhante com o primeiro parágrafo, você não pode usar I d seletor porque, como eu disse, você não pode usar um poderoso em diferentes elementos em seus documentos. Então, a melhor maneira é usar uma classe para efeito parágrafo e adicionando, Gostaríamos mesmo estilo como idéias antes obrigado. 28. Como adicionar de CSS: para usá-lo. Estilos CSS Em um site, você pode usar três maneiras diferentes para inserir CSS frio, o primeiro estilo interno cagar segundo, estilo externo porcaria e último usando no estilo Leiden. A vantagem de usar cada um depende do que você está fazendo com estilo. Vamos ver agora para usar cada um deles e qual a vantagem e essas vantagens. Primeiro, o estilo interno caga onde você escreve este ano chamou para as armas na seção morta de um arquivo específico sendo inserido dentro do estilo de abertura e fechamento da tecnologia. Esses foram os métodos que eu usei nos capítulos anteriores, onde eu mudo o estilo de um ref urso. E, em seguida, ter isso torna mais fácil de aplicar estilos, a fim de reutilizar o Deco de fazer estas vantagens fora usando um estilo interno porcaria é que muda para o estilo interno porcaria em Lee Effect a página onde as causas inseridas em. Então, se você quiser aplicar estilos em outras páginas, você precisa declarar todos os seus estilos em cada página do seu site dentro da seção F. Para o próximo exemplo, eu quero especificar algumas novas propriedades, adição estrangeira eo parágrafo que eu defini no potro HTML usando algum texto. Como eu disse, o ouro está escrito nessa seção e dentro tag estilo que eu defini agora com regra CSS para o meu ter um com cor azul e tamanho 24 pixels. Para o parágrafo, Eu quero que o tamanho do fundo com valor 20 pixels, cor de fundo amarelo e para definir a família divertida que eu uso valor poderia aqui. Agora que eu defino adicionar em regras de parágrafo, você vê as mudanças no navegador a segunda maneira de usá-lo vender lençóis para suas armas é usar um estilo externo porcaria que é simples. Um indivíduo CSS arquivado que você vincula ao seu site. A enorme vantagem de usar este método é que o que você mudou na porcaria CSS afetará cada página em seu site que está conectada ao arquivo CSS. Então dis impede que você tenha que fazer alterações médicas em cada página. Arquivos CSS podem ser criados usando qualquer editor de texto, como quando você cria um arquivo HTML. A única diferença é que você deve salvar o arquivo com a extensão CSS para incluir uma folha de estilos externa em uma fora de suas páginas da Web. Você precisa ter uma tecnologia de ligação dentro da Terra. Retire sua página onde você usa atributos. Dívida REHL especifica a relação entre o documento atual e documentos vinculados e atributo tipo para informar a mídia. Digite os documentos de comprimento. Será que um rascunho simplesmente dizer? O local está fora do arquivo CSS? Você pode ver agora todos esses atributos define em nosso documento usando folhas de estilo chamado style dot CSS. Então eu quero ver sempre avaliar o tipo de arquivo com estilo de nomes. E isso é o que eu sei criar no meu diretório principal. O arquivo com o nome, ponto de estilo CSS que serão minhas folhas de estilo externas. No primeiro exemplo de cagas de estilo interno, eu crio o estilo para adicionar elementos de parágrafo, mas agora eu quero fazer o mesmo. Mas com o arquivo CSS externo, eu só preciso mover a regra criada para o meu arquivo CSS depois de salvar o defile é visível dívida. Minha página da web ainda f os estilos aplicados anteriormente com texto cor azul e tamanho 24 pixels e as células definidas para o parágrafo com tamanho frontal, 20 pixels, cor de fundo amarelo e fundo família Poderia ea se eu mudar simples, cor de fundo ref sobressalente em CSS. Você vê que os documentos HTML que está conectado ao arquivo CSS externo mudarão a cor do plano de fundo fora do parágrafo. Como esperado, Retomar folhas de estilo externas permite que você coloque todas as informações de estilo em um arquivo CSS completamente separado. Você pode, então, simplesmente referenciar arquivo CSS a partir de dentro. Cada página da Web e conteúdo da página será então estilizado de acordo com o arquivo. A enorme vantagem óbvia deste método é que você só precisa mudar o estilo em seu arquivo de folha de estilo, e as mudanças serão cascatas através do resto do seu site sendo os melhores métodos de usar , dando um grande flexibilidade e fácil manutenção. Agora, finalmente, estilo Dean Line que é específico para a tag em si usa os atributos de estilo HTML para alterar o estilo de elementos. Este método não é recomendado porque cada alteração que você pode no CSS frio como a ser feita em cada tag que você deseja aplicar o estilo. Então, se você tem três parágrafos em uma página, você tem que aplicar os estilos três vezes dentro de cada deck. Esta é uma boa questão para aplicar para mudanças CSS individuais que não são para usar repetidamente em um site para este exemplo, eu tenho que igualar parágrafos onde eu mudei o primeiro, o chamador para azul e tamanho da fonte para 30 pixels. Esta alteração só se aplica ao parágrafo específico que você vê no navegador. Essa situação em que o segundo parágrafo não tem alterações. Este assunto está longe de ser ideal. Como eu disse, porque se você quiser alterar as propriedades de estilo, você teria que tê-lo cada instância fora do estilo em cada página do seu site, Obrigado. 29. Modelo de caixa - ordas, marem e adicionando: Eu vamos aprender o que é o modelo de caixa CSS? O modelo de caixa CSS é a base no controle de layout para as páginas da Web. É muito fácil de entender e usar. Permitindo-nos posicionar e espaço são elementos HTML exatamente como queremos. Existem quatro elementos importantes no modelo de caixa. O primeiro é o nosso conteúdo. Isso pode ser simplesmente uma imagem são alguns textos e que é representado nestas imagens no centro. segundo elemento que está em torno do conteúdo é apostar a morte, desafiando o espaço entre o nosso conteúdo e a borda fora do elemento. Em seguida, temos o elemento de fronteira, que podemos usar para desenhar uma linha em torno do nosso conteúdo e para terminar. Temos margem, que define o espaço entre a borda fora do elemento e qualquer outro elemento fora da página . Então vamos olhar para as propriedades de rua inseridas neste modelo e ver alguns deles começando com borda CSS. Essa é a propriedade que permite especificar o estilo com e chamador. Muitas vezes elementos fronteira, e ele é um curto e propriedade para as seguintes propriedades de fronteira individuais, a propriedade de trigo fronteira que especifica fazê-lo é fora das quatro fronteiras fazer propriedade de estilo fronteira que especifica que tipo de fronteira para e a cor da borda usada para definir a cor fora das quatro bordas. Se você usar Onley, barrou sua propriedade, você efeito real todos os quatro lados muitas vezes elemento como este exemplo onde eu sempre estilo para minha borda despojado para efeito de todos os lados com um trigo borda fora 10 pixels barra seu estilo. Vimos o seu valor e azul como meu interlocutor na fronteira. Então, o que acontece? Você vê esses valores aplicados no parágrafo como você pode ver no navegador no menos off propriedades CSS Você vê que U F propriedades individuais para cada lado esquerdo, direito, direito, stop e inferior que pode ser usado para alterar Onley um lado desligado a fronteira, se quiser. Então, se em vez de borda eu uso top borda em Lee, o lado superior fora do parágrafo é afetado com esta propriedade. É o que eu vou fazer agora aplicar em Lee esta propriedade para a fronteira desviada. Dizíamos valores Onley mudando o estilo de troca para traçado. Então você vê que esse estilo só é aplicado ao topo do nosso parágrafo. Agora vamos olhar para a propriedade margem CSS que é usado para adicionar espaço em torno de elementos. Primeiro, substituí os valores de borda para Evel para bordas. Tínhamos o mesmo estilo. Agora eu sou propriedade margem para a nossa regra parágrafo. E se eu simplesmente criar uma margem com 100 pixels, isso dará 100 pixels a todas as margens fora do parágrafo. Eu tinha agora outro par se para ver melhor as margens entre esses dois elementos se eu simplesmente mudou para um valor de margem mais baixo. A distância entre os dois elementos diminui conforme esperado, propriedade Margin é apenas uma propriedade simples, encurtada para as propriedades de margem individuais margem superior direitos inferior e deixou uma situação semelhante que acontece com a borda propriedade. Agora, se eu quiser apenas mudar, parar margem off segundo par se eu tiver que desperdiçar para fazê-lo antes de escrever C Avalie E desde que eu quero aplicar alterações tudo na segunda tarifa, eu posso criar uma classe para o meu segundo parágrafo que eu dar o texto do nome agora no código CSS, eu faço a regra para esta classe com margem de propriedade superior. Valorizaríamos um pixels sempre e excluíssemos a regra anterior inserida para elementos de parágrafo. Neste momento, eu só tenho uma margem superior aplicada no segundo parágrafo usando o nome da classe correspondente . Outra maneira que eu posso usar é com a propriedade margem dando o Vale para todos os quatro lados 100 pixels para zero superior para direitos, mas, hum, e esquerda usando propriedade margem com valor 100 000 O primeiro valor representa margem. Segundo valor superior com margem zero, direita certa margem inferior e última margem esquerda que é, na prática, o mesmo que margem de uso. Cima com valor 100 pixels Agora para finalizar as margens, se desejar. Apenas margem esquerda e direita com 50 pixels e os outros com zero, você só precisa escrever zero 50 pixels zero e 50 pixels para terminar os elementos do modelo caixa. A propriedade de preenchimento que é usada para gerar tempero entre o conteúdo e a margem e usa muito semelhante com a propriedade de margem. Existem propriedades CSS para definir a cama para cada lado. Muitas vezes elemento direitos superiores comprou-os e deixou. Mas, como a margem, você pode usar o preenchimento de propriedade encurtado que usado para propriedades individuais para cada um fora dos lados distantes. Eu mudei agora meu segundo estilo de parágrafo, e há um acariciando fora 20 pixels e você vê que tempero entre texto e margem fora do segundo parágrafo aumenta. Se você só quer alterar apenas o valor inferior, você pode simplesmente usar gastar fundo com 10 pixels são você Use a propriedade de cama com zero zero , em seguida, pixels e zero sendo deserta. Correspondente do Valley para acariciar propriedade inferior. É assim por enquanto, as coisas. 30. Propriedades de fonte em CSS: I. Temos visto até, também, também, apesar enviado desculpa para criar CSS ouro, bem como alguns dos conceitos crianças associados com folhas de estilo em cascata. Agora que você já explorou algumas das principais propriedades, é hora de ver outras propriedades. Associar ID com fundo de texto. As propriedades do fundo CSS são adequadas para alterar as configurações básicas da frente, como a família da frente , tamanho diferente e a onda frontal. Com algumas propriedades, você pode definir negrito, tamanho e estilo fora do texto, começando com a propriedade da família de frente que define a frente que é aplicada ao elemento selecionado em CSS. Existem dois tipos principais fora da família de fundos, o nome da família, onde você define uma família de fundos específica como vezes New Roman Ariel ou verdana que você conhece de alguns aplicativos da Microsoft como Power Point. O outro tipo é família genérica que você pode usar para definir um grupo fora famílias divertidas com um olhar semelhante como Saref San serif ou mono tempero. Na prática, todas as famílias genéricas como um Siri fora nomes familiares associativos. Mas se você quiser ser mais específico no tipo de telefone que você deseja usar, será sempre melhor usar nomes de família Para especificar a frente, você pode definir a família divertida fora de um texto com a propriedade da família fundo usando esses dois tipos, esta propriedade deve todos os vários nomes de frente como um sistema de fallback. Se o navegador não suporta o primeiro fundo, ele tenta o próximo fundo e assim um. Neste próximo exemplo de código, eu defini para o meu primeiro parágrafo a propriedade da família fundo Primeiro com valor. Verdana, essa é a minha primeira escolha. Segundo valor possível Ariel e menos opção. Usei o espaço mono genérico da família. Essa é a minha prioridade mais baixa. Então, se em seu computador, você não nunca do que ele ou aérea a página iria usar quaisquer fundos mono tempero que poderia encontrar. Para o segundo parágrafo, Eu uso outra combinação de telefone, começando com o valor vezes New Roman para a primeira prioridade e para a segunda opção e diversão final Família poderia aqui. Para este exemplo, eu não usar nenhuma família genérica. Agora a segunda propriedade usada para textos. O estilo do telefone que é usado principalmente para especificar texto em itálico. Esta propriedade tem três valores normais, que é o valor padrão onde o texto é mostrado normalmente como você vê agora onde eu aplicar esse valor no código CSS alterando para itálico. Você vê que o texto é mostrado em itálico como quando você usa esse estilo em aplicativos de texto como palavras da Microsoft e, finalmente, oblíqua que é semelhante ao itálico, mas último suporte. A próxima propriedade é divertido tamanho que eu usei em alguns exemplos anteriores e especifica o tamanho fora da frente que eu apliquei. Neste ponto, eu sempre usei essa propriedade com unidades de pixel, mas em outros vídeos você verá que existem outras em unidades que você pode usar com mais vantagens. A sintaxe usada para esta propriedade é tamanho divertido e valor correspondente. Para o primeiro parágrafo, aplico agora tamanho do telefone de 14 pixels, e no segundo parágrafo, eu sou um valor de 20 pixels. Finalmente branco diferente. Dito isto, carrinho salgado em caracteres no texto seria exibido. Esta propriedade aceita valor curado ou pred se eu ng valor numérico. De palavras-chave disponíveis são normais que é usado para definir caracteres normais, e estes o valor padrão touro que, como você vê, definir caracteres stick mais ousados e mais leves estão relacionados com o branco frontal computado fora do elementos pais que é um conceito mais inventa que está relacionado com o Eric E. Off baj elementos que eu vou falar de outras lições. Neste ponto, você só precisa saber que na maioria das situações fora valor Boulder é semelhante com parafuso de valor e mais leve com valor Normal. Outra opção para esta propriedade está usando valores numéricos, onde o valor da palavra Q mapas normais fez em America Valley 4/100 e os mapas de parafuso valor para sete centenas que eu usei agora no segundo parágrafo e este semelhante com válido que eu f em primeira tarifa esta propriedade pode e valores de quando centenas a nove centenas, onde os passos são mais múltiplos fora quando centenas, isso é tudo por enquanto. 31. Propriedades de texto: Vamos procurar agora algumas propriedades de texto que podem ser usadas em conjunto com a propriedade de fundo perseguido anteriormente primeiro texto. A linha nos permitiu alinhar texto dentro de um elemento que você pode escolher a partir da esquerda, direita, centro ou justificar nota que este texto aliança propriedade dentro de seus elementos contendo, não em toda a página. Para o próximo exemplo, Eu tenho um texto mais longo para os dois parágrafos onde o segundo não tem qualquer valor fora do texto alinhar enquanto o primeiro parágrafo eu disse que com valor à esquerda. Você vê que depois de assumir o valor à esquerda, o alinhamento não foi alterado sendo igual ao segundo parágrafo porque left é o valor de alinhamento padrão que o segundo parágrafo ou qualquer parágrafo assume se a propriedade não estiver definida. Então eu mudei o valor do primeiro parágrafo para a direita. E aqui vemos diferenças no alinhamento fora dos dois textos, um uma linha para a direita e outro para a esquerda. O próximo valor é centro, centralizando o texto, e finalmente temos o valor. Justifique agora, a dívida de propriedade do chamador CSS desafiou a cor de primeiro plano fora do conteúdo do texto, elemento estrangeiro, recebendo o nome da cor ou cavar um código decimal correspondente à cor que eu usei no início. Alguns exemplos para esta propriedade. E agora vou usar essa propriedade para os parágrafos, dando cor cinza aos textos do primeiro parágrafo. Se eu simples quiser ovos uma chamada decimal para a mesma cor, eu só preciso usar um pouco de torta. Apenas os valores decimais de saída diária da dívida para cores diferentes. Olhando para a cor cinza. Vejo que a saída decimal chamada para cinza é 808080 Este é um resfriado que eu preciso colocar em CSS e você vê que não há alterações na cor do texto parágrafo como esperado, porque em dois parágrafos, eu defino a mesma cor. Próxima propriedade é temperamento de carta. Morte controla a quantidade fora tempero entre cada letra em um determinado elemento. Veli normal é o valor padrão e você pode usar um valor de terra usando diferentes unidades como você usa em tamanho deformado. Eu defino neste exemplo para o meu segundo parágrafo um espaçamento de letras com valor dois pixels e agora mudando para quatro pixels. Você vê que o tempero aumenta mudando para o normal. O tempero leva o tempero padrão entre letras Situação semelhante ao primeiro parágrafo onde eu não usar esta propriedade. Assumindo que o tempero padrão para terminar propriedades de texto, eu tenho a linha. I propriedade CSS que define a quantidade de tempero usado para linhas, como em elementos de nível de desbloqueio de texto . Ele especifica o mínimo que eu faria fora das caixas de linha dentro descarrilamento em elementos de linha não substituídos . Ele especifica o I que é usado para calcular a caixa de linha. Vamos ver na próxima lição fazer conceitos fora do bloco e em elementos de linha. Eu agora uso esta propriedade no primeiro parágrafo e dar um valor fora de píxeis peidar e você vê que nós sempre diferente tempero entre linhas como esperado, aumentando o espaço de valor vai crescer e diminuindo tempero reduzir, isso é tudo por enquanto, Obrigado. 32. Elementos de bloco e inline (a dividindo e a parte): agora, hora de entender bloco e em elementos de linha que eu falei com no vídeo anterior. Em um documento HTML, podemos ter esses dois tipos fora elementos bloco e em linha. É muito importante entender o conceito nas diferenças entre esses dois tipos de elementos que estão amplamente usando onde páginas para criar diferentes seções, começando com elementos de bloco um elemento de bloco por padrão sempre começar em uma nova linha e ocupam todos os com, como alguns elementos que você já conhece, como tarifas. Tabelas são formas e elementos de bloco empilham um em cima do outro. Eu agora criar um exemplo com os parágrafos existentes onde eu definir para o primeiro um novo nome de propriedade, cor de fundo, morte desafiando estudioso para elementos de fundo. Para este exemplo, aplico uma cor de fundo com valor azul que nos ajuda a ver o tempero ocupado pelo parágrafo. Você vê que depois de usar a propriedade, o parágrafo ocupa o todo com fora da página. Como eu disse, isso acontece com elementos de bloco. Se eu simplesmente deixar o parágrafo com algumas palavras, você vê que o parágrafo continua a ocupar a totalidade com. Se eu definir cor de fundo para segundo parágrafo você vê, o segundo parágrafo está abaixo primeiro, ocupando novamente, tudo com eu introduzi agora um novo elemento de bloco importante fez. Se representado pela DIF Tech Network como um contêiner com uma tecnologia de início e fim e é um dos mais utilizados para criar diferentes seções em uma página web, permitindo colocar e separar o conteúdo fora da página, o acordo funciona como tarifa e outros elementos de bloco que ocupam todos os hidratos. Eu agora definir uma seção no meu código, usando def que contém os dois parágrafos que eu m na página e dar recipiente nome de vidro para este novo elemento no meu revestimento CSS eu defini para esta classe um fundo colar verde e o preenchimento off 10 pixels. Após essas mudanças, você pode ver que nossos parágrafos estão dentro desses elementos que ocupa toda a coroa de páginas . Agora é hora para os elementos em linha e no elemento de linha não começa na nova linha e só ocupa tanto com quanto necessário. O que não acontece com elementos de bloco. Exemplos como imagens são elementos April Inc representam em elementos de linha. Eu agora criando meu casaco um texto com abril ing para ver que esta doença não gosta de um pelo trigo cheio. Para estes, eu uso uma tecnologia para tinta de abril e alguns textos em CSS frio. Eu defini agora para os assentamentos, um fundo de cor vermelha e olhando para a página. Você vê que este elemento ocupa apenas o tempero de seu conteúdo. O que não acontece com os parágrafos? Depois de ter usado um novo elemento de bloco , Deve, Eu uso agora um novo elemento em linha, a extensão do elemento que é representado usando esta dívida Pantech como um começo uma tecnologia final. Utilizo agora a primeira tarifa e coloca o texto envolvido dentro deste novo elemento. Se eu disse este elemento para um fundo de cor cinza, você vê que apenas o conteúdo que está dentro da pilha é afetado pela cor de fundo trabalhando como um elemento em linha. Certo, no currículo, podemos ter dois tipos de elementos que bloqueiam a tia na fila. Os elementos do bloco ocupam o todo com fora da página como dívida profunda que criamos com cor de fundo verde e os parágrafos com elementos de prazo de cor de fundo azul não levam um ser de trigo lamentável. O exemplo usado no discurso e Nipper link com cor de fundo rev e os novos elementos span com cor de fundo cinza Obrigado 33. Propriedades de largura e altura: Eu verifiquei anteriormente a morte por padrão. Os elementos de bloco ocupam o todo com fora da página. Existem, no entanto, várias propriedades que permitem alterar o com off os assentamentos para que o espaço ocupado se adapte ao tamanho que queremos definir o com. Temos a propriedade com que pode ser aplicada a um elemento esta propriedade fora do elemento não inclui cama, bordas ou margens. Neste próximo exemplo, eu tenho que fazer dá um com cor verde e outro azul que ocupam o todo com fora da página como eu diminuiu navegador. O tamanho da promessa diminui o conteúdo, e o DIV irá ajustar com o tamanho da tela e aumentar se necessário. Se eu agora usar a propriedade do trigo com 900 pixels para a primeira véspera, o que acontece? Será que Onley ocuparia noite 100 pizzas em vez de fora o completo com? O problema é que ao diminuir o tamanho da página, a diva lembra o mesmo tamanho, não ajustando o dif para o tamanho fora da janela. É aqui que introduzimos a suíte Property Mac que faz o 900 pixels e valor mínimo e não um valor fixo Então eu tenho mais baixo com valores se a janela é recita para valores abaixo de 900 pixels, como podemos ver agora no irmão. Outro cenário possível é o uso das duas propriedades ao mesmo tempo no primeiro live. Se você usar Max com 800 pixels valor, o que acontece ele vai assumir este novo valor, mas como um valor fixo, não se ajustando ao conteúdo para valores inferiores a 800 pixels. Agora, adicionando a mente com propriedade no segundo Div. Vamos criar um valor mínimo para o com off 600 pixels. O que acontece nesta situação é que eles vão seguir o máximo com fora da janela, mas Onley até o valor fora do meu com para valores abaixados, em seguida, 600 pixels para D lembra com o doce deixando o dedo do pé conteúdo uma situação de estouro. Eu estou indo agora. Fale sobre a propriedade ID que define o elemento I 've muitas vezes. Se eu definir no primeiro desafiou 300 pixels, o comportamento será semelhante à propriedade branca onde os desenvolvedores fora do branco e eu são fixos e não há alterações no Deve com o redimensionamento fora da janela da mesma forma que eu criei valor mínimo e máximo para o com que eu posso criar para eu tenho para o primeiro dia se eu dar valores mínimos off com off 200 pixels e eu tenho off 150 pixels. O que acontece nesta situação é que, à medida que diminuo o navegador com o trigo desligado, o conteúdo e se adaptará ao tamanho. Sim, para o que eu vejo que como temos um mínimo off 150 pixels, temos alguns tempero livre sem conteúdo. E enquanto eu encolho a janela, o TIC da folha verde está ajustando seu lado ao conteúdo. Agora, para a última situação quando inserido em 50 pixels para o máximo que eu tenho para disfarçar, nós não temos definido mínimo. Eu tenho valor, então o primeiro chefe de justiça faz o conteúdo. Se eu diminuir o tamanho da janela, eu obtenho uma situação em que a profundidade verde atinge 150 pixels de vida útil e quanto mais tempo aumenta o IIF , causando uma situação sobrecheia. Como você pode ver agora, 34. Propriedade de posição: a propriedade position especifica a nossa doença é posicioná-lo em um documento usando o botão superior direito e propriedades esquerda para deslocar o elemento para o local final. Esta propriedade pode assumir cinco valores diferentes estáticos ou seja, o valor padrão relacionado absoluto fixo e pegajoso, começando com a posição relacionada que nos permitem mudar nossos elementos em torno de em relação a onde eles teriam feijão abençoado por padrão. Usando a posição relacionada, você precisa especificar o valor que deseja deslocar. A doença usando quatro propriedades superior esquerdo inferior e direitos seguidos por um valor morto corresponde à distância para mudar para o próximo exemplo. Eu quero aplicar essas situações para os dois profundos que eu defini em HTML para o 1º 1 Eu defino uma semana fora 300 pixels. TIC off 100 pixels terminou nossa grande cor de fundo no segundo dia, se eu nunca. Com off 400 pixels, eu tenho off 100 pixels e verde como a cor de fundo no irmão. Vemos a posição esperada fora das profundezas sendo uma parada fora da outra. Se agora definirmos para a primeira posição relacionada, dando um valor de 20 pixels para a propriedade superior e 40 pixels para a esquerda. Acontece que o primeiro dif muda a posição 20 pixels do topo e 40 pixels do lado esquerdo alterando sua posição final e o segundo dif sem alterações. Se eu apliquei para o segundo dia dos mesmos valores que eu criei para o 1º 1 é esperado nele pode ser visto morto. segundo lugar, Emsegundo lugar, Dief está na mesma posição relacionada com o segundo se, como aconteceu, inicialmente uma vez que os mesmos valores de deslocamento foram aplicados aos dois chefes, vou agora dar um exemplo final para a posição relacionada em disfarce. Se você quiser colocar a segunda véspera no lado direito do 1º 1 para a situação, eu vou ter que mover o segundo se até 100 pixels, que corresponde a um valor off menos 100 pixels para a extremidade da propriedade superior para a direita, correspondente a um deslocamento do lado esquerdo que tem que ser igual a ver com o valor fora do primeiro def disfarçado, 300 pixels agora podemos ver que os ladrões estão lado a lado como esperado. Agora, a posição absoluta que permite que o lugar qualquer elemento patch exatamente onde você deseja usar novamente propriedades superior esquerdo, inferior e direito para definir a localização. Um detalhe importante é que a posição fora do elemento é baseada em sua posição mais próxima avaliador posição para a situação Corpo é o ancestral mais próximo. O que faz essa mudança que eu dou para a defesa é baseada em toda a minha página. Primeiro eu mudei primeiro dif com 400 pixels e segundo para 300 pessoas. E se eu dissesse que a primeira e segunda derrota para a posição absoluta e e propriedades esquerda e superior com valor zero que faz com que dois ladrões são colocados no topo esquerdo do lote, nós segundo dif acima primeiro. Agora, se eu mudar para a esquerda até valores fora da segunda Eva para 100 pixels, você vê que esta div se move para outras partes do patch correspondente à mudança Isso é que eu aplicar agora para terminar a posição do pé. Eu apresento outra situação diferente, criando assertiva dentro do segundo. Com esta estrutura fora dá o segundo Dief é o ancestral fora da busca. Então, se eu criar para 30 se com posição absoluta e valor esquerdo fora de 50 pixels, este dif irá mover da esquerda para a direita, 50 pixels relacionados com a posição fora do segundo se e não em relação a partir do canto superior esquerdo da página. Há também um segundo tipo de posicionamento CSS absoluto chamado posicionamento fixo, que você pode usar para localizar um elemento HTML em um lugar exato nas relações com a tela do usuário no passo fora irmão. Sabemos que a diferença para absoluto aqui é que a doença permanecerá exatamente na mesma posição, mesmo se o usuário rola para baixo a página é o que você vê agora onde eu disse a primeira div com o valor fixo para a propriedade posição e eu coloquei o segundo, o mais abaixo na página e nós as TIC fora 1000 pixels para ser capaz de rolar o emblema e ver o respectivo efeito. Como está, somos cinco agora na página. A primeira definição permanece no mesmo lugar mesmo quando você está passeando pela página. Finalmente, este valor adesivo onde os elementos estão posicionando-o com base na posição de rolagem do usuário. Um elemento sicky muda entre relacionado e fixo, sendo tratado como posição relacionada em primeiro lugar até que ele cruza um limite específico em que ponto, ele é tratado como um posições fixas. Vamos ver um exemplo para entender melhor valor de disposição. Eu tenho agora no lote definir um parágrafo e dois chefes, o primeiro dif eu definir com valor pegajoso. E para o segundo eu adiciono a propriedade de topo de fusão com Valley fora de 200 pixels. Apesar dos dois dif e eu off 2000 pixels. Para poder usar o pergaminho para ver o efeito, agora é necessário definir a primeira espera Deve di Tresh que dirá em que ponto Eve fica fixa. Neste exemplo, eu defini a propriedade superior com o valor 10 pixels, que fará com que quando o Deve estiver a esta distância definida, ele irá lembrar corrigido uma situação que você pode ver agora no navegador. Se você quiser alterar a posição em que ele é fixo para cima ou para baixo, apenas alterou o valor fora da propriedade superior. Eu agora mudei zero e você vê diferenças quando comparado com o exemplo anterior, nós tendemos pixels para o valor superior, pensa 35. Propriedades de Float e clear: Eu bem-vindo a outro vídeo que eu falei anteriormente sobre Steve que funcionam como uma morte recipiente visionário desafiando as diferentes seções de nossa página web presentes são usados para conteúdo de grupo , por isso pode ser fácil de estilo usando a classe ou I D. Atributos que você aprendeu. Não se esqueça que estes são elementos de bloco que eu poderia comprar 100% fora da página lê, Tendo comportamento padrão fora, sendo empilhar um em cima do outro. Vamos ver agora uma propriedade muito importante usada para definir seus layouts. A propriedade pé que é responsável pelo posicionamento e controle lee para fora em páginas da web. Esta propriedade permite que você coloque elementos de bloco lado a lado em vez de em cima do outro, dando controle sobre a posição horizontal muitas vezes elementos HTML para entender melhor todas essas palavras de propriedade. Vamos fazer um exemplo usando três D EFS, outros elementos Neff e mina que eu crio no meu casaco. Primeiro, eu simplesmente defini o estilo para o meu primeiro Deve, usando o valor de 100 pixels para a direita e a cor de fundo verde claro para o meu Never Deve com 200 pixels de I e de fundo Kohler Koro. E finalmente, para o meu dif principal. Eu defino o TIC com o valor de 500 pixels e cor de fundo. Certo? Você vê no navegador que os ladrões são todos exibidos na vertical na parte superior uns dos outros e ocupar todo o patch com, como esperado agora começando a mudar o casaco se eu simples usado propriedade flutuante com valor deixado para o outro. E se eu souber que com 33% de desconto eu mudei a posição daquele dif para a esquerda, dizendo para a diva Nev que pode fluir em torno de nossa vez fora começando por baixo. Se eu tivesse agora algum texto para estes segundo dif, você vê que o texto está flutuando em torno do outro. Se o texto não alimenta ive estudante, acontece situação de estouro onde uma parte das mortes está fora do dif. Outro cenário possível é quando eu quero defesa para estar lado a lado sem ter qualquer elemento envolvendo o outro. Para este caso, eu tenho que adicionar a propriedade float ao meu segundo dif novamente com valor deixado para disfarce. Vemos que o DIF permanece abaixo do outro porque este Steve é um elemento de bloco que ocupa 100% da erva daninha pela dobra. Eu posso posição Onley no lado direito de juntos se eu definir um com que é igual ou menor do que o espaço esquerdo no lado direito fora do primeiro dif como você vê agora na imagem onde eu definir um com o valor off 33% outro detalhe visível é que O grau IVE agora está flutuando em torno dos outros dois. Dívidas de Deif. Cada propriedade flutua com valor restante. Se eu quiser posicionar a segunda div no lado direito, eu só preciso mudar o valor flutuante da esquerda para a direita e certamente você ainda flutuou em torno dos dois primeiro. Isto o que eu quero agora é que menos diff não flui em torno do 1º 2 tiffs ficar abaixo. Esse é o cenário em que usei a propriedade limpa. Quando esta propriedade recebe o Barco Valor, não há elementos flutuantes permitidos no lado esquerdo ou direito. Então este dif moveu-se abaixo do elemento flutuado. A propriedade clear ainda pode ter valores à esquerda e à direita em que, se não quisermos que os elementos flutuem no lado esquerdo. Aplicamos o valor à esquerda, e no caso de não querermos que isso flutue no lado direito. Usamos os direitos de valor. Essa é a próxima situação. Toe watch I f neste momento uma diva no lado esquerdo e outro no lado direito. Se eu aplicar o valor claro à esquerda no meu Sergeev, Eu verifico que Parar flutuando ao redor primeiro se Onley ficar em torno da segunda situação dif acontece se eu mudar o valor da esquerda para a direita para ver o d flutuando em torno da carne esquerda . Eu só preciso mudar as TIC primeiro de um valor maior do que a segunda véspera. Ok, você vê agora os três flutuando ao redor primeiro ao vivo e para terminar eu quero três d é exibido na mesma linha, sendo muito fácil de aplicar. Eu só preciso usar o carro alegórico para minha última definição com mal esquerda e dar um com off 33% para todos eles sendo dispostos lado a lado. Isso é tudo por enquanto. Obrigado. 36. Unidades comparativas e absolutas: folhas de estilo em cascata usaram unidades diferentes para expressar o comprimento. Muitas propriedades CSS, como com margem de cama e tamanho divertido, levam valores de terra. Onde emprestado é um número seguido unidade de violência, como unidade de pixels. Como eu usei em muitos exemplos anteriores, podemos usar dois tipos de unidades de comprimento em CSS relacionados e absoluta começando com relação comprimentos unidades, eles especificam. Um fiapo relacionado com outro Linz. Uma grande vantagem em folhas de estilo que usam unidades relacionadas é que você pode facilmente escalar de um vai colocar o ambiente para outro, como de um vestido até um smartphone, criando conteúdo responsivo. Vamos ver agora as unidades relacionadas mais importantes, começando com unidade E M em CSS e a unidade final, é igual ao tamanho frontal computado para o elemento ao qual o M é aplicado. Quando estou, as unidades são declaradas em elementos filho que não têm um tamanho divertido definir. Eles herdarão seu tamanho de telefone de seus pais ou de outros elementos ancestrais possivelmente indo todo o caminho de volta para o elemento raiz em documentos. Vamos ver o exemplo a seguir para entender melhor I f. Dois parágrafos primeiro e segundos inseridos dentro de um Deve com conteúdo de nome de vidro. Agora coloco minha aula em primeiro lugar. Nós o tamanho da fonte fora 15 pixels. E como eu disse, uma unidade AM é igual ao valor do tamanho da fonte criado para o elemento. Então, se eu criar a linha, eu possuiria a mesma doença que o Valley. Um e m. Corresponde a um valor de 15 pixels para a linha de propriedade. Eu tenho Se eu dar um valor fora duas linha de reboque PM, ele recebe o valor off duas vezes 15 pixels que corresponde a 30 pixels. Agora defino um valor de 12 pixels para o tamanho da fonte fora do conteúdo da classe. Como você vê o texto, é herdar o valor definido em seu pai, uma situação que acontece apenas na segunda classe porque esta classe não tem tamanho divertido definido. Se eu definir agora um tamanho de telefone de 14 pixels em segundos de classe, você verifica se o segundo parágrafo assume um tamanho diferente criado em segundos de classe. E quando eu tinha a linha com valor fora 1 da manhã. Desta vez para a classe Segunda, esta propriedade calcula o vale para a luz TIC relacionada com os píxeis de peido que eu defino dentro do próprio vidro. Qualquer alteração que eu faça em tamanho diferente. Fora do conteúdo da classe não afetará as propriedades criadas nos parágrafos porque eles próprios têm a propriedade tamanho da fonte definida. Se você entender bem, toda a unidade M funciona, então é fácil entender a nova unidade R E M. Esta unidade está relacionada dois tamanho diferente fora da rota elemento HTML que o meu padrão é 16 pixels , mas este valor pode ser alterado pelo usuário. Eu sei. Faça um exemplo simples para distinguir as duas unidades no meu elemento HTML raiz. I set off em tamanho fora 14 pixels, enquanto India def conteúdo definir tamanho telefone com valor para R E M. Para os parágrafos, Eu tenho os valores um R E M para o primeiro e um PM para os segundos. O que acontece agora? O primeiro parágrafo que, como diarréia, Munitz irá calcular o valor relacionado com os pixels de peido define no elemento raiz. Bem, então sempre divertido tamanho fora 14 pixels, enquanto o segundo elemento fará o cálculo relacionado ao conteúdo pai como o conteúdo pai é duas vezes maior do que o valor definido no tamanho da rota, o tamanho em é de 28 pixels, que também será o valor para o segundo parágrafo se eu alterar o tamanho do telefone HTML. Efeito real, como esperado, Os dois parágrafos. Finalmente, eu mudei de tamanho para conteúdo def, com o valor 12 pixels mudando o dedo do pé Uma unidade absoluta para esta situação. Se eu alterar o tamanho da fonte HTML, você só verá alterações no primeiro parágrafo porque agora o segundo parágrafo no tamanho está relacionado aos 12 pixels que eu defino no conteúdo da classe. Agora, a parte da visão lance percentual relacionado ao tamanho fora da janela irmão. Quando as TIC ou com fora dos sutiãs Aries mudam, eles são escala em conformidade. O uso dessas unidades relacionadas com a parte vista são importantes porque eles adaptam o tamanho fora do conteúdo para o tamanho fora dos dispositivos que podemos sempre para possíveis diferentes unidades relacionadas com a parte vista. Os primeiros 2 são a idade unidade que está relacionada com 1% de desconto nas TIC. Fora da parte de vista inicial contendo bloco que é o nosso irmão Janela e o Visa Lou que está relacionado com 1% fora da parte vista. Neste exemplo, vemos dois criadores de presentes, o primeiro sendo identificado pela outra classe e o segundo pela classe de conteúdo. Eu crio agora estilos para essas duas classes, definindo o 1º 1 com uma cor de fundo verde claro e o segundo com cor azul claro. Se eu quiser que o primeiro presente para ocupar fora do com e eu tenho eu só preciso definir com um valor off 50 V W e os IDs para 50 V h. Podemos ver que como eu redimensionar a janela, ele sempre ocupará fora do com, e eu 'd espaço Agora muito fez, se conteúdo, Eu quero que este elemento ocupar 1/4 fora do tamanho fora da janela. Para obter esse comportamento. Eu só preciso definir o valor para desenvolver 25 final da idade para o mesmo valor. Neste exemplo, o Dave ocupa 75% de desconto na porta de exibição. Eu tenho se eu quiser que eles ocupem todos os seus olhos, só precisa dar a cada um deles um valor off 50 ou outra combinação de valores em que o mesmo fora os dois Leste 1/100. As duas últimas unidades que usam você parte RV homens e V Max unidades permitiram que você acessar o tamanho fora do tamanho menor ou maior fora da porta de visão se ele usou os homens. Você calcula um terreno que está relacionado a 1% fora da porta de exibição. Dimensão menor e o uso de remix está relacionado a 1% fora da porta de exibição. Maior dimensão. Agora você vai ver um exemplo onde eu tenho que bloquear elementos definidos pela outra classe na classe superior e conteúdo abaixo do outro, Eu disse. Agora as TIC fora esses dois ladrões para o outro. Eu definir uma gravação fora 20 média e para o contento vidro direita fora 250 pixels. Como você pode esperar para a classe de descontentamento o que não muda porque estamos usando um valor absoluto para o outro. Certo? Eu usei TV Men unidade com valor 20 que faz com que ocupar 20% de relacionado com o tamanho menor fora da parte vista no navegador, você pode ver o comportamento esperado usando esta unidade. Neste ponto, eu tenho a porta de visão onde o tamanho menor é o TIC. Assim, o ID para o outro está relacionado com o TIC fora da parte vista que como o tamanho pequeno como eu redimensionar a janela, o outro eu não mudar porque a parte direita vista não aumenta nossos decretos. Quando eu chegar a um ponto em que o com fora da porta de vista se torna menor do que o olho, eu começo a ter alterações no ID do outro como está acontecendo agora, porque o tamanho menor da parte de vista agora está mudando. Se eu voltar para a situação em que o ID da vista partes o tamanho menor, se eu mudar o olho da porta de visão, ele suspeitava que nunca mudar nos olhos fora do outro novamente. Finalmente, se você usar para este exemplo o V Max, Eu tenho uma mudança no comer fora do outro desta vez relacionado com o tamanho maior fora da vista . Partes neste momento fazer com fora da parte de vista como o maior tamanho, então mudar fazer com eu sempre mudar o gelo fora do elemento outro. Vamos agora ver as unidades em porcentagem. Este tipo de unidade é muito semelhante às unidades relacionadas ao tamanho da parte de vista, mas em vez de usar a parte de vista como referência, ele usa a doença pais neste próximo exemplo será claro. Este comportamento onde eu f outro elemento que irá conter dentro do conteúdo. Dif e eu vamos definir este mesmo conteúdo dif fora do outro para um off. O caso é o elemento pai off conteúdo é o dif sempre e para o outro conteúdo dif fora. O outro corpo elemento são os pais. Vou agora dar um com off 800 pixels para os outros elementos e o Eid off 300 pixels. Na classe de conteúdo, eu defino um com a porcentagem de desconto 50%. O que vai acontecer é que para o caso fora do conteúdo def dentro do outro fazer. Será 50% de desconto no com o outro que é um valor fixo. Então, ele será 400 pixels para o conteúdo de classe definido abaixo do outro. A largura será definida em relação ao corpo que causa a morte. Rece izing a janela fazer com a doença não será fixado para terminar as unidades absolutas emprestadas que são fixas e muito fáceis de entender. Eles sempre têm o mesmo tamanho, independentemente de quaisquer outras configurações desativadas. Eles são altamente dependentes da razão de saída por que eles não são recomendados para uso na tela porque tamanhos de tela muito. Um dos mais utilizados são os pixels que eu usei em muitos exemplos, sendo uma unidade que está relacionada ao dispositivo de visualização. Outras unidades absolutas que estão disponíveis como polegadas, centímetros ou milímetros. Nos capítulos anteriores, usei pixels como unidades, então agora vou mudar esta unidade dois centímetros no irmão. Continuamos a elementos F com tamanhos fixos, já que estou usando uma unidade absoluta. 37. Projeto #1 - crie uma galeria de web com HTML e CSS: Vamos agora fazer uma primeira página da Web, uma galeria da Web muito simples, onde você pode aplicar o que você aprende sobre diferentes elementos de página e estilos usando CSS. O layout final fora das páginas agora mostrado onde você nunca comprar bebidas, seis imagens diferentes e respectivos níveis abrindo um baj individual para a imagem que você clicar. Então vamos criar esta estrutura de página com HTML e aplicar estilos para os diferentes elementos. Passo a passo. Como você vê no patch, este grupo de imagens é central horizontalmente. Este é o primeiro truque importante a aplicar. Criar o primeiro elemento de bloco que se recipiente que vou centralizar usando CSS Cove e onde as seis imagens fora da galeria serão inseridas. Agora que eu tenho o recipiente, eu sim, o segundo dia com a galeria nome da classe que recebe cada um fora das seis imagens. Então eu repito seis vezes este dif na minha pasta, onde eu tenho documento HTML I F seis arquivos de imagem cadela, Paisagem da cidade, silhueta da noite e subaquática que eu vou a final mais tarde no atributo fonte dentro tecnologia de imagem. Mas antes de adicionar essas imagens, eu começo a criar o estilo para alguns elementos da página. Primeiro, a cor de fundo para alterar esta propriedade no patch. O procedimento é muito simples. Eu só preciso atribuir a este valor de propriedade que eu defino como cinza ardósia escuro. Mas, claro, você pode selecionar outro chamador que você gosta. O próximo passo é definido meu recipiente, que será muito útil para centralizar o conteúdo da página disfarçado. As imagens que eu defini agora com off 60% para este recipiente com fundo Boesch cor o olho com valor automático para que eu t ajustar o conteúdo e para centralizar o Steve eu usei a propriedade de marcha com valor zero auto e para terminar para ter algum espaço entre a parte superior da página e o contêiner. Eu uso a margem de propriedade superior com valor 60 pixels. Neste momento, eu não posso parecer o emblema, meu contêiner, desde que eu disse que eu iria propriedade com valor automático, Eu sei definir um valor fixo fora 500 pixels para esta propriedade apenas para ver que o descontentamento existe e Leste centristas na página. Agora vou criar o estilo para fez Eve Gallery, onde em cada linha eu quero inserir para estes recebendo as imagens. Então fazer com off cada dia de deve ser menos de 50% fora do recipiente, desde que eu ainda quero criar margens para obter algum tempero entre ladrões. Eu, em seguida, definir o valor de 47% e para I valor fixo off 250 pixels para colocar a imagem lado lado. Eu uso agora a propriedade float com valor esquerdo para temperar entre as imagens. Criei margem com um valor de 1% e para um tempero vertical maior, inseri uma margem inferior com 30 pixels para terminar. Atribuí a propriedade de borda para a Galeria Deve com o valor de um pixel, linha sólida e melhor cor. Tenho agora os meus seis blocos principais que receberam as seis imagens. Então vamos nos arquivos de imagem dentro de Jill Reid Eaves usando imagem stick onde eu defini o nome da imagem usando molho. O atributo. Copiei os crânios para as outras cinco dádivas, e ainda arquivo nomes, começando com a cadela da imagem para o segundo técnico de imagem. Eu tenho a paisagem imagem servido Cidade para imagem vem do selo de arquivo com, e os dois últimos eu tenho as imagens, noite e estilos de imagem subaquática é agora o meu próximo passo, onde eu uso fazer com propriedades com valor 100% para a imagem para ocupam toda a Galeria Deve e as TIC até 150 pixels. Respondendo ao olho do Dever meus sessenta estão agora. É melhor cuidarmos depois de aplicar os estilos corretos. E agora que eu tenho meu contêiner principal e imagens, eu adiciono uma nova TV dentro da Div Gallery, para a qual eu dou a descrição do nome da classe que eu usei para criar uma difamação para cada fora do Peters este dia é adicionado depois de cada uma das imagens ocupando objetivo com abaixo. Uma vez que é um capacete bloco, Eu agora Coop, é dif para as outras cinco imagens e textos respondente direito Cabra Paisagem, Cidade noite silhueta e, finalmente, e a água. Agora crio estilo para a descrição. Def. Usando a propriedade, texto a linha com valor central para terra textos para o centro e para dar um formato diferente ao meu texto. Eu usei três propriedades diferentes, a família de telefone, onde eu definir o texto com o peso frente carreira fundo com o valioso e, finalmente aplicar o chamador branco para o texto, usando a propriedade de cor para dar mais contrasta entre a cor de fundo e o texto. O passo final nesta galeria da Web é criar um link em cada uma das fotos para abrir uma nova página individual que contém a imagem correspondente. Para criar este April Inc. Eu tenho que colocar o conteúdo clicável em qualquer pérola dentro do ATEC que irá conter a imagem estática e a descrição Deve S atributos fora da tecnologia. Eu usei o destino com o valor em branco que abre o documento de comprimento na nova janela ou guia e os Atributos, um rascunho que especifica o u. R L fora do baj. Esse link vai para estar disfarçado, um arquivo de imagem que eu quero abrir e não um documento HTML. Agora vou copiar esses mesmos códigos para as imagens restantes, sempre mudando para arquivar limões das imagens para abrir os arquivos corretos. Quando eu clicar no link. Agora que eu tenho a página inteira, Eu apenas ar o título no topo, criando um ive estrada com título de nome de classe que está fora do recipiente onde eu escrevo o texto da galeria Web que aparece no lado esquerdo da página, e agora eu criar o estilo para esta classe, censurando o texto com a propriedade, texto, alinhar, família divertida, verdana e cor definida pelos resfriados decimais de saída que eu agora para o tamanho do telefone uso um valor fora 20 pessoas e ter algum tempero entre o texto eo topo fora da página. Eu usei a propriedade margem toe com valor 40 pixels. Agora alguns pensamentos finais sobre o código CSS que foi usado nesta página da Web. Primeiro, a propriedade margin definida com o valor zero para definir as margens superior e inferior com o valor zero e o navegador Value Auto Details Para calcular automaticamente as margens esquerda e direita em si, que faz por definindo-os igualmente. O que faz com que o recipiente fique central ou ressentido? Outro detalhe importante é o uso off float propriedade com valor esquerdo, que permite que as fotos fiquem lado a lado e, finalmente, o uso de unidades em porcentagens. Isso dá uma grande flexibilidade para gerenciar o tamanho fora dos diferentes elementos fora da página. Para o caso do recipiente, eu inicialmente definir um valor off 60% para que este elemento ocupa 60% fora da erva daninha relacionada ao seu pai, o corpo. Se eu mudar o vale para 80%. Vemos que o trigo fora do recipiente vai aumentar, também aumentando a semana fora as ações que recebem cada fora das imagens, uma vez que estes bem ocupam 47% de desconto no trigo definido para o recipiente. Este tipo de unidades também permite gerenciar o número de imagens que aparece em cada linha sendo definida no momento para porque eu estou usando um valor de 47%, que causa dívida. Duas imagens, juntamente com as bordas e margens definidas, ocupam cerca de 100% de desconto no trigo recipiente, fazendo com que a imagem afirme. Vá para a segunda linha. Se eu quiser três imagens por linha, eu terei que definir a semana fora do dedo Div Gallery, um valor ligeiramente inferior a 33% para cada um off. As imagens para ocupar esfria para um cert fora do recipiente. Eu vou então dar um valor off 31%, uma vez que não podemos ignorar margem e fronteiras e vemos que cada linha vai, em seguida, depois de três fotos, isso é tudo. Por agora. Obrigado por assistir 38. Projeto #2 - formulário da página: I A proposta Esta arma é criado formulário de registro de usuário semelhante ao apresentado agora contendo campos de entrada, ou seja, o nome, E milha, gênero e, finalmente, nome de usuário e senha. Sendo esta informação enviada por um botão de registro na parte inferior da página, vou começar com a criação fora dos diferentes elementos da página usando o código HTML, todos os elementos da fazenda serão colocados dentro do Deve com o recipiente de nome da classe , a fim de permitir centralizar dif e todos os elementos de formulário na página. Então, antes de criar o formulário I m diff recipiente que na parte superior continha o registro de texto inserido dentro de uma tag de adição. Em seguida, eu tenho uma tecnologia H R que em certa linha horizontal usado para separar os diferentes tipos de conteúdo, ou seja, o meu direito e forma com os respectivos elementos. Agora eu começo meu formulário usando a tecnologia de formulário que define o farm usado para obter entrada do usuário. Este elemento recebe atributos de ação que nos dizem para onde enviar dados de formulário quando os dados são enviados para esta página. Este atributo não é muito importante porque os exercícios destinados em Lee para criar um formalmente fora e não fora para receber os dados provenientes do formulário. Vou então colocar apenas um nome de arquivo Demi na ação no Root. A primeira coisa colocada campo agora é adicionado para colocar o nome. Então eu usei a tag de nível para o primeiro elemento de entrada para corresponder com o I D. Off a entrada que eles estão rotulando usando para disfarce Nome valor em quatro no nome raiz e texto entre abrir e fechar tecnologia com formato negrito para aparecer junto com campo de entrada que o nome. O próximo passo é definir o elemento de entrada usando textos de texto. Dívida recebe o lugar. Atributos antigos. Valorizaríamos o texto do nome que aparece dentro do campo de entrada, trabalhando como uma tonalidade de shar que descreve o valor esperado. E, finalmente, os atributos I d. Com o valor do nome sendo igual ao valor usado em quatro atributos fora do rótulo. Tech dois rótulos relacionados com o respectivo elemento de entrada. Como eu disse anteriormente, então é esperado que quando eu clicar no meu rótulo, ele salta para o respectivo campo de entrada. Como você pode ver agora individual. Para terminar este primeiro elemento de entrada que eu costumava exigir na rota que é usado, decidir que elemento Best Byfield fora antes de enviar a fazenda para este cara. Uma mensagem de aviso aparece se o elemento não é campo agora, o segundo elemento de entrada que recebe informações do e-mail tendo um resfriado muito semelhante ao criado anteriormente, eu não copiei esse mesmo cult mudando na aderência de nível o valor fora dos atributos fort para e-mail também. Os respectivos textos na entrada elemento que recebo agora no tipo, atribuem o valor masculino para garantir que o valor de entrada como um formato de endereço de e-mail no lugar. Mais velho, Eu escrevo e-mail, endereço, texto e finalmente morrer de e-mail e o atributo obrigatório, como no campo anterior. Clicando no nível, tornará o campo feminino ativo e inserindo texto sem o símbolo de at no campo de correio. Suspeita-se que receba um aviso dizendo que o endereço de e-mail da morte precisa deste single, mas veremos a situação no final. Antes de passar para o próximo passo, eu tive que linha etiquetas de quebra para dar tempero entre os diferentes elementos da fazenda. Para os próximos campos de entrada, defini sexo do usuário com valor masculino ou feminino, usando o rádio tipo para este campo de entrada que define um botão de opção para selecionar uma das duas opções. Primeiro, criei meu rótulo com os textos de gênero para identificar o tipo de informação que eu quero do usuário. Agora, para a primeira opção, eu usei o tipo de rádio com o nome Gênero I D. Masculino e finalmente faço atributos necessários como nas entradas anteriores para a tecnologia de nível para em Your Roots, com o mesmo nome dado à identificação D. Tooling estes dois elementos rótulo e botão de rádio para quando eu clicar no nível, o botão de rádio torna-se ativo para o segundo botão de rádio. Eu disse novamente com nome de gênero, deixando os dois botões de rádio com o mesmo nome para que possamos combinar os dois botões de rádio juntos e obter o valor escolhido. Mas esta é uma parte fora da programação do lado do servidor. Finalmente, temos a fêmea I D. E para o rótulo que criamos antes atributo com o valor igual ao I D. Então, definindo esses valores clicando. Um dos níveis vai sentir a respectiva milha escolha são do sexo feminino. Nos últimos campos de entrada da rua, recebi a definição de nome de usuário e senha que deve ser confirmada no campo esquerdo . Eu não fiz uma cópia do frio já tinha que mudar para os primeiros caras. O atributo. Longe da tecnologia de difamação para o usuário valor e escrever texto. Nome de usuário a ser usado s. Indian colocou bife. Eu tenho o texto tipo com os textos de nome de usuário no lugar mais antigo i d. Nós valorizaríamos usuário e, finalmente, o atributo obrigatório para tornar este campo necessário. Agora as melhores palavras para o primeiro campo de entrada onde a senha será definida. Eu uso melhor valor muito longe atributos e texto melhores palavras para aparecer como rótulo no farm na tag de entrada. Eu uso a senha de tipo para que os caracteres não sejam visíveis. O lugar mais velho em raízes desta vez f o valor de texto de senha digitar, enquanto o I D como o melhor valor semelhante para um tributo para terminar a melhor palavra. Repita os campos que, como o valor melhor se repete na rota muito depois, e os textos do rótulo repetem as melhores palavras. Do tipo Attitude lembra senhas, enquanto o lugar mais velho contém a senha de repetição de texto para enrolar o I D como o valor melhor repetir agora para terminar o formulário na parte inferior, Eu defino um botão de envio usando tag botão com o tipo, submeter erupções cutâneas de classe final que usavam para definir o estilo para este elemento. Eu sei se todos os elementos formam e é sobre Lee necessário definir o estilo para cada um. Começando com o corpo, que é eu definir com Ariel família fundo e aplicar um corpulento seria cor de fundo agora recipiente que tem dentro elementos de forma. Eu defini sagacidade com o valor off 50% relacionado com a largura fora do corpo e Centre de Steve , usando a propriedade marchando com valores zero e exterior dando valores iguais para a margem esquerda e direita. Dois F algum espaço entre os elementos e cada lado do recipiente. Eu usei a propriedade petting com valor off 20 pixels e finalmente definir branco como os contêineres. Fundos de cor de fundo colocar elementos, ou seja, com tipo , texto, melhor palavra e e-mail. Eu crio os formatos específicos que não serão aplicados aos botões de rádio, é por isso que eu tenho que declarar os elementos de entrada tipo off que serão alterados. Para esta situação, eu defino entrada com entradas tipo dext, digite senhas e entrada tipo e-mail no meu seletor CSS, separados por vírgulas sendo um ótimo método para escolher. Valores de atributos específicos de Ali. Agora eu posso definir o estilo para esses elementos com o trigo off 95% cama 15% e stop e margem inferior com 15 pixels e 25 pixels s cor de fundo para o elemento de entrada. Eu usei a cor cinza claro e para a propriedade permuta eu uso sobre seu trigo fora de um pixel. Nós tínhamos linha sólida e chamador representado pelo número decimal de saída BBB para terminar. Eu uso os rádios permuta propriedade que permite fazer um cantos arredondados. Indiana colocar elemento usando um valor fora de três pixels, o Eiger Desvalorizar Doumar, um campos de entrada arredondado será o próximo. Eu defini estilo para o botão de classe, a fim de alterar o layout fora do botão enviar, dando uma sagacidade off 20% grande cor redonda cor branca verde para as dívidas acaba dirigindo fora 15 pixels para terminar elemento de regra horizontal que é usado para separar o título e forma que eu defini com a margem inferior com 20 pixels para adicionar algum tempero entre esta linha eo primeiro elemento farm, Eu sei que temos os layouts finais sendo apenas necessário fazer alguns testes para lembrar alguns detalhes que eu falado anteriormente, começando clicando sobre os níveis de cada campo de entrada, dando ao usuário acesso ao campo de texto correspondente, Onley ter que escrever o respectivo texto no caso fora de dados para ser campo. Vemos a mensagem de aviso que nos diz que os campos são militares. Uma dívida de mensagem só foi possível porque usamos o atributo obrigatório. Outro detalhe que já mencionei é o uso fora do tipo macho no segundo campo de entrada que será muito útil para ele nos textos de fogo com os formatos de e-mail, ou seja, ou seja, ter que conter a situação de caractere at visível. Agora, onde eu escrevo um endereço de e-mail sem que esse personagem receba um aviso de erro para enrolar a senha. As informações que não são devido ao uso fora do tipo senhas que é usado no elemento de entrada . Obrigado por assistir. 39. Felicitação: Olá outra vez. E parabéns. Você média até o fim da discussão. E agora você é capaz de usar HTML para escrever alguns dos conteúdos mais importantes usados em um site que vai fazer você Gento nível mais alto. Espero que goste. Vês? Fui na próxima aula.