CSS2의 일부 숨겨진 고급 속성 사용 요약

counter-increment

주문한 목록이나 기사의 모든 제목에 자동으로 번호가 매겨지기를 바랐던 적이 있나요? 불행히도 아직 CSS3 속성 지원은 없습니다. 그러나 CSS 2.1에서는 역증분(counter-increment)이 해결책을 제공합니다. 이는 이 기능이 몇 년 동안 사용되었으며 IE8에서 지원된다는 것을 의미합니다.

:before 의사 요소 및 콘텐츠 속성을 사용하면 카운터 증가가 모든 HTML 태그에 자동 번호를 추가할 수 있습니다. 중첩된 인코딩도 지원됩니다.

예제

코드 제목을 지정하려면 먼저 계산기를 재설정하세요.

   body {counter-reset: thecounter}

다음 스타일은 각 4a249f0d628e2318394fd9b75b4636b1 제목에 "Section" 접두어를 붙인 다음 그 뒤의 숫자가 자동으로 1씩 증가하도록 합니다(이것이 기본값입니다). 생략 가능), 여기서 카운터는 계산기의 이름입니다:

.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}

Example

중첩된 인코딩 목록의 경우 카운터를 재설정한 다음 중첩되지 않은 c34106e0b4e09414b63b2ea253ff83d6의 자동 인코딩을 끕니다.

ol {
counter-reset: section;
list-style-type: none;
}

그런 다음 각 25edfb22a4f469ecb59f1190150159c6는 자동 번호 매기기로 설정되고 구분 기호는 점(.) 뒤에 공백이 옵니다.

li:before {
counter-increment: section;
content: counters(section,".")"";
}

HTML 코드:

<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 1.1 -->
<li>item</li> <!-- 1.2 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<ol>

브라우저 지원: CSS 2.1, IE 7+.

quotes

CMS가 따옴표 기호를 올바르게 변환하는 방법을 모르기 때문에 막히셨나요? 따라서 quote 속성을 사용하십시오. 이 방법으로 모든 기호를 사용자 정의할 수 있습니다. 그런 다음 :before 및 :after 의사 요소를 사용하여 원하는 요소에 따옴표를 지정할 수 있습니다. 안타깝게도 웹킷 브라우저는 이 속성을 지원하지 않습니다. 테스트 후 Chrome 11에서 이 속성을 지원하기 시작했습니다(이전 버전은 테스트하지 않음).

예

처음 두 기호는 첫 번째 수준 인용 내용에 대한 인용을 결정하고, 마지막 두 기호는 두 번째 수준 인용에 사용되는 식입니다.

q {
quotes: '«' '»' "‹" "›";
}

다음 두 줄은 선택한 내용에 대한 인용을 지정하는 데 사용됩니다. 요소:

q:before {content: open-quote}
q:after {content: close-quote}

이렇게 하면e388a4556c0f65e1904146cc1a846bee1244aa79a84dea840d8e55c52dc97869이것은 매우 1244aa79a84dea840d8e55c52dc97869좋은9c3e8ae475e7f023c5ba43842c1b434e 인용문입니다.9c3e8ae475e7f023c5ba43842c1b434e94b3e26ee717c64999d7867364b1b4a3보라색으로 보일 것입니다:
«이것 매우 인용문입니다.»

브라우저 지원: CSS 2.1., WebKit, IE 7 및 IE6을 제외한 모든 최신 브라우저. 하지만 크롬에서는 이를 지원합니다. . .

질문: 기호를 직접 추가하려면 CSS 문서를 UTF-8로 설정해야 하나요? 이것은 매우 얽힌 질문입니다. 아쉽게도 명확한 답변을 드릴 수는 없습니다. 내 경험에 따르면 특정 문자 집합을 설정할 필요가 없으며 utf-8 문자 집합이 잘못된 문자(예: "»")를 표시하기 때문에 잘못될 수 있습니다. 대신 iso-8859-1 문자 세트를 사용하면 모든 것이 정상이 됩니다.

W3C는 이를 다음과 같이 설명합니다. "이전 예에서 '따옴표'로 정의된 따옴표는 컴퓨터 키보드에 쉽게 배치되므로 고품질 문자에는 다른 10646 문자 집합이 필요합니다.

들어보셨을 것입니다." 하지만 기억하지 못했습니다. 살아있는 CSS3 속성

마지막으로 border-radius 및 box-shadow만큼 널리 사용되지 않고 널리 요구되지 않는 일부 CSS3 속성을 다시 살펴보겠습니다.

text-overflow

아마도 이 문제에 자주 직면하게 될 것입니다. 컨테이너가 내부 텍스트에 비해 너무 작은 경우 자바스크립트를 사용하여 문자열을 자르고 "..." 기호를 추가하여 텍스트 오버플로를 방지해야 합니다.

잊으세요! CSS3 및 text-overflow: ellipsis를 사용하면 텍스트가 컨테이너 너비보다 긴 경우 "..."로 끝나도록 강제할 수 있습니다. 유일한 요구 사항은 Overflow:hidden을 설정하는 것입니다. 아쉽게도 Firefox에서는 이 속성을 지원하지 않지만, 최신 버전에서는 지원될 것으로 보입니다.

Example

div {
width: 100px;
text-overflow: ellipsis;
}

브라우저 지원: CSS 3은 Firefox를 제외한 모든 브라우저의 최신 버전이며, IE는 IE6부터 지원하며, Firefox도 6.0까지 지원한다고 합니다. 그러기를 바랍니다.

word-wrap

텍스트가 좁은 용기에 들어 있으면 일부 내용이 너무 길어서 제대로 포장되지 않을 수 있습니다. 예를 들어 링크는 종종 문제를 일으킵니다. Overflow: Hidden으로 오버플로 텍스트를 숨기지 않으려면 word-wrap을 break-word로 설정하면 문자열이 컨테이너의 너비 제한에 도달할 때 줄 바꿈됩니다.

예

div {
width: 50px;
word-wrap: break-word;
}

브라우저 지원: CSS 3, 모든 최신 브라우저.

resize

Firefox 또는 Chrome을 사용하는 경우 기본적으로 텍스트 상자의 오른쪽 하단에 크기를 조정할 수 있는 작은 핸들이 있다는 것을 눈치채셨을 것입니다. 이 표준 동작은 CSS3 속성 resize:both에 의해 구현됩니다.

하지만 텍스트 영역에만 국한되지는 않습니다. 모든 HTML 요소에 사용할 수 있습니다. 수평 및 수직 값은 조정이 수평인지 수직인지를 제어합니다.

참고: display:block 요소의 경우 Overflow:visible이 설정되면 크기 조정 속성이 유효하지 않습니다(이에 대한 원래 설명은 알 수 없음 - Shenfei 제공).

브라우저 지원: CSS3, Opera 및 IE를 제외한 기타 최신 브라우저.

배경 첨부

当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。

浏览器支持: CSS 3，除了Firefox以外的所有现代浏览器，Firefox是支持background-attachment属性的，只是不支持local值.

text-rendering

随着越来越多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号字体上，文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节，你可以利用text-rendering来启用kerning 和 ligatures。

Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性，而后者，你需要将其设置为optimizeLegibility。

浏览器支持: CSS3, 所有WebKit 和Firefox浏览器.

transform: rotateX/transform: rotateY

如果你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。

但是你是否也知道，它也可以更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。

示例

如果你鼠标经过这个元素，它将会旋转180°，倒转过来:

div:hover {
transform: rotateY(180deg);
}

小技巧:如果只是映射一个元素，你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).

浏览器支持: CSS3, WebKit、firefox、Opera以及IE9

위 내용은 CSS2의 일부 숨겨진 고급 속성 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!