HTML e CSS: criação de websites responsivos para iniciantes

2. Fundamentos na web: - Oi. - Bem-vindo ao primeiro conjunto de slides, - Fundamentos HTML e Web. - Sente-se, - relaxe e vamos discutir como a Web funciona, - o processo de desenvolvimento, - hábitos de fluxo de trabalho. - E então, - mais tarde, - faremos um exercício para conhecer alguns elementos HTML diferentes. - Primeiro, - vamos falar sobre como a Web funciona, - e espero que isso lhe dê uma idéia de como o que estamos aprendendo se encaixa na imagem maior - da Internet. Vamos falar sobre pedidos em resposta, renderização no navegador, verso local remoto e algumas diferenças entre front-end e back e desenvolvimento. - Primeiro, - vamos falar sobre pedido e resposta. - Então imagine que você está sentado em casa e você fica na frente do seu computador e você diz - Eu gostaria de ir a este site para que você digite o nome de domínio em seu navegador como as coisas - funciona ponto com e então você aperta retorno e seu computador se conecta a a Internet, e ele fala com esse cara aqui, que é um servidor DNS, D n A. significa servidor de nomes de domínio serviço Dina. - Somos como operadores da Internet. Na verdade, eles não têm nenhum arquivo de site, mas eles vão te dizer como chegar ao computador específico onde quer que ele esteja no mundo . - Assim você pode se conectar a ele e depois obter os arquivos do site que você está procurando. - Então servidores DNS. Falam com outros servidores DNS o dia todo, e estão acompanhando a associação de um nome de domínio com algo chamado endereço IP. o Eoendereço é muito parecido com o que você tem na sua casa. É basicamente uma forma de identificar a localização de um computador onde quer que esteja em qualquer lugar do mundo. Qualquer computador conectado à Internet tem um endereço I.P . Até o computador em que você está agora tem seu próprio endereço IP. - Então, quando você digita como as coisas funcionam ponto com, - você pergunta ao servidor DNS. - Se ele sabe o endereço desse servidor de hospedagem e este domínio não sabe, - ele diz, - Bem, - não está no meu banco de dados, - então eu vou perguntar a outro servidor DNS. E este aqui sabe que diz, na verdade, sim, que está no meu dinheiro que mapeia para o endereço IP. - 70.42 ponto 251.42 Então este primeiro servidor DNF diz obrigado a todo dinheiro que a informação também. No caso de alguém me perguntar de novo no futuro, saberei o que dizer a eles, e isso lhe envia essa informação. - Agora seu computador sabe o endereço específico do servidor ao qual você está tentando se conectar , e esse é o seta verde dele. - Aqui está mostrando a conexão entre seu computador local e este servidor de hospedagem remoto - e servidores de hospedagem - que são representados aqui atrás por essas torres azuis. Esses são os computadores que estão segurando os arquivos da web, o conteúdo que está sendo o conteúdo que está sendobaixado para seu computador e processado em seu navegador. Então, sempre que você tem o endereço i P, você está fazendo um pedido para aquele servidor de hospedagem específico e ele envia de volta uma resposta. - E isso inicia uma conversa entre o computador e o servidor remoto. - Então você pergunta, - você faz uma solicitação http e você pede algo como a home page, - e o servidor envia de volta uma resposta na forma de conteúdo. - E isso é código de texto, - que é HTML CSS ou JavaScript. Então, nesta aula, é isso que vamos aprender. - Vamos aprender a escrever o código HTML e CSS ou o conteúdo que é passado entre o servidor remoto, o servidor Web e o navegador dos espectadores. Vamos falar um pouco sobre verso local remoto agora, então o termo local se refere ao computador que está na sua frente agora. Computador local é algo que você pode tocar e que está bem diante de seus olhos, e que é supostamente remoto. - Onde remoto se refere a um servidor Web que é um local remoto em outro lugar do mundo. - Então, sempre que estamos produzindo quando estamos em nossa fase de produção, estamos sempre trabalhando em nosso computador local, e estamos visualizando em nosso navegador em nosso computador. produzindo quando estamos em nossa fase de produção, estamos sempre trabalhando em nosso computador local, - Então estamos trabalhando localmente. Estamos visualizando localmente no navegador, checando nosso trabalho. - Assim podemos ter certeza que tudo é exatamente como queremos antes de publicá-lo e colocá-lo em um servidor remoto. Então você está construindo seu site em seu computador, seu código HTML e CSS. - Você está visualizando esse código no seu navegador e está se certificando de que tudo está do jeito que você quer. Talvez esteja corrigindo erros de digitação, mudando de cor, coisas assim. Então você decide que estou pronto para colocar isso no servidor remoto. Então vamos usar um processo chamado FTP, que é protocolo de transferência de arquivos para colocar esses arquivos ou carregá-los no servidor da Web. E agora, porque este servidor Web tem um nome de domínio específico, um endereço I P associado a ele, pessoas de todo o mundo agora podem ver e acessar esses arquivos. - E então, - a qualquer momento, - se você quiser alterar ou modificar esses arquivos - você pode sempre tirá-los daquele servidor Web. - Então você tem a cópia mais recente em sua máquina local também. E você pode fazer isso baixando ou pegando os arquivos, trazendo-os de volta ao seu computador local. - Vamos falar um pouco sobre as diferenças entre desenvolvimento frontal e Web versus back-end - Desenvolvimento Web. - Então nesta aula nós vamos estar fazendo desenvolvimento web front-end apenas. - Vamos aprender a escrever estes 1º 2 que é HTML e CSS. - Agora. - A principal diferença é que as linguagens de programação frontais e programas são realmente - convidados. Devemos dizer que as linguagens HTML e CSS estão sendo renderizadas no lado do cliente, o que significa que estão sendo renderizadas em seu navegador. - Seu navegador está interpretando esse código e então renderizando-o, que permite que o site apareça agora. - Isso é em contraste com o desenvolvimento back-end e Web, - onde todas as linguagens de programação no back-end estão sendo interpretadas pelo servidor - no lado do servidor. - Então, - por exemplo, - ruby, - PHP, - python, - Java e nó, - que é uma versão do JavaScript no servidor. - Todas essas linguagens de programação estão trabalhando para atualizar objetos. Interaja com o banco de dados e, eventualmente, renderiza os arquivos HTML e CSS que são transmitidospara o front-end que passa pelo seu navegador. , Interaja com o banco de dados e, eventualmente, renderiza os arquivos HTML e CSS que são transmitidos - Então essa é a principal diferença entre desenvolvimento e desenvolvimento e desenvolvimento de back-end. - Então, enquanto você começa a fazer seus próprios projetos, - um bom começo para criar qualquer site é um processo de brainstorming. Ao longo do caminho, sinta-se livre para pegar um pedaço de papel, uma caneta ou um lápis, e começar a esboçar as idéias do que você quer construir antes de começar a codificar. - Muitas pessoas gostam de fazer um fluxograma ou diagrama de fluxo onde você basicamente mapeia o que - páginas existirão e como essas páginas serão vinculadas a outros conteúdos. - Este é um bom exemplo de uma simulação desenhada à mão, - então você também pode pegar e desenhar as páginas individuais e tipo de tomar decisões sobre - onde o conteúdo irá. - E isso vai poupar muito tempo. - Porque em vez de ter que mover código ou adicionar ou remover código, - você pode decidir sobre o layout geral e qual conteúdo você gostaria de existir - um pedaço de papel sobre. - E é muito mais rápido apagar algo ou redesenhá-lo do que fazer muitas mudanças no seu código. - Então eu acho que é uma boa idéia antes de você começar qualquer projeto para fazer uma espécie de simulação do que - você acha que as páginas do site vai manter e tipo de onde você imagina que você estará - posicionando este conteúdo. - Há também simulações digitais que você pode fazer online. - Um site que eu gosto é chamado de Mockingbird, - e esses sites permitirão que você faça simulações que o ar talvez mais adequado se você precisar - para apresentar esta informação a um cliente antes de começar a revestir, - há até modelos em sites simulados especificamente para tablets e dispositivos móveis também -. - Uma das primeiras coisas que você quer ter certeza quando você começar em qualquer novo projeto é - criar uma pasta que é dedicada apenas a esse site ou a esse projeto Web, - e nós vamos sempre manter todos os nossos arquivos e subpastas que estão relacionados para isso - site nessa pasta. - Então sempre chamamos isso de pasta pai ou pasta raiz. - Este aqui chama-se “site”. - Normalmente você vai nomear isso. - Seja qual for o nome do seu projeto. Por exemplo, se eu estivesse construindo um site para uma fábrica de waffles, eu poderia chamar essa pasta de algo como Waffle Factory Dot com ou algo assim. - Agora, - dentro desta pasta principal ou pasta raiz, - é aqui que todas as suas subpastas estarão. - Todas as suas imagens para o seu site serão bem organizadas em uma pasta. - Quaisquer fontes especiais que você possa estar usando podem ser organizadas. - Há bem, - todo o nosso CSS, - que vai ser o estilo do nosso site - vai estar localizado em uma pasta, - e todas as nossas páginas web são HTML. - As páginas também estarão dentro dessa pasta principal lá. E isso vai manter tudo agradável e organizado, e vamos tentar evitar ter um arquivo para o nosso site existente fora da pasta principal. Então, no próximo exercício, vamos entrar e falar sobre sintaxe HTML. - Vamos olhar para a estrutura de documentos de construção de uma página básica. - Vamos aprender a criar elementos de texto, e vamos aprender a criar imagens e, em seguida, links entre as nossas páginas. - Então vá em frente e vá para o primeiro exercício. - Sinta-se livre para navegar pelo resto desses slides usando o link pdf abaixo, - e ele terá conteúdo que irá rever todas as coisas que passamos no exercício. - Obrigado. 3. Primeiros passos: - Oi. - Bem-vindo ao primeiro exercício 1.1. Com qualquer exercício, você sempre vai querer começar baixando o arquivo zip que eu forneço para você. E esses serão os arquivos fonte com os quais trabalharemos para cada exercício . Então, só pela primeira vez, vou te mostrar como isso funciona. - Então eu fui em frente e baixei esse arquivo zip, - que é chamado 1.1 traço html traço fundamentos dot zip e eu tive que un comprimir isso. - Então é o arquivo é um único arquivo compactado, - como quebrar um monte de arquivos e pastas no reboque. - Um ficheiro, e depois tivemos de o comprimir aqui. - Eu apenas cliquei duas vezes nele no Mac toe un comprimir isso e ele cuspe uma pasta como esta - Você pode precisar, - dependendo do seu computador, - seu sistema operacional significa dedo do pé como direito - clique nele e diga algo como un compressa ou no arquivo ou extração pode ser outra - maneira que pode ser escrita, - mas de qualquer maneira, - você tem reboque, - descompacte ou un compacte esse arquivo, - e isso deve se transformar em uma pasta como esta. - E estes são todos os arquivos. - Os arquivos de origem que precisarão iniciar este exercício. Basicamente, isto é apenas contendo algumas imagens aqui, que são algumas imagens de alguns sapatos. - Por quê? Porque o primeiro projeto que vamos construir será um site dela. - Ok, então eu fui em frente e movi isso para uma pasta no meu computador. - Você pode querer decidir onde seus arquivos para o seu para esta classe vão viver. - Você pode até colocá-los na área de trabalho se você não tem um lugar adequado. - O que eu fiz foi colocar todos os arquivos do meu site em uma pasta aqui. - Eu tenho minha pasta sites aqui, - e eu fui em frente e criei um nome de pasta especificamente para esta classe HTML e CSS a partir do zero. - E você pode ver lá dentro. - É que um arquivo zip comprimido lá por 1.1 traço html traço pasta Fundamentos. E dentro de lá, só temos algumas imagens, como eu disse. Certo, então esse é um bom começo é mover esses arquivos para um local onde você gostaria que eles morassem no seu computador 4. Estrutura de documentos: E a próxima coisa que vamos fazer é trazer nosso editor de código, então eu vou lá e vou lançar um texto sublime. E quando um texto sublime começa, não temos um arquivo sem título aqui. E o que queremos fazer primeiro é abrir algo chamado A Barra Lateral, que nos permitirá ver nossos arquivos e pastas do projeto. Então eu vou até o menu suspenso View, e eu vou para a barra lateral e mostrar a barra lateral novamente. - Isso está à vista. - Barra lateral, - mostrar barra lateral. - Eu vou e clique nisso e isso trará minha barra lateral aqui em cima. - E a coisa boa sobre isso é que eu posso arrastar esta pasta que eu pedi para vocês baixarem - 1.1 fundamentos html. Você pode arrastar isso e soltar isso na sua barra lateral, e você pode ver lá que aqui estão minhas imagens e aquela pasta em particular. Certo, para começar, só queremos criar nossa página inicial. Então eu vou até o menu suspenso de arquivos e dizer novo arquivo, e isso vai criar um arquivo sem título como esse, e nós vamos apenas salvar esse arquivo imediatamente, eu vou dizer arquivo seguro e vamos nomear esse arquivo. - Algo muito específico. Agora, todos os outros arquivos no seu site, você pode nomeá-los como quiser. - Um, - este arquivo em particular, - que é a página inicial, - nós temos que nomear este índice, - que é tudo minúsculo I n d x - e nós temos que dar a ele uma extensão de arquivo de ponto HTM ou dot html. - Qualquer extensão está bem. - Então a razão pela qual nós temos que nomear este índice é que sempre que ah pessoa que está tentando - ver seu site está fazendo uma solicitação para esse servidor remoto - o servidor remoto por padrão vai passar de volta o arquivo chamado Index para eles. - E é por isso que eles vão ver isso primeiro. - Daí por que isso se torna a página inicial ou a página inicial. - Alguns chamam assim que queremos ter certeza de que guardamos isso no local correto. - Lembre-se, - nós sempre, - sempre, - sempre - sempre queremos salvar todo o conteúdo do nosso site nessa pasta raiz única. - Então, neste caso, - Eu criei uma pasta aqui, - minas sob sites, - e então eu tenho um para o nome da classe HTML e CSS do zero. - E lá está a minha pasta 1.1 e eu posso ver a minha pasta Imagens sentada lá dentro. - Alguns do nome deste índice e salvar este direito na pasta de exercícios como assim fora. Podemos ver que as páginas de índice sentadas dentro dessa pasta Ok, então indexar dot html, estamos prontos para ir. - Então vamos começar a escrever algum código HTML. - Vamos mergulhar nessa coisa. Se você quiser aumentar seu texto, você pode usar você pode usaro controle de mais e menos no Windows ou no Mac. - É a chave de comando, - e a tecla de mais ou menos vai torná-los maiores. Então, se você estiver digitando texto, você pode mudar o tamanho dele assim. Vou tornar este imposto agradável e grande para vocês, e isto vai ajudar com a estirpe de gelo. Além disso, se você está programando muito tarde da noite ou por longos períodos de tempo, , e você pode salvar sua postura de costas em seus olhos fazendo o código muito maior. - Ok, - então a primeira coisa que vamos fazer é nós vamos aprender sobre sintaxe html, - Então html significa linguagem de marcação de hipertexto e marcação linguagem é o que eles fazem é - fornecer uma série de elementos que cercam o conteúdo e, em seguida, definir esse conteúdo para o - navegador. Então temos que dizer ao navegador, esse texto é um cabeçalho. - Ei, este texto é um parágrafo. - Isto é uma imagem e isto é uma ligação. - Então, para começar, - vamos aprender um elemento muito importante chamado o elemento HTML. - Agora todos os elementos são compostos de tags iniciais e tags finais. - Alguns elementos realmente têm apenas uma tag inicial, - mas a maioria deles muitas vezes tem uma tag inicial e final. - Falaremos um pouco mais sobre isso mais tarde. Todas essas marcas são feitas de colchetes angulares, o que é um símbolo menor. - E então o nome da etiqueta e, em seguida, um símbolo maior que como esse nome é a abertura - tag. Exceto que eles têm dinheiro na frente dele, assim. - Então o que estamos olhando aqui é algo chamado o elemento HTML e o elemento HTML. - O que ele faz é dizer ao navegador que todo o código veio entre essas tags. Aqui no meio está o código HTML, então você pode ver aqui. - Este é o elemento HTML, - e descreve o conteúdo entre essas tags como sendo código HTML. - Isso é chamado de tag HTML inicial, - e isso é chamado de tag HTML final. - Então, novamente, - a tag inicial é a mesma que a tag final. - Ele só tem um Ford Slash na frente dele assim. - E isso é muito comum. - Ok, então é um bom começo. - Basicamente, - Agora sabemos que dissemos que o navegador estava começando a escrever alguns html aqui, - e estamos terminando nosso HTML aqui, - então tudo o que vai no meio será o resto do nosso documento. Agora, vou adicionar mais uma etiqueta no topo disto. - E esta etiqueta também é uma etiqueta importante. Esta é uma etiqueta única e chama-se “Tipo DOC”. E para escrever a etiqueta do tipo doc, fazemos menos do que o símbolo de exclamação. - E escrevemos a palavra tipo doc assim. - Agora, - o que Doc faz é que Thisted AG vai dizer ao navegador qual versão do HTML estava - rodando. - Então, a maneira como dizemos isso, - o navegador que estamos criando não apenas um documento HTML, - mas no documento html cinco é colocar um espaço após o tipo de doc palavra e nós escrevemos HTML como - isso. - E isto diz para o navegador, - este é um documento HTML 5. - Agora, - se você olhar para as versões anteriores de HTML ou X html, - você vai notar que essas tags de tipo doc podem realmente ser bastante longas e longas. - Eles podem continuar e continuar. - Às vezes, - por exemplo, - em html quatro ou três. Estes eram quase uma frase longa para descrever ao navegador que o documento em particular era, você sabe, que marca a versão para HTML 51 das inclusões dele, que é um quase uma frase longa para descrever ao navegador que o documento em particular era, você sabe, que marca a versão para HTML 51 das inclusões dele, novos recursos agradáveis que é muito simples. - Podemos apenas para a direita, - doc tipo html, - e ele vê como um documento HTML cinco. - Ok, ótimo. Então agora dissemos ao navegador um este éumdocumento HTML 5, e aqui está o início do meu código HTML. - E aqui está o fim do meu HTML poderia em seguida. - Vamos falar sobre as duas partes principais de qualquer página HTML. - Então, todas as páginas html divididas em duas seções principais e uma é chamada de cabeça assim - cabeça barra irá fechá-lo e, em seguida, outra é chamada. - Outra parte chama-se “Corpo”. Então temos a cabeça e o corpo, tal como tu e eu temos uma cabeça num corpo. Então, dentro da seção principal, o que especificamente vai aqui é conteúdo destinado a navegadores, motores de busca e dispositivos. - Então isso é como um código de máquina que vai aqui. Isso é informação, metadados e links de conteúdo relacionados a, metadados e links de conteúdo relacionados a, como esta página deve exibir que tipo de termos de pesquisa devem ser associados a este site , como esta página deve exibir que tipo de termos de pesquisa devem ser associados a este site , falar um pouco mais sobre mais tarde. - Mas principalmente tudo nesta seção vai ser coisas que nós realmente não vemos fisicamente na página. - São coisas que são feitas para outras máquinas e dispositivos. - Agora, - isso é em contraste com o corpo agora na seção do corpo. - Na verdade, temos todo o conteúdo físico visível da página para ir em frente e deixar uma nota para si mesma sobre isso para nos ensinar sobre isso. - Vamos realmente aprender outro elemento chamado comentário. - Então esta tag usa o sinal de exclamação do símbolo e, em seguida, traço. Começa parecida com o tipo de doca, mas na verdade tem dois hífens que o seguem. Começa parecida com o tipo de doca, - Hum, - e você pode ver aqui que todo o código agora abaixo deste tag de abertura aqui tem - sido ótimo fora. - Então aqui podemos escrever. Este éumcomentário um sobre Lee, eu bem, vou dizer que posso ver mas no código, isso não aparecerá no navegador. - Então um comentário é uma ótima maneira de deixar mensagens para nós mesmos. - Às vezes as pessoas até usam comentários para desativar seções de código na página e esses ar . de Bom hábitoderotular as coisas e deixar mensagens e comentários sobre o quê? - Algumas partes do codificador estão fazendo. Agora que aprendemos a criar este comentário, qual outra vez? - Isso começa com menos de exclamação traço traço é como você começa o comentário da maneira que nós - terminar o comentário como usamos traço maior do que você realmente notar se eu esquecer de incluir - o final marcado lá que ele realmente comenta todo o resto da página. - Então eu tenho que dizer que eu terminei. - Diga, - Ei, - navegador. - Cansei de fazer um comentário dizendo traço maior do que esta é uma tag única que - não tem a barra no fechamento. - Acaba assim. - Mas esse cara é o único assim. Agora que aprendemos a criar um comentário, vamos escrever umpequeno comentário para ela mesma sobre o que acontece na seção principal. Agora que aprendemos a criar um comentário, vamos escrever um - Então vamos em frente e escrever a cabeça. A seção principal contém informações paraosmotores de busca e o navegador e não é visto pelo nosso espectador, e terminaremos esse comentário lá. contém informações para contém informações paraosmotores de busca e o navegador e não é visto pelo nosso espectador, e terminaremos esse comentário lá. motores de busca e o navegador e não é visto pelo nosso espectador, - Agora. - Estes comentários podem ser de linha única ou multi-linha. - Eles podem estar em uma única linha como esta, - ou você pode clicar em Return, - e você pode realmente fazer esses comentários abrangem várias linhas como então Ok, - vamos também escrever um comentário para a seção do corpo. Então, ao contrário da seção da cabeça, que nós realmente não vemos ah, o corpo é toda a área visível da página web. - Hum, - você sabe, - por exemplo, - nesta seção, - um, - nós podemos realmente ver coisas como textos, - uh, - links imagens e todos os tipos de mídia. - Então, nesse comentário lá, - então estes ar as seções principais de em páginas HTML a cabeça e o corpo. Vamos aprender, vamos começar aprendendo uma etiqueta que podemos colocar dentro da seção da cabeça e esse carachamado título para que possamos dar a nossa página um título aqui. vamos começar aprendendo uma etiqueta que podemos colocar dentro da seção da cabeça e esse cara - Este site em particular é para uma empresa de calçados. Então, para o título, vou colocar o nome da empresa aqui. - Eu vou dizer sapatos Z H W apenas um tipo de nome genérico. - Eu fiz as pazes, - e vamos colocar algumas informações que serão um pouco úteis para os motores de busca. - Vai dizer, - isso é Ah, - pechincha. - Um, - atacado de calçados como esse. - E esta página é a página sobre. Minha página inicial vai começar com informações sobre a empresa. - Então, vou falar sobre nós. - Eu acho que e vamos fechar este título de barra. - Ok, então isso vai fazer algumas coisas. Os motores de busca número um podem ver isso, e eles vão dizer, esse é um site que tem conteúdo sobre sapatos, e para calçados por atacado. Os motores de busca número um podem ver isso, e eles vão dizer, , esse é um site que tem conteúdo sobre sapatos, , - E esta é também uma página de sobre eles ou sobre a empresa. - A outra coisa que o título faz é que ele também é visível na guia do navegador. - Vamos dar uma olhada nisso. - Vou em frente e salvar esta página. - Então vamos dizer “salvar arquivo “ou você provavelmente terá o hábito de fazer. - Comando s no Mac. - Ou você pode fazer o Controle s nas janelas para salvar. - Tudo bem. - E vamos em frente e trazer isso para o navegador. - E podemos arrastar esse cara para o cromo aqui. - Vamos em frente e encontrar o arquivo. Chama-se Index, e vou jogar isso lá dentro. Primeiro de tudo, esta página é branca. Primeiro de tudo, - Está totalmente em branco. Eu não coloquei nada no sexo corporal e ainda, mas uma coisa que podemos ver pela cabeça está aqui no topo da aba do navegador, você poderá ver o nome do site, e ele fica sem espaço. Lá começa o escritório, enormes sapatos W. - Calçado de barganha, hein? - Legal. - Então é um bom começo. - Então isso é uma coisa que podemos ver na seção da cabeça. - Esta conta está aqui? Tirando isso, você não vai ver fisicamente mais nada de dentro da seção da cabeça. - Na verdade, - este pequeno retângulo branco aqui que é a janela do meu navegador que é o corpo. - É onde vamos ver coisas que estão localizadas no corpo. - Então vamos voltar para o código e vamos escrever um pouco mais e você vai diminuir um pouco assim. - Ok, - então esta é uma página HTML realmente básica é que nós temos o tipo doc do topo. - Então temos a tag HTML e, em seguida, aninhado dentro da tag HTML. - Temos as duas seções principais de qualquer página da Web. - Temos a cabeça no corpo, então já vimos que podemos colocar o título na cabeça. - Vamos escrever algo na seção do corpo e ver se isso aparece. - Vamos escrever “Olá mundo “aqui dentro do corpo. - Então eu vou ir em frente e salvar isso e eu fiz um comando depois que você pode ir salvar arquivo e eu vou - voltar para o navegador e o importante é que eu preciso atualizar sempre preciso - atualizar porque eu estou salvando o código e, em seguida, para o navegador para vê-lo, - temos que recarregá-lo. - Então eu vou para esta pequena seta de atualização aqui para recarregar a página no Mac, - você também pode apertar o comando são para recarregar a página e mais do que provável nas janelas do seu navegador vai ser o controle. - São o controle e a Chave R. - Então acerte o comando. - E lá podemos ver a palavra “Olá”. - O mundo apareceu lá no canto da janela do navegador assim que um pouco maior - lá. - Lá vamos nós. - Então é bom e fácil de ver. - Está bem, excelente. - Então isso demonstra que o corpo é onde podemos ver fisicamente o conteúdo na página. - Então nós aprendemos sobre Doc tipo HTML tag a cabeça no corpo em. - Também aprendemos a escrever comentários no código, que só nós podemos ver. - Você vai notar. - Este comentário aqui que diz que o corpo é toda a área visível. - A página da Web. - Não vimos isso quando fomos ao navegador. - Nós só vimos o texto que escrevemos fora do comentário, - que é Olá mundo e texto sublime concorda com isso para nós para que possamos ver claramente - que este código aqui é um comentário 5. Formatação de texto: - Vamos fazer outra experiência. - Vamos entrar na seção do corpo e eu vou apertar o botão “Devolver “algumas vezes e eu vou dizer “ Olá, “ Moon Next”. - E então vamos em frente e salvar e vamos voltar para o navegador e ver o que isso fez. - Ok, isso é interessante. - Hum, - vamos olhar aqui para a palavra. - Olá, Moon. - Olá, mundo. - Como é que quando eu escrevi no código aqui eu apertei Return e eu coloquei este em cima deste - um. - Então mundo olá mundo mundo deve estar acima de Olá Moon. - Mas então, - estranhamente, - no navegador aparece lado a lado. - Bem, - a razão é que o navegador ignora espaço em branco. Está no Lee realmente preocupado com a relação destas etiquetas, certo? - Estes elementos cada Timo são constituídos por esta tag inicial e tag final. - Eles estão ao redor do conteúdo e estão descrevendo para o navegador qual é esse conteúdo. - Então esta tag título descrevendo para o navegador que este é o título da página. - Ele rodeia este conteúdo e diz ao navegador como ele deve interpretá-lo. - Então, se quisermos fazer esse “Olá mundo “e “Olá Lua “aparecerem lado a lado, teríamos que usar uma etiqueta específica e neste caso queremos fazê-los aparecer um em cima do outro. - Então teremos que usar uma etiqueta específica para isso também. - Então, se eu quiser dizer que este é um parágrafo e depois abaixo dele, - há um parágrafo separado. - Eu tenho que cercar este conteúdo com o elemento apropriado. - Ok, então vamos usar a tag p assim. - Então, o elemento parágrafo é composto desta tag p abertura e terminando tag p como este, - e ele rodeia este conteúdo Olá mundo e diz-lhe para ser um parágrafo. - Então vamos em frente e adicionar uma tag p de abertura e fechamento para Há bem, - e então vamos salvar isso e vamos voltar para o navegador e atualizar. - Incrível. Então agora olá, mundo está em cima do “ Olá, Moon”. - Ele vê isso como um parágrafo. - Este é um parágrafo separado. Então html envolve uma boa quantidade de memorização. Teremos que aprender pelo menos essas marcas comuns. - Eu vou te ensinar que você vai ter um monte de uso fora de tags HTML de alta freqüência para - conteúdo cercado. - Ok, então é um bom começo. - Aprendemos a criar parágrafos. - Hum, - talvez nós gostaríamos de criar títulos em textos de tamanhos diferentes ao redor da página. - Então vamos em frente e começar criando o título aqui no topo da nossa página. E este vai ser o título de maior tamanho, que é um H. E vamos dar a isto o título da nossa empresa, que é fácil. H W é o nome da nossa empresa de sapatos, e também criaremos uma espécie de subtítulo, um pouco abaixo desse texto mais pequeno e diremos sapatos. - Então a empresa é sapatos da CHW assim. Então vamos salvar, e voltamos, refrescaremos e verificamos. - Confira isso. - Então lá você pode ver o título da página, - o H w ah, - os sapatos de subposição. - E então temos dois parágrafos aqui. - Então, o ar é muito importante. - Não só eles realmente mudam fisicamente o tamanho do texto, mas também os motores de busca semanticamente vêem estes como tendo maior importância porque este - é um cabeçalho para o conteúdo abaixo, - então o motor de busca dá extra importância para o título de nível um. - E então h dois, - que é um título de Nível 2, - que é um pouco menor, - tem um pouco menos importância para um motor de busca. - Na verdade, há seis níveis de títulos. - Há H um a H seis. Muitas vezes eu realmente o Onley acaba usando, sabe, idade 12, talvez três, ou H quarto o mais. Muitas vezes eu realmente o Onley acaba usando, sabe, idade 12, - Mas há seis tamanhos possíveis e níveis de importância para as rubricas começando em cada um -, - que é o maior e o mais importante, - indo até seis anos, - que é o menor e menos importante de as rubricas. - Para que possamos criar títulos. - Podemos criar parágrafos. - Vamos também olhar para, - hum, - colocar texto de preenchimento. Digamos que estou construindo este site para minha empresa de sapatos e não tenho nenhum imposto real para colocar lá. Talvez eu esteja esperando meu redator trazê-lo para mim. - Ou talvez eu ainda não tenha escrito. - Então o que podemos fazer é tocar algumas mensagens de preenchimento. - Eles estão usando algum texto ipsum quente e texto sublime tem algumas ferramentas construídas para fazer - isso. Então eu fui em frente e apaguei o imposto e coloquei meu cursor entre a abertura e fechamento da tag P ali, e nós vamos até ferramentas e dois trechos, e vamos em frente e ir para este que diz ipsum quente e clique, - e você pode ver o que isso fez. - É esse tipo de bobagem aí dentro? É só colocar um texto de preenchimento para mim, que é uma boa maneira de começar. E se eu quisesse ter dois parágrafos, eu poderia ir em frente e colá-los assim. - Ok, excelente. - Então vamos sair e salvar isso e vamos voltar para o navegador e ter certeza que funcionou. - E lá você pode ver minha direção. - Vamos fazer este tamanho normal de novo. - Lá você pode ver o meu título e você pode ver Ah, - subtítulo da tese e os dois parágrafos aqui, - que têm um espaço entre eles e agora estão contendo esse texto de preenchimento lugar. - Então você terá muito uso desses parágrafos e títulos. Então sabemos que parágrafos colocam um espaço de linha entre linhas de texto, mas e se eu só quisesse descer uma única linha, por exemplo, ese, depois dessa palavra aqui,Laura MIPs Então sabemos que parágrafos colocam um espaço de linha entre linhas de texto, mas e se eu só quisesse descer uma única linha, por exemplo, se, depois dessa palavra aqui, E se eu quisesse empurrar tudo o resto para baixo? - Só uma linha? Posso fazer isso usando outra tag chamada BR Tag, que cria uma quebra de linha, que parece que agora essa tag não tem uma tag de abertura e fechamento da maneira que P faz para o parágrafo B, Posso fazer isso usando outra tag chamada BR Tag, que cria uma quebra de linha, que parece que agora essa tag não tem uma tag de abertura e fechamento da maneira que P faz para o parágrafo B, - R ou linha Break simplesmente moverá tudo após esta tag PR para baixo um único retorno de linha. - Vamos dar uma olhada nisso e ter certeza que funcionou lá. - Vamos salvar isso e voltaremos para o navegador e atualizaremos. - E você pode ver lá que todos os impostos saltaram após a palavra Laura MIPs. - Um, - ele apenas moveu para baixo uma única linha, - enquanto que entre estes parágrafos aqui, - nós temos uma linha completa no meio. - Tudo bem? - Não terrivelmente. - Eu não sou terrivelmente excitante, - eu percebi, - mas o é ar, - todos os blocos básicos fundamentais de construção. - Então isso será muito importante à medida que avançarmos. - Ok, então isso é bom para esta página. - Vamos chamá-lo de um dia nesta página de índice. - Temos o nome da nossa empresa e alguns parágrafos. Isto vai ser alguma informação sobre a nossa empresa, mas vamos avançar para outros elementos de formatação de texto. - Então vamos criar outra página aqui. Digamos, por exemplo, que além da minha página inicial, terei outra página que será um catálogo de todos os sapatos. - Então vamos em frente e dizer, - arquivo novo. - É um novo arquivo aqui e vamos salvar este direito fora do bastão vai dizer arquivo salvar. - E nós vamos colocá-lo dentro daquela pasta raiz principal lá para nossos projetos do site. - E eu só vou nomear este catálogo como então vamos chamar este um catálogo de ponto html. - Não se esqueça da extensão de arquivo apropriada. Agora que tenho a página de índice, todas essas outras páginas, posso nomeá-las como quiser. - Algumas coisas a notar aqui é que você não vai querer colocar nenhum personagem especial. Não coloque nenhum ponto de exclamação em símbolos, interrogação e coisas assim porque ele realmente tem significado reservado em um URL do site, então não vamos querer usar nenhum símbolo estranho. , No geral, você só vai querer usar letras e números minúsculos ou maiúsculas e números. Além disso, nós realmente não queremos colocar espaços entre os , nossos nomes de arquivos, por exemplo, por exemplo, se eu quisesse chamar este catálogo de sapatos, eu não chamaria de Shoe Space. catálogo porque isso poderia causar potenciais erros mais tarde -, - Quando estamos ligando duas coisas, - melhor coisa a fazer seria colocar hífen, - sapato, - hífen catálogo ou sublinhado sapato catálogo assim estão perfeitamente bem. - Neste caso. - Vou ligar para este catálogo de arquivos. - Isso vai ser bom o suficiente, então vamos salvar isso. E agora eu tenho dois arquivos aqui, e cada um tem uma conta. Este chama-se Índice, e este tipo chama-se Catálogo. Tudo bem, então vamos ver se vocês se lembram do arquivo. - Então sinta-se livre para gritar este primeiro arquivo que sempre colocamos no topo de cada documento HTML . - O que ele faz é dizer ao navegador que versão do HTML estava usando, então sinta-se livre para gritar a resposta. - Isso é certo. - Esta primeira etiqueta é chamada de tipo DOC. - E como dizemos que este é um documento HTML 5? - Nós apenas dizemos doc digite html assim. - Ok, então precisamos de um conjunto de tags de abertura e fechamento para dizer ao navegador que este é um código HTML entre essas marcas de abertura e fechamento como essa. Então usamos a tag HTML e, dentro dela, quais são as duas seções principais de qualquer página HTML? - Isso é certo. - O 1º 1 é a cabeça. Esta é a primeira parte da página HTML, e a próxima é o corpo assim. E vocês devem ter notado que estou em Denning. Sempre que coloco outros elementos dentro de um elemento como este, sempre acerto Tab em Dent assim. Isso não é necessário para o navegador. - O navegador realmente não se importa se você tornar o código bonito assim. - Na verdade, - você poderia até colocar todo o código em uma linha no navegador ainda renderizaria tudo - porque o navegador apenas preocupado com esta relação do que está dentro do que e - quais tags estão em torno de que conteúdo. - Mas o que eu faço é como uma boa prática. Eu gosto de ficar em dívida sempre que eu ninho ou entro em outro elemento como este, e isso torna um código muito mais legível e fácil de ver essa relação do que está dentro do quê? - Ok, ótimo. - Então também aprendemos um elemento para colocar o título da página tão bem que não vai dizer - Título Um e este terá um título semelhante ao último. - Vamos em frente e chamar este de sapatos Z H W. - E o que fizemos antes de escrevermos? - Calçado de barganha? - Os atacadistas nesta página são a página do catálogo, por isso vou escrever o catálogo de palavras assim. - E então não se esqueça de fechar o elemento título assim. - Vamos ver menos do que símbolo barra título para fechar isso e, em seguida, dentro do corpo, - esta é a área visível da página da Web. Colocaremos um H aqui que diz E H W. e colocaremos o subtítulo diz sapatos. - Oops. - Começando a digitar um pouco pateta. - Ok. E aí dentro, talvez tenhamos outro parágrafo com talvez tenhamos outro parágrafo cominformações de preenchimento. Vocês se lembram de como o dedo do pé adiciona o texto de preenchimento do lugar. - Claro, - você pode digitar seu próprio parágrafo se você quiser falar sobre um parágrafo sobre o - catálogo de sapatos irá em frente e apenas ir para trechos de ferramentas, - e vamos jogar em um aquecimento. Um trecho como esse, e eu não faço um imposto legal em algum lugar. - Hum, - bom para ir. - Vamos aprender sobre algum outro texto que podemos colocar aqui dentro. - Vamos em frente e criar uma lista. - Então eu faço um pequeno comentário aqui, - e nós vamos apenas dizer que esta é uma lista e o tipo de lista que isso é realmente é chamado - em uma lista nórdica. - Então, ocasionalmente, você terá a necessidade de criar Ah, uma lista de itens e talvez itens que não estão em uma ordem particular. - Talvez assim, - por exemplo, - vai dizer, - Vamos imaginar que estamos criando como um arquivo para nossos sapatos para que você possa procurar todos - os sapatos. - Então talvez eu crie um cabeçalho primeiro para isso, - e vamos em frente e dizer arquivo de sapatos, - e então nós queremos criar um, - apenas uma lista de itens que vão representar todos os sapatos para um determinado ano -. - Eu vou fazer outro vai fazer um sub-título aqui para o ano. - Na verdade, - vamos em frente e dizer, - um 2013 como aquele corte h três. Ok, então para criar uma lista não ordenada, o que eu faço é usar uma etiqueta específica chamada UL Tag UL em uma lista de erros do Nord, e fecha assim. - Corte UL. - Ok, - e então nós vamos em frente e entrar na tag UAL aqui. E cada elemento da lista aqui, como este, requer que coloquemos outro elemento filho dentro dele. - Fazemos ninho. - Outro elemento dentro dele chamado El. - Eu daria uma chance para o item da lista. - Então aqui podemos colocar alguns itens diferentes da lista. - Neste caso, vamos colocar todos os diferentes. os Todososdiferentes meses deste ano serão uma lista. - Então diremos que será para dezembro e faremos outra lista aqui. - Bem, só faça alguns meses. - Não precisamos fazer isso. Todos dirão que este é para Novembro, isso isto vai ser como o nosso arquivo de todos os sapatos diferentes. - Vamos criar outro item da lista aqui vai dizer outro item da lista. - Aqui está o mês do mês de outubro. - Ok, ótimo. - Então vamos sair e salvar isso e então vamos voltar para o navegador e temos a página de índice aberta aqui e ainda não temos links para nossas páginas. Então o que eu preciso fazer é, se eu quiser ver a página do catálogo, você terá que arrastá-la para o navegador. Voltarei ao arquivo chamado Catálogo, e podemos arrastar e soltar isso aqui. - Legal para que possamos ver que há a página do catálogo e as páginas de índice separam abas lá. - Ok, - então para esta página, - a - então para esta página, - apágina do catálogo aqui temos o arquivo de sapatos, - que tem um ano e,em seguida, cada ano terá itens de lista para que você possa ver aqui quando usamos página do catálogo aqui temos o arquivo de sapatos, - que tem um ano e, em seguida, cada ano terá itens de lista para que você possa ver aqui quando usamos - o UL, - marcá-lo em denso e cria uma bala para cada L I, - que é o item da lista. - Temos dezembro, outubro, novembro. Certo, então vamos voltar ao código e ver outras coisas que podemos fazer com listas aqui. Imaginemos que queremos aninhar outra lista dentro daqui. - Então digamos, - por exemplo, - se eles clicarem em outubro algo assim - queremos exibir outra lista dentro dela Então às vezes temos a necessidade de criar Ah sub - lista de itens relacionados a essa lista item. - Então o que vamos fazer é abrir o item da lista como este e entrar nele e nós podemos - realmente criar outro na lista ordenada se gostarmos disso. - Então eu vou em frente e dizer, - cortar ul e eu estou aninhando. - Apenas a ser claro e mostrar que isso está tudo dentro deste item da lista para outubro e dentro - de outubro. Vamos fazer uma sublista para dias diferentes. - Eu não vou fazer todos os dias do mês só vai fazer alguns só para te dar a idéia Então vamos dizer - - Oh, - quando clicamos em outubro, - queremos também ser capazes de clicar e consultar sapatos para esta data específica em outubro. - Então vamos dizer que há um item da lista para o dia 17 de outubro e outro aqui para o 18 de outubro assim. - Ok, então isso cria isso na lista ordenada. - Vamos ver o que aconteceu lá no navegador. Se eu voltar e me refrescar, podemos ver o que acontece. Temos que ir mais longe em Denning, e agora, em vez de preencher pontos sólidos. - Esta sublista para 17 de outubro 18 de outubro tem esta boca aberta aqui. Então 2013 tem meses por baixo, e esse mês pode até ter dias específicos como esse. Então 2013 tem meses por baixo, - Então este é um bom exemplo de algum conteúdo que você poderia usar, - um, - apropriadamente, - com uma lista não ordenada em ordem. Isso também pode ser coisas como uma lista de compras. - Você pode colocar diferentes tipos de frutas ou carnes que você quer que as pessoas usem em uma receita. - Algo assim. - Se é algo que não acontece em uma ordem específica, onde você não precisa de numeração como 1234 e seu conteúdo apenas para ter um marcador, - você pode usar esse elemento ul. - Ok, ótimo. - Então há na lista encomendada. - Vamos entrar e dar uma olhada em outro tipo de lista, - que está em uma situação em que você quer que ele seja encomendado para que possamos fazer uma lista ordenada - aqui, - ok, - abaixo, - então vamos fazer uma lista de pedidos diferente. Digamos que queríamos fazer uma lista para as melhores marcas, então farei outro título aqui, e direique as melhores marcas só para fazer um texto acima da lista, e fecharemos esse nível três. Digamos que queríamos fazer uma lista para as melhores marcas, então farei outro título aqui, e direi que as melhores marcas só para fazer um texto acima da lista, indo para lá. Para fazer uma lista ordenada, é a mesma que a lista A Norden. Para fazer uma lista ordenada, Exceto que em vez de usar UL para fazer uma lista inalterada, usamos ol para fazer uma lista ordenada assim. - E listas ordenadas também são preenchidas com itens de lista dentro dela que separam cada peça individual da lista. Então vamos inventar algumas empresas falsas ou algumas marcas falsas dirão, Bradley, Bradleye Brown serão o nome de uma marca. empresas falsas ou algumas marcas falsas dirão, , Bradley - Se você quiser usar o símbolo e para areia em vez de um e você pode usar shift no número - sete como esse agora que vai acender rosa eo código sublime Texas nos deixando saber - que neste caso para o símbolo, - ser mais apropriado usar algo chamado HTML pedindo caractere que - representa isso Então nós podemos fazer isso dizendo e símbolo, - e, em seguida, colocar em alguns Limbert algumas letras ou números que representam que lhe pedem - caractere então vamos dizer, - e um semi-cólon do MP assim. - Este é um termo pedido especial aqui que se refere ao símbolo e no código HTML. Então você pode estar curioso sobre o que são esses outros símbolos que estão disponíveis, e como eu sei o que digitar para eles? - Se você vai para o seu navegador e nós podemos abrir outra janela aqui e nós vamos apenas digitar em HTML, - pergunte E. - Isso é um S C I I ele vem com esses códigos e referências diferentes. - Agora isto é uma mesa. - E, - um, - você pode ver aqui que, - por exemplo, - para criar esta marca de aspas duplas como esta, - podemos dizer e qu ot ponto-e-vírgula e ele irá criar este caractere, - você também pode dizer e libra Símbolo 34 é um código numérico que irá trabalhar para ele. - Então, há maneiras diferentes de fazer com que esses caras levem a maior parte do ar. - Bastante comum. - Você poderia copiar e colar do texto, como copiar literalmente seu ritmo e simples assim, ou encontrar, você sabe, usando seu teclado para digitá-los. - No entanto, - há algumas chaves especializadas que você vai precisar dos personagens que pedem - vamos rolar para baixo e encontrar alguns que são talvez um pouco diferentes. - Hum, - por exemplo, - isto é, - você sabe, - você pode ter que fazer, - como o símbolo de libras ou euros, - hum, - ou alguma outra demarcação. Este aqui é como um pequeno ponto de interrogação dentro de um diamante. - Alguns destes são símbolos em matemática, - e você pode até ver caracteres de acento baseados em uma linguagem particular. - Então aqui você pode ver diferentes personagens que lotes e NBA, - um em diferentes tipos de acentos que serão usados para diferentes idiomas. Aqui você tem outras coisas, como o símbolo registrado. - Então, se você quiser criar o simples registrado você pode fazer e RG semi cólon. Há também coisas como direitos autorais, que são e copiam, que vão dar uma olhada um pouco mais tarde. - Então perguntar personagens são legais se você tem a necessidade de criar símbolos especializados, - então isso cria tipo de um pouco estilizado e símbolo lá que é atraente. - Então essa é uma das nossas marcas. - Você notará que uma diferença entre a lista Norden A e a lista ordenada é quando eu - usei as etiquetas ol para a lista ordenada. Temos um número aqui em vez de um ponto de bala. - Ok, então vamos em frente e seguir em frente. - Hum, - vamos escrever alguns outros itens da lista aqui. Só vou fazer mais alguns para que você possa ver como esses pedidos, então vamos inventar outras marcas - nomes. - Vai ver Sampson Travelers. - Provavelmente é uma boa idéia eu manter o meu trabalho e eu não tentar inventar nomes de marcas, então nós vamos fazer outro aqui em cima. - Vamos dizer “kitsch”. - Groove é outra marca de topo que estamos vendendo assim. - Ok, incrível. - Bom para ir. - Aqui estão as melhores marcas 12 e 3. Então o bom de usar listas ordenadas é que se mudarmos de ideia e quisermos enfiar outro Brandon aqui, entre Sansão e Viajantes, será o número para nós automaticamente. - Ok, ótimo. - Então estes ar alguns elementos de texto que serão úteis para você. Não vou ensinar-te todos os elementos HTML, mas quero que conheças estes de alta frequência para começares. - Estes ar que você vai ter muito uso fora de, - e eu encorajo você a ir através e verificar os folhetos fornecidos nos links que - todos lugares, - hum, - todos postar para aprender elementos HTML mawr. - Então, há dezenas e dezenas de elementos HTML, - e será bom para você se familiarizar com as diferentes possibilidades de como - você pode descrever o conteúdo para o navegador. 6. Imagens: - Agora, - mais alguns elementos que eu acho que vai ser muito bom para nós aprendermos sobre a direita fora do - morcego são, além de estilo de texto izing. - Nós também queremos aprender como criar links em imagens. - Então vamos em frente e voltar para a página de índice aqui. E digamos que queremos um lugar, uma imagem aqui para representar a vibração do nosso site para mostrar ao nosso logotipo qualquer imagem. - Então eu já criei uma imagem para nós, - hum, - chamada introdução pic, - e nós vamos colocar isso na página do site e vamos colocá-lo sob este - cabeçalho aqui que tem o nome da nossa empresa vai dizer que queremos que esta imagem vá - abaixo estão dirigindo, - mas antes do parágrafo. Vou abrir espaço no código para fazer isso agora, assim como os outros elementos aqui têm nomes específicos. - H um e H dois e P imagens também têm sua própria tag específica que você tem que usar agora uma imagem - parece com isso. a Agoraaetiqueta de imagem não tem um nome de etiqueta de encerramento. - Começa assim. - Eu sou G assim e este elemento de imagem em si quando você apenas colocá-lo na tela. O navegador agora sabe que queremos colocar uma imagem lá, mas não faz ideia da imagem que estamos tentando carregar lá. - Então nós realmente temos que dizer a ele qual imagem que nós queremos carregar agora. - Em HTML, - você pode passar em opções para modificar e alterar elementos colocando em algo chamado um atributo - na tag de abertura. - Agora, - atributos nunca são vistos nas tags de fechamento. - A etiqueta de encerramento é sempre apenas uma barra e uma repetição do nome da etiqueta de abertura - assim. - Mas dentro dessas tags de abertura eram livres para colocar opções e/ou atributos. Então, a fim de dizer ao navegador onde esta imagem está localizada, vamos em frente e temos que colocar um espaço após a imagem do nome. - E nós vamos usar o atributo chamado S R. - C. - SRC significa fonte estavam dizendo a localização de origem da imagem e a maneira como nós - fornecê-lo com um valor como nós usamos o símbolo igual e aspas para cercar o valor. - Então esta coisa aqui que está nesta abertura I am G tag é chamada de opção, - e esta parte dela aqui é chamada de Nome do Atributo. - E aqui vamos colocar o valor, que é a localização da imagem que gostaríamos de carregar. Quando quero carregar uma imagem, tenho que fazer um trabalho de detetive. Quando quero carregar uma imagem, - Eu tenho que basicamente estar ciente do arquivo que eu estou no momento, - que agora eu estou dentro da página html index dot e eu gostaria de carregar uma imagem. - Mas eu tenho que ser muito específico para o navegador. - O navegador não é muito inteligente, - e temos que dizer exatamente onde essas imagens, - e temos que dar a ele localizações do arquivo específico em que estamos atualmente. - Agora estamos na página de índice. - Vamos imaginar por um momento que estamos de pé nesta página de índice. Imagine que seus dois pés estão plantados aqui na página de estudos de índice TML, e se você olhar em volta, o que você vê? - Você vê que há outra página chamada Catálogo e você vê que há uma pasta chamada Imagens, mas não podemos ver dentro dessa pasta a menos que entremos nela. Imagine que as imagens são como um edifício nesse sentido. Então temos que entrar pela porta do prédio chamado imagens, e isso é como abrir a pasta. - Agora que estamos dentro da pasta Imagens, - agora podemos ver todas essas imagens para as quais queremos um link. - Então a primeira coisa que eu tenho que fazer é dizer ao navegador para ir para a pasta de imagens - para que ele possa ver dentro dela. Então, para fazer isso, escrevo o nome da pasta. - Eu digo imagens, - e então eu faço um Ford Slash e agora estamos dentro dessa pasta. - Vamos escrever um comentário para lembrar a si mesma que sempre que dizemos um nome de pasta barra, isto é o equivalente a entrar na pasta. - Bem, se eu quiser sair de uma pasta? - O oposto desta situação é se eu quiser deixar uma pasta, - eu posso ver ponto, - ponto, - barra então ponto ponto barra é o equivalente a ir para fora da pasta, - a pasta atual em que você está, - Certo? - Ok, - então estes ar realmente as duas únicas coisas que você precisa saber para navegar ou para dizer ao navegador - como navegar a partir do arquivo atual. - Você está em outro arquivo ou pasta. - Então queremos dizer, “ Ei, navegador”. - Quero criar uma imagem. - Então usamos I m g. - E então colocamos um espaço e dizemos, - E a propósito, - esta imagem está localizada dentro da pasta de imagens, - imagens barra e o arquivo que queremos uma carga é chamado Vamos procurá-la apenas para ter certeza de que O nome certo é “Intro Pic “, não “J. Peg”. - Então isso é sensível a casos. - Eu tenho que soletrar exatamente o mesmo em mente tem um sublinhado. - Então eu tenho que dizer intro sublinhado escolher ponto j peg assim e isso vai carregar essa imagem - lá. Há uma outra opção que sempre queremos incluir dentro de um elemento de imagem. Há uma outra opção que sempre queremos incluir dentro de um elemento de imagem. - E isso é algo chamado texto alternativo. - E usamos o atributo Ault It para dar um texto alternativo agora para o texto alternativo . - Vamos Teoh, certo? Algo que eu voudizer, dizer, foto do logotipo. Mostra um homem com as pernas cruzadas, por isso estou a dar uma descrição da imagem. Certo, então o que é esse texto antigo aqui? - Então todo o texto serve algumas funções muito importantes. Número um, se a sua imagem estiver quebrada. - Se, por algum motivo, isso é um erro ortográfico e as imagens não aparecem no navegador, - então esse imposto todo aparecerá em seu lugar na maioria dos navegadores. Então, se o link da imagem estiver quebrado, as pessoas podem pelo menos ler o que deveriam ter visto lá. - Qual é? - É um logotipo mostrando um homem com as pernas cruzadas. - Na verdade, não é uma descrição muito boa. - Talvez você possa subir. - Poderíamos inventar algo melhor mais tarde. Mas, de qualquer forma , estamos dando , estamos dandouma simples descrição dessa imagem. - Ok, então esta imagem de introdução mostra este conteúdo o outro. - A outra coisa que todo o texto é muito importante para é para motores de busca. Então os motores de busca, eles não têm olhos, eles não podem realmente ver a imagem da imagem. Mas eles podem ler todo o texto, e isso será útil para o motor de busca. - Agora, - a última coisa e provavelmente a mais importante de todas essas coisas é que se eu sou uma - pessoa com deficiência visual ou eu sou cego ou tenho alguma dificuldade em ver na Internet. - O que posso fazer é instalar algo chamado leitor. - E o leitor de tela, - que é construído na maioria dos navegadores hoje em dia, - vai realmente ler o texto da página da Web permitido para a pessoa que está navegando no - site. Então, se eu tivesse problemas para ver a imagem, então o leitor do navegador vai ler esse texto. - Para mim, - diria em voz alta imagem logotipo mostra um homem com pernas cruzadas. Certo, então vamos salvar essa imagem e vamos voltar e ver esse cara no navegador . - Então este está na página de índice, - que é índice dot html. - Se você não tem isso no seu navegador, - você pode precisar arrastar esse arquivo da sua pasta lá. - Ok, - lá vamos nós para que possamos ver nossas imagens aparecendo lá. - Então criamos um cabeçalho. - Aí está o meu H. Aqui está a minha idade para aqui está o texto do meu parágrafo, e aqui está a minha imagem, usando a etiqueta I M G. - Tudo bem, então é um bom começo. - Vamos ver outras coisas que podemos adicionar à imagem aqui. Essas eram outras coisas opcionais que você pode adicionar dentro dessa etiqueta de imagem. - Também podemos adicionar algo chamado Título e Título aparecerá quando passarmos o mouse sobre a imagem. - Então vamos deixar uma mensagem. Se alguém pairar e isso for opcional, você não precisa ter esse ano. Eu vou dizer, bem-vindos aos sapatos H W, algo assim. Muitos erros de digitação hoje, e então vamos em frente e salvamos isso, e vamos voltar para o navegador e atualizar imediatamente. Eu não vejo este título, mas olha, o que acontece se eu passar o mouse e deixá-lo lá? - Traz uma pequena legenda. Diz “Bem-vindo aos sapatos H W “, então você pode ou não querer isso lá, mas você tem a capacidade de adicionar isso usando o título,as pessoas geralmente adicionam esses títulos, links para as pessoas geralmente adicionam esses títulos, os dedos ou imagens para dar informações sobre o Mawr. sobre onde essa imagem pode ser vinculada. - Então, - por exemplo, - você pode ter ícones ou talvez, - por exemplo, - ícones de redes sociais, - e você pode adicionar um título a eles para que quando você passar o mouse sobre o pequeno F para Facebook, - ele vai dizer, - Siga nossa página de visita no Facebook. Você pode ter o pequeno T, então, quando você paira sobre ele diz “Siga no Twitter”. - Algo assim. Outro atributo comum que as pessoas adicionam. - Essa é uma boa idéia para imagens é que você pode adicionar a largura e altura da imagem agora por padrão. A festa fez isso ter o, uh, já configurou isso para ter a largura e altura corretas, mas eu posso colocar o número de pixels da imagem aqui. - E isso vai ser bom se o layout mudar. - Porque, - por exemplo, - digamos que este link de imagem está quebrado ou as imagens faltando, - então bem, - na verdade, - vamos em frente e mostrar que se eu derrubar isso se eu mudar o mar para um X, - e eu escrevi mal a imagem de propósito lá, - isso realmente quebrará a imagem, - e mudará o conteúdo em torno dela. Então, se eu atualizar isso, então ele desmorona e esse conteúdo aumenta. - Agora, - se eu colocasse em altura e largura aqui na imagem que então fará com que a imagem tome - o tamanho que é suposto. - Então, se você quiser verificar isso. - Você pode ir para a imagem em si. - No Windows, - você pode clicar com o botão direito do mouse e salvar propriedades no Mac. Podes ir buscar informações, e deve dizer-te informações sobre a imagem. Então, neste caso, está me dizendo que as dimensões da imagem são de 920 por 500. - Uma imagem bem grande, na verdade. - Para a página de introdução s Oh, - isso é com 9 20 assim e altura de 500. - O nome do link ainda está quebrado. - Escrevi mal de propósito. Lá voltará e refrescaremos, e podemos ver todo o Texas aparecendo. A foto do logotipo mostra um homem com pernas cruzadas e vemos este pequeno ícone de imagem quebrada que ninguém gosta de ver. - Então vamos em frente e consertar isso. - Mas você pode ver o aumento com impediu o layout de mudar assim. Então vamos mudar isso de volta para uma foto de introdução como essa, queé a maneira correta de soletrar. Então vamos mudar isso de volta para uma foto de introdução como essa, que - Você pode ver a nossa imagem aparece lá atrás e um pequeno logotipo de tinta spray. - Está bem, é um bom começo. - Agora, - mais tarde, - nós estaremos construindo uma saída responsiva para que esta imagem seja dimensionada em tamanho - dependendo se estamos vendo isso em um desktop ou tablet ou um dispositivo móvel. - Então vamos acabar especificando essa altura e largura usando CSS um pouco mais tarde para que possamos - torná-lo flexível. Então, por essa razão, e por essa razão , vou remover a largura e a altura desta imagem por enquanto. Mas eu só queria que vocês soubessem que esses são outros atributos que vocês podem colocar lá . - Tudo bem, ótimo. - Sabemos como criar títulos. - Nós agora para criar parágrafos, - sabemos como criar listas não ordenadas e listas ordenadas. - Hum, - também sabemos como criar comentários e mídia na página. 7. Links: - Agora vamos para a criação de links. - Links permitirá que nossos usuários naveguem entre as páginas. Agora só temos a página de índice aqui, que é a nossa página inicial. - E também temos esta página de catálogo. - Acho que vamos em frente e criar mais algumas páginas. - Vamos realmente criar mais três, - e então teremos todas as páginas prontas para ir para o resto do nosso site em exercícios futuros - - Então vamos em frente e apenas ir para arquivo e vamos dizer um novo arquivo e isso vai criar um - arquivo intitulado. - Vamos em frente e salvar isso, e vamos nos certificar de que isso é salvo dentro da pasta do site e queremos chamar isso - próximo arquivo. - Vou ligar para este. - O contato morreu. - HTML. Esta será nossa página de informações de contato, e eu vou dizer, salvo assim, para que e eu vou dizer, salvo assim, para quepossamos começar a escrever a estrutura básica do documento, que você vai se lembrar disso. possamos começar a escrever a estrutura básica do documento, páginas anteriores. Aqui temos a cabeça HTML tipo DOC e a etiqueta de corpo etcetera eso para este, vou mostrar-vos um truque que podem fazer. Embora seja uma boa prática quando você começa a digitar tudo, então você vai se lembrar. - Hum, - você sabe, - quando você chegar ao ponto em que você está confortável em você - lembre-se, - você está confiante de que você se lembra de todas essas etiquetas que compõem a estrutura básica do documento. Você sempre pode usar coisas assim, as ferramentas aqui em cima, o topo. - Você pode ir a trechos. - E se você clicar no primeiro trecho aqui que diz html Olhe para isso. - Ele mostra muitas dessas etiquetas lá para mim. - Então eu poderia vir aqui e colocar o título. - E esta é a página de contato que viu bem Contato assim. - Ok? E também aprendemos sobre a etiqueta do tipo DOC no topo, fazendo uma revisão rápida lá. - Então, - Doc tipo HTML é o tipo de documento cinco externo. - Há algumas outras coisas que podemos aderir que também ajudarão o navegador. - Vamos falar sobre um atributo que podemos colocar dentro desta tag HTML de abertura para que possamos - especificar uma linguagem aqui como esta. Podemos dizer e en para inglês, e se estiver interessado em saber todos os códigos linguísticos, por exemplo, sim, para espanhol, fr para francês, etc. e se estiver interessado em saber todos os códigos linguísticos, por exemplo, sim, para espanhol, - Pode ir em frente e procurar isso. - Você pode Google que se você Google um html colocando gelo. - Então eu sou o código. - Eu assim códigos vai vir para cima com uma grande lista de línguas diferentes. - Você pode conferir outra coisa que é bom para o navegador. - Além de contar, - você sabe, - a versão de HTML, - que falamos antes - e dar-lhe uma linguagem para o conteúdo principal na página. - Também podemos adicionar uma meta tag aparecer, - e meta tags muitas vezes contêm informações para navegadores e motores de busca. - Neste caso, o que vamos fazer é dar outra etiqueta chamada Meta com um tributo de conjunto de caracteres. - E nós vamos dizer que os caracteres de texto nós vamos dizer ao navegador qualquer - dispositivos entrevistando esta página que esses caracteres de texto na página são UTF oito e - caracteres de texto codificados. - Então este é o HTML 5 tipo preferido de configuração lá esta noite para tipo de ter uma página em branco . Eu vou em frente e colocar as coisas que serão as mesmas em cada página como em todas as nossas outras páginas que temos título e nós também temos o sub-título era sapatos, - eu acredito. Eu vou em frente e colocar as coisas que serão as mesmas em cada página como em todas as nossas outras páginas que temos título e nós também temos o sub-título era sapatos, - E então tivemos, - tipo, - um parágrafo. - Então vai haver algumas coisas diferentes em cada uma dessas páginas. - Esta é a página de contato em, - e exercícios futuros será realmente colocar em um formulário de contato aqui e um Google incorporado - mapas de pessoas podem ver a localização da empresa e coisas assim. - Mas por enquanto, - vamos apenas criar um parágrafo e vamos apenas escrever algo nele apenas para que possamos - ver uma mudança de página para página vista apenas para a direita - contato aqui. - E isso vai funcionar por enquanto. - Vou salvar esta página. Podemos continuar e duplicar esta página algumas vezes. Eu vou para o arquivo, e eu só vou dizer, salvo como, e eu vou chamar este próximo em vez de contato. Por que não vamos em frente e guardamos este como preço? - Então também vamos ter uma página. - Vai ser uma espécie de tabela de preços. - Vamos inserir uma tabela nesta página e depois exercitar. Então não diz preço e poupe isso e por preços, vamos mudar algumas coisas aqui. - Bem, - vamos escrever a palavra preço aqui no título e só para que possamos ver a mudança em cada - página enólogo direito, - preços no parágrafo aqui e salvar isso. - E vamos ver, - temos mais uma página que fará um arquivo salvar como, - e vamos continuar e duplicar esta página também. - Vamos chamar isso de vendas. - Isto vai ser uma página. - Ele vai, - uh, - nós vamos listar todas as vendas para o nosso site. - Então aqui vai em frente e mudar isso para vai dizer à venda para isso e vai dizer como, - hum, - vendas aqui para o parágrafo só para que possamos ver uma mudança quando navegarmos entre as páginas - e novamente, - nós seremos colocando mais conteúdo aqui mais tarde. - Isso será o suficiente para começarmos. - Então, estão todos salvos. - Hum, - vamos voltar para a página de índice aqui. - Eu só clico no índice. - Você vai notar em texto sublime. - Se você apenas clicar em um arquivo, - ele irá mudar esse arquivo. - E se você clicar duas vezes, - ele vai realmente abrir uma aba adicional para o arquivo. - Normalmente é quando estou trabalhando no site. - Muitas vezes eu vou passar e clicar duas vezes em cada um dos arquivos que eu pretendo trabalhar - assim. E então posso alternar entre todas essas guias aqui em cima, o que é legal. - Você pode até arrastar e soltar e mover isso. Outra coisa legal que você pode fazer é dividir a tela. - Por exemplo, - no Mac, - você pode dio opção de comando e, em seguida, um número eo número que você bateu na parte superior do - teclado. - O teclado determinará quantas vezes ele se divide. - Então, se eu disser opção de comando para ele vai dividir a tela em dois, - e isso me permite arrastar, - hum, - essas guias de um lado para o outro para que eu pudesse realmente visualizar vários arquivos ao mesmo tempo - tempo, - o que é legal. Então isso é Ah, opção de comando, e depois um número no topo. - O teu teclado. - Você pode brincar com isso. - Você pode fazer a opção de comando três. - Ele vai dividir três vezes a opção de comando para vai dividir quatro vezes, - embora isso é meio estreito para ler o código lá. Mas você pode ver que você poderia realmente ter, como quatro arquivos diferentes abertos em cada guia como essa, que seria legal. E se quiser voltar ao normal, faça a opção de comando um. - Então essa é a opção de comando no Mac no Windows. Acredito que seja opção de controle, mas talvez tenha que procurar isso para saber. - Eu vou em frente, - e , - eu vou descobrir isso, - e eu vou postar isso na informação embaixo deste vídeo para vocês. - Ok? - Então, - de volta Teoh, - links de trás, - embora queiramos fazer agora - é que queremos um link entre todas essas páginas diferentes. Então decidi que quero meus links ao vivo logo abaixo disso. Dirigir aqui em cada uma das páginas terá uma barra de navegação que colocaremos aqui, certo? uma barra de navegação que colocaremos aqui, - E vamos colocar algumas ligações aqui. - Vou escrever um pequeno comentário que estas ligações aéreas se ligam. - Então o elemento específico que usamos para criar links é um elemento âncora. - Usa a letra A como esta. - Ele tem uma abertura e um fechamento A e qualquer coisa que você cerque com esta abertura e - fechar uma etiqueta vai se tornar um link, por exemplo - nós vamos realmente vincular a esta textura. - Primeiro, - vai criar algum texto que diz sobre e vamos transformar este texto em um link e - circundá-lo com este uma tag. - Então, um significa ligação de âncora. Mas se for útil, você também pode pensar na palavra ação A para ação. Porque o que isso faz é, , cria uma ação em que quando você clica em algo, muda para uma página diferente. - Certo? Então, além de você, nenhum texto ao redor com essas âncora liga esses elementos aqui, nós também podemos , também podemos cercar imagens. Então, por exemplo, essa imagem aqui embaixo, se eu quisesse esse link de imagem em algum lugar quando cliquei nele, eu também poderia cercar esse cara com uma etiqueta dessas. Essa imagem em particular eu não estou realmente interessado nessa ligação em qualquer lugar, então todos apagam isso, mas só para mostrar que você pode, na verdade, você sabe, apenas virar links se são Desculpe-me, - você pode transformar as imagens se nos links. - Ok, - então para esta primeira tentativa, - nós vamos apenas transformar este texto em um link tão cercando este texto com isso. - Uma tag diz a um navegador que é suposto ser um link, - mas ainda não dissemos ao navegador onde queríamos realmente navegar para onde queremos - ele saltar para quando clicarmos neste link. - Então, para fazer isso, - temos que adicionar uma opção aqui na abertura de uma tag e este atributo é chamado H Ref. Uma calha significa referência de hipertexto , ou hiperreferência. - Lembre-se, - essas páginas são páginas HTML, - que são páginas de hipertexto ou páginas de linguagem de marcação de hipertexto. - Então isso está se referindo a uma página HTML específica se isso torna mais fácil - lembre-se de sua ref H. - Ok, então o que queremos fazer aqui é colocar o, uh nós basicamente queremos descrever para o navegador onde ele deve ir, e nós temos que fazer isso, - você sabe, - em relação à página que estavam ligados. - Atualmente estamos na página html index dot. Então, se eu vir aqui e olhar na minha pasta, eu posso ver que tudo está dentro desta pasta principal do site que é chamado HTML - fundamentos. - Hum, - desta vez nós não estamos ligando para nenhuma imagem, - então eu não tenho que me preocupar com o nome da pasta lá, - e parece que todas essas páginas HTML estão de fato apenas vivendo lado a lado na mesma pasta - Então, já que há apenas pendurado na mesma pasta, eu posso literalmente apenas digitar o nome do arquivo assim. - Agora outra vez. - Se essas páginas estivessem em uma pasta diferente, - você poderia digitar o nome da pasta para dizer ao navegador para entrar na pasta e, em seguida, encontrar esse arquivo -. - E novamente, - se você quisesse sair da pasta, - você poderia fazer ponto, - ponto, - barra, - que irá, - que sairá da pasta atual e procurar por um arquivo ou outro pasta. - Neste caso, - nós não precisamos fazer nenhum desses porque eles estão apenas saindo vivendo na mesma pasta. - Ótima. - Então esse é o primeiro elo. Isso é tudo o que precisamos fazer para que um dedo funcione, e eu vou em frente e criar outro desses que criará um para cada página. - É o árbitro H. Você vai se acostumar a escrever muito isso, e eu vou entrar aqui e colocar um texto. Vamos ver, a próxima coisa que vamos ligar é a página de venda, Saul, que está à venda. - E então aqui, - a página HTML física real quer um link para é chamado de ponto de venda html Assim. - Oh, - quer saber? - Ah, aqui. Chamei de venda, mas aqui se chama vendas dentro de S. mas aqui se chama vendas dentro de S. Isso vai criarumproblema. Isso vai criar um - Estes nomes têm de ser exactamente os mesmos. - Então isso vai quebrar a ligação aqui. Então, se eu chamar esta venda aqui, é melhor eu me certificar de ligar para esta venda aqui. Acho que o que vou fazer é clicar com o botão direito do mouse neste arquivo e também renomear e,em seguida, aqui embaixo em seguida, eu posso apagar isso e apertar o retorno, e isso vai consertar. Ainda bem que apanhei isso quando o fiz, porque isso vai quebrar a ligação. quando o fiz, - Está bem. - Ninguém quer ligações quebradas. - Isso não é divertido. - Ok, então vamos fazer mais alguns destes só para te dar a ideia de como funciona. A próxima coisa que vamos fazer é depois da venda é a página do catálogo, que já construímos, e que tem links para o catálogo dot html assim. - E estes são maiúsculas e minúsculas. - Então aqui no nome do arquivo. Se fosse um C maiúsculo no nome do arquivo, precisaria de um C maiúsculo lá. Às vezes, os navegadores são mais indulgentes localmente no seu computador, no computador à sua frente, você pode, você sabe, acidentalmente usar uma sensibilidade diferente de maiúsculas, como um “C Lower Casey” maiúsculo. E por alguma razão, ainda funcionará para você localmente. Mas quando carregou para o servidor, pode não funcionar. Então é sempre bom estar ciente da ortografia das coisas e das letras maiúsculas ou minúsculas. - Ok, - uh, - próxima vamos passar para a próxima página. Depois do catálogo, vamos ligar para uma página chamada “pricing dot html”. - E o texto lá é chamado de Preços e fecharemos chicotes fecharemos esse link lá, e faremos um último como aqui. Acho que isso vai cuidar de todas as minhas páginas. - Eu vou mostrar a vocês Ah, - atalho também é. Em vez de digitar as etiquetas, você se acostuma com elas. Se você apertar a letra da etiqueta como a letra A. e se eu apertar a barra de controle. Ele aparece assim e eu posso apertar “Return “, e vai acertar isso. - Para mim, - há alguns atalhos muito legais que você pode fazer para completar código em texto sublime. - Hum, - vamos ver onde estamos aqui. - A última página é chamada de ponto de contato html. - Assim, - e nós vamos ligar para o Texas é contato. - Ok, agora. - Então isso demonstra como usar um caminho relativo para outros arquivos em seu site. - Você pode estar se perguntando, - hipoteticamente e se eu quisesse vincular a outro arquivo em outro lugar na web, - por exemplo, - E se eu quisesse, - você sabe, - fazer outro link que fosse para outro site, - Por exemplo, - se eu quiser um link para o The New York Times, - eu poderia colocar a garota completa, - é por isso que as vezes ponto com assim - E por que as vezes agora eu provavelmente vou acabar removendo este link em exercícios posteriores porque nós - realmente não precisamos do nosso site de sapatos Toe ligado ao New York Times não faz muito sentido -, - certo. - Mas, no entanto, - Eu queria mostrar a vocês que se você colocar no nome de um arquivo em seu site, desde - o navegador tenha uma visão clara dele. - Você sabe, - se eles estão na mesma pasta - você poderia apenas colocar o nome do arquivo que é chamado de caminho relativo. - Agora, - se você quiser se conectar a algo em outro lugar na web, - você pode colocar o nome de domínio completo como este - que é chamado de Caminho Absoluto. - Aqui. - Este é o absoluto seu caminho URL cada um você tem que colocar a barra de dois pontos http completa, - barra e, em seguida, o nome completo do site. - Então, agora, quando eu clicar neste texto e em White Times, ele vai realmente ligar para outro site. - Ok, - então por padrão, - se você apenas usar h ref, - hum, - e você clicar em uma imagem ou algum texto com a tag âncora configurada assim - o que vai acontecer é que familiarizado com é que a tela vai mudar. - Vamos olhar para uma página, - clicaremos em um link, - e ele mudará para a outra página agora, - em situações em que, - em vez de mudar a página em que você está atualmente, - se você quiser para forçar o navegador a abrir uma nova guia, - uma nova guia do navegador ou uma nova janela do navegador. - O que você pode fazer é que você pode usar outro atributo aqui, - que é chamado de Target. - Então, vou entrar nisto. Uma etiqueta aqui, esta última para o New York Times. E depois desta idade árbitro aqui, vou entrar aqui. - Vamos ampliar um pouco e acertar um espaço e dizer Target assim. - Lá vamos nós. - Target é o nome dos atributos, - e então vamos em frente e colocar algumas aspas. - Aviso. - Se você tem vários atributos, - o que acontece lá é você simplesmente colocar um espaço. Podemos até colocar isso em sua própria linha, então é mais fácil de ver. - Que tal isso? - Está bem. Então você pode ver aqui que se eu tiver vários atributos, nós temos um único atributo aqui. - E depois há um espaço. - Hum, - e então nós temos outro atributo lá. - Está bem. E atributos como estes são apenas na abertura de etiquetas, certo? - Nunca na etiqueta final. - Ok, - então, - sob alvo, - podemos dizer a ele para direcionar uma nova guia em branco do navegador dizendo sublinhado em branco como esse. - Os sublinhados são importantes. - Você tem que colocar isso aí também. - Este é um valor específico que o navegador entende. Como em vez de mirar em si mesmo, o padrão é eu de alvo, que se parece com isso, e isso significa que quando você clica em um link, seja qual for a janela em que você estiver, você vai perder a visão dessa página. - Mas vai mudar para a vista da próxima página ou você está ligando dois. E se quiser fazer isso, não precisa especificar. E se quiser fazer isso, Então, para estes aqui em cima, eu não especifiquei um alvo. Então, quando eu clicar, vai mudar a página. - No entanto, - para este, - eu especifiquei o alvo em branco, - e isso vai abrir uma nova guia do navegador. - Vamos sair e salvar isso. E o que vamos fazer é copiar e colar esses links para todas as outras páginas aqui, então vou destacar todo esse código do Ah, para mim, está online. - 17 aqui. - Todo o caminho para a linha 19 numeração de linha pode ser ligeiramente diferente para você em seu exercício - código, - dependendo de quanto você escreveu ou como linha Maney retorna que você fez. Mas aqui nesta seção, vou copiar todos os links que escrevemos, então vou realçá-los e dizer editar . - Copiar o quê? - Você pode ver o atalho. - Há comando Ver no Mac ou controle Ver no Windows. - E vamos para as outras páginas do site. - Vamos entrar em contato, - e vamos por baixo do título e colar esses links lá e salvar É ir para a página de vendas e vamos para baixo dos títulos e colar esses links e salvar e vamos - para catálogo e nós estamos Vamos passar por baixo dos títulos, vamos acelerar esses links e salvar e - parece que acabamos tudo por lá. Esse é o Poço, é só quatro páginas. - Parece que me falta alguma coisa. - Ainda não temos preços. - É o que estou perdendo. - Ok, - nós vamos para o preço do último e ir para baixo dos títulos, colar e salvar. - Então agora, todos lutaram. Todas as minhas cinco páginas têm esses links colados nelas, e podemos salvar você nos arquivos e podemos voltar para o navegador agora. colados nelas, E você pode ver nesta aba sua página de índice e você pode ver nossa pequena imagem que criamos aqui. - Lembra-se? - Sempre temos que atualizar a página para ver as alterações mais recentes que fizemos. - Então você está sempre salvando seu arquivo e, em seguida, voltando e atualizando. Não tenha medo de salvar, porque mesmo depois de salvar, vocêpode desfazer. Não tenha medo de salvar, porque mesmo depois de salvar, você Se você cometer um erro, podemos editar,desfazer, desfazer, podemos editar,desfazer, ou comandar Z no Mac ou controlar Z no Windows para que você sempre possa voltar para onde você está. - Posso desfazer isso assim e consertar. - Então estamos sempre economizando. - Vamos voltar para o navegador e vamos atualizar. - E lá vamos nós. Vejo que meus links aqui, que estão aparecendo ao lado da minha imagem, falarão um pouco mais sobre isso depois. - Por que esse ar aparecendo lado a lado? - Hum, - então vamos testar estes. - Então vamos à venda aqui. - Vou clicar que legal e diz vendas aqui. - Agora estou na página de vendas, - vai clicar no catálogo. - Há a página do catálogo que construímos com nossas próprias listas ordenadas e listas ordenadas. - Vamos clicar no preço e ele vai para a página de preços. - Lá vamos clicar em contatos e vamos para a página de contato e, em seguida, por último, mas não menos importante, nós vamos - clique no link Y vezes que você pode ver - abre uma nova guia aqui e nos leva para o site do New York Times. Então, porque eu disse “alvo em branco “, como este que está causando uma nova aba do navegador abrir a coisa. O que é bom nisso é que ainda posso voltar a este site. - Eu não saí deste site aqui. - Posso usar a aba do navegador. - Certo. - Então, novamente, - se eu clicar, - isso abre uma nova guia do navegador aqui. - Podemos fechar isso e voltar para o local. - Já estavam ligados. - Está bem. - Bom trabalho, pessoal. - Você acabou de construir sua primeira página web. - Seu primeiro site. Então, isso é realmente o que as páginas da Web são, - hum, - sites são essencialmente, - você sabe, - ligando entre várias páginas da web. E embora este ainda não seja muito atraente, vamos aprender mais e mais e empurrá-lo mais para construirmos sites muito profissionaise polidos. E embora este ainda não seja muito atraente, vamos aprender mais e mais e empurrá-lo mais para construirmos sites muito profissionais - Ok, então bom trabalho. - O que você vai querer fazer agora é você vai querer passar para o primeiro código - desafio onde você vai começar a construir suas próprias páginas do site 8. Como Validar HTML: Vamos falar um pouco sobre validar nosso código. - Vou dar um exemplo. - Página. - Estes são os dados de preços que você vê e todos os pagamentos que acabamos de terminar recentemente no último - exercício. - E quando você está trabalhando nesses exercícios e em exercícios futuros neste curso, - você pode ter problemas em que as coisas não estão sendo exibidas corretamente em seu navegador. - Hum, - ou talvez mesmo quando você for construir seu próprio projeto de site, - você estará escrevendo algum código e talvez algo não esteja sendo exibido corretamente ou as coisas - não serão posicionadas da maneira que você gostaria que eles estivessem na página. - Então uma boa maneira de verificar isso é validar o código e ver se o código está realmente escrito - corretamente. - Então, uma maneira de fazer isso é usar um validador online. - Então o que eu vou fazer é destacar todo o código nesta página na página de preços - página aqui. - Vou clicar e arrastar. - Ou você pode dio select all comando a no Mac ou controle A no Windows, - e que irá selecionar tudo. E depois vamos copiar este código, que é claro, comando. - Veja no Mac ou controle ver no Windows. - E então vamos pular para um navegador e eu vou em frente e procurar por validador - dot w three dot org é assim. - Então isso traz à tona o validador dot w três dot org e este é o w três dot org - site, - que é o W três c - o consórcio World Wide Web - que soa como uma espécie de culto assustador. Mas, na verdade, essas são pessoas que estão mantendo a linguagem HTML, então estão determinando as regras e a maneira correta de escrever e o uso adequado para HTML e CSS. - Então, se alguma vez eu quiser saber com certeza como escrever algo ou como usar um elemento, você sempre pode vir aqui e verificar lá em cima, - verificar a documentação deles em w three dot org. Neste momento, vamos usar o validador online deles. - Você pode ver suas várias maneiras de validar. - Uma coisa que você pode fazer é você pode colocar no endereço Anat aqui para que eu possa carregar meu site e meu - site pode existir no meu nome de domínio como meu site ponto com. - E eu posso colar esse URL e ter que validar páginas desse site. - Você também pode validar por upload de arquivo para que eu pudesse escolher um arquivo do meu computador e eu pudesse testar o código. Assim eu poderia validar o código de lá. Vamos usar esta terceira aba aqui que diz, validada por entrada direta. - E você pode vê-los. Há uma pequena caixa para copiar e colar, , e enfraquecer. - Editar colar, - que é um comando V ou no Mac ou Control V no Windows. E isso vai colar o seu código lá para podermos ver o código que escrevemos recentemente, e eu vou em frente e clicar em verificar. - E a boa notícia é que escrevemos corretamente. - Diz que este documento foi verificado com sucesso como html cinco. Toda vez que você tem uma barra verde no topo do que então você fez bem, tudo está funcionando corretamente. Caso contrário, se tiver uma barra vermelha aqui, vai dizer que há algo errado no código. Caso contrário, se tiver uma barra vermelha aqui, - Hum, - vamos criar esse cenário. Então, atualmente, tudo está escrito corretamente, mas digamos que eu estava digitando com pressa e digamos que esqueci de escrever esse fechamento então parece que há uma idade de abertura dois e depois outra. - H dois, - este é um erro muito comum. - É Oops. - Esqueci de colocar a barra de fechamento aqui. - Outro erro comum é chegar perto demais de um elemento. E se eu esquecer essa etiqueta final no parágrafo assim? - Então aqui está dois erros thes ar para erros realmente comuns que eu vejo. - Então vamos. Eles guardam este arquivo e bem, copie. Este ano, vou copiar todo este código, e vamos levar isso de volta para o validador, está bem? E vamos acelerar, e depois vou clicar no botão “Reeve ality” aqui em baixo. - Oh, - daquela vez ele encontrou erros no código. - Então sabe que há algo errado. - Diz o Ares encontrou enquanto verificava este documento. - Então vamos ver quais são esses erros aqui. - Ok, e esta é a área que eu realmente estou preocupado. - É este texto vermelho aqui que diz saída quatro erros. - Então vamos ver onde está encontrando esses ares. Diz-nos aqui, online, 10 hum, não pode ser uma criança de outro título. - Interessante. - Então ele vê esta idade para marcar. - Vamos ampliar isso para secular. - Esta é a primeira mensagem aérea. - Diz que esta era para marcar aqui. Esta pequena marca vermelha não pode ser uma criança de outra posição. Então ele acha que estamos tentando ninho, entrando em outro. - E está dizendo que isso é especificamente on-line. - 10. Certo, então podemos voltar ao nosso código aqui, e porque eu tenho números de linha, posso descer a linha 10 e confinar a questão e dizer e porque eu tenho números de linha, posso descer a linha 10 e confinar a questão e dizer, , Eles estão falando aqui. Preciso ter uma marca de fechamento aqui, então vou mudar isso e depois salvar e podemos revalidar. - E isso vai resolver pelo menos um dos erros lá. - E vamos voltar. - E eu vou em frente e colar este código aqui de novo. - Vou correr tudo, colar e revalidar. - Certo, foi isso. - Eu era fixe. - Isso funcionou dessa vez. - Parece que nos safamos com esta etiqueta. - Embora, na verdade, deveria ter jogado no ar sobre isso também. , E,claro, se alguma vez vires visualmente estas coisas a acontecer, vais querer limpá-lo, arranjá-lo por ti próprio, colocando a outra etiqueta de encerramento. - Então, sempre que você validar, - ele vai, - você sabe. - Normalmente ele vai dizer a linha exata onde ele está vendo o problema. - Mas outras vezes você tem que ir para essa linha. - Ele diz para você ir para, - e você tem que voltar atrás e verificar o código acima dele para ver se algo mais anteriormente - está interrompendo o validador nessa linha específica de código. - Então, essa é uma boa ferramenta para usar para solucionar problemas e certificar-se de que seu código está escrito corretamente -. 9. Publicação de sites: - Oi. - Vamos falar sobre a publicação do site depois de todo o nosso trabalho duro. - No final do dia, - digamos que gostaríamos de levar nossos arquivos do site e gostaríamos de enviá-los para um servidor remoto . - Dessa forma podemos visualizar os arquivos ou compartilhar os arquivos com World do nosso domínio. - Então, - é claro, - isso requer sair e comprar um nome de domínio e espaço de hospedagem na Web de uma empresa específica. - E eu sugeri algumas empresas com as quais eu tive boas experiências e, em seguida, ter alguns - acordos razoáveis na seção 0.0 configurar no Módulo 1 para que você possa verificar essas - empresas se você ainda não tem isso configurado e realmente em qualquer lugar que você pode encontrar um - provedor de nome de domínio e hospedagem na Web. - É bom usar além de poder carregar nossos arquivos para que o mundo possa vê-lo. - Isso também será útil nesta classe para que você possa postar seus projetos e receber feedback de outras pessoas, pois elas serão capazes de acessar o domínio do seu site para verificar o que você tem trabalhado. - Então, para começar, - vamos em frente e certificar-nos de que temos escrito as três partes de - informações que obtivemos do nosso provedor de hospedagem - e que seria o nosso endereço FTP nosso nome de usuário ou usuário login e senha. - Normalmente, - a maioria das empresas de hospedagem enviará essas informações por e-mail quando você se inscrever pela primeira vez. - E se você não recebeu isso por e-mail, é possível que você tenha que ligar para eles ou contatá-los para obter essa informação. - Ou eles podem ter lhe dado um nome de usuário e senha para entrar em um painel de controle em seu - site. - E normalmente uma vez que você entrar em seu painel de controle em algum lugar lá, você será capaz de encontrar - esta informação. E quando encontrar essa informação, quer anotá-la. - E a próxima coisa que queremos fazer é lançar um aplicativo chamado File Zilla, que será nosso cliente FTP preferido. Então, vou lançar o arquivo zilla, e isso pode parecer um pouco diferente no Windows. Isto está no meu Mac aqui, mas é praticamente o mesmo dos dois. - Você pode ver que esta tela aqui tem todas essas janelas diferentes aqui em cima. - Temos uma janela. - Isso vai ser o pedido e informação de resposta a partir disso. - Os servidores nos dando para que ele responda de volta, - como, - não pode conectar o ou vai ser como uma conexão coisa bem sucedida como essa. - E aqui embaixo, ele vai te dizer o status de um arquivo. - Se estiver copiando, verá um pouco de barra de carga, avisará se o arquivo for copiado. - E no centro aqui nós dividimos no lado esquerdo e direito, e o lado esquerdo é o seu sistema de arquivos local. - Então estes transmitem todos os arquivos do seu computador da mesma forma que se você estivesse usando o Finder ou o seu navegador de arquivos e, em seguida, aqui do lado direito, - que está na verdade em branco agora porque não estamos conectados a nenhum servidor. - Esta seria realmente a estrutura de arquivos em seu servidor que você está se conectando, então - você será capaz de ver seus arquivos locais e arquivos de seu servidor, - e nós literalmente podemos apenas arrastar e soltar arquivos do lado esquerdo para o lado direito para copiar - de nossos arquivos locais para nosso servidor remoto. - Então isso é realmente o equivalente a fazer upload é se você clicar e arrastar você sabe, - apenas da mesma forma que você pode clicar e arrastar arquivos em torno de seu computador, - você vai apenas clicar e arrastar seus arquivos do site e soltá-los no servidor remoto. - E, além disso, - você também pode clicar aqui no servidor remoto, - e você pode arrastar e soltar arquivos do servidor remoto para o seu computador local para baixar - esses arquivos para que você possa carregar e baixar simplesmente arrastando e caindo. - Então não estamos conectados a nenhum servidor. - Esse será o primeiro passo. - Temos que nos conectar ao nosso servidor. - Então a primeira coisa que vou fazer é ir em frente e ir até o menu suspenso de arquivos , e vamos selecionar o gerente do site e aqui, sob essa pequena guia que diz meus sites. - Este é o lugar onde você pode criar todas as configurações diferentes para diferentes servidores que você - se conectar. - Então, estes são apenas servidores diferentes que eu me conectei no passado. - Vou em frente e criar um novo site. Vou clicar neste botão aqui novo site, e ele quer que eu dê um nome aqui. Chama-se “New Site “, mas vou dar-lhe um nome melhor. - C H W Shoes é o nome deste site. - E então se eu clicar nisso lá, - Eu posso ver que eu posso colocar em algumas configurações e ele vai lembrar essas configurações para este - site particular. - A primeira coisa que preciso é do meu anfitrião. E para me conectar ao meu servidor FTP, coloquei o nome de domínio ao qual estou me conectando, que é Jonathan Grover dot com. - E, claro, - isso será diferente para você e você terá que novamente você terá que verificar com seu provedor de hospedagem para saber o que você deve colocar aqui para conectar o FTP para o protocolo. - Aqui, - você pode selecionar entre FTP, - que significa protocolo de transferência de arquivos, - ou SFTP, - que é protocolo de transferência de arquivos seguro. - Eso sftp pode ser necessário. - Determinados hosts ou determinados servidores exigem que você se conecte a uma conexão segura. - Meu provedor não. Vou usar o protocolo de transferência de arquivos normal, o que é bastante comum. - Vou deixar o porto em branco. Às vezes você tem que colocar um certo número de porta aqui, mas na maioria das vezes você pode deixar isso em branco sob criptografia. Só vou dizer que use FTP simples e aqui sob o tipo de arma de lei, vou mudar isso para normal. Então vou mudar de anônimo para normal. - E aqui onde diz, - usuário, - aqui é onde você coloca seu nome de login ou seu nome de usuário. Então é aqui que é útil ter essas coisas escritas em algum lugar, e então você vai querer colocar sua senha. Felizmente, vocês não podem ver o meu porque são pequenos pontos. - Hum, - e depois há algumas outras guias. Não vou preencher mais nada, mas só para que saibas o que são. - Se você for para a guia avançada, - você pode clicar, - navegar, - e você pode selecionar um diretório local padrão. - E o que isso vai fazer é sempre que você se conectar a este site, - ele irá carregar automaticamente uma determinada pasta do seu computador aqui no arquivo local. - Às vezes isso é bom. - Ele pode acelerar o processo para que você não tenha que procurar em torno de tanto tempo, - e você pode fazer a mesma coisa para o seu servidor configurando um diretório remoto padrão. - Dessa forma, - toda vez que você se conectar ao servidor, - ele irá para uma pasta específica. - Você quer entrar. Às vezes, quando você se conecta a um servidor, você só vê um diretório em branco, e você pode arrastar seus arquivos diretamente para ele. Outras vezes há todos os tipos de pastas, e lá você pode ver uma que diz, Logs que só tem, como, dados de sua empresa de hospedagem nele, como dados analíticos sobre quem visita o site, - coisas como essa informação sobre a frequência com que você copiou arquivos e em que data. E, às vezes, há outra pasta que diz Público, que é onde você copiaria os arquivos do seu site ou outras vezes. - Chama-se http ou talvez até uma pasta HTML. - Então, se você vir um monte de pastas estranhas e você não tem certeza de qual pasta copiar seus arquivos - e dois, - você vai querer perguntar a sua empresa de hospedagem sobre isso. Por enquanto, vou deixar estes em branco. Mas a principal coisa que você tem que ter é nesta guia geral, e esse é o seu host FTP, seu nome de usuário e sua senha. - Depois que eu tiver tudo configurado, - eu posso clicar no botão OK para ir em frente e salvar isso, - e agora sempre que eu quiser visitar o site, - eu posso sempre ir para o gerenciador de site de arquivos, - e eu posso ver que ele se lembra essa informação. Sempre que clico no nome do meu projeto, aqui estão os sapatos W. - Ele terá toda essa informação lá para que eu possa ir em frente e clicar no meu site e clicar - Conecte-se aqui e você pode ver aqui em cima estes ar todos os comandos e respostas do - servidor. - Felizmente, - mente disse listagem diretório bem sucedido aqui quando eu conectado. - Agora, - se você vir algum texto vermelho aqui que diz algo como erro, - blah, - blah, blah blah um pouco geralmente tem ah, - número em algum tipo de mensagem de erro. - Ele geralmente irá dizer-lhe coisas como nome de usuário ou senha incorreta, - que irá deixá-lo saber que você está obviamente usando a senha errada. - Ou pode, - você sabe, - ter algum tipo de mensagem estranha que você simplesmente não sabe o que significa. - Meu conselho é que se você receber uma mensagem aérea e não estiver claro por que não está funcionando, destaque a mensagem aérea e os policiais que você está hospedando empresas de suporte técnico ou ligue para sua empresa de hospedagem e leia a mensagem aérea eles pode ser capaz de lhe dizer por que ele não está conectando Felizmente, - o meu foi capaz de se conectar. - Você é quando? - Quando você se conectar. - Você pode não ver este complicado de uma estrutura de arquivos realmente tem todas essas pastas loucas aqui. Mas, de qualquer forma, o que eu vou fazer é criar uma pasta especificamente para colocar este , site, se você quiser que ele esteja no seu nome de domínio. Se eu só quisesse ir para este nome de domínio, arrastava-o para aquela pasta raiz. - Mas eu quero criar. É como um projeto de site escondido em uma pasta que, como em Lee que eu conheço. - Então eu criei uma pasta aqui chamada sapatos CHW para que eu pudesse realmente ir dedo do pé como Jonathan, - Grover dot com barra sapatos CHW e ver os arquivos lá, - Por exemplo, - deixe-me realmente remover este diretório para que eu possa recriá-lo novamente. - Mostrar como se eu clicar com o botão direito, - Aiken, - dizer excluir. - Tenha cuidado com isso, a propósito, você não pode desfazer, e nós diremos que sim. - E agora é que um se foi. - Ok? - Na verdade, está removendo os arquivos lá. - Demora um tempo. - Então se eu quiser criar um novo diretório aqui fora da janela e dizer Criar diretório - e ele está me mostrando onde ele vai colocar o diretório. - E eu vou chamar isso de sapatos ZH W. Então eu estou tentando fazer um pequeno diretor escondido aqui, e eles vão dizer,OK, OK, eu deveria ser capaz de encontrar esse diretório aqui em algum lugar. - Agora, - lá está ele. - Se quiser entrar em uma pasta, basta clicar duas vezes na pasta. - Se quiser sair de uma pasta, basta clicar duas vezes nesta pequena pasta de pontos. - Há sempre uma pasta no topo, - chamado ponto ponto e se você clicar duas vezes nisso, - ele vai levá-lo para fora da pasta. - Então eu vou voltar para aquela pasta aqui. - Legal. - E o que eu quero fazer é que eu quero selecionar todos esses arquivos aqui de uma maneira que você pode - fazer isso é você pode clicar em arquivos individuais e você pode segurar shift e selecioná-los como - isso. - Você também pode selecionar todos os arquivos dizendo comando a no Mac ou dizendo controle um no windows -, - e então você pode uma vez que eles são todos selecionados como este azul. - Você pode clicar em qualquer um deles, e ele vai pegar todos eles que nós podemos apenas arrastar isso para aqui e nós podemos deixá-lo cair. Então, arrastando e soltando do meu lado local para o meu servidor remoto lá, eu poderia mover todos esses arquivos para lá e para cima. - O topo. - Este barzinho aqui está me mostrando onde está copiando aqueles dois. Isto está a dizer-me que se está a copiá-los com êxito e aqui nesta janela, quando copiares um ficheiro, vais ver que uma barra de progresso mostra quanto tempo demora a mover esse ficheiro. - Por exemplo, - se eu arrastar as imagens aqui novamente, - ele me perguntou. - Diz que esses arquivos já existem. - Gostaria de se sobrescrever? Digamos, sempre use essa ação e diga OK, eaqui embaixo você pode ver que está substituindo esses arquivos ou atualizando os arquivos de imagem agora, tudo bem, e uma vez feito, sempre use essa ação e diga OK, e aqui embaixo você pode ver que está substituindo esses arquivos ou atualizando os arquivos de imagem agora, tudo bem, e uma vez feito, - ele vai dizer transferência de arquivos bem-sucedida nesta guia, - ele diz que houve 39 transferências bem-sucedidas, - e se eu clicar nisso, - ele vai me dizer para quais arquivos como esse e para onde eles foram copiados. Se vir algo aqui sob transferências falhadas, significa que algo não foi copiado. E você pode, tipo, clicar com o botão direito nele. - E você pode, - como, - dizer a ele para tentar copiá-lo novamente ou algo assim. - Arquivos bonitos são os que devem ser como café atualmente. - Tudo bem. De qualquer forma, podem ver que são imagens espelhadas. - Agora, estes são os meus ficheiros locais. - E este é o meu servidor remoto, que tem todos aqueles arquivos espelham imagens um do outro lá. Já que há uma página de índice aqui, posso encontrar essa pasta e ela me mostrará esses arquivos na web agora. Já que há uma página de índice aqui, Então eu vou abrir meu navegador, e eu vou para o meu nome de domínio e eu tinha acabado de jogá-lo no meu diretório padrão. - São para o meu nome de domínio. - Eu poderia ir para o próprio nome de domínio. - Eu já tenho um site aqui no diretório raiz. - Então eu vou em vez disso ir para a minha pasta de sapatos C h w sublinhado assim. - E há filhotes. - Meu site. Então você deve ser capaz de Teoh, carregar seus arquivos para o seu servidor. - E se não quiser que o mundo os veja. - Você quer esconder um pouco. - Você sempre pode criar um diretório e jogar os arquivos em seu. - E se você copiar e colar este diretório em sua página de projeto sobre compartilhamento de habilidades, então outras pessoas podem ver os arquivos e dar feedback e coisas assim. 10. Como introduzir tabas, formulários e Iframes: - Ei, bem-vindo de volta. - Este é slides 1.2 tabelas formulários e quadros I. Vamos olhar para alguns elementos HTML adicionais que podemos manter no Ah, no próximo exercício. Então, basicamente, vamos continuar de onde paramos para o último exercício, mas vamos adicionar ao mesmo local. Algumas coisas adicionais, como tabelas, formulários e quadros I. - Você provavelmente está familiarizado com qualquer momento que você tem alguns dados e seria melhor - exibido usando ah estrutura organizada de linhas e colunas do que uma tabela vai ser o seu ir - para elemento. - O elemento de tabela é e é composto por esta abertura e fechamento tags tabela aqui e, em seguida, - dentro dele. - A primeira coisa que fazemos é decidir quantas linhas existem, - e usamos este elemento TR aqui para criar uma linha da tabela, - então t r significa linha da tabela. Então esta mesa em particular que construímos para subir aqui, o que vocês podem ver. Então esta mesa em particular que construímos para subir aqui, Aqui está o primeiro conjunto e aqui está o segundo agora dentro da rosa da mesa, temos TDs que dividem a tabela em colunas. - Então isso leva que esta linha aqui e adiciona duas colunas a ele porque eu tenho um TD de abertura -. - Um TD de fechamento faz uma coluna particular e este outro divisor de tabela TD aqui cria - outra coluna. - Nós também podemos fazer a mesma coisa aqui em cima, - mas em vez de usar TD para este primeiro estes 1º 2 na linha superior aqui nós usamos th th dance - para cabeçalho de mesa. - Ok, então isso vai nos permitir estilizar esses caras de forma diferente. - Então podemos dizer, - Bem, - queremos que o título tenha, - você sabe, - talvez texto mais grosso e talvez seja centrado ou algo assim. - Ou talvez a cor de fundo desta célula seja uma cor diferente ou algo assim. - Então usamos o elemento da tabela dentro. - Temos mesa subiu t r. - E então temos th para cabeçalho da mesa ou cabeçalho da mesa e temos TV para as outras células. - As outras colunas que queremos criar abaixo. - Então você pode ver aqui se nós se você imaginar que nós cortar todas essas coisas para a direita e - tudo abaixo. Basicamente, estamos construindo estas duas primeiras colunas aqui nestas duas primeiras linhas, e esta seria a ésima posição da tabela que esta pessoa definiu de forma diferente, então é claro que este é o título no topo. - Temos um fundo de cor cinza mais escuro para indicar isso. Aqui está o nome, como o primeiro th e passo da linha em milímetros, o que é contra a medida para este produto em particular. como o primeiro th e passo da linha em milímetros, - E, em seguida, temos o próximo TR, - que é Table Road. Esse cara aqui é uma mesa, escreveu essa primeira barra cinza clara. E dentro disso temos um TD que compõe esta primeira coluna, que é M 4, que é o nome do produto. E aqui temos a medida para esse produto, 0,7 milímetros. - Olhe isso de novo por um segundo. - Absorvendo ao levá-lo. - Ok. - E depois a próxima coisa que vamos falar são formulários. - Então vamos adicionar um formulário de contato eso que o usuário pode digitar uma mensagem no formulário - e enviá-la para nós - e ele aparecerá em nosso e-mail. - Ok, - então, em termos de html vai precisar aprender alguns elementos de formulário para que possamos construir estes thes formulário - campos de entrada para que o usuário possa nos enviar informações. Certo, então o elemento do formulário é composto por essa tag aberta de abertura e fechamento, e você pode ver que há duas opções necessárias que você tem que colocar dentro dessa tag de formulário de abertura ali. - E este 1º 1 chama-se Ação. - Então, a ação aponta para o local do arquivo ou a rota em seu servidor que vai - aceitar as informações que ele espera para coletar as informações ou coletar as informações - que você está enviando neste formulário. - Então, - por exemplo, - neste caso particular, - há uma entrada para nome de usuário e uma entrada para senha. Digamos que digitam o usuário chamado Bob, digitam a senha das batatas fritas, e clicam em um botão de envio. Então, sempre que isto for apresentado à Miss, vai para a acção. - E ele vai enviar essa informação para este arquivo em particular, que se chama Login. - Então este log e arquivo no servidor vai saber, - então para verificar o ah, - ele vai verificar o nome de usuário e senha em um banco de dados para ver se esse usuário existe - como um exemplo. Então, para o nosso exercício mais tarde, vamos construir um formulário de contato, então será um pouco diferente, mas ainda teremos uma ação. - Certo? Então a ação é essencialmente para onde essa informação é enviada. Agora, o 2º 1 que você tem que ter aqui, e estes podem aparecer em qualquer ordem que você possa escrever. - Método Primeira ação em segundo lugar, - mas você tem que incluir em algum lugar dentro dessa tag de abertura, - inação, - atributo, - e um atributo de método. - Então método realmente estipula o método que ele envia essas informações para esta ação - localização aqui. - Então, há dois principais com os quais você vai trabalhar. Um é chamado de obter, e o outro é chamado de Post. - Então não esconde a informação. - Você pode realmente vê-lo escrito na URL Quando você postar usando quando você enviar um formulário - usando o método get, - ele vai realmente anexar ao Ural na parte superior da janela do navegador. - Aqueles valores específicos ah, - esses parâmetros e qual o valor que a pessoa digitou em seu nome e senha. - Então nunca queremos usar o “get “para algo que seja importante. - Como, - hum, - como, - por exemplo, - você sabe, - informações de cartão de crédito, - senhas, - coisas como que você nunca quer usar o método obter. - É muito mais comum usar o método post porque é seguro no sentido de que, bem, não é criptografado. - Mas é seguro no sentido de que esta informação está, pelo menos, escondida. - Não é visível no cabeçalho http tudo, - hum, - e você não vai vê-lo no topo do seu El Bar também. - Então este é o nosso método preferido para coisas como Loggins ou até mesmo nosso formulário de contato que vamos construir. - Vamos usar um método de postagem. - Ok, - Então a ação é, - você sabe, - onde enviamos o arquivo Post está dizendo a ele o formato que ele é ou o tipo de método - para enviá-lo para lá dentro do formulário abrindo e fechando tags formulário. - Então temos outros tipos de elementos que podemos colocar dentro deles e vamos dar uma olhada em alguns diferentes enquanto seguimos em frente. - Então este 1º 1 aqui vai falar é chamado de entrada. Então esse cara tem entrada, tem um tipo de texto, então cada entrada pode ter tipos diferentes. - Você pode ver este como um tipo de texto. Este tem um tipo de senha, então texto quando você digita uma entrada de texto, o usuário só vê as letras que estão digitando. então texto quando você digita uma entrada de texto, - Então eles clicam dentro da entrada e começam a digitar. - Eles vêem o texto a aparecer. Agora, a senha é diferente porque na verdade a senha, você vê pequenos pontos. Então, quando eles estão digitando a senha, se houvesse alguém que talvez estivesse olhando por cima do seu ombro, é se houvesse alguém que talvez estivesse olhando por cima do seu ombro, éuma biblioteca ou algo assim em um lugar público em um ponto de ônibus, as pessoas olham por cima do seu uma biblioteca ou algo assim em um lugar público em um ponto de ônibus, ombro quando você digita dentro de uma caixa de senha com entrada com o - tipo de senha, - eles vêem pequenos pontos para que eles não possam realmente ver as letras da sua senha ou os números - da sua senha que você está digitando. - Ok, então isso é importante é especificar o tipo de entrada que é. - Nós até temos um tipo aqui em baixo de Submeter, - que cria um botão que é um botão de enviar, - então temos texto digitado tipo senha. - Submeta esses ar alguns. - Falaremos mais à medida que seguirmos em frente. Outra coisa realmente importante que você precisa fazer é adicionar este atributo aqui chamado nome Ok, então sempre que a pessoa digitar esta entrada. - Digamos que digitam. - O nome deles é Bob, e nós declaramos que ele vai postar essa informação neste arquivo. - Log in dot PHP. - Agora, - quando o log dot PHP recebe essa informação, - o nome Bob, - ele tem que ter um com, - ah de identificar esse pedaço de informação entre as outras informações. Então vamos enviar um nome de usuário e uma senha. - Agora dê-lhe um nome. - Ah, como nome de usuário ou senha. - O que estamos fazendo é rotular a informação que estamos postando neste arquivo. - Então isso é basicamente um nome de variável chamado nome de usuário que armazena o que quer que eles - usuário, - você sabe, - qualquer que seja a pessoa que o visualizador do site digita, - Então eles digitam Bob e esse texto string Bob é armazenado dentro desta variável ou - este parâmetro nome de usuário, - que é postado para fazer login dot PHP. - Então o nome é muito importante. E claro, o nome entre as diferentes posições do capataz tem que ser diferente, certo? - Ok, - hum, - este cara aqui é Ah, - a coisa divertida amigável que você pode fazer com formulários em HTML 5 é que você pode usar este atributo chamado - placeholder e o que isso faz é que ele vai escrever algo no formulário e colocar inicialmente assim - você pode dar às pessoas uma dica do que elas devem digitar seu eso. - Na verdade, vai dizer nome de usuário aqui. - Então, o espectador sabe que eles devem digitar o nome de usuário nesta caixa, - e então quando eles clicam dentro da caixa, - esse espaço reservado desaparece, - e agora eles só estão vendo o texto lá digitando tantas vezes o texto de espaço reservado - é cinza e indicará ao usuário o que ele deve digitar seu. - E então quando eles clicam dentro da caixa de colocação do capataz, - a cor do texto vai ficar preta quando eles começam a digitar seu nome de usuário. - Ok, - e então temos o tipo Submeter, - que mencionamos é um botão, - e este também tem um atributo chamado Valor. - E é assim que rotulamos o botão. - Isso realmente colocará fisicamente o login de texto. - Ele vai escrever esse texto no botão que as pessoas vêem no navegador. - Então estes ar alguns outros tipos de entradas. - Nós olhamos para um tipo de texto antes de um, - nós também temos um tipo de senha, - que nós olhamos antes de outro tipo que temos é chamado T L - que significa telefone. - Como você provavelmente adivinhou, - uma das coisas boas sobre o tipo dizer que é útil é que há realmente uma ligeira - diferença se você está em, - Por exemplo, - um tablet ou outro toque - smartphone dispositivo móvel, - qualquer tipo de dispositivo touchscreen. A maioria dos navegadores agora são compatíveis quando vêem um tipo de telefone, quando o usuário usa o dedo como um tablet para clicar dentro da caixa de entrada, o teclado que aparece será um usa o dedo como um tablet para clicar dentro da caixa de entrada, teclado numérico. - Então é mais fácil para eles colocar em seu número de telefone porque são todos números em vez de - um tipo de texto. - Então, quando você estiver em um dispositivo móvel ou qualquer outro tipo de dispositivo tablet touchscreen, - se você clicar dentro de uma entrada com o tipo de táxi irá trazer o Alfa pad, - que é todos os caracteres do alfabeto, - e então quando você clica em dentro de uma cabine telefônica, - ele traz números. - Ok, - hum, - nós também temos isso é meio interessante. - Temos um tipo de escondido aqui, - ok, - tão escondido quando você coloca um tipo de oculto, - que permite inserir um valor que é enviado automaticamente no formulário. Esta é uma situação hipotética. Estamos a dizer que isto é uma ideia de utilizador de uma pessoa. Talvez estejam entrando no banco ou checando suas ações ou algo assim. - E precisamos saber qual é o número de usuário. - Eles são, - por alguma razão, - então nós podemos realmente armazenar isso dentro do valor. Então, em vez de escreverem essa informação como as outras caixas de entrada, vão dizer Teoh, vai ser automaticamente inserido lá para eles, e ainda damos um nome a ela. Isto tem um nome de I. - D. - então está armazenando este valor dentro de algo chamado I D. - e porque ele define um tipo escondido - nós não vamos vê-lo fisicamente. - Então isso não será visível no formulário, mas ainda está passando informações para onde quer que você esteja postando este formulário. - Ok? - E falamos sobre o tipo de entrada. - Submeter. - Isso também é algo útil para saber. - Se você quiser fazer uma entrada de formulário necessária, - um HTML cinco. - Você pode usar esta palavra específica no final de qualquer campo de formulário que você queira tornar obrigatório, e você apenas escreve a palavra necessária, que é meio diferente do que vimos antes. - Normalmente, você está colocando um valor em um atributo. Isso é como colocar um nome de atributo, , no final aqui, e isso fará com que seja necessário, o que, na verdade, no navegador irá em html cinco navegadores amigáveis, - isto é, - você vai ver. Uma pequena mensagem aparecerá, indicando que este formulário é necessário agora, fim de estilizar os olhos isso ou para fazer isso funcionar em um navegador mais antigo, teríamos que abandonar o necessário e nós provavelmente usaríamos algo como JavaScript e - CSS Teoh validar o capataz coloca e indicar visualmente os campos necessários. - Mas aqui, - se não formos muito exigentes sobre a forma como parece, - podemos usar o HTML 5 tributo necessário aqui. - Também temos entradas de rádio. - Você pode dizer rádio tipo entrada, - e este é um exemplo de como eles se parecem. - Você tem essas pequenas bolhas e você pode selecionar masculino ou feminino. Então é apenas uma coisa para a maioria das pessoas, pelo menos você provavelmente não vai ser capaz de selecionar ambos nesta situação agora - que estamos discriminando. - Claro, - nesta situação, - provavelmente vamos selecionar um ou outro, - certo? - Então o que queremos fazer aqui para este botão de rádio é que queremos ter certeza de que eles têm o mesmo nome. - Então, um brinde aos botões de rádio. - Ambos têm o mesmo nome de sexo. Mas este tem um valor masculino, e este tem um valor de mulher assim. - Então, se eu clicar no masculino, então este parâmetro ou este nome variável sexo irá armazenar o valor do sexo masculino. E se eu clicar em fêmea, vai substituir isso. Assim, este nome aqui só será igual a masculino ou feminino. - É a única possibilidade de usar um botão de rádio. - Então, e isso seria indicado por quando você clica nisso. - Vai acender azul dentro daquela pequena caixa de rádio. - Também temos entradas de caixa de seleção. - Então, - como você pode ver, - podemos dizer caixa de seleção tipo de entrada. - E demos o nome aqui. - E temos valores diferentes. Então poderíamos dizer, você pode marcar uma caixa que diz que eu tenho uma bicicleta ou você pode marcar uma caixa que diz que eu tenho um carro - tão bem simples. você pode marcar uma caixa que diz que eu tenho uma bicicleta ou você pode marcar uma caixa que diz que eu tenho um carro - Você dá um valor e você dá um nome e certifique-se de que tem um tipo de caixa de seleção, e então você pode marcar essas caixas fora em um formulário. , Se por algum motivo você quisesse que fosse verificado automaticamente, por exemplo, por exemplo, às vezes pessoas sorrateiras criarão formulários que têm uma pequena caixa na parte inferior que já está marcada para você. - Isso diz, - Assine o meu boletim informativo ou concorde em receber coisas promocionais para o seu e-mail, - algo assim. - Então, se você quisesse, - por qualquer motivo, - você queria fazer esta caixa marcada automaticamente da mesma forma que usamos o atributo - obrigatório no final aqui. - Você também pode escrever a palavra marcada como a última coisa antes deste símbolo maior que ou - este colchete ângulo de fechamento aqui, - e isso fará a caixa de seleção automaticamente marcada. - Quando o usuário visita pela primeira vez o formulário, - nós também cometer menu suspenso selecionar menus, - e isso é usando o elemento select. - Ah, - então este aqui nós damos um nome e, em seguida, aninhado dentro deste elemento selecionado. Nós temos todas as opções diferentes, então você veria uma pequena barra como esta e você clicaria nela e então quando isso abrir , você seria capaz de ver, um, pequeno, - médio e grande, - e você teria que selecionar um tamanho lá. - Então, a maneira como fazemos pequenos selecionados inicialmente como você pode escrever as palavras selecionadas lá, - assim como a palavra marcada para marcar a caixa de seleção automaticamente na palavra necessária para - exigir qualquer campo de formulário, - você pode apenas dizer selecionado se você quiser que o pequeno seja selecionado automaticamente, - de modo que será o padrão nessa situação. - Área de texto é útil para quando você tem que colocar em uma espécie de várias linhas de texto ou um - parágrafo de informação. Se você quer que alguém realmente seja capaz de dizer o que pensa, , ou, você sabe, deixe um comentário, algum tipo de feedback que vai ser multilinha. - Você definitivamente vai querer usar uma área de texto em vez de uma entrada de texto. Então isso só ganha um nome, e o que as pessoas digitam aqui se torna o valor. - É bem simples. - Então eu quadros é a próxima coisa que vamos falar. - Vamos inserir um quadro do Google Maps I na nossa página de contacto para mostrar onde a nossa empresa de sapatos está localizada. - I quadros também são usados para, - às vezes incorporando vídeos. - Essencialmente, - sempre que você quiser carregar algum conteúdo HTML de algum outro lugar em um pequeno quadro em - sua página da Web, - você pode usar um olho franco. Então eu quadro significa quadro interno, e isso é exatamente o que é. - É um quadro dentro da sua página HTML. - É como uma janela olhando para algum outro conteúdo HTML. Então estamos pegando algum código H no site do Google, e estamos carregando em um pequeno quadro em nossa página da Web em particular. - Então este é um exemplo de uma moldura de olho para que você possa usar I molduras dedo do pé ligado a outras páginas em - seu site. - Este é um exemplo de, - ah, - apenas ligando para outra página dentro do nosso próprio site. - Você também pode vincular quadros I ao conteúdo de outras pessoas. Então algum outro você Earl usando uma garota como http cólon barra, barra etc, e podemos dar a isso uma largura e altura. - Hum, - e você também pode especificar informações sobre se as barras de rolagem aparecem ou não. - Se o conteúdo não se encaixa dentro do tamanho do seu quadro, - vamos em frente e passar agora para o próximo exercício 11. Tabelas: - para este próximo exercício, - vamos adicionar algum conteúdo adicional em nossos layouts de página. - Você pode ver aqui que para este código inicial para formulários 1.2 tabelas e quadros I. - O que eu fiz é que eu adicionei é um pouco mais de texto adicional e eu também fui - em algumas das páginas e também adicionei algumas imagens lá agora. - Então sinta-se livre. - Teoh, - olhe sobre o código inicial e veja algumas das coisas que eu adicionei. Há algumas informações de contato aqui em baixo e alguns links, , e algumas imagens novas. Então, o que queremos fazer para esses exercícios específicos, vamos para a página de preços e vamos adicionar uma tabela. - Isso vai ser um gráfico de preços. - E nós também vamos para a página de contato e vamos adicionar um formulário de contato. - E também vamos incorporar a localização do Google Maps com base no uso de uma moldura de olho. - Então, para começar, você baixou o código e o descompactou, e trouxe para texto sublime. - Eu só arrastei a pasta aqui e você pode ver as cinco páginas que construímos para o último - exercício e a primeira coisa que vamos fazer é ir para a página html do ponto de preços - - Hum, - e você também pode ver que eu adicionei alguns novos comentários aqui no código. - Então, - por exemplo, - antes de termos este título aqui nos links e eu fui em frente e cerquei isso com - um comentário que diz que este é o início de uma seção de cabeçalho na página e este é - o fim de um cabeçalho. - Então isso vai eventualmente ser uma barra no topo do nosso layout que terá o nome da empresa e o link de navegação entre todas as páginas. Então, antes de aprendermos sobre a construção de layouts, pensei que seria bom para o Teoh mostrar para onde estamos indo criando alguns comentários básicos para cercar as coisas. - Então isso me permite saber aqui que eu vou colocar em uma mesa bem aqui nesta seção de preço - gráfico. - Ok, - Então, como nos slides, - aprendemos que o elemento da tabela é usado para especificar uma tabela. - Isso e depois podemos entrar lá, e eu vou ficar em dívida para mostrar onde aninhando e vamos construir algumas fileiras. - Vou construir uma fileira de mesa aqui e vamos construir outra estrada de mesa logo abaixo dessa. E parece que, para este exemplo, não temos de nos empolgar muito. - Mas acho que vou construir três ou quatro. - Faremos quatro rosa de mesa. - Então eu posso copiar e colar isso aqui assim. - Aqui está a minha mesa quatro subiu um aqui para três e quatro. - Ok, - até agora, - tão bom dentro daqui. - Teremos duas colunas diferentes. Este primeiro, vamos criar uma coluna que contará com a marca do sapato. - Hum, - então eu vou usar th que é cabeçalho da tabela apenas para esta primeira linha em, - nós vamos ver que aqui está uma coluna chamada Brand. Vou fazer outra coluna ao lado dessa chamada “preços”. - Eles terão o preço do sapato. - Oh, vamos ver. - Vai fazer outro aqui chamado imposto fiscal. - Tudo bem. - E vai fazer outro aqui para dizer se está em estoque ou não. - Escreverei em estoque assim, e fecharei essa. - Agora, - se este ar é mais fácil de ver, - hum, - se é mais fácil entender lado a lado que essas colunas Air você pode escrevê-lo desta forma - Muitas vezes as pessoas colocam cada um deles em sua própria linha porque então é um pouco mais fácil de ver sem ter que rolar de lado. - Um belo Sfar. - Mas costumo colocá-los assim. - Pelo menos quando estou ensinando. Ajuda-me a entender que isto é uma linha, e esta é uma coluna porque está ao lado desta coluna. - Mas você também pode, - como eu disse, - você pode fazer retornos de linha e ele vai ser exibido corretamente também. - Omeletes e Então temos marcas de preços imposto em estoque. - E vamos em frente e apenas fazer mais um vai fazer ordem i d. - Então eu vou fazer um título aqui e vamos dizer ordem, - I D. - Diz seria como um I d. - Número que você usaria para encomendar sapatos, - eu suponho. - E, - hum, - vamos fazer esses caras usando a tag T d então nós só usamos th para o 1º 1 que é o cabeçalho - Então esta primeira coluna estaria debaixo da marca bem aqui. Podemos desligar o embrulho de palavras, então o quarto sai de lá. - Então esta seria a primeira coluna em Brand. - E eu vou ter que inventar um nome de marca funky. Digamos que Fink Erstein é um nome de marca lá. - E poderíamos adicionar outra TV. - Este seria, - hum, - não se esqueça de fechá-lo. - Este aqui entre a etiqueta de fecho de abertura seria o preço. - Hum, - então este ar bastante caro vai fazer com que eles $97,18. E para o imposto vai dizer que o imposto está em uma escala deslizante de, hum, - 15 centavos Teoh 30 centavos como esse. - E a próxima coisa que temos é se está ou não em estoque. - Então podemos dizer que sim, - está em estoque. - Hum, - bem, - apenas coloque um porquê. E então a última coisa que parece que temos aqui é algo chamado ordem I d. - E esta ordem eu vou apenas inventar o número. - Vou dizer 11. - 70 é a sua ordem. - Eu d. - Excelente. Agora, Agora eu poderia copiar isso e colar abaixo, e eu poderia apenas mudar a informação para acelerar isso aqui. - Vou destacar isso e podemos descer e colar e eu vou colar isso de novo, e então eu vou mudar rapidamente esses valores aqui, e então eu vou mudar rapidamente esses valores aqui, e ver que a próxima marca vai fazer esse cara chamado Dolby. Esperanças serão e Washington, e mudaremos o preço aqui. - Tudo bem. - E este será 15 para mudar o ano fiscal para 15 para 32 centavos. - Esses caras estão em estoque? - Hum, - claro. Por que não as ações do Aaron também, e então mudamos o número do pedido aqui no final, e vamos descer e fazer mais um produto. - Ok? Warby, Brixton. E esta marca em particular custou 111 dólares e 42 centavos. Há algum tempo que não faço compras de sapatos, por isso já não sei quanto custava. - Tudo bem, - bem, - fazer este o mesmo e vai dizer que este não está em estoque lá para popular vai dizer não. - E então, - um, - para o seu número particular vai inventar algo. - Vai dizer 11. - 78 A. - Ok, perfeito. Então vou salvar isso, e ainda não usamos nenhum CSS. - Não vamos estilizar esta mesa ainda. Faremos isso em um exercício posterior, então veremos os dados brutos, mas ainda devem ser organizados em linhas e colunas. - Nós podemos salvar e voltar aqui para o nosso navegador e vamos em frente e navegar naquela página. Essa é a página de preços, e aí você pode ver minha mesa. - Então isso vai ficar muito mais bonito quando nós damos algumas cores a essas células, cada uma dessas células uma cor diferente e adicionar algumas bordas e coisas e espaçamento em torno dela . Mas, por enquanto, espero que isto lhe dê uma ideia de como organizar as informações que você pode ver aqui. - A palavra marca, - que é um cabeçalho, - está centralizada, - mas todo o texto TD é por padrão. Está um pouco no lado esquerdo da cela, mas ainda está organizando em colunas iguais como essa e Rose. - Então, são quatro filas. - 1234 e 12345 colunas. Vamos ver o código de novo, só por um momento para absorver tudo isso. - Tudo bem, 12. Iframes: - Então seguir em frente. - A próxima coisa que queremos ver é que queremos ir para a página de contato e queremos - ir para a página de contato aqui - e queremos adicionar duas coisas. - Vamos adicionar um mapa em um formulário. Vamos começar com os mapas incorporados do Google da Thea usando uma moldura de olho, algo para entrar aqui onde diz no meio, você sabe, mapa e mapa final no meu código. - Está online. - 24 aqui deve ser por anos também. - E a primeira coisa que eu quero fazer é ir para o Google e pegar um mapa para que eu possa ir para mapas dot - google dot com e vamos digitar o endereço da nossa empresa. - Pode estar em qualquer lugar. - Digamos, - hum, - bem, - vamos dizer, - Ah, - Hoboken sobre aquele Hoboken, - New Jersey, - e provavelmente para o seu negócio, - você colocaria um endereço de verdade. Vou colocar este lugar e enfraquecer, basicamente ampliar para fazer parecer o que quisermos aqui. Vou aproximar um pouco mais e depois centralizarei este pequeno A aqui que tem esta bandeira, então normalmente você encontraria o seu negócio, e então você o selecionaria . E a próxima coisa que queremos fazer é ser capaz de Teoh, capturar esta informação e incorporar eso pelo menos no momento da filmagem , Google tem um link aqui no canto superior esquerdo. E se você clicar nesse link, a primeira coisa que ele faz é tentar lhe dar um link que você pode vincular no topo aqui . Se você olhar aqui na seção inferior, diz colar html para incorporar em um site, e eles te dão uma moldura aqui. - Se você gostaria de personalizá-lo e ajustar as configurações deste quadro I, - sua melhor aposta é clicar neste link aqui que diz personalização de visualização, - mapa incorporado e que irá aparecer uma pequena janela como esta. - E você pode ver aqui que você pode selecionar pequeno, - médio, - grande, - ou você pode colocar em um costume específico com e alturas. - Então, isso é bom. Vamos deixar os padrões aqui, que é, um, médio, um, médio , 425 por 350, o que é perfeitamente bom para a largura e altura por enquanto. E o que faremos mais tarde é quando começarmos a entrar em nossas saídas responsivamente para diferentes dispositivos, vamos mudar a largura disso, dependendo do dispositivo. - Então, por enquanto, - vamos em frente e usar esta configuração padrão aqui. - Você também pode alternar entre a visão de satélite e a visão da Terra e do terreno. - Eu vou em frente e selecionar a vista do terreno porque eu gosto disso. - Por que não? - E então se viermos aqui, você pode ver que há um código que você pode copiar e colar nesta seção aqui para que eu possa - destacar tudo isso. - É bastante, na verdade. Todo esse código daqui até aqui, e então eu copio. Todo esse código daqui até aqui, - Vou dio comando ver no Mac para copiar ou controlar ver no Windows. E então eu vou voltar aqui, e eu posso colar isso e aqui eu vou fazer o comando V no Mac, que é, claro, controlar V nas janelas e colar aquele menino mau lá dentro. Então isso lança o quadro, e nós podemos salvar isso e vamos voltar para o navegador e ver se tivemos alguma sorte. - É aquele cara. Então, se eu fiz isso corretamente, eu deveria ver o mapa aparecer. Vamos voltar aqui e ir para a página de contato, e lá é incrível, que eu possa mostrar a localização. - As pessoas podem clicar nisto e mover isto. - Eles podem selecionar direções. - Eles podem usar essas ferramentas para ampliar e diminuir o zoom e se mover pelo mapa. - Você também pode clicar em um link que aparece abaixo. - Esta é vista mapa maior, - que irá levá-los para o Google Maps. - Ok, - tantos sites dão a você a capacidade de usar quadros I para incorporar conteúdo. - Outros exemplos são o YouTube. - Você pode incorporar vídeos do YouTube através, - e eu enquadrar apenas copiando e colando o código. - Eles fornecem vídeo, bem como outro bom site para pegar o conteúdo de vídeo, - colando-o em seu site. E há todos os tipos de widgets para Twitter e foursquare em todos os tipos de sites sociais. - Ok, então vamos voltar ao código agora. 13. Formulários: - Ok, - então a seguir vamos criar um formulário de contato e você pode ver que eu já criei alguns - comentários no código aqui para mostrar onde isso vai. - Então vá direto entre esses dois comentários on-line, - 30 lá, - e vamos começar com o nosso elemento de formulário, - que é uma tag de formulário de abertura e fechamento como assim Agora, - dentro da tag de formulário de abertura, - nós temos ter dois atributos. Temos de especificar o nosso método, que vai ser postado. E a próxima coisa é a ação, que é o arquivo que está recebendo o que quer que seja enviado no formulário agora, vou colocar a hashtag ou o símbolo da libra lá dentro. - Isso é apenas mudar o número três. - Isto é apenas para ser um espaço reservado. - Pode até deixar em branco, se quiser. , Então,mais tarde em um exercício futuro, vamos apontar isso para um arquivo específico no back-end que vai processar esse formulário e enviar um e-mail para a pessoa desejada. Então, neste caso, estamos apenas mapeando apenas o front-end. - Estamos apenas fazendo o HTML envolvido em colocar este formulário em funcionamento. Então, por enquanto, não precisamos nos preocupar com a ação. Vamos deixar isto como uma espécie de espaçoreservado. como uma espécie de espaço - Ok, então dentro deste formulário aqui, eu gostaria de colocar algumas informações que eu gostaria de criar algumas entradas, para , que as pessoas possam colocar em seu nome, e-mail, telefone número, - e também uma breve mensagem para mim, - e, em seguida, clique no botão enviar. - Então eu gostaria de colocá-lo em colocar aqui em que eles podem digitar, - e eu vou dar a este um tipo de texto porque eu quero que eles coloquem alguns caracteres alfabéticos - nele. - Quero que digitem o nome deles aqui. - Então é importante que eu também dê isso em nome para que quando este formulário for enviado, ele possa armazenar essa informação em algum tipo de nome. E embora pareça redundante, vou chamá-lo de nome, porque é isso que eles escrevem, estou dandoum nome de nome. E embora pareça redundante, vou chamá-lo de nome, porque é isso que eles escrevem, estou dando a Earazão pela qual isto é o seu nome de utilizador. Este é o nome da pessoa que está enviando e-mail, na verdade. - É uma maneira melhor de descrever isso. E este também vamos dar um texto de espaço reservado. - Digamos que espaço reservado, - e vamos dizer, - hum, - seu nome. - Bem, diga seu nome. - Certo? - Então eles sabem que o nome deles vai lá. - Hum, - como nós tornamos isso necessário? - Isso é certo. - Dizemos que obrigamos a escrever a palavra requerida no final assim. - Acho que vou tirar o embrulho. - Basta rolar um pouquinho assim. - Ok. E depois vamos para a próxima linha e vamos criar outra entrada, e vamos dar a este um tipo de e-mail. - Ok, - Então, - um, - tipo de e-mail é bastante útil quando você está realmente tentando obter o e-mail da pessoa. - E a razão por que é que em html cinco navegadores compatíveis? - Ele irá validar se é realmente um endereço de e-mail ou não, - e impedirá que ele envie. - Se alguém digitar algo lá que não se assemelhe a um endereço de e-mail de algum tipo. - Certo, - E talvez, - você sabe, - talvez o e-mail deva ser solicitado porque queremos usar isso é como um e-mail de contato. - E como saberemos para quem enviar a mensagem a não ser que consigam colocar isso? - Tudo bem, vamos fazer outra entrada aqui. E este, vamos fazer um tipo diferente. - Vai dizer que este é um tipo de dizer que traz o Não, - o bloco numérico em diferentes dispositivos. Quando você clica dentro desta entrada, ele deve trazer o bloco numérico dizendo tipo de telefone, e daremos um nome a esse cara também e associá-lo e diremos O telefone é como estávamos preocupados. - Isso e então vamos dizer espaço reservado e para o lugar mais velho aqui vai dizer telefone, - E nós também vamos mencionar para eles no espaço reservado que isso é opcional. - Eles não têm que nos dizer isso a menos que queiram. - Ok, e vamos ver. - Então, na verdade, é isso. Depois de termos o nome do telefone, e-mail e depois disso, queremos que eles sejam capazes de colocar sua mensagem. - Então o que eu vou fazer é todos criar uma área de texto como essa usando o texto de abertura e fechamento - tag área assim e, em seguida, dentro desta área de texto. - Vou dizer a altura para ser. - Eu digo que deve ser pelo menos 10 linhas de texto. Você sabe que você poderia apertar o botão de retorno 10 vezes 10 linhas do tipo caberão antes que uma barra de rolagem apareça, , e daremos a esse cara e o nome também dirá nome igual a mensagem. - Tudo bem, - E então, - por último, - vamos adicionar uma entrada com um tipo de enviar e que nos dará o nosso botão enviar. - E a fim de rotular o botão para que possamos ler algum texto nele vai escrever a palavra enviar - o botão como esse, - e isso deve ser bom para ir. - Vamos salvar isso e vamos voltar para o navegador e atualizar Awesome. - E aqui temos o mapa I frame e, em seguida, abaixo do formulário que acabamos de criar. Então, se eu ampliar este ano, você pode ver que não está estilizado ainda. Vamos embelezar isto e fazer com que pareça adorável mais tarde, usando CSS. Vamos embelezar isto e fazer com que pareça adorável mais tarde, - Mas por enquanto, - é apenas um tipo de forma genérica como, - empilhada horizontalmente para que possamos clicar dentro daqui, - e podemos digitar um nome. - Meu nome é Bob. - Posso clicar dentro do e-mail. Você pode ver que o texto do espaço reservado desapareceria quando eu digito, e podemos dizer que meu e-mail é Bob no Bob Dot com. Os números de telefone são opcionais, então não preciso digitar isso. Se eu quisesse, seria algo assim, eu acho. - E então eu posso digitar uma mensagem como Hello? - Algo assim. - Hum, - agora, - alguns desses campos um obrigatório, - por exemplo, - se eu não digitar um nome e eu tentar e clicar em enviar ele diz, - por favor preencha este campo. - Então este é que html cinco atributo obrigatório amigável que colocamos dentro lá é - me dizendo que eu tenho que preencher isso antes vai enviar. - E novamente, - se você quiser ser capaz de estilizar isso um pouco mais, - hum, - você provavelmente vai acabar usando algo como JavaScript ou J coury plug em estilizado - essas formas, - que Não vamos passar nesta aula, mas talvez numa aula futura. - Ok, então aqui temos o nome vai preencher isso de novo. - Vamos fazer este que este tem duas coisas indo para a sua validação. - O número um que exigimos. - Então, se não escrevermos nada e ele deve dizer que é necessário se também colocarmos um e-mail - endereço, - isso não faz sentido. - Como se eu colocasse como, - um, - fingindo fora sucka falso. - E depois tentamos enviar isto. - Diz: “Por favor, introduza um endereço de e-mail. Então temos que colocar algo como Bob no Bob Dot com. Acho que ainda pode fingir, mas dá um pouco mais de trabalho. E quando submetemos, publicaria essa informação no formulário para o arquivo específico que listamos na ação . - Atributo. - Ok, então neste caso, nós apenas colocamos um símbolo de libra é um espaço reservado. Então, quando eu clico em enviar, ele só atualiza a página. - Não acontece nada lá. Mas como eu disse um pouco mais tarde, em um exercício futuro, vamos todos pelo menos dar um back-end para fazer isso funcionar. - Então, em seguida, você vai querer passar para o próximo desafio de código e implementar esses novos elementos que você aprendeu em seu novo site. 14. Vídeo: - Oi, pessoal. Este é o Exercício 2.1, e eu já baixei os arquivos aqui, o código-fonte e você vai notar que se você olhar dentro da pasta, há algumas coisas extras aqui que não existiam antes. - Então ainda temos as mesmas cinco páginas HTML em nossa pasta Imagens. - Mas algumas coisas novas são a pasta CSS agora. - Não vamos fazer muito com CSS neste exercício. - No próximo exercício será aprender os fundamentos do CSS e como ele funciona neste - exercício. - Nós só vamos estar fazendo uso de um script CSS pré-escrito que vai ajudar o nosso HTML - cinco elementos a trabalhar em todos os lugares. - Então vamos aprender um pouco mais sobre isso em um próximo exercício. - Então também vamos inserir um vídeo neste exercício. - Então eu também providenciei para você uma pasta de vídeo que tem uma gravação. Parece o artista Larry Hale tocando uma música, Blue Shoes. - Temos os dois formatos aqui. Temos um arquivo do MP 4, e também temos um arquivo O. G. V. - Então isso deve funcionar em todos os navegadores diferentes. - Tudo bem, então para começar. Podemos arrastar esses arquivos para um texto sublime, que você pode ver que eu já fiz. - E eu vou clicar duas vezes na página html do índice. - Esta é a única página que vamos precisar para trabalhar em que vamos trabalhar neste exercício. - Então, para começar, - vamos em frente e ir para a seção da página onde gostamos de adicionar nosso vídeo e - eu vou descer aqui Teoh Line 44 na seção de canto do artista e vamos em frente - e começar adicionando a tag de vídeo de abertura e eu vou adicionar a tag de vídeo de fechamento lá também - bem. - Agora o vídeo tag de abertura. - Pode aceitar nomes de atributos especiais. Então, para passar em uma opção, você pode dizer coisas como controles. - Hum, - e você pode apenas deixá-lo como um vídeo. Mas se você disser controles como este, então o que acontece é quando a página carregar, ele automaticamente fará o padrão. - Controles de vídeo serão visíveis em oposição aos controles que estão sendo ocultos. Algumas outras opções que você pode passar aqui são coisas como reprodução automática,por exemplo, você pode especificar se você quer que ele seja reproduzido automaticamente ou não. Algumas outras opções que você pode passar aqui são coisas como reprodução automática,por exemplo, por exemplo, - E também há loop. - Você pode ativar o loop dizendo Loop para este vídeo em particular. - Eu não quero isso no dedo do pé. - Eu só queria jogar uma vez, - e eles teriam que clicar em jogar novamente se quisessem jogar uma segunda vez. - E em termos de auto play, - Eu não sou um grande fã de auto play, porque às vezes ele pega os usuários desprevenidos se eles vão para - sua página e eles ouvem vídeo tocando em algum lugar e eles não têm certeza de onde o vídeo - está. - Então eu vou ir em frente e deixar o usuário encontrar o vídeo e clicar no botão play em si . - Se estiverem interessados em assistir. - Eu acho que vou deixar controles lá porque eu quero ter certeza que meus controles estão sempre - visíveis. - Ok, isso é um bom começo. - Então a próxima coisa que precisamos fazer é ligar para nossos arquivos de vídeo fonte, e você pode ver que eu criei as pastas de vídeo que mencionei antes e dentro dela - pasta tem dois arquivos sapatos azuis e P quatro e sapatos azuis dot gv, - então eu vou apenas ir em frente e começar criando o elemento fonte lá, - e vamos usar o atributo SRC dois pontos em direção ao local específico do arquivo. - Então, neste caso, - aqui estou eu na página html index dot e eu tenho que dizer ao navegador exatamente onde este - arquivo de vídeo existe. Lembrem-se quando ligávamos duas imagens, tínhamos de dizer ao navegador um navegador. Sei que estamos na página de índice, e quero que você entre na pasta de imagens e exiba uma imagem em particular. A mesma coisa com os vídeos, os vídeos são exibidos em sua própria pasta. - Então eu tenho que dizer ao navegador primeiro ir para a pasta de vídeo dizendo barra de vídeo como - isso. - E então eu vou dizer para jogar tênis sublinhado azul ponto mp quatro assim. - E também vamos especificar o tipo Videophile aqui é video slash mp quatro. - Certo, perfeito. Então isso vai funcionar para todos os meus dispositivos de safári, certo? Como , computadores Mac, iPads, iPhones e Internet Explorer serão resolvidas com esta primeira etiqueta de origem. Então, para outros navegadores como Firefox, cromo, etc., vou precisar ligar para o outro formato de vídeo. - Então o outro é chamado video slash blue underscore shoes dot org v e o The file - type aqui é video slash o. - G é o nome do Kodak lá. - Ok, - então a razão pela qual o Kodak é chamado Ogi Theo ra e um o g tem Codex para este formato pode - ser tanto áudio como vídeo. Então, muitas vezes, para a extensão de áudio, você verá oh dot org. para a extensão de áudio, E, ocasionalmente, verei um vídeo com essa extensão de arquivo. Mas na maioria das vezes, as pessoas nomearam a extensão de vídeo como ponto gv, daí por que isso é diferente aqui. - Este é o Slash O G e os arquivos de vídeo. - 00 gv. Pensei em mencionar isso no caso de estarem confusos sobre isso. - Ok, então aqui é onde a solução de recuo entra em jogo. Então, para navegadores mais antigos que não suportam os elementos de vídeo, eu poderia incorporar algum flash. - Eu poderia baixar um flash player grátis, se eu quisesse. - E coloque isso aqui. - Eu acho que o que eu vou fazer é simplesmente escrever algo aqui. - E isso só vai para Eu vou escrever uma mensagem para o usuário aqui. E essa mensagem só aparecerá se, por algum motivo, o ponto dolorido desses arquivos fonte não carregar. Por outras palavras, se não puderem reproduzir o vídeo, vão ver esta mensagem. Então eu só vou dizer, que o navegador deles não suporta o período de vídeo HTML 5 e será o mais educado possível, então vamos dizer, por favor, atualize o período do navegador. que o navegador deles não suporta o período de vídeo HTML 5 e será o mais educado possível, então vamos dizer, Podemos até ser um pouco mais simpáticos, e podemos dar-lhes um link para atualizar o navegador. Podemos até ser um pouco mais simpáticos, - Então vamos em frente e embrulhe um link em torno deste texto aqui que diz: “ Atualize seu navegador para que quando eles clicarem no upgrade seu imposto de navegador, isso os levará para site amigável. - Isso vai permitir que eles baixem como uma versão mais recente do Internet Explorer ou uma versão mais recente do Firefox ou safari, se é isso que eles precisam. Então, como se lembram, usamos a etiqueta A para criar um link. Então, se eu cercar esse cara assim, posso abrir e fechar uma etiqueta em torno do texto que eu quero ser. - O link, - que é atualizar seu navegador e, em seguida, dentro da abertura de uma tag. Eu posso especificar para onde ele está ligado, então eu vou em frente e dizer, hum H ref, e há um ótimo site que eu gosto de usar, que é em http cólon barra, barra e é chamado. - É muito fácil de lembrar. Chama-se “Navegue Feliz Ponto com”, e você pode ver onde isso os levaria. - Deixe-me copiar isto e através disto para o meu navegador bem rápido. - Vamos seguir em frente e acelerar isso. - Então navegue com ponto feliz leva você a esta página onde você pode obter a versão mais recente do - qualquer navegador que você está procurando e você pode ver que ele sempre mostra a versão mais recente - número aqui em baixo. Para que as pessoas possam escolherum navegador em particular, se estiverconfortável com ele. Para que as pessoas possam escolher , se estiver Então, ao contrário de ligar ao flash, , vamos dar acesso para atualizar o navegador, o que espero que eles façam. Certo, Certo, vamos acrescentar uma última coisa é, não quero que eles saiam do meu site. - Quero manter a aba do site aberta. - Então, dizendo sublinhado Blank. - Você se lembra que este atributo alvo e um valor de Sublinhado irão fazê-lo - que quando eles clicarem neste link, - ele irá abrir uma nova janela do navegador. - Então vou em frente e guardo isso. Certo, então vamos testar esse cara no navegador. - Então eu posso trazer esse código aqui e vamos arrastar e soltar esse cara no cromo. - Então estamos na página de índice aqui. - Vou jogar isso aí. - Legal. - Tudo bem, então aqui está, - hum, - meu cabeçalho minhas imagens. - E aqui em baixo, - se eu rolar para baixo, - esta é na verdade a minha seção de artista na página e você pode ver os controles do navegador estão - mostrando e eu posso clicar em Play Awesome. - Obrigado, Larry. Então esse é Larry tocando guitarra, e parece que funcionou. - Bom trabalho. - E isso eu posso garantir que isso vai funcionar em todos os navegadores diferentes. - Pode ir em frente e testá-lo. - Esse cara vai trabalhar em todos os dispositivos diferentes. Vamos tirar isso do lado por um segundoe voltar para o código. Vamos tirar isso do lado por um segundo - Então é assim que você incorporaria o vídeo. - E, claro, - se você estiver incorporando áudio seria o mesmo processo, exceto que você usaria a tag de áudio - em vez de vídeo e para o arquivo de origem. Claro, você estaria se ligando a um arquivo de áudio como um MP 3 e um OG. arquivo de áudio como um MP 3 e um OG - E eu estou apenas da mesma forma que existem soluções JavaScript para fazer um único arquivo de vídeo funcionar e todos os diferentes navegadores. - Há também jogadores Js de trabalho, - jogadores JavaScript para elementos de áudio também, - então você pode estar interessado em verificar isso. 15. Preparação para para o HTML5: - Ok. - Então, para a próxima parte do exercício, - vamos em frente e incluir algumas tags semânticas HTML em nosso layout. - Então o primeiro passo é preparar nosso documento para navegadores mais antigos. - Então, mesmo que você saiba, - como olhamos nos slides, - a maioria dos navegadores modernos suporta HTML cinco tags semânticas, - no entanto, - algumas versões mais antigas do - um Firefox safari e chrome e mais antigos versões do Internet Explorer como o Internet Explorer - oito e abaixo. - Eu não tenho nenhum apoio. - Na verdade, eles são criados antes do HTML 5 ser criado para que eles não tenham suporte para essas tags semânticas agora. - Na verdade, é muito indolor e simples adicionar esse apoio. Então o que podemos fazer é entrar na seção da cabeça aqui, e a primeira coisa que vamos fazer é adicionar suporte para fogo, Fox, Fox, cromo e Safari. E vamos fazer isso ligando a um arquivo CSS, e aprenderemos muito mais sobre e aprenderemos muito mais sobreCSS nos próximos exercícios. - Mas por enquanto, - vamos simplesmente vincular a algum código CSS pré-escrito que ajudará esses elementos -. - Ele é html cinco. - Elementos semânticos são exibidos corretamente em todos os navegadores diferentes, - então a primeira coisa que eu quero fazer é criar um link aqui no topo da página, - e este link vai apontar para o arquivo CSS ponto normalizado que eu incluí para - Você. - Então eu tenho que adicionar alguns atributos aqui. - O 1º 1 que quero acrescentar chama-se R E L. - que significa relação. - Isso diz isso, - diz ao navegador o tipo de link, - a relação do link - e nós vamos dizer a ele que esta é uma folha de estilo é o tipo de link - e nós também temos que apontar para um localização. - Então usamos um rascunho de dois pontos para o local específico do arquivo. - Eu te dei uma pasta CSS. Temos que dizer ao navegador para ir para a pasta CSS porque afinal, estamos na página de índice aqui. - Então nós temos que dizer, - Ei, - navegador, - ir da página em que estamos, - que é Index, - ir para a pasta CSS como esta e carregar este arquivo que é chamado normalize dot CSS. - Ok, - então se olharmos para normalizado esse CSS, - há realmente uma confusão de codificação aqui todo o código que envolve o uso de CSS - estilo e todos esses estilos CSS. - Seu principal objetivo é fazer com que o texto e os elementos exibam o mesmo em todos os - diferentes navegadores. - E falaremos um pouco mais sobre isso mais tarde quando cobrirmos CSS. - Mas a principal coisa que queremos usar este arquivo está bem no topo da página. - Aqui começa online. - 10. Então não se preocupe se ainda não entender todo o código CSS, vamos voltar a isso em uma data posterior, e descreveremos detalhadamente como tudo isso funciona. - Mas há duas seções importantes aqui em cima. E esta primeira parte aqui é basicamente corrigir a forma como as coisas são exibidas em navegadores mais antigos. - Então esta é uma lista de todas as tags semânticas HTML comuns que você usará de vez quando para layout. - E temos que dizer ao navegador para exibi-los de uma maneira particular. - Vamos entrar em mais detalhes mais tarde sobre as diferentes formas de exibir elementos. - Mas essencialmente exibir Block diz ao navegador que esses elementos devem exibir ah - vertical um em cima do outro e que eles não devem ser capazes de exibir lado a lado. - Isso vai dar-lhes espaço físico e torná-los exibidos como uma caixa, - basicamente como um bloco na página onde eles não serão capazes de caber lado a lado -. - Quando você coloca um em uma linha particular que vai ocupar toda a linha. - E nós também temos a sua correção para a tela de áudio e elementos de vídeo são elemento - aqui irá exibir em bloco de linha, - o que significa que ele terá algumas características de um elemento de bloco, - mas ele será realmente capaz de exibir lado a lado com elementos. Certo, então não se preocupe, não se preocupe muito com isso. Voltaremos quando discutirmos o modelo da caixa, e explicaremos detalhadamente o que significa a exibição e como isso funciona. - Ok, então eu não quero realmente tocar muito CSS neste momento. - Tudo é, - você realmente tem que entender é que ao vincular a este arquivo CSS pré-construído ponto normalizado - CSS, - isso permitirá Firefox safari e cromo versões mais antigas desses navegadores para exibir estes - estes HTML tags semânticas corretamente Ok, - de modo que cuida de todos. - Excepto o Internet Explorer. - Ok, - Então eu mencionei em um, - uh eu acho que nos slides anteriores que para o Internet Explorer, - nós podemos incluir um arquivo JavaScript que permitirá HTML cinco elementos para trabalhar em uma versão mais antiga - do IE. - Então, o Internet Explorer 87 e seis e abaixo não suportam HTML cinco elementos. - Então temos que dizer ao navegador. - Ei, navegador. - Se acontecer de você ser o Internet Explorer, - por favor, ligue para o script. - Ok, - então vamos publicar um anúncio em um script tag para que possamos dizer script. - E esta é a tag que vamos usar Toe link para arquivos JavaScript tem uma abertura e - tag de fechamento como essa. - E aqui você é realmente livre para escrever JavaScript. - Se você quiser. - Nesta seção, - nós realmente vamos estar usando o link tag script toe para um arquivo javascript externo. E usamos o SRC, o atributo fonte dois pontos em direção a isso. - Hum, - não, - este tipo de ligação, - você sabe, - eventualmente, - você pode memorizar isso, - mas mais frequentemente do que você sabe - vai estar vinculando a ele via Google. - Então, se você for ao Google e você digitar HTML cinco XM, - ele vai chegar a um link como este, - que é que eu sei que está em http cólon barra html cinco XM dot google code - dot com barra SV e barra tronco barra html cinco pontos Js eu sei que é, - Ah, - isso é praticamente um bocado, - Mas se você ligado a isso, - este arquivo aqui fará HTML cinco elementos funcionar corretamente no Internet Explorer. - Ok, - nas versões anteriores do Internet Explorer, Internet Explorer nove e acima, - você já suporta esses elementos? - Agora este faz funcionar para versões mais antigas do Firefox, - chrome e Safari. - Este está no Lee para o Internet Explorer 8 e abaixo. Então, não seria bom se eu pudesse dizer ao navegador só para usar este se fosse Internet Explorer? Dessa forma, não vou perder tempo de carregamento, então se eu for o Firefox, não vai nem incomodar a carga do dedo do pé. - Isso seria ótimo, certo? - Então acontece que podemos realmente fazer isso porque há algo chamado uma declaração if - e se condicional, - que existe no Internet Explorer. - Assim, o Internet Explorer tem exclusivamente a capacidade de reconhecer este particular se condicional. - Então, a maneira como fazemos com que outros navegadores ignorem isso enquanto começamos como se estivéssemos escrevendo um comentário no código. - Então dizemos, - você sabe, - como, - hum, - menos que símbolo, - ponto de exclamação, - traço, - traço, - como isso. - E aqui em baixo, teríamos um comentário. - O comentário terminaria assim. - Certo? - Hum e então o que nós temos que fazer é para que o Onley Internet Explorer processe este código - aqui neste comentário é nós criamos um condicional usando colchetes, então usamos colchetes, - que é - hum, - é apenas à direita da letra p no seu teclado. - Então você quer ir apenas para a direita da letra p no teclado e você quer fazer abrir - colchete perto Agora, - dentro desses colchetes, - podemos escrever uma declaração e se condicional, - enfraquecer, - Diga se e queremos dizer Ah, - Significa menos do que e vamos dizer se menos do que o Internet Explorer versão 9. Em outras palavras, se for oito ou qualquer coisa abaixo, então vamos fazer o código aqui. Então, a maneira de fazer isso funcionar é que vamos fazer um ponto de exclamação e um símbolo maior do que esse. - Hum e isso vai terminar com sucesso a declaração se aqui assim. - E então aqui embaixo, - nós só precisamos adicionar outro conjunto de colchetes e vamos começar dizendo maior que - ponto de exclamação, - Suporte aberto, - colchete fechado como esse e dentro daqui, Nós vamos colocar as palavras e se e isso vai acabar com a declaração se eu sei que isso é meio bagunçado aqui, mas o que acontece é que o navegador cai e se o navegador é Firefox ou cromo ou safari, mas o que acontece é que o navegador cai e se o navegador é Firefox ou cromo ou safari, Parece que tudo isso é um comentário. - É como se isso fosse apenas um comentário no código. - Assim como eu tenho um comentário aqui que me diz que este é um cabeçalho e um comum aqui em cima que está - nos dizendo que o exercício específico estava em, - então ele vai apenas ignorar tudo isso agora. Por outro lado, se este for o Internet Explorer 8, na verdade, se a Internet tiver alguma versão do Internet Explorer, vai ler o “if condicional”, na verdade, se a Internet tiver alguma versão do Internet Explorer, vai ler o “if condicional”, ele vai entrar e eles vão dizer que isso é um comentário. Não, não é um comentário. - Na verdade, - há colchetes aqui, - e é assim que fazemos o Onley Internet Explorer ler esta seção particular da página. - Então ele vai dizer se menos que o Internet Explorer nove, - então ele vai executar este script. - Vai ligar ao ficheiro do script. E depois dizemos: “ Acabe se aqui para acabar com essa declaração condicional. - Tudo bem, - então realmente, - essas duas linhas de código este link para este CSS normalizado fora e eu estou ligando para este - arquivo JavaScript é tudo o que precisamos para fazer HTML cinco elementos funcionar e até mesmo o mais antigo, - a maioria navegadores antigos. 16. Elementos semânticos de HTML5: Então agora nossas páginas prontas, Podemos escrever estes html cinco tags semânticas e todos os navegadores estão indo para vê-los. Então o primeiro 1 que eu quero fazer é eu quero falar sobre o cabeçalho. Então mencionamos o cabeçalho vai no topo da página aqui. Você normalmente, embora não precise. Mas esta é uma tag que nós vamos cercar o conceito com, como, isso vai dizer cabeçalho aberto barra. Agora que cerquei esta seção de código, vou para a sala. Então eu vou destacar este código aqui e eu vou mostrar a vocês um atalho aqui. Então, se você realçar uma seção de código se você digitar a tecla tab, ele irá recuar essa seção inteira, toda para você. Você também pode usar o comando, uh, abrir colchete e fechar colchete para mover esse tipo no Mac. Ou você pode usar o suporte aberto de controle e fechar colchete nas janelas. Você também pode ir para cada linha e apenas pressionar a tecla tab, se quiser. Então, só para mostrar o ninho, eu gosto de inventar sempre que coloco alguns elementos dentro de outro só para mostrar a relação que ele está dentro deste outro. Ok, isso é um bom começo. Então nós apenas dissemos ao navegador que este h um e H dois e estes links são links de navegação que estes ar todos dentro da seção da cabeça. Vou em frente e ligar a palavra, então é tudo mais fácil de ver. Ok, esta é apenas a minha navegação embrulhando o “Tudo bem” deles. Então, hum, agora nós dissemos isso que este é o cabeçalho. Vejamos alguns outros elementos. Podemos entrar aqui. E podemos especificar que esses links são a principal navegação do site. Dizendo valete aqui e podemos adicionar um link de fechamento bem ali. E posso entrar aqui e endividado que a navegação está recuada. E agora temos a seção da cabeça e dentro da cabeça, eu tenho minha navegação principal. Então isso serve a alguns propósitos. É semanticamente dizer ao navegador e dispositivos que o ar. Explorando este conteúdo que esta seção específica da página é importante que este é o principal ar identificar para o conteúdo deste site. Então, os H dentro do cabeçalho terão a maior importância. Esses termos-chave que você colocou lá e porque ele não tem motores de busca, saiba que esta é a seção da página que eles podem encontrar links para outras páginas e, em seguida, pode ir e explorar o conteúdo de outras páginas. , Além disso,adicionalmente, ele realmente esteticamente ou fisicamente cria uma caixa. Então agora que temos essas caixas como Cabeçalho e Valete, é assim que eu sou capaz Teoh, Selecione o Valete e eu posso usar CSS para dizer o valete para ser uma cor de fundo verde. Mas então eu quero que o cabeçalho tenha uma cor de fundo de azul ou algo assim. Portanto, a maneira como podemos posicionar o conteúdo e estilizá-lo em caixas ou contêineres separados é usando esses elementos. Corte. Hum, vamos também olhar para outro elemento HTML chamado Grupo H. Então Grupo H é útil quando você tem mais de um título e eles são tipo de seus links juntos. Eles devem ser semanticamente parte da mesma mensagem ou ter o mesmo significado. Então, basicamente do jeito que você leria isso é que você leria um tênis Z H W. Tudo é como uma palavra. Mas se eu quiser que este texto seja maior e tenha mais importância. É o H w que a palavra sapatos? Posso colocá-lo em seu nível mais alto. Então esse cara está em cada um. Este é um H dois. No entanto semanticamente quando você lê isso, você lê É uma espécie de coisa. Sapatos CHW. Então grupo H diz a um navegador que este é um agrupamento de títulos. Certo, então temos o grupo de cabeçalho h com o nome da empresa, e então temos nossa navegação. Isso nos leva a todas as páginas. Ok, sobre isso é realmente fácil de detectar essas tags ar todos esses, você sabe, esses elementos ar exclusivo para que possamos localizá-los em qualquer lugar na página. Se você estiver rolando para cima e para baixo, você pode dizer, oh, hey, lá está o cabeçalho. Certo, vamos para a próxima seção. Esta chama-se secção de venda. Então esta é uma seção principal da página semanticamente tudo nesta página se relaciona com uma venda, então eu vou usar os elementos da seção que vai fazer uma caixa. Isso irá cercar este conteúdo com uma caixa e sugerir que é uma seção única da página assim. Então eu apenas recuei novamente destacando, e eu fiz. Ah comanda colchete fechado, a chave de colchete quadrado. São apenas duas teclas à direita da letra p no teclado. De novo e de novo, você também pode cercar e pressionar a tecla tab assim para movê-la. Tudo bem, , vamos olhar para outros elementos semânticos chamados figura para que possamos olhar para figura e figo. A figura da legenda é uma maneira de cercar algo e sugerir que é, ah, figura e figura informativa na página. Então vamos em frente e usar esta tag aqui chamada Figura e vamos descer aqui e vamos fechar isso e geralmente isso em torno de algum tipo de mídia, como se fosse um diagrama ou uma imagem de algo que se relaciona com o conteúdo abaixo. Podes marcar isto com a figura, está bem? E isso também adiciona uma pequena caixa em torno da imagem neste caso, em torno da imagem, para que pudéssemos estilizá-la de uma maneira específica, se quiséssemos. Outra coisa boa sobre isso é que este tem uma etiqueta de amigo que você pode colocar dentro dele. Que se chama legenda da figa assim. Assim, a legenda da figa permite adicionar uma legenda para a imagem abaixo e enfraquecer o estilo. Estes e semanticamente sugere que esta legenda está relacionada com a imagem dentro desta figura. Então eles vão juntos normalmente para legendas. Você colocou algo como, hum, o que está acontecendo na imagem? Detalhes explícitos sobre a imagem ou um título, Às vezes, um título e autor. um Não tenhoumautor específico do Tytler para colocar aqui. Eu só vou ir em frente e escrever que esta é uma, uh, uma imagem livre de direitos de www dot s xy dot h u.Então este é um site de fotos grátis que eu tenho esta imagem daqui para que você possa ver a estrutura aqui é figura, e então podemos ter uma imagem ou um vídeo ou algo dentro dela. E então nós temos uma legenda de figura para essa imagem, e então nós fechamos essa figura. Ok? Também podemos adicionar uma seção aqui ao canto do artista. Esta é outra parte separada da página, e eu acabei de colocar esses comentários aqui como espaços reservados porque nós não tínhamos anteriormente essas seções aqui, e eu acho que vou deixá-los no lugar também porque eles fazem isso realmente fácil de ver onde diferentes seções começaram. Fim. Então destaque todos esses caras e em amassado assim. Ok. E aqui dentro temos o vídeo que criamos há pouco. E se eu quisesse, também poderia ter uma figura por aqui. Ok? E dentro daqui, eu também poderia ter uma legenda para este Will usar legenda da figa como aquela legenda da barra da figa. Vamos ver. E isto é para o vídeo. E aqui diz que o artista é Larry Hale. Então eu realmente peguei isso do Ah, eu tenho esse vídeo do arquivo Dot Organiz's sob a atribuição Creative Commons. Licença. Então este vídeo é gratuito para usar e compartilhar. Obrigado, Larry, e quero ter a certeza de que lhe dou crédito. Então aqui na legenda da figura, eu posso dar-lhe crédito dizendo que esta é a música Blue Shoes e eu vou em frente e colocar um copyright aqui dizendo, Coloque o símbolo de copyright dizendo e copie. E então faremos essa copiadora. E pelo artista, que é Larry Hill. 2007 é, na verdade, quando ele copiadora neste e vamos adicionar uma quebra de linha como essa e eu vou ir em frente e apenas dizer que este é licenciado com a atribuição de licença 3.0 do criativo comum . O que isso significa é que eu simplesmente tenho que atribuir a ele que este é Hiss. Não posso afirmar que este é o meu próprio trabalho, então tenho que atribuí-lo com ele. Mas é grátis para mim compartilhar e usar. Obrigado, Larry. Grite o Larry por isso. Ok, então há a minha figura, , e a minha legenda aqui e o final da minha figura. E aqui está o meu título e parágrafo e isto está tudo dentro da minha secção. Esta é a seção do canto do artista que começa aqui e termina lá embaixo. Então agora eu tenho uma caixinha em torno dessa seção. Também posso adicionar uma seção à página de notícias. Essa é uma longa. Eu escrevi muito lá, e vamos fechar isso assim, e parece que também temos uma seção de detalhes, e essa seção de detalhes realmente tem. Está dividido em três partes menores. Hum, então eu tenho uma seção de links que são, hum , para Bem , não há nenhuma ligação para nenhum lugar. Agora eu só tenho Este é um lugar titular, mas esses links vão ligar para todos esses diferentes sites sociais, e isso vai estar na parte inferior da página logo antes do rodapé, que vai fazer em um momento. Também temos alguns links para outros sapatos relacionados. Talvez este ar, como companhias irmãs ou amigos desta empresa. Então nós temos alguns links lá, e nós também temos, tipo, o número de telefone e endereço, e coisas assim estarão na parte inferior de cada página. Então eu queria que essas coisas fossem, você sabe, isso é realmente o mesmo conteúdo. Estes eram todos os detalhes do site aqui, mas eu queria que esses Teoh estivessem esteticamente em caixas diferentes. Então, se você quiser tocar algo em uma caixa, mas não é, hum, não é tudo igual. Desculpe-me? Não são diferentes tipos de conteúdo. Então você realmente não precisa usar uma tag de seção. Então aqui eu posso colocar uma seção em torno de todas as três caixas menores. Então esta é uma seção sobre os detalhes do site e dentro desta seção estão três caixas menores e eu estou apenas usando a tag Div. Eles são muito para mostrar. Esta é uma caixa. Esta é outra caixa aqui. Então Div é uma tag que cria um contêiner. E não é uma tag semântica HTML cinco. Só vai me dar um jeito de estilizar esteticamente uma caixa em torno de cada uma dessas partes da seção de detalhes. Ok, hum, aqui em baixo. Por último, temos o rodapé, que tem seu próprio HTML cinco tags semânticas. Posso colocar isso aí. Isso é chamado de Rodapé, e podemos clicar tabulação para inventar esse conteúdo lá. Legal. Então agora todo o meu conteúdo é cercado com as cinco tags semânticas HTML apropriadas. Agora eu tenho pequenas caixas em cada seção, e isso vai torná-lo muito mais fácil quando chega a hora de começar a criar o layout da página e mover as coisas ao redor. Então estamos todos prontos para isso. Eu já fui em frente e adicionou essas tags para o resto das outras páginas para você, então você pode ver como eu incluí essas em outras páginas também. Ok, 17. metadados: - Então a última coisa que queremos fazer é bem rápido. - Nós só queremos adicionar algumas metatags adicionais, alguns metadados no topo da seção principal. - Então eu vou descer aqui. - Não importa onde você coloca isso, desde que eles estejam na seção da cabeça. E vamos adicionar outra meta tag aqui antes de usarmos meta também. - Diga ao navegador a formatação dos caracteres na página. - Então nós os definimos para UTF oito caracteres formatados. - E desta vez vamos dar algumas palavras-chave e uma descrição. - Então, para começar com vai dizer meta name é igual e vai dizer palavras-chave como essa. - E então vamos colocar um espaço e vamos adicionar outro atributo chamado Conteúdo como esse e - dentro do conteúdo, - vamos colocar uma lista separada por vírgula, - de termos relacionados a esta página. Isto vai ajudar um motor de busca a associar palavras ou termos específicos a esta página . - Isso pode ser diferente de página para página eso Você sabe, - uma página em que você pode ter essas palavras, - você sabe são palavras-chave e outra página - você pode ter palavras-chave completamente diferentes, então é bom ser preciso. - Toe qual conteúdo existe nessa página. - Então vamos dizer todos os termos que achamos que as pessoas podem digitar para encontrar esta página. - Então vamos dizer. - Sapatos, sandálias, chinelos. - Isso pode levar algum pensamento de sua parte para seus próprios projetos individuais. - Você vai ter que pensar sobre quais termos se encaixam. - Vamos ver, o que mais posso dizer? - Eu vou dizer Sneakers pé Onde? No caso de alguém digitar calçado, datilografar eles podem datilografarde forma diferente. - Talvez digitam assim. - Vamos dizer meias e talvez alguns materiais. Tipo, se escreverem sapatos de lona ou ... bem, digamos, sapatos de camurça. - Talvez estejam à procura de atacadores. - Hum, - vamos ver. - Então vamos dizer, - também coisas como armazém e atacado. - Então você tem que pensar sobre quais termos são importantes para o seu projeto. - Acho que é o suficiente lá. - Eu acho que você entendeu o ponto, - ok, - e então nós adicionaremos também uma descrição. - Então as palavras-chave, - como dissemos estas são úteis para ajudar os motores de busca a pegar em termos específicos e - associar esses termos a esta página. - Nós também podemos adicionar uma descrição que é feita dizendo conheceu um nome, - descrição e conteúdo é onde nós digitamos a descrição. - Então esta é a descrição que aparecerá quando as pessoas nos procurarem num motor de busca. - O motor de busca irá listar esta descrição abaixo do link quando aparecermos nos resultados. - Então vamos em frente e dizer alguma coisa. - Espero que nada muito brega. Mas eu estou inventando essas coisas na mosca tão bem dizer, você vai parar para os melhores negócios no calçado mais afiado de hoje. - Legal. - Ok, então há nossas meta palavras-chave e nossa meta descrição. - Tudo bem, é isso. Eu já adicionei este código para as outras páginas para você e ... agora as coisas. - Há coisas estavam começando a ficar bem, - sua própria trilha avançando para aprender CSS e também começar a aprender layout da página. - Então, obrigado por assistir. E o que você vai querer fazer agora é se sentir livre para passar para o próximo desafio de código, onde você estará adicionando seus próprios vídeos e tags semânticas em seu projeto de site. 18. Como estilizar o final de frente: - Oi. - Bem-vinda de volta. - Este é o Slides 2.2, - estilizando os fundamentos CSS front-end. - Agora, - em exercícios anteriores e palestras, - aprendemos a escrever código HTML que forneceu a estrutura eo conteúdo para nossas páginas web -. - Agora, - para o resto do curso, - vamos explorar CSS, - que então nos permitirá estilizar todo o conteúdo que criamos. - Então vamos discutir a sintaxe do CSS, - e depois, - vamos passar para um exercício onde vamos demonstrar todos os diferentes - seletores CSS que nos permitirão selecionar conteúdo na página e, assim, permitindo-nos - estilo. - Nós também vamos explorar diferentes valores de cor que podemos usar para dar cor a esses - elementos. - E também vamos discutir declarações de fundos que podemos usar para estilizar são tipografia. - CSS significa folhas de estilo em cascata. - Eles provavelmente nomearam isso porque CSS nos dá a capacidade de aplicar um estilo em várias páginas em um site. - Então nós temos um único local onde nós podemos tipo de estilo Cascada para baixo em várias outras - páginas. - CSS foi criado é uma solução melhor para estilizar elementos HTML no início. Era uma vez, usávamos HTML para estilizar html e era realmente um grande fardo e muito trabalho. - Eso CSS entra e nos dá novamente um único lugar. - Nós podemos ir para mudar todas as cores de todos os parágrafos no site em vez - ter que ir para cada parágrafo individual e mudar a cor por elemento. - Então é realmente uma grande economia de tempo. - É divertido, rápido e fácil. - Na minha opinião, - tem, - ah, - sintaxe única separada do HTML. - Então é uma linguagem completamente diferente do HTML. - Então você meio que tem que jogar todas as regras. - Aprendemos sobre como HTML tem escrito tem que tipo de sair pela janela quando você está - focando em CSS porque é sua própria linguagem única. - Existem três formatos distintos que você pode ver CSS aparência Onda. - Falaremos sobre cada um deles. - Este é o CSS em impostos e é bem simples. - Você pode ver que ele é composto deste seletor aqui neste caso, - a letra P, - que está selecionando todas as tags P ou todos os parágrafos que poderíamos dizer em nossas páginas HTML . Agora, a seguir o seletor temos um conjunto de chaves aqui, uma abertura e uma chave de fechamento como essa e dentro das chaves, é onde declaramos todos os estilos que afetarão o que estamos selecionando. - Então, dentro das chaves aqui vivem o que chamamos de declarações, - e você pode ter uma única ou várias declarações como muitos como você gosta para estilizar esse elemento selecionado em particular. - Então, neste caso, - você pode ver que estamos mudando a cor do texto de todos os parágrafos para preto, - e esta declaração particular é composta da cor da propriedade. - E então demos o valor a essa propriedade. - Preto e propriedades e valores são separados por dois pontos, - e eles sempre terminam em um ponto semi vírgula. - Agora o ponto-e-vírgula é importante porque é assim que dizemos ao navegador que foi feito - definindo um valor para esta propriedade em particular. - Então, se você tem ah, - Siris de declarações, - múltiplas declarações para este ah, - elemento de parágrafo, - então você vai querer ter certeza de que todos os fins dessas declarações terminam em um - ponto e vírgula. - Como eu mencionei anteriormente, - há três formatos CSS distintos e aqueles estão em linha, - interno ou externo para este curso, - nós vamos estar usando CSS externo em, - e isso vai nos dar o máximo vantagens e a menor quantidade de problemas e problemas - como estamos trabalhando em nosso site. - Então esta é realmente a melhor prática ou o método preferido. - Se você está construindo um site ou um aplicativo da Web, você vai querer estilizar seu conteúdo usando CSS externo. - Isso significa que há uma folha de estilo CSS externa separada ou um arquivo CSS separado que está - estilizando todas as outras páginas HTML. Isso é em contraste com esses outros formatos em linha e internos, quais vamos querer muito longe. Então você deve estar se perguntando se estamos recomendando não usar esses dois formatos, por que eu ensinaria para você? - Bem, - eu acho que você sabe, - você provavelmente vai acabar vendo esses outros formatos lá fora no mundo real, quando - você olhar outro código de site ou se você começar a trabalhar no site de outra pessoa para eles - eu acho que você sabe, - você provavelmente vai acabar vendo esses outros formatos lá fora no mundo real, quando - você olhar outro código de site ou se você começar a trabalhar no site de outra pessoa para eles você pode encontrar outro site usando um desses outros métodos de CSS. - Então eu acho que é importante que você entenda o que é e você entenda o que - as armadilhas são e usando esses outros formatos para que você possa escolher a solução correta - para construção de sites, - que é externa. - Este é um exemplo de CSS em linha. - Então, se você está olhando para alguma marcação HTML e você vê que há um atributo de estilo - dentro de um elemento específico dentro do valor para este atributo de estilo, - você pode escrever declarações CSS. - Neste caso, - nós escrevemos o estilo tracejado fonte propriedade e dando-lhe um valor de metálico. - E o que isso vai fazer é mudar o texto neste parágrafo e Onley - este parágrafo para um texto tálico ou itálico. - Então a principal desvantagem lá que você provavelmente pode imaginar, - é que se você adicionar este pequeno estilo tag todos os parágrafos que você queria ser um talento - isso poderia se somar muito rapidamente. - Talvez se você tiver um site maior com centenas de páginas e você mudar de idéia que você - não quer mais que esse texto seja um tallix, - seria necessário entrar em cada um desses diferentes centenas de elementos em seu site - layout e mudar isso de metal de volta ao normal. - Então a enorme desvantagem do mar interior avalia que só afeta o elemento que você está aplicando isso na linha CSS agora. - Um lugar que isso pode fazer sentido para usar é quando você está usando quando você está criando um HTML - newsletter. Mas esse é o único lugar onde você veria isso. - Onde seria uma boa ideia tê-lo neste formato? A próxima, vamos olhar para ele é chamado de CSS interno ou incorporado, e você pode ver isso aparecendo dentro da seção principal de uma página HTML. - CSS interno é composto do elemento de estilo aqui que tem o estilo de abertura e fechamento - tag, - e dentro dele, - você é livre para escrever seletores CSS e declarações. - Então isso é apenas, - ah, - cheio de declaração CSS aqui que está escrito dentro desta tag estilo de abertura e fechamento, - e isso pode ser internamente dentro de uma página HTML. - Agora, - a desvantagem disso é que isso só vai afetar parágrafos nesta única página. Então, seja qual for a página html, copiaste este código para a cabeça. - Isso afetaria todos os parágrafos dessa página. - Então o que realmente queremos, - no entanto, - é que queremos ser capazes, - você sabe, - mudar a cor de nossos parágrafos de um único local. Dessa forma, se tivermos centenas de páginas em nosso site, podemos dizer que todas as cores dos parágrafos serão lidas a partir de um local. E se mudarmos de ideia, temos um único local para voltar e dizer a todos os parágrafos para mudarem para azul. - Então, a fim de fazer isso, - precisamos CSS externo CSS é ah é realmente a melhor solução para sites e Web - aplicativos porque estamos criando um arquivo separado que é neste caso estilo dot CSS e - estamos ligando para esse arquivo na seção principal do nosso documento HTML. - Agora, - se fôssemos abrir esse arquivo e olhar dentro desse arquivo CSS de ponto de estilo, - seria algo parecido com isso onde estamos escrevendo um seletor e, em seguida, declarações para - estilo esse seletor. - Então aqui estamos contando todos os parágrafos. - Teoh, - você sabe todos os parágrafos site de largura e todas as diferentes páginas do nosso site para ter - a cor preta. - Então, se tivermos 100 páginas em nosso site, - cada uma dessas 100 páginas tem esse código de link no topo, - que diz ao navegador quando ele carrega que uma determinada página HTML para estar ciente ou para - referenciar os estilos CSS deste outro arquivo. - E ele vai para o arquivo e lê. - E ele vê algo assim que diz a todos esses parágrafos em todo o site para - ter a cor preta. - Então, isso é usado ligando um arquivo CSS externo para todas as páginas HTML que desejamos estilizar - e as vantagens. - Agora você tem um único local onde você pode fazer alterações. - Isso vai afetar elementos em todo o site. - Isso é um Sfar como eu vou para ir nos slides. - Para esta palestra, - sinta-se livre para rever o conjunto completo de slides no link PDF abaixo do vídeo, - e dessa forma você pode usar os slides restantes. - Você pode olhar sobre eles, - e você pode usá-los como uma revisão para todos os diferentes seletores cores e texto - formatação que irá usar no exercício. - Então vamos passar para o exercício agora, - e neste próximo exercício estaremos criando uma folha de estilo CSS e então vamos aprender - vários seletores que podemos usar para estilizar conteúdo diferente dentro de nossas páginas da Web. 19. Como configurar uma folha de estilo externo: - este é o exercício 2.2 fundamentos CSS. Eu já fiz o download de todo o código-fonte para este exercício, e eu o trouxe aqui em um texto cego para começar. - A primeira coisa que queremos fazer é criar um arquivo CSS externo - que podemos usar para estilizar todas as nossas outras páginas HTML. - Então vamos em frente e ir para o menu suspenso de arquivos e dizer novo arquivo. E mesmo que isto esteja em branco, vamos guardá-lo logo que o bastão dirá “salvar arquivo”. - E eu vou querer ter certeza que isso é colocado dentro da pasta CSS. - Então você quer ter certeza de que seu primeiro no, - hum o diretório de trabalho para este exercício, - que é 2.2 traço CSS fundamentos, - e então você quer ter certeza de que você vai dentro da pasta CSS lá e dentro do Pastas CSS onde todas as nossas folhas de estilo externas viverão e nós vamos em frente e - nomeie isso, - e eu vou chamar esse estilo de ponto CSS e clique em salvar. - Então, agora, se viermos aqui para a barra lateral do projeto. - Podemos ver que dentro da pasta CSS aqui temos nossas folhas de estilo no último exercício -, - dispostos a normalizar ponto CSS e que estava definindo todos os navegadores para o tamanho padrão do texto e - também estava fazendo html cinco elementos semânticos exibir corretamente e coisas assim. - Então este foi um código CSS pré-escrito que baixei do dedo do pé meio que nos deu um bom começo, e então vamos deixar este em paz. Nós nunca vamos mexer com os olhos normais, vamos escrever todos os nossos estilos personalizados aqui neste arquivo CSS de ponto de estilo aqui. - Ok, - então agora nós temos esta folha de estilo estilo CSS ponto no lugar. - A próxima coisa que queremos fazer é que queremos passar por cada uma das nossas páginas HTML e ter certeza de que dizemos o link do dedo do navegador de volta para esta folha de estilo. - Então vamos em frente e ir para a pasta raiz principal lá, - e eu vou apenas abrir a primeira página aqui, - que é chamado de catálogo dot html, - e eu quero ir para a seção principal desta página e eu vou rolar para baixo. - Na verdade, já criei um espaço para este 13 online aqui. - Então logo abaixo do meu link para o arquivo CSS ponto normalizado, - A próxima coisa que eu vou fazer é criar um link para minha folha de estilo. - Agora é a tag ah link como este link para arquivos externos como este e nós temos que - colocar dois atributos diferentes aqui. O 1º 1 que vou colocar chama-se RE L. Uma chance de relação. - E eu quero dizer que a relação é que é uma folha de estilo, - que este tipo de link é uma folha de estilo. - E então a próxima coisa que queremos fazer é dar-lhe o atributo, - h, - ref, - e que irá apontar para a localização de nossas folhas de estilo. - Então aqui estamos na página html do catálogo. - Eu quero dizer ao navegador para ir olhar dentro da pasta CSS para o arquivo chamado style dot - CSS Great. - E então podemos salvar isso. - Agora eu posso copiar e colar esta linha, - e então eu vou apenas ir em frente e adicionar esta linha de código a todas as páginas do site - que eu gostaria de ter ligado a esta folha de estilo - então eu vou apenas destacar isso e fazer um comando. - Veja para copiar seria um controle ver no Windows Command, - Veja no Mac. E então vamos para o próximo arquivo, que será contatado em HTML. - E eu vou fazer Comando V no Mac o Colar ou Control V no Windows para colar, - e nós vamos salvar e eu vou passar pela página de índice e colar e salvar, - e eu vou para a página de preços e eu vou colar e depois salvar o arquivo. - E por último, - temos a página html do ponto de venda, - e eu vou colar o link lá e salvar também. - Então agora todas as nossas páginas aqui têm esse link para a folha de estilo externa. - Então isso significa que agora eu posso começar a entrar nesta folha de estilo, - e eu posso começar a escrever código que vai estilizar e afetar todas essas páginas diferentes - a partir de um único local 20. Seletor de tipos: - Ok, ótimo. - Então nós apenas criamos uma folha de estilo externa aqui, - e agora podemos abrir esse arquivo estilo dot CSS e dentro dele Aqui nós podemos começar a aprender - a escrever algum código CSS. - A primeira coisa que eu quero te ensinar em CSS é escrever um comentário. - Então, se você olhar apenas da mesma forma que podemos criar comentários e HTML, - nós também podemos criar comentários em CSS como um meio de dar-nos uma pequena nota ou uma - mensagem no código e um comentário. CSS começa com a barra para a frente e depois o Starkey, que é a mudança no número oito. Então, este é um comentário, e você tem que terminar um comentário usando Star e Ford Slash. - Então é invertido do começo ao fim. - Então você tem barra estrela e, em seguida, comentários e CSS eles podem estar em uma única linha ou eles - também pode ser multi-linha. - Por exemplo, - eu poderia bater, - retornar e passar para a próxima linha. - Hum, - e eu vou apenas ir em frente e dizer, - por exemplo, - para que esses comentários possam abranger várias linhas é longo que você tem o início e o final - caracteres corretamente do que qualquer coisa pode ir entre aqui, - e o navegador irá ignorá-lo. - Ok, - hum, - vamos ver. - Então vamos escrever outro comentário para nos lembrar da sintaxe CSS que discutimos em - o conjunto anterior de Slides diz. - Você se lembra que CSS começa com um seletor, - e então isso é seguido por chaves. - E dentro dessas chaves, você é capaz de dar algumas declarações, que são feitas de uma propriedade em um valor. E se você quiser colocar várias propriedades para um seletor, você pode escrevê-las assim, e você pode realmente escrever quantas quiser. - Isso pode ser curto ou longo, desde que eles estejam interessados em colocar. - Vamos acabar com esse comentário. - Ok, - Então, - por exemplo, - vamos olhar para um seletor chamado de seletor de tipo. - Primeiro, vamos procurar um seletor de tipo. - Os seletores de tipo Eso usam o nome da tag para ir e encontrar esse elemento. - Então o que podemos fazer é, - digamos, - você sabe, - hipoteticamente, - nós queríamos ir e selecionar todos os parágrafos em nosso site. Podemos usar a letra P para sair e selecionar todas as tags P para que eu pudesse escrever um pouco de comentário nessa medida que isso seleciona , elementos P dentro da nossa página. Então vamos mudar o tamanho do fundo para cada um desses parágrafos. - Então eu posso dizer fonte traço tamanhos a propriedade e, em seguida, é um valor. - Vou dizer 14 pixels. - Em termos de tipografia de dimensionamento, - você pode usar pixels, - você pode usar pontos, - você pode usar porcentagens, - e você também pode usar o corte EMS. - Então pixels é um tamanho fixo 14 pixels é o tamanho em qualquer tela? E também temos sistema de pontos, com o qual você pode estar familiarizado de diferentes programas de processamento de texto. E também temos sistema de pontos, - No entanto, - eu gosto de tentar e evitar usar pontos. - E a razão é que, - hum, - por exemplo, - 12 pontos de tamanho no Microsoft Word pode não ser o mesmo que 12 pontos de tamanho e fogo Fox ou o - mesmo tamanho e safari. Então, Então, o tamanho de pontos para tipografia, infelizmente, é um pouco diferente, dependendo do aplicativo em que você está. É por isso que, com pixels, pelo menos você sabe exatamente o que está recebendo. Também temos porcento, o que é uma quantidade variável. - Então, - uh, - como, - essencialmente, - se eu colocar 100% do que se referindo a 100% do tamanho atual do texto. - Então é uma espécie de em relação ao tamanho atual do texto. - Neste caso, - 14 pixels. Sevocênão tivesse especificado o tamanho da tecnologia de tamanho de parágrafo, seriaherdar esse tamanho do navegador. você Sevocênão tivesse especificado o tamanho da tecnologia de tamanho de parágrafo, seria - Então, por padrão, - se você não especificar o tamanho do texto e de um navegador, - você já percebeu que o navegador apenas faz parágrafos um determinado tamanho e - torna os cabeçalhos um determinado tamanho. - Então 100% seria nesse caso, - comer, - você sabe, - seria equivalente ao que o navegador decidir ser o padrão. - Se dissesse 200%, o dobro, por isso tornaria o texto duas vezes maior do que normalmente é. - E, claro, - você sabe, - 50% seria metade do tamanho algo assim. - Ok, - nós também temos EMS e M é uma medida que sobra dos dias de tipografia, - e também é uma quantidade que é semelhante a porcentagem neste, - da maneira que é tipo de relativa à fonte atual. - tamanho, - por exemplo, - um M neste caso seria igual a 14 pixels. Se eu dissesse a eles, seria o equivalente a 28 pixels se eu já especificasse um tamanho de fonte aqui, seria o equivalente a 28 pixels se eu já especificasse um tamanho de fonte aqui, e se eu dissesse que você sabe 280,5 M ou 0,5 eles, isso seria o equivalente a sete pixels, e se eu dissesse que você sabe 280,5 M ou 0,5 eles, isso seria o equivalente a sete pixels, E novamente o mesmo que antes com o percentual. - Se eu não tiver, - você sabe, - especificado um tamanho que esta quantidade vai se referir a um m vai se referir a qualquer que o - tamanho padrão do texto do navegador é, - e então para M iria dobrar esse tamanho. - Ok, - então porcentagens e EMS são meio que relativos a qualquer tamanho que o texto é inicialmente, - e pontos e pixels realmente o alterarão para uma quantidade fixa. - Pontos é, - você sabe, - uma espécie de número que muda do navegador do navegador. Então pixels seriam nosso método preferido para fazer um tamanho fixo de texto. - Ok, - hum, - vamos realmente colocar em outra propriedade aqui. - Digamos, - além de mudar o tamanho, - eu também gostaria de mudar a altura da linha, - então eu vou em frente e dizer linha, - altura do traço e altura da linha é o espaçamento entre as linhas no parágrafo. - Então vamos procurar um EMS para isso. - Então um M neste caso seria igual a 14 pixels ou espaçamento de linha única. - 1.5 seria o equivalente a 1,5 espaçamento entre linhas. - E para M seria o equivalente a espaçamento de linha dupla, - que seria, - neste caso, - 28 pixels de distância de uma linha de texto para a outra. - Vamos em frente e guardá-lo e vamos verificar isto. - Vamos apenas ter certeza que isso está funcionando e nós contestamos para ter certeza de que nosso estilo dot CSS - página está ligado corretamente com todas as páginas vistas. - Vá em frente e salve aqui e vamos voltar para o navegador. - E vamos assistir este parágrafo aqui e ver se mudamos o espaçamento de linha no tamanho do texto - então eu vou em frente e pressione Atualizar, - e lá você pode ver que funcionou. - Este texto ficou menor. - Aparentemente, - o tamanho padrão com o qual eu estava trabalhando antes nos parágrafos era um pouco maior do que - 14 pixels, - e o espaçamento entre linhas também estava mais próximo. Então, Então talvez eu tenha decidido que isso é um pouco distante demais, então eu posso voltar aqui e mudar isso. - Eu posso ajustar isso para vontade, - digamos 1.5 eles. Tentaremos espaçamento de linha 1.5 e talvez eu queira fazer isso um pouco maior. Quero dizer, 16 pixels ou algo assim. Então vamos economizar e voltar para o Chrome e atualizar assim, e isso parece muito bom. - Isto é bastante legível. - Tem a altura da linha, - que é o espaçamento entre o fundo deste d e o fundo deste Você aqui que - parece muito bom. - 1,5 linhas e eu gosto do tamanho dos personagens para ele é bastante decente para ver quando retomado - para fora todo o caminho. - Ok, - Se você é Texas não está respondendo ou olhando o mesmo que está na minha tela, - você pode subir para ver no navegador, - e você pode verificar duas vezes para se certificar de que o texto está definido para o tamanho real porque os navegadores Você pode ajustar o tamanho da tela ampliando, diminuindo o zoom. tamanho da tela ampliando, diminuindo - Vamos nos certificar de que somos apenas um zero aqui. Tamanho real, em outras palavras, retomado todo o caminho. - Ok, bom. - Então vamos voltar aqui e vamos realmente experimentar criando, - hum, - outro. - Vamos realmente criar mais um seletor de tipo aqui. Então eu vou sair e criar uma chamada legenda da figa, e isso vai selecionar todos os elementos da legenda da figa. - Em outras palavras, - selecione todos os elementos de legenda figo como esse. Então, para legenda da figa, podemos explorar outras formas de ajustar o tipo. - Vejamos outra propriedade chamada fonte. Espere, e isso está usando o peso do fundo, e isso pode ser normal. Também pode ser muito ousado, e também pode ser definido como Boulder assim, que é o mais ousado. - Nós também temos uma série de números que variam de 100 2 900 que você pode usar para ajustar a - espessura ou o peso do texto e aqueles que entram em incrementos de 100. - Então, - por exemplo, - 100 seria o mais leve 200 seria ligeiramente adesivo 300 400 assim todo o caminho até - 900. Acredito que sim, neste caso, não queremos que o texto seja ousado. Na verdade, vamos usar o normal, que neste caso, é o padrão. - Então nós realmente não teríamos que especificar para este elemento em particular a menos que nós estamos mudando - para, - como, - negrito, ou algo assim. Mas primeiro, vamos olhar para ele, vamos olhar para ele, como tamanho normal. - Espere. - E então vamos também mudar o tamanho da fonte aqui, - que vimos no seletor anterior. - Então vamos dizer tamanho do traço da fonte, - e vamos defini-lo para 12 pixels. - Ok. - E, vamos ver, o que mais gostaríamos de fazer? vamos ver, - Vamos também definir linha. - A altura vai dizer altura deitada do traço. - E nós vamos definir esse cara para também dizer Mazza parágrafos vai dizer 1.5 AM para que eu possa especificar isso - também em pixels por cento, - ems ou pontos? - Uh, vamos ver. - Então, altura da linha. - Vamos também olhar para mudar a tipografia. Então vamos usar a família Font Dash assim e vamos definir esse cara para algo diferente, vamos dizer que queremos que seja Georgia. A maneira como encontrar família funciona é que você é livre para escolher fontes comuns. A maneira como encontrar família funciona é que você é livre para escolher fontes comuns. - Primeiro, - vamos olhar para uma solução que está usando fontes patrocinadoras seguras da Web que são comumente - encontrados nos computadores do usuário. - E então, - mais tarde, - vamos olhar para o uso de um fundo especializado da Web ou um fundo que as pessoas podem não ter - e vai fazer isso carregando-o, - carregando esse fundo da Web para que, mesmo que a pessoa não se divertem no computador deles , eles ainda poderão vê-lo. - Ele estará usando CSS três método face fonte para conseguir isso. Mas para começar, vamos usar uma fonte segura e a maioria das pessoas tem no computador. - Então, do jeito que isso funciona é que o navegador virá até aqui. E se eles tiverem essa fonte Georgia no computador, vai mudar o tipo para isso. Agora você pode estar se perguntando, , se eles não tiverem esse telefone no computador? Bem, se eles não têm, podemos colocar uma vírgula, e podemos especificar outras soluções de backup. - Normalmente, as pessoas escolhem 2 a 3 soluções de backup. - Então, - por exemplo, - digamos que eles não têm Georgia, - mas eles têm momentos. - Ou talvez tenham algo assim. - Times New Roman assim. Então, Então, como reserva podemos colocar o primeiro fundo que queremos e depois uma vírgula, e então podemos colocar outro fundo. Então, se ele tentar primeiro e ver se eles têm George, se eles não têm Georgia, então ele vai verificar se eles têm vezes New Roman. - Você deve ter notado que as vezes New Roman está entre aspas. - Às vezes você verá essas e aspas simples como esta, ou você pode vê-lo em aspas duplas do jeito que era inicialmente assim. - Sempre que você vê aspas simples ou duplas em CSS em torno de uma família de fontes como esta, - isso é porque há um espaço aqui no nome do arquivo. - Então, Georgia não tem este lugar este tipo de letra. Georgia não tem um espaço em nome da fonte, mas as vezes New Roman tem um espaço em nome do fundo. - Então sempre que você tem uma fonte que tem caracteres estranhos nele, - como símbolos, - pontos de exclamação ou, - você sabe, - talvez caracteres não latinos como caracteres chineses ou japoneses ou - como isso, - então sua melhor aposta a coisa mais segura a fazer é colocar uma citação em torno dele, - ou aspas simples ou duplas para cercá-lo. Então, neste caso, só temos aspas duplas, espaço, espaço novo, Roman. E porque este não tem nenhum caractere especializado, mas tem um espaço no nome do arquivo. - Então colocamos entre aspas assim. - E por último, - como uma solução de fullback, - irá apenas dizer ao navegador para usar qualquer Sarah Font genérico escrevendo a palavra serif lá. 21. Sistemas de cores: Certo, então vamos também definir a cor. - Então aqui está outra propriedade. - Se é útil saber, - é mudar a cor do texto, - você simplesmente usa a cor da propriedade. - Ok. E para este 1º 1 vamos definir para uma cor cinza para podermos dizer cinza assim, que é um nome de cor. - Então estes são os diferentes tipos de sistemas de cores que você pode usar. - Aqui você pode usar um dos 16 nomes de cores e sinta-se livre para consultar os slides para ver uma lista - desses 16 nomes de cores além dos nomes de cores. - Você também pode especificar cores decimais Hexi, - e você também pode especificar valores RGB. - E em CSS três, - é rgb A com a inclusão de transparência ou Alfa lá. - Ok, então poderíamos dizer cinza. - Nós também poderíamos usar um valor de cor decimal hexi que os valores de cor decimal Hexi usaram o eles - partiram com a hashtag ou o símbolo de libra assim. - Ok, - então começamos com o com o símbolo hashtag e depois disso, - nós vamos colocar em números e letras para que possamos usar o número zero a nove e - letras de um a F para representar uma gama de cores de milhares de cores disponíveis através - o sistema de cores Hexi Decimal. - Então, - por exemplo, - no sistema de cores inacessível, - o 1º 2 caracteres representa a cor vermelha. - Então os 2 primeiros pares de caracteres representam vermelho. - 00 não seria vermelho seria uma ausência de luz vermelha. - E, em seguida, os 2 caracteres representam verde. - E isso seria uma ausência de luz se eu colocar dois zeros para isso e a última cor - representa azul. - Então o último par é azul. - Então isto é vermelho, verde e azul. - Com estes disse zero. - Isso significa que há uma ausência de luz. Não há luz vermelha, verde ou azul, então isso é preto. - Esta é a cor preta. - O valor mais alto que posso colocar é uma letra F. - Então, se eu colocar seis EFS aqui assim, - isso seria, - um, - tanto vermelho, - como 100% lido 100% verde e 100% azul lá. - Então esta seria a cor branca. - Se eu tivesse, - hum, - 00ff 00 00 esta seria a cor verde. E se eu fizesse isso, esta seria a cor azul, e esta seria a cor vermelha. - Então eu também poderia escrever isso como depois 00 porque os primeiros 2 caracteres estão combinando FF 0000 Então - às vezes você vai ver hacks um decimal em abreviação assim. Se você só vê três personagens, é o que está acontecendo. - Então, - por exemplo, - se esses três caracteres fossem depois de zero F, - eu saberia que, na verdade, - esta é abreviação para F 00 ff. - Lá vamos nós. - Isso faz sentido? - Então nós podemos agrupar este 1º 2 em um par, - o segundo em um par nos últimos dois em um par, - então isso pode realmente ser encurtado para F zero f como Então, se você tem um número decimal hexi - que não corresponde em pares iguais, Por exemplo, acabei de inventar isto do topo da minha cabeça. - Eu nem sei exatamente qual é a cor, mas este é um exemplo do valor decimal Hexi que eu não posso usar abreviação. - Eu não posso simplificar isso em três personagens porque eu não tenho uma correspondência em todos os - personagens. Em outras palavras, isso seria incorreto porque há uma correspondência aqui. - Não tenho permissão para fazer isso e ter cinco caracteres. - A única vez que eu seria capaz de fazer isso é se eu tivesse um fósforo em cada um deles como aquele em cada um dos três. Este seria o DD 8 A. Este é um exemplo de hacks, um número decimal que eu poderia encurtar se quisesse. Este é um exemplo de hacks, - Você poderia encurtar assim. - Ok, - então nós vamos apenas adicionar um valor decimal hexi de 777 que é tipo de cinza escuro. Certo, Certo na verdade, isso é um pouco mais claro de cor cinza. - Acho que não devia dizer que está escuro. - Hum, - e então vamos em frente e vamos olhar para outra propriedade aqui. - Vamos criar uma propriedade chamada texto traço uma linha. - Então isso é útil. - Você pode definir texto para uma linha à esquerda dentro do elemento que eles estão contidos dentro. - E então você também pode configurá-lo para o centro, - o que centraria o texto nesse elemento. - E você também pode dizer certo, - que centralizaria o texto no elemento para o RCD. Isso empurraria o texto para a direita dentro do elemento, então sim, vamos realmente fazer isso. - Um vai dizer que a linha direita vai empurrar esse cara assim. - Ok. - E ... sim, isso vai bastar por enquanto. - Falaremos sobre a cor RGB daqui a pouco. - Voltaremos a essa. - Então vamos salvar isso e vamos voltar para o navegador aqui e atualizar. - E com certeza, - você pode ver aqui que embaixo desta imagem waas esta legenda figura e a legenda da figura - agora é uma fonte diferente. - Vê como é este? - Parece que esta é Helvetica. - Vou adivinhar. - E este aqui é Georgia e parece uma cor cinza agora em vez de uma cor preta . - E você também pode ver que era uma linha para a direita ali. - Ok, - vamos olhar para outro sistema de cores que é chamado RGB. - E em CSS três, - nós também podemos especificar 1/4 valor, - que é uma chance que para Alfa. - Ok, - então a maneira como o RGB funciona é que você tem um intervalo de números de 0 a 2 55 então zero seria - a ausência de luz. - Isso significa que não, - não. Neste caso, significa que não há vermelho para o primeiro número. - Significa sem verde para o segundo número e sem azul para o terceiro número. - E então o quarto valor aqui é um que significa 100% Alfa ou, - UM, - 100% de opacidade. - Se eu quisesse que esse texto fosse visto através, - eu poderia dizer que 0,5 seria 50% 0,2 seria 20% 0,75 seria 75% e um é igual a 100%. - Então essa transparência é um intervalo de zero, o que significa que é invisível, ou você não pode vê-la até um ou 100%. - Cuidado. - Você não quer fazer tipo invisível como este porque isso pode afetar seu motor de busca - otimização. - Às vezes, as pessoas tentam fazer alguns truques sorrateiros, como tornar seu tipo invisível em apenas colocar um monte de termos que irão focar motores de busca para encontrar sua página. No entanto, muitos motores de busca, se descobrirem que você está fazendo isso, vão penalizá-lo, e o Google desaprovará isso. - Está tudo bem. - Então, - por exemplo, - se eu disser 55 vírgula zero vírgula zero, - isso significa que é vermelho para 55 vermelho zero verde zero azul. Se eu fizesse tudo isso para 55 seria 100% luz vermelha, luz verde e luz azul, que é na verdade a cor branca. - Então para 55 para 55 para 55 é a cor branca 000 é a cor preta. E isso seria como a cor verde, porque é zero vermelho todo o caminho verde e todo o caminho azul. - Ok, então você deve estar se perguntando, - e se eu quiser fazer uma cor específica aqui? E eu não tenho certeza de como é esse valor de cor, comoos números equivalentes são para esse valor porque nós não pensamos como robôs. E eu não tenho certeza de como é esse valor de cor, como Quando penso na cor laranja como uma laranja sunburst, não sei que números colocar aqui para os números decimais ou os valores RGB. - Exatamente. Então, felizmente, temos algumas ferramentas à nossa disposição que podemos usar para conseguir isso. Tem um conta-gotas na loja de fotos que você pode usar. - Há também um conta-gotas em Gimp. Se esse é o software que você está usando para que você possa trazer uma imagem como esta, você pode abri-lo e você pode usar a ferramenta conta-gotas para pegar que eu possa demonstrar muito rapidamente na loja de fotos. E eu também posso demonstrar muito rápido e de novo, tudo bem. - E por que o carregamento de ar? Na verdade, vou mostrar a vocês que estão num computador Mac. - Posso mostrar-lhe como fazer isso usando um programa integrado gratuito no Mac chamado Cor Digital - Medidor. - Então, - uh, - vamos em frente e nós escondemos isso muito rápido e vamos para esta pequena lupa - vidro caído aqui em cima - e nós vamos procurar por um aplicativo chamado Digital Color Meter e Na verdade, já subi aqui. - Eu só empatei o digital, - e você pode ver aqui o hit principal é este aplicativo chamado Medidor de Cores Digital. Então, vou selecionar isso, e isso aparece uma pequena janela na sua tela. - Estou trabalhando no Snow Leopard. - Você pode ter uma versão mais recente do Mac OS. Você pode estar correndo em um leão, e se estiver correndo em um leão ou um leão da montanha, isso vai parecer um pouco diferente. - Mas é praticamente a mesma coisa. - Então, se eu quiser combinar esta cor, digamos que eu quero combinar esta cor cinza com uma cor específica . - Concordo nesta parede aqui atrás. - Talvez até uma cor bege como essa. - O que eu estou vendo lá são os valores hexadecimais e me mostrando que o valor vermelho deve ser G - é B nove e o último é um d. - Então, se eu quiser copiar esses valores, - Aiken dizer turno de comando, - veja? - E posso voltar para o meu código aqui. - Vamos esconder o jogo por um segundo. - Oi de novo. - Ok. - Para que eu possa voltar para o código. E para esse valor de cor, posso colar esse valor assim. - Então, se eu salvar isso e atualizar, - ele só me deu o valor decimal Hexi quando eu passava o mouse sobre aquela parte da imagem - que eu estava procurando por essa cor. - Então, se eu voltar aqui e me refrescar, você pode ver que este texto mudou aquele tipo de cor bege ish que eu tirei da parede aqui . - Ok, vamos tentar de novo. Mas desta vez, vamos ver os valores RGB. - Então vou voltar ao medidor de cores digital. - Perdi-o e ver se podemos trazê-lo de volta. - Lá estamos nós. - E vamos tentar como esta cor laranja aqui para que você possa ver agora que estou recebendo o valor hexadecimal de oito bits. E o que eu quero fazer é mudar para o valor real do RGB em versões mais antigas do Mac como “ Snow Leopard”. - Você vai ver que você pode clicar aqui e você pode mudar para o valor real. - Agora, - se você está em uma versão mais recente do Mac OS X como Tiger - você realmente vai querer vir até um menu suspenso aqui em cima. Então, sob a aplicação do medidor de cores digital, você pode vir até aqui e você pode realmente mudar. - Eu esqueço qual menu suspenso é sem ser capaz de vê-lo. - Mas você vai olhar através das preferências aqui em cima e você será capaz de encontrar o mesmo - menu. - E você pode mudar Teoh dizer valor real oito bits. - Então, se eu disser valor real RGB oito bits, - então eu tenho este sistema de cores, - que é de 0 a 2 55 em vez disso. Então, por exemplo, vamos pairar sobre esta laranja no sapato aqui, e eu vou dizer turno de comando . - E copiará esses números. E eu posso voltar aqui para o código, e posso acompanhar isso lá dentro. - Agora, - estes aqui são os valores RGB que eu preciso dizer que RGB realmente tinha isso escrito antes e eu - apaguei. - Hum, - e eu vou colocar parênteses em torno desta salsa rgb a e então vamos colocar uma vírgula entre cada - desses números aqui como este. - E precisamos se eu fizer o, uh se eu fizer apenas rgb como este, - isso é CSS para adicionar alguma transparência. - Eu poderia fazer RGB A e eu poderia especificar, - como 0,5 seria 50% de transparência. Eu só vou dizer um para 100% assim, e então nós vamos economizar e vamos voltar e atualizar. E você pode ver agora os anos de texto, aquela cor laranja de lá. - Então eu conta-gotas ar realmente útil. - Hum, - em Kim, - você tem uma turnê de colírio bem aqui. - Eu só vou apontar em cada aplicativo. - Esta é a ferramenta que eu solto aqui e gimp e você iria para o arquivo aberto e trazer sua imagem para cima . - E você pode eu cair de lá e na loja de fotos, - a ferramenta conta-gotas está localizada bem aqui. - Parece muito parecido. Está um pouco mais alto e os livros no painel, e parece assim. - Chama-se ferramenta Conta-gotas. - Você também pode acertar a letra. - A tecla I no seu teclado para selecioná-lo. - Ok, excelente. - Então, vou fechar isto. Faremos um pouco mais com o Photoshopped mais tarde. - Ok, então isso é ótimo. Agora sabemos que podemos usaraplicativos para clicar, aplicativos para clicar, e eu deixo cair em nossas imagens. - Se suas próprias janelas Há também alguns programas gratuitos que você pode baixar alguns pesquisa do Google - para conta-gotas ou conta-gotas de cor que há, - ah, - um punhado de programas que devem surgir que são gratuitos para a versão mais recente do Janelas também - bem. - Ok, - hum, - então isso são sistemas de cores. - E também aprendemos, - uh, - vamos ver, - aprendemos nomes de cores. - Aprendemos sobre cores decimais Hexi e abreviação Hexi Decimal. - Hum, - e nós também aprendemos valores RGB 22. Font de fonte: Vamos dar uma olhada na abreviação para especificar todas essas propriedades de fonte aqui, então eu vou realmente comentar isso e vou escrever isso de uma maneira simples ou mais curta . - Deixa-me mostrar-te o que quero dizer. - Então, - na verdade, - em CSS nós, se quisermos, - podemos escrever isso linha por linha. Acontece que para fontes há uma propriedade chamada fonte como esta. - E se você apenas dizer diversão, - isso permitirá que você especifique os valores de peso e estilo e tamanho e linha, - altura e fonte família tudo em uma única propriedade. - É importante que eles ocorram nesta ordem específica. Então, escrevi, escrevi propositalmente escrevi na mesma ordem para tentar te ajudar a lembrar. E a primeira coisa que você faria seria se você tivesse algum estilo de fonte ou peso da fonte. Você especificaria isso primeiro, para que pudéssemos dizer normal. - E então você coloca um espaço e o espaço entre esses valores é a maneira que o - navegador é capaz de ver que é o fim de um valor no início do próximo. Então é importante ter um espaço entre eles, para que você possa dizer que é uma fonte normal. - Espere, - podemos dizer que a fonte tem 12 pixels, - e podemos colocar uma barra para especificar a altura da linha, - que seria de 1,5 m. - Então a maneira como você leria isso é, - você diria, 12 pontos normais ou 12 pixels acima de 1,5 deles, então 12 pixels sobre isso 1,5 eles são, - hum, -é o tamanho acima da altura da linha. então 12 pixels sobre isso 1,5 eles são, - hum, - Então você coloca uma barra entre esses dois em vez de um espaço, e então vamos colocar um espaço de novo e então vamos especificar. - Clips irá especificar os fundos, - que são Geórgia e tempos New Roman. - Opa. - Eu tenho muitas citações lá. - Lá vamos nós, vou fazer uma vírgula. E a última chama-se Sarah, que carregará qualquer fonte genérica que o navegador confinasse. - Ok, vamos entrar e salvar isso, e acho que quero mudar o valor de volta para a minha cor cinza. Embora seja uma laranja ágil, acho que é um pouco vívida demais para uma legenda, então guardarei a parte de trás do 777 e lá vamos nós. - Está tudo de volta ao normal. - Ok, excelente. 23. Fontes na web: - Então esta é uma ótima maneira de carregar fontes que nossa Web diz fontes, fontes comuns e todos terão em seu computador. - No entanto, - e se eu quiser carregar uma multa do meu próprio computador? - Ou se eu quiser carregar uma multa especializada. - Então vamos olhar para um método chamado Importar para importar uma folha de estilo para alguns - fundos especializados do Google. - Ok, - e há todos os tipos de sites por aí que fornecem fontes da Web gratuitas. Vamos especificamente à biblioteca do Google. - Então vamos voltar para o nosso navegador e vamos abrir uma nova guia e nós vamos em frente e - digite google dot com barra fundos web old dot com slash fundos do tempo e você pode ver aqui - há, - ah, - lista maior. - Eles têm mais de 606 113 encontrar famílias, - e você pode clicar aqui para ajustar as configurações e tamanhos que você está procurando. Acontece que eu sei que há duas fontes específicas que eu quero usar, então vou procurá-las aqui em cima. Acontece que eu sei que há duas fontes específicas que eu quero usar, - Caso contrário, - você sabe, - normalmente eu passo página por página e eu tento encontrar estilos que parecem, - você sabe, - desejáveis para mim. - Vou procurar um chamado Vamos ver Elsie Swash Elsie Swash bonés. - Quero usar este aqui. - Ok, então isso é divertido que não é super provável que alguém tenha esse exato pensamento no computador deles. Então vamos pegar essa diversão e carregar do Google. - Hum, - há diferentes maneiras de fazer este ano. - Você pode adicioná-lo à sua coleção, - e então você pode ter uma sessão de estilo personalizado que você vinculou. - E na verdade, - no nosso caso, - o que eu vou fazer é ir a este link aqui que diz uso rápido e eu vou - clicar no link de uso rápido como esse, - certo? - E eles estão me dizendo aqui que há versões diferentes. - É normal e ultra ousado. - Neste caso. Só quero usar o peso normal de 400 da diversão, e então vamos rolar até aqui, e vejo que há três métodos que posso usar para inserir isso na minha vista. - Então, um método é chamado de padrão, - e isso está usando um link que colocamos na seção principal de todas as páginas HTML. Então esta é a etiqueta que vimos antes? - Da mesma forma que nos ligamos à nossa folha de estilo. - Na verdade, - uhm e outro método está usando algo chamado na importação que irá importar este arquivo - diretamente em nossas folhas de estilo atuais. - E há também uma solução JavaScript que você pode copiar e colar aqui, - que provavelmente você colocaria na seção principal de sua página HTML cortada ou vinculada a partir de - sua página HTML. JavaScript vai funcionar em navegadores mais antigos se as pessoas tiverem o JavaScript desligado, o que não sei por que o faria. JavaScript vai funcionar em navegadores mais antigos se as pessoas tiverem o JavaScript desligado, Mas algumas pessoas podem fazer isso por razões de segurança. - Então este não vai trabalhar no dedo do pé, Aziz. - Desde que eles tenham um navegador mais recente que suporta CSS três no método de importação, - nós podemos usar este em particular. Então eu vou usar essa solução, que é a tabela do meio chamada na importação. - E vamos copiar isto. - Vou destacar e dizer “Copy”. - E então eu vou deixar esta conta aberta e eu vou voltar atrás. - Ele vai voltar ao texto sublime aqui e vamos carregar isso no topo da nossa página , então eu vou fazer um comentário aqui que diz fundos da Web como esse. Então carregamos nossa diversão na web aqui, e eu vou colar, e podemos fazer isso um pouco menor. - Diminua o zoom para vermos o que isto parece aqui. - É uma garota muito comprida. - Muito bem, então colamos este U R L aqui, vamos voltar para o nosso navegador e vamos ver o uso para isso. A maneira como usamos isso é usar a família do traço da fonte, e nos referimos a esse fundo como bonés da Elsie Swash. E também têm uma queda de cursiva, que usará qualquer fonte cursiva que confinasse se não puder carregar esta por algum motivo. Então podemos copiar esta parte aqui, e voltarei ao meu código e posso ir até onde gostaria de usar isto. - Decidi que a minha figura legenda. Em vez de ser Georgia, quero usar um fundo especial. Vou destacar as famílias de fontes aqui e trocá-las para as tampas da Elsie Swash, que carregarão a partir daqui do Buehrle importado. - Digamos que eu queria pegar algumas outras fontes do Google Web fontes aqui. - Você também pode voltar e encontrar mais alguns aqui. - Tudo bem, então vamos em frente e vamos procurar outra fonte que eu queira usar. - E este chama-se Clicker Clicker Scripts. - Lá está ele. - O guião do clicker. - Estou usando essas fontes muito decorativas. - Tudo bem. E então vamos usar rápido, que é o link aqui. - E então eu vou rolar para baixo e clicar na aba de importação da importação, e vamos destacar o texto e voltaremos ao código e eu vou colar isso - sob o outro. - Então, há outra diversão. Este é o 1º 1 é Elsie Swash Caps, e a próxima diversão que estou ligando é chamado de script clicker. E então eu tenho que ter certeza de que eu me refiro a essa fonte com o nome correto, que é script clicker e vírgula cair para trás do cursivo. - Ok, - então de volta ao nosso código e vamos em frente e usar, - uh o quê? - Use um roteiro mais rápido para nossos H chegando aqui em um pouco. - Sim, - nós vamos em frente e segurar este aqui e vamos voltar mais tarde e nos divertir e - ok, 24. Seletor do curso: - então é um bom começo. - Aprendemos seletores de tipo seletores permite entrar e selecionar qualquer elemento em todos os - esses elementos em todo o site e estilizá-los de uma maneira particular. - Agora, - isso é tudo bem e bom quando queremos fazer com que tudo pareça igual se você tem um punhado de elementos que você gostaria de estilizar tudo o mesmo que sua melhor aposta é usar - algo chamado um seletor de classe. - Então, - os eleitores da classe, - os que vão, - você sabe, - você pode aplicar Teoh, - hum, - quantos elementos você quiser. - Então, se você tem um punhado de elementos e você quer que eles sejam estilizados de uma certa maneira, - você sabe, - talvez não todos os parágrafos, - mas apenas um parágrafo específico ou dois ou três parágrafos e o site que você gostaria de ser - um pouco diferente. - Você pode usar algo chamado seletor de classe. - Ok, - então, - os eleitores de classe, - eles têm um caractere especial definidor no início deles que permite que o navegador saiba - que este não é apenas um elemento normal. - Estamos olhando para sentar estilo. Estamos procurando um nome de classe específico, então começamos sempre com os eleitores da classe com o símbolo do período. - Então eu sempre tenho o primeiro ponto, e então eu vou dar a esta classe um nome específico. - Então cabe a mim nomeá-lo. E eu quero escolher um nome que faça sentido para mim mais tarde. Então vamos ver o uso para isso primeiro, e depois voltarei e nomeio-o. Então eu vou para a página do catálogo, e eu vou ir em frente e rolar para baixo. E se eu vir aqui para a linha 75 catálogo sobre HTML, vocês podem ver que não temos duas aqui chamadas Marcas em Destaque. - Hum, - e mais tarde, - eu vou colocar uma espécie de textura de madeira por trás de todos esses elementos. - E este texto vai estar em cima disso. - Será que a textura da madeira e eu gostaria que ela fosse branca. - Eu não gosto de ter a cor branca e todos os outros H dois vão ter a cor preta, então eu não posso simplesmente dizer h dois para este seletor porque isso faria toda a idade para - é branco. E neste caso, quero que todos os que usem sejam negros. - Mas este específico, digamos este e talvez em outras páginas também. - Eu quero fazer um pouco do H dois é branco. - Então a maneira que eu poderia fazer isso é eu posso atribuir uma classe específica para isso e há dois passos - para o processo. - Um passo é aplicar uma classe para o elemento usando o atributo classe para que eu possa ir em frente e - dizer que esta idade também tem uma classe de e eu vou chamá-lo de texto de leite assim. - Vou usar sublinhado e dizer que isto tem uma classe de texto de leite. - Então inventei completamente o nome da turma. Então eu inventei completamente o nome dessa classe em particular, decidi chamá-lo de texto de leite porque eu quero que todos esses textos sejam brancos, brancos leitosos. - Ok, - então agora que eu dei a este um nome de classe único aqui, - eu posso aplicar esta classe em quantos elementos eu quiser que eu quero ter a mesma cor branca para o texto deles começar com todos. - Basta aplicá-lo a este. - Mas você pode jogar às aulas várias vezes. - Você também pode aplicar várias classes também. - Por exemplo, - se eu tivesse outra classe aqui como eu quisesse adicionar uma classe chamada Shadow que vai adicionar uma - sombra ao elemento. - Eu posso colocar um espaço aqui e aplicar classe adicional nomeada como muitos nomes de classe que eu quiser - aqui seria, - como outra classe que eu poderia bem ali. - Então, colocando um espaço aqui, - você pode aplicar quantas classes quiser a um único elemento, - e você pode aplicar classes é muitas vezes nas páginas que você quer. - Eu posso ir em frente e copiar esta classe de texto de leite para tantos outros elementos diferentes quanto eu - ver melhor. - Então agora que eu tenho rotulado isso com uma classe no HTML Aiken saltar de volta para o CSS. - E agora eu posso segmentar essa classe usando o símbolo de ponto e digitando o nome da classe, que é texto de leite. - E isso é sensível ao caso. Podes inventar o nome da maneira que quiseres, mas vais querer usar apenas letras e números. E é sensível a maiúsculas e minúsculas, e você não quer usar o espaço entre o nome. - Hum, se você quiser indicar um espaço você pode usar hífens ou sublinhados como esse. Ok, então para o meu texto de leite, vamos em frente e definir esse cara para ter a família de fontes que acabamos de carregar aqui, que é chamado de script clicker. Então vamos em frente e dizer “Família Font Dash” e podemos pegar o código para fazer isso funcionar, que é aqui. - Passo para o seu chamado script clicker cursivo. E na verdade, já devíamos ter copiado isso. - Eu deveria ser capaz de acompanhar isso bem ali. - Ok? E além da família de fontes, eu também quero mudar a cor do texto para ser branco assim. Então, para o branco, tenho algumas opções. - Eu posso escrever a palavra branco. - Eu posso usar o equivalente decimal Hexi, - que é s FF, - ou eu posso usar os valores RGB 2 55 vírgula 2 55 comum a 55 ou os valores RGB A para 55 para 55 1 - assim. Então, neste caso, usarei o nome da cor branca. - Tudo bem. - E vamos também adicionar algo chamado sombra de texto. - Então, no CSS três, - nós também podemos adicionar sombras do nosso texto, - o que é um tipo de efeito agradável. - E isso aceita quatro valores que tenho que colocar aqui. - Este primeiro valor aqui é o deslocamento horizontal. Então isso vai, Teoh, empurre a sombra três pixels para a direita. Se eu disser negativo, empurraria a sombra três pixels para a esquerda. Neste caso, não quero que a sombra se mova horizontalmente, então vou dizer zero, e então o próximo valor é o deslocamento vertical. Então eu queria ir para os pixels para baixo da frente, e o terceiro valor que colocamos aqui é chamado de Raio de Desfoque. - Então Blue Radius é saúde. Quantos pixels fora a sombra vai borrar ou suavizar se você disser que zero seria uma sombra muito afiada se você disser 10 pixels, que vai ser muito suave e suave à medida que desaparecer, vamos em frente e encontrar um meio feliz aqui. de apenas três pixels. - E por último, - queremos especificar uma cor. - Então, se eu quiser que isso seja preto, - Eu poderia usar o valor decimal Hexi 000 será o equivalente a cores pretas lá. Certo, vamos continuar e salvar isso, certo? - E vamos testar isso. - Eu fiz um cofre e eu posso voltar para o meu navegador e nós podemos. Vejamos, isso estava na página do catálogo. - Vá até a página do catálogo e role para baixo. - Veja se vê este aqui e vai acertar. - Refresque. - Legal. Então isso está sob marcas futuras, e parece bem pequeno. Acho que vamos fazer isso um pouco maior, mas você pode ver que é branco agora que tem são diversão especializada na Web, e tem uma sombra. 25. Seletor de ID: - Então a próxima coisa que queremos fazer é aprender sobre outro tipo de seletor. - Então sabemos que os seletores de classe nos permitem marcar certos elementos com um nome de classe específico - e podemos aplicar isso a tantos elementos quanto quisermos em uma única página. - Nós também podemos aplicar várias classes para o mesmo elemento, se quisermos. - Agora há outro tipo de seletor chamado um seletor I D e seletores de idéias ar um pouco - diferente em que você só pode aplicar, - um, - um Eu d por página. - Em vez disso, - você poderia dizer, - hum, - nós podemos aplicar a Onley um elemento sua página. Então a maneira como você pode se lembrar que as aulas podem ser aplicadas a várias coisas e eu tenhoa palavra que eu d, que você pode pensar significa uma identidade única. Então a maneira como você pode se lembrar que as aulas podem ser aplicadas a várias coisas e eu tenho a palavra que eu d, - Então eu tenho uma identidade única. - Eles só podem se aplicar a uma coisa por página. - Então, muitas vezes quando estamos construindo sites, - teremos uma necessidade de aplicar classes usando o símbolo de período e, em seguida, marcando uma classe - atributo aqui, - dando-lhe o mesmo nome de classe. - Hum, - se você quiser, - você sabe, - vários elementos estilizados dentro de uma página. - Mas também há muitas vezes em que temos um elemento único que realmente serve apenas um - propósito. - Então, - por exemplo, - se tivermos, - como uma barra de mídia social ou uma caixa e a página que é única e há apenas uma delas - por página, - então é melhor usarmos um I. - por exemplo, - se tivermos, - como uma barra de mídia social ou uma caixa e a página que é única e há apenas uma delas - por página,- então é melhor usarmos um I. - Eu - D. - S tem mais força, - mais autoridade. Se você estava usando estilos anteriores, como se você tivesse estilizado uma cor usando uma classe, e então você usou um i d para definir outra cor. O I D tem mais autoridade do que uma classe, então é mais específico porque se refere a um único elemento na página. - Então, - por exemplo, - vamos em frente e criar ah caixa e dar-lhe um I. - D. - Vamos para a página html índice ponto e eu vou rolar para baixo. E aqui temos o cabeçalho e coloquei em algum lugar mais comentários no código desde o último exercício porque eu queria último exercício porque eu queriamostrar que vamos dividir esse cabeçalho em duas seções para caixas menores. Aqui está o meu cabeçalho de abertura na minha etiqueta de cabeçalho de fechamento. Agora dentro desse cabeçalho, você vai se lembrar antes de termos o título, , que é o nome da empresa aqui. - Isso é e isso está aninhado dentro de um grupo H. Então eu vou tipo de estilo isso em,ah, ah, um pequeno logotipo de aparência chique. - E decidi que quero ter isto na sua própria caixa. - Eu quero ter o logotipo em uma caixa e eu vou estilizar a navegação em uma caixa separada. - Então, a fim de fazer isso, - vamos cercar isso com uma tag div como esta vai dizer, - def, - e você vai se lembrar do exercício anterior que devore d I V é a maneira que nós criamos uma - pequena caixa. Isto é esteticamente criar uma caixa nesta área, e vou fazer a mesma coisa aqui em baixo. - Queremos que este também esteja em uma caixa separada assim. - Então vou colocar um pouco de roupa aqui mãos. - Vamos nos certificar de que esse conteúdo irá destacar e pressionar a tecla tab para inventar tudo isso. Certo, então eu tenho este h um e h dois está em uma caixa e a navegação está em outra caixa. Agora, se eu gostaria de marcar isso se este é um elemento único tem uma identidade única na página, então eu posso marcar isso com um I. - D específico tão parecido com a forma como criamos este atributo de classe. - Você também pode criar uma idéia tributo. - Então poderíamos dizer, - por exemplo, - fez e podemos dar-lhe um I D igual ao logotipo. - Então este vai ser um painel de logotipo ou como um comprado uma caixa eventualmente vai estilizá-lo para ser uma - caixa no topo da página que vai através da tela e tem o nosso logotipo dentro dele. - E este aqui em baixo chama-se Bar Valete. Então, se eu quiser, posso dar uma ideia única a este. Bem, digamos que eu seja igual ao bar Dav como aquele cheque e nós vamos voltar e em ah e estilo este - um pouco mais tarde. - Primeiro, - vamos olhar para estilizar este. - Então isso nós demos uma identidade única de logotipo. Já que demos a isto uma ideia do logótipo, agora estou proibido de dar qualquer outro elemento na página. - O mesmo eu d. - Então mais uma vez com classes você pode aplicar esta classe a tantos elementos como você - como na página, - enquanto que com um I d como I D é igual logotipo, - só podemos aplicar esta uma vez por página. - Então eu fui em frente e adicionei isso a todo o resto das páginas do site para que possamos ir - de volta para o CSS agora, - e nós podemos segmentar que i d. - E apenas da mesma forma que as classes têm um caractere de identificação único no - como período para indicar que esta é uma classe de texto de leite. Eu DS também tem um caractere de identificação único no início, e esse é o símbolo de libra ou hash tag ou alguns chamam de sinal de número. - E isso é Ah, - você pode criar isso usando o shift no número três vai criar isso e então nós vamos apenas - dizer o nome do I D. - Ok, - então apenas para fazer uma revisão rápida novamente, - se nós tentando selecionar todos os elementos, - podemos usar um seletor de tipo, apenas colocando o nome da tag como parágrafo ou ajuste. - Legenda. Se estamos tentando selecionar, sabe, um grupo de elementos, talvez tenhamos espalhado um estilo em vários elementos de uma página, como tornar o texto leitoso. - Então podemos criar uma classe usando o símbolo de ponto aqui na frente do nome da classe. o Usamososímbolo da libra se quisermos aplicar a um elemento único na página. - Ok, - então aqui, - dentro do logotipo, - vamos em frente e bem - vamos escrever um comentário aqui para estes dois. Esqueci-me de escrever que este seleciona elementos com uma classe igual a texto de leite, que tem um“ i” único. elementos com uma classe igual a texto de leite , que tem um“ i” único. “ Singular. - Apenas um único elemento como dizer esse elemento. - É como o elemento com e eu d igual ao logotipo assim. - Então, no código HTML, - nós adicionamos, - I d igual logotipo dedo um de nossos dibs. - Você pode adicionar idéias a qualquer elemento, - a propósito, - você poderia colocar uma idéia em um parágrafo ou em uma lista ordenada, - ou um item de lista ou uma imagem, - o que você quiser - mas apenas uma por página que é importante. - Você vai realmente obter um ar de validação se você tentou ter um 92 várias coisas na mesma página. Então, chegamos aqui e vamos dar a esse cara uma cor de fundo e aprenderemos muito mais sobre estética de caixas e como estilizar caixas um pouco mais tarde. Mas só para vermos que Div se lembra, criamos uma div aqui com uma idéia de logotipo que está em torno dessas faixas etárias, que envolve o H um e o H dois. - Se quiséssemos dar esta caixa de cor, - por exemplo, - podemos usar o fundo da propriedade e vamos em frente e dizer fundos. - Vamos dar-lhe uma cor azul claro. Usar Aqua Aqua é um nome de cor que você pode usar para azul claro, então vamos guardar isso. Então, se voltarmos ao código aqui e atualizarmos, você pode ver que criamos uma barra na tela com. - Na verdade, é uma div com uma idéia de logotipo e seu torno deste conteúdo. - Ok, - e nós vamos voltar um pouco mais tarde e mudar de estilo é diferente. 26. Seletor de Descendant: - Vamos olhar para outro tipo de seletor chamado um seletor descendente. - Os seletores do Senado nos permitem entrar no Elemento Aparente e selecionar todos os seus filhos ou todos os seus descendentes, em outras palavras. - Então, - por exemplo, - se nós economizarmos logotipo libra e então nós colocamos um espaço após a palavra logotipo e então nós dizemos H um. - O que isso está fazendo é porque há um espaço aqui. Entre este seletor e aquele seletor, é basicamente bom selecionar em Lee as páginas dentro dos elementos com o i D igual - logotipo do dedo do pé. - Então, - em outras palavras, - se formos o navegador, - poderíamos ler isso da seguinte forma. - Então, a partir do navegador, - eu diria, - Hum OK, - ir e encontrar um elemento único com a idéia de logotipo e, em seguida, ir dentro dele e estilo - todo o H. - Então, - realmente, - este é apenas o estilo H aqueles se acontecer de estar dentro do recipiente pai chamado logotipo - - Então é aqui que o ninho entra em jogo. - Este H está aninhado. - É um descendente ou um filho deste elemento pai chamado logo. - Então este é um descendente de fez com a idéia de logotipo e talvez eu tenha outros H - em outro lugar na página e eu não quero que aqueles H para ser estilizado. - Digamos que eu só queria estilizar este h de uma maneira específica. - Eu poderia usar uma aula ou eu poderia jogar um i d neste h. Mas já tenho uma identificação para este contentor. E se eu tivesse múltiplos, cada um está aqui. Eu poderia então usar um seletor descendente para dizer estilo que cada um deles, mas apenas se eles aparecerem dentro de outro elemento. - Então os seletores descendentes, - Um realmente útil para isso novamente - estamos dizendo, - Ei, - navegador ir e encontrar um elemento com uma idéia única de logotipo e, em seguida, espaço. - O espaço aqui batendo barra de espaço indica que é um seletor descendente e estamos dizendo - vá para dentro do logotipo e agora selecione todos os H. - Está bem. E o que vamos fazer é mudar a família de fontes de todos esses H aqui, e vamos mudá-lo para script clicker, que é o meu fundo especializado na web. - Eu baixei assim. - Está bem. - E se eu quisesse selecionar o H dois especificamente dentro do seu. Nem todos os H dois estão na página inteira, mas no Lee os 2 anos se estiverem dentro da div com a ideia de logotipo. Nem todos os H dois estão na página inteira, - Então este aqui é o mesmo. - Este só vai selecionar h dois se eles estão dentro de um elemento com a idéia de logotipo. Então, para estes dois também fazem a família de fontes e este eu vou fazer o outro, uh, vamos ver o que é, uh, - I c swash cap espaço. - É muito importante soletrarmos isso corretamente e é um recuo. - Usará cursivo se precisarmos. - Ok, - Então, - seletores descendentes, - eles vão e eles estilizam algo que está dentro de outro elemento pai. Em outras palavras, Hum é descendente deste pai. - Então usamos a barra de espaço entre indicar que a relação que estava estilizando isso se estiver - dentro disso. - Então vamos entrar e salvar isso, e então vamos voltar para o nosso navegador e vamos atualizar, e isso mudou essas fontes aqui. - Então não está afetando. Isto não é H dois, e este é um H dois aqui, e não está afetando os outros H dois no resto da página. - Só está afetando este segundo porque está dentro deste Div com uma idéia de logotipo. - Ok, ótimo. - Vamos ver outra situação. - Nós temos todas essas seções na página, - e se eu quiser dizer que eu quero estilizar todos os links que ar dentro de todas as seções -, - Eu posso fazer isso dizendo seção espaço A. - Eu estou criando um descendente que diz apenas selecionar AIDS, - você sabe, - um tags que são os descendentes da seção. - Então isso é literalmente sobre Lee indo para o estilo de um link. - Se está dentro de uma seção, - vejamos, - este não está dentro do Header. - Veja se encontramos um aqui, por exemplo. - Bem, aqui está uma. - Este é um macho para ligar. - Então aqui está uma seção e aqui temos ela diz e-mail e há um link âncora aqui. - Então este, - este imposto de ligação realmente se tornaria estilizado então. Certo, então o que vamos fazer por esses caras é dar uma cor. - Vamos dar-lhe uma grande cor como essa usando valores decimais Hexi e links por padrão têm - um subjacente E se quisermos remover isso, - podemos definir o deck a decoração do texto como nenhum. - Você também pode definir a decoração do texto. - Teoh subjacente você também pode fazer overline assim e vira overline E você também pode fazer - linha através do qual parece que neste caso queremos dio eu vou deixá-lo Sublinhado - está bem, - que é na verdade o padrão. - Mas só para demonstrar com esta propriedade em particular parece lá. Ok, então se eu salvar isso, e eu voltar e comer fresco normalmente por links padrão ou azul, mas eu disse para ser uma cor cinza, vamos voltar para o navegador e nós vamos descer aqui e irá atualizar e você pode ver - estes não são mais azul lá agora cor cinza, - como é esses links e o link de e-mail aqui na parte inferior das páginas. - Bem, - muito legal 27. Seletor de Psuedo: - em seguida, - vamos dar uma olhada em pseudo-seletores ou às vezes referidos como seletores de pseudo-classe. - Agora pseudo seletores são usados muitas vezes para estilizar um elemento baseado em sua relação - entre outros elementos. - Ou, - no caso deste exemplo, - vamos estilizar um elemento baseado em um estado de evento. - Então, é muito comum estilizar links. - Hum, - e vimos antes que se usarmos este seletor de tipo para A, - ele entrará, - selecione todos os links de âncora na página e estilizá-los que nós estilizamos alguns aqui nas seções para ter ah, - grande cor e ser sublinhado. - OK, - mas e se quisermos mudar o estilo de um link quando o mouse passar sobre ele? - Ou se quisermos mudar o estilo do link quando já tiver sido clicado? Então, para fazer isso, temos que usar alguns pseudo seletores para que os pseudoseletores identifiquem que o ar é o símbolo dos dois pontos. - Então primeiro você começa com um elemento, - e isso pode ser qualquer elemento neste caso, - estavam interessados em criar links durante um determinado estado de evento. Então vamos usar dois pontos, e então vamos digitar o nome específico do estado do evento que estamos tentando atingir. - Então, uma ligação de cólon? O que ele faz é selecionar links, , durante seu estado padrão. - É quando estão intocados. Então, se eu visitar uma página e nunca interagi com o link antes, controlará esse estilo. - Então vamos dizer que queremos torná-los negros. - Bem, - Seo, - vamos fazer os links cor preta quando visitamos a página e ah bem, - diga-lhe para remover a decoração do texto para que não haja sublinhado sob os links. - Vai ficar texto decoração nenhum. - Ok, vamos dar uma olhada em outro evento. - Estado para links chamados Visitado. - Agora, dois pontos visitou bem selecionar e estilo links que já clicaram ou visitaram. - Em outras palavras, - acha que já visitamos no navegador. - Então, - por exemplo, - às vezes para indicar que alguém já clicou no link, - você pode mudar a cor do link como eu poderia tornar o link cinza ou algo assim -. - E, - um, - qualquer tipo de decoração de texto ou informação como essa vai ser herdada do - seletor anterior. - Então, já que eu disse decoração de texto nenhum, - este também será nenhum. - Hum, - também não terá qualquer subjacente sob. Não terá decoração, mas mudarei a cor de preto para cinza. - Aqui, - esta é uma libra cinza média C C C. - Ok, - vamos dar uma olhada em outro estado de ligação. Este é o favorito de todos, que é chamado de pairar assim, o que você provavelmente pode imaginar. Este irá selecionar links durante o mouse. - Então isso é chamado, - como no mouse sobre isso. - Ok, então este é divertido. - Pode fazer o que quiser. - Você pode mudar a cor. - Pode ficar selvagem. - Hum, - você sabe, - talvez o que vamos fazer é manter a cor da mesma forma. Talvez as cores pretas em pairar. - E talvez o que vamos fazer é apenas adicionar um subjacente aqui irá para decoração de texto - e defini-la para sublinhar assim. Dessa forma, quando normalmente não clicamos em um link, normalmente não clicamos em um link, nãohá decoração de texto, e quando passamos o mouse, uma pequena linha aparece embaixo dela há decoração de texto, e quando passamos o mouse, assim. - Ok. E sempre que você especificar os links, você deve fazê-lo nesta ordem, para que, hum, os links abaixo possam herdar características dos estados de link acima. - Ok, - hum, - vamos em frente e criar outro. Este será o nosso último estado de evento, que é conhecido como ativo. E este aqui, você realmente não vê este com tanta frequência, mas este seleciona links, você realmente não vê este com tanta frequência, mas este seleciona links, enquanto o botão do mouse está pressionado ou quando você clica neles. - Então isso é literalmente enquanto você tem o botão do mouse para baixo. Assim que você clicar e soltar o botão do mouse, não verá mais que isso desapareça. - Então, para ver isso claramente, você realmente tem que clicar e segurar o botão do mouse. - Então é só uma fração de segundo. - Normalmente vemos este evento em particular aqui. Então mude a cor para vermelho só para tornar isso óbvio, podemos ir em frente e salvar. - Ok, - então este estilo links baseado em seus em vários estados eventos. - Então o que queremos fazer é mudar isso um pouco para que possamos usar esses estilos para - links de estilo dentro de uma parte específica da página, - porque muitas vezes você não está interessado tanto em criar links em todas as páginas -. - O mesmo. - Mas normalmente, - você sabe, - você tem links em uma determinada parte da página que você gostaria de estilizar de forma diferente. - Então talvez, - você sabe, - links durante o interior principal da barra de navegação principal têm um estilo particular e então - talvez links para baixo em seu corpo, - copiar, - ter outro estilo. - E então talvez, - você sabe, - links na parte inferior da página têm um estilo diferente. Então, na minha página particular aqui, vou ter alguns links que vão ser espalhados entre esta cópia normal do corpo. E também tem links como em uma barra lateral como marcas de topo e um arquivo de sapatos, etc. E também tem links como em uma barra lateral como marcas de topo e um arquivo de sapatos , - E acho que vou estilizar esses links no topo aqui no meu NAB são completamente diferentes. Eles vão ser mais proeminentes, texto maior, e eu vou torná-los como botões no topo da página. E se eu descer aqui na parte inferior da página, temos uma série de links que estão em uma seção por conta própria. - Esta é a seção de detalhes pouco antes do rodapé na parte inferior da página. - E eu gostaria de definir esses links para serem estilizados de forma diferente dos links aqui em cima que o ar - dentro das seções. - Então, o que aprendemos antes? - Isso vai ajudar-nos. Bem, antes de usarmos um I.D. I.D. em um dos dibs. - E então usamos algo chamado de seletor descendente colocando um espaço aqui foram capazes de - estilizar todos os H, - mas apenas quando eles estão dentro deste elemento, - ou todos os dois. - Só quando eles estão dentro deste elemento com a idéia de logotipo para que possa ser usado aqui também. Então, se eu quiser estilizar links em diferentes partes das páginas, eu tenho algumas opções. - Eu posso aplicar classes para links em certas áreas e especificar que um link com uma determinada classe - tem um certo estilo. - Hum, - ou o que é ainda mais fácil é que eu posso usar um seletor descendente, - então vamos em frente e voltar para a página de índice - e vamos rolar para a seção chamada Detalhes deve estar na parte inferior da página. Se você está no topo da página, eu vou te mostrar um truque. - Eu volto para cima. - Então digamos que você está no topo e você gostaria de saltar muito rapidamente para o final da página. - Se você é atingido o comando ea seta para baixo no Mac, - é o comando seta para baixo e no Windows, - é controlado seta para baixo. Vamos pular você até o final da página assim, e então você pode rolar para cima. - Este é um pouco longe demais. Aqui está a seção de detalhes do final e, em seguida , eu quero rolar o dedo acima dos detalhes e esta seção aqui. Eu gostaria de dar a esse cara uma identidade única, então vou dar a essa seção da página. - E vou chamar de detalhes, está bem? - E então eu vou em frente e salvar isso. - E eu já adicionei este código para você no resto das páginas para que possamos apenas voltar - aqui para definir o estilo CSS e enfraquecer. - Transforme estes em seletores descendentes dizendo detalhes libra espaço um carvão e link. - Assim, em Lee links durante o seu estado normal será estilizado se eles estiverem dentro da seção de detalhes. - Certo. - Então eu posso adicionar isso a este aqui. - Dois detalhes. - Espaço assim. - Então isso vai dizer, “ Ei, navegador”. - Vá e encontre algo com uma ideia única de detalhes. - Vá para dentro e estilize. - Os links, - sempre que foram visitados já estão clicados. - E isso diz, - Ei, - navegador, - vá para dentro da seção com a idéia de detalhes e encontre alguns links. E quando as pessoas pairam sobre elas, estilize-as desta forma. E, por último, temos este que está em estado activo. - Então só vai estilizar links durante o seu estado ativo se estiver dentro da seção - com a idéia de detalhes. - Ok, incrível. Então vamos sair e salvar isso e voltar para o navegador e vamos fazer uma atualização. Então vamos sair e salvar isso e voltar para o navegador e vamos fazer uma - E estas ligações aqui estão dentro das secções. - Estas estão dentro das seções sem nome. Eles não têm um I.D. Então , este ar ainda cinzento no seu sublinhado inicialmente. - No entanto, - se eu descer aqui nesta seção, - você pode ver que esses links são pretos sobre o mouse e quando clicamos sobre eles o estado ativo - nós vemos, - eles ficam vermelhos. E sempre que já clicamos neles, e voltamos para a página. - Eles devem ser ótimos. - Que é a ST visitada que eu já cliquei nesses links. - É por isso que estão todos cinzentos agora. - Certo, às vezes você gosta de uma ST visitada. Se você tem muitos links, as pessoas podem ver quais links foram ou clicaram. No entanto, outras vezes você pode querer compartilhar os mesmos outras vezes você pode querer compartilhar os mesmosestilos do seu estado de ligação normal que o seu ST visitado. - Então, se eu quisesse fazer isso uma maneira é que eu poderia vir aqui e apenas dizer que o dedo do pé é preto e você sabe, - sem decoração de texto quando visitamos o link também, - hum, - mas isso é meio redundante porque eu Estou apenas dando os mesmos estilos aqui e aqui. E você pode notar que com frequência você está usando os mesmos estilos, então há uma maneira melhor de fazer isso. Sempre podemos usar uma coisa chamada seletor composto, que usa a vírgula doisseletores diferentes. Sempre podemos usar uma coisa chamada seletor composto, que usa a vírgula dois - Então eu posso usar isso para estilizar ambos ao mesmo tempo colocando uma vírgula aqui e então - colando esses detalhes uma visitada aqui em cima e eu posso me livrar deste aqui, - deixe-me ir em frente e deletar aquele daquele jeito. Então o que eu fiz lá foi dizer, libra detalha uma vírgula de dois pontos, o que significa e também estilo isso. Então, se eu lesse isso em voz alta da maneira que o navegador interpreta isso, seria como dizer “ Ah, ei, navegador”. - Vá e encontre algo com uma ideia única de detalhes. - Agora vá para dentro e encontre alguns links. - E durante o seu estado normal, - quando ninguém clicou neles, - estilizá-los desta forma e, em seguida, a vírgula significa e também ir e encontrar um elemento com a idéia - de detalhes e ir para dentro dele e também estilo links durante a sua visita ST Então basicamente, - em um único seletor. - Usando uma vírgula, - você pode agrupar elementos diferentes, - e neste caso, - nós dissemos ir e estilo, - links normais e também links de estilo que foram visitados. - Então agora tanto estado de link padrão e ST visitado será preto com decoração de texto de nenhum. Então é bom tentar tudo seguro, e voltaremos e nos refrescaremos. - E agora, - desde o estado padrão e o ST visitado ou o mesmo. Mesmo que eu tenha clicado nesses links antes, eles ainda são pretos. - Já não estamos a ver a grande cor. E você pode ver quando eu passar o mouse sobre, ficamos um pouco sublinhados assim para me dizer que estou pairando sobre o link. E você pode ver quando eu passar o mouse sobre, - Agora. - Cabe a você mesmo. - O que você faz durante esses estados links. - Há todo tipo de possibilidades. , Fiz coisas convencionais,que talvez sejam um pouco aborrecidas. Mudei a cor ou a decoração do texto, mas na verdade você pode mudar os textos. - Você pode alterar o tamanho da fonte, - e o link parecerá como se estivesse crescendo. - O texto parecerá como se estivesse crescendo quando você passar o mouse sobre. - Você também pode mudar como o peso do texto para fazer você ficar mais grosso. Você pode mudar o estilo para torná-lo um tallix. Você poderia até mesmo mudar a fonte completamente, o que seria um efeito estranho. Você pode mudar as cores de fundo e todo tipo de coisas. - Também sinta-se livre para verificar os links abaixo. - Isso dará recurso opcional alternativo é que você pode ir verificar on-line para aprender - mais sobre seletores CSS. - Então o que você vai querer fazer em seguida é ir em frente e seguir em frente para o desafio de código, - onde você estará usando CSS para estilizar seu projeto de site. 28. Ferramentas de desenvolvedor (parte 1): - Oi, pessoal. - Bem-vinda de volta. - Eu queria mostrar-lhe um vídeo de exemplo rápido de como usar suas ferramentas de desenvolvedor e essas - ferramentas irão ajudá-lo a solucionar e depurar problemas e problemas que você tem ao longo do - caminho. - Então, anteriormente, nós olhamos para o uso de validadores HTML e validadores CSS como uma forma de validar - a sintaxe do nosso código. - Outra palavra. - Às vezes, você simplesmente escreve errado ou digitou algo errado, e isso criará um erro no seu código. - Mas também haverá muitas vezes em que não há erros sintáticos onde você digitou tudo corretamente. - Mas ainda há algumas coisas que não estão sendo exibidas exatamente do jeito que você gostaria no navegador. - E é aí que a ferramenta de desenvolvedor entra e realmente se torna uma excelente ferramenta para resolver - esses problemas. - Primeiro, - vamos dar uma olhada em uma espécie de situação hipotética que eu montei aqui no código. - E, claro, - você não verá essas mudanças específicas em seu código em, - e não há necessidade de você seguir adiante para este exemplo. Pode ir em frente e sentar, relaxar e assistir. - Hum, - e eu criei um exemplo aqui onde eu gostaria de mudar o estilo deste parágrafo em particular na página. - Então isso está dentro da minha seção de vendas e o que eu fiz foi decidir que, - você sabe, - eu queria ter todo esse parágrafo e talvez, - você sabe, - texto em diferentes lugares no meu site. - Hum, - tem essa classe de destaque que mudaria o texto para uma cor azul. Normalmente, esse texto de parágrafo é preto, como você sabe, e vamos mudar isso para ser azul. - Então eu fui em frente e adicionei esta classe aqui de destaque a este elemento. E então, se eu entrar no meu estilo de ponto CSS, você pode ver aqui em baixo on-line 87 que eu criei uma classe de destaque e defini para ter - a cor de azul. - Então, neste ponto, - Eu estou assumindo que tudo foi feito corretamente neste texto vai aparecer no - navegador como sendo azul. - Agora, - estranhamente, - quando eu for para o navegador e eu atualizar a página, - você vai notar que este texto, - na verdade não é azul, mas é realmente lido. Então, em vez de arrancar meu cabelo ou gastar, possivelmente horas cavando minhas linhas de código CSS para descobrir onde eu me contradizi. possivelmente horas cavando minhas linhas de código CSS para descobrir onde eu - Esta é uma excelente situação para intervir e usar as ferramentas do desenvolvedor. Não vou demonstrar ferramentas de desenvolvedor e todos os navegadores diferentes. - Mas eu vou fornecer alguns links na parte inferior deste vídeo onde você pode aprender mais sobre - as ferramentas de desenvolvedor para Firefox e Safari. - Mas vou demonstrar como usar as ferramentas de desenvolvedor para resolver um problema como esse no Google - Chrome. - Então, uma das maneiras que você pode abrir seu painel de desenvolvedores no Google Chrome é se você ir - para a exibição, - menu suspenso e você notará aqui que há uma seleção chamada Developer. - E sob isso, - nós temos a capacidade de trazer ferramentas de desenvolvedor aqui para que você possa ir para ver ferramentas de desenvolvedor - e isso irá trazer este painel como este. - Agora, - a qualquer momento, - se você quiser fechar o painel do desenvolvedor no lado esquerdo - há um pequeno X aqui. - Você pode ir em frente e clicar nisso para fechá-lo, - e então você terá sua visão completa do navegador novamente. - Outra maneira que você pode trazer ferramentas de desenvolvedor é inspecionando um elemento específico para - ver o código HTML e CSS que está estilizando ou afetando esse elemento em seu layout de página. - E para fazer isso, - o que você quer fazer é clicar com o botão direito do mouse em qualquer elemento que eles estão interessados - inspecionar. Já que tenho um rato de dois botões aqui, posso clicar com o botão direito. E se você estivesse em um laptop Mac, você pode usar dois dedos e clicar, você pode usar dois dedos e clicar, ou você poderia manter o controle e fazer o clique esquerdo, então o controle e um clique irá trazer este menu para cima e novamente. ou você poderia manter o controle e fazer o clique esquerdo, Se você tem um mouse de dois botões como eu, você pode apenas fazer um clique direito e trazer este menu para cima. - E então vamos inspecionar Element bem aqui, e isso vai trazer o painel do desenvolvedor. - E não só traz o painel do desenvolvedor e, na verdade, também destaca esse elemento específico que estou interessado em inspecionar, - Então, se viermos aqui no lado esquerdo disso, - estamos atualmente no painel de elementos e aprenderemos um pouco mais tarde. - Vamos aprender um pouco mais sobre essas outras guias, - mas agora vamos apenas explorar o painel de elementos e você pode ver abaixo. - Temos todo o código HTML que está definido. - Hum, - e eles até dão pequenas setas onde você pode expandir e recolher os diferentes - pais para ver os outros elementos HTML que estão aninhados dentro. E quando ele é selecionado assim, eu também posso ver todos os CSS. - Está a afectar este elemento. - Então, - realmente, - toda vez que eu clico ah, - de um elemento para o outro como este, - você pode ver que o CSS está mudando seu em Lee, - mostrando o código CSS que é aplicado a esse elemento. - Então, no nosso caso, - enfraquecer descobrir algumas coisas sobre este parágrafo em particular, - por exemplo, - como faras do CSS. - Isso é governá-lo. - Sabemos que no arquivo CSS ponto normalizado 63. Me disseram que está herdando a família de fontes de San Serif, e isso nos diz aqui que esse estilo é herdado do seletor HTML aqui. - Ok, - também temos informações sobre a folha de estilo dos agentes do usuário, - e o agente do usuário é essencialmente meu navegador. - Isso significa que o Google Chrome está adicionando esse estilo padrão. - Está dizendo que no Google chrome que parágrafos são definidos para exibir bloco e que ele tem - uma quantidade específica de margem em torno do parágrafo. - Nós também concedemos e minha folha de estilo personalizada, - que é chamada de Estilo, - que CSS tem três estilos diferentes que estão afetando este parágrafo em particular. - Isso me diz que um deles aqui está online. - 19. - Então você sempre pode ler isso vendo o nome do arquivo e, em seguida, após os dois pontos, - ele vai realmente dizer-lhe a linha específica no código onde você pode encontrar este estilo em assim - aqui Online 19 de estilo dot CSS. - Eu posso ver que eu apliquei um tamanho de fonte de 16 pixels e uma altura de linha de 1,5 m. - Ok, - Eu também posso ver que on-line 87 eu apliquei uma classe de destaque e disse a ele para ter a - cor de azul. - No entanto, - você notará que aqui a cor azul é realmente riscada. Sempre que você vê uma das propriedades sendo riscada assim, o que está fazendo é dizer que esse estilo está sendo substituído por algum outro estilo . - E neste caso, se eu olhar para cima aqui apenas algumas linhas acima desta classe de destaque eu me contradizi. - E aqui eu usei um seletor descendente onde eu selecionei o elemento neste caso, - a seção com a idéia de venda. - E eu disse a todos os parágrafos dentro dele para ter a cor vermelha. - Então, nesta situação, - você pode realmente ver que usar um seletor descendente vai dominar, - tem mais autoridade do que uma classe. Então a cor do azul foi riscada aqui, e estou vendo a cor vermelha desse texto. - Agora, - se eu passar o mouse sobre esta declaração em particular, - você vai notar que há uma pequena caixa de seleção que eu posso clicar ao lado dela e que irá ativar - e desativar esse código para que possamos ver quais mudanças ocorrem dentro da visualização do navegador. - Então, - por exemplo, - se eu clicar nesta pequena caixa de seleção sobre a cor vermelha Em outras palavras, - desativando este estilo - você pode ver isso agora. O destaque é, na verdade, tem autoridade para colorir o texto de azul novamente. - Então agora vemos o texto azul de novo. Se eu checar isso de volta, vai ser lido. Se eu desmarcar esse estilo, será azul. - Então o que isso está me dizendo é que se eu realmente quiser que isso seja azul. - Eu vou ter que ir dedo do pé linha 83 de estilo dot CSS para remover esta cor vermelha de que - estilo. - Então vamos em frente e tentar isso. Eu vou voltar ao meu código aqui, e eu vou descer a linha 84 aqui e eu posso ver a cor vermelha. - Então, se eu ir em frente e remover este estilo ou neste caso, - Eu vou apenas ir em frente e comentar isso e então eu vou voltar para o navegador - e atualizar, - e agora eu posso ver que ele está corrigido esse problema. - Então, qualquer alteração que você fizer aqui dentro das ferramentas do desenvolvedor, eles não mudarão seu código. - Não é o mesmo que entrar em impostos sublimes e mudar fisicamente o código. - Na verdade, está só a mostrar-te uma antevisão. - Então, novamente, - ferramentas de desenvolvedor ou apenas mostrando a você uma visualização para que você possa tipo de brincar com - solucionando valores até que você tenha as coisas do jeito que quiser. - E então você pode usar as informações como o arquivo e o número da linha para entrar no código real e fazer essas alterações permanentemente. - Ok, - então, - além de ser capaz de ativar e desativar estilos, - você também pode criar novos estilos clicando dentro daqui para digitar outras coisas. Por exemplo, eu contesto coisas antes de aplicá-las no código dizendo coisas como, você sabe, tamanho da fonte. - E então eu posso digitar, - você sabe, - como três m algo assim - e eu posso ver o quanto maior o texto fica, - Aiken diz. - Oh, isso é um pouco demais. - Direi a eles e verei como isso se parece. - E então eu posso dizer 1.5 deles e talvez isso seja perfeito. - Então, se acontece que eu gosto do tamanho da fonte em 1.5 eles, - eu posso então não, - para entrar em estilo dot CSS online 87 basta adicionar isso abaixo disso. - Então vamos em frente e verificar isso. Então, novamente, se eu atualizar esta página, vou perder o estilo porque, lembre-se, e as ferramentas do desenvolvedor, você está apenas visualizando o estilo. Então, se eu apertar a atualização, não são mais 1,5 deles. - Mas agora sei que posso entrar aqui e adicionar permanentemente ao código e brincar com os tamanhos diferentes. - Fui capaz de visualizá-los antes de tomar uma decisão aqui para me comprometer com este tamanho. Então, se eu atualizar isso agora, posso ver essa mudança refletida aqui. - Além de escrever novas declarações CSS e testá-los dentro das ferramentas de desenvolvedor -, - você também pode alterar os valores existentes. - Por exemplo, - aqui Online 19 e estilo ponto CSS. Tem estilos para o meu parágrafo, como tamanho da fonte e altura da linha. - Então, - por exemplo, - se eu estiver interessado em brincar com a altura da linha em vez de clicar para criar uma nova declaração -, - Eu também posso clicar e selecionar o valor para uma propriedade pré-existente como a altura da linha. - Então a altura da linha existe em texto sublime, - e eu estou simplesmente testando um valor diferente para que eu possa digitar um novo valor aqui. - Eu também posso, - adicionalmente apertar a seta para cima e para baixo no meu teclado, - e isso vai mudar o número assim. - Então, - por exemplo, - Contesto alturas de linha diferentes, batendo a seta para cima ou para baixo assim como - bem, - ou eu posso digitar uma quantidade precisa digitando 1.4 algo assim, - e eu sou capaz de ver essa prévia. E se eu gostar da aparência, posso mudar isso aqui dentro do código CSS. 29. Exibição de elementos: - Oi. - Bem-vinda de volta. - Este é o slide 3.1 construindo layouts de página. - Vamos dar uma olhada em alguns tópicos aqui que nos ajudarão no caminho para a criação de riel - layouts de site para que possamos posicionar elementos e criar estrutura de coluna na página. - Então nós vamos precisar olhar para a maneira diferente que os elementos são exibidos no navegador. Vamos dar uma olhada em algo chamado Box Model, que nos permitirá explorar as habilidades para dimensionar e dimensionar elementos, bem como como como diminuir o espaçamento dentro de um exterior de elementos. - Também vamos dar uma olhada em uma nova estética de caixa, então aprenderemos algumas propriedades diferentes que podemos usar para dar mais estilo aos nossos elementos. - Hum, - no passado anteriormente nós olhamos para a cor de fundo. Mas agora vamos seguir em frente para ver coisas como adicionar uma imagem de fundo, arredondar os cantos de nossos elementos, criar uma borda, adicionar opacidade e sombra de caixa. - Nós também vamos olhar para o flutuador de posicionamento flutuante. - Posicionamento vai ser a sua solução para criar estrutura de coluna e posicionamento - elementos na página. - Então primeiro temos que entender que todos os elementos por padrão exibem uma de duas maneiras - no navegador. - Então certos elementos no navegador que você pode ter notado já de exercícios anteriores - eles exibem lado a lado. - Por exemplo, - imagens usando a tag AMG e links usando a tag A geralmente são exibidos lado a lado. - E essa é a maneira padrão que eles serão exibidos em qualquer navegador. - Ah, - e isso é porque eles são o que chamamos de elementos de linha ou elementos que aparecem em - linha por padrão. - Então, em elementos de linha eles são incapazes de aceitar um. - Dentro da altura, - eles serão apenas o tamanho do conteúdo. - Assim, o conteúdo dentro do forno no elemento de linha irá ditar a largura ea altura do - esse elemento, - em outras palavras e em elementos de linha. Além disso, não aceitarei espaçamento acima ou abaixo deles. - Elementos internos, - embora, - não podem existir harmoniosamente lado a lado na mesma linha com outros elementos em linha. - Então exemplos de elementos de nível de bloco que você viu foram coisas como cabeçalhos ou - parágrafos. - Você vai notar sempre que você colocar em um título ou parágrafo. - Os elementos que você coloca após ele sempre aparecem abaixo na próxima linha para baixo, - para que os elementos de nível de bloco possam aceitar largura e altura. Podemos dar a eles dentro de altura, propriedades para dimensioná-los na tela. E eles também podem ter margem, que é que eles podem ter espaçamento acima e abaixo deles. E eles também podem ter margem, - Elementos de nível de bloco sempre ocupam a linha completa em que estão. - Em outras palavras, - um elemento de nível preto não pode existir lado a lado na mesma linha que outro nível de bloco - elementos. - Vamos dar uma olhada rápida em um exemplo disso. Então, vou ao Tinker Dot Io e criei um exemplo dessa garota, e esse site é como uma almofada de raspadinha. - Hum, - é semelhante a outros sites que, - como Js violino e tinker sido que permitem que você, - hum, - basicamente para - hum, fora alguns HTML CSS e ou JavaScript e isso e ver como você sabe o - resultado disso. - Veja como isso é exibido no navegador. - Está bem. - Então você pode ver que eu criei para dibs no html dois desenvolvimentos e dá essencialmente - criar um recipiente ou uma caixa na tela, - e eu dei a ambos uma classe genérica de caixa. - Então aqui temos a aula de caixa de pontos bem aqui. - Eu especifiquei uma classe de caixa, e eu fui em frente e dei aos elementos uma cor de fundo de água, que está dando a ele esta cor azul claro. Eu também dei a esta caixa uma largura de 100 pixels e uma altura de 100 pixels. - Um pouco mais tarde, vamos falar sobre todas as diferentes possibilidades de dimensionamento. - Mas por enquanto, - podemos apenas olhar para a propriedade with e a propriedade height, - e nós demos uma quantidade fixa de pixels apenas para tornar este um quadrado perfeito. Também lhe demos essas propriedades, que não vimos antes, que se chamam “preenchimento e margem”. Então, o preenchimento é espaçamento dentro do elemento, e a margem é espaçamento fora dos elementos. - Ok, - hum, - e bem, - novamente, - nós vamos voltar. - E quando entrarmos em mais detalhes sobre o modelo de caixa discutirá um pouco mais sobre como - preenchimento e fator de margem no tamanho dos elementos. - Certo, então esses caras passam o ar. Sabemos que os desenvolvimentos, por padrão, exibem um bloco no navegador, é por isso que a caixa número um aparece acima da caixa número dois, que está aparecendo abaixo. - Então temos esse empilhamento vertical. - Por quê? - Porque estes ar por padrão, - estes elementos de nível de bloco de ar elementos de nível preto aparecem um acima do outro e eles - ocupam todo o espaço horizontal. - Ok, - lá o rei do espaço horizontal. - Em outras palavras, - ok, - então se eu quiser mudar a forma como um elemento é exibido, - nós também temos a propriedade CSS chamada display. Então, por padrão, esse cara exibe um bloco assim. Mas se eu quiser, posso mudar isso para uma fila assim. - Então, se eu mudar isso para na linha e eu voltar e clicar em correr, podemos ver o efeito que essas caixas agora aparecem lado a lado. Algumas coisas aconteceram aqui quando colocamos esses caras na linha, você deve ter notado que isso não tem mais 100 pixels de largura e 100 pixels de altura. Assim que definimos isso para ser um elemento em linha, estamos percebendo que em elementos de linha, apesar de conduzirem lado a lado, eles também perdem algumas habilidades. - Então, ou seja, - não é mais capaz de aceitar em uma largura e altura. - Porque, - como eu mencionei em elementos de linha são tão largos quanto o conteúdo dentro deles. Então, se eu começasse a digitar mais texto aqui, na verdade, ficaria um pouco mais largo. - Nós também temos o que nós podemos ver a margem, - que é o espaçamento fora do elemento. - Podemos ver que ele existe no lado esquerdo e direito do elemento. - No entanto, - não existe mais no topo ou no fundo. - Na verdade, - as cores azuis do aqua direita contra a borda do quadro aqui porque não há mais - nenhum espaçamento acima. - Então elementos de nível interior podem existir lado a lado harmoniosamente. - Eles não podem aceitar um com sua altura, - e eles não podem aceitar margem superior e inferior. Então, novamente, se eu mudar isso de volta para bloquear e clicar em Executar, você pode vê-lo. - É capaz de ah, - exceto largura e altura agora, - e vemos espaçamento acima e abaixo - e também podemos ver que eles estão empilhados verticalmente. - Ok, - então há uma espécie de ah híbrido desses dois. - Hoje em dia, - a maioria dos navegadores suportará este próximo método, - este próximo valor para exibição. No entanto, navegadores como o Internet Explorer 7 e abaixo têm suporte parcial limitado ou talvez até saibampara esse valor em particular, que é chamado em linha. navegadores como o Internet Explorer 7 e abaixo têm suporte parcial limitado ou talvez até saibam para esse valor em particular, - Bloco de traço, - bloco de mesa interior é, - uh, - como o filho amor de em linha e bloco elementos de nível. - Tipo como um elemento em linha em um elemento de nível de bloco. - Feito e seu filho em bloco de linha tem uma espécie de alguns da qualidade, - algumas das características de ambos os pais. - Se quiser pensar assim, é uma forma boba de descrever. - Mas é como funciona. Então, se eu colocar esse cara em linha traço bloco, ele é capaz de aceitar dentro de altura. - E é capaz de ter margem na parte superior e inferior. E também pode ser exibido lado a lado. - Então, existem algumas vantagens únicas do em linha. - Ah, - o elemento de bloco em linha. E dependendo do que está tentando fazer, pode dar certo para você. E dependendo do que está tentando fazer, - Ok, - hum, - há algum tipo de resultados patetas inesperados. - Ocasionalmente, - quando você usa um bloco de linha em um layout de página, - e em vez de demonstrar todos esses exemplos - procure um link abaixo deste vídeo. - Hum, - e haverá um link de recursos. - Isso vai ser para um bom artigo on-line que fala sobre algumas das loucuras. - Bem, meio que. - Algumas das partes boas e as partes ruins de usar em bloco de linha para exibir elementos. - Ok, - hum, - mesmo assim, - nós vamos Teoh aprender. - Ah, - um método alternativo para posicionar elementos de nível de bloco. - É uma estrutura de coluna como esta chamada flutuante ou flutuante que vai - realmente resolver todos os nossos problemas e construir layouts de página. - Mas, no entanto, - Eu queria mostrar-lhe as diferentes maneiras que os elementos podem exibir no navegador. - E eu também queria chamar a atenção para o fato de que usando esta propriedade, - a propriedade CSS display, - nós podemos realmente mudar a maneira como um elemento é exibido se nós escolhermos. 30. Modelo de caixa: Então, primeiro podemos olhar para tapinhas, que eu mencionei. - Patting é o espaçamento dentro de um elemento, e então temos margem, que é o espaçamento fora de um elemento. - Nós também temos a propriedade de fronteira, - que podemos dar-lhe estilos uma espessura e cores, bem como para adicionar uma borda, - que é uma linha ou traço na borda de um elemento também. - Agora, todas essas peças diferentes em partes somam à medida da largura e da altura do elemento. - E isso é realmente o que o modelo da caixa é tudo sobre. - Então vamos dar uma olhada nessa imagem. Este diagrama aqui demonstra o modelo da caixa , e o que eles estão mostrando aqui é que a margem aqui é o espaçamento fora dos elementos. - Então isso empurra outros elementos que podem ser posicionados ao lado deste elemento para que eles não estejam bem uns contra os outros. - Então este é um tipo confortável de buffer ou espaçamento entre elementos, - e você pode ver aqui você pode especificar margem para margem superior, - margem esquerda inferior e margem direitos. - A fronteira pode ser do tamanho que quiser. - A borda pode ter um pixel de espessura. - Pode ter 10 pixels de espessura. - Você pode especificar diferentes tamanhos de bordas, - e isso vai ser uma espessura adicional de traço na borda externa do seu - elemento. - Agora, dentro da fronteira, temos algo chamado estofamento, então tapar é o espaçamento dentro dos elementos. - Então, se eu digitar texto dentro daqui, - se eu digitar Olá, - mundo, - se eu não quiser que esse texto fique bem na borda da minha caixa, - então o que eu posso fazer é adicionar algum tipo de preenchimento aqui, - batendo à esquerda, - preenchimento direito, - tapting top ou tapting bottom para empurrar o conteúdo para longe da borda do elemento. - Para ver isso, - a maneira mais fácil de ver o preenchimento e a ação é dar uma cor de fundo ao seu elemento - ou dar uma borda para que você possa testemunhar o conteúdo dentro do elemento se movendo - longe da borda ou vendo um quantidade confortável de espaçamento entre a borda do - cor de fundo e o Khan, - onde o conteúdo começa aqui. Então as cores de fundo ficarão para trás, enchendo até a borda do elemento até a borda. Então as cores de fundo ficarão para trás, Então o modelo da caixa é feito do conteúdo com o preenchimento, a borda, e então a margem agora é se as coisas não forem complicadas o suficiente, eu tenho que contar a vocês sobre a existência de dois modelos de caixa diferentes. Então o que acontece é que navegadores como Firefox, Safari e Chrome usaram um modelo de caixa conhecido como o modelo de caixa W três C. - Então o W três C é ditado que quando especificamos o com ou a altura de um elemento, estamos falando sobre o espaço disponível dentro desse elemento para conteúdo. - E se eu adicionar preenchimento ou borda ou margem, - que é adicional em quantidade adicional que temos que adicionar na largura. Certo, então o que quero dizer com isso é, digamos que tenho uma caixa por div, por exemplo. - E eu especifico que esse def deve ter 200 pixels de largura. Estou descrevendo isso com, um aqui, que é o conteúdo com Então, se eu disser com 200 pixels em fogo, Fox no Safari, no Chrome e na ópera que 200 pixels vão compensar a quantidade de espaço disponível - para o conteúdo dentro do seu elemento. - Agora, - se eu também especificar preenchimento, - que é espaçamento dentro do elemento. - Digamos que eu especifique 10 pixels de preenchimento que vai adicionar 10 pixels para o lado esquerdo e 10 pixels para o lado direito. - Então agora, - em vez de ter 200 pixels de largura, - você sabe, - se eu especificar com 200 pixels e bater 10 pixels, - a medida real deste elemento é agora 220 pixels. - Por que pergunta? - Porque inicialmente dissemos que o com era 200. - Mas dar palmadas que temos de acrescentar é uma quantia adicional. Então, o tapinha não está incluído na largura, , no com valor usando os navegadores, todos os navegadores que obedecem ao modelo de caixa W 3 C. - Então 200 pixels de largura mais 10 pixels de tapinhas aqui e 10 pixels de tapinhas aqui fazem isso - elemento na verdade, - 220 pixels agora, - ok, - você pode se perguntar por que você se importaria com toda essa matemática. - Bem, - acontece que quando começamos a construir uma estrutura de colunas que precisamos saber como - essas colunas são para que eles possam realmente caber lado a lado. - Você só tem muito espaço na tela ou tela imobiliário é, - nós chamamos isso, - e você precisa fazer essas coisas harmoniosamente se encaixam lado a lado. - Então isso é uma coisa a ter em mente é que fogo Fox Safari, - cromo e ópera usaram o método W três C box model Agora, - em contraste, - Internet Explorer tem seu próprio método de modelo de caixa. - Ok, - então no método de modelo de caixa do Internet Explorer, - quando você especifica 200 pixels de largura que na verdade vai incluir automaticamente qualquer - borda ou preenchimento. - Está bem, mas não margem. - Nenhum dos métodos de modelo de caixa, - incluindo o corte de margem. - Mas a principal diferença entre a forma como Firefox safari e cromo e ópera consideram o tamanho - de um elemento versus a forma como o Internet Explorer considera o dimensionamento de um elemento é a saber, - que o Internet Explorer inclui automaticamente borda e preenchimento. - Então o que isso significa é, - digamos que eu digo que minha div tem 200 pixels de com ok em ambos os navegadores, - certo? - Ambos os navegadores no ar olhando para o mesmo código e dizemos 200 pixels de largura e 10 pixels de - preenchimento esquerda e direita. - Ok, vamos deixar a fronteira fora disso por enquanto. - Mas imagine que temos 200 pixels dentro de 10 pixels de preenchimento em todos os lados. - Então, no método de modelo de caixa do Internet Explorer, - o elemento realmente vai aparecer em 200 pixels. Então, se você disser 200 pixels, serão 200 pixels. - Mas o espaço de conteúdo disponível dentro é de apenas 180 pixels de espaço para o conteúdo porque - 10 pixels no lado esquerdo são ocupados por preenchimento - e 10 pixels no lado direito são ocupados por preenchimento. - Então, com aqueles 200 pixels de com, - temos que subtrair 20 pixels, - o que nos dá 180 pixels de espaço disponível para o conteúdo, - embora o elemento em si vai ocupar 200 pixels de largura. - Ok, - E isso é novamente, - em contraste, - o método W três c, - onde, - em vez de subtrair os 20 pixels de preenchimento do interior, - temos que adicioná-lo ao Lá fora. - Ok, - então literalmente, - se eu dissesse, - com 200 pixels preenchendo 10 pixels em todos os lados em AII e Internet Explorer - a caixa ficaria com 200 pixels de largura exatamente como dissemos. No entanto, no Safari do Firefox, cromo e ópera, ficaria mais largo nesse navegador. - Seria 220 pixels. - Caramba. - Isso soa como um monte de problemas e trabalho. - E na verdade, foi no passado. - Isso realmente pegou muitos de nós desenvolvedores para baixo. - Foi uma grande fonte de aborrecimento para mim. - Pessoalmente, - eu sei que posso dizer, - mas felizmente para vocês, - vocês aprendem o ar em um ponto agora onde há algumas grandes soluções no lugar para - tipo de corrigir todas essas bobagens. Mas, sabe, ao longo do tempo, houve muitas soluções diferentes para isso, e eu vou falar sobre algumas delas, e vamos falar sobre por que algumas delas estão bem em usar e por que algumas delas - definitivamente não deve fazer para corrigir esta diferença de modelo caixa. - Ok, então estas são algumas soluções hackeadas. - Então, do CSS um e dois, - havia algumas soluções diferentes de hack onde você tinha que digitar o código um pouco - diferente para torná-lo exibido diferente para cada navegador. - Nós também vamos olhar para um método chamado caixa em uma caixa, - e nós também vamos dar uma olhada em um novo método que eu recomendo que você use para o seu - projeto, - que é chamado de CSS três caixa sizing propriedade. - Ok, - então primeiro, - vamos falar sobre alguns hacks de CSS mais antigos e não fazer essas pessoas. - Então, no passado, alguém descobriu que se você colocar caracteres incorretos na propriedade CSS como barra marcas que certos navegadores ignorarão a marca de barra e outro navegador irá, , irá, de fato, processá-lo e lê-lo. - Então você sabe, - um navegador pode dizer, - Oh, - eu posso Onley entender isso com 100 pixels, porque está escrito corretamente. E então você escreveria o juízo várias vezes, mas para um navegador diferente. Então, outro navegador, porque você colocou uma barra aqui, ele iria ignorá-lo. E ainda assim, um navegador ainda iria, , exceto esse valor e então mudá-lo para 40 Então, basicamente, para compensar o fato de que o Internet Explorer estava exibindo de forma diferente. - O que as pessoas fariam é colocar pequenas marcas de barra engraçadas e caracteres nos atributos de largura e altura, e eles aplicariam, - você sabe, - vários CSS dizendo diferentes navegadores para exibir o com de maneiras diferentes. - Isto dá-lhe um erro de validação. Se você validar seu CSS, ele dá um ar. - Isto é como uma solução peculiar. - Eu não confiaria nisso na estrada. A única razão pela qual você não deve usar isso é mesmo que funcione agora, não há garantia de que essas coisas funcionem no futuro. A única razão pela qual você não deve usar isso é mesmo que funcione agora, - E você não vai querer ter que voltar ao seu site anos e remover algum tipo de código hackeado como este. - Então não use esse método. - Este outro método é chamado caixa em um método de caixa, - e isso funcionará em todos os navegadores, - antigo e novo. É um pouco mais aborrecido do que o último método que vou mostrar, mas este funciona. E isso é meio centrado em torno da idéia de que a única diferença entre os dois modelos de caixa concorrentes é que um deles, exceto estofamento e borda na inteligência e o outro não isso é meio centrado em torno da idéia de que a única diferença entre os dois modelos de caixa concorrentes é que um deles, incluem tapinhas e - borda no com. - Então, realmente, - se você fizer uma caixa que não tem preenchimento ou borda sobre ela, - então não há diferença entre todos os navegadores. - Então este método requer código de marcação extra, - e é por isso que muitas pessoas não gostam deste método. - O que isso é pessoalmente uma das coisas que eu não tenho certeza sobre este método é que ele - sempre envolve ter que fazer duas caixas em vez de uma. Mas a maneira como isso funciona é criar uma caixa externa. - Então esta div aqui é a externa, e esta tem uma sagacidade especificada, mas não tem margem, nenhum preenchimento e nenhuma borda. - Nós deveríamos ter escrito Border Zero aqui também, - mas você tem o ponto para que ele tenha uma largura e altura especificadas, - talvez, - mas nenhum preenchimento e nenhuma borda são as principais coisas importantes aqui. - Então este vai exibir essas caixas externas vão exibir o mesmo em todos os navegadores - porque não há preenchimento incluído e nenhuma borda incluída. - Certo? - Então é faras Firefox, Safari e Internet Explorer preocupado. - Tem 100 pixels de largura porque não há inclusão de preenchimento ou borda. E para o Internet Explorer, ele também vê que tem 100 pixels de largura. E para o Internet Explorer, Mas então você pode se perguntar, mas e se eu quiser ter estofamento? - E se eu não quiser que todo o meu conteúdo esteja no limite do meu elemento? Eu quero um espaçamento confortável para o I. Então o que você pode fazer lá, então, você pode criar outra caixa dentro do elemento uma caixa interna, por exemplo. - E este aqui podemos dar-lhe estofamento. Então esse cara aqui tem estofamento dentro dele, mas não especificamos propositadamente um com. - Então, se você fizer este método, - ele vai realmente funcionar em todos os navegadores. - Mas seu código HTML é duas vezes mais linhas de código, - geralmente porque você tem cada elemento tem uma caixa dentro de outra caixa. - Ok, - então hoje em dia nós temos o no CSS três. - Nós temos essa propriedade maravilhosa que veio junto chamada Box Dash Sizing, - então eu posso dizer aos meus elementos para ter o tamanho da caixa, - e eu posso especificar como ele deve medir para que eu possa forçar, - você sabe, - todos os navegadores a usar o modelo do Internet Explorer, - que é chamado de caixa de traço Borda. Ou posso forçar todos os navegadores a usar o modelo W 3 chamado caixa de conteúdo. - Ok, - então aqui eu escrevi que isso tem 94,3% de suporte, - pelo menos no momento da gravação deste vídeo, - a quantidade de navegadores que as pessoas estão usando globalmente em todo o mundo que suportam ou - entender o tamanho da caixa de propriedades CSS três não é de cerca de 94%. - Agora, a boa notícia sobre isso é que os navegadores que não entendem que pequena - porcentagem que não entendem esta propriedade de dimensionamento caixa passou a ser Internet - Explorer versões mais antigas do Internet Explorer como I E sete e abaixo. - Então acontece que essas versões mais antigas do IE eles realmente usam essa medida o modelo i E - caixa. - Então, se você definir o tamanho da caixa para caixa de traço de borda, - você realmente deve ter 100% de suporte. - Considerando que se você disse que o valor da caixa de conteúdo W três Método. - Se você escrever caixa de conteúdo aqui, - você realmente só tem cerca de 94% de suporte. Então, neste caso, eu meio que deixei a política ir em termos de quem está certo ou quem está errado. - E eu gosto de usar o método modelo de caixa I E dizendo caixa traço tamanho caixa Border. - Isso vai fazer seu posicionamento flutuante e seu layout de página no dimensionamento de suas - colunas. Muito mais sem preocupações e sem complicações, que vocês verão quando avançarmos para o próximo exercício, onde construímos um layout de página. Certo, então aqui está o gráfico que eu estava mostrando a vocês, e você pode ver que é realmente o IE 7 é o culpado. - Então vamos falar sobre escalar elementos. - Certos elementos podem ter um tamanho fixo em pixels. - Você pode usar pixels para criar uma quantidade estática ou fixa de com sua altura e em todos os dispositivos, - todas as telas. - Ele sempre terá uma certa quantidade de pixels. Você também pode usar uma porcentagem para dimensionar as coisas, então é da mesma maneira que eu posso dizer, 200 pixels de largura. - Eu também posso dizer, - como 100% de largura ou 50% de largura e usar uma porcentagem vai fazer a quantidade fluida, - o que significa que vai responder ao tamanho do dispositivo. Pode, na verdade , , encolher e expandir porcentagem do espaço disponível na tela com base no valor que você colocar antes da porcentagem. - Nós também temos a capacidade de definir homens largura traço e Max traço com ou mínimo traço altura e - altura máxima do traço. - Então, definindo valores mínimos e máximos. - Você tem um limite onde ele nunca vai escalar abaixo do valor mínimo ou acima do valor máximo - valor. Então o elemento ainda pode expandir dinamicamente na página com base no tamanho do dispositivo ou no tamanho dajanela do navegador. expandir dinamicamente na página com base no tamanho do dispositivo ou no tamanho da Mas você terá um ponto de parada, um limite mínimo para onde ele vai parar. Ele vai parar de encolher para os homens com ou a altura dos homens, e vai parar de crescer no máximo com ou a altura máxima. - Ok, - nós também temos um valor chamado auto e auto é realmente o padrão com ou altura. - Basicamente, - definir A com seu dedo alto auto é essencialmente o mesmo, - não é especificar um com sua altura, - uma largura de auto em um elemento em linha basicamente, - como você sabe, - apenas permitir o conteúdo. - Desculpe-me. - O elemento toe somente largura do BIA é o conteúdo versus um elemento de nível de bloco. - Se você definir algo para uma largura de auto, - elementos de nível preto realmente ocupam sem A com especificado, - eles realmente ocupam 100% ou a largura total da tela, - então auto vai, - você sabe, - fazer coisas diferentes para largura e altura, - dependendo da forma como o elemento está sendo exibido, - se ele está exibindo em bloco forro ou em bloco traço linha. - Ok, vamos também falar sobre conteúdo. - Estouro. E se eu definir um fixo com um elemento, mas há mais conteúdo do que caberá, então caberemos dentro desse elemento. - E se eu fizer um quadrado de 100 por 100 pixels e colocar um monte de conteúdo dentro dele e - ele não se encaixa? - Bem, - acontece que você pode realmente mudar isso definindo a propriedade overflow para visível, - oculto ou rolagem. - Vamos dar uma olhada nisso muito rápido no navegador para que possamos usar esses exemplos. Aqui temos a caixa um e dois, e vamos começar a adicionar mais conteúdo aqui na caixa. - Vou começar a escrever assim. - Talvez faça alguns retornos aqui. - Estou só a escrever um jargão. - Certo, vamos ver o que acontece. Certo, então isso fez exatamente o que estávamos falando. - Hum, - e também nós saímos. - Isto está no bloco de linha. - Você pode começar a ver algumas das coisas estranhas e patetas que em elementos de bloco de linha fazem. Vou voltar a mudar isto para bloquear, por isso é menos confuso lá. - Ok, - então esta primeira caixa, - só tem o Texas diz um nele. A próxima caixa diz para, mas escrevemos mais texto e caberá. - Então vamos olhar para a diferença em um elemento de nível de bloco quando especificamos uma altura ou fizemos - não especificar uma altura. - Então aqui temos a altura especificada de 100 pixels. - Vamos em frente e definir isso o auto, que é o equivalente a não especificar uma altura. - Poderíamos apagar essa propriedade. - Esta é a altura. Auto é a mesma coisa se apagarmos isso, certo? - Ok, - então ah, - altura de auto ou não especificar uma altura em um elemento de nível preto, - ou na verdade também em um elemento em linha, - permitirá que o conteúdo cresça Aziz tanto quanto ele precisa para se ajustar ao conteúdo. - Então muitas vezes foram propositadamente não especificando uma altura. - Se você tem uma caixa em seu layout e você sabe que você diz que tem vários artigos de notícias e - você não tem certeza de quantos estarão lá ou no futuro, - você pode atualizá-lo. - Você pode ter mais e mais artigos. - Hum, - muitas vezes, - você simplesmente não vai especificar altura porque quando nenhuma altura especificou os elementos apenas indo para - crescer tão alto quanto ele precisa para ele vai expandir com base em quanto conteúdo está dentro dele - - Ok, - hum, - vamos realmente voltar a especificar a altura. - Então vamos dar a isto uma altura fixa como tínhamos antes. Então vamos dizer, Colon de altura 100 pixels. - Está bem. - E vamos fazer isso de novo. - Está bem, excelente. Então, quando dou uma altura fixa, tenho que ter cuidado porque esta altura não é alta o suficiente para todo o texto que digitei aqui. Agora podemos controlar isso usando uma propriedade chamada Overflow. Agora podemos controlar isso usando uma propriedade chamada Overflow. Então vamos descer aqui e dizer “Overflow “, Colon “e vamos tentar um chamado “Oculto”. - Digamos que o transbordamento está escondido. - Está bem. - E depois vamos fazer isso e ver o que acontece. - Então estouro, - escondido Bem, - na verdade, esconder qualquer conteúdo que transborda fora da altura ou da largura do elemento. - Então está cortando o conteúdo lá. - Não consigo ver. - Hum, - ocasionalmente, - você pode querer usar isso se você está fazendo algo um pouco mais dinâmico. - Se você passar para JavaScript, - por exemplo, - você pode usar overflow hidden, - hum, - você sabe, - emparelhado com algum JavaScript para animar ou deslizar conteúdo dentro de um - Contentor. - Então, - por exemplo, - se você estiver construindo um controle deslizante de imagem, - você poderia definir um elemento para ter seu overflow definido como oculto, - e você poderia fazer imagens mawr que cabem dentro desse quadro. - E então você pode usar JavaScript para animá-los. Então uma seta move essas imagens para a esquerda e para a direita, e você só pode ver uma imagem de cada vez, as outras para o ar escondido porque você tem o estouro definido para oculto como um exemplo para uso disso, ouso disso, - você também tem pessoas às vezes fazendo algo chamado Overflow Auto. - Vamos ver o que isso faz. Se eu mudar o carro transbordado, recebo uma barra de rolagem. - Então em Lyon e linha Mac, - você pode não ver a barra de rolagem porque você vai ter que passar o mouse sobre. E então, se você usar o toque de dois dedos no touch pad ou sua roda de rolagem na boca, ele realmente vai rolar É só que eles escondem a barra de rolagem aqui, mas você pode ver em janelas e também em ah - Mac Snow Leopard. - Você vai ver. - A maioria dos navegadores criará uma barra de rolagem aqui. - Então, se o conteúdo é maior do que vai caber, - se definir o overflow toe auto vai realmente obter uma barra de rolagem vai aparecer. Neste caso, tenho uma barra de rolagem vertical. - O conteúdo era muito amplo. - Eu teria um pergaminho horizontal. O bar está bem, então essa é a propriedade de transbordamento, que é útil para controlar. então essa é a propriedade de transbordamento, Você sabe como o conteúdo dentro de um elemento fluirá, transborda fora do elemento ou não. Você sabe como o conteúdo dentro de um elemento fluirá, - Ok, ótimo. Já que olhamos o quão alto ele responde novamente, notamos que se definirmos a altura para automática ou removermos a altura, percebemos que o conteúdo simplesmente se expande tão alto quanto precisa ser. Já que olhamos o quão alto ele responde novamente, notamos que se definirmos a altura para automática ou removermos a altura, - Vamos dar uma olhada no que acontece se nós definir o com o auto ou, - em outras palavras, - se nós apenas remover o corte de largura. - Então, novamente, - hum, - esses elementos de nível de bloco de ar ou eles estão exibindo bloco. - E se eu não especificar A com para elementos de nível de bloco que eles apenas obter é largo como eles podem ser -. - Eles basicamente ocupam 100% do espaço na tela. Certo, Certo, que é exatamente o que queremos. - Às vezes. - Ocasionalmente, - queremos algo para esticar toda a largura da tela, - e você pode apenas usar um bloco elementos de nível e não especificar que é É com você. - Também poderia dizer que é com 2 100%, se você quiser. - Ok, vamos dar uma olhada nas diferentes possibilidades de dimensionamento então. - Então nós olhamos para, - um, - nós olhamos para exibição em linha versus bloco. - Nós olhamos para definir a largura e altura auto ou para corrigir quantidades de pixel. - E olhamos como o estouro reage se não houver espaço suficiente para que o conteúdo se encaixe dentro do elemento. Certo, Certo, então vamos dar uma olhada em outras possibilidades de largura e altura. - Hum, - vamos voltar aqui para com e vamos em frente e tentar uma porcentagem. - Então olhamos os pixels de novo. - Eu vou fazer isso. Isso é 200 pixels, por exemplo. Eu posso ir em frente e mudar com eles e correr, e você pode ver 200 pixels de com eles. E se eu disser algo como 50%? - Então vamos tirar o P X aqui e vamos colocar 50% assim e correr, - e você pode ver que ele está realmente ocupando 50% do disponível com aqui. - Você vai notar se eu esmagar esse cara assim. - Vê como é sempre exatamente metade desse espaço lá? - Ok, - então, - por exemplo, - se eu gostasse, - você sabe, - 75% como um exemplo - ele está então ocupando 75% do cuspe do lado de fora, - é claro, - e o preenchimento dentro porque ainda não definimos a propriedade de dimensionamento da caixa, mas você pode ver que está ocupando aproximadamente 75% do espaço lá. - Ok, então isso é um tamanho de fluido. Às vezes queremos ter o tamanho das coisas , escala baseada na largura do espaço disponível na tela. - E isso é usar uma porcentagem. Vamos também dar uma olhada no valor Min e Max, então vou mudar esse cara para um homem com homens do Museu Dash Wits nisso. Então é mais fácil de ver para salvarmos homens. - Dash com, - vamos sair e dizer 200 pixels. - E nós também vamos especificar um traço máximo com e vamos dizer tipo, - 600 pixels como esse. - Ok, - então homens traço com e Max traço com você também pode fazer Min dash height e Max dash height e - nós vamos e clique. - Corra. - Ok, então este é realmente o máximo de 600 pixels com que estamos vendo aqui agora. Mesmo que eu dê mais espaço na tela, vai ser o Onley no máximo com 600 pixels lá. E neste caso, 600 pixels mais o preenchimento e mais a margem porque estou no cromo, certo? Certo, vamos ver o que acontece se eu derrubar isso, vou arrastar essa janela para dar menos espaço disponível. - Ok, então aqui eu alcancei a borda. - Oh, - olha, - está diminuindo sua escala. - Sem problema. - Vai continuar diminuindo até eu atingir o mínimo com e depois vai sair do quarto. - Ok, - então lá, - quando eu chegar ao mínimo com você pode ver nós realmente obter uma barra de rolagem aqui na parte inferior - da tela aqui, - e eu tenho que usar essa barra de rolagem para rolar e ver o resto do conteúdo. - E isso é porque nós usamos os limiares de, - você sabe, - uma quantidade máxima de 600 uma quantidade mínima de 200 como essa. E mais uma vez, só se expandirá até chegarmos ao máximo. - E depois vai parar. - Ok, ótimo. - Então é um bom começo. - Entendendo o modelo da caixa. - Vamos voltar e falar sobre algumas das outras qualidades do modelo de caixa, como margem - e estofamento e borda. Então vamos começar adicionando uma fronteira a esse cara. - Nós vamos descer aqui e vamos em frente e adicionar uma borda a estas caixas. - Digamos que dois pontos de fronteira um pixel, - que é a largura da borda. - E então eu vou colocar um espaço, e eu vou especificar o estilo das fronteiras que vão ser sólidas. E se quiserem ver um exemplo dos outros estilos de fronteira, estarão olhando para isso nos slides daqui a pouco. - Ah, - e então podemos dar-lhe uma cor. - Então eu só vou dizer que o preto vai especificar a cor preta. - Lá vamos nós. - Então nós vamos voltar e vamos fazer isso e lá está a minha fronteira. - Muito legal, certo? - Então eu posso realmente, - você sabe, - mudar isso se você quiser ver, - como parece com 10 pixels, - se eu disser 10 pixels de borda e eu correr, - você pode ver que ele faz isso. - Vamos mudá-lo de sólido para tracejado para que possamos demonstrar onde a borda do fundo - cor termina aqui. - Então, se eu disser 10 pixels tracejados e eu clicar em Executar, - você pode ver que agora é uma linha tracejada para a borda e você pode ver a cor de fundo - vai direto para a borda da borda bem ali. - Vamos deixar isto um pouco mais fino . - Eu vou voltar para um sólido de um pixel como esse. E, E vamos brincar com o espaçamento, então. - Ok, então conversamos antes sobre margem e preenchimento. - Vou mudar de roupa. - Este tipo está com as costas, Teoh. - 101 100. - Então vamos ficar. - 100 pixels. - 100 pixels. Costumava fazê-las pequenas, manejáveis. pequenas Caixaspequenase gerenciáveis são mais fáceis de ver aqui. - Bem, então podemos aproximar mais assim. - Então vamos dar uma olhada no estofamento. - Agora mencionamos que o preenchimento é espaçamento dentro do elemento. Se você realmente quer ver o que é isso aqui, vamos definir este estofamento para zero e vamos ver o que acontece lá. - Vamos clicar em executar e você pode ver quando definimos o preenchimento para zero. - O texto está bem contra a borda da borda lá, - então preenchimento zero significa nenhum espaçamento dentro do elemento. - Agora, - se eu coloquei 10 pixels aqui como este 10 p x e nós saímos e corremos, - você pode ver agora que há 10 pixels de espaçamento em torno do elemento. E aqui porque temos a barra de rolagem, é só cortá-la lá. - Mas você sabe, - na verdade, - o que é isso é meio bagunçado. - Eu vou me livrar disso já que nós já aprendemos sobre propriedade overflow. - Vamos trazer isto de volta agradável e simples aqui. - Como aquele um em dois. - Ok, ótimo. - Enchimento é o espaçamento dentro do elemento? E se eu quisesse uma quantidade diferente de estofamento de cada lado? - Então, - por exemplo, - agora, - se eu usar apenas um valor se eu disser tapando 10 pixels, - ele adiciona 10 pixels no topo, - o fundo - o lado esquerdo e o direito. - Então, em CSS, - nós temos a capacidade de especificar coisas como preenchimento, - traço esquerdo, - você sabe, - batendo traço direito, - batendo traço top e batendo fundo traço. - E então você pode mudar a quantidade de estofamento do seu lado. - Hum, - agora, - no entanto, - na verdade é ainda mais fácil ou tipo Leicester. - Se você usar o método abreviado chamado tapinhas, - e, em seguida, - com base na quantidade de valores que você dá, - ele afetará qual lado é afetado. - Então, - por exemplo, - se você fizer um valor como este, - sabemos que, - um, - um valor, - hum, - afetará todos os lados. Então, se eu disser 10 pixels, significa 10 pixels em todos os lados. - Se eu disser a valores como este, - se eu disser 10 pixels 20 pixels apenas colocando um espaço entre aqui, - eu coloco vários valores neste caso para valores de dois valores. - Aqui, - o primeiro valor, - hum, - representa o topo e o fundo. - Então tanto a parte superior quanto inferior e o segundo valor aqui representa a esquerda e a direita, ou, você sabe, ambos os lados. Vamos em frente e colocar este comentário aqui embaixo, que eles se encaixem assim, vamos separar esses assim. Certo, então um valor afeta todos os lados. - Isso significa que temos preenchimento em todos os lados para valores representa que o primeiro valor é 10 - pixels na parte superior e inferior e 20 pixels na esquerda e direita. - Está bem. - Também podemos especificar preenchimento com três valores. - Por exemplo, - se eu disser, - como 10 pixels, - 20 pixels, - 35 pixels ou algo assim. - Então, neste caso, - se tivermos três valores, - o primeiro valor representa o topo para o 1º 1 é igual ao topo. - O segundo valor representa ambos os lados, - esquerda e direita, - e o terceiro valor aqui representa o fundo. - Então, se eu disser 10 pixels, - 20 pixels, - 35 pixels, - o que estou fazendo é dizer ao navegador que quero 10 pixels de espaçamento dentro do elemento em - os 20 pixels superiores de espaçamento em ambos os lados e 35 pixels de espaçamento na parte inferior. - Bom. E se por algum motivo eu quiser ter uma quantidade diferente de preenchimento em cada lado, posso especificar quatro valores. - Então, - por exemplo, - eu poderia dizer, - como, - você sabe, - 10 pixels, - 20 pixels, - 35 pixels, - 5 pixels algo assim. Então, neste caso, temos quatro valores. - E a maneira como você pode se lembrar disso é pensar em um relógio e lembre-se que você começa no topo às 12 horas. Então o primeiro valor, se imaginarmos que este é um relógio é o topo, certo? - E então o segundo valor aqui representa o lado direito movendo-se no sentido horário. E o terceiro valor aqui representa o fundo, e o quarto valor representa o lado esquerdo. Então, dependendo se você tem 123 ou 4 valores, isso vai mudar o espaçamento no navegador. - Ok, então eu poderia dizer, - preenchendo 10 pixels, - 25 pixels. - Animal. - Dê um zoom aqui e analisaremos esse cara no navegador. - E você pode ver que há 10 pixels no topo, - e, - bem, - na verdade, - é a parte superior e inferior, - mas não há nada perto do fundo lá. - E então temos 25 pixels à esquerda e à direita, então você pode ver 25 pixels aqui. - Há mais. - Há mais espaçamento no lado do que no topo. - Está bem. - E isso é usando os dois valores 10 e 25. - Ok, então este é o caso da margem. Além disso, a margem pode ser de valores diferentes. - Aqui, - você pode dizer margem, - 10 pixels, - 35 pixels, - quatro pixels. - E isso vai mudar para ser 10 no top 35 nas laterais e quatro na parte inferior. - Algo assim. Certo, então a margem é o espaçamento fora do elemento. - Vamos manter a margem igual em todos os lados. - Mas vamos dizer, - hum, - vamos torná-lo uma quantidade maior. - Digamos 30 pixels para ver o que acontece lá apenas para demonstrar que isso é espaçamento - fora do elemento. - Então vamos em frente e clique. - Corra, - e você pode ver que há mais espaçamento agora fora do elemento. - Ok, - então, - um, - preenchimento é espaçamento dentro do elemento margem é espaçamento fora do elemento. - Ele afasta elementos uns dos outros da borda externa deles. Certo, Certo, então isso é 30 pixels. - Você pode notar. - Aqui estão 30 pixels no topo, 30 pixels à esquerda e à direita e 30 pixels na parte inferior. - Mas espere um segundo. - Aqui. - Esta caixa aqui não tem 30 pixels na parte inferior e não tem caixa para ter 30 pixels e margem no topo. - Isso é interessante. - Então você pensaria isso porque eles deveriam estar 30 pixels abaixo deste e 30 pixels acima deste. - Que esses valores devem ser adicionados e 30 mais 30 devem ser 60 pixels. Na verdade, não há 60 pixels de espaço aqui. - Só há 30 e isso é por causa da forma como a margem se comporta. - A margem pode sobrepor-se. - Então, - por exemplo, - se eu disse que vai em frente e brincar com isso, definindo a margem superior para 30 - pixels, - digamos que a margem esquerda e direita é de 10 pixels. - Mas vamos colocar mais no fundo, - digamos 50 pixels de baixo. - Ok, - então agora o número da caixa, - uma vez que você tem 50 pixels de margem na parte inferior e a caixa número dois deve ter 30 pixels de - margem no topo. - Ok, - então se eu atualizar isso, - acontece que os 50 pixels vencem, - então este tem 50 na parte inferior - então ele está empurrando este outro elemento 50 pixels para baixo. Este aqui tem apenas 30 no topo, o que provavelmente acaba por aqui. Então, Então, este empurra 30 pixels, mas já está sendo afastado 50 pixels. - Então, estas margens de ar apenas se sobrepõem. - Eles não se acumulam, não se juntam. - Então isso é uma coisa para estar ciente sobre a margem. - Ok, então isso é ótimo. - Aprendemos muito aqui. - Olhamos para o tamanho destas caixas. - Nós olhamos para adicionar cores de fundo, - bordas e afetando a maneira como ele é exibido usando a propriedade de exibição que afeta o estouro de - o conteúdo usando overflow. - Nós também olhamos para explorar o espaçamento dentro do elemento, - usando preenchimento e fora do elemento usando margem. - Está bem. - E também aprendemos sobre as diferenças entre o tamanho da caixa e Internet - Explorer e o tamanho da caixa nos outros navegadores. - Então, - à medida que avançarmos para o posicionamento vai voltar para este modelo de caixa em, - e será útil para nós quando começarmos a criar a estrutura de colunas. 31. Estem Estas de caixa: - Vamos apenas ir em frente e voltar para os slides e vamos passar para a estética da caixa. - Ok, então vimos que poderíamos adicionar uma cor de fundo. Mas e se quisermos adicionar imagens de fundo em nossos layouts, o que será feito no exercício? - Vou demonstrar que um próximo exercício que também olhamos para a fronteira vai demorar alguns. - Vamos dar uma olhada em algumas outras possibilidades para borda em termos de estilo de borda, - e também vamos olhar para algo chamado raio de borda que podemos usar ao redor das bordas - de nossas caixas. - Então, se não queremos afiado quadrado fora das bordas, - também podemos ter bordas arredondadas usando CSS três propriedades de raio de borda. Também vamos olhar para a sombra da caixa para adicionar sombras, que demonstrará que no exercício também olhará para a opacidade, que nos dá a capacidade de fazer um elemento ver através ou transparente. - Então, mesmo se você colocar na imagem em e você quer que a imagem seja parcialmente transparente, - você pode definir a propriedade de opacidade de um elemento para torná-lo parcialmente visto através. - Também vamos procurar ingredientes que nos permitem adicionar um desbotado de uma cor para outra cor - dentro de um elemento em vez de apenas ter uma única cor de fundo. - Ok, então estes ar algumas propriedades de fundo. Então vimos a propriedade de fundo aqui na parte inferior, e ela aceita todos esses valores diferentes aqui em cima. Então vimos a propriedade de fundo aqui na parte inferior, - Então você também pode dizer fundo, - traço, - cor e simplesmente especificar uma cor. - Estes pequenos símbolos de pipe horizontal aqui apenas significam representar ou significando que você pode usar um - nome de cor ou hacks um decimal, - ou ele vai aceitar os valores RGB. - Aqui. Nós também podemos dizer imagem traço de fundo, e podemos ver que você é l. - E dentro de parênteses. - Podemos apontar para a localização de uma imagem específica. Isso vai colocar uma imagem em nosso elemento, e isso é diferente da tag de imagem. - O elemento AMG, - que cria, - essencialmente, - cria uma imagem de primeiro plano. - Sempre que você cria uma imagem usando o elemento de imagem, - ele realmente ocupa espaço no layout, - e você não pode colocar coisas em cima dela, - enquanto que com uma imagem de fundo, - você pode digitar em cima de um plano de fundo imagem. - Você pode colocar outros elementos em cima de uma imagem de fundo, - e ele simplesmente deslizará atrás de tudo. - Ok, então eles são realmente cooperativos. - Eles vão ficar atrás de tudo o que você colocar em cima dele. E muitas vezes, as pessoas usam isso para criar texturas lá dentro. - Website, - por exemplo, - Você pode se você tem uma câmera, - você pode sair e tirar fotos do mundo e jogar. - Essa é uma imagem de fundo por trás de seus elementos do site que você pode. - Além disso, se você tem um scanner que você pode ler pedaços de papel, - você pode ir lá fora e tirar como folhas de uma árvore. - Jogue-o na cama de digitalização e você pode digitalizá-lo. Uma vez tive um professor na minha graduação que estava nos mostrando as coisas que você pode fazer, Saran envoltório em um scanner, o que é realmente muito interessante. minha graduação que estava nos mostrando as coisas que você pode fazer, Saran envoltório em um scanner, - Então, se você tem um scanner e você não quer danificá-lo colocando como líquidos e coisas - nele que podem prejudicar o ICS de elétrons, - você pode realmente Saran embrulhar seu leito de varredura e você pode gostar de ovo cracker nele e digitalizá-lo . - E se você ampliar isso, você pode obter todo tipo de texturas interessantes e outras coisas. - É como olhar através de um microscópio se você ampliar em alguns scans de alta resolução -, - mas de qualquer maneira meio que está acontecendo em uma tangente lá. - De qualquer forma, - imagens de fundo são uma ótima maneira de ter alguma vibração em alguma personalidade para o seu site -. - Ok, - nós também plano de fundo posição traço, - e isso nos permite posicionar as imagens imagens de fundo para que possamos mover a - imagem dentro do elemento. - Se precisarmos posicionar T ver uma parte diferente da imagem ou fazer com que a imagem apareça em - um canto diferente do elemento. - Também podemos especificar se essa imagem se repete ou não. - Então, às vezes queremos, - como uma textura ou um padrão de azulejo, - repetir várias vezes em um elemento como uma imagem de fundo. - Outras vezes nós só queremos mostrar uma única imagem dentro dos elementos, - assim ser capaz, - ser capaz de dizer traço de fundo, - repetir e especificar se algo se repete ou não é muito útil. - Então você pode ver que você pode... - Isso aceita os valores de repetição. Também aceita repetição X, que se repete horizontalmente. - Também aceita mesa de repetição. Por que é um valor que está se repetindo verticalmente, e você também pode dizer não repetir, que significa que não irá repeti-lo. - Tudo o que também pode definir Rolagem de fundo e Rolagem de fundo vai afetar se ou - não que a imagem irá rolar quando o navegador rola. - Então, se o usuário estiver rolando para baixo a página, - podemos controlar se os estados de imagem corrigidos no lugar ou se segue a barra de rolagem -. - Então esse é um tipo de efeito de necessidade que você pode controlar. - Nós também podemos dizer tamanhos traço fundo, - uma nova propriedade CSS três. - E embora isso não tenha suporte total em todos os lugares, - isso pode ser uma maneira útil de criar imagens de fundo que se estendem automaticamente para o tamanho do seu navegador. - Então, se você colocar uma, - um, - uma imagem de fundo no corpo, - hum, - e você disse que é tamanho de fundo para 100%, por exemplo, - para aumentar com, - ele vai esticar o para que, à medida que a janela do navegador se torna maior, - menor, - essa imagem será dimensionada com ela. - Então isso é um tipo de efeito puro que você pode criar usando o tamanho de fundo. - Bem, - olha, - é que vamos ter alguns exemplos disso no exercício que se aproxima agora. - Muitas dessas coisas, - com exceção desses dois últimos rolagem de fundo, - tamanho de fundo que as propriedades 1st 1234 aparecem pode realmente ser escrito em uma única propriedade aqui chamada Fundo. - Então esta seria a abreviação semelhante à forma como temos fonte para abreviação. - Você pode apenas dizer fundo e em vez de dizer cor do traço de fundo, - fundo, - imagem do traço, - fundo, - posição do traço, - fundo, - traço. - Repito, - você poderia apenas dizer fundo. - E colocando um espaço entre os valores, - você pode especificar Ah, - cor e imagem, - e está repetindo e posicionando informações tudo em um único valor. Este é um exemplo da abreviação da fronteira, que acabamos de ver, e que acabamos de ver, abreviação esta é umaabreviaçãopara o tamanho do traço da borda, e a cor do traço da borda e o estilo tracejado da borda. - E você podia ver todos os estilos aqui. - Sólido, - traço pontilhado - sulco duplo, - Rhijn disse Início. - E é assim que eles se parecem. - Tão sólido faz uma linha sólida. Se você definir a célula de fronteira para traçar para obter uma linha de traço, que vimos pontilhada faz estes pequenos diamantes aqui. - Duplo é uma linha dupla e Groove Ridge incidente Início. - Pegue qualquer cor que você especificar, - e eles criam como uma versão clara em uma versão escura da mesma cor. - Eu acredito que é 50% de 100% Phil para qualquer cor que você escolher para a borda. - Então estas eram algumas outras possibilidades para o estilo de fronteira que são aceitas. - E tudo isso funciona em todos os lugares. - Estes estão funcionando todos os navegadores, - antigo e novo, - porque o estilo de borda tem sido em torno de um longo tempo. - Ok, - então novo e CSS três, - nós também temos raio de fronteira e raio de fronteira é ah é a maneira que você está indo Teoh rodada - os cantos de seus elementos, se você escolher. - Está bem. Então, a fim de trabalhar em todos os lugares, usamos Border, raio de traço e este é um prefixo chamado kit web de traço. - Muitas vezes, quando uma nova propriedade CSS é introduzida no CSS, - o que acontece é diferente. - Os navegadores têm que determinar como eles vão aceitar essa propriedade e como o valor irá - afetar seu navegador particular, - como seu navegador particular irá exibir essa propriedade neste valor. - Então o que acontece muitas vezes é que diferentes empresas de navegadores, - enquanto eles ainda estão tomando decisões e determinações sobre como eles vão aceitar essas propriedades - CSS e como eles vão exibir esses valores, - eles criam algo chamado um prefixo onde eles levam o nome da propriedade. - Mas eles adicionam um traço e, em seguida, algum tipo de prefixo no início que lhes permite - controlar. - É como um futuro experimental,também, também, para permitir que eles controlem o valor de uma maneira específica em seu navegador. - Isso não afetará outros navegadores. - Então, - por exemplo, - kit web traço vai afetar o raio da borda e navegadores como cromo e safari. Considerando que para o Internet Explorer, , as versões antigas do Internet Explorer do IE não estão aceitando raio de fronteira, então não precisamos nos preocupar com isso. as versões antigas do Internet Explorer do IE não estão aceitando raio de fronteira, - Mas enquanto que para o Firefox você pode apenas agora dizer raio de traço de fronteira, - por exemplo. - E você sabe, - alguns meses para talvez foi cerca de um ano atrás. - Você costumava ter que usar Dash M o Z painel um raio para Fox fogo. - Agora você pode apenas dizer raio de fronteira e ele vai acreditar na verdade no cromo isso funciona agora para - um tempo se move. - Você pode uma banda, - você pode abandonar o prefixo aqui. - Ok, - então, - raio da borda um, - você também pode especificar qual canto da caixa você está interessado em arredondar assim dizendo - como borda traço superior traço esquerdo você pode arredondar apenas o canto superior esquerdo da caixa, - ou você pode dizer traço superior direito ou inferior, - traço inferior esquerdo direito. - E você pode fazer o arredondamento dos tamanhos do canto da caixa diferente em diferentes cantos. um Colocandoumúnico valor, ele irá em torno dele uniformemente. - O que isso faz é tirar do canto onde o ponto teria existido. - Ele realmente vai 15 pixels e arredonda 15 pixels fora do canto do elemento. Se você usar dois valores aqui, você pode controlar a diferença entre horizontal versus vertical. Se você usar dois valores aqui, - Por exemplo, - este primeiro valor aqui diz raio de borda 100 pixels e, em seguida, espaço 50 pixels. - Você pode ver aqui no topo, - há na verdade horizontalmente. - Há 100 pixels arredondados e verticalmente. - Só tem 50. - Então isso faz uma curva diferente aqui versus 50 pixels. - 100 fariam isso. - Ok, então você pode aplicar vários valores aqui, vários tamanhos de pixel Teoh aqui para o raio da borda, e você pode mudar a forma como ele arredonda. - Ah, - este é um suporte atual. Pelo menos no momento da gravação, você tem cerca de 80% de suporte global para o raio da fronteira. Funciona numa Internet explorando nove, mas eu tenho oito e sete simplesmente não o apoiam em tudo. Então, vale a pena notar que, basicamente, o que acontece é que não há nenhum mal feito. É que, em oito anos, ele irá ignorar essa propriedade de raio de fronteira e você só tem bordas quadradas em seus elementos . - Ok? - Também temos sombra de caixa. - Se algum de vocês estiver familiarizado com programas da Adobe como Illustrator e Photo Shop, onde você pode adicionar uma sombra de caixa ou uma sombra, é chamado em CSS três semanas e também agora em uma sombra de caixa. - E parece exatamente o mesmo e tem o mesmo tipo de configurações que você faria - obter para a loja de fotos. Então esta é realmente uma boa maneira de adicionar sombreamento e sombras em elementos, entãoa maneira de corrigir isso é dizer caixa, sombra de traço. Então esta é realmente uma boa maneira de adicionar sombreamento e sombras em elementos, então a maneira de corrigir isso é dizer caixa, - E para fazer isso funcionar e até mesmo navegadores mais antigos, - você pode usar esses prefixos Web kit e M o z para fazê-lo funcionar lá. O garoto da Web vai ser para safári e cromo e M Z vai ser para versões mais antigas do Fogo Fox aqui. - Ok, - então aqui temos sombra de cinzas em caixa, - e o primeiro valor que você pode colocar é chamado deslocamento horizontal. Então, cinco pixels vão empurrar a sombra cinco pixels para a direita. Um valor negativo empurraria cinco pixels para a esquerda. o Eopróximo valor é vertical. - Então isso vai colocar cinco pixels para baixo. - Um valor negativo faria com que a sombra subisse cinco pixels até o topo. - Se ele disse cinco pixels negativos, - por exemplo. - E o terceiro valor aqui é chamado de Raio de Desfoque. - Isto é o quão longe o borrão se espalha. - Se você disser zero pixels, - será uma sombra afiada. Enquanto que se você adicionar um número maior de pixels para a desfocagem que ele vai suavizar, ele vai espalhar a borda da sombra. Enquanto que se você adicionar um número maior de pixels para a desfocagem que ele vai suavizar, E por último, aceitamos o valor da cor para que você possa usar qualquer cor aqui. - Aqui. Eles usaram uma cor cinza para demonstrar isso, e vamos adicionar isso em nosso exercício. Vamos adicionar algumas sombras a algumas seções diferentes da página, e vocês provavelmente já viram alguns exemplos de opacidade. - Este é um exemplo de alguém usando opacidade no menu. - Então há um menu suspenso e que os homens que você vê através para que você possa ver a imagem por trás dele . - Então a opacidade é escrita usando a propriedade de opacidade e dando-lhe um número entre zero e - um. - Então CSS 3 A maneira moderna de fazer isso é apenas dizer opacidade e 0,5 seria o equivalente a 50% de opacidade e um seria o equivalente a 100% de opacidade. - Agora, - se você tem uma cor sólida, - você é realmente melhor para usar a propriedade RGB para cor e apenas definir o fundo - cor com um RGB um valor. - Então lembre-se de um em RGB A é Alfa. - Nós olhamos para isso em um exercício anterior. - Pode voltar e verificar se quiser. - Quando chegamos lá foi quando começamos CSS pela primeira vez. - Você pode verificar isso em sistemas de cores de vídeo para CSS. - A razão pela qual você gostaria de usar RGB um valor em vez de uma passagem se você está apenas - fazendo uma cor de fundo é um pouco mais simples apenas fazer o plano de fundo ter - transparência versus todo o elemento. - Então uma coisa a ser ciente aqui é se você definir a opacidade para um valor mais baixo aqui, - não só vai afetar o fundo, - mas também vai afetar todas as coisas dentro do elemento também. Então, se houver imagens de textura dentro do elemento, também as tornará opacas ou parcialmente transparentes. - Aqui em cima, - você pode ver todas as soluções de retorno para navegadores mais antigos. Isto é para muito velho, como um safári. - Você pode usar K html opacidade traço para afetados em versões mais antigas do safari. - Super velho. - Eu não sei o quão maney eu quero dizer, - eu comecei a duvidar que, - você sabe, - tem que ser, - como 1% ou menos de 1% da população, - usando como as primeiras versões do Firefox e Safari. - Eu realmente não me preocuparia muito com isso para o Internet Explorer. Você pode ter que usar a propriedade do filtro para fazer isso funcionar e este vai funcionar para você em todos os outros lugares. - Fora de tudo está usando opacidade. - Aqui está o suporte global atual para usar apenas a opacidade. Você pode ver que agora você pode usar a propriedade de opacidade, e você vai obter cerca de 95% de suporte global para isso. Você pode ver que agora você pode usar a propriedade de opacidade, - Oh, sim. E aqui diz que, para oito anos, você deve usar o filtro. para oito anos, Então, para 87 88 você deve usar esta propriedade de filtro aqui para essas pessoas, o que provavelmente é cerca de 10% da população lá. - Ok, então aqui temos Grady INTs. Então, quando você diz cor do traço de fundo, sabemos que podemos especificar uma cor. - Esta é uma cor decimal hexi. - Não tenho a certeza de que cor é esta. - Mas você pode dar uma cor sólida a um fundo. - Hum, - e então você também pode usar imagem de fundo traço. - E em vez de vincular a uma imagem, - você pode especificar um Grady int, - e você pode ver aqui, - este é o, - um este é o prefixo para Firefox, - e este é um prefixo para, Safari e cromo, que usa o kit web. Safari e cromo, E ouça o que faz pelo Mazzilli, certo? - É um pouco diferente do que para a tese. - Afari em cromo. - Escreve assim. - Usando paradas de cor da Mozilla É muito simples. Você só usa, , hacks de cor, uma cor decimal, uma cor decimal e então você coloca uma vírgula e coloca a outra cor que você gostaria que ela se desvanecesse. o Paraokit Web, você pode especificar o tipo de Grady. - É um pouco mais sofisticado. - Você tem mais possibilidades. - Você poderia fazer um rádio Grady Int ou um Grady Int linear, - e você pode especificar o ah, - o posicionamento de onde ele começa e pára e a porcentagem do elemento que ele - mede através. - E você também pode definir paradas de cor para que a primeira parada tenha essa cor na segunda parada - tem essa cor, - e nós vamos realmente dar uma olhada em usar algumas ferramentas on-line no exercício para criar esses - Grady INTs. - Então o Grady e o apoio não são tão bons como os outros que te mostrei. - Mesmo usando o kit Web em prefixos M O Z. - Ainda há alguns navegadores como o Internet Explorer nove, - mesmo que não é realmente tão velho não suporta em tudo. Então só temos cerca de pelo menos no momento de filmar este vídeo, nós realmente só temos cerca de 65% do apoio global. - Então o que você faz é especificar uma cor de fundo. E se o navegador mais antigo não consegue entender o Grady com essa cor de desvanecimento, é padrão ter cores sólidas. Escolhe uma cor que te agrada como uma solução alternativa para navegadores mais antigos, e deve funcionar bem ainda. 32. Floating: - em seguida, vamos falar sobre o posicionamento flutuante ou flutuante. - Então esta vai ser a sua solução para criar estrutura de coluna em seus layouts de página - você pode ver neste exemplo aqui esta pessoa tem um cabeçalho e um rodapé na parte superior e - inferior da página, - e eles gostariam de criar uma barra lateral que está posicionado à esquerda de algum conteúdo principal. - Essa é a posição aqui à direita. Então, usando o enfraquecimento flutuante, diga a um elemento para flutuar para a esquerda e este outro elemento aqui para flutuar para a direita. - E isso vai nos permitir ter elementos de nível de bloco que podem aparecer lado a lado. - Então, se definirmos a barra lateral, - digamos que este aqui é um div que tem uma idéia de barra lateral e talvez este é um def tem uma - idéia de quero dizer, - nós podemos então definir libra barra lateral para flutuar cólon esquerda e enfraquecer set principal para flutuar cólon direito -, - então a propriedade float nos permite especificar esquerda ou direita. Então, sempre que você flutuar elementos, temos que estar cientes de que há algumas coisas patetas que vão acontecer, então, inicialmente, quando você começar a aprender posicionamento flutuante pode realmente ser bastante frustrante. Mas desde que eu explique claramente todos os problemas que você pode encontrar quando você está usando o posicionamento flutuante, então espero que você não seja perguntado, frustrado, e você terá um entendimento claro sobre por que certos elementos estão se comportando mal. - Então, neste exemplo, - eles realmente flutuaram o conteúdo principal para a esquerda, - e eles decidiram flutuar a barra lateral para a direita e eles tinham um rodapé que estava - embaixo aqui embaixo. - Mas o que aconteceu? - É meio estranho. - O rodapé deveria ficar no fundo. Lembre-se, aqui em cima temos o rodapé no fundo. Mas por alguma razão, quando flutuo coisas, elementos que estão abaixo das coisas flutuantes tendem a tentar puxar para cima ao lado delas. - Agora. Às vezes isso é desejável, então às vezes queremos envolver texto em torno de imagens e uma página, e coisas assim e flutuar é ótimo porque sempre que você flutua algo, elementos que estão abaixo do elemento que flutuam no ar são afetados por isso, - e eles tendem a puxar para cima ao lado dele se eles podem caber lá. Então, neste caso, o rodapé tem algum espaço para caber abaixo da barra lateral. E como essas coisas estão flutuando, vai tentar puxar ao lado ou ao lado das coisas que estão flutuando. - E isso é simplesmente porque o rodapé estava fisicamente no código abaixo das coisas que estão - flutuando. - Então está parando ao lado dele. Se quisermos evitar isso, podemos impedir que isso aconteça. Se quisermos evitar isso, Às vezes queremos que isso aconteça. - É uma coisa boa, e outras vezes ficaram chateadas porque este elemento não devia estar aqui em cima. - Queremos que o rodapé volte aqui. Então, se quisermos dizer ao rodapé, para não se mover ao lado dos carros alegóricos, podemos usar uma propriedade e CSS chamada clear. - Podemos dizer claro ambos, dizendo Rodapé claro. Ambos foram capazes de obter esse rodapé para limpar Passado a altura desses elementos tão clara - aceita três valores diferentes que você pode dizer clara esquerda e que irá limpar além da altura - de qualquer coisa flutuando para a esquerda e para cima. Lee passou o auge das coisas flutuando para a esquerda, e você também pode dizer direito claro, que irá limpar além das alturas de qualquer coisa flutuando para a direita, ou para cobrir todas as suas bases. - Você pode dizer claro ambos, - e ele vai limpar passado a altura de ambas as coisas que estão flutuando esquerda ou direita. - Ok. - E novamente, então, isso permite que o rodapé para limpar além do conteúdo médio e da barra lateral. - Está bem, está bem. - Então, se isso não é realmente suficiente, - tipo de ocorrências patetas que flutuam causa flutuar tem algumas outras coisas que ele faz - que é um pouco estranho. Mas, novamente, contanto que entendamos por que está fazendo isso e como consertá-lo, não será frustrante para nós. - Então outra questão que você às vezes tem quando você está flutuando um elemento é que você tem - algo chamado um pai colapsado. Imagina que esta caixa cinzenta aqui é um pai, que significa que é um contentor, e colocamos estas caixas dentro dela. Certo, aqui tenho impostos que dizem, sou pai estático, certo? - E eu flutuei estas três caixas para a esquerda nesta caixa para a direita. - Uma coisa vai apontar aqui é que quando você flutua algo para a esquerda, - se há outros elementos que podem caber lá que também estão flutuando para a esquerda eles - apenas vão empilhar lado a lado como este. - Então às vezes você pode criar uma estrutura multi-coluna simplesmente flutuando tudo em uma direção, o que é um truque legal para fazer isso. - Ok, então acontece que isso é apenas algo para estar ciente. - Você tem dedos sempre em mente quando você está flutuando algo é que sempre que você - flutuar todas as crianças dentro de um pai - é um Ziff. - O pai já não tem uma referência de quão alto deve ser. A metáfora que usei para isso é Imagine que você sabe, normalmente elementos. Quando estão dentro dos pais, é como quando estão no ensino médio e ainda não se formaram. Quando estão dentro dos pais, - Eles não saíram da faculdade. os Eospais guardam o quarto para eles. Como se ainda estivesse, ainda não saiu da escola. - Você é um elemento estático. - Você não está se posicionando. Você não está flutuando ainda, então quando está no colegial, você não está flutuando e seus pais ficam com seu quarto para você. - Eles são como, - Oh, - este é o seu quarto. - É o seu espaço. - Você mora aqui. E por essa razão, o pai tem uma referência para o tamanho certo. - Pode cercar a criança. - Agora, - Agora, quando você flutua um elemento, é como mandar para fora da faculdade. - É como se flutuasse. - Então é como se tivesse saído de casa. E mesmo que pareça estar dentro desse elemento pai, ele está flutuando. - Então esses caras estavam flutuando para a esquerda. - Este está flutuando direito. E como todas as crianças que flutuaram da faculdade, os pais já não guardam o quarto para eles. Basicamente, o pai já não tem uma referência de quão alto deve ser. - Então desmorona. Ou talvez você possa dizer que os pais desmoronam porque eles ficam tristes porque todas as crianças flutuaram para longe. - Então nós podemos realmente corrigir isso usando algo chamado Fix claro, - que é uma espécie de hacker CSS - uma solução que os desenvolvedores criaram ao longo dos anos para corrigir esse problema. - Então você pode realmente parar aparente de colapsar mesmo que seus Filhos estejam flutuando como - isso e obter esse efeito usando algo chamado Solução clara fixa. Isto parece um monte de CSS, mas vou desvendar isto para ti. Isto parece um monte de CSS, Basicamente, o que está acontecendo aqui é que você está criando uma classe, e você pode nomear esta classe o que quiser. - Normalmente, - isso é chamado de correção clara. - E de fato, - se você abrir o seu navegador e você corrigir o Google, - ele vai aparecer com toneladas de sites que onde você pode copiar e colar este código para que você não - tem que memorizá-lo. - E também muita discussão sobre isso e porque o usamos. - Eu vou fornecer um link abaixo do vídeo lá vai, - ligado ao seu tutorial dando o código e também discutindo correção clara. Então a primeira coisa que fazemos é criar uma classe, e escolhi nomear essa solução clara, que é o nome comum que as pessoas chamam isso. E então estamos usando um seletor de pseudoclasse especial chamado Depois. Estamos dizendo dois pontos depois . - Então o que depois faz é qualquer elemento que você aplicar essa classe, ele vai entrar nesse elemento, e depois de todas as crianças, ele vai aplicar esse estilo que você coloca aqui. - Vou dizer isso mais uma vez. - Então, aplicando a pseudo-classe selecionada aqui, - dois pontos depois que vai permitir que ele funcione de modo que qualquer elemento que aplicamos esta - classe de claro fixo a sua indo para dentro desse elemento e depois de Colin, - afinal de contas de seus Filhos, - nesse elemento no nosso caso, - todos depois de todas as crianças flutuantes ele vai aplicar este estilo. - Então o que estamos fazendo é adicionar uma propriedade aqui chamada conteúdo e entre aspas. - Vamos colocar uma mensagem. - Você pode realmente literalmente digitar a palavra Olá aqui, - e você verá a palavra Olá aparecerá depois de todos os elementos flutuantes. - Então o conteúdo é a maneira que você pode realmente usar CSS para inserir conteúdo de texto em um elemento. - Ok. - E esta é na verdade a única vez que eu uso esta propriedade porque eu gosto de reservar CSS para - styling. - E eu gosto de reservar html para realmente criar texto e conteúdo físico que é respeitador - por uma teoria chamada separação de preocupações. - Onde queremos separar HTML é ser conteúdo e CSS para ser estilo. - Esta é uma pequena exceção à regra em que todos realmente adicionar um símbolo de ponto depois de tudo - o conteúdo que eu sei que parece loucura - mas fique comigo aqui. - Aguente firme nisso tudo lentamente, juntem-se e faça sentido por que estamos fazendo isso. Então, basicamente, criamos uma classe chamada correção clara. - Dizemos cólon depois e vamos aplicá-lo ao pai que está desmoronando. Então o que vai acontecer é qualquer pai que você conheça, o pai em colapso que precisa passar pelas crianças flutuantes, aplicamos essa classe a ela. E dentro deste elemento, este pai em colapso, vai atrás de todos os elementos flutuantes porque usamos o cólon depois e vai adicionar um símbolo de ponto. - Na verdade, - fisicamente um pequeno ponto aparecerá que o símbolo de ponto ou o caractere de texto do período - aparecerá abaixo de todas aquelas Crianças flutuantes. A próxima coisa que fazemos é dizer ao conteúdo para exibir o bloco, e lembro-me de elementos de nível de bloco, o rei do espaço horizontal. Eles ocupam todo aquele espaço horizontal lá em baixo e já que não temos um com - especificado para o conteúdo, - ele vai ocupar 100% do espaço dentro daquele contêiner pai. - Então agora o nosso pequeno símbolo de período é um item de nível de bloco na página e ocupa todo o - espaço horizontal, - e então usamos nosso amigo Clear ambos. Lembre-se, usamos os dois antes no rodapé. - O que limpa você vai limpar, - você vai se lembrar é o que costumávamos dizer a qualquer elemento neste caso, - este pequeno período símbolo conteúdo para limpar além da altura de qualquer coisa flutuante. - Então isso move esse símbolo de período para limpar além da altura das crianças flutuantes. - Ok, e então nós basicamente temos uma referência para a altura dos pais. - O contêiner pai agora sabe a altura que deve ser, porque este símbolo de período foi empurrado para baixo abaixo de todas as Crianças flutuantes. - É tipo, - se você imaginar, - se usarmos a metáfora dos elementos flutuantes são como as Crianças flutuaram - a faculdade. - Esta solução clara de correção é como ter um estudante de intercâmbio vindo e ficar - com os pais para que eles saibam basicamente para assumir o seu quarto para que a casa - não feche direito ou em outras palavras, - então o Os pais não estão tristes. - Eles não desmoronam a altura. - Dá aos pais ou referência para a altura de ter, porque há um estudante de intercâmbio sair por aí, neste caso de período. - Mas não queremos ver este estudante de intercâmbio porque isso vai fazer o nosso que soa - mau. - Mas vai fazer o nosso layout parecer confuso porque teremos um pequeno símbolo de período - visível, - visível - debaixo estão elementos flutuantes. - Então o que fazemos é definir a visibilidade para escondida. - Então isso é como o estudante de intercâmbio que está sempre estudando e você nunca realmente os vê. - Então nós fazemos o símbolo de ponto escondido dizendo visibilidade oculta, - e nós nos certificamos que ele não ocupa qualquer altura dizendo altura zero e altura da linha, - que é a altura do texto, - a altura entre linhas de texto para zero. - E isso fará com que em todos os navegadores, - este pequeno conteúdo seja invisível. - Então este conteúdo dá ao pai uma referência sobre a altura a ser para que não desmorone, mas também o tornamos invisível. - Então está escondido. - Então este é um tipo de um tipo muito louco de código aqui, - mas na verdade isso funciona muito bem e vai funcionar em todos os navegadores. - Ok, vamos dar uma olhada nisso dentro de um exemplo. - Então, uma coisa é eu falar sobre essas coisas. - Mas e se nós tivermos um exemplo real aqui, - olhar para o dedo do pé. - Então, vamos. - Este é o tinker dot io e você pode usar este comprimento CB 3 46 para ver a versão completa do - este exemplo. Se quiser dar uma olhada mais tarde, pode ver que acabei de criar algumas dibs. - Estas são apenas algumas caixas que vamos usar layout distante. - E este 1º 1 só tem a palavra acima escrita nele. - E eu dei a ele uma classe de acima de novo. Só estou dando nomes genéricos de classe. - E também temos um no fundo aqui com uma classe de abaixo, e que também tem a palavra abaixo escrita nele. - E aqui temos um contentor. - Este é o contentor dos nossos pais. - O que é que eu dei um nome de classe de recipiente e aninhado dentro deste este pai é três caixas que eu dei uma classe de caixa e apenas nomeá-los aqui. - 123 Ok, - vamos dar uma olhada no código CSS U. Nós escrevemos para esses caras então Então, a caixa do topo que tem uma classe de acima. Demos a esse cara uma cor de fundo de lima, e também demos 10 pixels de espaçamento dentro e uma margem, que é 10 pixels de espaçamento lá fora. - Ok, - nós também demos uma cor de fundo para o recipiente para que possamos ver todos esses elementos. - Todos têm uma cor de fundo. - Isso também tem preenchimento e margem. - Também temos uma caixa aqui em baixo que tem uma cor de fundo de Aqua e Samos. - As caixas no exemplo anterior Nós apenas lhe demos uma largura e altura de 100 pixels e - algum preenchimento e margem também. então Eentãotambém temos essa classe no fundo aqui chamada ponto abaixo. - Então, abaixo tem uma cor de fundo de amarelo e tem algum preenchimento e margem. Certo, então se viermos aqui, podemos ver ... Aqui está nossa caixa lá em cima. - Aqui está o nosso pai contentor e aqui está em baixo. - Agora, - por padrão, - todos esses dias, - bloco de exibição de ar. Então eles estão ocupando 100% da tela, e eles não têm nenhum posicionamento especial. Nenhum deles foi dito para flutuar ainda, então, por causa dessas dibs de ar, eles estão exibindo um em cima do outro, seu rei do espaço horizontal aqui. - Então 12 e três ou empilhados verticalmente. - Agora, - digamos hipoteticamente que eu gostaria de fazer esses caras se posicionarem em uma coluna - estrutura. Digamos que queremos fazer três colunas 123 lado a lado para que possamos descer aqui nesta classe de caixa e eu desço aqui e vou usar a propriedade aqui chamada Flutuante. - Então vamos definir estes para flutuar posição e vamos dizer flutuar para a esquerda. - Então eles vão o mais longe possível para a esquerda dentro deste pai. - E se o espaço deles, - eles vão empilhar lado a lado, - contanto que haja espaço disponível para que todos se encaixem - parece que há muito espaço aqui - então deve funcionar. Então temos esses caras para flutuar à esquerda e eu vou clicar em correr, e lá podemos ver esses caras no ar agora exibindo lado a lado. - 123 estão flutuando agora. Então estamos vendo algumas coisas patetas acontecendo aqui, isso frustra muitas pessoas quando estão lidando com posicionamento. - Quero apontar algumas coisas. - Ok, - então primeiro de tudo, - a div chamada acima não é completamente afetada pelo fato de que esses ar flutuando. - Vou dizer isso de novo. - O elemento acima dos elementos flutuantes. - Este, o Div. Com a classe de cima aqui, este tipo não é afectado pela flutuação. - Então, sempre que você flutua algo, ele em Lee afeta elementos abaixo desse elemento que está flutuando em elementos Lee que estão fisicamente escritos aqui embaixo assim. - Este fundo se você é o rodapé, - isso é que tem uma palavra abaixo escrito nele é afetado. - Corte. Então, porque esses caras estavam flutuando esse cara aqui embaixo, ele pode caber. Então está tentando flutuar ao lado desses caras. - Ok, então como eu conserto isso? - Se eu alguma vez tiver um elemento que eu não quero o dedo flutuar ao lado dos meus outros elementos aqui? Se eu não quiser parar ao lado desses elementos flutuantes, posso dizer para ultrapassar a altura desses elementos flutuantes. - Então, para fazer isso, - Eu vou para touro da classe de baixo aqui, - e nós vamos ir em frente e dizer isso claro Colon e eu vou apenas salvar os dois que vai limpar - passou qualquer coisa flutuando esquerda ou direita. - Neste caso, - eu poderia escapar apenas com a esquerda limpa. Mas para estar no lado seguro, cobrir todas as minhas bases vai dizer claro ambos assim. - Então eu disse este div de baixo para limpar ambos. - Agora, - se eu atualizar que você pode ver agora abaixo está se comportando e está escorregando abaixo desses elementos flutuantes . - Então isso é uma coisa que pode tipo de estresse quando você está usando a posição flutuante, você só tem que estar ciente do fato de que quando você flutua as coisas, elementos abaixo delas podem aparecer ao lado dela. - E você pode querer que isso aconteça ou você pode não querer que isso aconteça. - Se você não quer que isso aconteça, você pode definir para limpar ambos assim. - Ok, - outras coisas que estão acontecendo que podem meio que, - um, - frustrar você como você pode ver o elemento pai desaparecer porque eu dei a este pai - recipiente um pouco de preenchimento. Está mantendo pelo menos um pouco de estofamento dentro dele, então vejo que é um ótimo bar. Mas se você remover este estofamento, você pode até ver coisas desaparecerem como este relógio este ano. Se eu dissesse isso a zero preenchimento no contêiner pai, você não pode realmente vê-lo. - Pode dizer a si mesmo : - O que aconteceu com o contêiner? - Não vejo mais a cor de fundo. Ocasionalmente, você vai querer cercar suas colunas. - Talvez se você quiser outra cor de coluna atrás deles ou outra imagem atrás deles. No caso do exercício, vamos acrescentar, como uma textura de madeira atrás da estrutura da coluna. Então vamos precisar de um contêiner de pais lá. E se você não quer que esse pai desmorone este grande pai aqui, precisamos usar a solução clara para fazer isso funcionar. se você não quer que esse pai desmorone este grande pai aqui, - Ok, então vamos em frente e adicionar essa correção clara aqui. - Então, novamente, - os elementos flutuantes são como crianças que saíram da faculdade e os pais tristes, - muito tristes que ele desmorona. - Já não tem uma referência para a altura de ser. - Ok, então o que fazemos é ir para o CSS e vamos corrigir essa correção clara. Então, vamos dizer “Dot Cleaner” e, novamente, é apenas um nome comum para nomeá-lo. - Pode dar o nome que quiser. - E nós vamos dizer cólon depois, - que vai especificamente para o elemento. Aplicamos isto a um anúncio, este estilo, depois de todos os outros elementos, a todos os outros elementos Children dentro dele. - E vamos dizer “contente”. - Então eu vou dizer contente. - E eu vou fazer um símbolo de período porque é pequeno e despretensioso. E vamos dizer a esse conteúdo para exibir o bloco para que ele ocupe todo o espaço horizontal lá, e então vamos basicamente dizer a esse cara para limpar, assim como fizemos com a caixa abaixo. - Queremos isso agora. - Queremos este símbolo de período. - Vai aparecer, - você sabe, - como abaixo estão ao lado de todos estes. - Você sabe, - vai cólon depois significa que vai aparecer depois de todas essas crianças flutuantes - e nós vamos configurá-lo para exibir bloco para que ele ocupe todo o espaço horizontal - e então nós vamos dizer claro ambos para limpar passado a altura, - e agora o pai deve ter uma referência para a altura a ser. - Mas não queremos ver esse símbolo de período. - Isso não vai ser muito atraente. Então vamos definir a visibilidade como oculta, e também vamos definir sua altura para zero. - Então o símbolo do período não ocupa altura. - E também queremos dizer altura da linha e definir a altura da linha do texto para zero assim. - Ok, então esse é o primeiro passo é criar uma classe que possamos aplicar. E podemos aplicar isso agora a qualquer elemento, qualquer elemento aparente que esteja em colapso. - Ok, então nós vamos até aqui para o pai que tem o problema. - Então esse cara chamado contêiner de classe que tem a cor cinza de fundo. - Este é o que tem o problema. - Então vamos entrar. - Esta classe é igual a contêiner. - Vamos colocar um espaço, e vamos aplicar outra classe aqui chamada Clear Fix. - Assim. - Repare que eu não tive que escrever o cólon depois da parte aqui. Só tenho que usar o nome da turma, o que é claro. - Consertar. - Ok. E se voltarmos aqui e atualizarmos o código, você pode ver que conserta. - Agora o pai sabe a altura que deve ser. Mesmo que as crianças estejam flutuando dentro dela. Aprendemos a maioria das coisas que podem causar problemas quando você está usando posicionamento flutuante, como elementos que tentam saltar ao lado dos elementos flutuantes. Aprendemos a maioria das coisas que podem causar problemas quando você está usando posicionamento flutuante, - E você tem que configurá-los para limpar os dois para puxar para baixo. - E também olhamos para os pais. Quando todas as crianças estão flutuando dentro de um pai, eles têm a tendência de entrar em colapso. - E olhamos para usar correção clara para corrigir esse problema. - Vamos voltar ao que estávamos discutindo antes sobre as duas caixas diferentes - modelos e às vezes os problemas que você pode encontrar quando você tem que enfrentar configurar o - inteligência de suas de suas colunas para caber ambos modelos de caixa. - Então, para este exemplo, - vamos em frente e mudar algumas coisas por aqui. Eu vou para a aula de caixa aqui, e vamos realmente remover o enchimento dentro dela. - Então vamos dizer estofamento zero. E, na verdade, definiu a margem para zero. - Além disso, - por enquanto, - ok, - e então vamos em frente e mudar a largura para ser uma porcentagem. - Então, - hum, - vamos ver. Então, se eu tiver três colunas aqui, e eu quero que esses caras ocupem 100% do espaço aqui. - Poderíamos definir a largura de cada 1 para 33,3% faria cada um dos três ocupar. Bem, acho que consegui chegar a 99,9%. Talvez pudéssemos fazer uns 0,333 para chegar ainda mais perto. - Uh, - e então vamos em frente e executar isso e podemos ver que esses três elementos estão igualmente - espaçados. - Aqui está um para e três. - Cada uma dessas colunas está lado a lado. Isso está funcionando quando não temos nenhum estofamento e nenhuma fronteira. Então, na verdade, estou no cromo agora. - Estou no navegador Chrome, - que usa o modelo de caixa W três C onde, - quando você especifica um com ele não inclui preenchimento ou borda. - Ok, então isso funciona muito bem porque não há estofamento ou borda. Mas vamos ver o que acontece quando decidimos Teoh, dissemos que quando decidimos dar um estofamento e alguma borda, então a primeira coisa a fazer é consertar o contêiner. - Então, por exemplo, - você sabe, - uma vez que este ar todo escalando 33% eu posso realmente dar um fixo com para o recipiente agora. - Então diremos hipoteticamente que queríamos que o contêiner pai tivesse 800 pixels de largura. - Algo assim. - Então isto deve conter tudo aqui. - Ok. - E agora este recipiente tem um fixo com e nós vamos Teoh dizer, - Bem, - nós queremos adicionar um pouco de estofamento ou alguma borda em torno dessas colunas. - Então eu já sei que isso vai quebrar neste navegador em particular por causa de sua caixa - modelo que ele usa. - Então, ah, - 33.3 para cada um de vocês deve acabar até 100%. - Mas isso não é contar o estofamento ou a margem. Então digamos que definimos o preenchimento dentro de Teoh poderia usar pixels como 20 pixels, mas por que não usar um percentual? - E então nós podemos realmente fazer as contas para ver, - como, - quanto por cento extra estavam adicionando. Então, digamos que eu adicione 1% de preenchimento em todos os lados do elemento, e eu vou em frente e clique em correr, e isso quebrou tudo. - Então a razão é que a largura de cada um. - Cada colunista, 33%. - Então 33 mais 33 mais 33 acrescenta até como 99,999 basicamente 100% certo. Mas quando tivermos estofamento, é 1% de estofamento de cada lado. - Então isso adiciona um adicional de 123456% de preenchimento. - Então essas coisas agora Ah, 106. - É realmente deve estar ocupando 106% que não se encaixa dentro do 100% de largura com - o recipiente de 800 pixels. Então, por causa disso, não há espaço suficiente para cada elemento existir para tornar isso um pouco mais fácil de ver. - Por que não vamos em frente e fora da fronteira aqui para isso salvará borda um pixel sólido - preto assim. - Ok, agora é um pouco mais fácil ver onde cada uma das divisões fica. Certo, e se eu quisesse adicionar borda e estofamento a esses elementos, mas eu não queria ter isso adicionado. - Além da largura, - Eu queria que ele fosse incluído neste 33% com então o que podemos fazer é que podemos realmente definir cromo - ou qualquer outro navegador para forçá-lo a usar o modelo de caixa do Internet Explorer que inclui - borda e preenchimento na largura. - Então deixe-me ir em frente e vir aqui e nós vamos ampliar e eu vou em frente e - digite o turno Starkey em oito para criar uma estrela. - Isso é chamado de Seletor Universal, - e o Seletor Universal é como você pode selecionar todos os elementos literalmente cada elemento, - hum, - e dizer a todos os elementos para ter, - uh, - Oops ter ah, - caixa papai se exercitando. - E para torná-lo o método i e caixa, - podemos dizer caixa de traço borda e podemos adicionar os prefixos um traço M O Z traço caixa de traço dimensionamento - e também definir isso para caixa de borda. - E também podemos adicionar os prefixos para o tamanho do traço da caixa do kit Web apenas para cobrir todas as nossas - bases. - Então ele vai funcionar em qualquer navegador e vai dizer borda traço caixa como essa. - Então isso diz a todos os elementos para adotar independentemente do navegador está dizendo todos os elementos em - a página para adotar o modelo de caixa do Internet Explorer que inclui preenchimento e borda em - reboque. - com. Então não deve ser extra com, certo, e então vamos em frente e clique. - Executar e você pode ver que ele corrige esse problema. - O legal sobre isso é que eu posso mudar o estofamento agora e ele não deve quebrar. Posso fazer este estofamento agora para colocar 3% assim, e isso vai me dar mais espaço dentro da caixa. - Você pode ver. - Mova o texto para baixo. - Também podemos adicionar uma borda mais grossa, se quisermos. Poderíamos dizer que a fronteira agora deveria ser para pixels em vez disso ou algo assim e eu poderia executar isso lá. a fronteira agora deveria ser para pixels em vez disso ou algo assim e eu poderia executar isso E o bom de usar porcentagens para essas colunas é que agora, se eu mudar o tamanho do contêiner, eles responderão de acordo. Então, se eu mudar de ideia e quiser que este contentor tenha 600 pixels de largura, eles vão encolher assim. - Todos responderão em conformidade. E eu também posso torná-lo maior, tipo 900 pixels ou algo assim. - E eles responderão assim. Então eu acho que nove centenas fora da minha tela um pouco lá, mas , qualquer maneira, você pode ver que eu posso mudar o tamanho do contêiner. Não posso nem definir o contêiner para uma porcentagem se eu quiser. - Eu poderia dizer, - tipo, - 90% e atualizar isso. E depois temos os 10% que sobraram aqui, então isso é muito legal. - Ok, vamos ver, sobre o que mais gostaríamos de falar? vamos ver, - Assim, a margem de margem não está incluída em nenhuma das medidas do modelo de caixa. - Então é uma coisa que eu tenho que estar ciente. - Se eu adicionar uma margem aqui de apenas 1% veja o que acontece. - Isto vai mesmo quebrá-lo. - E nem mesmo a propriedade de dimensionamento de caixa pode nos salvar, - porque nem o modelo de caixa W três C nem o modelo de caixa I E inclui margem, - que é um espaçamento fora dos elementos. - Então eu apenas adicionei 1% de margem, - que será 1% à esquerda e à direita de um, - a esquerda e a direita de dois na esquerda e direita de três sets. - Um total de 6123456% que vai adicionar em adicional. - Então isso vai ser 6%, mais do que precisa ser para ficar lado a lado flutuando. Então, se eu atualizar, vai saltar a terceira caixa para baixo. - Vai quebrá-lo assim. Então minhas opções aqui são estar ciente do fato de que estou subtraindo essa porcentagem, certo? Então minhas opções aqui são estar ciente do fato de que estou subtraindo essa porcentagem, - Então, se eu tiver, - hum, - 100% de espaço aqui, - certo , - ah, - 100 maneiras de pensar no contêiner pai como a disponibilidade de 100% de espaço com - dentro do recipiente pai lá no O que eu posso fazer é que eu posso subtrair que 1% de desconto - cada lado. Então o que podemos fazer é pegar, pegar aplicativo da calculadora e trazer isso aqui, e podemos fazer algumas contas. Então, se eu tiver 100% do espaço disponível e subtrair os 6123456% da margem, isso me dá 94 por cento sobrando. 6123456% da margem, - E isso tem que ser dividido entre estes três a largura destas três caixas para que eu possa pegar - que 94 eu posso dividir por três. - E isso me dá 31.3 repetindo. - Então é bastante simples matemática também tem que fazer aqui é voltar e mudar a largura da caixa de 33 para 31% para compensar a margem. - E isso conserta. E ainda tenho espaçamento entre as caixas assim. - Então isso é muito legal. - E eu ainda posso voltar para este recipiente aqui e mudar a largura de qualquer maneira, - eu gosto e ele vai Teoh, - ele vai corrigi-lo basicamente pode apenas removê-lo lá assim e torná-lo exatamente - com Ok, Então discutimos praticamente tudo o que precisaria fazer no layout. Então discutimos praticamente tudo o Mas há uma coisa que deixamos de fora, e é como centralizar as coisas no layout. - O que podemos fazer é uma estratégia típica é criar algo chamado rapper para que eu possa entrar neste código aqui, e eu só vou, em Dent todas essas bombas de código. - Lá vamos nós. E vamos cercar esse código com um contêiner externo. - E eu vou dar a esse cara e eu d de rapper assim e nós vamos fechá-lo aqui em baixo. - Eu só diria Slash Div e eu posso até escrever um comentário se eu gostaria de dizer que - este é o final do rapper assim. - Então você pode ver que cercamos todo o conceito aqui com um rapper de abertura e um rapper . Isso basicamente coloca todas as outras caixas dentro de uma caixa maior, e agora tenho a habilidade de estilizar essa caixa maior e controlar onde ela está posicionada, então vou entrar no CSS e criar. Isso basicamente coloca todas as outras caixas dentro de uma caixa maior, e agora tenho a habilidade de estilizar essa caixa maior e controlar onde ela está posicionada, então Seeu quiser criar umseletor para ele, eu tenho queusar o hash tag e o nome do I. D em particularé rapper. eu quiser criar um Seeu quiser criar umseletor para ele, eu tenho que usar o hash tag e o nome do I. D em particular - Então eu posso dizer hashtag rapper assim e agora eu posso estilizar isso. - Então vamos dar a isso uma inteligência com definir tudo para 800 pixels novamente assim. - E uma vez que, - hum, - desde que eu não tenho uma sagacidade especificada para os meus outros recipientes como acima e abaixo, - eles vão ser tão largos quanto eles podem ser porque seus elementos de nível de bloco e - uma vez que o Rapper vai ter um específico com, eles vão ser tão largos quanto puderem até correrem para o limite do rapper. - Então vamos dar uma olhada nisso. - Então meu rapper tem uma largura de 800 pixels, e então eu posso clicar em “Executar “, e isso manterá tudo restrito dentro dos 800 pixels lá. - Então isso é muito legal. E se eu gostaria de centrar todas essas coisas no layout da página? Lembrem-se que podemos usar a margem como espaçamento no exterior dos elementos. - Ok, - Então Margin também aceita um valor de auto e auto margem, - basicamente irá apenas criar uma quantidade automática de margem onde ele irá apenas empurrar margem para fora - do elemento até que ele corre para outra coisa, - como um contêiner pai ou a borda da janela do navegador. Então, já que eu tenho um conjunto de sagacidade, eu posso definir essa margem, - hum, - margem automática para que ele crie uma quantidade igual de margem em ambos os lados. Então, basicamente, eu quero definir a margem esquerda do dedo do pé automático e a margem direita do dedo do pé automático. E se eu quiser alguma margem no topo e no fundo, posso definir isso também. E se eu quiser alguma margem no topo e no fundo, - Neste caso, - Eu acho que o que eu vou fazer é criar margem zero na parte superior e inferior colocando um zero - lá e então eu vou colocar Auto para a esquerda e direita. - Então lembre-se, - quando você usou valores dentro do preenchimento ou margem para valores indica que o - verso o primeiro valor representa o espaçamento superior e inferior, - e o segundo valor representa os espaçamento esquerdo e direito. - Isso está dizendo a margem para ser um valor automático à esquerda e à direita deste elemento chamado Rapper que IHS envolve tudo o resto. - Então, se eu ir em frente e correr isso vai centrar tudo para que você possa ver que há uma quantidade igual de margem aqui em uma quantidade igual de margem lá. - E de fato, - à medida que a janela do navegador encolhe e cresce, - essa margem se ajustará porque está configurada para automática. - Então essa é a maneira típica de ver as pessoas centrando o conteúdo. Ok, agora, no próximo exercício, vez de centralizar todo o conteúdo, vamos apenas centralizar certas partes do conteúdo. - Então o que? - Eu fui em frente e fiz os exercícios que você vai ver é que eu criei uma classe chamada Rapper, - e eu apliquei em vários locais ao longo. - Então, - por exemplo, - eu poderia aplicá-lo, - aplicá-lo dentro desta barra superior aqui e um acima e dentro de baixo. E assim você pode ter barras que se estendem por toda a tela, mas então conteúdo dentro dessas barras que se concentram. - Ok, - então, - hum, - essa é realmente uma boa maneira Teoh de trabalhar com layouts convenientemente no centro. Tudo é usar algo chamado rapper, ou algumas pessoas chamam de contêiner e dizem que tem uma margem de zero auto, e isso vai empurrar o elemento para o meio. - Ok, ótimo. - Então, - hum, - isso é realmente tudo ganhando dedo do pé. - Olhe para agora. - Vamos aplicar todas essas coisas que aprendemos no exercício contínuo que temos trabalhado para a empresa de calçados CHW. E depois de completares esse exercício, podes passar para o próximo desafio de código. 33. Layout de preparação: - Oi, pessoal. - Bem-vinda de volta. - Este é o exercício 3.1 modelo de caixa e layout. - Agora, - neste exercício em particular, - vamos construir todas as técnicas que aprendemos com o conjunto anterior de - slides de palestras e um fora de exemplos onde exploramos coisas como a caixa modelo - estética e também posicionamento flutuante para criar layouts de página. Você pode ver que eu já baixei o código-fonte aqui, e eu o trouxe para um texto sublime. - E os dois principais arquivos com os quais trabalharão aqui é a página html index dot e também a página - style dot CSS. - Claro que sim. - Ok, - Eu também fui em frente e trouxe isso aqui em Ah Browser para que possamos ver tipo de onde - nós estamos. E vamos falar um momento sobre o que vamos fazer neste exercício. - Ok? - Então você pode ver aqui este ar, todo o conteúdo da página que adicionamos em todos os exercícios anteriores. - Então aqui temos todos os vídeos de texto, - imagens e links de exercícios anteriores e passados e usando, - hum, - você sabe, - espaçamento como preenchimento e margem, largura e altura que aprendemos com o modelo de caixa - exemplo, - Vamos começar a dimensionar e adicionar espaçamento a esses elementos. Também vamos adicionar algumas estéticas divertidas como imagens de fundo, Grady INTs e raio de borda nos cantos das nossas caixas e alguns dedos de sombra. - Adicione algumas sombras em alguns desses elementos, então vamos adicionar alguns contêineres de caixa aqui à nossa página alto e estilizá-los. - Dê-lhes um pouco de estilo estético e no próximo vamos seguir em frente para integrar flauta - posicionamento para criar algumas estruturas de coluna no layout. - Então, para começar, - vamos em frente e trazer o código e nós vamos para a página html do índice, - e eu decidi que eu quero, - hum, - o cabeçalho aqui para ter dois painéis principais nele. - E você se lembra do exercício anterior que criamos, de logotipo e um painel de barra de valete, e isso nos permitirá criar um recipiente que se estende por toda a tela. - Mas eu também gostaria de criar alguns rapper Tibbs que podemos usar para centralizar o conteúdo usando margem automática, que vimos nos exemplos de slides de palestras anteriores. - Então, queremos tomar assim. - Ah, - este logotipo aqui e empurrá-lo em um recipiente que centrado mesmo que nós vamos ter uma caixa maior - circundante chamado logotipo ou logotipo painel que vai esticar com uma textura Grady Int 100% - da tela. - Ok, - então sempre que você quiser criar uma caixa dentro de uma caixa para fins estéticos e Div é mais - provável ou ir para elemento, - lembre-se que em HTML cinco nós temos elementos semânticos como cabeçalho e seção, - e estes foram principalmente reservados para sugerir semanticamente que esta é uma determinada seção - da página ou que o conteúdo aqui tem um certo relacionamento ou significado. - Neste caso, - estamos apenas interessados em criar algumas caixas para isso, - por uma questão de estilo esteticamente, - algo é então aqui temos uma caixa com a idéia de prender nossa em uma caixa da idéia de logotipo e - dentro destes eu vou criar uma caixa interna chamada Div com uma classe de rapper isso e - vamos fechar isso aqui, - e nós podemos até fazer um pequeno comentário aqui. Então deixe-nos, - não, - mais tarde que este encerramento em particular, - Div fecha o rapper assim - e vamos em frente e adicionar outro aqui. - Então, às vezes, você verá pessoas criando um único rapper que irá incluir todos os seus elementos e muitas vezes. Normalmente, as pessoas chamam de “ “ rapper “ou uma ideia de contentor. - Agora, - no nosso caso, - nós vamos ter algumas barras em toda a tela que se estendem, - você sabe, - 100% em todo o topo do navegador. - E dentro disso, temos a necessidade de ter vários rappers menores que vão centralizar o conteúdo dentro de uma caixa maior. - Está se estendendo por toda a tela. Então, por essa razão, teremos vários rappers, e cada um de nossos rappers terá um nome de classe de rapper porque,lembre-se, lembre-se, classe que você pode usar várias vezes, - enquanto um I D. - Você realmente deve usá-lo apenas uma vez por página. Então vamos ter uma turma de rappers aqui. - Nós também vamos criar uma caixa que vai esteticamente carregar uma textura de madeira dentro dela. - Então todas as nossas seções como esta sobre a seção e a seção de canto Artista na empresa - seção de notícias. - Todas estas seções de página que ar na área constante principal. - Todas essas seções serão centradas usando um rapper, - e haverá também outra caixa externa com uma ideia de madeira que podemos criar - manter uma textura de madeira dentro dela. - Isso vai ficar atrás de todas essas seções. Então vamos sair e dar a esse cara uma div i d de Wood assim, e então dentro dele vai ter eles fizeram com a classe de rapper para que possamos centralizar - conteúdo dentro de uma caixa menor aqui. - E quero que isto acabe. - Ambos têm que fechar abaixo de todas as seções antes de chegarmos ao detalhe - seção no rodapé para que eu possa vir até aqui depois do final da nova seção aqui, - e vamos em frente e em um fechamento - rapper dot Rapper e também uma seção de fechamento para a textura da madeira. - Então a textura da madeira aqui vai ocupar 100% com da tela, - enquanto qualquer rapper terá um fixo com e será centrado para centralizar todas as seções - da página. Certo, vamos ver, também temos a seção de detalhes, que fica antes do rodapé, e isso terá três colunas. Eventualmente. - Uma coluna será a informação de contato, - e, em seguida, outra coluna será links para nossos sites irmãos e outros sapatos relacionados - empresas de negócios. E então a terceira coluna aqui vai ser para os links de mídia social e todas essas três colunas de contagem aqui, eu quero tê-las também dentro de um fixo com que um centro usando uma div com uma classe de rapper. - Ok, - então os detalhes vão esticar 100% da tela, - mas então teremos uma caixa com um fixo com dentro dele, - então seu site não pode não ser feito exatamente o mesmo que o meu. Esteticamente, isso é apenas o que estou realizando o olhar que estou indo para a frente. - Mas tudo bem se você é uma estrutura rapper ou suas estruturas div não são as mesmas que as minhas. - Ok, então parece que tudo está no lugar aqui na página de índice. - Agora eu fui em frente em todas as outras páginas, - como catálogo, - contato, - preços e venda - e eu adicionei todos esses rappers - uh, - e Stives - com a madeira textura. Eu adicionei tudo isso para você, então eu só queria adicioná-lo à página de índice só para mostrar a você onde eles foram colocados no código, ok? 34. Como aplicar as propriedades de caixa: - Então agora o que podemos fazer é enfraquecer Ir para a página de estilo de ponto CSS. - E eu vou meio que descer de cima para baixo. - E eu vou adicionar um monte de estilos para os diferentes elementos à medida que eu vou, - apenas adicionando um pouco de espaçamento usando modelo de caixa e também alguns perspicácia e alturas das coisas e - também alguma estética caixa e, mais tarde, vai passar para usar propriedades flutuantes para - posicionar elementos e criar estrutura de coluna. Então podemos ir para o topo da página CSS do ponto de estilo aqui, e o primeiro que vou fazer é selecionar o próprio corpo. - Então o corpo é na verdade um elemento. E lembre-se dos corpos, toda a área visível da página. - E vamos em frente e adicionar uma caixa de propriedade estética aqui, que é chamada de fundo. - Então fundo é a maneira que podemos especificar uma imagem e a imagem está posicionando e - se ela se repete ou não etc. - Então, a fim de especificar uma imagem de fundo, - podemos dizer que você é l e, em seguida, entre parênteses, - podemos apontar para a localização da imagem. - Alguém vá em frente e diga ponto, - ponto barra para deixar a pasta CSS, - e então imagens barra para ir para a pasta de imagens. - E eu vou usar Ah uma imagem chamada papel feito à mão tem PNG e por padrão, - se você não especificar qualquer, - hum, - qualquer posicionamento ou qualquer repetição da imagem por padrão - ele será posicionado no canto superior esquerdo canto do corpo, - e ele vai repetir infinitamente porque eu não especificar nenhum comando repetitivo. - Valores aqui vai apenas repetir horizontalmente e verticalmente como faras. A janela do navegador pode ir, então é bom salvar isso e voltar e vamos atualizar e isso foi bem sutil. Não sei se sabem, mas tudo é branco antes e agora tem uma textura de papel. - Hum, - se fizermos zoom aqui, - você poderia talvez você possa ver um pouco melhor lá, - este tipo de ah, - uma textura de papel artesanal. - Então é um “off white”. - Acabamos de dar às nossas páginas brancas textura sutil de fora do branco. - Se você quiser ir em frente e verificar como essa imagem é por conta própria, você pode trazer isso aqui no localizador e você pode ver que isso é chamado de papel artesanal. - Então, ah, - quadrado disto é apenas deste tamanho. - Na verdade, é apenas 100 por 100 pixels, - mas na verdade está repetindo infinitamente, - por mais ampla que nossa tela seja, - por mais alta e larga que a janela do navegador seja, - ele vai apenas repetir essa textura e parece que uma textura sem costura. - Então também vamos mudar algum espaçamento em coisas como o H dois e o H três. E lembrem-se, se eu usar uma vírgula, posso especificar um seletor composto, bem, onde o estilo H dois e H três será igual, e vamos adicionar alguma margem. - Alguma margem inferior aqui, - que é lembrar, - margem é o espaçamento fora dos elementos. Então, se eu quiser adicionar um pouco de espaçamento abaixo do H dois e H três, eu posso definir isso aqui. No nosso caso, o espaçamento abaixo do H dois e do H três é um pouco mais do que eu quero. - Este é o padrão que ele está recebendo a partir do CSS normalizado que nós também ligamos a -, - e, - hum, - isso parece que é cerca de 2025 pixels de distância. - Eu gostaria que Teoh estivesse mais perto dos parágrafos. - Então eu vou definir isso para cinco pixels de margem. - Ok? E se sairmos e guardarmos isso e voltarmos e refrescarmos, podemos ver que mudamos o espaçamento lá. Além das nossas rubricas, também queremos mudar a margem abaixo da nossa lista. - Então temos encomendado e um nem fez listas. - E se quisermos mudar a margem azul lá, podemos configurá-la para margem traço inferior e diremos 10 pixels e os próprios itens da lista. - Nós queremos que eles recuem um pouco, - então vamos em frente e definir a margem esquerda Dash para cerca de 20 pixels como essa e nós vamos salvar - e vamos voltar para navegar e atualizar agora para ver isso. - Estes itens da lista estão na página do catálogo. E se eu rolar até aqui para onde temos arquivo de sapatos, você vai vê-los recuados aqui 20 pixels. - E também aqui você verá o 123 que deve ser agora e recuado 20 pixels aqui. - Ok, isso é bom. Então nossos parágrafos e barra de endereço, também temos um tamanho de fonte aqui. Então nossos parágrafos e barra de endereço, - Nós também vamos em frente e adicionar alguma margem dentro daqui. - Então apenas da mesma forma que podemos ver margem, - traço, - topo, - margem, - traço, - margem inferior, - traço esquerdo. - Também podemos usar a abreviação. , E lembre-se, o número de valores que você coloca aqui determinará qual lado é afetado ou qual lado está sendo espaçado. Eso aqui podemos dizer, , por exemplo, se quisermos definir o top 20 e ambos os lados para zero, mas queremos definir o fundo de 2 25 pixels, essa seria outra maneira de escrever isso. - Então, em vez de dizer margem, - fundo do traço , - também podemos dizer margem, - que é abreviação e dizer zero no zero superior à esquerda e à direita e 25 pixels no fundo assim. - Então, quando há três valores, - primeiro valor é superior segundo valor é ambos os lados, - e terceiro valor é o fundo. - Ok? - E também vamos em frente e adicionar algum espaçamento. - Vamos usar a mesma técnica para adicionar algum espaçamento abaixo dos números. - Então lembre-se, - nós temos um html cinco elemento semântico chamado figura que existe em torno de todas as nossas - imagens aqui. - E também a figura está em torno também, - nosso vídeo aqui na seção canto artista. - Então vamos em frente e dizer, - Figura e vamos adicionar uma margem aqui de zero vírgula ou desculpe-me espaço zero espaço zero, - 10 pixels, - apenas 10 pixels na parte inferior e nenhuma margem no interior superior. 35. Mesas de estilo: - Vamos também adicionar um pouco de estilo à nossa tabela que criamos. Lembrem-se que tínhamos uma mesa aqui na página de preços. - Vou mostrar-te isso por um momento. - Então esta é a seção do gráfico de preços aqui, - e nós temos esta tabela composta dos elementos TR e th que é o cabeçalho da tabela e T d. - Que é o divisor de tabela ou um não-cabeçalho aqui, - criando estrutura de coluna ou criando realmente uma tabela Célula. Então, este ar criando todas as linhas e colunas da mesa, então gostaríamos de estilizar isso como ... você pode ver o que parece pouco elegante aqui, enfraquecer, saltar para os preços. E você pode ver que este ar meio que está todo reunido aqui, então veremos o que podemos fazer para deixar isso um pouco mais bonito. Vamos dizer a esse cara que o dedo do pé tem uma largura de 100%. E isso vai ser bom, porque quando mudarmos o tamanho dos nossos invólucros, otamanho do dispositivo diminui. E isso vai ser bom, porque quando mudarmos o tamanho dos nossos invólucros, porque quando mudarmos o tamanho dos nossos invólucros, otamanho do dispositivo diminui. o - Podemos fazer com que a mesa responda em conformidade. - Então vamos definir este cara para ter uma largura de 100% e vamos em frente e vamos dizer Margem 000 20 - pixels como esse e vamos adicionar uma borda para o topo de um pixel sólido médio cinza como esse - vai usar um atalho decimal hexi para cinza médio, - e também criaremos uma borda semelhante. - Mas desta vez no lado esquerdo também, - vamos dizer borda traço esquerda um pixel, - libra sólida C C C C para criar um cinza médio lá. Também queremos estilizar a rosa da mesa, que está usando a etiqueta TR assim. Também queremos estilizar a rosa da mesa, Quero adicionar uma cor de fundo para esses caras, , lábios no fundo e vamos dizer e f f f f e f, que é uma cor cinza muito clara, tipo como apenas 11 entalhes fora do branco de certa forma - hum, - e vamos dar uma olhada nisso por um segundo. Então, se eu atualizar isso agora, esses caras são cinza mais claro, mas você pode ver e nós também temos uma borda no topo e no lado esquerdo. - E também está esticando 100% agora. - E se eu quisesse definir este esta cor cinza claro para todas as outras linhas. - Então, talvez, - como eu quero que apenas as linhas pares dos rooves da mesa para ser uma cor de fundo cinza claro. - Então o que posso fazer é usar um pseudo seletor de classe. - Anteriormente, - nós olhamos para seletores de classe pseudo para links como hover e visitou para controlar vários - links estados. Vamos dar uma olhada em outro pseudo seletor de classe chamado Criança, e vamos dizer “Acabar com a criança”. - E isso irá selecionar apenas linhas numeradas até mesmo linhas de tabela numeradas e alterá-lo para - esta cor cinza aqui assim. - Então, - por exemplo, - se eu dissesse, - hum, - a mesa rosa, - por exemplo, dedo do pé branco assim e então eu disse que a única linha par para uma grande cor - vai ter este efeito, - o que é assim. Então agora é tipo listrado, e é mais fácil, já que temos a fila da mesa listrada assim, é mais fácil ver onde se alinham uns com os outros. - Hum, - acontece um pouco mais tarde. Só vamos dizer às seções que tudo está dentro para ser branco, então podemos até tirar o branco por enquanto. - e eventualmente herdarão a cor da seção branca atrás da mesa. , Vejamos o que mais queremos fazer aqui, à mesa? - O que temos os títulos de tabela e divisores de tabela, - que compõem todas as colunas na tabela e tipo de corte em células individuais de - a tabela. E lembrem-se, queremos usar estofamento para espaçamento dentro de elementos e margem para espaçamento lá fora. Então, se eu quiser adicionar espaçamento em torno destes números e estas palavras aqui, eu tenho que usar espaçamento dentro do elemento. - Então vamos em frente e definir esse cara para ter um preenchimento de 10 pixels. - Acho que deve ficar bonito. E também vamos definir esse cara para ter um traço de borda direito de um pixel, cor cinza média sólida como essa, exatamente como antes. - Exceto da última vez, - você sabe, - para a mesa é apenas uma borda no topo e esquerda. - Cada célula individual terá uma fronteira sobre os direitos e também no fundo assim. - Então vamos dizer isso e vamos voltar e refrescar-nos e ver o que isso fez. - Lá vamos nós. Então, o preenchimento adicionou algum, obviamente algum preenchimento em torno de cada um desses caras e cada célula individual tem uma borda na parte inferior à direita. - Este tem no fundo, na parte inferior direita, à direita. Então, como cada um tem uma borda na parte inferior e à direita, ele faz uma caixa. - E então para fazer a borda no topo e à esquerda, - nós apenas adicionamos à mesa em si para preencher. - Só este aqui e o do lado esquerdo que está na nossa mesa está muito bom. Esse cara é chamado de “th “, que é a direção da mesa. - Então, - por exemplo, - pensador Steam Dolby em Washington, - Warby em Brixton. O Brandon nomeia este ar dentro das etiquetas TD, mas esta marca aqui no topo está dentro de um cabeçalho de mesa. - Então, se quisermos estilo de fim de semana o cabeçalho da tabela para ser um pouco diferente, - então sabemos que é cabeçalho Um, - então vamos mudar a cor de fundo deste para ser um pouco mais escura. - Grey vai dizer cinco chicotes libra 555 e nós também vamos mudar a cor do texto para ser branco - assim e vamos voltar e atualizar, - e agora você pode ver os cabeçalhos da tabela mais escuros lá. - Isso parece muito bom. 36. Formulários de estilo: - hum, - vamos saltar sobre a página de contato aqui e vamos usar, - você sabe, - as novas propriedades que aprendemos, - como exibição e, - hum, - e inteligência, preenchimento e margem para fazer um forma atraente aqui. - Então agora, nossa forma parece meio triste. - Vamos voltar e aproveitar as coisas novas que aprendemos e estilizar esta forma - aqui. Então eu vou selecionar todas as áreas de entrada e todas as áreas de texto, e por padrão, esses caras aparecem na linha. - Vou mudá-los para o bloco de exibição. Assim eles vão mostrar um em cima do outro, em vez de lado a lado. - Vamos ver o que isso fez lá. Então, se eu atualizar agora, esses campos estrangeiros vão ao ar um em cima do outro assim. - Ok, isso é muito legal. Vamos dizer a esse cara também tem uma largura de 100%, como fizemos com a mesa . Vamos dizer a esse cara também tem uma largura de 100%, como fizemos com a mesa Dessa forma, vai se estender dinamicamente, e isso vai ser útil quando começarmos a fazer a resposta do design onde as tabelas, os formulários e as coisas diminuíram em tamanhos diferentes dispositivos então nós vamos fazê-lo - um fluido com de 100% lá, - e vamos adicionar algum preenchimento dentro de todos esses elementos para cinco pixels irá adicionar um grande in - dash bottom aqui de cinco pixels, - para que esses ar espaçados um pouco e vamos adicionar uma caixa shadow, - que adiciona uma sombra sob o elemento. - E vamos dizer zero para o deslocamento horizontal. - Três pixels para o deslocamento vertical. - Cinco pixels para o raio de desfoque e libra C C. - C para a cor de sombra como essa e também irá adicionar uma borda ao redor. Esses caras vão dizer que há uma fronteira em cada lado. - É um pixel sólido. - Si, - si, - si apenas para combinar com a tabela lá e vamos salvar isso e vamos voltar e verificar isso -, - então vamos atualizar. - E isso está começando a parecer mais legal. Temos o nome, e-mail, telefone e mensagem aqui, e tudo parece muito bom. - Certo, veja o que mais eu quero. - Um veado. - Bem, uma coisa é que este botão, - o botão de envio também está esticando 100%. - Então eu acho que o que eu vou fazer é definir um estilo para selecionar especificamente o botão de envio. - Isso não vai estilo 100% que vai realmente ter um fixo com se fosse saltar para - essa página só para que eu possa mostrar-lhe na página de contato. - Se eu descer ao formulário de contato aqui, - você vai notar que esta entrada tem um tipo de texto. - Este tem um tipo de e-mail. - Este tem um tipo de telefone e esta é a área de texto. - E eu já estilizei todos estes para ser 100% em porque eu disse a todas as entradas para ser 100% ampla. - Este botão aqui que diz para enviar ele também está estilizando 100% aqui. Agora este tem um tipo de envio que é exclusivamente diferente dos outros tipos de texto, e-mail e telefone. Agora este tem um tipo de envio que é exclusivamente diferente dos outros tipos de - Então o que eu posso fazer é usar um tipo especial de seletor chamado um seletor de atributos. E se quiser saber mais sobre atributos,seletores, pode consultar os slides para a palestra de seletores CSS. E se quiser saber mais sobre atributos,seletores, seletores, - Então nós vamos voltar para o estilo dot CSS e vamos descer aqui e vamos em frente e - dizer entrada e , em seguida, vamos colocar colchetes para selecionar apenas uma entrada com um tipo específico, - para que possamos dizer tipo igual a enviar. Então o que isso faz é dizer “ Ei, navegador”. - Vamos encontrar um elemento, - um, - elemento de entrada e vamos em frente e Onley selecionar elementos de entrada que têm um atributo - com o tipo igual para enviar. - Ok, - e vamos adicionar uma margem no topo disso dizendo Margin, - top traço e vamos dizer cinco pixels, - e isso vai nos dar um pouco de espaçamento acima do botão para que não seja certo contra - o capataz coloca . - E vamos também mudar a sagacidade. - Normalmente, a largura das entradas é de 100%. Só queremos fazer 100 píxeis, por isso vai ser mais pequeno corrigi-los. - E vamos definir a cor de fundo para preto e a cor do texto para branco. - E se eu gostaria de contornar as bordas de um Elemento e CSS três, - você pode usar o raio do traço da borda e vamos configurá-lo para 25 pixels, - que irá contornar os cantos fora e torná-lo um pouco mais parecido com um botão circular - em vez de ah, - gráfico de borda quadrada, - e vamos em frente e remover a borda vontade para dizer borda zero porque, por padrão, - botões têm uma borda. - Ok, então vamos salvar isso e vamos voltar e atualizar e ver o que isso fez com nosso botão de enviar - aqui. Coulson, botão do nosso filho fica assim quando pairamos sobre o botão solar. - Queríamos mudar um pouco para que as pessoas saibam que lá eles podem clicar nele. - Eso apenas da mesma forma que nós criamos uma ação de pairar para o estilo de hover para links. - Podemos fazer a mesma coisa para botões de entrada dizendo, - Ei, - CSS, - vá e encontre uma entrada que tenha especificamente um tipo de atributo igual para enviar. E então eu posso usar o pseudo seletor de classe pairar para dizer e quando passarmos sobre ele, estilo assim. - Então o que eu quero fazer aqui é apenas mudar a cor de fundo. - É a única coisa que quero mudar quando pairarmos é em vez de preto. - Inicialmente é preto. - Aqui, - nós vamos mudá-lo, - Teoh uma cor cinza mais escura como essa para que nós vamos economizar. E se eu atualizar, então se eu passar o mouse sobre enviar, você pode ver que ele se transforma em uma cor mais clara. - Vai virar para uma cor mais clara cinza lá como aquele 37. Estilo de Iframe: - Ótimo. - Ok, - um, - algumas coisas para definir para o modelo de caixa da moldura I. Estamos usando uma moldura de olho na página de contato aqui, que é o Google Maps na cama. - Estamos incorporando o Google Maps. - Você está usando o código que copiamos em um exercício anterior aqui do Google Maps. E está dentro desse elemento chamado I frame, e precisamos seguir em frente e estilizar isso. - O que eu vou fazer é entrar no CSS aqui e definir quadros I e eu quero remover a borda - fora dele. - Eu vou dizer fronteira zero, - eu vou dizer estofamento zero e margem zero. - Margem com um olho. - Lá vamos nós. - E nós também vamos para Sethi transbordar para esconder dessa forma. - Não aparecem barras de rolagem. E se houver algum mapa que não se encaixe dentro do tamanho da moldura, ele ficará escondido. - E nós vamos em frente e definir a altura para 353 pixels e acontece de saber que esta é uma - boa altura para que ele vai coincidir aproximadamente com a altura do formulário que está acima - ele. - Então vamos voltar e refrescar isso e isso dá uma altura. - Isso será Oh, - daqui até aqui será quase igual a daqui até aqui. E, eventualmente, estas serão uma estrutura de duas colunas onde o mapa estará à direita , coluna, e o formulário estará na coluna da esquerda, certo? 38. Como centrar o conteúdo: E você vai se lembrar que um tempo atrás nós adicionamos um rapper, def, porque queríamos ter algumas barras na tela para o painel de logotipo aqui, que vai ser esticado em toda a página até o topo. E você vai se lembrar que um tempo atrás nós adicionamos um rapper, def, porque queríamos ter algumas barras na tela para o painel de logotipo aqui, - Mas queríamos enviar-lhe algum conteúdo dentro dele. - Ok, então vamos dar uma olhada nisso. - Lembre-se, - nós adicionamos isso feito com a classe de rapper em toda a página, - em qualquer lugar que quiséssemos centralizar o conteúdo, - como dentro deste painel de logotipo e também dentro da barra de navegação. - Então agora guarda Knave Bar vai esticar 100% do painel logotipo da tela vai esticar 100% de - tela. Mas rapper, que contém o H um e o H dois com o nome da empresa e o rapper aqui contendo uma navegação que vamos dar um fixo dentro do centro. - Então eu já apliquei isso em todas as páginas diferentes, e nós podemos apenas voltar para o CSS e adicionar a classe para ele dizendo dot rapper, - e nós vamos dar-lhe um fixo com, - hum 9 60 pixels. - Agora podemos mudar isso quando passarmos para o design responsivo. - O que vamos fazer é depender do tamanho do dispositivo. - Podemos mudar a largura do rapper. - E porque não especificamos um com para o outro conteúdo dentro, ele vai ser dimensionado de acordo. - Ok? - E você se lembra que dos exemplos anteriores nos slides de palestras nós olhamos - usando a margem automática para centralizar o rapper. - Então, quando usamos apenas para valores dentro de preenchimento ou margem, - o primeiro valor especifica a parte superior e inferior. - Então isso significa margem zero na parte superior e inferior, e o segundo valor significa ambos os lados esquerda e direita. - Então, definir uma margem automática na esquerda e direita irá então empurrar a quantidade igual de espaçamento na - esquerda e direita, - que irá realizar centralizar o elemento. - É realmente dar uma olhada nisso aqui no navegador. Então, se nos atualizarmos, você pode ver todo o meu filho. - Todo o meu conteúdo está agora centrado. Se você quiser ver o rapper para realmente saber, como o que esses contêineres estão enfraquecendo temporariamente, pelo menos podemos dar uma cor de fundo, então é mais fácil para você vê-lo assim e então vamos atualizar, - e dando a ele uma cor de fundo, você pode realmente ver esse rapper. - Então há uma div maior aqui chamado Logo com uma idéia de logotipo que está esticando 100%. - E vamos dar um Grady em cores chegando aqui em breve. - Desvanecer de Branco para Cinza. - Hum, - e então nós criamos este rapper DIV rapper dentro dele para criar uma caixa como um fixo com - - Isso vai centralizar o conteúdo e você pode ver mesmo quando eu habilitar o navegador em, - ah, - mais largo ou mais estreito. Está mantendo o conteúdo dentro do rapper centrado. Então, na verdade, há um rapper aqui em volta do logotipo. Há outro rapper por aqui, que é em torno da navegação. Há outro rapper em torno de todo o conteúdo, o conteúdo principal aqui que contém todas essas seções. Então há uma seção chamada Notícias da Empresa que está dentro do invólucro, e essa seção está sendo centrada porque está dentro do rapper e assim é essa coisa chamada Artist Corner. - Há uma seção aqui que rotulamos Artist Corner mais cedo. - Isso também está dentro do rapper e também uma seção que é sobre a empresa que contém - esta imagem neste parágrafo aqui no título aqui que também está dentro do rapper. - Ok, legal. - E então também, - esta é uma seção pouco antes do rodapé. - Criamos uma seção que está em todas as páginas diferentes. Chama-se detalhes que têm informações de contato, links e redes sociais lá. Ok, eu vou remover a cor de fundo lá, mas sempre que você estiver construindo um layout, mas sempre que você estiver construindo um layout, pode ser mais fácil para você dar a esses recipientes cores de fundo para que você pode ser mais fácil para você dar a esses recipientes cores de fundo para que você - pode vê-lo. E isso torna mais fácil ver onde as coisas vão ao ar, começar e parar onde as coisas começam um fim e ajuda quando você está posicionando coisas, certo? 39. Como aplicar as sombras de caixa: - há mais algumas aulas que vão aderir. - Vamos adicionar outra classe aqui chamada Sombra, - e podemos ir em frente e adicionar uma sombra a certos elementos na página e, - claro, - usaremos sombra de caixa para fazer isso. - E vamos dizer zero horizontal, - Vamos ver. - E então vamos dizer três pixels deslocamento vertical, - 10 pixels para o raio do desfoque e vai fazer a cor quase preta. - Mas não exatamente. - Esta é uma libra cinza muito escura. - 333 Ok. E já apliquei o Rapper, mas não apliquei o Shadow em lado nenhum. - Então vamos em frente e realmente adicionar a classe de sombra em alguns dos elementos. Na verdade, já o adicionei no contato do catálogo, página de preços e vendas. Mas só para mostrar onde vamos colocá-lo na vista, eu fui em frente e deixei na página de índice para que possamos ver eu fui em frente e deixei na página de índice para que possamos vercomo passei por uma temporada adicional. - Então, na página de índice aqui, - o primeiro lugar que vamos adicionar uma sombra é no painel de logotipo, - então haverá uma caixa que se estende por toda a página chamada logotipo, - e podemos dar a isso uma classe indo dentro de lá e dizer classe é igual a sombra. E já que vou adicionar isso em alguns lugares diferentes, copie aqui e vamos colar tudo. - Ok? Então, o próximo lugar onde eu vou adicionar, isso é dentro da área principal de conteúdo. , Aqui em baixo, depois do cabeçalho, temos a textura da madeira vai começar no rapper, e então todas essas seções vão ter sombras. - Então estas serão seções que eu vou dar uma cor de fundo branco e uma gota - sombra - e isso vai estar em cima desta textura de madeira - e eles vão ser centrados porque eles estão dentro do rapper. - Então eu vou ver cada seção e vamos adicionar as sombras. Então artistas no canto, você também tem uma classe de sombra e você também tem uma classe de sombra enotícias. - O noticiário da empresa também vai receber esta seção também vai ter uma sombra sobre ele - assim. - E acho que é só isso. - Quero adicionar a sombra em outro lugar? - Acho que não. Acho que não vou acrescentar detalhes ou rodapé. - Então estamos bem nessa página. - E como eu disse, - Eu já adicionei isso a algumas das outras páginas ou realmente a todas as outras páginas lá - - Tudo bem, então vamos salvar isso e vamos voltar para o navegador aqui e atualizar. - E lá você pode ver a sombra. Na verdade, há uma sombra aqui em cada seção, como as notícias. Thea Artista esquenta o que chamamos a esta, e esta é sobre a empresa. Certo, e aqui está a sombra no logotipo. - Este é o painel do logotipo. - Ou eles fizeram com a idéia de logotipos. - Você pode ver que ele fez com a idéia de logotipo. - Nunca especificámos uma largura. E porque os dibs são elementos de nível de bloco, é só esticar 100% da tela. - Para que a sombra se estende 100% da tela que cair sombra lá. - Considerando que, - uh, - nós temos outro div dentro dele com a idéia de rapper que está mantendo isso centrado lá - apenas da mesma forma que o rapper centrando todas essas seções abaixo. - Ok, isso é muito legal 40. Como aplicar gradientes: - e vamos atingir essa div com a idéia de logotipo. - Ok. - E queremos adicionar algum espaçamento dentro daqui. - Queremos adicionar um pouco de estofamento. - Vamos acertar esse cara também. - 85 pixels, - 0 25 pixels assim. - Adicione algum espaçamento dentro do logotipo. A seguir, vamos adicionar a cor de fundo do ingrediente. - Agora, - no código completo, - você vai ver, - um, - eu já meio que me deparei com ingrediente. - Isso parece muito bom. É como um desvanecimento branco a cinza claro, e não vou seguir o código exatamente para o mesmo aqui. - Mas o que eu quero mostrar é um site que você pode usar é um recurso para gerar o CSS para - Grady INTs. - Se você quiser ter uma cor de fundo esmagar dentro de um elemento como este painel de logotipo. - Então, se eu voltar para o meu navegador e eu abri uma nova aba enfraquecer tipo em CSS três e nós vamos - digite Grady int gerador. - Ele já está chegando lá, - e nós digitamos um gerador de ingredientes como este gerador de três ingredientes CSS, - e nós vamos para este site tem um muito bom. Chama-se Color Zillow dot com Slash Ingredient Editor é a garota, mas você pode ver aqui, na verdade, há uma tonelada dessas lá fora. - Você pode tentar diferentes se quiser, e eles têm todas essas predefinições. - Então, se você encontrar um tipo de desbotamento de cor que parece bom para você, - você pode simplesmente ir em frente e usar uma das predefinições. - A maneira como isso funciona é que você pode clicar e arrastar para mover a localização dessas paradas de cor. - Você pode adicionar mais paradas de cor apenas como clicar embaixo dela assim, e então você pode ir em frente e mudar a cor. - Então, - por exemplo, - se eu fizer como uma cor verde diferente que ele vai desaparecer de como branco para cinza e volta. - Se você quiser se livrar deles, se você clicar neles e puxá-los para baixo do controle deslizante, o controle deslizante de cores, ele fará com que o controle deslizante de cores, eles desapareçam. Então, por exemplo, por exemplo, se eu quiser que este aqui seja como um pouco de cinza claro quase fora do branco, eu posso, isso é realmente bom. Isto é tudo o valor dos hacks, e aqui em baixo, se quisermos tornar isto um pouco mais escuro. - Nós poderíamos apenas, - como, - deixar isso para trás um pouco assim - e isso vai desaparecer como uma nota de luz branca fora para um cinza ligeiramente médio como esse. - Você pode ver isso. Sabe, há diferentes tipos de brilho que você poderia fazer, como horizontal uma diagonal para fazê-lo desaparecer de uma cor para a outra. Ou como um rádio, que vai desaparecer do lado de fora para o interior em forma de círculo. - Nós vamos apenas mantê-lo como vertical para este exemplo. - E a coisa boa sobre isso é que ele lhe dá uma interface de usuário para criar o Grady int que - você quer, - e você pode dimensioná-lo para aproximação de seu elemento. - Ou você pode até mesmo perfurar exatamente o tamanho do seu elemento aqui. - E ele dá-lhe todo o código CSS aqui em baixo, - e você pode ver que é realmente um monte de código atualmente para obter ingredientes para trabalhar em - todos os diferentes navegadores. Infelizmente, há uma quantidade bastante pesada de código CSS aqui. - O que vamos fazer é clicar neste pequeno botão aqui no canto que diz copiará todo o código para nós, e então podemos ir em frente e entrar aqui também. O estilo do logotipo, e podemos colar isso aí. - E este bloco enorme de código não teria sido muito divertido para mim escrever. - Então eu só usei esse site para gerar isso para mim, e vamos continuar e salvar isso e vamos voltar para o navegador aqui e ver como isso é. Agora vamos acrescentar o Grady que sente aqui, e vou refrescar-me. - E isso parece muito legal. - Estou cavando, tudo bem. 41. Como criar o logotipo: - Então vamos voltar e adicionar mais algumas margens de espaçamento e almofadas e mudar a forma como estes H e H dois estão dentro da minha seção de logotipo de carga estão exibindo. Então a primeira coisa que quero fazer é realmente querer mudar este dedo, não ter margem. - Vou definir a margem aqui. - Zero. - Mas eu acho que o que eu vou fazer é adicionar uma margem no topo ou desculpe-me, - um tapinha no topo bem dizer estofamento traço top e adicionar cerca de 20 pixels de espaço - acima das letras reais para você sabe, - a palavra dentro do H um, - que é E h W um e eu também vou mudar a forma como ele exibe. - Atualmente, esse cara está exibindo o H um é bloco e o H dois é um elemento de nível de bloco por padrão . - Então está aparecendo um em cima. - O outro. - Eu queria ver se z h w sapatos lado a lado para que eu pudesse colocar este display Teoh em linha. E quero ter a habilidade de não remover essa margem. - Então eu vou realmente dizer display em linha traço bloco como este nós vamos dizer display em - bloco de linha. - Ok? - E nós vamos descer aqui e com uma imagem de fundo. - Então o que? - Eu fiz waas eu fiz criar uma imagem de fundo especificamente para este h um que tipo de - criar um logotipo. - Você pode ver que eu gerei. - Eu meio que tinha inventado isso. - Este logotipo da coroa que está aqui dentro da foto de introdução. - E o que eu vou fazer é colocar uma pequena coroa acima do Z w aqui. Vou fazer disso uma imagem de fundo, que é uma pequena coroa que criei na loja de fotos. - Então eu vou dizer ponto, - ponto, - barra imagens para ir para fora da pasta CSS e dentro da pasta de imagens. - E vamos ligar para o logotipo sublinhado Crown Underscore e chefe ponto PNG. - E nós vamos dizer a este cara para não repetir dizendo não, - Repita isso aqui e disse que vamos dizer não. - Repita. - E nós vamos dizer a esta coisa para posicionar o topo no centro dentro do elemento assim. Só estamos usando a abreviação de fundo, e estamos dando como um valor de imagem de fundo, Aziz. - Bem, - como o valor da posição de fundo e ou desculpe-me o valor da posição de fundo e também - o valor de repetição de fundo aqui assim. - E também vamos mudar a margem no H dois também. Vamos para aqui e eu digo, vamos remover toda a sua margem. - E nós também vamos mudar a forma como você exibe para que você possa existir lado a lado. E nós vamos colocar vocês dois no bloco de linha, Aziz. - Bem, botas assim. - Ok. - E vamos voltar e refrescar-nos. - Incrível. Agora o meu logótipo, o meu H está lado a lado com a minha idade, também. E eu tenho uma imagem de fundo aparecendo aqui acima, que é minha pequena coroa em relevo. - Então meu logotipo agora está completo no canto do meu painel de logotipo. 42. Como estilizar as seções principais: - E lembre-se, nós criamos um div que vai envolver em todas essas seções que têm uma textura de madeira, e essa caixa de textura vai expandir 100% da tela. Vai ser textura de madeira, um Sfar, um Z que posso ver dentro do navegador. Mas depois temos a outra div que é o rapper, que tem um fixo com e está centrando o conteúdo em cima desta textura de madeira. E em cima disso, temos essas seções que temos essas seções quevão conter nosso conteúdo principal da página. - Ok, - então vamos em frente e criar um estilo então para gostaria disso. E nós vamos dar a esse cara uma imagem de fundo como esta imagem de fundo, e nós vamos dizer que você é l. E vamos dizer que você deve vincular a ponto, - ponto, - imagens de barra barra assim e vamos dizer a este para ter um fundo - posição traço ok do topo central. - E também vamos definir a repetição de fundo para saber, - repita assim e vamos adicionar um pouco de preenchimento dentro desta coisa. - Veremos 30 pixels na parte superior e inferior e zero pixels à esquerda e à direita, e salvaremos. - Ok, então vamos voltar para o navegador. - E isso cria essa bela imagem de fundo atrás de todas as minhas seções. - Você vai notar que agora todas as minhas seções, - ou ver através. - Então, - hum o quê? - Não especificamos uma cor de fundo para a minha seção. Agora esse imposto é um pouco ilegível, então teremos que voltar um pouco mais tarde e dar uma cor de fundo branco a todas as nossas seções. - Mas faremos isso em um momento. Mas eu queria demonstrar que agora, atrás de tudo aqui, embaixo do painel de logotipo e embaixo da navegação, temos uma textura de fundo de madeira. - Este tem um belo destaque na madeira. , Agora, a única coisa sobre isso é que eu quero ter esse destaque no topo, mas eu quero pegar esse tipo de sombra tipo de madeira mais escura aqui, e eu queria continuar nossa repetição. - E a razão é que você pode ver que a altura desta textura de madeira não é alta o suficiente - para compensar todo o meu resto de minhas seções. - por exemplo, - a seção de artistas está saindo abaixo, - e a seção de notícias também está se destacando abaixo da altura da textura da madeira. - Uma das coisas legais que você poderia fazer com CSS três é você pode especificar várias imagens de fundo. - Então o que eu fiz foi entrar na loja de fotos e eu só cortei uma pequena fatia disso - iria aqui embaixo onde ele começa a desaparecer. Só vou dizer para repetir oque aconteceu, que aconteceu, com uma ideia de madeira. - Temos Ah, aqui. Assim, se o conteúdo for mais alto que a imagem de madeira, também posso ter outra imagem repetida lá e CSS através da maneira que você especifica - várias imagens de fundo são você usar uma vírgula como esta e então você especifica outra menina - apontando para outra imagem. - Então vamos em frente e dizer ponto, - ponto, - imagens de barra barra eu sublinharia slice dot j peg assim. - Ok. - E nós também podemos colocar uma vírgula e então dizer que este outro deve posicionar o topo esquerdo e - para repetir este 2º 1 aqui. - Bem, - diga repita. - Por quê? - Então você pode ver que a primeira garota está em seu topo central sem repetição. - E depois destes Commons, - nós temos fatia, - que é apenas um pouco cortado fora da madeira no fundo. Há uma fatia de madeira, para posicionar a parte superior esquerda e repetir Onley verticalmente, então isso irá repetir verticalmente. - Ok, então vamos salvar isso. E vamos ver a diferença agora que temos a textura da madeira, espero que se repita aqui. - Certo? - Então vamos bater. - Refresque E agora você pode ver que a textura só continua se houver mais espaço lá. - Ok, então a textura da madeira começa aqui. - E então, enquanto descemos continua assim. - Ok, então isso é muito legal. - Podemos colocar até várias imagens de fundo em um elemento aqui como esse. - Ok, - hum, - vamos também estilizar todas essas seções porque, - como eu disse antes, - é meio chato que este texto preto está neste fundo de madeira escura que não está parecendo - muito quente. - Então vamos em grande estilo. - Todas as seções como esta irão em frente e selecionar qualquer elemento chamado seção, - e vamos adicionar algum preenchimento aqui e veremos preenchimento 20 pixels de espaço. - E também daremos a eles uma cor de fundo de brancos como esse. - E então vamos em frente e salvar e vamos voltar para o navegador aqui e bater. - Refresque. - Legal. - Então agora temos algum preenchimento em torno desse elemento. - Temos esta cor branca aqui na sombra abaixo deles. Poderíamos adicionar uma margem de Martin Leadsom entre eles aqui, chegando. E você pode ver que a textura continua até que nos deparemos com a seção de detalhes assim , certo? 43. Seção de detalhes de estilo: - Então vamos dar um pouco de estilo a isso. - Essa seção de detalhes aqui. - Então exatamente onde isso acabaria. - Queremos adicionar outro Grady aqui onde a seção de detalhes é pouco antes do rodapé. - Então eu vou descer aqui acima de detalhes ou abaixo de detalhes lá, - e nós vamos criar um seletor chamado hash tag detalhes para selecionar que div com a idéia - de detalhes - e nós vamos entrar aqui e adicionar algum preenchimento para ele vai em frente e dizer, - 20 pixels na parte superior e inferior e 10 pixels à esquerda e à direita. E também adicionaremos uma de texturade fundo ingrediente aqui. - Eso eu vou saltar de volta para o gerador radiante CSS e nós podemos realmente até apenas usar isso - um e tipo de mudá-lo um pouco para cima. - Eu vou em frente e fazer estes um pouco mais escuros. - Agora eu vou dizer que esta cor fica um pouco mais escura e também talvez comece um pouco mais escura - assim, - e vamos torná-la um pouco mais alta. - Garotas, vejam isso. - Isso parece muito bom. E vamos em frente e dizer cópia para copiar isso, Grady que um parece bem e então vamos colá-lo aqui assim. E vamos em frente e dizer cópia para copiar isso, - Legal. - Ok, então vamos em frente e guardamos isso e voltamos e nos refrescamos. E se eu rolar para baixo, podemos ver aquele int ganancioso de notas leves e escuro grande. 44. Criação de colunas: - Então isso conclui todos os nossos estilos usando as técnicas que aprendemos para modelo de caixa e caixa - estética. - Em seguida, - nós vamos desenvolver nosso layout de página usando as técnicas de posicionamento flutuante que nós - aprendemos nos exemplos anteriores. - Se voltarmos para o navegador aqui, - você pode ver que certas seções vão ocupar toda a largura do rapper e - outras seções serão colunas que serão posições lado a lado. - Então, - por exemplo, - aqui na página Sobre, - que é nossa página inicial aqui, - esta seção sobre vai ocupar todas as três colunas ou todo o espaço rapper. - Ok, - agora esta seção de artistas aqui que tem nosso vídeo nele, - a seção de canto do artista vai ocupar apenas as 2 primeiras colunas à esquerda - e então a seção de notícias da empresa vai ocupar apenas uma única coluna da direita aqui que - vai flutuar ao lado dele. - E em outras situações, - como na página do catálogo, - vamos ter uma estrutura de três colunas onde a seção masculina aqui vai ser uma - pequena caixa que ocupa apenas a primeira coluna à esquerda. - A seção feminina ocupará o meio ou a coluna central no centro no meio aqui e a seção Crianças ocupará uma única coluna à direita. - Então teremos 123 caixas lado a lado. Então, para conseguir isso, vou fazer uso do posicionamento flutuante, e vou criar meu próprio sistema de grade para fazer isso criando classes . - E cada classe irá controlar se essa seção é a largura de uma única coluna, - duas colunas ou estendendo-se em todas as três colunas. - E também usamos posicionamento flutuante para controlar. - Se fica ao riso fica à direita. - Ok, então eu vou nomear cada uma dessas aulas de uma forma que vai fazer sentido para mim mais tarde, na estrada . - Então eu sei como aplicar essas aulas. Dependendo de como eu gosto de posicionar essas seções na página, então certas seções só ocupam uma única coluna. Se imaginarmos que a maior parte terá uma estrutura de três colunas, então vou nomear classes, ligar para o CEO L para a coluna e depois o número um. - Se eles só se esticarem em uma única coluna. - Eu vou usar a chamada dois ou C O L dois se eles se esticarem em duas colunas e chamarem três. - Se eles se estendem por todas as três colunas, - como nesta seção de introdução pic aqui são mais a seção sobre aqui, - que se estende por todas as três. - Ok, então vamos em frente e criar algumas aulas. - Vamos criar um ano chamado coluna um, - porque ele só se estende através de uma única coluna e vai dizer sublinhado esquerda. - Então sabemos que esta coluna se posiciona para a esquerda e para posicioná-la para a esquerda, - usará float esquerda e especificaremos um específico com para que ele ocupe em Lee Ah, - uma coluna. - Ok, - então, se há três colunas, - 33 0,3% deve me levar ao ponto em que é apenas cerca de 1/3 porque três destes - somam, - como 99,999 hum - e têm três colunas iguais. - No entanto, - queremos ter um pouco de espaço entre as colunas usando margem. Então vamos usar uma calculadora para descobrir por que essas coisas precisam ser para que você possa fazer essa matemática na sua cabeça, mas eu não sou tão boa. - Não é tão quente, Matt. - Então eu vou me certificar que tudo isso está correto usando calculadora. Temos 100% com o rapper disponível, e quero ter 1% de margem entre cada uma das três colunas. - Então isso seria 1% entre a coluna esquerda e média e 1% margem entre a - coluna média e direita. - Então, cada um desses 1% no lado esquerdo da coluna do meio e 1% no lado direito da coluna do meio soma até dois. - Então eu tenho que subtrair 2% dos 100, o que me dá 98% sobrando disponível com - dedo do pé trabalhar com. Agora posso pegar 98% e dividir por três colunas, e isso me dará 32,6. Então esta coluna deve ser de 32,6% com tudo certo. - E eu acho que eu também tinha uma margem para ele dizer que este cara não tem margem no topo. - Sem margem à esquerda e à direita. - Mas ele tem 20 pixels de margem no fundo. - Então eu não dou um pouco de espaço abaixo de cada uma das seções que eu aplico isso. - Vamos também criar uma única coluna para o meio. - Então esta é a coluna que vai flutuar no meio, - e vamos definir isso também para flutuar para a esquerda para que ele vai empilhar ao lado da outra coluna - que está flutuando para a esquerda lá e que vai colocá-lo bem no meio. Esse cara terá a mesma largura, que é de 32,6% agora. Uma diferença é que vou ter margem no lado esquerdo e direito desse cara dizendo zero no topo 1% à direita, 20 pixels na parte inferior e 1% à esquerda. - Então lembre-se, - se você especificar quatro valores o primeiro valor. - Se você andar no sentido horário, o primeiro valor é top thes. - O segundo valor está certo. - Então esta é uma margem de 1% à direita. - O próximo valor que circula no sentido horário é os 20 pixels inferiores na parte inferior e, por último, 1% à esquerda. - Então isso dará uma porcentagem de margem em cada lado da coluna do meio. Agora a última coluna, que está à direita, vai ser praticamente a mesma que a Coluna da Esquerda, exceto pelo fato de que em vez de flutuar para a esquerda, podemos flutuar esse cara para a direita. Está bem, mas terá a mesma largura e o mesmo tipo de margem, que não é margem no topo, nenhuma à esquerda ou à direita e 20 pixels na parte inferior. - Então estas serão todas as aulas que preciso para a minha estrutura de três colunas. - Outra situação é que eu poderia querer um elemento para ocupar a largura de duas colunas, - então eu vou em frente e criar uma classe chamada para significando que ele ocupa a largura de - duas colunas e nós vamos fazer Às vezes, - você sabe, - as duas colunas estarão no lado esquerdo, - e outras vezes vocês dois coluna estará no lado direito, - então vamos criar duas classes para isso. Esse cara obviamente vai flutuar para a esquerda, enquanto o do lado direito vai flutuar para a direita. Esse cara obviamente vai flutuar para a esquerda, Certo, teremos 100% de espaço disponível, e então teremos uma coluna A que está ocupando o com de duas colunas ou desculpe-me, uma seção que está ocupando o com de duas colunas, e então teremos apenas 1% da margem do lado direito. - E então teremos outra coluna que está ocupando apenas a largura de uma coluna. Em vez de subtrairmos 2% de margem aqui, só temos que subtrair 1% de margem, o que nos dá 99% assim. Em vez de subtrairmos 2% de margem aqui, só temos que subtrair 1% de margem, - Ok, - então realmente, - o que nós queremos fazer é subtrair a, - uh, - também subtrair a coluna à direita, porque sabemos que o para este cara para a coluna - para a esquerda nós sabemos que, Teremos a combinação de uma coluna à esquerda e uma coluna à direita, que eu deveria mudar o nome daqui. Teremos a combinação de uma coluna à esquerda e uma coluna à direita, Esta será uma coluna, uma coluna esquerda, uma no meio da coluna um. - Certo. - Então vamos emparelhar como uma coluna à esquerda com uma coluna à direita ou uma coluna para escrever - com uma coluna à esquerda e você verá o que quero dizer quando começarmos a implementar isso na - página. - Então o que eu fiz foi eu decidi subtrair os 32,6% para descobrir quais os espaços restantes - para esta outra coluna. - Então temos 99%. Pegamos a margem de 100% menos 1%, e então vamos subtrair 32.6, que me dará a largura da outra coluna, que é 66,4%. - Ok, então esses dois caras devem ter uma largura de 66,4%. - Ok. - E este aqui terá uma margem de zero no topo. 1% à direita, e então vamos dizer 20 pixels na parte inferior e zero à esquerda assim. - E este aqui será o mesmo. - Excepto que está a flutuar. - E será margem zero no zero superior à direita, - 20 pixels na parte inferior e 1% na esquerda. - Ok, então eu tenho mais possibilidades lá. - Eu posso ter uma seção ocupando a largura de uma única coluna ou ocupando duas colunas. - Ok. E por último, talvez queiramos ter algo que abranja todas as três colunas, então poderíamos chamar essa chamada. talvez queiramos ter algo que abranja todas as três colunas, - Três. - Então aqui temos, - hum, - margem de 00 20 pixels, - significando zero no zero superior em ambos os lados e apenas 20 pixels na parte inferior. - E nós vamos adicionar outra classe aqui chamada coluna três para fazer com que ocupe todas as três colunas e lembre-se de adicionar várias classes. - Você poderia colocar um espaço entre o nome de cada classe. E agora isso tem uma classe de coluna três, e também tem uma classe de sombra, então também deve ter uma sombra. Então vamos salvar isso, e eu voltarei para o navegador. E realmente, a única coisa que vai mudar aqui é adicionar alguma margem abaixo dela, que você pode ver que fez lá. - Agora há um espaço entre esta seção e a próxima seção como essa neste - abrangendo três colunas de diâmetro. Está bem, , não muito chique. - Ali. - Agora as coisas vão começar a ficar interessantes aqui em baixo. Então esta é a seção de artistas, e eu quero que a seção de artistas ocupe a largura de duas colunas ou tenha e eu quero que a seção de artistas ocupe a largura de duas colunas ou tenha66,4% de largura e então tenha a seção de notícias que está bem aqui. - Notícias da Companhia. - Pegue apenas a largura de uma coluna aqui do lado direito. - Então o que eu quero fazer é usar a coluna à esquerda para a seção “Artists Corner “e eu quero usar a coluna 1 direita para a nova seção. - Certo, então eu posso rolar até o canto do artista e nós podemos entrar aqui e adicionar uma classe - de coluna para sublinhar a esquerda assim e vamos descer para a nova seção e vamos adicionar - uma classe da coluna um à direita, - o que significa fica para a direita. - Mas só tem a largura de uma coluna, e vamos dizer isso e voltamos para o nosso navegador aqui e vamos bater. - Refresque e lá vamos nós. - Então, há algo meio engraçado acontecendo aqui. As notícias da empresa devem caber ao lado desta coluna da esquerda. Certo, mas vocês devem se lembrar que há dois modelos de caixa diferentes, e , esse navegador em particular, Chrome usa o modelo de caixa W 3 C, onde sempre que eu adiciono como borda ou estofamento neste caso, - Eu tenho 20 pixels de preenchimento em torno de cada um destes, - ele realmente torna um pouco mais largo do que caberá lado a lado. - Nós também temos alguns elementos, - como a seção de detalhes na parte inferior da página tem links correspondentes de contato e - siga. Ele está puxando para cima ao lado do elemento que está flutuando, então isso é meio pateta, também, então teremos que consertar isso. Lembrem-se de um dos exemplos da palestra nos slides anteriores, olhamos para usar uma propriedade chamada Clear para fazer esse cara limpar o passado. - Nós também olhamos para alterar o modelo de caixa com para incluir preenchimento usando caixa traço dimensionando - CSS três propriedade para definir todos os navegadores para usar o mesmo modelo de caixa. Então, para que algumas dessas coisas funcionem, vamos ter que voltar ao estilo do CSS e criar um comentário perto do topo da página aqui em uma seção chamada Correções. - Aqui está online 12 da página CSS do ponto de estilo. - Então vamos rolar até lá e vamos em frente e implementar em algumas dessas correções CSS. Uma coisa que queremos fazer é mudar o modelo da caixa, então vamos dizer Star para selecionar todos os elementos assim e vamos em frente até, por padrão. Inicialmente vai dizer que esses caras devem ter uma margem de zero um, - preenchimento de zero e borda de zero apenas para fazer um reset. - E então nós também vamos mudar o tamanho da caixa, - o que irá torná-lo para que quando especificarmos uma largura - ele irá incluir o preenchimento na borda. - E vamos dizer, - Use a caixa de valor Borda, - que é o método de dimensionamento de caixa do Internet Explorer. - Ok. - E vamos usar os prefixos Web kit também para fazer este trabalho e versões antigas do cromo - e safari. - Bem, - digamos Web kids traço caixa de traço tamanho e vamos salvar a caixa de fronteira traço e também usamos traço mosey - caixa de traço Dasha tamanho. - E nós também vamos dizer que duas caixas de fronteira traço. - Ok, então todos os elementos agora devem estar usando, - um, - o método de caixa de borda do Internet Explorer que deve nos dar um bom suporte e todos os - navegadores - e deve permitir que essas coisas para exibi-lo corretamente. - Então agora nossos 20 pixels de preenchimento não serão o que realmente serão incluídos na largura. - Ok, então eu vou continuar e salvar que temos algumas coisas que não estão limpando corretamente. - Por exemplo, - a seção de detalhes que queremos limpar além da altura de qualquer coisa flutuando acima dele para que nós - pode realmente rolar para baixo, em seguida, para que a seção de detalhes aqui e nós podemos ir em frente e definir a seção - detalhe para limpar ambos. - Então isso significa que a seção de detalhes e não vai mais saltar ao lado dessa coisa que está - flutuando. E esses caras terão a inteligência apropriada, então eles devem aparecer lado a lado. Então vamos em frente e salve o código, e voltamos ao navegador e atualizamos. - Legal. - Então agora esses caras estão aparecendo lado a lado. Então resolvemos alguns dos nossos problemas aqui que agora temos. - Esse cara tem uma coluna para a classe esquerda que está fazendo flutuar para a esquerda e dando-lhe um 66,4 - ponto 4% com versus este, - que está usando uma coluna 1 classe direita, - que está flutuando para a direita e tem 32.6 com e porque mudou o modelo de caixa para - caixa de traço fronteira, - este tem o 32% ou 32,6%. - Com está incluindo o estofamento aqui e este também. - Aqui. - O 66,4% com está incluindo preenchimento, - e então temos 1% margem, - o que acrescenta isso até um total de 100%. - Ok. - E eu disse a esta seção de detalhes para limpar dizendo claro ambos. - Ah, aqui. - Eu tenho esta seção de detalhes para limpar além da altura dos elementos que estão flutuando - acima. - Ok, - hum, - você pode notar que algumas outras coisas estão acontecendo isso é um pouco pateta. - Então uma coisa é que o ah Div com o i d. - de que isso iria textura é realmente em Lee como pedágio como este elemento que não é - flutuante. - Este elemento da coluna três não está flutuando. Mas lembre-se, sempre que você tem um elemento pai e você flutua Crianças dentro dele, ele perde a referência de como disse para ser assim. - Agora. Esta div, com a ideia de madeira que tem a textura da madeira, está em colapso. Parece que está desmoronando porque temos as crianças flutuantes dentro dela, certo? - Vocês se lembram do método? Usamos a correção que usamos para impedir um pai de entrar em colapso, então eu vou subir aqui nas correções e eu vou adicionar aquele hack especial CSS para consertar um pai em colapso. - Chama-se Fix claro. - Então vamos criar uma classe de dois pontos fixos claros depois e entrará e dirá - conteúdo. - E vamos jogar como um pequeno símbolo de período lá vai dizer a este continente para exibir - bloco. - E vamos dizer a este tipo para limpar os dois para ultrapassar a altura de qualquer criança flutuante. - Qualquer elemento flutuante acima dele. - Desculpe-me, e então vamos mudar a visibilidade para oculto, não vermos esse conteúdo. - E vamos definir a sua altura 20 e a sua altura de linha 20 A inchar. - Oops. - E nós temos um pequeno tipo de lá vai resolver isso. Agora posso aplicar esta classe a qualquer elemento que esteja a entrar em colapso. Agora posso aplicar esta classe a qualquer elemento que esteja a entrar em colapso. - Então, - por exemplo, - eu posso vir aqui para o Div com a idéia de madeira - e nós podemos adicionar uma classe de correção clara para impedir aquele cara de entrar em colapso. - Ok, então vamos em frente e salvar isso. - Voltaremos para o navegador e refrescaremos e esfriaremos. Agora podemos ver as texturas de madeira se repetindo abaixo das Crianças flutuantes, então correções claras vindo aqui e limpando a altura das Crianças flutuantes. - Dar este elemento pai, - que é chamado, - seria uma referência para a altura de ser. - Ok, vamos fazer a mesma coisa para estes três dibs aqui em baixo. Vamos transformar isso em uma estrutura de três colunas, então já fizemos isso antes, então deve ser muito fácil lembrar como fazer isso desta vez. - Então, se eu descer aqui em detalhes, vamos dar a este 1º 1 aqui uma classe de coluna 1 à esquerda. - Então vamos dizer Ativo, com licença. - Coluna Div Class Um esquerda assim e vai descer para a segunda coluna e vamos dar - esta uma classe de coluna um meio para o meio. E por último, daremos ao último se aqui uma classe da coluna um direito, que deve fazer com que esses caras apareçam lado a lado. E não queremos que a seção entre em colapso porque temos esses caras estavam flutuando Crianças , então vamos ter o mesmo problema que tivemos acima com a seção ou temporada com o Div . - Com a idéia de madeira estava desmoronando. - Agora teremos o mesmo problema onde os detalhes da seção entrarão em colapso porque todas as crianças estão dentro ou flutuando. - Então nós temos que dar uma referência para a altura de ser adicionando essa correção clara e na - mistura. - E se você não se lembra de que correções claras para ir, vá em frente e volte para os vídeos e a palestra de slides para verificar isso. - Guardei isso e podemos refrescar-nos. E agora você pode ver esses caras lado a lado, o que é muito legal. Acho que vou adicionar uma pequena borda do lado direito aqui e uma escrita aqui dentro só para estes dois aqui. - Então vamos em frente e criar uma classe para isso aqui. - Vou voltar para o estilo e para a seção de estilo global e abaixo da sombra - aqui. Por que não criamos uma classe chamada fronteira direita assim? - E vamos salvar a borda traço do cólon direito, - um pixel bem dizer pontilhado e dar-lhe uma cor cinza média. - E também adicionamos algum preenchimento no lado direito também, - Então o texto nunca vai direto para a borda e diremos, - batendo para a direita 20 pixels assim e seguro. Então eu só quero aplicar essa classe de fronteira certa, também. Essa seção de detalhes aqui em baixo, mas só para alguns desses. - Então eu só quero que essa fronteira esteja nas duas colunas da Central Central. - Então vamos em frente e adicioná-lo à primeira coluna dentro de detalhes, - que é chamado de uma coluna. - Uma esquerda virá aqui e diremos direitos de fronteira como aquele anúncio que estilo ali e - também ir para este chamado Coluna um meio e também irá adicionar Borda direita, - aquele também. - E você vai economizar e eu vou voltar e atualizar, - e agora você pode ver que é meio sutil, - mas eu criei uma linha de traço bem aqui no lado direito desta coluna e também no lado direito desta coluna média aqui. Então agora temos uma linha sutil no centro. - Tudo bem, isso está ótimo. Tenho que dizer, estou me impressionando. Tenho que dizer, Pessoal, estou gostando do jeito que está olhando para lá. - Então eu já adicionei essas classes para as outras páginas, - você pode ver que isso tem uma classe de coluna um esquerda. - Isto tem uma classe de coluna um a meio. - Esta tem uma classe de coluna um aqui temos uma estrutura de duas colunas, então esta é chamada Coluna à esquerda, e esta é chamada coluna um à direita, coluna à direita, uma à direita, e esta é a coluna à esquerda. - E aqui temos a estrutura de três colunas coluna coluna uma coluna esquerda, - um meio e coluna um à direita, - tudo bem, - e isso vai nos permitir criar estrutura de coluna diferente em páginas diferentes. - Dedo do pé, seja qual for a seção que quisermos. Então, se eu for para a página de venda, este tem uma classe de coluna três. - Ou chame três para significar que ocupa três colunas. E aqui temos a coluna 1 à esquerda, uma coluna do meio, uma à direita. Tudo bem, este é a coluna três, ocupa todas as três colunas lá, e vocês podem ver, já que eu tenho uma largura de 100% dentro da minha este é a coluna três, ocupa todas as três colunas lá, e vocês podem ver, já que eu tenho uma largura de 100% dentro da minhamesa aqui, mesa aqui, - está apenas expandindo o máximo que pode ouvir até que ele corre para a borda da seção. - Agora, na página de contato. - Temos uma classe de coluna 2 na classe 1. - Certo. - Ok, então é só isso. - Para este exercício, - Espero que isso lhe tenha dado alguma visão sobre como criar estruturas de página com múltiplas - colunas e a flexibilidade de escrever seus próprios estilos CSS para criar seus próprios sistemas de grade - usando combinações de flutuante Ah, - o tamanho de suas colunas. - E também técnicas para corrigir problemas como claro fixo para evitar colapso pais e caixa - dimensionamento. - O Teoh. - Ajuste todos os navegadores para usar o mesmo modelo de caixa e também técnicas como limpar que possamos limpar além da altura de quaisquer elementos flutuantes acima em ah, - nos próximos exercícios, - vamos levar isso um pouco mais longe aprendendo algumas técnicas avançadas de posicionamento. Vamos voltar e terminar o estilo da navegação, o valete principal no topo da página. - Então vamos continuar a aprender a construir alguns designs responsivos usando CSS durante consultas de mídia . Espero que goste deste, e espero que estejas a começar a criar os teus layouts de página. - Sinta-se livre para verificar os links abaixo do vídeo para mais alguns tutoriais sobre posicionamento e - construção de layouts de página, - e, em seguida, ir em frente e passar para o próximo desafio de código, - onde você estará adicionando algum posicionamento e coluna estrutura em seu próprio layout de site. 45. Ferramentas para desenvolvedores (parte 2) (de parte): - Oi. - Bem-vinda de volta. - Esta é a segunda parte dos vídeos de ferramentas do desenvolvedor. - Na primeira parte, - nós olhamos para inspecionar elementos para que pudéssemos ver o que HTML e CSS foi aplicado a - esses elementos particulares. - E nós também olhamos para mudar e modificar os atributos e valores CSS para que pudéssemos - visualizar mudanças no navegador antes de decidimos fazer alterações permanentemente no código - editor. - Na segunda parte, - vamos analisar todas as coisas magníficas com as quais as ferramentas de desenvolvedor podem nos ajudar - quando estamos construindo layouts de página. Então não há necessidade de mudar nada no seu código. Acabei de criar uma situação hipotética aqui em que temos um problema ocorrendo no nosso layout, então vocês podem ver que esta é apenas a página de índice do nosso exercício, e eu entrei e eu propositalmente quebrei algo aqui, layout, então vocês podem ver que esta é apenas a página de índice do nosso exercício, e eu entrei e eu propositalmente quebrei algo aqui, vai usar ferramentas de desenvolvedor para nos ajudar a resolver esse problema. Então a questão principal aqui é que esta seção aqui chamada “Artist Corner “, deveria estar flutuando para a esquerda, e esta seção de notícias da empresa aqui deveria estar flutuando para a direita, e esses caras deveriam estar lado a lado. - E você pode ver aqui que mesmo que pareça que a seção de notícias da empresa tem espaço suficiente para caber lado a lado com esta outra seção, - por alguma razão está sendo empurrada para baixo. - Então a primeira coisa que vou fazer é o certo. - Clique e inspecione um dos elementos que está me dando um problema. - E aqui eu direito, - cliquei na figura, - que é a caixa. - Está em torno do elemento de vídeo na legenda da figura, - e você notará se você olhar para a parte inferior do painel do desenvolvedor aqui, - há na verdade uma migalha de pão que mostra a relação de quais elementos estão aninhados - dentro de outros elementos. - Então, - por exemplo, - estamos na figura. - Se eu clicar, - Eu posso ver que a figura está realmente dentro da seção com a classe de coluna para a esquerda. - E isso é dentro de um div com a classe de rapper e assim por diante. - Então, se eu passar por cima desta seção aqui com a classe de coluna para a esquerda, - eu posso ver que o Chrome está realmente me dando codificação de cores para indicar o preenchimento e também - a margem. Então, neste caso, Chrome usa uma cor verde clara para indicar o preenchimento dentro do elemento, e usa uma cor azul claro para indicar a área de conteúdo dentro desse elemento, e usa uma cor laranja clara para indicar margem. - Então, neste caso, - você pode ver que há realmente um pouco de margem no lado do elemento, - e isso é provavelmente o culpado de por que a outra seção, - a seção de notícias, - não é capaz de caber lado a lado com esta seção de canto artista. - Então, se eu selecionar o elemento lá como sabemos, - podemos ver todos os estilos CSS que estão afetando esse elemento em particular. - E se eu vir aqui para a margem, - podemos ver que o culpado aqui é que a margem direita está definida para 20% agora, - além de ser capaz de clicar e alterar os valores aqui, - nós também temos outro painel que podemos abrir para ver mais informações sobre isso - modelo de caixa particular para este elemento. - Então eu vou colapsar o painel de corredores leste aqui clicando nesta pequena seta para baixo, - e abaixo disso você pode ver há outro painel intitulado Métricas, - e nós vamos expandir o painel de métricas, - e isso vai revelar o para este elemento em particular. - Você pode ver se eu pairo dentro do centro. - Eu sou capaz de ver a área de conteúdo. - E de fato, - isso está me dando a quantidade exata de pixels dentro da altura para o conteúdo disponível - área dentro deste elemento. - E se eu passar o mouse dentro da próxima seção da caixa aqui, - este que é chamado de preenchimento, - podemos ver que na verdade há 20 pixels de preenchimento em cada lado. - Hum, - e podemos ver que não há borda e que há uma margem de 20 pixels na parte inferior - e que essa margem de 20% à direita na verdade acaba sendo 192 pixels. - Uma das coisas boas sobre ser capaz de ver o modelo da caixa é que você pode ver muito claramente - quanto espaço ou quanto espaço de tela real. - Cada elemento está realmente ocupando, - e isso é importante quando você está tentando construir estruturas de coluna. - Além disso, - nós também podemos clicar duas vezes para alterar esses valores para que eu possa digitar em outro valor aqui, - ou eu também posso usar as setas para cima e para baixo para alterar a quantidade de margem neste caso. - Então vou segurar a seta para baixo e trazer a margem até ver que há espaço suficiente para a outra coluna se encaixar lado a lado com esta. - Lá estamos nós. - Então aqui parece que em torno, - você sabe, - nove pixels é quase a margem que eu posso ter aqui para que a nova seção t ajuste - lado a lado. - Além disso, - além de colocar em valores de pixel, - nós também podemos colocar em valores percentuais também. - Então, - por exemplo, - se eu dissesse esse esse cara a 5% eu posso ver que isso não funciona. - Se eu disse isso a 4% eu posso ver que ainda não o suficiente. - Se eu dissesse isso a 3%. - Ah, - 2%. - Então, digitando o símbolo percentual em vez de pixels, ele vai realmente fazer a conversão para mim. , E novamente, se eu digitar 1%, podemos ver que funciona. Então 1% do espaço dentro deste rapper, que é 960 pixels, sai para nove pixels de espaço. - Então agora que eu sei que 1% é o meu número mágico, - eu posso ver que eu vou ter que mudar este 20% aqui, - dedo 1% que é online 206 dessas folhas de estilo CSS de ponto de estilo. Então, se eu voltar ao meu código e vir aqui para a linha dois de seis, posso ver que esta é a coluna da classe à esquerda. - E aqui está a margem de 20%. Posso redefinir isso para 1% de poupança, e podemos voltar e atualizar a página. - E corrigimos esse erro para que você possa ver que as ferramentas de desenvolvedor podem ser muito úteis para - solução de problemas de inteligência, - preenchimento e bordas de margens do modelo de caixa. - Aziz Bem como permitir que você veja todos os comandos de posicionamento CSS. 46. Técnicas de posicionamento: - Oi. - Bem-vinda de volta. - Este é o slide 3.2 técnicas avançadas de posicionamento. - A este ponto, - você deve começar a se sentir um pouco mais confiante sobre a construção de layouts de página. - E no exercício anterior, nós olhamos para usar flutuante para criar estrutura de coluna. E neste próximo exercício, aprenderemos algumas técnicas de posicionamento adicionais. - Nós também vamos dar uma olhada em uma propriedade CSS chamada Z Index que podemos usar para - camadas ou posicionar elementos na frente ou atrás um do outro. - Nós também vamos dar uma olhada em uma técnica popular usando sprites de imagem e alguns CSS - código para criar rollovers onde quando o usuário passa mouse sobre uma imagem vai ver a imagem mudar. - Criei alguns exemplos de trabalho para as técnicas de posicionamento que vamos aprender. - E se você estiver interessado em ver o código preenchido para todos esses exemplos, - você sempre pode verificar os links listados aqui nos slides. - Então vamos em frente e saltar para o primeiro exemplo e você pode ver aqui. Acabei de criar alguns contêineres e dentro deles criei algumas caixas aqui, e cada caixa vai nos ajudar a demonstrar um novo tipo de posicionamento que vamos aprender. - Vamos aprender um posicionamento relativo absoluto e fixo. - E eu já dei a essas caixas alguns nomes genéricos de classe apenas para nos ajudar a demonstrar - cada um dos diferentes tipos de posicionamento. - Primeiro, - vamos dar uma olhada no posicionamento relativo, - então, por padrão, - todos os elementos se não especificarmos nossa posição estática como esta. - Mas vamos ver o que acontece se formos em frente e adicionarmos um posicionamento especial, como posicionamento relativo para que eu possa dizer posição relativa. - E assim que você mudar o posicionamento para qualquer outro tipo especial de posicionamento, - você então ganha a capacidade de usar algumas outras propriedades CSS, como parte superior inferior esquerda e direita, - para que você possa dizer ao navegador o quão longe para empurrar ou mover sobre o elemento a tela. - Então, - por exemplo, - se dissermos que o topo estava dizendo ao navegador para empurrar o topo do elemento e movê-lo para baixo - 50 pixels como esse. - Então, se eu ir em frente e correr que você pode vê-lo empurrou este elemento aqui, - o quadrado que diz relativo ele empurrou para baixo 50 pixels de sua localização anterior onde - ele estava localizado antes de lá, - e se eu disser um número menor como 10 por exemplo, - e eu corro que ele só o move para baixo 10 pixels de seu local anterior. - Então, especificar a parte inferior superior esquerda ou direita para o posicionamento relativo é dizer ao navegador - qual lado do elemento que você deseja pressionar agora. Pode até usar números negativos também, se quiser. Se eu disser 50 pixels negativos e eu rodar isso, você pode ver que ele realmente faz o oposto. - Então, com um número positivo, você está empurrando para cima. - Mas com um número negativo é como se você estivesse puxando para cima. Você está puxando para cima 50 pixels, então eu vou em frente e dizer 10 pixels principais e o mundo movê-lo para a direita dizendo certo - 10 pixels, - que irá empurrar para o lado direito. - 10 píxeis assim. - Vamos dar uma olhada em outro tipo de posicionamento chamado posicionamento absoluto para que possamos definir - este cara para a posição absoluta, - e vamos em frente e usar os mesmos valores top 10 pixels, - direita, - 10 pixels. - E mesmo que este ar os mesmos valores, - nós vamos ver que isso faz algo muito diferente e isso é porque o posicionamento absoluto - usa esses números de uma maneira bem diferente - para que você possa ver o que aconteceu lá. - Waas. - Quando eu definir este elemento criança aqui para posicionar o absoluto, ele realmente se liberta do pai e puxa para cima para o canto superior direito da tela. - Então, agora, quando estou usando o topo da propriedade, ele está se referindo à sua relação com o topo da janela visível ou a área visível do navegador. - E quando eu digo certo, - ele está se referindo à sua relação com a borda direita da janela do navegador visível para que você - pode realmente ver os 10 pixels que existem. - São 10 pixels abaixo do topo aqui, e são 10 pixels a partir da direita ali. - Então a principal diferença entre relativo e absoluto é que quando você está usando o posicionamento - aqui, - posicionando comandos em um elemento relativamente posicionado, - você está reposicionando esse elemento em relação ao local onde ele foi posicionado antes, - certo, - então costumava estar aqui, - e então ele pressiona sobre ele em uma direção particular, - empurra ou puxa e reposiciona com base na relação de onde costumava estar. - Agora, - absoluto é baseado na relação de toda a janela visível, então isso é bem - diferente. - Então, uma maneira de pensar nisso é esta criança absolutamente posicionada aqui. É como se tivéssemos dado muito açúcar e ele se libertou. Ficou hiper e saiu do pai, e você pode ver que seu pai desmaiou lá. E isso é em contraste com o relativo também onde quando você posiciona algo relativo, o pai ainda meio que manteve uma espécie de fantasma de onde esse elemento estava posicionado - anteriormente. - Então ainda temos a altura mantida o seu ok, então você pode estar curioso sobre o que acontece quando também damos um posicionamento especial para os pais. - Então, - por exemplo, - digamos que eu vá até este pai aqui que entrou em colapso porque tem uma criança dentro dele - que está posicionado absoluto. E se eu adicionar algum posicionamento relativo a este pai é bom, então isso é interessante. - Você pode ver que o pai ainda está desmaiado aqui. - No entanto, esta criança absoluta não é mais capaz de se libertar. - Demos superpoderes à criança. - Demos açúcar a ele. Fizemos hiper posicionando-se no absoluto, mas agora demos superpoderes aos pais posicionando aquele parente pai. - Então, quando o pai tem poderes especiais ainda pode segurar a criança dentro dela. - E agora os 10 melhores pixels, certo? - 10 pixels está se referindo à sua relação dentro dos pais. - Então ele foi para o topo O que, - 10 pixels para baixo a partir do topo deste pai e 10 pixels sobre o lado direito do - pai. - E então você verá o que nós removemos esse posicionamento relativo fora do pai e o configuramos de volta para um pai normal e estático. Não pode mais segurar essa criança selvagem dentro dela. Então, quando executamos isso lá, esse pai colapsa e é normal, posição estática e a criança em posição absoluta pode se libertar. E agora está se posicionando com base na borda da janela do navegador. - Então isso é meio interessante. - Vamos dar uma olhada em outro tipo de posicionamento chamado fixo. - Ok, para que possamos salvar posição, - pode enfraquecer. - Defina este para corrigir a posição, - e vamos seguir em frente e vamos definir este para posicionar 10 pixels para baixo a partir do topo, - e vamos definir 240 pixels a partir da direita em diante. - O que veremos é que o posicionamento fixo é uma espécie de similar ao absoluto em que este top - direção inferior esquerda e direita que podemos colocar aqui ainda estão em relação a - toda a janela do navegador visualizável da mesma forma que com absoluto. - Então este está aparecendo 10 pixels para baixo do topo e 140 pixels para cima do lado direito - assim. - Agora há uma diferença principal entre fixo e absoluto, - e isso é o que acontece quando a janela do navegador rola. - Então eu criei esta classe DIV com enchimento aqui na parte inferior. - Vamos em frente e definir uma altura para que possamos torná-lo alto o suficiente para que precisamos - passear no navegador. Então vamos dar a esse cara uma altura ridícula, para sabermos que vai sair da tela. Isso vai definir isso para 900 pixels de altura, e isso deve ser o suficiente para sair da tela lá. - Tudo bem. - E agora temos uma barra de rolagem aparecendo porque esses elementos toll e nós vamos notar isso - enquanto nós rolamos para baixo o elemento que tem posicionamento fixo está ficando com a gente. - Então, os elementos de posição relativa absoluta e todos os seus recipientes estáticos que ar. - Os pais estão todos rolando fora da tela, - mas fixo significa que ele permanece fixo no lugar enquanto a janela do navegador rola Ok, - então você pode estar curioso sobre quando você pode usar esses outros tipos de posicionamento, - e nós estamos vai dar uma olhada em alguns usos para estes no próximo exercício. - Vamos em frente e saltar de volta para os slides então. - Então nós olhamos para o posicionamento relativo, - o que nos permite usar comandos de posicionamento como superior inferior esquerdo e direito e mover um - elemento baseado na relação de onde ele costumava estar quando estava posicionado estaticamente - - Então Top está apenas empurrando. O canto superior esquerdo está empurrando para o lado esquerdo do elemento, e você está movendo-o baseado no lugar onde ele costumava ser posicionado. - Nós também olhamos para o posicionamento absoluto, - o que nos permite mover um elemento baseado em sua relação com toda a janela visível - navegador. - E nós também olhamos para o posicionamento fixo, - que semelhante ao absoluto, mas vai permanecer fixo no lugar mesmo quando o usuário rola no - navegador 47. Camadas de Z-Index: - em seguida, - vamos dar uma olhada em uma propriedade CSS chamada Z Index, - e eu tenho, - ah exemplo rápido que podemos passar. - Olhe para isso. , Você deve ter notado que,neste último exemplo, quando você escala a tela para dentro e para fora, maiores e menores, esses elementos podem realmente se sobrepor um ao outro. - E podemos controlar isso usando algo chamado Índice Z. Criei um exemplo bem básico aqui 123 com esses três dibs, e dei a cada um uma classe genérica de Z um, Z dois e Z três. - E usaremos isso para aplicar um índice Z diferente a eles e posicioná-los para que alguns deles estejam em cima dos outros. - Então vamos começar indo para baixo aqui e criar uma classe chamada Z one para que nós - podemos adicionar este 1º 1 para ter um índice Z de um agora por padrão. - Se você não especificar todos os elementos posicionados estaticamente, - apenas tem índice nebuloso de zero, - e quando você adicionar algum posicionamento especializado como relativo ou absoluto - ele se moverá acima dos elementos posicionados estaticamente. A menos que você especifique o índice Z para que um índice Z de zero seja a camada normal que está logo acima do corpo. Você pode realmente definir os números de índice para números negativos, e esses ficarão para trás do normal, elementos estáticos reposicionados, e você nunca pode ir atrás do corpo. - Então o corpo é como a camada traseira mais distante que você não pode ficar atrás, então você não pode - fazer elementos desaparecerem. - Qualquer coisa atrás do corpo. Mas você pode posicioná-los na frente e atrás de outros elementos em cima do corpo, essencialmente. E sempre que usarmos quanto maior for o número de índice, ele irá acima de outro elemento a qualquer momento. - Usamos quanto menor o número do índice. - Vai atrás dos outros elementos. Certo, então esse cara, só quero o índice Z de um. - Vamos em frente e dar a este uma cor de fundo de água só para podermos ver a mudança - ali. - E vamos também dar a este uma posição de parentes. Mas, atualmente, acho que não precisamos nos posicionar. - Este só vai posicionar o outro em cima dele. - Então acho que vou definir isto para zero à esquerda. - Zero. - Ok. - E vamos rodar isso para ver o código. Então agora vamos entrar e definir esta segunda caixa para sobrepor em cima desta. Isso criará outra classe, e chamaremos de Z 2. - E eu vou definir este para ter um índice Z de dois. - E eu vou mudar a cor de fundo aqui, - dedo do pé limão. Então, eles se destacam e puxam este para cima do outro, vou em frente e configurá-lo para 50 pixels negativos no topo e 50 pixels no lado esquerdo . Então vou puxar esta segunda caixa de 50 pixels, e vou empurrá-la do lado esquerdo. - 50 pixels. - Então vamos ter que executar isso. - E você pode ver a caixa dois com os contratados. - O índice de duas caixas sobrepostas um que tem o índice de um. Pode ver se mudamos o índice Z de dois para ah, número menor que um. - Por exemplo. Se eu disser, negativo para o qual é um número menor e você executar isso, você verá que ele vai ficar para trás, e então quando você usar um número maior, ele vai saltar de volta para cima. Podemos colocar esta caixa três aqui na mistura também, configurando esta para ter um índice Z de três. Podemos colocar esta caixa três aqui na mistura também, - Então, vamos te colocar também. - O índice três. - E vamos definir a cor de fundo aqui. - Dois fúcsia. - E vamos definir isto para o topo negativo 100 à esquerda. - 100 para que se sobreponham. - Lá, - lá vamos nós. Então você pode ver que o índice de um número maior se sobrepõe e ele puxa na frente e o índice do menor número vai para trás, certo? 48. Rolos de sprite: - em seguida, - vamos falar sobre sprites de imagem. - Agora, um sprite é essencialmente quando você pega várias imagens e as coloca juntas em uma única imagem e o propósito de acelerar o seu tempo de carregamento no navegador. - É mais eficiente se carregarmos uma única imagem e depois reposicioná-la do que se trocarmos entre várias imagens. - Então, - por exemplo, - digamos que você tem uma navegação que se parece com isso em seu site. - E vamos falar sobre este botão de casa aqui. - Digamos que você tem um elemento que está em Ley do tamanho desta casa. - Mas então, - por exemplo, - se esse sprite inteiro fosse, - digamos, - hipoteticamente, - 60 pixels de altura, - digamos que criamos um elemento que tem apenas metade de 30 pixels de altura, - para que você possa Onley ver que esta grande parte do botão está visível. - Lembre-se, - se colocarmos uma imagem de fundo em um elemento, - só podemos ver o máximo dessa imagem de fundo bem caber dentro desse elemento. Então, o elemento que é provavelmente um link ou algo assim, Theo Element, vai estar em ley do tamanho do botão cinza home aqui. - Ok, - Agora, - quando o usuário passa o mouse sobre, - queremos reposicionar esta imagem para puxar a imagem de fundo para cima - revelando assim a parte laranja e para o usuário. Parece que este botão acende laranja, mas muito rápido, mas muito rápido, mais rápido do que lá. - Eu posso ver que o navegador está realmente reposicionando a imagem de fundo puxando-a para cima. - E isso é mais eficiente do que pedir ao navegador para ir e encontrar uma imagem separada e - carregado. E a razão é quando a página é carregada pela primeira vez, carrega esta imagem inteira de uma só vez. - E então, quando o usuário passa o mouse sobre, - ele não é ter que ir e encontrar a outra imagem e carregado novamente. - É só reposicioná-lo. - Ok, - então sprites podem incluir dois estados para um único ícone, - ou eles podem conter vários estados, - por exemplo, - para itens de menu diferentes ou interfaces de usuário mais complicadas. - E a principal vantagem é o tempo de carregamento mais rápido, - então você carrega todas as imagens no início da página, - e então não há espera quando o usuário está interagindo e pairando o mouse sobre ele. - Este é um exemplo de um ícone de dois estados realmente simples mostrando uma pequena seta suspensa, - então você pode imaginar que o elemento que está dentro de é apenas tão largo e alto é metade - desta imagem. - Basicamente, você pode. - Você só pode ver esta metade superior. - É como uma janela olhando para a metade superior desta imagem de fundo contendo a seta preta. - E, em seguida, quando o usuário passa o mouse sobre, - estamos usando um comando CSS para alterar a posição de fundo. Negativo, mas com muitos pixels de altura. - Isto está certo. - Então, se isso tem 60 pixels de altura, - vamos dizer, - Movam isso. - 30 pixels negativos para que esta seta suspensa branca esteja agora na posição ou mostrando - onde a seta preta costumava estar. - Este é o código para um CSS brilhante rolar para que você possa ver se estamos fazendo isso com um link - irá definir o link para exibir bloco. - Assim pode aceitar uma largura e altura. - E então nós ligamos à imagem de fundo, que é toda a imagem Sprite que tem vários estados tipo de aninhados em uma imagem. - E então quando passamos o mouse sobre, - podemos usar o CSS pseudo seletor de classe hover, - que permite que o cursor permite que este estilo seja acionado quando o usuário passa o mouse sobre e a única - coisa que estamos mudando aqui é a posição de fundo, - que altera essa imagem de fundo para se reposicionar. - Então nós somos realmente como deslizar a imagem de fundo dentro do elemento e - revelando outra parte da imagem que estava anteriormente escondida. - A propriedade posição de fundo aceita dois valores o posicionamento horizontal e o - posicionamento vertical. - Então, o posicionamento horizontal aqui ajustado para zero. - Então não estamos movendo a imagem horizontalmente. - Mas aqui eles escolheram definir a posição vertical para 30 pixels negativos, que irá mover essa imagem de fundo para 30 pixels. - Ok, - então vamos em frente e dar uma olhada em algumas dessas técnicas que aprendemos e aplicamos - elas dentro do exercício, - que é o nosso exercício contínuo que temos trabalhado no site Z H W Shoes. 49. Navegação com estilo: - Eu voltarei. - Este é o exercício 3.2 posicionamento e sprites. - Neste exercício, - vamos adicionar um pouco mais de estilo à barra de navegação principal na parte superior da página - - E nós vamos ser estilo izing para que cada link tipo de parece um botão quando nós - passar o mouse sobre ele como se estivéssemos pressionando em um botão e nós também vamos adicionar uma barra de mídia social - no lado direito da tela e tanto a navegação quanto a Bar social. - Vamos aplicar algum posicionamento a eles para que fiquem quietos. - Eles vão ficar no lugar mesmo quando o navegador está rolando de quê? - Eu não tinha baixado o código inicial e você pode ver que eu trouxe aqui em texto sublime - e os dois arquivos principais que vamos precisar trabalhar aqui é a página de índice e o estilo - ponto CSS página. - Então a primeira coisa que vamos fazer é rolar até o cabeçalho e lembrar - dentro do cabeçalho temos o painel de logotipo, - mas também temos essa barra de valete e queremos começar a estilizar esta barra de valete onde estilizar - isso fez com a idéia de valete Bar para ter um granulado na textura que se repete em toda a - tela. - E então nós também vamos estilizar esta caixa chamada Valete o recipiente semântico HTML 5 - chamado Nath aqui. - E então nós também vamos estilizar cada um desses links individuais aqui. - Então vamos em frente e saltar para a página CSS de ponto estilo e podemos rolar para baixo. - E criei um comentário aqui. - Você pode ver online 1939 enfraquecer. Comece a escrever um código para estilizar a barra de valete. - Então a primeira coisa que eu quero fazer é selecionar aquele DIV com a idéia de barra de valete - em si, - e eu gostaria de adicionar uma imagem de fundo a isso agora. - Anteriormente, - nós olhamos para usar CSS três radiantes para fazer um desvanecimento de uma cor para outra, - e desta vez eu vou mostrar a vocês uma espécie de estratégia mais antiga ou como um legado - técnica para obter um int Grady para aparecer. - E isso envolve usar realmente criar o ingrediente como, - uma pequena fatia de imagem - e então você pode repetir essa imagem horizontalmente. - Então, - na verdade, - vamos dar uma olhada nessa imagem bem rápido aqui. - Eu vou em frente e trazê-lo para cima. - Então este é chamado de desvanecimento do cabeçalho e talvez um pouco difícil de dizer. A Alexis é tão estreita, mas isto é como se uma cor cinzenta clara desaparecesse de uma cor grande para outra, e fica um pouco mais escura aqui no fundo. - Então vai ser o gráfico que usamos. - E vamos repetir esta pequena lasca Finn de um gráfico horizontalmente. Uma vez que isto é apenas um pequeno pedaço de gráfico, uma pequena imagem aqui, esta imagem vai carregar muito rapidamente. - Na verdade, é um tamanho de arquivo muito pequeno. - E então, - repetindo horizontalmente, - vamos fazê-lo fluir através da página. - Hum, - e assim podemos ter um tamanho de arquivo pequeno real como quatro K, - e podemos usá-lo em uma grande parte da tela, - e ele ainda vai carregar muito rapidamente. Então, antes de usar os ingredientes que conhecemos, muitas vezes usamos uma imagem real que tinha o Grady dentro dela. - Então vamos em frente e dizer que você é l e vai apontar para a pasta de imagens e nós vamos - usar aquele que é chamado cabeçalho traço fade dot Jeff. - E vamos dizer a este para repetir horizontalmente assim. - Repita X. - Ok, - Nós também vamos adicionar uma borda no fundo aqui. - E antes olhamos para usar a borda abreviada CSS, - que afeta todos os lados. - Mas também podemos dizer traço de fronteira, - inferior, - fronteira, - traço, - borda esquerda, - traço, - trimestre superior. - Isso é certo. - Então, neste caso, - vamos definir um pixel sólido e usaremos uma cor cinza média como essa, - vindo em mais alguns estilos aqui. - Então também queremos adicionar uma borda para a própria caixa de valete para que possamos ir em frente e especificamente - apontar o nab que está dentro da barra de valete usando um seletor descendente. - Então nós estamos dizendo, - Ei, - navegador vai encontrar um elemento que tem uma idéia única de pegar nosso ir dentro dele e selecionar - aquele html cinco elemento semântico chamado valete. - E este, vamos dizer a ele para ter um traço de fronteira esquerda. - Um pixel, libra sólida. - Veja, veja. - Veja assim. - Ok, legal. , Dentro desse cara, temos os links que queremos estilizar, então começarei a estilizar esses links aqui e serei bem específico. - Mais uma vez, - usando um seletor descendente vai dizer - Ei, - navegador, - vá e encontre algo Você sabe, - um elemento com uma idéia única de barra de valete. Vá para dentro dele e encontre um elemento chamado valete e entre nesse elemento com estilo, todos os links dentro dele. - Então este apenas estilos links dentro do nab que está dentro da barra de valete. - Então é bem específico lá. - Então, para esses links, - queremos configurá-los para exibir em linha traço bloco, - e assim eles serão capazes de aceitá-lo com. - E o que queremos fazer é configurar isso para que todos os cinco links tenham espaçamento igual . - E você se lembra que este bar aqui, o fez com a idéia de pegar nosso isso é apenas em toda a tela 100%. E então temos uma coisa com a classe de rapper aqui, e esse cara tem uma largura fixa de 960 pixels. E dentro disso, temos um cara chamado Valete. Então agora ele não tem uma sagacidade especificada atualmente, então ele está apenas esticando 100% até que ele corre para a borda do rapper, que é 960 Então eu basicamente tenho esses cinco links aqui sobre venda, catálogo, preços e contato. - E eu quero que eles ocupem uma quantidade igual de espaço dentro do seu Então, se eu pegar que 100% de - sala que eu tenho disponível dentro de nunca e eu dividi por cinco, - eu recebo 20%. - Então eu posso definir este cara para ter uma largura de 20% como essa e vou ter certeza que isso não tem - margem em torno dele vai dizer margem zero - e nós vamos adicionar um pouco de preenchimento. Bem, eu só quero um pouco de estofamento na parte de cima e em baixo. - Então eu vou colocar 22 pixels de tapinhas na parte superior e inferior e zero na esquerda e direita . Use texto, transforme e faça com que todo o texto transforme automaticamente os caracteres maiúsculos, e definiremos a cor do texto para ser preta, certo? - E permite que você também defina o texto para uma linha no centro em relação a essas caixas. - Então vamos dizer alinhar texto, - centro. A seguir, vamos colocar uma borda apenas no lado direito de cada um desses links, e vamos defini-la para um pixel sólido. - Si, - si, - si. - E queremos remover o subjacente desses links. Então eu vou definir a decoração do texto para nenhuma. - E também vamos definir a fonte. - Você está usando a propriedade de fonte abreviada CSS. E eu vou definir o fundo para 20 pixels e vamos usar, uh, vamos ver. - Usaremos baldes comerciais assim. - Eu estava tendo um conjunto extra de citações lá. - Você tem que se livrar de um conjunto. - Lá vamos nós. E diremos que um backup de za dirá, Ariel, Sand, Sarah assim. - Ok, então vamos em frente e salvar isso. - Vamos dar uma olhada nesse cara no navegador para voltarmos e nos refrescaremos. - Legal. - Então, a barra de naff tem um fade chamado Dodge de cabeçalho. - Se isso está repetindo 100% da tela porque eles fizeram com a idéia de Navid, - Bar não tem um sagacidade especificado, - e é um bloco elementos de nível, como ir 100% da tela. - O rapper aqui tem 960 pixels. - Então esse cara está se concentrando bem aqui na largura deste rapper neste rapper - parecem todos alinhados perfeitamente. - Agora o valete está dentro do invólucro. - E eu dei uma borda esquerda de cinza no naff. - Então esta pequena linha aqui é criada criando um traço de borda deixou um naff, e então cada link tem um traço de borda. - Certo. Então isso me dá a fronteira aqui, na venda aqui no catálogo, aqui no preço aqui em contato, que nos dá uma espécie de separação, fazendo-os parecer um pouco mais como botões. - Você pode ver a decoração do texto maiúsculo e o estilo da fonte lá. - Ok, - hum, - vamos ver. - Isso é muito bom. - Vamos ver, - nós também queremos ser capazes de deixar o usuário saber qual página específica estava em, de modo que quando - eles clicam na página, - esse link tem um estilo diferente para que possamos ver que essa é a página que foram - aterrissou. - Então vamos voltar ao CSS aqui, - e vamos criar um estilo específico para isso. Vou em frente e dizer que o espaço do bar do amor foi selecionado. - Então isso só vai selecionar links que aconteceram, ter uma classe de selecionado se eles estão dentro da barra de valete. E eu vou dar a esse cara uma cor de fundo aqui, nós vamos salvar fundo preto, então ele vai ter uma cor de fundo mais escura, e eu vou definir a cor do primeiro plano aqui como Branco, nós vamos salvar fundo preto, então ele vai ter uma cor de fundo mais escura, e eu vou definir a cor do primeiro plano aqui como Branco, e eu vou aplicar isso. - Eu vou entrar e aplicar esta classe a cada página, e então nós vamos voltar para a página de índice de ponto html e para a página de índice. - Esta é realmente a página sobre então dentro deste link aqui, - Eu quero adicionar uma classe ok de selecionado apenas para este link, - e nós podemos copiar este código aqui classe selecionada, - e eu vou adicionar isso para as outras páginas. Então eu vou para o catálogo e descer para a navegação, e eu vou encontrar o link em torno do catálogo, que é bem aqui e este aqui. - Vou dar-lhe uma classe de seleccionados. - Então nesta página, - link de catálogo é selecionado e vamos para a página de contato em todos rolar para baixo e vamos - para o link de contato, - que está bem aqui e bem ritmo nessa classe de selecionados lá. - Vamos para o preço de uma página, e aqui está o elancet para preços, e eu vou entrar nesse link e bem ritmo com a classe de selecionados lá. - E por último, - podemos ir para as vendas e vamos para o link de venda aqui e eu vou colar nessa classe de - selecionado lá podemos salvar, - e então vamos para o navegador e vamos atualizar. - Legal. - Então você pode ver lá que este link está tendo a classe de selecionado nele. - Se eu clicar na página de venda agora, este tem a classe preta de selecionado nele. - Catálogo Tem as classes selecionadas lá precificando as classes selecionadas lá e entre em contato - classes selecionadas lá. - Então você pode ver que cada um dos links tem quase meio que faz com que pareça uma aba - Estrutura como esse botão é pressionado para a página particular. - Ok, legal. - Então vamos voltar para a página CSS de ponto de estilo aqui, e gostaríamos de adicionar um estado de pairar aqui, então vamos dizer que o laboratório é agora um ponto-e-ponto como esse. - E aqui vamos mudar algumas coisas estavam indo, - Teoh mudar a cor do texto para branco. E vamos mudar a cor de fundo também, Ingrediente. - E para este, - Eu vou apenas usar o CSS três Grady int. Então vamos ao navegador e vamos encontrar o nosso amigo Zilla, o Grady e o editor. - E eu já criei o Grady inapropriado aqui. - Ele apenas começa como uma cor preta nas bordas e desaparece para como um cinza mais claro no - meio. E eu vou ir em frente e dizer, “ Copiado e bem ritmo, ” - Eles são do Rio, e nós vamos salvar isso e vamos voltar para o navegador e atualizar. - Está bem, fixe. - E você pode ver quando eu passar por lá. - Então agora esses links acendem apenas no estado de foco que estava usando o pseudo classe - seletor. - Um cólon pairar direito. E quando trocamos de páginas, temos a cor mais escura na classe selecionada assim. - Legal. - Agora só temos estes. - Estes elementos têm um posicionamento normal aqui. - E o que eu fiz é que eu já adicionei preenchimento suficiente acima do logotipo aqui que nós podemos - realmente caber esta barra de navegação barra de valete para ser posicionado acima do logotipo e fixado no - lugar. E assim, quando descermos a página, a barra de navegação ficará lá. E inicialmente, quando você carregar a página pela primeira vez, você verá o logotipo embaixo da barra de valete, e então quando você rolar para baixo, ele começará a encobrir. - Então vamos voltar ao código e vamos voltar para pegar o nosso aqui. - Então vamos em frente e adicionar uma posição aqui de fixo. - Agora isso tem posicionamento fixo. - Deve ficar consertado. - Mesmo quando a janela do navegador rola e queríamos estar no topo da página, - alguém diz Top zero esquerda zero. - Então está no canto superior esquerdo da página. Agora, já que colocamos esse cara em posição fixa, ele vai entrar em colapso. - É com, apesar de não ter sido especificado. - Então o que realmente devemos fazer é especificar uma largura de 100% para aquela barra de navegação - ali. E lembre-se, nosso amigo Z Index permitirá que esteja acima de outras coisas. Então, se eu disser que o Índice Z um deve estar em cima de tudo o resto, , então vamos sair e salvar isso e voltar para o navegador e dar uma olhada nisso. - Então esse bar agora vai pular aqui quando eu fizer uma atualização de página como essa. - Então isso é fixe. - Então nós só fizemos o nab nosso ir em cima e porque ele está definido para posição fixa quando eu rolar - que NAB são sempre fica lá agora. Então, se eu vir aqui para esse vídeo, e eu disser, e eu disser, esse é um vídeo legal, mas eu quero ir para outra página. esse é um vídeo legal, - Eu não tenho que rolar todo o caminho até o topo. Eu sempre poderia ter acesso ao bar de valetes em todos os momentos. - Então esse é um uso para posição fixa. - Ok, isso está parecendo bem escorregadio. - Eu gosto disso. - O que vocês acham? 50. Como estilizar a barra de redes sociais: Em seguida, vamos construir uma barra de mídia social para a página aqui do lado direito, e vamos usar um posicionamento especial, então isso vai ficar fixo no lugar também. - E também vamos usar uma imagem Sprite de verdade para que, quando passarmos o mouse, essa imagem mude. - Primeiro, - vamos em frente e ir para a loja de fotos e vamos dar uma olhada em como esta imagem Sprite se parece - Então eu realmente peguei esses ícones sociais, um, PSD fora da Internet e você pode ver aqui que ele tem, como a maioria dos ícones populares de redes sociais aqui, e nós vamos usar os três primeiros. Mas dependendo de como posicionar isso, você poderia usar outros, como vídeo e YouTube ou cintilação, etc. - Então vamos usar. - Facebook estará usando o Twitter aqui e o ícone do Google Plus só porque eles são os três primeiros . Vou em frente e virar meus guias assim, e vocês podem ver que a cada 40 pixels há outro ícone, então o ícone branco ou cinza do Facebook começa em zero pixels e termina em 40 pixels, e então temos uma cor do ícone do Facebook que começa em 40 pixels e termina em - 80 pixels. E então o ícone preto do Facebook está começando em 80 pixels e terminando em 120 pixels aqui, certo? E então, se quisermos usar um ícone do Twitter, precisamos posicioná-lo ainda mais. - Então teríamos que dizer 40 negativos para puxar esta imagem para cima 40 pixels para que pudéssemos usar o passarinho aqui para o Twitter. Então vamos configurar isso para que esses ícones ou brancos e quando passarmos o mouse, eles vão ter cor, que é a segunda coluna aqui. E quando pressionarmos o botão do mouse ou quando clicarmos no estado ativo, vai ficar preto assim. - Ok, então vamos em frente e voltar ao texto sublime. - A primeira coisa que vamos querer fazer é entrar na página de índice e vocês podem ver aqui - que no topo do corpo, - criei um comentário aqui, - e é aqui que vou colocar minha barra de mídia social. Então vou entrar aqui e criar uma div, e vou dar uma ideia de social. - Vamos entrar e criar uma ligação. E este primeiro link vai ser para o Facebook, e vamos dizer isso para apontar para o Conde da nossa página no Facebook. Por enquanto, vou colocar um espaço reservado, e você poderia voltar aqui mais tarde e mudar isso para o Earl real, o endereço http da sua página do Facebook. - E nós vamos configurar esses caras para o alvo em branco para que eles abram em uma nova guia do navegador. Vamos ver, também podemos dar-lhe um título que se lembre, título terá efeito. Então, quando você passar o mouse sobre , o link, uma pequena legenda aparecerá para que você possa dizer, como, visitar minha página do Facebook ou algo assim, você poderia escrever lá dentro. - E uma coisa que é realmente importante é que queremos ter certeza de dar a cada um deles uma classe única . - E a razão pela qual queremos dar a cada um deles um nome de classe exclusivo é para que para cada - link, - possamos usar o nome da classe para reposicionar essa imagem Sprite para deslizá-la para cima ou para baixo de modo que - estamos vendo teatro pro PRI it ícone dentro desse link. Alguém dê a este 1º 1 um livro de classe F como esse, e eu vou copiar esse código e vamos colar isto duas vezes aqui. O segundo link será para o Twitter, então vou dar uma aula de idiota. O segundo link será para o Twitter, - Vamos apenas usar um pouco nomes de classe curtos como esse e para o título vai dizer Twitter e - para o último vai dizer G mais como o nome da classe e vai definir o título para o Google. - Além disso, assim. - E é melhor mudarmos o texto aqui também dentro do link. - Agora, - você pode estar se perguntando por que estamos colocando texto dentro desses links quando estamos apenas indo - estar vendo um ícone aqui que é feito de nossa imagem Sprite. - A razão é que é uma boa prática para os motores de busca realmente escrever o nome - dentro do link aqui assim. - E assim o motor de busca pode ler isso e ver para onde esse link em particular está indo. - Usaremos CSS para ocultar este texto, e assim nossos usuários só verão o ícone Sprite. - Ok, - então nós podemos salvar isso nesta página, - e eu fui em frente e já adicionei este código em todas as outras páginas para você - para que possamos apenas saltar de volta para a página de estilo de ponto CSS. E se descermos até a linha 14 aqui, podem ver que escrevi um comentário, podem ver que escrevi um comentário, observando que esta seção aqui será para o bar social. - A primeira coisa que queremos fazer é estilizar aquela caixa com a ideia de social. - E vamos preparar isto também. - Posição fixa. E nós vamos dizer a ele para ir para o topo 200 pixels para baixo do topo, e vamos dar-lhe apenas um pouco do lado direito. - Então, não é certo contra a janela do navegador vai dizer como três pixels da direita. - E lembre-se que cada um dos ícones tem apenas 40 pixels de largura, - então nós podemos apenas dizer 40 pixels e vamos ter certeza de dar-lhe um maior número de índice Z para que - ele está no topo vai dizer Z Index um ok, - e então vamos para dentro disso desses links, então eu vou em frente e dizer um livro ponto f, e nós vamos adicionar a imagem de fundo para cada umdesses links, então eu vou em frente e dizer um livro ponto f, - E então eu vou dizer um ponto idiota para o twitter e um ponto g mais para o link do Google Plus . - E eu estou usando um seletor composto porque eu vou definir alguns estilos todos - o mesmo para esses caras. - Estes vão ser definidos para exibir bloco porque queremos que eles empilhem verticalmente um em cima - do outro - e vamos certificar-nos de que cada um desses links está em ley do tamanho de um Nikon eso. Lembrem-se, cada um destes só vai ter 40 pixels como este, então podemos definir isto para ter 40 pixels e uma altura de 40 pixels. - Então, mesmo que as imagens de fundo muito maiores, - nós só seremos capazes de ver 40 pixels por 40 pixels da imagem do fundo - imagem e a fim de esconder o texto. - O que podemos fazer é usar traço de texto na toca e podemos definir o texto em dívida para 100% o que - realmente empurrá-lo. 100% significa que está recuado 100% do tamanho do recipiente em que está. Então este é um de recipientede 40 pixels de largura. - Então, na verdade, ele vai recuar o texto 40 pixels apenas fora do contêiner, - e o que podemos fazer é enfraquecido, - então definir o estouro como oculto para que não vejamos nada que esteja fora do elemento -. Então este Texas em Denning está em Denning fora do elemento, e então é invisível lá. E também vamos definir o espaço em branco aqui para saber Rap isso, e vamos ligar ao fundo. - Então cada um deles vai realmente usar a mesma imagem Sprite, - e vamos dizer que você é mais e vamos vincular a imagens barra ícones de traço social ponto PNG e eu - quero configurar isso sem repetição. Então só há uma dessas imagens de ícones sociais dentro desses caras. - Então cada um desses “F book twit “e G mais cada um tem a mesma imagem de ícones sociais dentro deles. Agora, Agora, para cada classe individual, para cada classe individual, vou ter que posicionar essa imagem de forma diferente. - Então, - por exemplo, - para a classe do livro F, - nós vamos querer x na posição do traço de fundo 200 que é Ah, - zero horizontalmente e zero verticalmente apenas irá colocá-lo no canto superior esquerdo. - Então lembre-se, - voltamos para a imagem aqui, - isso seria o equivalente a 00 é o canto superior esquerdo significa, - o que significa que não estamos mudando a imagem. No entanto, quando passarmos o mouse, queremos que essa imagem se mova mais de 40 pixels assim. - Então vamos criar uma classe pairando para isso dizendo um ponto f livro cólon pairar. - E para este, vamos mudar a posição de fundo para ser negativo 40 pixels horizontalmente e zero - pixels verticalmente. - Então o que isso vai fazer é movê-lo horizontalmente, - 40 pixels negativos. - O que significa que vai para esta borda esquerda e puxá-lo para que ele mude esta cor para a posição de onde este F branco costumava estar. - E porque não vamos movê-lo verticalmente. Podemos pôr o tipo a zero lá, e eles devem ter um ponto semi cólon ali. Podemos pôr o tipo a zero lá, - Não vamos esquecer que, - e também temos um estado ativo, - que é o estado quando pressionamos o botão do mouse, - ou quando você está segurando o botão do mouse pressionado . E para este, podemos mudar a posição de fundo para avançar ainda mais. - Então, neste caso, - queremos nos mover, - não apenas 40 pixels, - mas queremos mover mais de 80 pixels para chegar ao fundo preto F. - Então vamos dizer negativo. - 80 pixels zero assim. O próximo é o ícone do Twitter, que tem uma classe de idiota. O próximo é o ícone do Twitter, que tem uma classe de idiota E para isso, também queremos definir a posição de fundo. Copie e cole isso agora, queremos movê-lo para baixo. - Então primeiro, - inicialmente, - queremos ver este branco, - para que não tenhamos que movê-lo horizontalmente. Mas, a fim de chegar deste canto superior aqui para ver o ícone do passarinho - em vez disso, - temos que dizer negativo 40 pixels verticalmente. - Então este primeiro números horizontais no segundo números verticais. - Então aqui queremos dizer 40 pixels negativos como esse para movê-lo verticalmente. - E podemos copiar e colar estes outros aqui só para poupar tempo. - E podemos pagar. Sente-se aqui e mude essa aula para idiota assim e idiota assim . - E aqui a diferença é que estaríamos movendo 40 pixels para cada uma dessas posições verticais aqui. - Mas a mesma coisa para este aqui em que ainda estamos nos movendo horizontalmente. - 40 pixels ao passar o mouse e ativo ou movendo-se acima de 80. - Porque lembre-se destes ar empilhados para que este seja o estado padrão. - Estamos sempre nos movendo horizontalmente 40 para o estado flutuante e movendo mais de 80 horizontalmente para o estado ativo. - Então a única coisa que vai mudar para cada um deles é o valor vertical. - Agora, - quando dependendo de você sabe, - que classe estava usando, - Então, por exemplo, - eu realmente poderia apenas copiar e colar este código aqui - e eu poderia reformulá-lo apenas um pouquinho para o Google Plus Icahn, - que tem uma classe aqui de G mais também você um pequeno truque puro que você pode fazer com texto sublime - se você gostaria de mudar várias coisas ao mesmo tempo aqui. - Por exemplo, - se eu quiser alterar esta classe, - nomeie este nome de classe neste nome de classe simultaneamente. - O que você pode fazer é clicar com o mouse, - você sabe, - clicar no cursor na frente do texto. - E se você estiver no Mac, você pode segurar a tecla de comando e clicar novamente e novamente na frente de cada um desses três nomes de classe. - Se você estiver no Windows, você poderia segurar o controle e clicar depois do chá para cada um deles, e você pode ver que eu tenho três cursores piscando. Agora deixe-me fazer isso mais uma vez, então eu vou clicar no cursor uma vez aqui. - E se você segurar o comando no Mac ou o controle no Windows e clicar novamente uma segunda vez na - terceira vez aqui, - você realmente tem três cursores. - E agora, - quando você apaga seu permitindo que você escreva ou edite essas três linhas simultaneamente para que possamos - digamos como, - G mais como que Oops tem um P extra seu G mais assim. - E então a única coisa que está mudando aqui é o fato de que estamos movendo 80 pixels para baixo - então eu poderia clicar aqui e aqui - e eu posso simultaneamente mudar os três desses 2 80 pixels assim. - Então vá em frente e salve e vamos voltar para o navegador e vamos fazer uma atualização. - Legal. - Então esses caras estavam aparecendo e eu fiz algumas contas para que eles aparecessem , uh, - 200 pixels abaixo deve permitir que eles combinassem com a borda superior aqui da primeira seção. - E calculei que medindo a altura do pixel disto mais isto mais os 30 pixels de espaçamento ou preenchimento dentro do que a madeira fez aqui. - E você pode ver o efeito do sprite trabalhando. Porque quando passarmos o mouse, vemos a cor do Facebook. Vemos a cor do Twitter, e vemos a cor do Google. - Além disso, assim. - Agora, - se clicarmos e mantivermos pressionado o botão do mouse, - veremos que ele ficará preto assim para cada um deles. - Então temos o estado flutuante e o estado ativo. - Tudo bem. - Muito legal. - Ok, ótimo. - Os sites começam a parecer bem lisos. - Podemos verificar em todas as páginas diferentes lá, - certifique-se de que as navegações funcionam corretamente e certifique-se de que esses itens sociais estão aparecendo - - E isso parece muito bom. Aqui na página de contato, tenho um pequeno problema com a moldura de fora. Então eu vou voltar para o texto sublime e vamos para o código CSS para que eu enquadrar - lá, - que deve estar aqui online. - Quer esperar? - Então nós vamos para o quadro I aqui, - e nós vamos substituir o HTML com algum CSS com comando. - E vamos dizer para ser 100%. - Então, na verdade, será 100% até chegar ao contêiner pai, que é aquela pequena seção para a coluna em que está. - E isso deve consertar isso. - Vamos fazer um teste. - Lá vamos nós. - Então agora o quadro I está se comportando. - Está ficando dentro daquela coluna. - Então, em seguida, você vai querer passar para o desafio de código onde você estará adicionando - alguns posicionamentos especiais e alguns sprites em sua própria página. 51. Técnicas de layout responsivo: - Oi. - Bem-vinda de volta. - Este é o slide 4.1 responsivamente fora técnicas. Então, em exercícios passados, aprendemos a lidar com a construção de um layout de site. - E agora o que queremos fazer é focar em pegar todas as coisas que aprendemos e aplicá-las a um novo modelo onde podemos mudar nosso layout com base no tamanho do dispositivo. - Está vendo para fazer isso. - Nós vamos explorar CSS três media queries como uma técnica para alterar nosso código CSS, - dependendo do tamanho do dispositivo. - E isso vai, assim, alterar nosso layout em nosso conteúdo para que ele se encaixe em vista - agradavelmente em todos esses dispositivos de tamanho diferente, a fim de criar uma visualização mais suave - experiências possíveis. - Nós também vamos discutir técnicas como Met, - um dispositivo com o tributo e também algumas correções JavaScript que vão permitir CSS três - consultas de mídia para trabalhar em dispositivos mais antigos, bem como explorar algumas correções JavaScript que - permitirá uma experiência suave visualização Mesmo quando mudar uma orientação de dispositivos de retrato - paisagem do dedo do pé, - por exemplo, - sites de hoje estão sendo vistos em um número cada vez maior de dispositivos cada um com - seus próprios diferentes tamanhos e proporções de tela. - E por causa disso, - diferentes estratégias surgiram para lidar com mudanças de layout e diferenças de dimensionamento - da detecção de dispositivo para dispositivo. - Ao verificar os dispositivos solicitantes, - Informações de cabeçalho é uma maneira comum de ver quais são as especificações para um determinado dispositivo e, em seguida, servir - os arquivos apropriados de volta para o dispositivo. - Então, - por exemplo, - uma solução é construir sites separados para celular e desktop, - como twitter dot com versus mobile dot twitter dot com. - Outra solução é criar um único site e alterar o estilo e layout usando CSS - media queries, - que é a técnica que vamos aprender. - Então você pode ver que algumas empresas optam por usar um script no back-end. - E quando um dispositivo solicita essa página quando faz a solicitação http para o servidor remoto, - o servidor usa essa informação de cabeçalho para detectar o dispositivo que está solicitando o arquivo, - e com base nisso - ele vai realmente passar de volta arquivos HTML diferentes em diferentes arquivos CSS. Isso é como construir dois sites diferentes, um paraumpara celular e outro para computadores desktop e tablets, etc. - Ok, então isso realmente requer mais trabalho porque nós estamos realmente construindo, - você sabe, - dois locais. Então temos o dobro da quantidade de código lá, e é por isso que gosto desta última solução. - E essa é a solução que eu vou ensinar a vocês e às soluções cada vez mais - ganhando popularidade como o ir para a solução para fornecer um site responsivo. - Então, para que o conteúdo seja exibido em dispositivos menores, - mudanças são feitas nas páginas. - Alterações comuns no layout incluem ocultar conteúdo ou mover conteúdo. - Para combinar a área de tela disponível dispositivos, - por exemplo, - você pode pegar os elementos de invólucro ou recipiente e mudá-los para um fluido com em vez de uma - quantidade fixa de pixels. - E dessa forma, - quando o dispositivo com mudanças seus elementos com também responderá. - Outras estratégias incluem definir as colunas flutuantes para flutuar nenhum, - e com o 100% para mudar para uma única estrutura de coluna em oposição a uma coluna múltipla - estrutura, - imagens, - tabelas, - forma, - entradas e vídeo também são geralmente definidos para inteligência fluida. - Desta forma, - o conteúdo será reduzido à medida que a tela dos dispositivos diminui, - então é importante ter suas imagens, tabelas e formulários configurados dessa forma - e você pode imaginar que em uma tela maior - suas imagens e formas parecerão um pouco maiores. - Eles vão ocupar toda a largura, - enquanto o dispositivo escala para baixo, - essas imagens também serão reduzidas nesses formulários também serão reduzidas para caber dentro do - espaço disponível na tela. - Também está chegando para alterar o texto e o tamanho do link. - Então, - por exemplo, - como um dispositivo fica menor, - você pode ter que tornar determinado imposto menor para que ele não corra para outro texto. - Você também pode achar que você precisa aumentar o imposto porque determinado tamanho de texto pode ser muito - legível em um computador desktop. Mas à medida que você vai para um dispositivo portátil, se você está segurando esse dispositivo portátil a uma distância mais distante do comprimento do braço, - por exemplo, - você pode precisar que seu texto de navegação principal seja um pouco maior. - Então, o texto provavelmente vai escalar para cima ou para baixo para ser para criar uma experiência de visualização confortável - nos dispositivos de diferentes tamanhos. - Então vamos dar uma olhada nisso. Este diagrama aqui por um segundo e vamos imaginar que este é um local que estamos construindo, e vamos imaginar que este quadrado rosa representa o nosso logotipo. - E digamos, - por exemplo, - que este quadrado amarelo representa a nossa navegação principal. - E esta caixa preta aqui será uma barra lateral que tem alguns sub-links nele. - E estes quadrados azuis aqui representam as diferentes seções da nossa página. - Então cada um tem um certo tipo de conteúdo e provavelmente parágrafos, texto e coisas - assim. - Ok, - então este é o layout preferido que este designer tinha criado para a área de trabalho. - Mas o que acontece quando reduzimos a uma tela de tamanho menor, - por exemplo, - quando visualizamos este site em um tablet em vez disso? - Então aqui você pode ver algumas mudanças que foram feitas no alto para torná-lo mais legível - é que nós diminuímos o espaço aqui entre a navegação principal e o logotipo, a fim - acomodar a largura deste dispositivo. - E também, - realmente não há espaço para a barra lateral aqui à esquerda, - porque nós gostaríamos de usar todo o espaço disponível para o nosso conteúdo de seção. Então o que eles fizeram aqui é que tiraram a barra lateral do lado, e decidiram mover isso para baixo da navegação. - E então aqui nós temos, - ah, - mudar de uma estrutura de três colunas aqui para uma estrutura de duas colunas no dispositivo tablet - - E então, - conforme reduzimos para um dispositivo ainda menor, como um iPhone, - por exemplo, - há uma necessidade de mudar para uma única estrutura de coluna, - e eles de fato, - na verdade, - ocultaram alguns conteúdo. - As barras laterais ou foram movidas para baixo com os sub-links, - ou estão completamente escondidas, - e você verá que a navegação principal aqui, - que é uma caixa amarela, - foi empurrada para cima por baixo do logótipo. - Então isso demonstra todas as técnicas que estavam indo para usar no próximo exercício para - alterar o nosso layout à medida que a área de tela disponível diminui. E para fazer isso, como eu mencionei, vamos usar uma nova técnica e CSS três, conhecido como media queries, e isso dá ao CSS o poder de perguntar ao navegador a largura do dispositivo. - Então, - com base em quantos pixels de largura a tela tem desse dispositivo, - ele determinará qual código CSS usar. - E começa com o símbolo at aqui dizemos na mídia, - e depois disso, - somos capazes de escrever uma declaração, - e esta afirmação será avaliada como verdadeira ou falsa. - O que esta declaração está dizendo é a tela Onley, que significa que só vai avaliar isso ou verificar isso na tela especificamente - dispositivos em vez de projetor ou dispositivos de impressão. - E depois disso estamos verificando a largura do dispositivo. - Então isso é verdade ou falso. - Diz “Ah “na tela de mídia. - Se isso estivesse em um projetor, - isso seria avaliado como falso e, portanto, ele não usaria este código aqui. - Além disso, - se a largura máxima dos dispositivos maiores que 768 pixels, - esta declaração vai avaliar como falso e, portanto, não vai usar qualquer um dos códigos CSS - escrito entre a abertura e fechamento chave aqui. - Não. - Se a largura do dispositivo for 768 pixels ou menos do que esta declaração aqui, - esta consulta de mídia será avaliada como true, - caso em que ele usará o código dentro da seção, - tornando assim o tamanho da fonte dos links dentro do navegação um pouco menor como eu - mencionado anteriormente. - A fim de obter a experiência de visualização mais suave é possível, - há algumas outras técnicas que podemos implementar em nosso código para fazê-lo. - Uma dessas coisas é o meta dispositivo com tag. Aqui vocês podem ver que tenho uma meta tag com o nome de Vieux Port, e usamos uma declaração aqui dentro do conteúdo para evitar que dispositivos ampliem ou diminuam o zoom. - E isso nos permitirá, em vez disso, confiar em nosso estilo de consulta de mídia para alterar o layout - em conformidade. - Então os fabricantes de dispositivos eles percebem que eles são o tamanho de cuspe de tela disponível é - na verdade muito menor do que a maioria dos sites que as pessoas estarão visualizando no dispositivo. - Então, uma estratégia, - especialmente em dispositivos de tela sensível ao toque, - é reduzir o zoom para que todo o conteúdo do site fique menor. - Assim, - ele se encaixa dentro do quadro do dispositivo, - e, em seguida, cabe ao usuário usar seus dedos ou toque para ampliar em duas partes diferentes - do site. - E isso é algo que queremos evitar. - Nós não queremos que ele diminua o zoom porque nós vamos estar escrevendo estilo de media query inteligente para - obter o nosso conteúdo para mudar de tamanho e layout para que ele vai caber dentro da inteligência da tela do dispositivo - sem ter necessidade de retomar. - Então, a fim de desativado, - retomando o que fazemos é novamente definir esta meta tag com o nome de Vieux Port e dentro - conteúdo. - Aqui nós definimos a largura para ser igual à largura real do dispositivo e definindo inicial - escala toe 1.0 do que o dispositivo não será, - hum, - ele não vai diminuir quando o site inicialmente carrega, - será o 1.0 é o tamanho real do pixel do site e definindo a escala mínima para - 1,0 e a escala máxima para 1,0 que realmente desabilitou o zoom para que o usuário não seja capaz - ampliar ou reduzir o zoom no site novamente, - o que nos permite confiar em nossa mídia estilo de consulta para alterar o layout. - Há também algumas correções de JavaScript diferentes que ajudarão a tornar a experiência de visualização - muito mais suave. Então, pelo menos no momento da gravação, há alguns bugs com diferentes dispositivos da Apple, como o iPhone um, permitindo o zoom ou alterando o zoom quando você muda de horizontal para vertical ou quando você ... mudar da paisagem do dedo do pé retrato. - Então, se você estiver visualizando um site no iPhone e incliná-lo da vertical para a horizontal. - O software do dispositivo aciona um zoom, que possamos desativá-lo usando esta correção do JavaScript. - Além disso, - há também uma correção de consultas de mídia para versões mais antigas do Internet Explorer que não suportam consultas de mídia. - Então vamos em frente e passar para o próximo exercício e vamos começar a implementar esses media - consultas em nosso projeto de exercício contínuo. 52. Como configurar o teste responsivo local: - Oi. - Bem-vinda de volta. - Este é o Exercício 4.1 Layout responsivo Para começar, - Eu gostaria de ajudar vocês a configurar o seu computador para testar o site responsivo em - telas laterais diferentes para diferentes dispositivos, na verdade, sem ter que sair e comprar tudo - esses dispositivos e telas de diferentes tamanhos. Para isso, vamos usar uma ferramenta online gratuita. - Este site chamado Cork ferramentas ponto com barra tela voar uma das coisas agradáveis sobre tela - vôo que contestamos em um único local. E como está online, não há necessidade de baixar nenhum software especial. Uma das coisas boas da mosca de tela é que ela é muito limpa, e você pode ver aqui embaixo no fundo. - Há ícones diferentes, - e ele permite que você alterne entre telas de tamanhos diferentes, - tablets e dispositivos móveis, - para que você possa então visualizar seu site em telas menores e maiores. - E até inclui um botão girar exibição aqui para que você possa testar retrato versus paisagem. - Agora, - uma das coisas que você vai notar quando você vem para tela fly é que ele solicita que você - cole no URL do site que você gostaria de testar e notar que eles estão pedindo - um endereço http. - Então eles estão procurando um endereço de site apropriado. - E você deve ter notado pelos exercícios anteriores que sempre que estivemos abrindo nossos arquivos localmente em nosso computador não estavam realmente entrando. - Endereço http O que acabamos vendo é algo como isso onde a URL começa com - arquivo de dois pontos barra, - barra barra e, em seguida, tem apenas a estrutura de pastas para o arquivo em nosso computador local. - E isso é perfeitamente bom para pré-visualizar o seu site antes de decidir enviá-lo para - seu servidor de hospedagem, - no entanto, - você vai notar que com tela fly se copiarmos e colar isso aqui que quando vamos para ver - o site o que eu quero Uau, - ele não funciona. - E a razão por que é isso? - Está tentando ir para um endereço http ou uma garota real na internet tão hipoteticamente que você poderia fazer upload do seu site. - Você é um site responsivo, - e então você pode testá-lo aqui se você já tem on-line. - Hum, - e se você estiver interessado em seguir esse caminho depois de assistir este vídeo, - você pode ir em frente e pular para o vídeo intitulado Publicação do Site usando FTP e isso - vai ensiná-lo a usar o arquivo zilla para carregar seus arquivos do site para seu servidor remoto. E então você pode simplesmente colar seu nome de domínio aqui, e você pode usar o Screen Fly para testar seu responsivo projetado dessa forma. - E se você não quiser que todos na Internet possam vê-lo enquanto você ainda está consertando, você pode criar uma pasta em seu servidor chamada Teste ou algo assim que só você sabe como chegar. - E você poderia arrastar os arquivos para o seu agora. - A única desvantagem disso é que, obviamente, - sempre que você fizer uma alteração no CSS localmente, - você terá que salvá-lo e depois carregado para o seu servidor para depois testá-lo na tela fly. - Então, a fim de acelerar o processo de produção e ser capaz de continuar apenas - trabalhar localmente - o que eu vou fazer é instalar um servidor de teste no meu computador local - e há algumas opções diferentes para fazendo isso. Para Mac, você pode baixar minha senhora, que lhe dará a capacidade de instalar um servidor de teste em seu computador que você possa usar. E se estiver no Windows, pode usaro servidor Wamp ou Wamp. E se estiver no Windows, pode usar pode usaro servidor Wamp ou Wamp. Então esses dois livres de ar , e eu vou te mostrar como configurar isso no Mac. Infelizmente, eu não tenho um computador Windows, mas posso dizer que do jeito que isso funciona é que você baixaria Wamp. - Hum, - e você tem que selecionar o que é especificamente vai coincidir com o seu computador. - Eles têm uma versão de 32 bits em uma versão de 64 bits. E se não tiver certeza sobre quais configurações respeitam seu computador, há um link dentro da área de discussão. configurações respeitam seu computador, - Você pode ir verificar que tem alguns outros links Teoh sites que têm direções. - Ou, na verdade, - se você pesquisar janelas no Google, - como verificar se seu sistema é 32 ou 64 bits, - você verá que há um thread ah que explica isso no site da Microsoft. - Ok, então basicamente o que você faz, embora essencialmente como você baixar wham! - E quando você instalá-lo depois de instalá-lo, - ele cria este diretório em seu computador, - que o padrão é C, - dois pontos barra wamp slash www e todos os arquivos que você colocar dentro desta pasta www que você pode acessar - seu , digitando em http dois-pontos barra barra host local. - Então, - por exemplo, - digamos hipoteticamente que você estava criando um site para uma fazenda de café no Havaí. E talvez você nomeie a pasta de sua pasta raiz principal para o projeto do site. Você chama de “Fazendas Kona”. - Então o que você faz é pegar sua pasta do site, - Kona Farms, - e você iria arrastar toda a pasta do site para a pasta W W W dentro daquela pasta Wamp -, - e então para acessar isso em seu navegador como - ah, - servidor de teste local, - você digitaria no domínio host local barra Kona Farms para entrar nessa pasta. - Agora, - é muito semelhante no Mac quando você instala a senhora. - Então, cara, você pode vir aqui e clicar no download. - Agora ligue isto. , Este aqui que diz, agora é para a versão paga, que é a senhora profissional e para as nossas necessidades. - É bom usar a versão gratuita aqui, então você clica em baixar agora e você instalaria a senhora. - Agora, - quando você baixar e instalá-lo, - você pode encontrá-lo em sua pasta de aplicativos - e eu até criei um atalho aqui na minha doca. - Para ele assim diz que pode ter. E quando você clicar nisso quando você falar, você verá essa pequena tela aparecer. - E o que acontece é que cada uma dessas luzes aqui acenderá verde quando o servidor for iniciado. - Se você descer aqui para preferências, - há essas guias diferentes aqui e a última aba aqui, - este botão que diz, - Apache, - se você ir em frente e clicar que isso realmente permite que você escolha qualquer no seu - computador Ah, - que você gostaria de ser o diretório raiz do seu servidor local. Então, Então, tenho uma pasta chamada Sites no meu computador. - Então eu disse que fui em frente e fui para seleção, - e eu apenas selecionei meu nome de usuário. - E então selecionei sites, - por exemplo, - e cliquei em aberto. - E assim. - Agora, - todos os arquivos que eu colocar na minha pasta Sites eu posso acessar indo para o host local no navegador. - Então, uma vez que você configurar isso, - você pode apenas como, - minimizar isso ou esconder - e o que eu quero fazer é que eu gostaria de descobrir que os arquivos do meu site, - e eu quero movê-los para o mesmo pasta que acabei de especificar. - Então eu arrastava esses arquivos no meu caso, - para a minha pasta Sites e, em seguida, para acessar isso no navegador. - Agora podemos entrar em nosso navegador padrão e novamente no Windows. - Você só digitaria o host local Slash. - E então, - qualquer que seja o nome da pasta que você tinha colocado dentro da pasta www dentro daquela pasta Wamp no Mac, - é um pouco diferente. Além de escrever o host local, você tem que colocar também o símbolo de dois pontos e um número de porta, que o número de porta padrão para senhora é cólon 8888 e então uma vez que você entrar lá, você pode encontrar a pasta do seu projeto de site. No meu caso, tenho algumas pastas aqui para chegar a ele, tenho algumas pastas aqui para chegar a ele, e então seu site aparecerá para que você perceba. - A diferença é que em vez de visualizar este arquivo a partir do sistema de arquivos local como este -, - usando barra de dois pontos de arquivo, - você pode realmente visualizá-lo a partir de um servidor de teste local que você acabou - instalado no seu computador. - Então este u R L agora é utilizável na tela de mosca então eu posso ir em frente e copiar isso e voltar - na tela Fly e eu posso colar este cara aqui sob H T P. - Colon barra barra barra vai apenas colar isso lá e você vai ver que ele começa com - host local agora em vez e vamos clicar em Ir e agora podemos ver o nosso site e contestar em - todos aqueles dispositivos de tamanhos diferentes. - Legal. - Então a coisa boa sobre isso é não só eu posso testar meu site agora, mas não há necessidade de eu fazer o upload porque isso está realmente executando fora de um servidor de teste no meu computador local. - Então, se eu trazer esses arquivos para cima em texto sublime que eu posso editar, - o código é eu ir e salvá-lo e eu vou ver as mudanças aqui clicando com o botão direito dentro do - frame e selecionando reload frame. - Eu vou ser capaz de ver instantaneamente as mudanças no site. - Agora há uma última opção. Se não tem certeza de que quer instalar o Wham ou a senhora como um servidor de testes local no seu computador. Se não tem certeza de que quer instalar o Wham ou a senhora como um servidor de testes local no seu - No mínimo absoluto, - o que você pode fazer é você pode trazer seus arquivos aqui em seu sistema de arquivos local, - e você pode simplesmente arrastar o canto do navegador para ver quaisquer alterações. - Então, - como ele, - esta largura particular da tela aqui você pode ver os ícones sociais estão na mão direita - lado. Mas quando não há mais espaço para caber, tenho o código preenchido para que eles pulem para o painel do logotipo. - E como uma tela fica menor, - há outras mudanças como esta, - como o logotipo ficando menor e invertendo a navegação do tema sob ele assim. Então é assim que configuramos nosso ambiente de teste local para criar saídas responsivas. Então é assim que configuramos nosso ambiente de teste local para criar saídas responsivas. - Vamos em frente e passar para o exercício de layout responsivo. 53. Preparem o HTML para layout responsivo: - Tudo bem, - então para começar, - eu quero que já não tenha trazido o código-fonte para 4.1 responsivamente aqui fora em texto sublime - - E eu também trouxe este código aqui no navegador indo para ferramentas de cortiça ponto com barra - tela fly, - que é discutido no vídeo anterior. - E eu fui em frente e já vinculado à cópia local no meu servidor de testes local para - esta página da Web. - Então, poderemos testar o layout em dispositivos de tamanhos diferentes. - E os únicos dois arquivos que nós realmente vamos precisar trabalhar com para este exercício é a - index dot html e também a página de estilos de dispositivo dot CSS. - Então eu criei uma folha de estilo adicional para vocês na pasta CSS. - Então agora você deve ter normalizado ponto CSS estilo ponto CSS e esta folha de estilo adicional - estilos de dispositivo ponto CSS onde estaremos adicionando todas as nossas consultas de mídia s para que possamos - controlar a forma como o site exibe em diferentes dispositivos de tamanho. - Agora, a primeira coisa que queremos fazer é que vamos querer adicionar algumas tags aqui na seção principal de nossas páginas HTML. - Dessa forma, podemos obter a experiência de visualização mais suave é possível em todos os diferentes - dispositivos. - Então a primeira coisa que vamos fazer é ir para a linha nove aqui e vamos adicionar o meta com - tags para que possamos definir dispositivos enviados para que seus navegadores não aumentem ou diminuam o zoom - quando o site é carregado. - E impedindo o zoom. - Então podemos confiar em nossas consultas de mídia para mudar o tamanho do layout. - Escrevi um comentário online. - Nove. - Você pode apenas ir em frente e destacar isso e nós vamos criar um ataque Met. - E dentro da meta tag, - nós vamos dar-lhe um nome de porta de visão que irá mirar os dispositivos Vieux porta. - E vamos criar outro atributo chamado Content. - E aqui vamos escrever uma declaração que desativou o dispositivo está condenando. - A primeira coisa que queremos fazer é definir com igual ao dispositivo com, - e então vamos colocar uma vírgula, - e vamos especificar que a escala inicial do traço é igual a 1.0 ou 1.0, - e então vamos definir o escala mínima de traço igual a 1,0. - E também vamos definir a escala máxima de traço igual a 1,0. - Então, isso irá desativar o zoom em todos os diferentes dispositivos que visualizam este site. - Outra coisa que vamos fazer é ligar a um arquivo JavaScript que está indo - Teoh corrigi-lo para que os iPhones e iPads quando girar a partir de paisagem dois retrato, - ele não vai tentar zoom ou zoom out agora. - Ah, - na verdade, - pesquisa no Google por isso, - ou você pode ir para o hub dot com e procurar por este código. Chama-se a mudança de orientação. - Conserta como confinou isso? - Não, eu tenho o, uh você está escrito aqui, então eu vou digitar, e nós vamos usar essa tag de scripts como esta, que tem um script de abertura e fechamento. E dentro da tag de script de abertura, vamos usar SRC para apontar para a localização deste arquivo javascript, que está em http s cólon barra ponto raw Get hub dot com barra w I l t o slash I OS - mudança de orientação de traço. - Certifique-se que eu soletrar corretamente Orientação mudança traço corrigir ponto Js Isso é realmente um - muito longo você está todos lá. - Ok, - Você também pode ir até essa garota e apenas baixar este arquivo javascript e colocá-lo em uma das suas pastas, - talvez uma pasta J s - e então você pode ligar para ele localmente. - E essa é provavelmente a sua aposta mais segura é pegar a cópia atual deste - baixada e vinculá-la aqui para nossos propósitos. - Isso deve ser bom. Só para ligar a ele a partir deste controle remoto, vocês estão todos aqui. - Está bem. - E então, - ah, - nós também queremos vir aqui para a seção de scripts e vamos adicionar uma correção para, - hum, - versões mais antigas do Internet Explorer aqui. - Isto é online 19. - Eu escrevi este comentário aqui que diz adicionar ligado ao CSS três consultas de mídia IE corrigir. - Eu vou apagar isso, - e eu vou guia aqui e nós vamos criar a tag scripts para isso. - Então isso só vai Teoh ser necessário para versões mais antigas do IE. - Então ele pode estar dentro do meu comentário condicional por menos que o Internet Explorer nove aqui, - então eu vou criar minha tag de script de abertura e fechamento lá e eu vou criar meu atributo SRC e - Eu vou ligar para esse arquivo. - Agora Este arquivo aqui é compartilhado através da rede de entrega de conteúdo do Google. - Eu poderia apenas digitar em http cólon barra barra e isso é sob C SS três consultas de mídia traço -. - Certifique-se de que soletramos o ponto certo Js Desculpe-me, - Isso é traço Js media queries Dash Js E então isso será ah dot google code dot com slash - SV e barra tronco barra CSS três traço consultas commedia dot Js Wow, - isso é um bocado lá para que você possa realmente ir para o Google e você pode apenas procurar mídia - consultas corrigir ou CSS três consultas de mídia para i E. - E ele deve vir acima com este código aqui que você pode apenas ligado diretamente e novamente -. - Isso será comentado e a maioria dos navegadores nem vai incomodar Load it. Mas se é uma versão antiga do i e, ele verá a declaração condicional aqui que diz, se menos que eu e. T. - Nove e então ele vai realmente executar este script estes dois scripts aqui. - Este script principal, - se você se lembra, - é o que faz HTML cinco tags semânticas funcionar no Internet Explorer. - E este de baixo aqui é um javascript que faz consultas de mídia funcionar. - Sim, podemos ter o nosso site responsivo a funcionar no velho e. - Ok, - até agora, - tão bom. - E a última coisa que precisamos fazer para começar a configurar isso é online 16 aqui. - Precisamos vincular a nossa folha de estilo para os dispositivos. - Então nós já vinculamos ao CSS ponto normalizado e aqui nós ligamos para o estilo dot CSS. - Mas precisamos criar um link para a nova folha de estilo que eu criei, - que é especificamente para nossas consultas de mídia para ser escrito dentro de então aqui vai apenas dizer - folha de estilo de relação. E vamos definir a localização da balsa H dois pontos para esse arquivo, que é CSS barra , dispositivo, eu acho, foi como escrevi isso. - Sim, - estilos de dispositivo ponto CSS e podemos salvar isso. - Então eu fui em frente e adicionei isso a todas as outras páginas para você. - Então acabamos de adicioná-lo à página de índice para que você pudesse ver o processo 54. Como aplicar as consultas de mídia de CSS3: - Então agora temos tudo isso no lugar. - Podemos ir em frente e saltar para o dispositivo estilos dot CSS, - e podemos começar a escrever nosso código responsivamente fora. - Então o primeiro dispositivo que gostaríamos de considerar aqui é o tablet quando estiver na paisagem. - Então, - por exemplo, - o iPad da Apple quando é virado, - paisagem tem 10 24 pixels de largura para que possamos saltar para o nosso navegador e podemos usar a tela - voar para ter certeza de que isso vai parecer correto naquele dispositivo. - Neste momento, - estamos vendo nosso site na tela de tamanho de notebook de 15 polegadas e podemos pular aqui para - tablet. - E podemos selecionar Apple iPad um e dois, - que tem o 10 24 com tamanho de tela. - Agora mudamos para o iPad. - Você pode ver que a maioria do nosso site parece OK. - Ainda assim, - o texto de navegação parece muito bom. O logotipo está muito bom, e tudo o resto está bem. Acho que o rapper aqui pode estar um pouco perto do limite, mas posso corrigir isso. - E então você também percebe aqui. - Uma coisa que pode ser problemática é que os ícones de mídia social aqui estão começando do dedo do pé - se sobrepõem agora ao conteúdo. - Então eu preciso descobrir o que eu gostaria de fazer com isso. - Então, tem algumas opções diferentes aqui. - Eu posso esconder a barra de mídia social ou posso optar por movê-la para outra seção. - Então, - por exemplo, - eu acho que o que eu vou fazer aqui é usar este espaço vazio aqui e apenas colocá-los em cima - do painel de logotipo neste canto. - Então vamos em frente e voltar para o código, - e vamos escrever nossa primeira consulta de mídia para realizar isso. Então, primeiro vamos dizer na mídia, que vai verificar o dispositivo e pegar algumas informações. E podemos escrever uma declaração aqui que vai avaliar como verdadeira ou falsa se esta declaração de consulta de mídia for avaliada como verdadeira, ela usará o código que é capturado dentro da media query. - E se ele avalia o falso vai apenas pular isso ou ignorar o código dentro da - media query. Essas declarações podem ser complicadas ou simples, e cabe a você o quão sofisticado você o torna. Essas declarações podem ser complicadas ou simples, A primeira coisa que queremos fazer é dizer apenas tela, e isso só será avaliado como verdadeiro. - Se for um dispositivo de tela, algumas outras coisas que você pode dizer. - Você pode dizer na mídia tudo o que abrangeria todos os dispositivos. Você também podedizer, dizer, impressora ou para projeção também. E neste caso, estamos preocupados com um tablet, que é um dispositivo de tela. - Então aqui vai dizer apenas tela e, em seguida, vamos usar a palavra-chave e para que possamos continuar - a declaração para que você possa usar a palavra e quantas vezes você quiser, - e que irá certificar-se de que isso é avaliado como verdadeiro e o que está do outro lado de - a palavra será avaliada como verdadeira também. - E no nosso caso, - queremos também ter certeza de que a largura máxima neste caso corresponde a 10 24 pixels ou menos -. - E então vamos colocar um conjunto de chaves e eu vou retorná-lo algumas vezes lá. - Ok, - então você pode dizer Min, - Dash wits, - Max, - traço wits e você pode realmente colocar em qualquer tipo de quantidade de pixel que você gosta neste caso - nós queremos ter certeza de que é um tablet paisagem de 10 24 pixels ou menos. - Ok, - então nós dissemos em dispositivos de tela Onley mídia e também onde esse dispositivo de tela não tem mais - do que uma largura de 10 24 pixels. - Agora, - se isso é verdade e isso é verdade - ele realmente vai executar o código aqui que nós aqui, então nós podemos apenas começar a escrever - código CSS normal aqui. - Entre esta abertura e fechamento chave para esta consulta de mídia, - e esse código será executado quando esta instrução. - A declaração completa aqui é verdadeira agora. Se um dos lados é falso, se for falso, não é um dispositivo de tela. Ou se for um dispositivo de tela e isso for falso, é maior que 10 24 pixels. - Não vai rodar o código aqui. - E uma das coisas boas sobre media queries é que eu não tenho que escrever todo o CSS - código novamente porque ele ainda vai herdar os estilos que eu tenho anteriormente - escrito. - Então, - por exemplo, - na página CSS do ponto de estilo, - temos a imagem de fundo do corpo. - Aqui está a textura de papel artesanal, - e se eu não quiser mudar isso na consulta de mídia do que eu posso simplesmente deixá-lo de fora. Não preciso reescrever todo esse código de novo, que é maravilhoso. Não temos que perder tempo copiando e colando um monte de códigos. - Nós realmente só precisamos escrever o código para o que gostaríamos de mudar quando esta condição é - verdadeira. Então, no nosso caso, sentimos que o rapper era um pouco largo demais. - O que eu vou fazer é uma técnica comum que é mudar o fixo com rapper, - que é 960 pixels atualmente para mudar para um fluido com que seja apenas uma - porcentagem da largura do dispositivo. - Então aqui eu vou definir o rapper agora para 90% ok. - E algumas outras coisas que queríamos mudar é que eu quero direcionar a barra de mídia social e eu - quero mudar seu posicionamento, - que antes foi definido como posição fixa, - e eu quero configurá-la agora para posicionar absoluto em vez disso. - Dessa forma, - ele não vai ficar fixo no lugar quando o navegador rolar, - mas ainda podemos usar o posicionamento absoluto para posicioná-lo em relação ao navegador - janela e vamos em frente e dizer os 100 melhores pixels. - E eu realmente tive que brincar com isso um pouco para fazê-lo aparecer na direita - lugar e 100 pixels apenas sobre centralizá-lo e então vamos em frente e dizer Nós queremos mover - cerca de 5% sobre a borda da tela. A forma como calculei isso foi que definimos o rápido e 90 por isso, 100% foram da área disponível no dispositivo. Estamos ajustando o rapper para diminuir para 90, o que deixa disponível, , 10%, o que seria 5% à direita e 5% à esquerda. - Então vamos definir para 5% de emissão. - Permita que a barra de ícones sociais se alinhe com a borda do invólucro no lado direito , - e nós vamos realmente mudar a largura desta coisa. - Então, antes que o com foi definido para 40 pixels quando os ícones são empilhados verticalmente, - mas nós realmente vamos mudar todos esses links para exibir horizontalmente? - Não. Então, para fazer isso, precisamos fazer para que eles se encaixem. - Em outras palavras, - precisamos mudar a largura. - E se eu dissesse que o com o auto, - seria apenas é largo é que ele precisa estar lá para caber todos esses elementos. - A próxima coisa que queremos fazer é atingir esses links dentro do bar social. - Podemos usar um seletor descendente para fazê-lo, - e queremos configurá-los em vez de bloco de exibição. - Queremos configurá-los para exibir em bloco de linha para que eles vão exibir lado a lado assim -. - Ok, então vamos em frente e salvar isso, e então podemos voltar para a tela de mosca. E em vez de atualizar a página aqui, , o que queremos fazer é, se você for até a borda da janela do quadro aqui e estiver certo, clique. - Estou usando um mouse para clicar com o botão direito. - Se você está no Windows, - você deve apenas sentir para clicar com o botão direito. - Se você está no Mac e você não tem um bocas de dois botões, - você pode controlar clique. - Para fazer isso funcionar ou para clicar com o dedo para trazer este menu para cima e dentro do menu, - deve haver algo que diz Reload frame. - E se você clicar nisso, ele deve recarregar a página do site lá. - Ok, então algo está funcionando. Há outra coisa aqui quebrada, que vai resolver em um momento. - Mas você pode ver que os ícones, - ícones de mídia social aqui eles se mudaram de lado e, a fim de pré-visualizar isso para ter certeza - está funcionando corretamente. - Se quiser, pode alternar para frente e para trás. - Aqui está a tela de 15 polegadas. Então agora os ícones sociais estão no ar aqui, e o rapper tem 9 60 pixels, e ele vai ficar em 9 60 pixels, mesmo que fique mais largo. - Então, mesmo que subamos até 19 polegadas ou, - você sabe 20 polegadas o tamanho do rapper permanece mantido 9 60 pixels, - o que é ditado pela folha de estilo CSS de ponto de estilo. - Mas então, - quando chegamos a um tamanho menor, - por exemplo, - vamos para o tablet iPad. Agora o rapper está definido para 90% da tela, e esses ícones sociais aqui mudam para um bloco de linha, então eles agora são exibidos horizontalmente em vez de verticalmente, e eles também estão dentro dessa barra de logotipo. Aqui estão posicionados em cima do logotipo, mas no painel. - Ok, então uma coisa que você vai notar é que quando você escala abaixo para tamanhos menores aqui que as imagens vão ao ar, - não escalando assim certas coisas. - Isso é problemático para, - hum, - por exemplo, - esta imagem e também será problemático aqui para o vídeo quando ele fica menor e - menor e também coisas como as tabelas e formulários. - Uh, - então o que podemos fazer é uma técnica comum é que você vai querer definir todas as suas imagens e - vídeos e etiquetas de áudio todas as suas formas e tabelas, - qualquer coisa que normalmente está se estendendo por toda a seção ou manter o quadro de a página. - Você vai querer definir isso para uma largura de 100%. - Então eles têm uma inteligência fluida, e eles vão diminuir em dispositivos de tamanhos de lados diferentes. - Por exemplo, - se eu descer para um tamanho realmente pequeno aqui, - entre outras questões, - você pode ver essas imagens fora da tela agora. - Então, uma maneira muito fácil de corrigir isso é entrar em sua folha de estilo principal, - que é a folha de estilo CSS ponto de estilo aqui e sob correção este ano vai descer e - nós vamos ver vai descer a linha 32 aqui, - e nós vamos dizer imagens. - Ok, vídeo. - E se tivéssemos algum áudio em nosso site, poderíamos definir áudio e quaisquer quadros I e quaisquer poderíamos definir áudio e quaisquer quadros I e quaisquerformas e tabelas para todos os 100% de largura. Eu já coloquei isso individualmente para a mesa. - Eu acredito aqui. - Sim, e eu já coloquei isso para o formulário. - Normalmente escrevo tudo isso. - Já escrevi isso no código em outro lugar. - Também para o quadro I. - Acredito que sim. A única coisa que resta aqui são as imagens e os vídeos. E eu não estou usando uma etiqueta de áudio neste aqui, então eu posso até mesmo remover essa também. - Mas normalmente você tem tudo isso escrito assim. - Todas as coisas que o ar esticando seu site através da tela até a borda do rapper -. - Você pode definir os dois com 100% assim. Se eu guardar isto e voltarmos e actualizarmos aqui, vamos tentar outra vez. - Então eu vou para o clique direito recarregar quadro. - Ok. E então, se voltarmos para os tablets agora, vocês podem ver que a imagem está apenas 100% dentro do rapper, então ela vai diminuir para cada tamanho. - Então agora, mesmo quando eu gosto do tamanho do iPhone, as imagens ficam muito pequenas assim. - Mas não está pulando fora do quadro. - Ok, - então nós fomos em frente e enfrentamos o estilo do iPad quando é paisagem, - e se girarmos a tela, - podemos verificar como ele parece aqui quando ele vai para o retrato. Vou voltar para a minha folha de estilos e voltar para o dispositivo Styles Dot CSS. - E aqui vamos em frente e mudar algumas coisas sob a vista de retrato para - Tablet. - Então realmente, - a única coisa que eu quero mudar aqui é que eu quero fazer os links de navegação um pouco - mais pequenos, então vamos em frente e dizer no Media Onley, - Grite e parênteses, - Largura máxima do traço e vamos dizer 7 68 pixels, - e vamos usar nossas chaves e abrir isso assim. - Nós podemos recuar dentro daqui e apenas aninhar alguns estilos aqui, - e vamos em frente e dizer Nah, - espaço bar agora enfrenta um alvo todos os links dentro do Navid Bar e vai mudar a fonte - tamanho para ser um pouco menor porque é uma espécie de aglomeração e ficando um pouco perto da borda da sua. - Então vamos dizer 0,8. - Então EMS são fluidos. - Eles estão em relação ao tamanho da fonte anterior. - Então um em é igual ao tamanho da fonte atual e 0,8 será um pouco menor. - Aponte para menor. - Ok, então vamos em frente e salvar isso e voltar e recarregar a página aqui. - Recarregar quadro. - Ok. - Então você pode ver que aqueles caras ficaram menores lá. - E agora há um pouco mais de espaço. - Ok, então se eu mudar agora, - se eu rodar a tela aqui - você pode ver o tamanho do texto no link aqui na horizontal. - Então, para a paisagem. E então, se girarmos uma exibição aqui para retrato, você pode ver que os impostos vinculados ficam um pouco menores lá. - E temos uma quantidade mais confortável de espaço ao redor do texto do link nos botões. - Ok, incrível. - Então a próxima coisa que queremos fazer é preparar esse cara para o smartphone. Ok, então eu quero ir para o Ah Smartphone Landscape, que seria eu rodar este ano. - Isto tem 480 pixels de largura assim. - Isso é meio OK, - exceto pelo fato de que eu quero ser capaz de ver mais do conteúdo aqui. Está tudo bem e bom poder ver esta navegação aqui e este logótipo. Mas seria bom se eu pudesse ver um pouco mais dessa imagem, a imagem de introdução e talvez até um pouco do texto, se possível. Então, para tirar isso da tela mais alto assim, acho que o que vou fazer é encolher um pouco isso. - Talvez seja um pouco alto demais aqui. Além disso, devemos ser capazes de Teoh, levar esses caras para criar espaço. E acho que vamos mudar o logotipo também. - Então vou tentar algumas coisas diferentes aqui se percorrermos aqui. - Isso também é um pouco estreito demais. - Então, se você olhar para esta estrutura de coluna aqui, - bem aqui, - onde diz notícias da empresa, - isso seria realmente irritante de ler - porque imagine, - você é capaz de ler como duas palavras, - e então você tem que pular para a próxima linha. - Então o que eu estou pensando aqui é que nós precisamos abandonar nossa estrutura de múltiplas colunas. Suspeito que isto seja ainda pior na página do catálogo, que tem três colunas aqui. - Então isso é muito estreito de uma linha. Então vamos ter que fundir esse cara com uma estrutura de coluna aqui e definir as colunas para 100% de largura dentro desse rapper. - Ok, - então vamos em frente e vamos descer aqui e dizer, - uh, - na mídia apenas tela e parênteses. - Max, - Dash com dois pontos, - 480 pixels, - que é a largura do iPhone quando está na paisagem. - Ok, então eu vou em frente e apenas remover o latido social aqui. Temos de arranjar espaço, por isso vamos dizer libras sociais. - E sempre que queremos esconder algo que eu posso simplesmente definir para exibir nenhum como isso vai - escondê-lo e movê-lo para fora do layout para que ele realmente não destrua o conteúdo. - Só faz com que não seja mais visível. - Podemos sempre torná-lo visível novamente mais tarde a qualquer hora que quisermos e vamos colocar a barra de valete - aqui. - Duas posições estáticas. - Ok, então eu estou removendo o fixo, - o posicionamento do fixo fora do nab nosso porque em uma tela maior, - é bom ter o NAB a seguir, - mas é uma grande, - barra grossa, - e está ocupando muito espaço em uma tela menor. - Então, em uma tela menor, - quando as pessoas rolam para baixo mais, - Eu quero que eles sejam capazes de usar toda a largura de sua tela de dispositivos para ver o conteúdo e - não ter a barra de navegação ocupando tanto espaço. - O que movermos isto de volta para estática em vez de estar acima, na verdade, será por baixo da área do logotipo. - Então acho que vou mudar a fronteira. - Para estar em cima disso. - Vai em frente e definir esse cara para ser cercado. - Ash top para fazer linha visual entre o painel do logotipo no valete estão aqui, - então vamos definir este dedo do pé um pixel sólido C C c e, em seguida, para todos os links dentro vai - adicionar alguns tapting acima e abaixo vai torná-lo um pouco menos então eu acho isso tinha um - preenchimento de, - como, - 22 pixels ou algo assim antes. E eu vou definir o preenchimento acima desses links agora para ser apenas 10 pixels, então isso vai tornar isso mais estreito. - Aqui, - vamos dizer, - preenchendo 10 pixels superior e inferior zero à esquerda e à direita. - Ok. E então o logotipo aqui, que é o próximo é o painel de logotipo que se lembra, antes dos painéis de logotipo um pouco alto demais aqui. E isso tinha 80 pixels de estofamento para que aparecesse abaixo do nab fixo, nós vamos remover um monte desse espaço lá, então vamos em frente e dizer preenchimento do logotipo e vamos dizer: 80 pixels de estofamento para que aparecesse abaixo do nab fixo, nós vamos remover um monte desse espaço lá, então vamos em frente e dizer preenchimento do logotipo e vamos dizer: 80 pixels de estofamento para que aparecesse abaixo do nab fixo, nós vamos remover um monte desse espaço lá, então vamos em frente e dizer preenchimento do logotipo e vamos dizer: - zero no topo Agora para o logotipo e zero na esquerda e direita. - E 10 píxeis na parte inferior. - Tudo bem. - E virá aqui para o Ah, o H um e o H dois para o logotipo vão em frente e economizar libras. - Logotipo espaço H uma vírgula, - libra espaço logotipo Idade para lembrar. - É onde diz os sapatos H W no logotipo. - E nós vamos mudar a margem no topo aqui para ser menor vai dizer, - Bem, - na verdade usar margem gash top e vai mudar isso para 10 pixels como esse. - Ok, - e vamos ver o seu para o para o H. - Ajustaremos um pouco de estofamento no bem daquele cara, - vamos dizer batendo zero na parte de cima. - Você está à direita é zero na parte inferior e 30 pixels de tapinhas no lado esquerdo Empurre-o - em um pouco. E para a imagem, a pequena imagem da coroa, vamos mudar isso para ficar de lado dizendo fundo , posição zero horizontal e negativa. - Cinco pixels verticalmente. Então o que estamos fazendo aqui é pegar a pequena coroa. - Ah, isso estava acima dos sapatos ZH W. Parte do logotipo que era o chefe M, pequena grande coroa, e vamos movê-lo de cima para o lado. - Então eu adicionei um estofamento adicional ao lado. 30 pixels com para essa coroa, e eu mudei o posicionamento de fundo para ser zero horizontalmente, que fica no lado esquerdo e cinco pixels negativos, movendo-o um pouquinho para cima e eu mudei o posicionamento de fundo para ser zero horizontalmente, que fica no lado esquerdo e cinco pixels negativos, verticalmente para alinhar com as letras. E isso deve parecer muito bom, então isso deve cuidar do logotipo. A outra coisa que queremos fazer é definir a coluna. - Então eu tenho todas essas colunas. - Estilos como a coluna um à esquerda vêm uma coluna, - uma coluna do meio, - uma direita e coluna à esquerda e Colin para escrever esses ar todos os que estavam flutuando - anteriormente e podemos selecionar todas essas classes. E podemos usar uma vírgula para agrupar todos eles. - E podemos dizer a todos eles para serem definidos para flutuar Nenhum. - Então, em vez de flutuar à esquerda ou à direita flutuante, no entanto, eles estão flutuando antes para criar essa estrutura de coluna lado a lado. - Vamos mudá-lo para não flutuar. E também queremos que eles ocupem toda a largura do rapper agora, então vamos mudá-los para ter uma largura de 100% como essa. E queremos tirar a margem de todos os lados, exceto o fundo assim. - Ok, vamos em frente e salvar isso. - Ok. E então, , no fundo da página de detalhes, os outros três no fundo da seção de detalhes aqui embaixo. - Você pode ver que esses caras não são mais adequados lado a lado. Este ar não vai ser um em cima do outro, mas não vamos precisar da pequenalinha aqui, mas não vamos precisar da pequenalinha aqui, que se chama “Border right”. linha aqui, - Nós adicionamos uma classe chamada fronteira direita no exercício anterior para fazer esta pequena linha tracejada aqui. - Então eu quero realmente remover isso. Então vamos voltar para o casaco e vamos selecionar esse estilo, chamado Border Underscore. Certo é o nome dessa classe, e vamos definir o traço da borda agora para ser definido como zero para desligá-lo. Isso deve ser tudo o que precisamos fazer. - Isso foi realmente muito mudando do desktop para o tablet. - Não houve muitas mudanças. Mas quando mudamos para os 480 pixels, perdemos muito espaço. Mas quando mudamos para os 480 pixels, Tive que mudar muitas coisas diferentes aqui, como podem ver. - Então vamos voltar e tentar de novo. - Vamos recarregar o quadro. - Legal. - Agora só temos uma coluna. - Então agora, como marcas e arquivos de sapatos, e estas são as diferentes seções do catálogo de mulheres masculinas, etc. - Esses caras agora são uma coluna. Eu movo a navegação para baixo e notei que a navegação não está mais fixa. Então, quando deslocarmos da tela, não precisamos nos preocupar com a navegação estar em cima das coisas e ocupar espaço. - É mais área agora para ver fotos e ler o texto. - Ok, então parece muito bom. E você pode ver que movemos o logotipo, e depois para o lado aqui. - E o que também vai fazer é mudar o tamanho do imposto do logotipo. - Deixe-me ir em frente e voltar aqui. E agora que olho para isto, acho que vai ficar bem se apanharmos este tipo também. - Um m assim e salve. - E lá vamos nós. - Então eu disse, esse cara menor. - Parece um pouco melhor lá. Certo, agora temos um logotipo mais pequeno, um painel de logotipo mais estreito porque o texto é menor. - Mudamos uma pequena coroa para o lado. - Nós tornamos o imposto dentro do link menor e meio que fez toda esta área mais magra. - Assim que você ver o site. - Você já pode começar a ver algumas das fotos e coisas aqui e pode começar a rolar - para baixo e confira o conteúdo. - Ok, legal. - E agora o noticiário da empresa está se estendendo porque todas as minhas colunas não estão mais flutuando. - Cada um está lá, - cada 100% com e criando uma única estrutura de coluna como essa e o mesmo com os três - painéis na parte inferior. - Agora estes ar todos verticalmente em vez de horizontalmente. - Ok, isso é legal. - Tudo bem. - A última coisa a fazer é verificar a vista de retrato, então vamos girar a exibição. - E você pode ver aqui que a única coisa que é realmente isso é meio que tudo bem. - Ainda assim, - o texto ainda é legível aqui como uma única coluna. - A única coisa que realmente pode ser problemática. - Aqui está este texto aqui dentro desta barra de navegação. - Eu poderia fazer o texto menor, - mas então, ao longo do braço, - quando você está segurando essa coisa no comprimento do braço - seria texto seria meio pequeno demais. E também quando essas caixas se tornam tão pequenas, se você tiver um dedo grandee grosso como eu, é um pouco difícil clicar nesses links quando eles se tornam assim caixas se tornam tão pequenas, se você tiver um dedo grande e grosso como eu, minúsculos e próximos juntos -. Então vamos nos concentrar principalmente neste valete para o tamanho do retrato. - Então vamos voltar para o código aqui e nós vamos rolar para baixo para Smartphone Portrait - e vamos dizer na tela única mídia e onde a inteligência máxima é 320 pixels como esse. E se entrarmos aqui, vou fazer o rapper ficar um pouco a lado nenhum. - Agora, - era 90% e eu quero um pouco de espaço se eu precisar ter barras de rolagem ou algo assim . Então vamos mudar esse cara para uma largura de 80% em vez de 90% Raspar algum espaço lá e vamos em frente e dizer: lá e vamos em frente e dizer: - Ok. E para os NABF estarem aqui, vamos mudar a largura desse cara para ser 100% da tela. - Lá vai definir a borda no top 20 para removê-lo, - e vamos definir a borda na parte inferior para ser um pixel sólido. - Vês? - Vês? - Vejo você como esse compromisso. - Defina isto para mensagens. - Um centro de linha. - Então ele vai centrar o elemento valete dentro dele. - E também mudaremos o passado desse cara. Vamos definir esse cara para o fundo branco assim, certo? E então o bar nunca tem um rapper dentro dele. - E eu quero ter certeza que isso realmente expande 100%. Então eu posso mudar isso dizendo agora barred dot rapper, eu vou definir este cara para ter uma largura de 100% como essa e enfraquecer o estilo do valete dentro dele dizendo para pegar nosso espaço agora e vamos definir este cara para normalmente ter uma borda esquerda - ele, - e queremos definir que está aqui. Não queremos mais uma fronteira no lado esquerdo dos cavaleiros, e então podemos nos concentrar nos links dentro de lá. E esses caras estavam se exibindo na fila, então eles estavam lado a lado. - O que precisa ser vertical agora? Então vou colocá-los para exibir o bloco, certo? - E nós também vamos definir esses caras para ter um com de 100% sobre qualquer anterior com e nós vamos - mudar o tamanho da fonte aqui para ser um pouco maior, - porque quando você está segurando isso no comprimento do braço, - hum, - texto pode ser um pouco difícil de ler, - e imposto de navegação deve definitivamente ser grande o suficiente para ler para saber onde você está indo - no local. - Então vamos definir esse cara, Teoh. - Vamos pegar um traço na fronteira, certo? - Vamos definir isso para zero. Queremos remover a borda do lado direito, e vamos mudá-la em vez disso, para que cada link tenha uma borda acima dela. - E vamos definir isso para um pontapé um pouco sólido C c c c assim. - Tudo bem, vamos guardar isso e ver o que parece. - E depois decidiremos se há mais alguma coisa que queiramos mudar. - Então eu vou voltar aqui. - Tudo bem, - clique na borda do quadro e e clique em recarregar quadro. - Legal. Certo, os logotipos não alinhados . - Então temos que voltar e consertar isso. - Volte aqui e vamos em frente e selecionar o logotipo aqui como beijo. E eu sou como o centro de alinhamento de texto do estado para colocar o logotipo no centro, assim como todos os links de navegação. - Cool salvará isso e recarregaremos. - Moldura aqui. - Moldura lasciva. - Legal. - Agora o meu logótipo está centrado. - A minha navegação. - Está centrado. - O que? - Eu rolo para baixo. - Eles desapareceram. - Consigo ver tudo isso. - Ok, isso é muito legal. - E vamos para a página de venda. - Certifica-te que estes tipos estão bem. - É sempre bom testar todas as suas páginas diferentes. - Certifique-se de que seu conteúdo está sendo exibido corretamente. - Tudo bem. Aqui está o mapa do Google, e aqui está o nosso formulário, está bem? Aqui está o mapa do Google, e aqui está o nosso formulário, - E isso tudo parece muito bom. Então, se eu for até aqui, a tabela de preços, isso parece problemático aqui. - Nem tudo isso vai caber. - Então, se eu escrevi o para a tela, - tudo bem aqui quando parece que é apenas espaço suficiente aqui quando ele está em - vista paisagem, - 480 pixels de largura. Mas quando chegamos ao iPhone horizontalmente, parece que não há espaço suficiente, então eu teria que fazer o texto menor dentro desta mesa ou esconder algumas das colunas. Acho que se eu fizer o texto e o seu menor aqui, não será muito visível à distância. - Tudo bem, - então digamos hipoteticamente que a única coisa que realmente nos preocupamos é como - a marca no preço e em um dispositivo móvel. - Algumas dessas informações podemos deixar pra lá. - Então o que eu vou fazer é criar uma classe especificamente para isso. Vou entrar aqui e criar uma turma chamada Heitor assim. E vamos adicionar esse cara para dizer, exibir cólon nenhum. Então, qualquer coisa que aplicarmos , uma classe de hidro vai ser definida para mostrar nenhuma quando estiver abaixo deste tamanho específico , certo? E também queremos selecionar os títulos das tabelas e divisões da tabela, todas aquelas células na tabela, e queremos dar-lhes menos preenchimento. - Eu acho que eles tinham 10 pixels de preenchimento antes. - Vamos torná-los um pouco mais próximos. - E vamos também fazer o tamanho da fonte um pouco menor. - Vai ir tamanho de fonte 0.9 m como isso vai em frente e salvar, - e nós queremos ter que ir e então nós vamos ter que ir para a página de preços dot html - e adicionar classe em cada um desses caras. - Então eu já fiz isso por você. - Mas você pode ver isso. Decidi que queria que os preços do Brandon aparecessem. - Mas, em seguida, quando chegamos aos impostos, - eu adicionei uma classe de Haider sobre impostos, - e aqui temos em estoque. - Eu adicionei classe de Haider para escondê-lo e sob a idéia de ordem, - Eu adicionei uma classe de Haider. Quando essa página é carregada em uma tela maior que 320 pixels de largura, como qualquer outro tipo de tablet ou desktop ou até mesmo um iPhone na horizontal, não há especificações para a classe de Haider. como qualquer outro tipo de tablet ou desktop ou até mesmo um iPhone na horizontal, - Então, não vai fazer nada, - no entanto, - baseado nesta consulta de mídia quando está sob uma largura de 3 20 pixels - então, de repente, a classe de Haider tem algum estilo especificado para ele. - Então vai mostrar nenhum e esconder aqueles caras. - Vamos fazer um teste e ver como funciona. Então bem, vá em frente e guarde isso aqui, e eu vou voltar para o navegador e faremos uma atualização aqui. - É um quadro de recarga. - Legal. Então, agora esta mesa, , tem apenas a marca no preço, que se encaixa. E nós tornamos o texto um pouco menor, mas não muito menor. - Então isso ainda é legível lá. - Ok, é só isso. - Hum, - você sabe, - um último teste. - Eu sempre passo por cada um dos diferentes dispositivos para que você possa descer e você pode dizer, - Oh, - isso é o que meu site se parece com esta tela de tamanho, - e isso é o que parece nesta tela de tamanho. - E isso é o que parece neste tamanho de tela. - Então aqui você tem a horizontal, - a vertical, - e é uma boa idéia testar isso em todas as páginas diferentes. - Você quer conferir seus mapas e seus formulários e certificar-se de que todas essas coisas são exibidas corretamente em todos os dispositivos de diferentes tamanhos. - Então isso é muito demorado. - Você vai e volta e você vai ajustar pequenas mudanças em suas consultas de mídia. - Uma última coisa que vamos fazer é preparar um para a imprensa. - Então, se você disser uma tela de impressão de arquivo em seu navegador, - podemos ir em frente e dizer estrela para selecionar tudo, - e podemos definir a cor de tudo para preto. - Hum, - agora para anular, - você sabe, - Star é realmente ah, - seletor muito fraco. É fácil ter mais autoridade do que começar a substituí-la. - Então o que você pode fazer para estar no lado seguro é você pode usar um seletor composto. - Você pode colocar vírgulas, - e podemos especificar Bem, - quero dizer, - também cada um h dois, - cada três cada quatro quatro H cinco h seis. - Todos os meus elementos de texto essencialmente todos os parágrafos, - todos os links. - Todo o outro texto que está dentro de seções flutuando vagamente em Div. - Z ou dentro de tabelas terá a cor preta. - Então isso vai salvar o corte de tinta da sua impressora para que possamos salvar. - E se voltarmos aqui para o Chrome, - por exemplo, - digamos que este é o site que quero imprimir aqui. - Você vai notar que este pequeno link de mapa maior aqui é azul embaixo do meu Google. - Agora, - agora, - se eu for para a impressão de arquivos quando a pré-visualização aparecer aqui, - você vai notar que mudou isso para texto preto. - Então esse cara é todo preto e branco agora. - Excelente. - Ok, então é isso para criar fora de forma responsável. - Então, em seguida, você vai querer passar para o desafio de código, - e você vai criar seus próprios estilos de dispositivo que CSS e você pode criar suas próprias - consultas de mídia para alterar certos aspectos do seu site com base no tamanho do dispositivo. 55. Como adicionar o PHP Mailer: - Oi. - Bem-vinda de volta. - Este é o código final para o site Z H W Shoes. - Neste código, - Eu estarei preenchendo o formulário de contato e usando um pouco de código PHP fornecido que vai - realmente enviar as informações no formulário para o seu endereço de e-mail. - Então eu gostaria de mostrar a vocês como eu adicionei isso no site e também ensiná-los como você pode - atualizá-lo para fazê-lo funcionar em seu próprio site. Então, primeiro, vou trazer o site em si só para vermos o que adicionei a ele. - Então esta é a página do formulário de contato, - e todas essas primeiras entradas de formulário aqui no topo já existiam lá, - como você sabe, - mas eu adicionei uma entrada adicional aqui e também esta imagem de verificação aqui que é - gerado para que você possa ver se eu atualizar a página cada vez que eu atualizar a página. - Este número muda aqui assim. - Muito fixe, não é? - Então estamos usando PHP para gerar esta imagem. E para ver todos os arquivos que têm esse código PHP neles, o que eu tinha que fazer era trazer meu servidor de testes local. E para ver todos os arquivos que têm esse código PHP neles, Neste caso, entre Max eu falei do Man Pierre, entre Max eu falei do Man Pierre, e a senhora não está apenas no servidor Apache no seu computador local. - Ele também inclui PHP na minha sequela para que você possa usá-lo para outras coisas também. - E então adicionamos essa entrada de verificação para que possamos garantir que não recebemos spam nossa caixa de e-mail. Serão seres humanos reais, não aplicações Web que estão lá fora causando estragos, enviando e-mails que pessoas de todo tipo de lixo eletrônico. - Então, queremos evitar o lixo eletrônico. - Então vamos nos certificar que as pessoas são realmente seres humanos digitando este código que é - gerado aqui. - Então, só para mostrar que isso funciona, eu realmente enviei isso para o meu servidor e você precisará realmente fazer upload disso. - Você pode basicamente, - você pode visualizar os arquivos e você pode até mesmo testar como a geração de imagens aleatórias aqui - através do seu servidor de testes local. - Mas você precisará da capacidade de se conectar a um servidor de e-mail, que você está hospedando. - Empresa estará fornecendo, a fim de que isso realmente envie ou envie o e-mail, - então você terá que fazer o upload primeiro para realmente fazê-lo funcionar. - Então eu já enviei isso e vamos testá-lo. Vou escrever o nome do Bob, e depois vamos escrever o e-mail dele. O que vai dizer, Bob está no Bob Dot com? - Peço desculpas se este é realmente o endereço de e-mail de alguém. - Eu inventei isso. - Sinto muito, Bob. E o telefone é opcional, então eu não vou colocar um número de telefone lá, e vamos deixar uma mensagem. E o telefone é opcional, então eu não vou colocar um número de telefone lá, - Eu vou dizer, - Eu não te vejo há tanto tempo assim. - Oops. - E depois temos de verificar se somos humanos. - Ok, - então agora, - se você colocar este número incorretamente como este - ele apenas leva você para uma mensagem de erro muito básica que diz que a mensagem não foi enviada. - Por favor, volte e preencha os campos obrigatórios. - Podíamos deixar isto mais agradável. - Talvez isso seja algo que eu vou adicionar é uma atualização futura. Normalmente, se eu estivesse construindo isso para um cliente, usaria javascript para validar isso. - E então eu iria imprimir uma mensagem. Provavelmente aqui, diz que não está correto. Ou talvez em um contorno vermelho ao redor do formulário e colocar algo assim, o que seria um pouco mais elegante. - Mas por enquanto, - Eu só queria fazer isso é simples quanto possível e manter apenas HTML CSS e PHP. - Então temos aquela mensagem genérica. Mas, basicamente, podias acrescentar que isso pode ser uma melhoria. - Você pode adicionar. - Talvez mais tarde. Voltarei e melhorarei isso um pouco, mas isso vai se adequar às nossas necessidades agora. Então, se eles colocarem, uh, a imagem de verificação corretamente, vou colocar os números corretos dessa vez. - E então se clicarmos, - enviar legal, - isso nos leva a esta página, - que é uma página chamada Contact Underscore success dot html. - E eu criei esta página simplesmente duplicando a página de contato e, em seguida, obviamente, removendo - o formulário e apenas colocando nesta imagem de fundo de um polegar bem ali. - Então, se voltarmos para o meu e-mail, podemos verificar se isso apareceu, e lá você pode ver que ele já existe lá. - Então isso foi muito rápido, - apenas no tempo que levei para falar sobre isso ou explicar que vamos verificar foi - na verdade tempo suficiente para o servidor de e-mail enviá-lo para a minha caixa de e-mail. Então, só deve levar uma questão de minutos para aparecer, dependendo de seus provedores de hospedagem. - Servidor de e-mail Como é feito backup. - Pode demorar mais tempo. Nunca vi levar mais do que10 minutos para chegar. Nunca vi levar mais do que Então, se eu clicar nessa mensagem, posso mostrar como é lá. Isso me diz as mensagens do Bob da Bob Dot com, e vemos aqui o nome do Bob e o e-mail do Bob, e eu não coloquei nada para um número de telefone. Mas se eu tivesse colocado esse número de telefone, apareceria aqui. - E depois podemos ver a mensagem. - Eu não te vejo há tanto tempo, então você pode ver esse olhar, que parece muito bom lá. - Ok, então aqueles caras trabalhando, isso é muito legal. Se as pessoas quiserem voltar ao formulário, se quiserem enviar outra mensagem, podem clicar no link de contato novamente, e voltarão para lá. - Ok, - então vamos entrar na gritty nitty de como eu adicionei isso aqui e como eu construí esse cara e - colocá-lo funcionando, - e então também mostrar a você como você pode ajustar o código para fazê-lo funcionar para o seu endereço de e-mail - em vez do meu. Então vamos em frente e pular sobre o código, e a primeira coisa que eu fiz foi quando eu estava construindo. - Isto é eu adicionei dois arquivos adicionais. - Um deles é chamado de mailer dot PHP, - e o outro é chamado de Verificação imagem dot PHP. - Então você pode ver os dois aqui. - Aqui está Mailer e aqui está a imagem de verificação de imagem. Se clicarmos nisso, coloquei um comentário no topo aqui que diz, não há necessidade de tocar neste código, então você realmente não precisa tocar na imagem de verificação Se você - apenas incluí-lo com seus outros arquivos do site, - você será capaz de ligar a ele e fazê-lo fazer a sua coisa. - Então isso é tudo código PHP, - e nós não vamos discutir PHP nestas classes estritamente HTML e CSS. Então não há necessidade de entrar em grandes detalhes sobre isso. Mas o que está fazendo é gerar um número aleatório, e também está colocando isso. - Também está gerando pixels aleatórios em uma grade. - E então está convertendo isso em uma imagem. Na verdade, constrói um arquivo de imagem a partir disso, o que é incrível. - E há cerca de 29 linhas de código. - Então o PHP é capaz de gerar uma imagem aleatória de números e pontos como esse. Só em 29 linhas de código, o que não é tão ruim. Só em 29 linhas de código, E então o outro arquivo que eu criei aqui é chamado de mailer dot PHP. E a forma como isto funciona é outra vez, coloquei um comentário online. E a forma como isto funciona é outra vez, - 14. Não precisa tocar no código abaixo dessa linha, então não precisa mexer com nenhum código abaixo da linha 14. - Na verdade, - você provavelmente não quer mexer com isso, - hum, - mas realmente, - o que está acontecendo aqui é basicamente pegar a entrada que foi postada quando você clicou - o botão enviar no formulário, - e está pegando essa informação, - e está enviando em um macho. - Na verdade, ele está enviando para fora, - usando o servidor de e-mail do seu host para o endereço de e-mail específico que você especificar. - Então é aqui que você especifica para qual endereço de e-mail você quer realmente enviar, um só para, você sabe, criar um espaço reservado. Escrevi para você no seu site Dot com, e obviamente você terá que vir aqui e mudar isso. - Não use meu endereço de e-mail. Não quero receber um monte de e-mails de todos vocês. Ficaria triste se tivesse centenas de e-mails de teste chegando. - Então é por isso que troco esse cara para você no seu site com ponto. - E isso é online. - Nove para a variável de envio. A outra coisa que você pode querer definir é a variável assunto, que está online 12 anos. A outra coisa que você pode querer definir é a variável assunto, - Hum, - neste conjunto de citações aqui - você pode querer mudar isso para dizer qualquer que seja o seu site. - Então, para este lado, - eu coloquei sapatos CHW, - envio de formulário de contato, - e isso é o que vai aparecer como o assunto para o e-mail que é enviado. - E isso é tudo o que você realmente precisa definir. - Este é o endereço de e-mail para o qual ele está indo e o assunto do e-mail. Quando você digita isso, você quer manter essas pequenas aspas. Aqui você quer digitar entre essas aspas, as aspasamarelas, asaspas simples que você vê aqui à esquerda e à direita, são completamente essenciais para fazer funcionar. Aqui você quer digitar entre essas aspas, as aspas amarelas, as aspas simples que você vê aqui à esquerda e à direita, - Então vai quebrar se você remover isso. Então, novamente para o assunto, você quer digitar no Lee aqui entre essas aspas, e então você vai salvar o arquivo e você deve estar pronto para ir. - Então, - além de adicionar o mailer e a imagem de verificação dot PHP, - Eu também mudei a extensão do arquivo na página de contato. - Anteriormente, - isso era chamado de ponto de contato html e eu tive que mudar isso para entrar em contato com o PHP porque eu estou - realmente escolhendo usar um pequeno trecho de PHP aqui, a fim de obter a verificação - imagem do dedo do pé trabalho. - Então eu posso mostrar esse código se nós rolarmos para baixo até o formulário aqui e eu acho que eu vou definir este - cara duas palavras quebra que podemos ver todo o código que ter que rolar sobre estéreo. Tudo bem, então todas essas entradas estavam lá antes desse cara ser novo. - Chama-se. - É um tipo de entrada de texto com o nome de verificado e no espaço reservado. - Eu só coloquei verificar o seu humano. Também adicionei uma classe de caixa de verificação a isto, e fiz um estilo. Também adicionei uma classe de caixa de verificação a isto, - Dei-lhe uma largura. - Se você quiser verificar isso, você pode pular para a página de estilo de ponto CSS aqui e você pode encontrar que, - hum, - que é bem aqui. Aqui estamos, online 199. Chama-se caixas de verificação de pontos de entrada. A classe que eu adicionei, e eu disse, esse cara para exibir em bloco de linha para que ele possa estar lado a lado com a entrada do formulário. - Hum, - e eu dou uma largura de 80% para abrir espaço para a imagem de verificação real sobre o - lado - e depois a imagem de verificação em si. - Eu adicionei um pouco de código para aqui. - Dei-lhe uma largura e altura e disse-lhe para uma linha para o fundo. - Ok, isso é realmente sobre isso, - para o estilo. - E, em seguida, a única outra coisa é esta etiqueta de imagem aqui para o para a imagem de verificação - em si. - Hum, - e o que estamos fazendo aqui é, - em vez de vincular a um arquivo de imagem típico como minha imagem que J peg ou o que você tem O que - nós estamos fazendo é que nós estamos realmente ligando para o arquivo PHP de ponto de imagem de verificação aqui, E também estamos enviando uma geração de um número aleatório para ele, , e isso permitirá que ele faça sua coisa e gere um número para você. - Ok, então essas foram as duas únicas coisas que eu adicionei ao formulário foi a caixa de entrada na verificação - imagem. - E que está usando este arquivo aqui verificação imagem dot PHP. - Ok. - E então, adicionalmente, - nós também mudamos a ação aqui do formulário. Lembre-se, antes do , formulário de ação, acho que era um espaço reservado, acho que coloquei um símbolo de libra aqui antes e agora mudei isso para ... na verdade aponta para o arquivo PHP do mailer dot. - Então, assim, - depois que o usuário digitar seu nome seu e-mail em seu número de telefone e uma mensagem - e uma imagem digitada - eles vão clicar no botão enviar no formulário, - que é aqui em baixo. - E quando eles clicarem no botão enviar, ele usará essa ação para saber para onde enviar as informações que eles digitaram. Então, eles digitaram seu nome, seu e-mail, telefone em sua mensagem e a imagem de verificação e tudo isso está sendo enviado para este arquivo de mailer dot PHP, que está bem aqui. - E este é, - claro, - o arquivo que acabamos de discutir exatamente onde você colocou no endereço de e-mail para enviar isso - para e o assunto. - E vai reunir toda essa informação e vai enviá-la. Ele diz, se o ah verificar que se o ah verificar queaimagem de verificação verifica lá, vai enviá-la e depois vai para Teoh, muda a localização, envia imagem de verificação verifica lá, vai enviá-la e depois vai para Teoh, muda a localização, o usuário para o sucesso do contato que a página html. - Ok, - caso contrário, - se ele não verificar que ele vai enviar a mensagem de erro que eu mostrei a você antes. - Tudo bem, - Tudo bem, então isso é muito legal. Então esse cara está trabalhando, e isso é tudo que precisa fazer é se quiser implementar isso em seu site, precisará fazer as mudanças que acabei de mencionar aqui. Então esse cara está trabalhando, e isso é tudo que precisa fazer é se quiser implementar isso em seu site, - Você precisará adicionar o código de imagem da caixa de verificação daqui até aqui. - Da entrada, verifique todo o caminho até o final da imagem de verificação. - Você tem que mudar a ação 2.2 mailer. - E claro, - você terá que incluir a imagem de verificação dot PHP e o script PHP mailer dot em - para que ele funcione, - Hum, - e então você gostaria de criar sua própria página de sucesso de contato. - Essencialmente, - Hum, - vamos ver algumas coisas para eu acho que algumas outras coisas para mencionar que é importante é que eu fiz - mudar o nome desta página para entrar em contato com esse PHP, - como eu mencionei anteriormente. - Hum, - e novamente, - isso foi porque eu usei um pouco de script PHP bem aqui dentro da página. - E eu preciso usar essa extensão de arquivo para que este script funcione aqui. Então, quando mudei o nome, tive que ir para a tive que ir para anavegação de todas as páginas e atualizar isso porque você se lembra, on-line 50. navegação de todas as páginas e atualizar isso porque você se lembra, , - Aqui temos os links para navegar entre todas as páginas. - E aqui está o link de contato. - E antes que isso costumava dizer, - contato ponto html em todas as páginas. - E desde que eu mudei a extensão do arquivo, - Eu tive que voltar por cada página e alterá-lo para entrar em contato com o PHP dot. - Mas isso é tudo que você tem que fazer. - E então você deve ter esta pequena caixa de verificação e ser capaz de enviar um e-mail - e realmente ter esse cara aparecer na sua caixa de entrada aqui. - Então isso é muito legal. - Hum, - isso é tudo. Espero que tenham se divertido construindo este projeto. - Cuide-se. - Deus abençoe. 56. Rede , sistemas de grade, e modelos: - Eu sou bem-vindo de volta. - Este é slides 4.2 sistemas de grade e modelos Nós vamos discutir resets CSS e - normalizar scripts também estão indo para falar sobre modelos de sistemas de grade CSS e HTML cinco - frameworks. - Primeiro, - vamos falar sobre uma reinicialização CSS. - Então, muitas vezes, quando você está construindo seus próprios sites, - você vai querer sair e baixar um CSS reset. - Na verdade, temos usado um que eu dei a vocês, - ou melhor, - uma versão de um reset chamado Normalized, - que discutirá um pouco mais sobre em um momento, mas essencialmente um reset CSS. - O que ele faz é remover todo o estilo de navegador padrão que você pode ter - notado antes de aprendermos CSS no primeiro módulo, - vocês estavam usando apenas HTML para escrever conteúdo. - Por alguma razão, - todo esse conteúdo já tinha um estilo inerente, - e isso é porque cada navegador estava determinando qual o estilo do texto deveria ser, - quão grande ele deveria ser, - qual a cor que ele estava no que estava usando. - Agora eles são diferenças sutis de navegador para navegador e um CSS reset é uma maneira que podemos - obter estilos consistentes em todos os navegadores removendo primeiro todo o estilo do navegador -. - E então você pode voltar e adicionar seu próprio estilo CSS. - Então, sempre que usamos um reset, - o que vamos fazer é primeiro link para o arquivo de redefinição CSS, - e então nós vamos vincular a nossa própria folha de estilo personalizado, a fim de adicionar estilo de volta ao nosso site. - Estes são alguns exemplos de algumas redefinições CSS populares. - Então, se você for a um motor de busca on-line e procurar por qualquer um desses títulos, então você será capaz de encontrar o código que você pode ir em frente, baixar e usar para o seu - CSS reset. - Eso Myers é, - ah, - reset comum. - Chama-se Myers Reset. - Outra que as pessoas usam é chamada a fazer. - Há também um chamado “Por que você eu” e há outro. Vou mostrar-lhe que algumas pessoas chamam de redefinição do pobre homem, que você pode escrever rapidamente para redefinir os estilos no seu navegador. - Este é um exemplo do reset do pobre homem, - que você pode apenas escrever no topo da sua folha de estilo se você escolher, - Então esta seria uma alternativa para em vez de baixar esses outros resets como Myers para - pode e Por que você? - Por que, - hum, - você poderia escrever o seu próprio bem rápido usando este código aqui. - O que isso faz é basicamente selecionar tudo na página HTML, - e então ele remove todo o preenchimento e toda a margem de cada elemento. - Então, não há espaços entre nenhum dos elementos em uma das razões pelas quais você faz isso é, - por exemplo, - no Firefox. - O espaçamento entre parágrafos pode ser ligeiramente diferente do espaçamento no safari ou - algo assim. Então a solução de reset é remover todo o estilo neste caso, todo o espaçamento. - E então você pode voltar em sua própria folha de estilo em sua própria folha de estilo personalizado, - e você pode adicionar, - você sabe, - uma linha de código que diz, - Bem, - Eu quero que todos os parágrafos tenham 10 pixels e margem abaixo deles ou algo assim. - Nós também definimos todos os tamanhos de fonte aqui no corpo Hmm para o padrão normal 100% e isso - na verdade leva todas as imagens que têm links em torno deles e remove uma borda - Às vezes, quando você adiciona um link para uma imagem, - ele vai Coloque uma pequena caixa azul em torno dele. um E quando forumlink visitado, ficará como uma borda roxa ao redor. - E isso impedirá isso removendo a borda de todas as imagens que estão no ar cercadas pelas etiquetas A. - Então isso é como um pequeno reset muito simples outros redefine Myers para pode e por que eu vou - na verdade ser muitas, - muitas mais linhas de código algumas destas ou mesmo centenas de linhas de código. Então, eles são um pouco mais sofisticados e de um homem pobre , então eu recomendaria , você sabe, provavelmente é melhor ir embora. - Não tinha baixado um desses em vez de usar um reset tradicional para o nosso projeto, o site de sapatos CHW que estamos construindo. - O que usamos foi um arquivo normalizado em CSS, - e você pode ver aqui é o link onde você pode ir e pegar o código para o ponto normalizado - arquivo CSS. - Então normaliza semelhante a reiniciá-lo, - exceto que ele volta e adiciona algum estilo para você começar assim, - enquanto que quando você usa alguns desses outros resets como o Myers pode. - Por que, - por que, - O que acontece é que todos os títulos, - por exemplo, - parecem ter o mesmo tamanho, - então o script normal I remove o estilo. - Mas então ele volta no estilo de anúncios para que ele apareça o mesmo em todos os diferentes - navegadores. - Em seguida, - vamos falar sobre sistemas de grade CSS. - Então nós meio que construímos nosso próprio sistema de grade em nosso estilo. - Dot CSS página criando essas classes de coluna uma coluna esquerda, - uma coluna do meio, - uma direita e nós estávamos flutuando em direções diferentes e definindo vários juízo para - eles. - Então criamos classes chamadas Call One ou C O L. - One para coisas que só iam abranger uma coluna em nossas três colunas configuradas. - E nós também criamos outra classe chamada Call to C O L dois para representar elementos que tinham um - mais amplo com que estendia duas colunas em nossa estrutura de três colunas, - e nós até tivemos um chamado Call três que se estendia todo o caminho através do rapper todos - das colunas, - então nós meio que construímos nosso próprio sistema de grade simplificado. - Acontece que você pode realmente ir on-line e baixar código CSS pré-construído que já tem um - muito desse código de posicionamento escrito neste ar chamado CSS Grid Systems. - Este é um diagrama de um popular chamado Sistema de Grade 9 60. - E este é um diagrama para mostrar como funciona. - Então este sistema de grade tem muito mais possibilidades do que o que criamos. , Porque você se lembra, o sistema de grade que criamos era no máximo um sistema de grade de três colunas e este, que é na verdade do 960 Grid System. - Este tem um total de 12 possibilidades de coluna. - Estes são alguns exemplos de alguns sistemas de grade CSS populares. - Então, novamente, - se você for para o seu motor de busca e você digitar em qualquer um desses títulos, - ele vai aparecer com um site onde você pode ir em frente e baixar o CSS livre de código aberto do - arquivos que você pode usar para começar a construir seu projeto de site. - Então há 9 60 Blueprint é outro sistema de grade popular CSS senso grade semântica, - e há também uma estrutura inteira chamada bootstrap, - que tem seu próprio sistema de grade incluído. - Isso está mostrando como seu conteúdo pode caber acima da grade. - Então, tomando essa última nota que estamos olhando e se nós meio que sobrepusemos colunas cor-de-rosa - acima dela, - então você pode ver que, - por exemplo, - a área de publicidade aqui está abrangendo 12345 colunas. - Ah, - e você pode ver que a barra lateral aqui está abrangendo apenas duas colunas. - Então, dependendo do nome da classe que você usa para o sistema de grade específico, - ele vai fazer seus elementos uma largura diferente e também dar-lhes diferentes flutuadores - comandos para que eles possam posicionar um ao lado do outro. - Agora, - qualquer bom sistema que você escolher baixar, - você vai querer ter certeza de ler a documentação para esse sistema de grade particular - porque todos eles têm nomes de classes diferentes - e todos eles esperar que você os use um pouco diferente. - Vamos também falar sobre HTML cinco frameworks, - então Hee lo fi boilerplate é um exemplo de uma biblioteca de modelos que você pode baixar. - Essencialmente, isso faz você começar. - Ele já tem a maior parte da estrutura do documento criada. - Ele vem com arquivos HTML, - arquivos CSS e até mesmo alguns arquivos JavaScript que já têm correções no lugar para fazer o seu - trabalho site em todos os diferentes navegadores, - então hee mollify boilerplate. - Dê suporte para HTML cinco elementos até mesmo em seus navegadores mais antigos e em todos os dispositivos. - E há também uma versão móvel deste framework conhecido como HTML 5 Boilerplate Mobile. - Então estes eram os links que você pode ir em frente e verificar isso. Então você pode baixar esse código e jogá-lo em texto sublime, e você realmente só precisa entrar e começar a adicionar seu conteúdo. Então você pode baixar esse código e jogá-lo em texto sublime, - Todas as estruturas de documentos já configuradas e já está vinculando a arquivos CSS e JavaScript que você pode usar o Twitter. - Bootstrap é outro framework popular, - e Twitter bootstrap também inclui. - Além de HTML e CSS, - ele também inclui um monte de J coury plugins para que você possa criar coisas como galerias de imagens, - menus deslizantes e coisas assim sem ter que sair e escrever o javascript personalizado - você mesmo e apenas ser capaz de carregar os plugins que eles fornecem a você. Quero encorajar vocês a continuarem aprendendo e escrevendo códigos todos os dias.