Bem-vindo à nova experiência do Guia de Marcas! Este artigo, bem como Primeiros passos com o guia de marca e Construção e Estilos de marca te ajudarão a migrar seu conteúdo para a nova experiência. As capacidades de edição no seu guia de marca existente desaparecerão em 1 de setembro de 2023. Em 1 de dezembro de 2023, o editor de guia de marcas já não estará disponível.
CSS ou "Cascading Style Sheets" é uma linguagem de design usada pelos desenvolvedores web para criar um visual uniforme e agradável olhar em várias páginas de um site. O HTML determina em grande parte o conteúdo textual, mas o CSS determina a estrutura visual, o layout e a estética do site.
CSS Syntax
A sintaxe CSS consiste em um conjunto de regras. Estas regras têm 3 partes: um seletor, uma propriedade e um valor.
Selector {
propriedade: valor;
}
propriedade: valor;
}
O seletor representa o elemento HTML que você quer estilizar. A propriedade refere-se a um aspecto específico do elemento HTML como cor, família de fontes ou margem. Toda propriedade usada no CSS tem um conjunto de valores aceitos, como por exemplo um código hexadecimal ou um valor de pixel.
O seletor pode ter múltiplas propriedades e pares de valor que são separados por ponto e vírgula. Por exemplo, o seguinte aplicará os valores indicados das propriedades para todas as tags h1:
h1 {
font-family: comic sans;
font-size: 12px;
color: blue;
}
font-family: comic sans;
font-size: 12px;
color: blue;
}
Seletores CSS Comuns
Seletor de tipo CSS
O seletor de tipo CSS seleciona todos os elementos de um tipo específico dentro da página da web.
Aqui estão alguns exemplos de seletores de tipo comum:
- p: Seleciona todas as tags de parágrafos.
- a: Seleciona todos os hiperlinks.
- h1: Seleciona todas as tags h1 do cabeçalho.
- span: Seleciona todas as tags span.
- corpo: Seleciona todos os elementos dentro do corpo da página.
- botão: Seleciona todos os botões da página da web.
- li: Seleciona todos os itens da lista.
Seletor de Classe CSS
Uma classe CSS é um atributo usado para definir um grupo de elementos HTML. Isto permite a customização de vários elementos usando um único seletor. Podemos fazer isso digitando um caractere (.) na frente do nome da classe em nosso CSS. Por exemplo, para alterar a fonte do cabeçalho da amostra e do parágrafo abaixo:
<h1 class="i-am-a-class">header</p>
<p class="i-am-a-class">paragraph</p>
<p class="i-am-a-class">paragraph</p>
Usaríamos o seguinte CSS para direcionar para todos os elementos com uma classe de i-a-classe:
.i-am-a-class {
font-family: helvetica;
}
font-family: helvetica;
}
Seletor de ID CSS
Um id de CSS é um atributo usado para definir um único elemento único na página da Web. Para selecionar um elemento com um id específico, digite um símbolo hash (#) na frente do id. Por exemplo, para alterar a fonte do parágrafo abaixo:
<p id="i-am-an-id">paragraph</p>
Usaríamos o seguinte CSS para direcionar apenas o elemento com uma identificação de i-am-an-id:
#i-am-an-id {
font-family: helvetica;
}
font-family: helvetica;
}
CSS Properties
Propriedades de texto
- font-family: Define a fonte de texto, por exemplo,"Arial" ou "vezes"
- font-size: Define o tamanho da fonte, por exemplo,5px ou 1em
- font-weight: Define o peso da fonte ou "ousa" por exemplo,"negrito" ou 200
- color: Define a cor do texto, por exemplo,blue, #add8e6 ou rgb(135,206,250)
- line-height: Espaço vertical entre linhas, por exemplo,5px ou 1em
- espaçamento: Espaço entre caracteres, por exemplo,5px ou 1em
- word-spacing: Espaço entre palavras, por exemplo,5px ou 1em
Propriedades de fundo
- background-color: Defina a cor de fundo do elemento por exemplo: blue, #add8e6 or rgb(135,206,250)
- background-image: Define uma imagem de fundo baseada na URL, por exemplo url('sample-image.jpg')
- posicionamento de fundo: Define a posição inicial de uma imagem de fundo, por exemplo, centro ou 50%
Propriedades do espaçamento
As seguintes propriedades aceitam leilão, herdar, % ou qualquer unidade CSS de comprimento
- height: Define a altura do elemento
- largura: Define a largura do elemento
- preenchendo: Define o espaço de preenchimento do elemento
- margem: Define o espaço de margem do elemento
Comprimentos e unidades
- px: Pixels (1px = 1/96th de 1 polegada)
- em: Relativo ao font-size do elemento (3 em = 3 vezes o tamanho da fonte atual)
- vw: Relativo a 1% da largura de exibição
- vh: Relativo a 1% da altura da janela de visualização
- %: Relativo ao elemento pai
Procurando elementos usando o Chrome DevTools
O Chrome DevTools é um conjunto de ferramentas de desenvolvedor web construídas diretamente no navegador do Google Chrome. Podemos usar essas ferramentas para localizar rapidamente elementos HTML e estilos CSS existentes em qualquer site.
1. Para acessar o DevTools, você pode clicar com o botão direito na página e selecionar "Inspecionar", ou utilize comandos curtos como Command+Option+C (Mac) ou Control+Shift+C (Windows, Linux, Chrome OS).
2. Depois que o painel DevTools estiver aberto, selecione a ferramenta Inspeção no topo da página.
3. Você pode então clicar no elemento da página que deseja estilizar. Os seletores que podem ser usados para personalizar este elemento serão destacados na aba de elementos. A aba de Estilos abaixo irá revelar as regras de estilo CSS que atualmente são aplicadas a esse elemento.
4. Neste exemplo, vamos alterar a cor do link de navegação para #6b646b utilizando a classe "nav-link" que encontramos usando o inspector DevTools. Também adicionaremos o "! mportant" propriedade no final da declaração para sobrescrever todos os estilos anteriores para essa propriedade no elemento.
5. Uma vez que o CSS foi atualizado e as alterações foram salvas, você verá que a cor do texto de navegação foi alterada para #6b646b:
Adicionando fontes de terceiros
@font-face é uma regra de CSS que lhe dá a capacidade de importar e usar fontes de terceiros no seu Brandguide. Recomendamos que você adicione sua fonte via CSS no nível de configuração global (ao contrário do nível do bloco).
Pode adicionar uma fonte de terceiros de duas maneiras.
Pode adicionar uma fonte de terceiros de duas maneiras.
Copiando e colando uma URL
A primeira opção é navegar para a biblioteca de fonte escolhida e selecionar a fonte que você deseja adicionar ao guia de marcas e copiar e colar o url. Este processo está delineado abaixo.
Navegando pelo Brandguide
Você pode copiar a sintaxe abaixo e adicioná-la à seção CSS personalizada do Guia de Marca. Este é o único CSS que você precisará importar a fonte. Para importar uma fonte diferente, basta mudar a fonte familiar, a URL de origem e o formato para a fonte escolhida.
@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}
Encontrando o URL e o formato da fonte:
1. Navegue até sua biblioteca de fonte escolhida e selecione a fonte que deseja adicionar ao seu Guia de Marca. No nosso caso, vamos selecionar "Satisfazer" do Google Fonts.
2. Uma vez selecionado, você precisará copiar e colar o URL de @import em uma nova aba do navegador.
3. Isso levará você a uma página que contém o URL e o formato necessários para importar a fonte para o guia da marca.
4. Copie a URL do src e cole-o no código @fontface juntamente com a família da fonte. Em seguida, cole o código na caixa de CSS. Suas alterações serão atualizadas automaticamente.
Selecione Atualizar CSS para salvar suas alterações.
A fonte recém-importada será preenchida na lista suspensa Typeface padrão nas Configurações Globais.
Convertendo a fonte em um formato WOFF ou WOFF2
A segunda opção de tipo personalizado é converter a fonte em um formato de woff ou woff2. Este é um formato de fonte web que é mais compatível para navegadores do que formatos de arquivo de texto ttf/otf. Este processo está delineado abaixo.
Fontes Proprietárias
1. Converter a fonte em um formato woff ou woff2. Este é um formato de fonte web que é mais compatível para navegadores do que formatos de arquivo de texto ttf/otf.
2. Transfira a fonte em uma seção de arquivos na Biblioteca.
3. Abra o ativo, navegue até a guia embutida e selecione Copiar Link.
4. Navegue até o flyout das configurações globais. Você pode copiar a sintaxe abaixo e adicioná-la à seção CSS do Global Settings flyout. Este é o único CSS que você precisará importar a fonte. Para importar uma fonte diferente, basta mudar a fonte familiar, a URL de origem e o formato para a fonte escolhida. Uma vez que a sintaxe é inserida, suas alterações serão salvas.
@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}
5. Fontes importadas desta forma não irão resultar na apresentação de fontes no menu Typeface padrão. Em vez disso, você precisará aplicar manualmente a fonte dentro da seção CSS. Abaixo está um exemplo de aplicação da fonte da Web em Bold às tags de parágrafos importadas.
p {
font-family: 'boldweb';
color: #333;
}
font-family: 'boldweb';
color: #333;
}
Adicionando vídeo
Você pode adicionar um vídeo ao seu Guia de Marcas seguindo estas etapas:
- Abra o modal de ativos para o vídeo.
- Navegue até a aba Embed.
- Localize o código incorporado do vídeo e selecione Copiar o link.
- Cole o código no bloco HTML.