CSS의 최적화 기술에 대한 일반적인 예제 코드 공유

CSS에서 흔히 사용되는 최적화에 대해 자세히 소개해드리겠습니다! 저희가 그동안 쌓아온 노하우를 서로 수정해주세요.

1. CSS 약어 사용

약어를 사용하면 CSS 파일의 크기를 줄이고 더 쉽게 읽을 수 있습니다. CSS 약어의 주요 규칙은 여기에서는 설명하지 않는 "일반적인 CSS 약어 구문 요약"을 참조하세요.

2. 값이 0이 아닌 이상 단위를 명확하게 정의하세요

크기 단위를 정의하는 것을 잊어버리는 것은 CSS 초보자들 사이에서 흔히 발생하는 실수입니다. HTML에서는 width=100이라고 쓸 수 있지만 CSS에서는 width:100px width:100em과 같이 정확한 단위를 제공해야 합니다. 단위를 정의하지 않는 경우 행 높이와 값 0이라는 두 가지 예외만 있습니다. 또한, 단위 뒤에는 다른 값이 와야 하며, 값과 단위 사이에 공백이 추가되지 않도록 주의해야 합니다.

3. 대소문자 구분

XHTML에서 CSS를 사용할 때 CSS에 정의된 요소 이름은 대소문자를 구분합니다. 이 오류를 방지하려면 모든 정의 이름에 소문자를 사용하는 것이 좋습니다.

class 및 id의 값은 HTML과 XHTML에서도 대소문자를 구분합니다. 대소문자를 혼합하여 사용해야 하는 경우 CSS의 정의가 XHTML의 태그와 일치하는지 주의 깊게 확인하세요.

4. 클래스 및 ID 이전에 요소 한정을 취소

요소에 대한 클래스 또는 ID를 정의하기 위해 작성할 때 ID는 페이지 내에서 고유하므로 페이지에서 사용할 수 있으므로 이전 요소 한정을 생략할 수 있습니다. . 여러 번 사용되었습니다. 요소를 한정하는 것은 의미가 없습니다. 예를 들어,

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

를

#content { /* declarations */ }
.details { /* declarations */ }

로 쓸 수 있어 일부 바이트가 절약됩니다.

5. 기본값

보통 padding의 기본값은 0이고, 배경색의 기본값은 투명입니다. 그러나 기본값은 브라우저마다 다를 수 있습니다. 충돌이 두려운 경우 스타일 시트 시작 부분에서 모든 요소의 여백 및 패딩 값을 다음과 같이 0으로 정의할 수 있습니다.

* {
margin:0;
padding:0;
}

6. 상속 가능한 값을 반복적으로 정의할 필요가 없습니다. ​

CSS에서는 자식 요소가 자동으로 상속됩니다. 부모 요소에 정의된 색상, 글꼴 등 부모 요소의 속성 값을 반복 정의 없이 자식 요소에 직접 상속할 수 있습니다. 그러나 브라우저가 일부 기본값으로 정의를 재정의할 수 있다는 점에 유의하세요.

7. 가장 가까운 첫 번째 원칙

동일한 요소에 대한 정의가 여러 개 있는 경우 가장 가까운(최소 수준) 정의가 우선 적용됩니다. 예를 들어 CSS 파일에는 다음과 같은 코드가 있습니다. have Defined 요소 p가 정의되고 classupdate

Update: Lorem ipsum dolor set

가 정의됩니다. 이 두 정의에서는 클래스가 p보다 가깝기 때문에 class=update가 사용됩니다. 자세한 내용은 W3C의 "선택기의 특이성 계산"을 확인하세요.

8. 다중 클래스 정의

태그는 동시에 여러 클래스를 정의할 수 있습니다. 예: 먼저 두 가지 스타일을 정의합니다. 첫 번째 스타일의 배경은 #666이고 두 번째 스타일의 테두리는 10px입니다.

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

페이지 코드에서

를 이렇게 호출할 수 있습니다. 최종 표시 효과는 이 div에 #666 배경과 10px 테두리가 있다는 것입니다. 예, 가능합니다. 시도해 볼 수 있습니다.

9. 하위 항목 선택자를 사용하세요

CSS 초보자는 하위 항목 선택자를 사용하는 것이 효율성에 영향을 미치는 이유 중 하나라는 사실을 모릅니다. 하위 선택기를 사용하면 많은 클래스 정의를 저장할 수 있습니다. 다음 코드를 살펴보겠습니다.

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

이 코드의 CSS 정의는 다음과 같습니다.

Item 1
>
Item 1
Item 1

스타일 정의는 다음과 같습니다.

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

하위 선택기를 사용하면 코드와 CSS를 더 간결하고 읽기 쉽게 만들 수 있습니다.

10. 배경 이미지 경로에는 따옴표를 추가할 필요가 없습니다

바이트를 절약하려면 배경 이미지 경로에 따옴표가 필요하지 않기 때문에 따옴표를 추가하지 않는 것이 좋습니다. 예:

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

는

background:url(images/***.gif) #333;

로 쓸 수 있습니다. 따옴표를 추가하면 브라우저 오류가 발생합니다.

11. 그룹 선택기

일부 요소 유형, 클래스 또는 ID에 공통 속성이 있는 경우 그룹 선택기를 사용하면 여러 번 반복되는 정의를 피할 수 있습니다. 이렇게 하면 꽤 많은 바이트를 절약할 수 있습니다.

예: 모든 제목의 글꼴, 색상 및 여백을 정의하려면 다음과 같이 작성할 수 있습니다.

background:url(images/***.gif) #333;

사용 시 독립적인 스타일을 정의해야 하는 개별 요소가 있는 경우 새 정의를 추가하거나 이전 정의를 덮어쓸 수 있습니다. 예:

h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

Twelve. 링크 스타일을 올바른 순서로 지정하세요

CSS를 사용하여 링크의 여러 상태 스타일을 정의할 때 올바른 순서는 다음과 같습니다. :방문함 :호버 :활성. 추출된 첫 번째 문자는 LVHA이며 LoVe HAte(좋아하는 것을 싫어함)로 기억할 수 있습니다. 왜 그렇게 정의되었습니까? Eric Meyer의 "링크 특이성"을 참조할 수 있습니다.

사용자가 키보드를 사용하여 현재 링크의 포커스를 제어하고 알아야 하는 경우 :focus 속성을 정의할 수도 있습니다. :focus 속성의 효과는 글을 쓰는 위치에 따라 달라집니다. 포커스가 있는 요소에 :hover 효과가 표시되도록 하려면 :hover 앞에 :focus를 씁니다. 호버 효과를 사용하려면 :hover 뒤에 :focus를 넣습니다.

13. 부동 소수점 지우기

매우 일반적인 CSS 문제는 부동 소수점을 배치하고 사용할 때 기본 레이어가 부동 레이어로 덮이거나 레이어에 중첩된 하위 레이어가 외부 레이어의 범위를 초과하는 것입니다.

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中?你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

html>body p {
/* 定义内容 */
}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {
/* declarations */
}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：

/* */
* html p {
declarations
}
/* */

2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

十七.调试技巧：层有多大?

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯

위 내용은 CSS의 최적화 기술에 대한 일반적인 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!