Need help? Chat now!

Hostwinds Blog

Resultados da busca por:


Tutoriais do Hostwinds: como construir um site de blog básico sem um aplicativo de construção de sites Pt. 3 Imagem em destaque

Tutoriais do Hostwinds: como construir um site de blog básico sem um aplicativo de construção de sites Pt. 3

por: Hostwinds Team  /  dezembro 28, 2018


Parte 3 da série Hostwinds Coding Blog está aqui, pessoal!Em partes 1 e 2, construímos uma homepage para o nosso site de blog com HTML e três páginas da Web para três postagens de blog hipotéticas usando HTML.Na CSS!O CSS é uma linguagem de programação que funciona em conjunto com seu código HTML para fazer com que seu site pareça melhor e mais personalizado.Nós temos muito para cobrir aqui, então pendure firme!Antes de começarmos a criar nosso primeiro documento CSS, passaremos como vincular nosso documento CSS aos nossos documentos HTML.Isso é fácil!

Óh, e antes de começarmos Vinculando nosso documento CSS aos nossos documentos HTML, confira estes links abaixo para a parte 1 desta série do blog, parte 2 desta série do blog, e nossas folhas de trapaça na forma das postagens do blog anteriores intituladas "Hostwinds HTML Hype Parte 2: Tag HTMLFalar "e" Hostwinds CSS Chat ".

Tutoriais do Hostwinds: como construir um site de blog básico sem um aplicativo de construção de sites Pt.1

Tutoriais do Hostwinds: como construir um site de blog básico sem um aplicativo de construção de sites Pt. 2

Hostwinds HTML Hype - Parte 2: Tag Talk

Hostwinds CSS Chat

P.S.Para reiterar isso, o site de blogs que estamos criando é básico.A esperança é que possamos expandir continuamente nosso site e lentamente torná-lo mais bonito / dinâmico / mágico blog post por postagem.Para todos os efeitos, esta série de blog foi projetada para fornecer os fundamentos do edifício do site.Ok, agora vamos mergulhar!

Primeira coisa do primeiro: ligando seu documento CSS ao seu documento HTML

Adicione esta linha de código dentro de suas tags de abertura e fechamento em todos os quatro documentos HTML:

Lembre-se de empurrar Salvar!Para revisar, nossos quatro documentos HTML são assim neste momento:

1. Página inicial do site:

Meu site de blog

Meu site de blog

Título da postagem 1 do blog

Aqui é onde você pode colocar uma breve sinopse da postagem do seu blog, se desejar

Título da postagem 2 do blog

Aqui é onde você pode colocar uma breve sinopse da postagem do seu blog, se desejar

Título da postagem 3 do blog

Aqui é onde você pode colocar uma breve sinopse da postagem do seu blog, se desejar

Obrigado por visitar este site de blog!

2. Postagem de blog 1 página da web:

Meu site de blogging | Blog 1

Meu site de blog

Título da postagem 1 do blog

Aqui é onde você pode colocar todo o texto que deseja adicionar ao seu post do blog para o dia.

Obrigado por visitar este site de blog!

3. Página da web da postagem 2 do blog:

Meu site de blogging | Blog 2

Título da postagem 2 do blog

Aqui é onde você pode colocar todo o texto que deseja adicionar ao seu post do blog para o dia.

Obrigado por visitar este site de blog!

4. Página da Web da postagem 3 do blog:

Meu site de blogging | Blog 3

Título da postagem 3 do blog

Aqui é onde você pode colocar todo o texto que deseja adicionar ao seu post do blog para o dia.

Obrigado por visitar este site de blog!

NOTIFICAÇÃO IMPORTANTE: Quando o trecho de código que insiro nessas postagens do blog é muito longo para caber na janela, uma pequena barra de rolagem aparecerá na parte inferior do código quando você passar o mouse sobre essa área. Você pode deslizar a barra de rolagem para a direita para ver todo o pedaço de código.

Agora, vamos levar toda essa situação CSS passo a passo.

Como configurar inicialmente o documento CSS

Passo 1: Crie uma nova pasta dentro da mesma pasta e editor de texto que você está agora (a mesma pasta e editor de texto que você coloca seu index.html na Parte 1).Nomeie a pasta "CSS".Em seguida, crie um novo arquivo nessa pasta e nomeie o arquivo "Style.css" Seu documento Style.css modificando todos os documentos HTML.

Passo 2: Agora podemos referência (ou "alvo") todas as tags que gostaríamos de modificar assim:

corpo {} nav {} h4 {} h3 {} img {} botão {} {} botão {}: hover {} rodapé {} div {} div {} .readnext {} #thankyou {} #

Apenas um lembrete: Antes de passar para a Etapa 3, revise a postagem do blog sobre selecionadores de CSS, propriedades, valores de propriedade e sintaxe geral, se você ainda não estiver bem versado nessa arena.

Etapa 3: Queremos que o histórico de nossa página inicial e páginas da Web seja uma imagem que ocupa a página inteira.Você pode escolher qualquer imagem do seu gosto de ser seu fundo, mas vamos nomear nossa imagem de fundo "your_background_image.png" para este tutorial.Além disso, vamos fazer uma bela imagem de nuvens em nosso plano de fundo.Para fazer essa imagem nossas fundos das páginas da Web e fazer com que ele ocupa toda a página em cada uma das nossas páginas da Web, inseriremos as propriedades "Background-Image" e "Background-Size" dentro do seletor "Body" no muitotopo do documento.

Observação: seu CSS (e HTML, nesse caso) deve estar na ordem em que o elemento ocorre primeiro na página, depois em segundo e assim por diante.

Outra nota: Você pode estar se perguntando: "Por que há dois períodos na frente do" /images/your_background_image.jpg? "Você pode se lembrar da discussão que tínhamos sobre caminhos de arquivo relativos na parte 1 desta série de blogs.Usamos apenas um período na frente da nossa referência "/css/style.css" quando usamos um caminho relativo de arquivo para chamar nosso CSS no início desta postagem do blog. Isso ocorre porque a pasta "CSS" está dentro do mesmopasta que nosso arquivo index.html. Há dois períodos na frente de "/images/your_background_image.jpg" porque estamos contando o navegador para começar em nossa pasta "CSS", onde o nosso documento Style.css é, então saia desseA pasta "CSS", em seguida, vá em uma pasta diferente chamada "Imagens", em seguida, pegue o arquivo de imagem denominado "your_background_image.jpg."

Em seguida, queremos alterar a fonte do texto do link ("Blog Home") em nossa barra de navegação e faça o link texto em maiúsculas.Portanto, o documento até agora deve aparecer assim:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;}

Passo 4: Queremos alterar as fontes de todos os nossos títulos, tornar seus textos todos em maiúsculas, centralizar o texto do título e alterar a cor do texto para um azul escuro.

Em seguida, garantiremos que as imagens sejam todas centradas, alteram suas larguras, coloque as fronteiras ao redor deles e faça suas fronteiras arredondadas nas laterais.Com essas adições incluídas, o documento se parece com isso:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;}

Etapa 5: Movendo-se bem!Vamos mudar a fonte e a cor dos nossos parágrafos, também centralizando os parágrafos do texto.

Depois disso, vamos modificar os botões na página inicial.Para os centralizar, usaremos as seguintes propriedades:

display: block;margin-left: auto;margin-right: auto;

Para alterar a cor de fundo, para tornar o texto maiúsculo, para alterar a família da fonte e o tamanho da fonte, para centralizar o texto dentro dos botões, para adicionar espaço entre os lados dos botões e o texto dentro dos botões, para dar aos botõesBorda preta sólida, e ao arredondar os cantos dos botões, geraremos o seguinte código:

background-color: #bee5eb;text-transform: uppercase;font: 27px 'Cinzel', serif;text-align: center;padding: 20px 30px;border: 3px solid black;border-radius: 25px;

O documento agora deve aparecer assim:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;}

Etapa 6: Esta parte é legal!Para alterar as cores dos botões da página inicial e fazê-los quase aparecer um pouco verso quando alguém paira sobre eles com o mouse, digitaremos o seguinte código:

button:hover { background-color: #00a1f5; opacity: .5;}

Agora vamos modificar nossa etiqueta de rodapé e DIV final.Nós vamos alterar o texto do rodapé (aka mudar a família da fonte, tamanho da fonte, cor da fonte e alinhamento de texto), a cor do fundo do rodapé, e adicionar algum espaço entre o rodapé e a área acima dele digitando neste código CSS:

footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;}

Também modificaremos a única tag que criamos na Parte 1 para entender melhor como as etiquetas funcionam.Vamos fazer o plano de fundo do conteúdo entre as tags de abertura e fechamento em nossa página index.html um gradiente de três cores.Isso nos permitirá ver o que aninhamento nosso pedaço de código entre as tags de abertura e fechamento faz.Suporte comigo aqui, pessoal, porque isso realmente não parece super esteticamente agradável em nossa homepage.Vamos adicionar o seguinte código CSS à parte inferior do nosso documento Style.css para que possamos criar esse fundo gradiente:

div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

Etapa 7: Dê uma olhada em todo o documento CSS e verifique se ele tem uma aparência adorável:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

Etapa 8: Você pode recordar isso da parte 2 desta série de blog, mas a única diferença (exceto para os títulos e a parte do texto entre as tags de abertura e fechamento dizendo "Blog Post 1" em vez de "Blog Post 2" ou "Blog Post 2"3 ") Entre o blog Postar uma página da Web e as páginas da Web para ambos o blog Post 2 e 3 é que as últimas páginas da Web contêm um link que permite que os usuários visualizem a próxima postagem do blog (a página da Web para postagem do blog não precisaEste link, pois é o post mais atual do blog).Na Parte 2, adicionamos a classe "Readme" à tag dentro do rodapé dos nossos documentos HTML de 2 e 3 do blog.Agora vamos direcionar essa classe neste documento CSS para tornar seu texto maiúsculo, adicionar espaço entre as letras do link "Ler Próximo Blog Post", e fazer o "Obrigado por visitar este site de blogs!"flutuar ao lado do link "Ler Próximo Blog" "em vez de sob ele (por padrão).

Para atingir essas modificações, adicionaremos o seguinte pedaço de código à parte inferior do documento CSS:

#ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;}

Etapa 9: Lembre-se quando adicionamos esse ID para a tag aninhada entre nossas tags de abertura e fechamento em nosso documento index.html na parte 1?Fizemos isso para que pudéssemos entender melhor como os IDs funcionam e como segmentar-os no CSS.Aqui vamos nós!Primeiro, digite o seguinte código na parte inferior do nosso documento Style.css:

#ThankYou { text-transform: uppercase; color: #0b053f;}

Agora, vou explicar.Primeiro de tudo, a hashtag na frente de "Obrigado" diz ao navegador que este é um id.Dando apenas o

tag no índice.html O ID "Thankyou" e direcionando esse ID em CSS para fazer o texto desse parágrafo específico Tudo maiúsculo e azul da marinha, garantimos que apenas o parágrafo no rodapé da página inicial seja alterado dessa maneira.Os mesmos parágrafos nos rodapés das páginas da Web para postos de blog 1, 2 e 3 não serão maiúsculas e não serão aquela cor azul marinho.Vá em frente e verifique suas páginas da Web para ver esta distinção para si mesmo depois de adicionar o código acima à página do seu estilo.CSS.

Nosso documento CSS agora terá a seguinte aparência:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);} .ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;} #ThankYou { text-transform: uppercase; color: #0b053f;}

Passo 10!

Oh espere!Primeiro, um "P.S."

P.S.Não consigo enfatizar isso: em sites mais complexos, classes, tags e IDs são críticos e são usados com muita frequência.

Ok, AGORA para a etapa 10!

Etapa 10: Teste seu site atualizado e páginas da web!Vá para o seu arquivo Explorer, clique com o botão direito do mouse no arquivo "index.html" e clique em "Abrir com".Em seguida, selecione seu navegador de Internet preferido (eu recomendo Google Chrome).Clique no botão "Ler Blog Post" e observe as alterações que fizemos em nossas páginas da Web com CSS.

Pagina inicial

Postagem de blog 1 página da web

Página da web da postagem 2 do blog

Página da web da postagem 3 do blog

CSS Colorful Canvas

No fechamento, o CSS faz sites mais esteticamente agradáveis e dinâmicos. Esperamos que você tenha sido capaz de lucrar com esta série de blog tutorial até agora, e esperamos continuar a desenvolver este site em futuros posts no blog. O plano é tornar nosso site mais interativo e mais elegante à medida que avançarmos. Alerta de spoiler: podemos até jogar um pouco de javascript para a mistura em algum momento. Esperamos que você aproveite o restante da sua semana.

Escrito por Hostwinds Team  /  dezembro 28, 2018