CSS의 세부 사항에 대한 자세한 설명

다른 글꼴 크기로 설정해야 하는 하위 요소가 있을 때까지 이렇게 작성해도 괜찮습니다. 예를 들어 다음과 같은 태그에:

The cat sat on the mat.

범위의 글꼴 크기를 1.2em으로 설정하려는 경우 , 무엇을 해야 합니까? 계산기를 꺼내서 1.2를 1.4로 나눈 값을 계산합니다. 결과는 다음과 같습니다.

p span { font-size: 0.85714em; }

이 질문은 em에만 국한되지 않습니다. 반응형 유동 레이아웃 웹 사이트를 생성하기 위해 백분율을 사용하고 백분율이 컨테이너와 관련되어 있으므로 요소를 컨테이너의 40%로 정의하려면 높이가 75%이고 너비를 다음으로 설정해야 합니다. 53.33333% .
　분명히 이것은 매우 불편합니다.
루트 관련 길이 단위
　글꼴 크기 정의 문제를 해결하기 위해 이제 단위 rem(루트 em)을 사용할 수 있습니다. Rem 역시 상대 단위이지만 고정된 기본 값에 해당합니다. 이 고정된 기본 값은 문서의 루트 요소(HTML 파일에서는 html 요소)의 글꼴 크기입니다. 이전 예제와 동일하고 글꼴 크기도 10px로 루트 요소의 크기로 설정되어 있다고 가정하면 CSS는 다음과 같이 작성해도 괜찮습니다.

p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

　이 두 CSS 규칙은 루트 요소의 글꼴 크기, 이러한 코드는 특히 10px 또는 12px와 같은 간단한 값을 설정할 때 더욱 우아하고 간단합니다. 이는 rem이 확장 가능하다는 점을 제외하면 px 값을 사용하는 것과 매우 유사합니다.
　전체 글에서 소개한 기능 중 rem 기능은 상대적으로 호환성이 좋고 오페라 모바일을 제외한 IE9 등 고급 브라우저에서도 지원이 가능합니다.
창 관련 길이 단위
퍼센트 문제를 해결할 수 있는 단위 세트가 또 있으면 렘 단위도 멋진 것 같아요. rem과 유사하지만 차이점은 문서의 루트 요소에 상대적인 것이 아니라 장치 창 자체의 크기에 상대적이라는 것입니다.
　이 두 단위는 vh와 vw이며, 이는 창 크기에 상대적인 높이와 너비입니다. 각 단위 앞에는 해당 단위가 나타내는 백분율을 나타내는 숫자가 붙습니다.

p { height: 50vh; }

　 위 예시에서는 높이가 창 높이의 절반으로 설정되어 있습니다. 1vh는 창 높이의 백분율과 동일하므로 50vh는 창 높이의 50%입니다.
　창 크기가 변경되면 이 값도 변경됩니다. 백분율에 비해 이 방법의 장점은 상위 컨테이너에 관계없이 10vw 요소가 항상 창 크기의 10%가 된다는 것입니다.
따라서 vh 또는 vw의 최소값에 해당하는 vmin 단위가 있습니다. 또한 최근 vmax 단위가 사양 문서에 추가될 것이라고 발표되었습니다(아직 출시되지는 않았지만). 기사).
　현재 IE9+, Chrome 및 Safari 6에서 이 기능을 지원합니다.
표현식의 값
반응형 유동 레이아웃 웹 사이트를 만드는 경우 백분율을 사용하여 그리드를 설정하고 고정 픽셀 너비를 사용하여 여백을 설정하는 혼합 단위 문제에 자주 직면하게 됩니다. 예:

p { margin: 0 20px; width: 33%;}

레이아웃이 패딩과 테두리만 사용하는 경우 상자 크기 조정을 사용하여 문제를 해결할 수 있지만 여백에 대해서는 할 수 있는 일이 없습니다. 더 좋고 더 유연한 방법은 calc() 함수를 사용하고 다음과 같이 서로 다른 단위 사이에 수학 방정식을 설정하는 것입니다.

p { margin: 0 20px; width: calc(33% - 40px);}

너비뿐만 아니라 길이도 계산하는 데 사용할 수 있습니다. 필요한 경우 calc() 안에 calc()를 추가할 수 있습니다.
　이 기능은 IE9+와 Firefox에서 모두 지원됩니다. Firefox에서는 -moz- 접두사를 추가해야 합니다(버전 16 또는 17에서는 접두사를 추가할 필요가 없을 수도 있음). Chrome과 Safari도 지원하지만 -를 추가해야 합니다. 웹킷- 접두사. 그러나 모바일 웹킷은 아직 이를 지원하지 않습니다.
글꼴 라이브러리에서 일부 글꼴 로드
뛰어난 성능이 중요한 경우가 많습니다. 특히 시중에 나와 있는 다양한 모바일 장치로 인해 연결 속도의 차이와 불확실성이 발생하므로 이러한 중요성이 더욱 반영됩니다. 페이지 로딩 속도를 높이는 방법 중 하나는 외부 파일 수를 줄이는 것입니다. 이를 위해 유니코드 범위인 @font-face의 새로운 속성이 탄생했습니다.
　이 속성은 인코딩 글꼴의 매개변수 범위를 나타내는 unicode-range(인코딩 범위)입니다. 외부 파일을 로드할 때 전체 글꼴 라이브러리가 아닌 사용된 글꼴만 로드됩니다. 아래 코드는 foo.ttf 글꼴 라이브러리에서 세 가지 글꼴만 로드하는 방법을 보여줍니다.

@font-face {font-family: foo;src: url(‘foo.ttf’);unicode-range: U+31-33;}

　　这点对于使用字体图标的页面尤其有用。我测试过，使用unicode-range，加载字体文件的时间平均减少了0.85秒，也不是小数目了。当然，你可能不会这么想。 
　　这个属性，目前可以在IE9+、Webkit浏览器（如Chrome和Safari）中运行。 
新的伪类 
　　单位和值都应该好好利用，但是，让我更兴奋的是选择器和伪类。完善的选择器模式，即使只有少数浏览器支持，都让我兴奋不已。引用乔布斯的话：你要把栅栏的里面修得和外面一样漂亮，即使别人看不到里面——因为你自己知道。 
　　我第一次使用:nth-of-type()的时候，简直是一次突破，就像我冲出了思想的桎梏。好吧，我有些夸张了。但有些新的CSS伪类，确实值得狂热一番。 
否定伪类 
　　你大概不知道 :not() 伪类的好，除非你亲自实践一番。带有参数的 :not() 其实就是普通的选择器——不是复合选择器。一组元素加上选择器 :not()，表示满足这个参数的元素会被排除出去。听起来有些复杂吧？但是实际上非常简单。 
　　假设：要对项目列表的奇数行进行选择，但是最后一行除外。如果是以前，需要这样写： 

li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

　　现在，通过设定:last-child作为否定伪类的参数，就可以把最后一个元素排除，这样少了一行代码，从而更加的简洁和易维护。 

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

　　否定伪类看起来并没有什么惊人之处，你可以不用它，但是它还是挺实用的。我曾经把它用在基于Webkit的项目当中，优势还是挺明显的。说实话，它是我最喜欢的伪类之一。 
　　是的，我有最喜欢的伪类。 
　　在本文提到的特性当中，否定伪类是兼容性最好的，它被IE9+和高级浏览器支持（不需要加浏览器产商前缀）。如果你熟悉jQuery，你可能习惯用它——版本1.0开始就有了，以及相似的not()方法。 
“适用于”伪类 
　　:matches() 伪类可以用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。太棒了！但是，它能做什么？ 
　　:matches() 伪类最强大的地方就是聚合多行选择器。例如，要选择父容器里面其中几个不同子容器里面的p元素，在这之前，代码或许会写成这样： 

.home header p,.home footer p,.home aside p {color: #F00;}

　　有了:matches()伪类，就可以把共同点提取出来，缩减代码量。该例子里面，选择器的共同点是以home为起点、以p为终点，所以可以用:matches()把中间的所有元素集合起来。是不是有些困惑？看看代码就明白了： 

.home :matches(header,footer,aside) p { color: #F00; }

　　这其实是CSS4的一部分（确切地说，是CSS选择器第四等级），这份规范文档还提到将会有类似的语法（以逗号隔开的复合选择器）应用于:not()伪类。兴奋ing！ 
　　目前，:matches()可以在Chrome和Safari浏览器中运行，但是要加上前缀-webkit-，Firefox也支持，但是要按照旧的写法:any()，同时要加上-moz-前缀。 

위 내용은 CSS의 세부 사항에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!