Noções básicas de estilo css para wordpress
Video: Modify Theme CSS with Inspect Element - WordPress
Conteúdo
- Video: modify theme css with inspect element - wordpress
- Seletores css
- Video: html and css for wordpress users
- Classes e identificações
- Propriedades css e valores
- Video: personalización de plantillas de wordpress: truco para editar css
UMA Cascading Style Sheet (CSS) é uma folha em cascata de marcação de estilo que controla a aparência do conteúdo em um site. Cada tema WordPress que você usa no seu blog usa CSS. O CSS fornece estilo e elegância de design para as marcas de modelo em seus modelos. O CSS para seu tema WordPress é puxado através do modelo de cabeçalho (header.php) E é nomeado style.css.
Em seu Painel, clique no link do Editor no menu Aparência e olhar para o modelo de cabeçalho para o Vinte Quatorze WordPress tema clicando no link do cabeçalho na página Editar temas. Você encontrará a seguinte linha de código, o que puxa o CSS (style.css) Na página para fornecer a formatação dos elementos do seu blog:
Não ajustar a linha de código que puxa na style.css file- contrário, o CSS não vai funcionar para o seu blog.
seletores CSS
Com CSS, você pode fornecer estilo para a exibição de elementos em seu blog (como links de texto, imagens de cabeçalho, tamanho da fonte e cores, margens de parágrafo e espaçamento entre linhas). seletores CSS conter nomes, propriedades e valores para definir quais elementos nos modelos HTML você estilo com CSS. seletores CSS são usados para declarar (ou selecione) que parte da marcação do estilo se aplica.
Video: HTML and CSS for WordPress Users
| Selector CSS | Descrição | HTML | CSS |
|---|---|---|---|
| corpo | Define o estilo para o corpo geral do site, tais como fontes e cor de fundo padrão. | body {background-color: white}A cor de fundo em todas as páginas é branco. | |
| p | Define como os parágrafos estão formatados. | Isto é um | p {color: black}A cor das fontes usadas em todos os parágrafos é preto. |
| H1, H2, H3, H4, H5, H6 | Fornece cabeçalhos ousadas para diferentes seções do seu site. | Este é um site | h1 {font-weight: bold-}Uma fonte cercada pela ..tags HTML está em negrito. |
| uma | Define como links de texto exibido em seu site. | href =”https://wiley.com” gt; Wiley Publishing | a {color: red}Todos os links de texto aparecem em vermelho. |
Classes e identificações
Você pode encontrar a folha de estilo (style.css) Para o padrão Vinte Quatorze tema na página Editar Temas em seu Dashboard. Tudo isso pode parecer estranho para você agora, mas chamar a atenção para dois itens que você vê quando você rolar esse modelo:
#conteúdo: Um tipo de seletor CSS. A marca de hash (#) Indica que é um CSS IDENTIDADE.
.singular: Outro tipo de seletor CSS. O período (.) Indica que é um CSS classe.
IDs e classes definir propriedades de estilo para diferentes seções do seu tema WordPress. Dê uma olhada nos exemplos de IDs e classes da header.php template no Vinte Quatorze WordPress tema. Armado com esta informação, você saberá onde procurar na folha de estilo quando você quer mudar o estilo para uma determinada área de seu tema.
| HTML | Selector CSS | Descrição |
|---|---|---|
| Neste caso, o nome do seletor CSS é página. | #página | Styles os elementos para a página identidade em seu modelo (s). |
ID = GT”local-cabeçalho”; | # Local-header | Styles os elementos para a Site-cabeçalho ID em seu modelo (s). |
classe =”local-título” gt; | .titulo do site | Estilos de elementos para a sua titulo do site classe em seu modelo (s), mas também segue regras para a h1 Os valores são ajustados em o CSS. |
class = gt”procurar-toggle”; | .busca-toggle | Estilos de elementos para a sua busca-toggle classe em seu modelo (s). |
id = gt”-navegação primária”; | #Navegação Primária | Styles os elementos para a Navegação Primária ID em seu modelo (s). |
Se você encontrar um elemento no código do modelo que diz identidade (tal como div id = ou p id =), Procure o símbolo de hash na folha de estilo. Se você encontrar um elemento no código do modelo que diz classe (tal como div class = ou p = classe), Procure o período na folha de estilo seguido pelo nome do selector.
propriedades CSS e valores
propriedades CSS são atribuídos ao nome do seletor CSS. Você também precisará fornecer valores para as propriedades CSS para definir os elementos de estilo para o seletor CSS particular que você está trabalhando.
No padrão Vinte Quatorze WordPress tema, a marcação na linha 36 no modelo de cabeçalho (header.php) é . Este ID, com o nome Site-cabeçalho, fornece styling para o cabeçalho do site.
No padrão Vinte Quatorze WordPress estilo tema, o CSS definido para o Site-cabeçalho ID é a seguinte:
# Local-de cabeçalho {posição: parente-índice z: 3-}Cada propriedade CSS deve ser seguido por dois pontos (:), E cada valor CSS tem de ser seguido por um ponto e vírgula (-).
O seletor CSS é # Local-header, que possui duas propriedades:
A primeira propriedade CSS é posição, que tem o valor de relativo-.
A segunda propriedade CSS é z-índice, que tem o valor 3.
Video: Personalización de plantillas de Wordpress: Truco para editar CSS
CSS Property Valor CSS Exemplos cor de fundo Define a cor do plano de fundo (como o vermelho, preto, ou
branco).Markup:
id =”página” gt;
CSS: #page {background-color:
branco}fundo Define uma imagem de fundo. Markup: lt;cabeçalho
id =”banner” gt;
CSS: header # bandeira {background:
url (images / header.jpg) não-repetibilidade}família de fontes Define as fontes usadas para o selector. Markup: CSS: body {font-family: ‘Lucida
Grande’, Verdana, Arial, Sans-Serif-}cor Define a cor do texto. Markup: local na rede Internet
Título
CSS: h1 {color: blue}tamanho da fonte** Define o tamanho da fonte usada para o texto. Markup: local na rede Internet
Título
CSS: h1 {font-size: 18px;}alinhamento de texto Define o alinhamento do texto (esquerda, centro, direita ou
justificado).Markup:
ID = GT”invólucro”;
CSS: #wrapper {text-align:
esquerda;}