북마크할 가치가 있는 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></a> 和 <span></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)를 크게 줄여줍니다. 이러한 속성을 사용하여 몇 가지 흥미로운 효과를 생성할 수 있지만 좋은 성능을 유지하려면 주의해서 사용해야 합니다.

6. 일관성을 유지하기 위해 변수 사용
• 일관성을 유지하는 좋은 방법은 CSS 변수나 전처리기 변수를 사용하여 애니메이션 타이밍을 미리 정의하는 것입니다.

  :root{ timing-base: 1000;}

단위를 정의하지 않고 기본 애니메이션이나 전환 기간을 설정하면 calc() 함수에서 이 기간을 호출할 수 있는 유연성이 제공됩니다. 이 기간은 기본 CSS 변수와 다를 수 있지만 항상 이 숫자를 간단하게 수정하고 항상 일관된 환경을 유지합니다.
• 7. 원뿔형 그라데이션
CSS만 사용하여 원형 차트를 만들 수 있는지 궁금한 적이 있나요? 좋은 소식은 실제로 가능하다는 것입니다! 이는 원추형 그라데이션 기능을 사용하여 수행할 수 있습니다. 이 기능은 중심점을 중심으로 회전하는 설정된 색상 전환이 있는 그라데이션으로 구성된 이미지를 생성합니다. 다음 코드 줄을 사용하면 됩니다:

• .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;
   }

9. 호버 효과

호버 효과는 일반적으로 버튼, 텍스트 링크, 사이트의 블록 섹션, 아이콘 등에 사용됩니다. 누군가가 위에 마우스를 올렸을 때 색상을 변경하려면 동일한 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 相关的重要属性：

• display: flex; 这确保父容器具有 flexbox 布局。
• align-items: center; 这可确保 flex 子项与横轴的中心对齐。
• justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！

更多编程相关知识，请访问：编程视频！！

위 내용은 북마크할 가치가 있는 12가지 CSS 팁! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!