Introdução ao HTML e CSS

1. Introdução: Olá, todo mundo. Este é Arthur. E hoje mesmo dar-lhe uma introdução ao HTML e CSS 40 dias classe. Vamos aprender o software que precisamos para começar, incluindo cromo fornecendo textos e as pessoas do serviço alegaram que eu tenho o site host . Nós também vamos aprender sobre como eu preenchi um site corretamente. O que isso significa é que eu aprendi o que emitir mellitus sua estrutura e seus atributos. Vamos construir um atrial real, mas o conteúdo da página que vamos testar, mas construir uma prisão rápida vocês juntos depois também foram Millard sobre CSS. O que ver é isso é como você escreve CSS e como você inclui estilos na página. E no final, vamos ter um portfólio de ace realmente sólido que podemos usar para mostrar algum trabalho que fizemos na aula de hoje e para evoluir ao longo do tempo como você aprende mais sobre amigos Element, vamos nos arrepender 2. LEde o começa: Ok, ótimo. Vamos começar. Primeiro, não teríamos um grande status. Vamos nos certificar de que temos todas as ferramentas que precisamos para ser produtivos nesta classe. Nós nos certificamos de que temos alguns textos cegos, que é a nossa coroa editor de código, que é um navegador preferido para usar e ponto plano de papel io. E isso vai deixar-nos alojar o nosso website online depois do próximo. Nós também fizemos uma caminhada através do que o pedido L asiático é, e finalmente, vamos dar uma olhada na estrutura de arquivos Trans Verceles e você certificando-se de que você está confortável sentado em um projeto de desenvolvimento Web. Vamos dar uma olhada nas ferramentas que precisamos. Então aqui vamos nos certificar de que baixamos a escolha do navegador Chrome. Há outras razões para isso, como você tem tudo na frente do desenvolvimento, Chrome é realmente fácil de ajudá-lo a depurar muitos dos problemas que você teria. Em segundo lugar, nós descemos os textos sublimes e o que é isso, como você pode ver lá dentro adorável, apenas de colocar tudo junto. É um editor de código, e isso permitirá que você construa coisas à medida que você vai mais longe. Então não só cada humano. Ele nos vê, mas você pode começar a construir outras linguagens de codificação aqui. Eu viajo script nó python. O mundo é a tua última ostra. Pelo menos queremos se inscrever para o avião de papel dot io Agora é livre para tentar e eu posso até mesmo assiná-lo na minha conta agora. Você pode ver aqui que eu tenho um número de sites que eu realmente trabalhei para mim e para diferentes empresas com quem eu trabalhei. Então, você poderia facilmente ter seu próprio site hospedado por avião de papel e você pode trabalhar fora ajuste lá. Ele sabe, quando você realmente trabalhou com papel, à vista lá apenas se conectou através de uma conta do Dropbox. Então, uma outra coisa que você pode querer configurar é sua própria conta do Dropbox. E se você não sabe, isso é apenas ir para Dropbox No. Venha e configure isso de graça também. Assim, você recebe alojamento grátis para tudo o que você precisa quando você começa. Então, agora que temos cromo sublime e começamos em um povo de gado simples io e dropbox, se você não tem isso já, vamos falar sobre o que está acontecendo enquanto caminhamos pela natureza, meu pedido caminhando pela nação deles a pedido. Então, o que acontece quando escrevemos aquele www google dot com na nossa barra de omelete ou no celeiro de vestidos em nossos navegadores? O navegador não tem idéia do que o Google significa. O que, Então ele procura o endereço I P, e o que isso significa é, ele olha para a frente. O sistema de nomes de domínio. É essencialmente uma lista telefônica. Então conectamos o nome de domínio, que Tom a um endereço I.P. , que é uma série de números e que é definido a partir do navegador como um protocolo de transferência de hipertexto . Ou pedido http basicamente perguntou-lhe google dot com para HMO. Recebemos essa resposta de volta, lê navegador recebido e ele decide, o que exibir baixado? Seja qual for. Temos mais algumas que nos ajudam. E Boof Yeah, nós temos um site. Talvez os outros não estejam realmente lá, mas você sabe que consegue. E a razão pela qual antes de irmos com uma estrutura de arquivos e transferências, é a razão pela qual falamos sobre, uh, saber quais respostas de solicitação é porque você não entende que o navegador em si é o que traduz seu casaco para você. Então por que você faz esse pedido na Internet e vai para o azul selvagem lá. O navegador é o que realmente está ajudando aqui, e o que ele está recebendo é isso. Então todas as informações de ideias nesses arquivos texto e todos aqueles Texas olharam para pastas caras , devo dizer, e esses arquivos estão armazenados em pastas. Então esta é a maior idéia que eu acho que muitas pessoas não entendem o que desenvolvimento é literalmente apenas uma reestruturação completa. Qualquer site que você vá contém arquivos muito específicos, mas eles são apenas uma pasta e você pode tê-lo em seu computador a qualquer momento. É isso. Todo mundo pago que você já visitou na Internet é um monte de impostos organizados de uma certa maneira em um computador. O significado de construir este local vai começar com os indutores, então já vimos isso. Então nós fomos a algum domínio e você só tem um nome de domínio ou você tem o nervo significa esconder sobre o papai Shima. Você geralmente vê a escada depois de clicar neste menu itens e site. Mas se você vir o primeiro, você acabou na página inicial de lado. Agora, o induto Sandy Chanel é o arquivo de falha para a página inicial. Então começamos a construir nossos pontos turísticos hoje, incluindo o biscoito Rest Me e Folio Slight. Nossa página inicial será nomeada ponto índice Aoshima Então sempre deve haver o nome da sua casa. Pensamos em construir nossos sites também. Queremos ter certeza de que entendemos a estrutura de pastas. Então juntamos tudo. Você se certificaria de que temos um arquivo de topo? Aqui estão meus recursos incríveis lá. Em seguida, temos uma pasta de ativos e que pode conter imagens, sons ocultos, coisas que podemos precisar por tanto tempo. Nós não teremos uma pasta Styles e que irá conter nosso CSS. Então, se são os nossos meios, sim, Asir, o que você tem que vai estar lá? E, finalmente, podemos ter uma pasta de script de trabalho e isso é meio que o próximo nível. Então, além de introduzir o sucesso Tosun, a outra frente e código, você pensaria sobre isso é código JavaScript e esse tipo de fornece uma funcionalidade de rebanho para nossos sites e você começa a aprender sobre isso em uma classe separada mais tarde. E, finalmente, temos o nosso html cinco. Então temos nosso índice, nossos valores, problema de contato humano. Obviamente, você não precisa construí-lo para uma dessas coisas, Mas lembre-se que cada edição da compilação Valley terminará com um html ponto e lembre-se que sua home page deve ser sempre uma indexação. Algumas notas sobre a estrutura e passando por cima e para baixo seu arquivo estrutura transferência sel. Então supostamente estavam em nossa pasta de documentos em nosso computador. Temos algumas pastas aqui, incluindo nosso site. Se eu quiser acessar minhas mãos, o PNG caiu na minha provavelmente uma picareta. Digamos que para exagerar essa imagem dos meus documentos, eu faria algo como meus ativos do site, minhas próprias mãos, o P e G. As barras são a mesma coisa que você clicar em quatro meses, Tão fácil. Mas e se estivermos construindo HTML ou CSS e quisermos acessar algo na água? Então o que? Quero entrar nas minhas celas. Eles são assim e eu quero tirar minha imagem de lá. Nesse caso, eu escreveria sobre o dinheiro dos ativos, meu olhar arrojado como se eu soubesse que está em minha casa, mas, mas, você sabe, eu tenho tantos arquivos do meu belo Self. Muito humilde. Se você pode dizer, neste caso, os pontos Ashraf significa subir no nível e, em seguida, ir dentro e outras pastas. Neste caso, vamos subir um nível e entrar na Flórida com multa. Onde isso pede por ela. Está recebendo os recursos de imagem. Eu não vou passar muito sobre este ponto agora, mas você ainda tem em mente. Então começamos a conectar imagens ou histórias de arquivos CSS. Vergonha fora. Precisamos nos sentir confortáveis colocando isso no próprio código para que possamos nos conectar e conectá-los juntos. Então agora nós repassamos algumas peças começando. Vamos realmente começar a construir o próprio CSS seguro. 3. BÁSICs em HTML: Ok, então vamos começar com algum problema meu básico. Então estamos dando nossa estrutura de conteúdo. Pensamos sobre a fundação do amigo e desenvolvimento ou desenvolvimento Web. A. Ela macho é nossas unhas de madeira da nossa casa e CSS. Nós vamos aprender a seguir é mais do que o nosso dito. Está no nosso estilo. Então, o que é um Shima? L asiático significa linguagem de marcação de hipertexto. É uma linguagem usada para exibir textos de conteúdo, imagens, tabelas. Links teria você. Também é linguagem para dar novamente estrutura para o seu site. Será que vai continuar a precisar lá? É também uma linguagem Web front-end, que significa que é interpretada pelo seu navegador. A diferença entre Friendly, que não é idiomas de apoio, é que o navegador no seu computador Chrome Firefox safari teria. Você está pegando essa informação e exibindo-a, baixando-a, traduzindo-a para você entender facilmente por que na parte de trás, isso será traduzido por um servidor e passará para você. O navegador não tem nada para fazer isso. Então, a coisa sobre a estrutura para o número extra e ele vai obter um exemplo de código em um segundo também nós olhamos para a estrutura recreativa a maioria das tags html vai ter tag aberta e uma tag de fechamento. Então, onde você vê que colchetes e nome da tag e colchetes e marcação novamente, mas um pouco de barra antes que isso são nossos elementos. Então, o nome do Ted, outro nome da etiqueta e no meio são vidas de conteúdo. Quero dizer tag ou elemento. Então eu poderia dizer, ou uma vez que eles significam a mesma coisa. Em que desenvolvimento? Um par de gravatas de amostra. Damos uma olhada aqui com o tempo de título, que dá a informação no título real do navegador da idade que temos em cada tag, que é areia para caber rabo de cabelo, que faz sentido bastante óbvio. Eles são. Temos um imposto de link quando vinculamos imagens na página que desenrola dois. Éramos uma nação diferente. Devo dizer que vai usar um imposto de ligação para isso. Então vamos dar uma olhada em algum código e ver como uma vergonha realmente se parece. Sai daqui. Estamos olhando para um exemplo muito básico de e-mail baseado para que possamos nos livrar de todas essas outras peças aqui. E, E, no caso de você estar curioso quando eu estou olhando agora é menos. Liguei para o Coop en dot io. Eu usá-lo muitas vezes para mostrar exemplos de código no local, e é outra maneira que eles construir Conan jogar em torno que em torno de que em seu próprio país, sem necessariamente precisar de computador área codificada, embora eu sugiro obter esse texto sublime para os projetos que nunca. Cada tag aqui, e que é um elemento de cabeçalho, e cabeçalhos são usados para se certificar de que você tem informações semânticas para cada seção do site. Por isso, temos à frente, e também podemos ter um parágrafo. Então nós temos um pequeno parágrafo aqui, que tem informações de parágrafo e um link, e você verá aqui que este link tem cada um dos outros. O que significa isso? Isso significa referência de hiperligação, dizendo para onde vai. Neste caso, eu não vou para a conta do Google diretamente para trás alterar. Eu gosto de qualquer coisa dentro daqueles uma aspas por agora, dizer bem-vindo à Introdução Pretty Straightforward. Então vamos pegar algumas outras etiquetas e pensar no House. Concerto usando um shima antes de entrarmos em etiquetas adicionais. Eu queria rever alguns dos, na verdade, então você está encontrando atletas permitem que você defina certas características sobre ataque. Então voltar ruas são novamente que ser treff, que procuramos por um atributo de estilo, que podemos falar sobre isso. Vamos conversar um pouco. Nós temos CSS e classe e eu d que nós também vamos falar sobre. Nós vamos nos ver alguns exemplos rápidos que você pode ver aqui Nossas guias de imagem, que tinha necessidade de tomar em uma fonte, deve ser a nossa foto que nós vamos realmente exibir na idade novamente estão vinculados tag abaixo, que nós estamos cuidando. Google, como você pode ver nosso parágrafo em e cada um tem diferentes aqui. Então nós temos uma classe que está indo para estilos externos finos para parágrafo. E nós temos um estilo Tiger Norwich um em que deseja encontrar estilos internos dentro das páginas para fora eo que foi definido exatamente o que carnes internas e externas eu não acho que eu quero fazer está nesta página. Essa é a fonte da imagem onde a tag de imagem, devo dizer, não tem uma etiqueta de fechamento? É um punhado de tags em html, mas não precisa que ele fechando imagem tag sendo uma delas. Então, enquanto você está aprendendo isso. Certifique-se de verificar em sites como W três escolas. Se você é HTML precisa de uma tag de fechamento ou não, é melhor que as economias estejam próximas. Hum, isso não vai causar nenhum problema, mas aqueles não causaram então nós falamos sobre essas tags HTML, e o adicional que temos aqui, alguns dos básicos que precisamos para começar estão bem aqui. HC Male, cabeça e corpo todos têm imposto de fechamento, e eles definem nossa página. Então, quando começarmos, seu médico pode. Agora queremos cada equipe fora do topo quer, seguido pela frente todos e depois ir para o ataque corporal. Nós temos coisas como a tag de navegação, e Mata nos permite definir links de navegação ou elemento que vai manter rotas de navegação dentro dela. E nós temos coisas como Dave ou seções, e ambos são guias diferentes com. Eles definem uma seção com documentos até jovens que temos algum imposto adicional dar ética, ou para adicionar cor e imagens para o seu lado. Então você tem coisas como a horizontal não vai marcar apenas foi uma pequena pausa, uma pequena borda entre o site de imagem que vimos a forma que podemos ver que cada um requer um atributo de fonte, então nós nunca imagem. Vamos pegar o metrônomo. O que? A Amy? Para mostrar a tag forte e AM, que ambos Bolden é um texto ou enfatiza que itálico e a quebra longa e freio regra. Então, estamos revelando tag, que quebra qualquer dano de conteúdo em si. Jogue com essas tags enquanto estiver aprendendo a codificar e veja o que elas fazem com seu conteúdo . Então, antes de realmente construirmos nossa receita de biscoitos, vamos falar sobre outra coisa. Vamos ter em mente em algum outro imposto. Vamos falar sobre aninhamento HTML. Então, o que é aninhamento? HTML que tem elementos dentro de elementos. Então pense nisso como um tipo de relacionamento de pais e filhos. E lembrem-se que, a partir de seus pais, mas o comportamento de olhar para alguns dos grandes será herdado para as Crianças. Uma boa maneira de começar a pensar em aninhamento é em duas formas. Listas e tabelas. Agora estamos em Mantle Street com nossa equipe aqui, fale e estamos em nossa página de perfil. Mas você também pode jogar uma mesas redondas nesta lista de elementos. Vamos começar ou em duas tags diferentes ou listas ordenadas ou lista sem água em cada um desses itens da lista de espera. Estes pequenos impostos L um. Então vamos dar uma olhada no exemplo disso em segundo lugar, mas apenas certifique-se de que você acha que está fora de ordem. Este muro estava sendo o número quando você os vê em um Shimao e eu sou a ordem. Isto foi ter pontos de bala e cada um desses pontos de bala ou lembrado vai ser itens de lista eles mesmos sinal que você tem tabelas agora. Tabelas não são usadas frequentemente em um fluxo para fora, indo para a frente em código, mas elas são muito úteis para coisas como inicializar um currículo. Talvez você precise de tabelas exatas e células juntas. E novamente esses ar seria ordenado pela mesa principal, a estrada na mesa e as colunas de em sua própria. Vamos dar uma olhada em algum problema, sem exemplos de aninhamento, e aqui estamos. Então nós temos um par de exemplos estavam aqui. Então, primeiro, vamos notar algumas coisas. Eu tenho um pouco aqui encontrando uma seção sobre a idade em si. Tem um filho. Um tem ajudado a parágrafo. Então estas são crianças dentro desta div aparente novamente, um ninho que não tem que ser uma tabela lister. Pode ser qualquer elemento da página. Estamos olhando para este aqui ordenado lys. Você pode ver que nós temos cada indivíduo e eu não tento um grito também. Mas indigenamente sob a criança três, temos outro para listar e que podem ser os nossos netos. E eu disse para o ramo de Herman, você deveria dizer netos para lá. Finalmente, é uma mulher refrescante. Então isso é algo em mente. - Nada. Ele ficou muito mais cansado do seu filho. Você tem um neto, você tem seu bisneto. Mesmo em uma coisa para dar uma olhada aqui é mais uma vez aqueles indesejados menos Você notou que há pontos de bala. Se eu mudar a etiqueta dele para você sabe bem estrangeiro ordenou Lis, você percebe que agora eu tenho 12 e três para aquele topless. E porque isto é pedra em ordem provoca um ponto de bala ainda abaixo disso. Então, novamente, eu acho que quando você está configurando a estrutura do seu site, se você tem que fazer aninhamento deve ser um automotivo menos importante isso quantos dos Statham de você precisa? E se você é Nessen coisas você quer que ele herde esse estilo. Isso é algo sobre mais tarde quando falamos sobre CSS. Então agora nossa próxima peça aqui faz isso grande para você. Vamos falar sobre as melhores práticas muito rapidamente, e vamos fazer um laboratório. Então vamos começar a construir uma receita de biscoito juntos. Então, primeiro, melhor prática comentando. Sempre comente seu código e casa. Você podia ver aqui. É assim que se constrói um comentário. Em cada e-mail, temos uma explicação de cenoura, parte dois traços. E você coloca em seu comentário lá e, em seguida, dois traços colocar cenoura. Tudo no comentário é ignorado pelos navegadores. Você não se preocupa com isso aparecendo em seu código, mas realmente ajuda você e outras pessoas com quem trabalha a entender seu casaco. É uma prática recomendada e eu digo para você definitivamente você como seus prédios fora. Então vamos ao nosso primeiro site juntos. Vamos abrir a pasta de receitas de cookies e que começou o projeto no Sublime em alguns impostos relevantes conteúdo fazer parecer como a imagem incluindo, que eu posso mostrar a vocês em um segundo. Eles não vão fazer uma pausa de um minuto. Só que vocês vão embora e pegam café esticado. Sinto-me bem. Faça uma blusa. Vamos dar uma olhada no nosso exemplo final. Aqui. Olha para isto. Podemos construir esta grande receita de homem de pão de gengibre. Não se preocupe com o estilo disso ainda. Só vamos construir o moinho oriental. Não vai sair daí. Então, como abrimos? Este é o contexto. O que é primeiro? Tenha um texto sublime aberto. Bem, então o Teste 1 sabe que você vê aqui e é Azizi. Assistências. Vá por aqui. - Sim. Você sabe, novamente, a solução eu e pegar nosso código iniciado, o arquivo de receita e ia arrastar e soltá-lo aqui mesmo. E eu não vi sublime. Nós temos. Eu estou inseguro. Precisamos nos conectar. E temos nossos estudos aprofundados. Schimmel já preparou para nós. Bem, vamos construir aquela receita de biscoito para um avô. E ele escreveu tudo para nós na nação. Já tem muita coisa. Então primeiro, pelo menos vou ter certeza de que vamos dar uma olhada nisso e ter uma idéia do que estamos fazendo. Então nos lembramos do que conversamos antes. Iniciando documento externo. Precisamos, na verdade, de algum imposto básico. Então primeiro vamos precisar de um pacote Michel. Vamos precisar de uma etiqueta na cabeça. Eu te aviso, Feche que tinha tag porque ele está se aproximando. Vamos precisar de uma etiqueta. Oh, não. Feche estes Cheveldae obter seus corpos tinha que ele vai apenas segurar todo o conteúdo que queremos colocar lá dentro. E queremos que o ataque da Alemanha Oriental feche no final. Algumas coisas que fazemos aqui. Uma coisa que queremos pensar é colocar em uma etiqueta de tipo doca e o que é isso é apenas diz ao computador, Ei, Ei, este arquivo do que um prédio é uma vergonha para fora. Isso é tudo. Tenho top, isso só te diz, Peter, o que está traduzindo? E podemos colocar em um dos tipos que falamos sobre a faixa-título. Eles não vão chamá-lo de cookies de pausa rodados. Certifique-se de roupas que. Então já temos esse conteúdo do vovô. Você vê isso? Ele escreveu um pouco de conteúdo HTML. Vamos pegar toda essa informação. Bem, há alguns CSS aqui em baixo, mas mais sobre isso ainda. Koppett, aqui. Só uma bela cópia. Já cortou quem? Eu só copiei. Isso é bom. Só para o caso de precisarmos de volta, agarrar tudo, talvez só tocar. Então é muito mais limpo e agora não pensamos nisso. Então, quando eu falar sobre adicionar tags religiosas, vamos pensar sobre a imagem que temos. Então vemos a solução em si. Você vê algumas semanas que não temos. Temos um cabeçalho. Homens de gengibre, temos uma imagem. Podemos ver que as receitas do vovô e você vê que este é um talento para que você possa ver que tem sido em tamanho. Também vemos que há manchetes adicionais abaixo aqui, mas eles são menores que este e algo sobre o qual não falamos. Mas para ter em mente é que cada um para ataque de cabeça. Há diferentes níveis de cabeçalhos, então há cada um para cada seis, que você possa definir as coisas como sempre, cabeçalhos por toda a página. Neste caso, eu poderia dizer que estes ar mais provavelmente cada dois desde que seus subcabeçalhos de Marine Ashre falam. Finalmente, podemos ver aqui que temos os ingredientes em uma lista inalterada e as direções, você sabe, com a gente. Temos aqui outro texto enfatizado para a informação nutricional. Então acho que estamos prontos para ir. Então vamos voltar ao nosso código. Pense em como vamos nos construir. Então primeiro dissemos que isso obviamente a tinha, e sabíamos que isso era enfatizado. Se voltarmos, olhe para essa imagem. Aqueles dois parecem bons. Está bem? Tamanho. Mas eu sabia que tinha colocado isto aqui. Mas como vou testá-lo? É aqui que entra o cromo. Quando você está testando seu imposto, seu HTML e seu CFS, você não precisa de nenhum especial onde você tem o Chrome. Você tem algum navegador? Então, se eu for ao meu arquivo, você abre. Oh, eu posso ver que Junior Birdman foi adicionado como cabeçalho e eu posso ver essa receita. Bagram uh, sua ênfase agora não parece muito boa. No entanto, quando alguém está lá, algo que eu esqueci é a imagem da patroa. É entre o vovô. A receita por centenas, alguém que tínhamos a imagem lá dentro. Vamos voltar para a linha de abastecimento e o trem me agarrar. Lembre-se, isso é uma imagem lá atrás e nossa fonte é este vai ser este biscoito que PNG é tudo o que precisamos. Não precisamos fechar nada, e a imagem deve estar no site. Agora vamos para os melhores biscoitos frescos. Oh, então não há nada errado. Vamos dar uma olhada aqui. Não, eu vejo o que eu fiz. Então certifique-se de que realmente prestamos atenção ao encontrado em seu J peg, não P e G cinco. Então, quando você coloca uma imagem, você quer ter certeza de que você não é apenas colocado no nome das imagens, mas também que tipo de arquivo é neste caso? E J. Peg volte aqui. Biscoitos da vovó. Atualize a página. Temos as riquezas, mas é enorme. Tudo bem, então o que fazemos para isso? Bem, uma das coisas que conversamos sobre isso é que um pouco vai apresentar. CSS é essa entrevista estilo, e podemos adicioná-lo diretamente para atacar. Agora não é a melhor prática. Você coloca um estilo diretamente em uma página, mas você faz isso neste caso, digamos que o elevador também encolhe a altura da imagem. São 400 pixels. Diga ruim, fresco, muito melhor. Não preciso que essa mensagem saia bem, então temos mais algumas coisas que podemos fazer. Vamos colocar esses caras em parágrafos desde suas informações separadas. Agora, uma coisa sobre esses parágrafos imposto é que vai sempre se trancar para fora. Então eles vão ser blocos cheios de texto indo para baixo como você iria definir um parágrafo na página. Lembre-se, construímos um macho dela. Originalmente, pensava-se em algum assassinato. Como você constrói revistas ou outros materiais de papel. Então ainda um pouco como um documento de papel. Mas não pense nisso como a mesma coisa em que estávamos. Pense em tudo bem, vamos. Então nós temos muitos desses cada escolher os ingredientes, precisa disso, pessoas. Está esfriando lá dentro. E agora temos a nossa primeira lista. Lembrem-se, criamos uma lista e, neste caso, é um Nord Lis. Você quer, digamos, outro a menos ou você? Nós não nos certificamos de que fechamos isso para você. E, em seguida, quando você se certificar de cada um desses itens ou dentro de uma bruxa lista copiando peças todo o caminho para baixo do tabuleiro. E uma coisa boa sobre sublime é que me deixa fazer coisas assim. Então eu estou fazendo está segurando minha tecla de comando para janelas. Acredito que é controle para PC é Amy colocar esses pequenos marcadores apenas mais uma vez, e que pode criar todo esse código de uma só vez. Uma das razões pelas quais ele é apenas de um texto é que ele tem esses pequenos truques úteis para tornar sua codificação mais rápida. Então ele fez uma lista de momentos. Vamos voltar para os biscoitos da vovó. Refresque-o. Ah, estamos parecendo muito bem. Sofrer um mais fácil. E estou percebendo que neste verão vocês estão, mas as amostras do respirador estavam ao lado da imagem. Qual é a diferença aqui? Por que enfatizamos o texto. Não é. É um quarteirão. É só dar um estilo diferente. Então, colocou o vovô em parágrafos. Bem, quem deveria fechá-lo? Sim, estamos parecendo muito bem. Então eu vou parar aqui. Cabe a você acabar conosco agora. A próxima peça é colocar isso essas direções em Ed ordenou menos, certificando-se de que você dar novamente aqueles cada um ensinar cada um a que é um cabeçalho para cada uma dessas peças. Enfatizando isso e vamos falar sobre o estilo em um pouco quando você terminar de adicionar tudo o que ela Mel, certifique-se de remover tudo isso adicional. Entendido, você não fala sobre a paz CSS e um pouco do colo do Nick dela. Então, antes de começarmos a ver um SAS, vamos falar sobre um projeto. Então, Sr. Ransom eleitores asiáticos agora para a receita e nós vamos construir é então isso a partir de um projeto aqui, que é simples de página portfólio site B de seu site de portfólio aqui está vestido um pouco sobre mim, Então certifique-se de que vamos adicionar em nosso nome. Acrescentou um pouco sobre nós aqui. E não se preocupem, tenho uma cópia para vocês usarem. Mas, você sabe, Criador Bill, use suas palavras aqui para colocar nossa própria imagem. Neste caso, você vê, minha linda tem que ser difícil ser 100 por 100. Grande quadrado. Eu acho que isso parece certo e, claro, links para todas as mídias sociais. Em outra página portfólio, uma cadeira. Você vê que nós temos nossa experiência e apenas estamos começando um pequeno pavilhão aqui, incluindo nosso desenvolvimento Web para a página de destino do vovô ponto com. Receitas favoritas. Arjun, alemão e também nossa educação aqui fora Uma pequena lista do que fomos educados, incluindo nossa introdução para emitir no CSS novamente. Fontes da Liga, mídia. Então vamos construir tudo isso juntos. Agora, se você quiser começar imediatamente, você encontrará algum código inicial no arquivo do projeto inicial sob o projeto final. E você também encontra lá textos de exemplo que você tem aqui e um arquivo html de ponto de índice que não tem nada nele, a não ser o básico. Você precisa começar. Vou dar uma olhada para você agora mesmo. Tudo bem, vamos subir em direção aos cegos. Vejo vocês nosso arquivo final do projeto aqui agora mesmo. Abra nosso Serco para amostra, Texano. E aqui está o nosso índice sobre um homem. Então, enquanto você constrói isso, lembra dos impostos relevantes? Então nós tivemos antes que você vai encontrar no arquivo de imagem aqui em duas imagens do projeto final em si. Então seja sobre mim entregável e a página do portfólio entregável. Por isso dá-te uma ideia do que vais construir e os relevantes têm outra vez. Sempre dê uma olhada nisso atrás. Certo, o que vai ser uma ligação? O que vai ser um cabeçalho? O que vai ser um parágrafo e tudo o que vai colocar juntos neste corpo neste documento. E novamente, você tem uma paginação HTML básica construir apenas na investigação. Cheirar. Lembre-se, você tem que construir um 2º 1 Você apenas chamar perfil que HTML eles vão ligar para este nós vamos dizer sobre links para um lado quando as coisas nos mais uma vez, nós foram encaixados tipo para cada tag feminina. Certifique-se de que sabemos que é HTML e você pode notar algumas outras tags aqui. Agora, um. Você percebe um par de ataques atendidos aqui e todas as metatags são informações úteis para CEO, então eu posso colocar na descrição do meu site. Ele trabalha em torno dele, e eu não posso este conjunto de personagens dizendo ajudando a vender o navegador com personagens que vão ser traduzidos. Ok, um dos depois que você pode notar isso é colocar atrás de você no documento real. Então, se você Mel tem a habilidade de estar em línguas diferentes e neste caso eu estou dizendo para traduzir para Inglês, brincar com cinco valores diferentes ling implora, você os encontra online. Ok, então antes de entrarmos no CSS uma última coisa certifique-se de que estamos prontos para ligar tudo o outro. Falamos sobre um imposto antes das etiquetas de âncora do clube. Deixe-me ter certeza que está claro, e eles ancoram-no em outras partes do seu site. Estamos fora do seu lado de fora. Neste caso, se eu digo que eu quero um, Eu acho que portfólio feminino e aqui é tipo que portfólio showplace falou corretamente. Eu nunca tenho um link para a página do portfólio, então quando nós vinculamos páginas juntas, é um simples é para cima. Vamos colocá-lo ancorado novamente usar um rascunho para pensar em uma referência a essa página para saber onde procurar. E nós realmente nos publicamos que estamos economizando para ver que isso não terá uma ligação de idade que vai para essa idade problema. Então é assim que você chega a um site quando pago no local para outro para processar esses ataques de acre. Vamos rever CSS, e então vamos voltar para o nosso me acariciado e começar um pouco de um projeto final antes de nós e tudo mais 4. CSS BASICs: Então fale sobre CSS. Vamos saber o que é o Dom e o que isso significa? E mais uma vez, o primeiro. O que é CSS CS que significa folhas de estilo em cascata? É uma linguagem usada para alterar a aparência de um elemento xiita ou imposto e permite reutilização. Então, quando pensamos em aspectos da aparência, primeiro podemos alterar o preenchimento da capa da fonte e as margens em torno de elementos ou dentro de elementos fundos, layouts, bordas, ingredientes teriam você qualquer coisa que eles podem individualmente em forma de estilo. É para isso que CSS. Falamos sobre a agulha que você reutiliza. Vimos que eu coloquei aquela bruxa do Sul em um HTML Tiger e aquele cheque de imagem para ela está com ela. Mas e se quiséssemos usar isso em toda a linha? Seria muito difícil de codificar. Cada etiqueta. O CSS bem têxtil nos permite fazer não é apenas estilo no ataque em si. Então, na página de nível superior dentro da área de cabeçalho, mas o mais importante, e o que vamos fazer para o nosso projeto final e para cookies, uh, receita israelenses, folhas de estilo externas e que nos permite criar estilos uma vez e vinculá-los a quantas páginas da Web quisermos, e isso é realmente permitir bobinas e tornar nossas vidas muito mais fáceis. Qual é a corrida? Nancy Avaliando Como funciona? Então é basicamente uma forma elaborada de procurar Nishi, Mo. Estamos falando sobre o que é o dom. Confira a sintaxe que vamos aprender sobre seletores básicos, como são capazes de conectar as estrias CSS fora classes, ID's e tags. Também vamos falar sobre especificidade e herança, e você é a SS. E essa é a ideia. Como um elemento filho obtém algum estilo de um pai? E eu não posso nem muito preciso do que estamos enrolando em nossa página. Vamos verificar o Syntex primeiro. Então primeiro dê uma olhada nessa questão, Mórmons novamente. Então, novamente, viu algum shammo de novo? Nós temos nossa tag, mas agora temos que atributos de classe o mesmo. Mas nós ainda processamos carne antes, e estamos dando um sobrenome a ela. E se formos estilizar algo extremo usando esse fascínio? É para isso que serve o CSS. Então, vamos dar uma olhada em como CSS é construído. Você vê que nós temos ponto algum nome de classe, mas esse ponto é que ele está dizendo que CSS eu estou fazendo um nome de classe qualquer que seja. E depois vamos dar-lhe propriedades. E essa propriedade faz parte do nosso estilo. Algumas propriedades que vêm incluem pensamento esperar para cor de fundo da capa, sombra de tecnologia, O que você tem Então você pode construir todas essas propriedades e dar-lhes valores diferentes? E olhamos para o que são essas ideias. Uma outra coisa a pensar é que usando várias classes em direcional Então, por que podemos ter uma classe que tem um monte de diferentes valores de propriedades sobre ele. Podemos ter outra classe que é falar muito especificamente, mudando uma coisa uma boa idéia seria Hey, Eu quero ter certeza de que todos os links no meu site sim, exibido lado a lado em uma fileira e eu quero modelo. Chame de azul e quero ter certeza de que são todos velhos. E se eu disser que quero um? Particularmente CSI evidência viu enfatizar. Então eu quero dar a ele nossos talentos neste caso. Agora, eu poderia usar uma tag M para dar automaticamente que enfatizar o texto. Eu falei, olha, mas a melhor maneira de você seria usar CSS e você apenas adicionando outra classe em que um pouco de um shimo. Então vamos chamá-lo de “O Clássico “pode ser itálico especial, mas isso dá-te uma ideia. Você pode começar a combinar classes em conjunto se você quiser fazer um estilo muito específico com algumas outras opções. Assim como o Tommy e Hamlets que trabalham com nosso CSS HTML enquanto o dólar representa o modelo de objeto de documento. E é o A P I ou interface de programação de aplicativos para sua, você sabe, usando os programadores idiotas, engenheiros, desenvolvedores podem construir documentos, navegar na estrutura e adicionar ou modificar e excluir elementos em seu conteúdo. O que parece? Isso é, você sabe, vamos passar. Vamos usar as ferramentas de desenvolvedores do Chrome para isso. Esta é uma das outras razões pelas quais queríamos usar cromo para esta classe. O que são as Ferramentas do desenvolvedor? Bem, eles usavam para muitas coisas, como inspecionar o dominante, uma idéia do que é na mosca. Sabe, César, por me estilizar, grampear nosso código mais tarde na mosca também. Chegaremos a tudo isso no futuro. Mas primeiro, vamos verificar a bomba. Então, mas sair deste vai para a nossa receita de biscoito. Onde? Biscoitos passados. Aqui estamos nós. E para abrir o inspetor. Você tem duas opções. Mas vamos atacar o suspeito sobre ele aqui. E isso abre o nosso inspetor corvo e queremos dar uma olhada nas coisas. Abra e o que você está olhando aqui nesta janela é o burro. Então você pode estar indo bem, que vai levar HTML. Bem, você está certo. O Dom não se parece com um macho. E isso porque é traduzido html e construindo para você. A diferença é o artigo de vida domiciliar. Então mais tarde com CSS e que eu vou script. Estamos mudando elementos no dominó tornando vivo para que o burro não seja quer ou inovação metal. Você deve saber que vai ser estática, a dinâmica domiciliar. Eles e você já estão usando. Isso é familiar. Belt estava construindo o dom, e como nós começamos a crescer styling, isso também vai ter que dar a você uma idéia para aprender mais sobre o documento fora do seu modelo. Confira um dos links abaixo que tinha algum recurso é para você ler mais sobre ele. Então agora temos uma idéia do que o dom significa. E então é por versão dinâmica do nosso conteúdo ou uma página que eles mudaram rapidamente. E como CSS relaciona Lynam é ele realmente olha para o dom para dizer, Oh, eu vou fazer qualquer tipo de estilo para diferentes seletores na página conectada para fazer stream out? E como isso faz. Ele olha para cima por um seletores CSS. Sim, há três tipos de seletores em CSS um muito usado, e isso é apenas qualquer tag HTML. Então, neste caso, se eu disser que quero estilizar tudo tem uma etiqueta P vendendo todos os elementos da página. Há parágrafos, mas então eu tenho classe e eu ds assim classes e ainda deixamos antes de começar como um período colocado no meu nome de classe no A que ela macho definiu como classe é igual a aspas no próprio clássico. Sem período. Colocamos isso lá, e é estilos todos os elementos dessa classe, para que as classes possam ser usadas várias vezes ao longo de uma página. As ideias eram um pouco diferentes. Ideias foram primeiro classificadas em CSS com uma marca de hash, mas em seu nome poderoso, seja lá o que for. E então na nação Mel, vamos ter novamente o i d é igual a aspas no nome do seu I D no meio . Perdoe-me por esse tipo de eu não tenho cinzas ruins lá, mas você entende. Mas a grande parte sobre idéias são apenas um i d é permitido na idade dos mesmos elementos. Então, se eu tiver um, eu chamaria meu também avatar. Só vou ter isso numa página de cada vez. Então poderia estar na minha página de índice e poderia estar na minha sobre essa página html e poderia estar na minha página de portfólio de página de perfil, mas só pode estar lá. Nós uma vez. Então ele realmente deve ser usado para elementos muito específicos, marinheiro e usado uma vez em uma página que poderia ser uma navegação dele. Isso poderia ser um elemento de imagem que poderia ser talvez até mesmo um controle deslizante ou algo como um movil que aparece. Mas você só um, ele é assim, quer algumas propriedades básicas do CSS. Então alguma base provavelmente é. Temos fora da aposta que éramos cor da família tamanho da fonte. Aguarde toques de cor de fundo, ordens , margens , textos, meu ir para aprofundar, indo para cada um desses valores novamente. Você vai ter os slides e alguns links adicionais abaixo deste vídeo. Mas lembre-se, quando fizermos isso, temos que ter certeza de nomear um valor de propriedade para a propriedade. E podemos olhar para algumas das descrições aqui agora para as coisas que eles dão para fora, especialmente ou para o fundo. O hatting no preenchimento de área de marcha é cercado espaço dentro de seus elementos CSS e marchando e ver o espaço exterior. Então, quando você está movendo coisas ao redor para garantir que as coisas estão equilibradas, lembre-se, Patting aproxima as coisas por dentro, e a margem empurra as coisas para fora. Apenas gostaria de ter certeza que eu amo isso em sua cabeça depois de começar a colocar para fora suas páginas. Vamos dar uma olhada em alguns CSS agora e ter alguma idéia do que você vai sair? Então, primeiro, vamos dar uma olhada nesse exemplo básico antes então lembre-se que antes de termos este, bem-vindo ao CSS estrela de entrada. Exemplo Html. Estamos de volta aqui diz classe Bem-vindo novamente, mas agora ele tem algum CSS ligado a ele e dizer Bem-vindo, Teoh Thean viagem mais uma vez Lá vamos nós. E o CSS está fazendo alguns dias Então vamos dar uma olhada aqui primeiro temos uma idéia do meu cabeçalho. Agora eu sei que minha cabeça só vai ser uma vez localizar É muito importante Então eu estou usando meu telefone estilo torná-lo itálico novamente Nós temos nossos suportes Nós temos nossa propriedade Nome seu valor de propriedade eo nome de Al Você vai ser separado por dois pontos e final cínico, temos o nosso parágrafo aqui, apenas informações que a jangada é um nome de classe e novamente as aulas podem ser usadas várias vezes, então se eu quisesse fazer outra cabeça clássico é igual a informação, o parágrafo deve soletrar isso certo. E ele está em várias vezes e ir a lá, Perdê-lo agora sob o parágrafo com essa cor vermelha que você vê que tem cor e valor de propriedade vermelha para que If para cada parágrafo fazendo o texto ler Último, mas não menos importante neste fundo cor quase elemento âncora. É me dar o fundo amarelo aqui ele explode. Típico. Então, essas são algumas ideias básicas. Uh, CSS Vamos expandir isso 5. CSS STYLING: Então vamos falar sobre estilizar esse site de cookies e como vamos fazer os estilos juntos. Então você tem três maneiras e estilo diferentes. Seu site. Você tem estilos de linha, estilo internas e folhas de estilo extra. Nós já usamos em estilos de linha para que com Element que colocamos em um estilo atributos nesse tipo de imagem para o nosso cookie. Inicialmente, aquela receita de biscoito inicialmente era um estilo em linha. Você não faz isso. Normalmente a Índia solteira. Ele está usando folhas de parada internas e eles vivem dentro de tags de estilo, geralmente saúde na tag principal do seu site. Não é recomendado fazer isso, mas vamos usá-lo de qualquer maneira. Por que estamos aprendendo porque é ótimo para um protótipo. Então, antes de realmente ir para a próxima página estava nadando sobre folhas extra Sul, vamos realmente ver o que interessa tudo que ela é como na página. Então, saímos daqui. Vamos aos nossos textos sublimes. O que? Não precisamos dessa indexação, sério? Onde quem está aqui? Vamos voltar para o código iniciado da receita de cookies. Bem, eu me livrei de tudo que já começou a arranhar. Bem, vamos aqui de novo. Queremos ter certeza de que temos cada fêmea. Tad, nossa etiqueta de cabeça em nosso corpo tinha apenas no conteúdo do suporte. Liz está pegando nosso continente aqui. Vamos sucata descreveremos esta primeira peça aqui. São as minhas chaves. Não vamos nos preocupar com mais nada agora. Aqui, você coloca a etiqueta de estilo. Agora você se vê tinha gaslights e realmente deixá-lo saber que você está construindo arquivo CSS problema e ele já foi um começo colocando essas coisas para fora. Então vamos dizer que temos são cada um para o homem de gengibre e vamos dizer Faça um par seu onde primeiro vai fazê-lo por etiqueta e dizer que todos têm uma cor lida. Eu acredito que é apenas Oh, sim, você vai. Bem, o que é isso de Omi? Então, algumas maneiras que você pode estilizar cores em CSS é por código hexadecimal por nomes da Web especializados ou meios de capa em pela nossa TV A ou RGB. Então você tem um par de desperdício e cor Obrigado eu vou apenas ter você trabalhar com código hexadecimal por enquanto. Será mais fácil. E você encontrar qualquer informação sobre código de chapéus na combinação de capa para eles on-line. Basta procurar CSS Exco. Vamos dizer isso e ver como é que os livros vamos aqui. Vamos pegar este vermelho quente que é amarelo, você sabe, não perfeito. Lembre-se de todas as cores da minha escola, mas você entendeu a idéia. Então isso significa que cada etiqueta que eu tenho agora vai ter esta cor amarela. E se eu quiser ser um pouco mais específico? Bem, vamos usar o nome da turma de novo. Então vamos dizer que cor vermelha neste tempo de espremido vermelho coberto e vamos para baixo para receita vovô, dar-lhe um atributos de classe e, em seguida, a verdade vai ser lido cor de volta aqui. Esse é um aqui atrás. Refresque-o. Ei, é a cor vermelha. Então, apenas algumas noções básicas. Aqui estávamos usando folhas de estilo da Internet. Colocamos um ataque estilo no topo no cabeçalho começando direito CSS como normalmente faria novamente. É o nome da propriedade colchetes, valor da propriedade de dois pontos, Cínico. Certifique-se de que fechamos essa marca de estilo no cabeçalho. E então poderíamos conectar CSS como vimos antes. Ou fazer tags classes ou, se você quiser que eu ds novamente na minha página mais profunda volta e dizer o meu i d bem assim cor neste tempo vai fazer um azul Você vai dar a este um gráfico. O 90 é igual ao meu I d. Ok, feche tudo, cuidado fresco e temos azul. Então isso é um pouco de intruso. Como trabalhar com CS nós inicialmente. Agora vamos falar sobre agora. Então lençóis de estilo extra. Então vamos voltar ao sublime. Sim, dê passos para trás. Voltamos no tempo e fazemos tudo isso para que você tenha um bom peso limpo. Mas agora vamos andar até aqui. Então, o que são folhas de parada externas? Então são folhas de estilo de diário. Todos esses elementos de estilo estão vinculados a um arquivo separado? E como você faz isso? Isto é um ataque de ligação? Então o link tag está procurando por aquela calha e que uma armadilha novamente é que, na verdade, isso vai ser um euro para outro lugar. Neste caso, é o euro do seu estilo. Folhas acima, a tag de link é colocada na cabeça, assim como os ataques de estilo são o lugar à frente, e é a melhor prática para sites ou aplicativos ao vivo ou prontos para produção. Você não tem estilos internos ou em estilos de linha em seus sites prontos para uso ao vivo. Então, entendemos o quê? Nossa receita de biscoito. Então vamos abrir novamente, manter a pasta em nosso projeto iniciado falta e já temos um pouco. Mas, ei, você sabe, mas tudo bem. E podemos criar uma pasta chamada CSS e fazer um estilo que arquivo CSS. E vamos adicionar alguns estilos de acordo com os desejos de deficiências, que está nesse arquivo também. E finalmente vou ligar a folha de estilo à questão da idade. Então, vamos sair daqui. É assim que o seu salão entra no nosso lindo começo. Um casaco. Vamos a isto. Clique em falar mal. Vamos fazer uma nova pasta chamada CSS. E nesta nova água CSS, estamos fazendo o arquivo. Você vê a falta como estilo CSS. E agora podemos fazer nosso CSS aqui. Então vamos à escola todo o caminho para baixo. Vemos que temos um bom NCS nós paz e um avô, aparentemente como um designer gráfico. Então ele nos deu, um, infelizmente. CSS que ele quer é bastante senador padrão. Era uma cor de banheiro toda a página para ser apagado qualquer vez uma capa dos textos para informações nutricionais para ser 87 e você parece um bônus. Se ele gostaria que uma borda em torno de toda a idade e a imagem fosse desta cor, vamos primeiro fazer algumas coisas. Vamos colocar algumas etiquetas na jaula. Vamos em frente. Você foi incrível aqui que se concentrou em tocar a imagem em linha extra na fronteira. Temos a certeza de obter a informação nutricional que não posso mostrar. Vocês têm que fazer tudo o que puderem brincar. Isso é você mesmo. Então isso faz para um pouco cada um aqui quem? Vamos nos certificar de que realmente conectamos todas as tags como quisermos. E a razão pela qual estou fazendo isso uma e outra vez. É apenas enfatizar que queremos ter certeza de que sempre temos nossos elementos juntos. Quem é o que se ferrou aqui. A etiqueta da cabeça está por conta própria. Isso é todo mundo. Aqui vamos nós. Vamos dar esse cara aqui. Então, você sabe, informação nutricional foi enfatizada. Sim, tem um bom começo. Salgado Shimon Place. Então, para trás a cor dela da página, enquanto as páginas inteiras, ou o corpo ou a questão do ativo padrão Lee, você normalmente vai fazer o corpo de sua capa. Todo o fundo. Então isso significa que em todo o corpo ao longo eu vou dizer cor de fundo. Vai ser branco. Isso é o primeiro. Em segundo lugar, a cor da textura. Informação nutricional deve ser igual a 87 Bem, não há nada que identifique o texto, algo especial além de ser enfatizado em um parágrafo. Mas sabemos que vai haver outro imposto enfatizado porque receita do vovô também tão velocidade. Além disso , devemos colocar uma classe aqui se a classe é igual a especial. Eu acho que é um companheiro especial, mas havia especial então pode falar, uh, uh, preocupado com o seu próprio. Chame de textos agradáveis para textos de cores extravagantes. E vamos fazer isso como uma palavra. Vamos voltar ao estilo dela, pensar em ponto para ter certeza, Sra. Class e vamos dobrar essa cor 887 Então não é ótimo. E, finalmente, as últimas peças que bônus. Então, quando uma borda problema na página e ao redor da imagem. Mas sabes o que fizemos com a imagem de ti a brincar de engenheiro? Vocês são imagens. A fonte é igual a cookies. Escolhe e sabemos que a página inteira tinha o meu corpo. Então, quando usamos a ordem e vamos dizer que é uma borda de cinco pixels sólida, e a tampa para a borda seria esta. Cortou outro. A borda é uma função CSS especial porque você pode ver que ele leva três valores diferentes. Dê um com você. Dê a ele que tipo de ordem é. Há, hum, fora de exportadores como uma linha sólida pontilhada traço que provavelmente é alguns outros, então a cor da própria fronteira. Então, colocando tudo isso em um certo? E finalmente, vamos fazer uma coisa que fizemos antes. Então, antes tínhamos uma tag de estilo. É isso. A largura desta imagem 2 40 pixels. Vamos traduzir isso para o estilo, uh, uh, mais velho lá. Então, sinto falta de câncer. Nem sequer verificamos se é a única imagem na página. E como instantâneo para dizer, exatamente a mesma coisa com que a imagem vai ser para pixels. Posso remover isto daqui. Devemos estar prontos para ir. Assim como tomar as regras da Grand House. Olha aqui é agora um fresco que parece muito snazzy. Sim, o míssil CSS está lá, você diz porque a imagem é muito grande. Então, mesmo que tenhamos a imagem lá dentro, tudo parece muito bom. As cores não mudaram de verdade. Os novos são o tamanho da imagem dele. O que não fazemos? Bem, eu não me conectei. Deus te abençoe Aquela é a Sierra? Então vamos nos certificar de que fazemos isso agora. Então você adiciona etiqueta de inalação. E mais uma vez essa tag de link está dizendo isso. ISS Villa Vince é que é uma folha de estilo. Vai ser um arquivo CSS, e vai estar em nosso cookie e nosso titular CSS. Então você tem CSS. Lembre-se que transferência de arquivos Social Peace CSS ir para o arquivo estilo barra ponto CS tem. Vamos voltar aqui fresco, grande e sim, olha para isto. Que agora temos uma fronteira na jaula. Temos a imagem para baixo e temos a informação nutricional ligeiramente colorida, por isso é enfatizado em um pouco de muita cor. Certifique-se de brincar com esta página de estilo em tratar as coisas como você vê, mudança, fundo, cor, transfronteiras e procurar algumas outras propriedades CSS e valores que você pode jogar com aqui. Então agora vamos falar sobre especificidade 6. INHERiTANCE de de SPECIFICITY e a pessoa: Reino Unido. Então vamos falar sobre especificidade, herança e você eso especificidade. Eu não vou cair de joelhos agora para você gritar para o céu, mas é uma das coisas mais importantes que você precisa entender em CSS e, portanto, pode ser seu inimigo. Especificidade determina qual função CSS é aplicada. Brian, o navegador e estas quatro categorias distintas primeiro define o nível de especificidade de qualquer determinado seletor em estilos de vida I DS classes e os próprios elementos. O que isso significa? Este público aqui? Eu sei que é muito para obter, mas queremos pensar é a ordem do mais específico para liberar específico no que está sendo aplicado pelo CSS. Então, a coisa mais específica é o estilo de ST para que Yngling estilo um deleite em qualquer outro elemento em sua página vai sobrescrever qualquer outro sul interno ou externo. Ela é, nós dissemos, apenas usá-lo normalmente, mas vai substituir qualquer outra coisa Ideias. suas segundas classes em terceira e a coisa menos específica são elementos ou impostos porque estão tão espalhados. Em outras palavras, se você pensar sobre isso em termos de pontos, se elemento tem em estilo de linha, e ele automaticamente foi para obter 2000 pontos para cada idéia. Ply recebe 100 pontos, muito classe ou pseudo-classe. Nós nos preocupamos com aqueles ainda recebe 10 pontos e para qualquer referência elemento, ele só recebe um ponto. Então você pensa em ser muito específico. Você pode subir aquele adolescente ou descer a equipe. Ela vê comida? Eu pessoalmente construí um monte de coisas nas aulas porque eu sei quando você usa a mesma linha de estatísticas através da fronteira em páginas diferentes no meu site. Mas se eu quiser ser muito específico sobre algo além disso, eu posso ter uma aula e ter uma identidade. identidade Você coloca os dois elementos lá e é como se eu estivesse começando um pouco desse estilo de classe , e esta ideia é muito específica para este elemento. Limpe isso com isso. Então vamos dar um exemplo vivo. Então nós estamos olhando para outro, a menos que com o I d de bebidas de verão, e eu tenho este grande tipo favorito de ouvir uma classe um favorito que fala o meu vermelho e ouro favorito . Então, o meu favorito tem sido, na verdade, gangue, me aborreça uma bebida. É relaxante. Bem, se entrarmos aqui e mudarmos a própria vida? Então o que? Vamos dizer: “ Ei, Ei, eu quero o Teoh.” Use a ideia. Bebidas de verão e todos os aliados são todos o elemento mineração as declarações, algumas das bebidas para a cor azul em vez de vermelho. Bem, espere, o que aconteceu? Vemos que nosso favorito ainda está trabalhando a pedra da classe lá porque a família é mofo , então ele ainda está aparafusado. Mas agora essa cor vermelha foi substituída. E isso é porque as bebidas de verão que você vê aqui estão usando o I.D. que é maior que uma classe, e está usando o nome da etiqueta em cima dela. Então, para essas classes, 10 pontos, você sabe, tem ah 101 pontos ou huh 101 pontos simplesmente porque esse sistema já teve. Então, quando pensarmos nisso, vamos nos certificar de ser o mais específico possível e não deixar as coisas superarem isso. Outra maneira de olhar para a especificidade e herança. Está aqui, isso temos as nossas simpatias outra vez. Part Vôos é um pouco pequeno sem-teto. Podemos ver que temos. Eles estão mirando em uma mentira. Nós também vemos que temos um outro alvo ace Ban Limit vãos são semelhantes aos parágrafos, mas eles estão apenas na linha, então eles geralmente usam para uma linha de texto e não caminhada esperançosa de textos para que possamos ver que estamos herdando ainda do nosso i d E cada elemento é roxo. Cada tamanho de fonte é 12 outfront Lee é normal. Talvez obter 18 milhões mais fácil Ver? E podemos ver que podemos adicionar especificidade adicional. Então estamos herdando de que cada elemento tem essa herança. Mas agora o espaço em si A idéia de yum tem o estilo de fonte em itálico e podemos até fazer este chamamento um pouco mais. Talvez pensar um pouco, trigo. Oh, aqui vamos nós. Então novamente nós temos uma herança fazendo este roxo mudando o tamanho da fonte que você pensou Espere e então nós temos especificidade aqui, dar-lhe este é o item seus talentos e o ousado. Então pense na herança da superfície. Queremos pensar sobre quando construímos nosso estilo o que queremos herdar especialmente para as crianças . Estamos fazendo qualquer tipo de aninhamento como essas listas e também queremos pensar sobre como ser muito específico com nossos estilos. Tenha tudo isso em mente ao começar a trabalhar no seu projeto. Então vamos fazer uma pequena revisão de tudo o que fizemos juntos. E vamos trabalhar um pouco na pressão juntos antes de dizer que sim. Então, o que você aprendeu? Bem, esta é Sears tem Closius s específicos. Sabemos que CSS é aguarda e-mail elegante e cheira são estrutura do nosso site. Temos alguns conceitos básicos em propriedades de texto. Então vimos como você precisava de colchetes nossos valores de propriedade. Estes são separados por dois pontos e em Aceh Michelman como toe link para uma folha de estilo e páginas nessa tag link Como vamos usar seletores, idéias, classes, classes, coletores de impostos para realmente resolver os elementos em interesse que ela macho para estilo em si mesmos e como especificidade e herança se aplica à nossa herança CSS, permitindo-nos dar estilos herdados para qualquer um dos nossos filhos. Elementos dentro de homens reais são página e especificidade pode ser certo enfraquecer segmentação exatamente o que queremos mudar. Só tendo cuidado com a forma como a usamos. Lembre-se que CSS é importante e incrível, e ele garante que ele separa são detalhes finos de aparência da nossa exibição básica do nosso conteúdo ou ela é Mao? E isso torna nossas vidas muito mais fáceis. A outra coisa sobre CSS é que uma folha de estilo poderia soar quantidade instantânea de páginas HTML . É por isso que não o tornaria externo. Torna a vida muito mais fácil. Estamos apenas mudando um estilo, vez implicando em toda a linha. Fará isso com o pavilhão. Finalmente, quando falamos sobre essa quantidade de páginas HTML vale a pena falar sobre a marca de um site inteiro, e isso é o que CSS é. Quatro. Você pode adicionar partes CSS a um novo estilo do seu lado. Toda vez que vejo um exemplo da vida real aqui, vamos fazer isso um segundo fora do nosso site de portfólio. Mas só para te dar uma ideia, como vocês se exercitam juntos? 7. Projeto final: Tudo bem. Por último, para o seu contrato final, o seu eu criando o começo sobre o seu próprio portfólio lá fora. Então pegue o que você aprendeu com a aula hoje e melhor fora de um site. Você encontrará o código inicial em seu arquivo de projeto inicial na camada inicial, você tem HTM básico online para o seu arquivo de índice, bem como na pasta CSS. Você encontrará um esboço básico para os estilos, todas as páginas e a dica para simplesmente texto HTML que você deve usar no suporte das imagens. Você também encontrará como seu projeto final deve olhar para a CNN. Vamos começar a fazer isso juntos agora por alguns minutos e depois vou deixar isso com você. Espero que tenha se divertido durante a aula. Então, vamos sair daqui. Volte para o nosso sublime novamente. Temos uma pasta do projeto. Nós temos o nosso índice exaltação testamento para cópia, e nós temos essas entregas. Então, como vamos parecer no final? Então, uma coisa que eu quero pedir para ter em mente o suficiente imediatamente é que nós sempre queremos ter certeza de que estamos caminhando ainda essas imagens e ter certeza de que você as supere separadamente para obter qualquer um de um minuto de construção. Então sabemos que temos dois links do nosso nome. Temos algumas fronteiras entre aqui, e essas fronteiras são interessantes. Eles apenas regras no meio. Então, talvez olhe para a horizontal dela ali. E vemos que também temos links adicionais com pouco papel. No meio, esses tubos estão nomeando legis especiais, mas caracteres pipe na página. Vamos construir esta peça de navegação e garantir que a razão se ligue ao nosso portfólio de idade para você primeiro, não é? Quem? Vamos abrir qualquer arquivo. Você vai vê-lo como Porto Julio Shima. Talvez vá até aqui. Copie isso. Incorpore capaz de dizer portfólio por enquanto. Então sabemos que temos uma página diferente aqui. Ótima. Agora vamos pensar na navegação que pensamos em nunca ter antes. Só temos a nossa etiqueta de navegação aqui. Nossa primeira página. Se olharmos para isto, isto é sobre mim. Então é Pedro na rádio sobre mim. Parece que é pensar, e ele vai ligar diretamente para o nosso índice dot html Agora naquele personagem pipe saber que é bem aqui que pequeno cachimbo. Então você se mantém. E agora queremos um link para esse portfólio de idade. Pessoal, certo, em nome do link, tudo bem ou totalmente? É isso. Então vamos abrir esse caminho até lá, sua área de busca. Onde você colocou isso? Ouviu isso? Vamos abrir a solução. Vamos nos abrir para a estrela. E lá vamos nós. Então eles aliviam isso como portfólio. Na verdade, é aqui em cima. Sobre estamos sabemos que estamos apenas na próxima página links a receber aqui em nosso cachimbo. Mas se você clicar neste portfólio, tudo bem, estamos bem. Podemos vincular essas páginas. Então lembre-se, você sabe, certifique-se de olhar para a imagem em si. Nós nos certificamos de como construir o mercado lá. Realmente? Para os nossos cabeçalhos. Parágrafos são links nessa imagem. E certifique-se de que eles estavam apenas olhando esses caras juntos. Vamos fazer outro arquivo aqui, Felicia Male. E certifique-se de que enviado juntos usando nossas etiquetas de raiva em verde o link bem aqui. Espero que vocês realmente gostem da classe CSS tradicional novamente. Você vai encontrar todos os arquivos que falamos e incluindo os PDFs do Kino passado por amor capaz de ser baixado. E também incluirei o código da solução para a receita de biscoitos e a poliomielite para que você possa dar uma olhada no que está sendo feito no próprio código. Tente construí-lo você mesmo primeiro. É muito divertido. Você gostou do curso mais uma vez. Temos um bom dia. Lembra-se do controle? Acredite em si mesmo, acordo com ser liberado.