CSS에는 많은 기능이 포함되어 있으며 이전에 JavaScript로 수행해야 했던 많은 작업을 수행할 수 있습니다. 매년 새로운 기능이 추가되어 개발이 더 쉬워지고 JavaScript에 대한 의존도가 줄어듭니다. CSS 기능은 CSS의 가장 강력한 기능 중 하나이며, 이 기사에서는 유용하다고 생각되는 몇 가지 기능을 다루겠습니다.
(학습 영상 공유: css 영상 튜토리얼)
attr
함수는 선택한 요소의 속성 값을 가져오는 데 사용됩니다. 속성 이름
, 유형
및 기본값
이라는 세 가지 매개변수를 허용합니다. attr
函数用于获取所选元素的属性值。 它接受三个参数,属性名称
,类型
和默认值
。
语法:
attr( attribute-name <type-or-unit>? [, <fallback> ]? )
事例:
<p data-text="the attr function" data-tooltip="Hi from attr!" class="attr">This text is combined with</p>
css
p::after { content: ' ' attr(data-text); } p.attr:hover::after { content: ' ' attr(data-tooltip); background-color: orange; color: white }
效果:
源码:https://codepen.io/protic_milos/pen/GRpYJKd
这个函数使我们能够计算CSS值,而不是指定确切的值。通常用于计算元素的大小或位置。它支持加法、减法、乘法和除法。
需要特别注意重要一点是+
和-
运算符必须用空格隔开,不然无法正常工作。*
和/
运算符不有这限制,但出于一致性的考虑,建议添加空格。
另外,很棒的是,我们可以混合CSS单位,例如,我们可以减去百分比和像素。
我们可以用calc
构建一个带有居中元素的示例:
<p class="calc">Centered with calc</p>
css
p.calc { padding: 10px; background-color: orange; color: white; width: 200px; text-align:center; margin-left: calc(50% - 100px) }
效果:
源码:https://codepen.io/protic_milos/pen/GRpYJKd
通过这个函数,我们可以使用一个自定义属性的值作为另一个CSS属性的值。简单地说,我们可以定义一个颜色,例如,将它放在自定义属性(CSS变量)中,然后通过调用var
函数重用该属性值。
与CSS变量一起,该函数提高了可维护性并减少了重复。一个用例是为网站创建主题。
此函数接受两个参数,即自定义属性和一个默认值,如果出现问题,将使用它们。
:root { --bg-color: green; --color: white } p.var { background-color: var(--bg-color); color: var(--color) }
效果:
源码:https://codepen.io/protic_milos/pen/GRpYJKd
就我个人而言,我从未使用过这种方法,但它看起来是很有趣。这个函数返回指定计数器的当前值,需要与 counter-reset
和counter-increment
配合使用。
我们可以用它来计算其他元素,比如有序列表。
<div> <span>Mars</span> <span>Bounty</span> <span>Snickers</span> </div>
源码:https://codepen.io/protic_milos/pen/GRpYJKd
这个函数创建一个圆形区域来屏蔽它所应用的元素。你可以指定它的半径和位置。通常与图像一起使用来创建圆角形状。此函数是clip-path
<img alt="5가지 유용한 CSS 기능(공유)" >예:
img.circle { clip-path: circle(30%); }css
rrreee 효과:
calc()
이 함수를 사용하면 CSS 값을 계산할 수 있습니다. , 정확한 값을 지정하는 대신. 일반적으로 요소의 크기나 위치를 계산하는 데 사용됩니다. 덧셈, 뺄셈, 곱셈, 나눗셈을 지원합니다. 중요한 점은 +
및 -
연산자를 공백으로 구분해야 한다는 것입니다. 그렇지 않으면 제대로 작동하지 않습니다. *
및 /
연산자에는 이러한 제한이 없지만 일관성을 위해 공백을 추가하는 것이 좋습니다.
calc
를 사용하여 중앙 요소가 있는 예제를 만들 수 있습니다: 🎜rrreee🎜css🎜rrreee🎜효과: 🎜🎜🎜🎜🎜🎜소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜 var ()🎜🎜이 함수를 통해 사용자 정의 속성의 값을 다른 CSS 속성의 값으로 사용할 수 있습니다. 간단히 말해서 색상을 정의할 수 있습니다. 예를 들어 이를 사용자 정의 속성(CSS 변수)에 넣은 다음 var
함수를 호출하여 속성 값을 재사용할 수 있습니다. 🎜🎜CSS 변수와 함께 이 기능은 유지 관리성을 향상시키고 중복을 줄입니다. 한 가지 사용 사례는 웹사이트용 테마를 만드는 것입니다. 🎜🎜이 함수는 사용자 정의 속성과 문제가 발생할 경우 사용되는 기본값이라는 두 가지 매개변수를 허용합니다. 🎜rrreee🎜효과: 🎜🎜🎜🎜🎜🎜소스코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜counter()🎜🎜개인적으로 이 방법을 사용해본 적은 없지만 재미있어 보이네요. 이 함수는 지정된 카운터의 현재 값을 반환하며 counter-reset
및 counter-increment
와 함께 사용해야 합니다. 🎜🎜순서가 지정된 목록과 같은 다른 요소를 계산하는 데 사용할 수 있습니다. 🎜rrreee🎜🎜🎜 🎜🎜소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜circle()🎜🎜이 함수는 적용되는 요소를 마스크하기 위해 원형 영역을 만듭니다. 반경과 위치를 지정할 수 있습니다. 둥근 모양을 만들기 위해 이미지와 함께 자주 사용됩니다. 이 함수는 clip-path
속성의 값입니다. 🎜🎜또한 원 외에도 타원과 다각형 모양도 만들 수 있다는 점을 언급할 가치가 있습니다. 🎜rrreee🎜css🎜rrreee🎜🎜🎜🎜🎜🎜소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜Summary🎜🎜앞서 여러 번 언급했듯이 개발자들은 가능성 없이 무시하는 경우가 많습니다. CSS, 웹사이트의 단순함이 사라졌습니다. 매년 우리는 필요한 디자인 기능을 제공하기 위해 CSS에 의존할 수 있습니다. 정말 좋은 일입니다. JavaScript는 디자인 대신 다른 것에 집중해야 합니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜위 내용은 5가지 유용한 CSS 기능(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!