다양한 CSS
E por ser um problema recorrente, os criadores de pre-processadores CSS como o SASS adicionaram variáveis, mas o uso do SASS, por example, adiciona mais um passo de processamento. 그래서, 다양한 CSS로 포럼 크리에이더를 사용하고 기본 단순함을 사용할 수 있습니다.
Desenvolvi um pequeno projeto apenas para demonstrar como declarar as variáveis e utilizá-las.
문서 작성 HTML
<body>
<div class="container">
<main class="children">
<h2>Variáveis CSS</h2>
<blockquote cite="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties">Variáveis CSS são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo do documento. São configuradas usando esta notação (ex: --cor-principal: black; ) e são acessadas usando a funcão var() (ex: color: var(--cor-principal); )</blockquote>
</main>
</div>
</body>
Como declarar as variáveis do arquivo CSS
variáveis são declaradas na pseudo-classe :root, como no example abaixo.
:root {
--background: #700353;
--background-alternative: #ffbfb7;
--text-color: #320d6d;
--h2-font-size: 3.8rem;
--blockquote-font-size: 1.6rem;
--border-radius: 10px;
--padding: 4rem;
}
E como eu posso usar as variáveis declaradas?
Para usar as variáveis é bastante simples, basta colocar var(nome-da-variável) no valor da propriedade.
.children {
width: 50rem;
height: 50rem;
background: var(--background-alternative);
text-align: center;
padding: var(--padding);
color: var(--text-color);
border-radius: var(--border-radius);
}
.children h2 {
font-size: var(--h2-font-size);
}
프로젝트 미리보기
O link com o codigo completeto no github é esse aqui .
Minhas redes:
폰테:
MDN
Espero ter ajudado a tornar seu desenvolvimento mais fácil e rápido.
Reference
이 문제에 관하여(다양한 CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/isaacjbs/variaveis-css-5ckb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
