북마크할 가치가 있는 12가지 CSS 팁! !-CSS 튜토리얼-php.cn

북마크할 가치가 있는 12가지 CSS 팁! !

青灯夜游

풀어 주다： 2021-11-09 10:33:49

앞으로

1430명이 탐색했습니다.

이 기사에서는 수집할 가치가 있는 12가지 CSS 팁을 공유합니다. 중요한 순간에 생명을 구할 수 있으므로 기억해 두세요! 모두에게 도움이 되기를 바랍니다!

북마크할 가치가 있는 12가지 CSS 팁! !

1. Shape-outside를 사용하여 플로팅 이미지 주위에 텍스트를 곡선으로 만듭니다.

모양을 설정할 수 있는 CSS 속성입니다. 또한 텍스트가 흐르는 영역을 정의하는 데도 도움이 됩니다. CSS 코드:

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

로그인 후 복사

2. Magic Combination

이 작은 조합은 실제로 HTML에서 발생하는 대부분의 레이아웃 오류를 방지할 수 있습니다. 우리는 가로 슬라이더나 절대 위치 항목이 원하는 대로 작동하는 것을 원하지 않으며 모든 곳에서 임의의 여백과 패딩을 원하지 않습니다. 여기 당신의 마법의 조합이 있습니다.

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

로그인 후 복사

때때로 "display:block"은 유용하지 않지만 대부분의 경우 <a> 和 <span>를 다른 블록과 마찬가지로 블록으로 처리합니다. 따라서 대부분의 경우 실제로 도움이 될 것입니다!

3. HTML과 CSS 분리

이것은 "워크플로" 유형의 기술에 가깝습니다. 개발하는 동안 다른 CSS 파일을 만들고 마지막에만 병합하는 것이 좋습니다. 예를 들어 하나는 데스크톱용, 하나는 모바일용 등입니다. 마지막으로, 이를 병합해야 웹 사이트에 대한 HTTP 요청 수를 최소화하는 데 도움이 됩니다.

HTML에도 동일한 원칙이 적용됩니다. Gatsby와 같은 SPA 환경에서 개발하지 않는 경우 PHP를 사용하여 HTML 코드 조각을 포함할 수 있습니다. 예를 들어 탐색 모음, 바닥글 등을 포함하는 "/modules" 폴더를 별도의 파일로 유지하려고 합니다. 따라서 변경해야 하는 경우 모든 페이지에서 편집할 필요가 없습니다. 모듈성이 높을수록 결과가 더 좋습니다.

4. ::Initial Letter

블록 수준 요소의 첫 글자에 스타일을 적용합니다. 따라서 우리는 인쇄 잡지나 종이 잡지에서 익숙한 효과를 가져올 수 있습니다. 이 의사 요소가 없으면 이 효과를 얻으려면 많은 범위를 만들어야 합니다. 예:

이 작업은 어떻게 수행되나요? 코드는 다음과 같습니다:

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

로그인 후 복사

5. 네 가지 핵심 속성

CSS 애니메이션은 많은 수의 속성 사이를 원활하게 전환하는 비교적 간단한 방법을 제공합니다. 좋은 애니메이션 인터페이스는 부드럽고 매끄러운 경험에 달려 있습니다. 애니메이션 타임라인에서 우수한 성능을 유지하려면 애니메이션 속성을 다음 4개 코어로 제한해야 합니다. – 변환: 변환 또는 상자 그림자의 애니메이션이 브라우저 그리기 방법에 영향을 줍니다. 이 모든 것이 FPS(FramesPerSecond)를 크게 줄여줍니다. 이러한 속성을 사용하여 몇 가지 흥미로운 효과를 생성할 수 있지만 좋은 성능을 유지하려면 주의해서 사용해야 합니다.

일관성을 유지하는 좋은 방법은 CSS 변수나 전처리기 변수를 사용하여 애니메이션 타이밍을 미리 정의하는 것입니다.
```
:root{ timing-base: 1000;}
```
로그인 후 복사
7. 원뿔형 그라데이션

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

로그인 후 복사

8. 텍스트 선택 색상 변경

::selection을 사용합니다. 텍스트 강조 색상을 선택한 색상으로 바꾸기 위해 브라우저 수준에서 재정의되는 의사 요소입니다. 커서로 콘텐츠를 선택하면 효과를 확인할 수 있습니다.
```
::selection {
     background-color: #f3b70f;
 }
```
로그인 후 복사

호버 효과는 일반적으로 버튼, 텍스트 링크, 사이트의 블록 섹션, 아이콘 등에 사용됩니다. 누군가가 위에 마우스를 올렸을 때 색상을 변경하려면 동일한 CSS를 사용하고

:hover

를 추가하고 스타일을 변경하세요. 방법은 다음과 같습니다.

.m h2{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h2:hover{ 
    color:#f00; 
}

로그인 후 복사

누군가가 위에 마우스를 올리면 h2 태그의 색상이 검은색에서 빨간색으로 변경됩니다. 글꼴 크기나 두께를 변경하고 싶지 않은 경우 다시 선언할 필요가 없기 때문에 유용합니다. 지정한 속성만 변경됩니다.

10. Drop Shadow

투명한 이미지에 더 나은 그림자 효과를 적용하려면 이 속성을 추가하세요. 주어진 코드 줄을 사용하여 이 작업을 수행할 수 있습니다.

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }

로그인 후 복사

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}

로그인 후 복사

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：

<div class="center h-48">
  <div></div>
</div>

로그인 후 복사

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

로그인 후 복사

首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性：