목차
attr()
calc()
var()
counter()
circle()
소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd
웹 프론트엔드 CSS 튜토리얼 5가지 유용한 CSS 기능(공유)

5가지 유용한 CSS 기능(공유)

Jan 21, 2021 am 10:02 AM
html5 javascript 프런트 엔드

5가지 유용한 CSS 기능(공유)

CSS에는 많은 기능이 포함되어 있으며 이전에 JavaScript로 수행해야 했던 많은 작업을 수행할 수 있습니다. 매년 새로운 기능이 추가되어 개발이 더 쉬워지고 JavaScript에 대한 의존도가 줄어듭니다. CSS 기능은 CSS의 가장 강력한 기능 중 하나이며, 이 기사에서는 유용하다고 생각되는 몇 가지 기능을 다루겠습니다.

(학습 영상 공유: css 영상 튜토리얼)

attr()

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: &#39; &#39; attr(data-text);
}

p.attr:hover::after {
  content: &#39; &#39; attr(data-tooltip);
  background-color: orange;
  color: white
}
로그인 후 복사

效果:

5가지 유용한 CSS 기능(공유)

源码:https://codepen.io/protic_milos/pen/GRpYJKd

calc()

这个函数使我们能够计算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)
}
로그인 후 복사

效果:

5가지 유용한 CSS 기능(공유)

源码:https://codepen.io/protic_milos/pen/GRpYJKd

var()

通过这个函数,我们可以使用一个自定义属性的值作为另一个CSS属性的值。简单地说,我们可以定义一个颜色,例如,将它放在自定义属性(CSS变量)中,然后通过调用var函数重用该属性值。

与CSS变量一起,该函数提高了可维护性并减少了重复。一个用例是为网站创建主题。

此函数接受两个参数,即自定义属性和一个默认值,如果出现问题,将使用它们。

:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}
로그인 후 복사

效果:

5가지 유용한 CSS 기능(공유)

源码:https://codepen.io/protic_milos/pen/GRpYJKd

counter()

就我个人而言,我从未使用过这种方法,但它看起来是很有趣。这个函数返回指定计数器的当前值,需要与 counter-resetcounter-increment 配合使用。

我们可以用它来计算其他元素,比如有序列表。

<div class="counter">
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>
로그인 후 복사

5가지 유용한 CSS 기능(공유)

源码:https://codepen.io/protic_milos/pen/GRpYJKd

circle()

这个函数创建一个圆形区域来屏蔽它所应用的元素。你可以指定它的半径和位置。通常与图像一起使用来创建圆角形状。此函数是clip-path

문법:

<img class="circle lazy"  src="/static/imghw/default1.png"  data-src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png"   
  
/>
로그인 후 복사

예:

img.circle {
  clip-path: circle(30%);
}
로그인 후 복사
css

rrreee 효과: 5가지 유용한 CSS 기능(공유)

5가지 유용한 CSS 기능(공유)

소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd

calc()

이 함수를 사용하면 CSS 값을 계산할 수 있습니다. , 정확한 값을 지정하는 대신. 일반적으로 요소의 크기나 위치를 계산하는 데 사용됩니다. 덧셈, 뺄셈, 곱셈, 나눗셈을 지원합니다. 중요한 점+- 연산자를 공백으로 구분해야 한다는 것입니다. 그렇지 않으면 제대로 작동하지 않습니다. */ 연산자에는 이러한 제한이 없지만 일관성을 위해 공백을 추가하는 것이 좋습니다.

🎜또한 좋은 점은 CSS 단위를 혼합할 수 있다는 것입니다. 예를 들어 백분율과 픽셀을 뺄 수 있습니다. 🎜🎜 calc를 사용하여 중앙 요소가 있는 예제를 만들 수 있습니다: 🎜rrreee🎜css🎜rrreee🎜효과: 🎜🎜🎜5가지 유용한 CSS 기능(공유)🎜🎜🎜소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜 var ()🎜🎜이 함수를 통해 사용자 정의 속성의 값을 다른 CSS 속성의 값으로 사용할 수 있습니다. 간단히 말해서 색상을 정의할 수 있습니다. 예를 들어 이를 사용자 정의 속성(CSS 변수)에 넣은 다음 var 함수를 호출하여 속성 값을 재사용할 수 있습니다. 🎜🎜CSS 변수와 함께 이 기능은 유지 관리성을 향상시키고 중복을 줄입니다. 한 가지 사용 사례는 웹사이트용 테마를 만드는 것입니다. 🎜🎜이 함수는 사용자 정의 속성과 문제가 발생할 경우 사용되는 기본값이라는 두 가지 매개변수를 허용합니다. 🎜rrreee🎜효과: 🎜🎜🎜5가지 유용한 CSS 기능(공유) 🎜🎜🎜소스코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜counter()🎜🎜개인적으로 이 방법을 사용해본 적은 없지만 재미있어 보이네요. 이 함수는 지정된 카운터의 현재 값을 반환하며 counter-resetcounter-increment와 함께 사용해야 합니다. 🎜🎜순서가 지정된 목록과 같은 다른 요소를 계산하는 데 사용할 수 있습니다. 🎜rrreee🎜🎜5가지 유용한 CSS 기능(공유)🎜 🎜🎜소스 코드: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 중첩 테이블

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃

HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 정렬 목록

HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML 온클릭 버튼

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자

See all articles