Gemeinsamer Beispielcode für die gemeinsame Nutzung von Optimierungstechniken in CSS

Kennen Sie die häufig verwendete CSS-Optimierung? Wir haben einige Erfahrungen gesammelt und können diese hier mit Ihnen teilen.

1. Verwenden Sie CSS-Abkürzungen

Die Verwendung von Abkürzungen kann dazu beitragen, die Größe Ihrer CSS-Datei zu reduzieren und sie leichter lesbar zu machen. Die Hauptregeln der CSS-Abkürzung finden Sie in der „Zusammenfassung der allgemeinen CSS-Abkürzungssyntax“, die hier nicht beschrieben wird.

2. Definieren Sie die Einheiten klar, es sei denn, der Wert ist 0

Das Vergessen, die Maßeinheiten zu definieren, ist ein häufiger Fehler unter CSS-Neulingen. In HTML können Sie einfach width=100 schreiben, aber in CSS müssen Sie eine genaue Einheit angeben, wie zum Beispiel: width:100px width:100em. Es gibt nur zwei Ausnahmen, wenn keine Einheiten definiert werden: Zeilenhöhe und 0-Wert. Außerdem müssen der Einheit weitere Werte folgen. Achten Sie darauf, keine Leerzeichen zwischen dem Wert und der Einheit einzufügen.

3. Groß- und Kleinschreibung beachten

Bei der Verwendung von CSS in XHTML wird bei den in CSS definierten Elementnamen die Groß-/Kleinschreibung beachtet. Um diesen Fehler zu vermeiden, empfehle ich, für alle Definitionsnamen Kleinbuchstaben zu verwenden.

Bei den Werten von class und id wird in HTML und XHTML auch zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie in gemischter Groß- und Kleinschreibung schreiben müssen, stellen Sie bitte sorgfältig sicher, dass Ihre Definition in CSS mit den Tags in XHTML übereinstimmt.

4. Brechen Sie die Elementqualifizierung vor Klasse und ID ab.

Wenn Sie schreiben, um eine Klasse oder ID für ein Element zu definieren, können Sie die vorherige Elementqualifizierung weglassen, da die ID in einem eindeutig ist page , las s können mehrfach auf der Seite verwendet werden. Es macht für Sie keinen Sinn, ein Element zu qualifizieren. Zum Beispiel:

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

kann als

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

geschrieben werden, wodurch einige Bytes eingespart werden können.

5. Standardwert

Normalerweise ist der Standardwert für die Polsterung 0 und der Standardwert für die Hintergrundfarbe ist transparent. Der Standardwert kann jedoch in verschiedenen Browsern unterschiedlich sein. Wenn Sie Angst vor Konflikten haben, können Sie die Rand- und Füllwerte aller Elemente am Anfang des Stylesheets wie folgt auf 0 definieren:

* {
margin:0;
padding:0;
}

6. Dies ist nicht wiederholt erforderlich Definieren Sie vererbbare Werte

In CSS erben untergeordnete Elemente automatisch die Attributwerte des übergeordneten Elements, wie z. B. Farbe, Schriftart usw., die im übergeordneten Element definiert wurden, und können direkt vererbt werden im untergeordneten Element ohne wiederholte Definition. Beachten Sie jedoch, dass der Browser Ihre Definition möglicherweise mit einigen Standardwerten überschreibt.

7. Prinzip „Nächstes erstes“

Wenn es mehrere Definitionen desselben Elements gibt, hat die nächstliegende Definition (Minimalebene) Vorrang. Zum Beispiel gibt es diesen Codeabschnitt

Update: Lorem ipsum dolor set

In der CSS-Datei haben Sie das Element p und ein Classupdate definiert

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

In diesen beiden Definitionen wird class=update verwendet, da die Klasse näher als p ist. Weitere Informationen finden Sie im Artikel „Berechnen der Spezifität eines Selektors“ des W3C.

8. Mehrere Klassendefinitionen

Ein Tag kann mehrere Klassen gleichzeitig definieren. Beispiel: Wir definieren zunächst zwei Stile, der erste Stil hat einen Hintergrund von #666; der zweite Stil hat einen 10-Pixel-Rahmen.

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

Im Seitencode können wir

so aufrufen. Der endgültige Anzeigeeffekt besteht darin, dass dieses Div sowohl einen #666-Hintergrund als auch einen 10-Pixel-Rahmen hat. Ja, das ist möglich, Sie können es ausprobieren.

9. Verwenden Sie Nachkommenselektoren

CSS-Anfänger wissen nicht, dass die Verwendung von Nachkommenselektoren einer der Gründe ist, die ihre Effizienz beeinträchtigen. Unterselektoren können Ihnen dabei helfen, viele Klassendefinitionen zu speichern. Schauen wir uns den folgenden Code an:

Item 1
>
Item 1
Item 1

Die CSS-Definition dieses Codes lautet:

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 */ }

Die Stildefinition lautet:

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

Verwendung Unterauswahl Der Editor kann Ihren Code und CSS prägnanter und leichter lesbar machen.

10. Es ist nicht erforderlich, dem Hintergrundbildpfad Anführungszeichen hinzuzufügen.

Um Bytes zu sparen, empfehle ich, keine Anführungszeichen in den Hintergrundbildpfad einzufügen, da die Anführungszeichen nicht erforderlich sind. Beispiel:

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

kann als

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

geschrieben werden. Wenn Sie Anführungszeichen hinzufügen, führt dies zu einigen Browserfehlern.

11. Gruppenselektoren

Wenn einige Elementtypen, Klassen oder IDs einige Attribute gemeinsam haben, können Sie Gruppenselektoren verwenden, um mehrfache wiederholte Definitionen zu vermeiden. Dadurch können einige Bytes eingespart werden.

Zum Beispiel: Um die Schriftart, Farbe und den Rand aller Titel zu definieren, können Sie schreiben:

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

Wenn es einzelne Elemente gibt, die bei ihrer Verwendung unabhängige Stile definieren müssen, dann Sie kann neue Definitionen hinzufügen, kann alte Definitionen überschreiben, zum Beispiel:

h1 { font-size:2em; }
h2 { font-size:1.6em; }

12. Link-Stile in der richtigen Reihenfolge angeben

Wenn Sie CSS verwenden, um mehrere Zustandsstile eines Links zu definieren. Beim Schreiben , achten Sie auf die Reihenfolge, in der sie geschrieben sind. Die richtige Reihenfolge ist: :link :visited :hover :active. Der erste extrahierte Buchstabe ist LVHA, den Sie sich als LoVe HAte (like to hate) merken können. Warum ist es so definiert? Sie können sich auf Eric Meyers „Link Specificity“ beziehen.

Wenn Ihre Benutzer die Tastatursteuerung verwenden und den Fokus des aktuellen Links kennen müssen, können Sie auch das :focus-Attribut definieren. Die Wirkung des :focus-Attributs hängt auch von der Position ab, an der Sie schreiben. Wenn Sie möchten, dass das fokussierte Element den :hover-Effekt anzeigt, schreiben Sie :focus vor :hover; Hover-Effekt, Sie setzen :focus nach :hover.

13. Floats löschen

Ein sehr häufiges CSS-Problem besteht darin, dass beim Positionieren von Floats die darunter liegende Ebene von der Floating-Ebene abgedeckt wird oder die in der Ebene verschachtelten Unterebenen den äußeren Bereich überschreiten.

通常的解决办法是在浮动层后面添加一个额外元素，例如一个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代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯

Das obige ist der detaillierte Inhalt vonGemeinsamer Beispielcode für die gemeinsame Nutzung von Optimierungstechniken in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!