CSS - cunhapaulo/Referencecard GitHub Wiki

Imagem de fundo pela TAG

section.chapter {
  position: relative;
  z-index: 1;
  color: var(--marpx-theme-chapter-h1-font-color); /* Garante que o texto tenha cor */
  background-color: #111622;

}

section.chapter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://cunhapaulo.github.io/assets/pattern05.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.1; /* Aplica transparência apenas ao fundo */
  z-index: -1; /* Coloca o fundo atrás do texto */
}

Colors

Programação em CSS

Alternativas para tag de imagem:

  • Código:
img[alt~="center"] {
    display: block;
    margin: 0 auto;
}
  • Exemplo de uso:
![center](https://www.... name.jpg)

Nova tag de formatação de trecho <span>:

  • Código:
<style>
  .texto-italico-amarelo {
    font-style: italic;
    color: yellow;
  }
</style>
  • Exemplo de uso:
<p>Este texto não está estilizado. 

   <span class="texto-italico-amarelo">
      Este texto está em itálico e amarelo
   </span> e este texto novamente não está estilizado.

</p>

Outra forma, criando seletores:

  • Código:
<style>
  i {
    font-style: normal; /* Remove o itálico */
    color: green;      /* Define a cor do texto como verde */
  }

  i.destaque {
    font-weight: bold; /* Deixa o texto em negrito */
  }
</style>
  • Exemplo de uso:
  <p>Este é um texto normal.</p>
  <i>Este texto está em itálico (padrão).</i>
  <p>Este é outro texto normal.</p>

  <i class="destaque">Este texto em itálico está em negrito.</i>

  <p>Este é outro texto normal.</p>
  <i>Este texto em itálico é verde.</i>

Fonts provider in internet

https://www.cdnfonts.com/oak-sans.font

How-to embed fonts in a CSS file

  1. Start by defining the @font-face rule and give it a name. Inside the rule, specify the font-family property with the desired name for your font.
@font-face {
  font-family: MyCustomFont;
}
  1. Specify the source of the font file using the src property. You can provide the path to a local font file or a URL to a font hosted online. Make sure to include different file formats to support cross-browser compatibility.
@font-face {
  font-family: MyCustomFont;
  src: url('path/to/font.ttf') format('truetype'),
       url('path/to/font.woff') format('woff'),
       url('path/to/font.eot') format('embedded-opentype');
}
  1. Once you have defined the @font-face rule, you can use the specified font-family name in your CSS styles to apply the embedded font to specific elements.
body {
  font-family: MyCustomFont, Arial, sans-serif;
}

In this example, the font specified in the @font-face rule will be applied to the body element, and if the font is not available, it will fallback to Arial and then to a generic sans-serif font.

Back to the beginning

⚠️ **GitHub.com Fallback** ⚠️