Die umfassendsten gängigen Techniken für die CSS-Entwicklung

CSS (Cascading Style Sheets) ist eine Computersprache, die zum Ausdrücken von Dateistilen wie HTML (eine Anwendung der Standard Generalized Markup Language) oder XML (eine Teilmenge der Standard Generalized Markup Language) verwendet wird. CSS kann Webseiten nicht nur statisch ändern, sondern auch mit verschiedenen Skriptsprachen zusammenarbeiten, um verschiedene Elemente von Webseiten dynamisch zu formatieren. CSS kann das Layout von Elementpositionen in Webseiten präzise auf Pixelebene steuern, unterstützt fast alle Schriftgrößen und -stile und verfügt über die Möglichkeit, Webseitenobjekte und Modellstile zu bearbeiten.

Vorteile der Verwendung von CSS-Abkürzungen

Die Verwendung von Abkürzungen kann dazu beitragen, die Größe Ihrer CSS-Dateien zu reduzieren und sie leichter lesbar zu machen.

Definieren Sie explizit Einheiten, es sei denn, der Wert ist 0, sowie px- und em-Unterscheidungen.

Das Vergessen, die Größeneinheit 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. Die px-Einheit eignet sich für feste Layouts wie 960Grid. em eignet sich für flüssige Layouts.

Verwenden Sie line-height für die vertikale Zentrierung und experimentelle Demonstration des Unterschieds zwischen line-height und height

line-height:24px; Wenn Sie einen Container mit fester Breite verwenden und eine Zeile benötigen vertikal zentriert sein, Zeilenhöhe verwenden Das war's (die Höhe ist die gleiche wie der Container der übergeordneten Ebene.

Syntax:

 line-height : normal | length

Parameter:

normal: Standard Zeilenhöhe

Länge: Prozentzahl, bestehend aus einer Gleitkommazahl und einer Einheitenkennung. Der Prozentwert basiert auf der Höhendimension der Schriftart
Beschreibung:
Die Zeilenhöhe des Objekts abrufen oder festlegen. Das heißt, den Abstand zwischen dem unteren Rand der Schriftart und dem oberen Rand der Schriftart. Wenn sich mehrere Objekte in der Zeile befinden, kann die maximale Zeilenhöhe nicht angegeben werden sei negativ.

<div style="line-height:24px; border:2px; border-style:dashed; margin:">
使用 line-height 垂直居中<br />
使用 line-height 垂直居中<br />
使用 line-height 垂直居中<br />
使用 line-height 垂直居中<br />
</div>

löscht den Container-Überlauf:hidden;clear:both-Assoziation

#main {overflow:hidden;clear:both;clear:left;clear: right; overflow kann zum Löschen ähnlich wie der Gesamtcontainer verwendet werden. Es kann je nach tatsächlicher Auswahl verwendet werden: none |right |

Parameter:

>keine: Schwebende Objekte sind auf beiden Seiten erlaubt

beide: Schwebende Objekte sind auf beiden Seiten nicht erlaubt

links: Schwebende Objekte sind auf der linken Seite nicht erlaubt side

right: Schwebende Objekte sind auf der rechten Seite nicht erlaubt. Objektbeschreibung: Der Wert dieses Attributs gibt die Kante an, auf der schwebende Objekte nicht erlaubt sind

div { clear : left } img { float: right }

Syntax: overflow : sichtbar | Wenn der Standardwert explizit deklariert wird, wird das Objekt auf die Größe des Fensters oder Rahmens zugeschnitten, der das Objekt enthält. Und die Einstellung des Attributs „>clip“ ist ungültig.

auto: Dies ist der Standardwert für Schneiden Sie den Inhalt aus und fügen Sie bei Bedarf Bildlaufleisten hinzu.

Ausgeblendet: Inhalte nicht anzeigen, die die Objektgröße überschreiten.

Bildlaufleiste anzeigen Beschreibung:

Abrufen oder Festlegen, wie der Inhalt verwaltet werden soll, wenn der Inhalt des Objekts die angegebene Höhe und Breite überschreitet, wird die Bildlaufleiste ausgeblendet. Wenn bei Tabellen das Attribut „table-layout“ auf „fixed“ gesetzt ist, unterstützt das td-Objekt das Attribut „overflow“ mit dem Standardwert „hidden“. Bei der Einstellung „Ausgeblendet“, „Scrollen“ oder „Automatisch“ werden Inhalte, die die TD-Größe überschreiten, abgeschnitten. Bei der Einstellung „Sichtbar“ wird zusätzlicher Text in die Zellen rechts oder links überlaufen (je nach Einstellung der Richtungseigenschaft). Diese Eigenschaft ist auf MAC-Plattformen ab IE5 verfügbar.

Links nicht umbrechen lassen

a { white-space: nowrap } p { white-space: nowrap } Die oben genannten Einstellungen können das Umbrechen von Links verhindern.

Syntax: Leerzeichen: normal |. pre |. Parameter:

normal: Standardverarbeitungsmethode

pre: Pre in fester Breite anzeigen Schriftart Formatierter Text. Verschmelzen Sie keine Abstände zwischen Wörtern und führen Sie keine Blocksätze durch. Siehe pre-Objekt

nowrap: Erzwingt die Anzeige des gesamten Textes in derselben Zeile, bis das Ende des Textes erreicht ist oder ein br-Objekt gefunden wird. Siehe das Nowrap-Attribut (Eigenschaft) von td, div und anderen Objekten

Beschreibung: Legt die Verarbeitungsmethode von Leerzeichen innerhalb des Objekts fest oder ruft sie ab.

Firefox immer Bildlaufleisten anzeigen lassen

1 html {overflow:-moz-scrollbars-vertical; }

2 body, html {min-height:101%; Wenn der Wert größer als 100 % ist, wird zwangsläufig eine Bildlaufleiste angezeigt.

Zentrieren Sie das Blockelement horizontal

margin-left: auto; margin-right: auto; beachten Sie eine Regel. Im Uhrzeigersinn drehen.

body{text-align: center;🎜>

Dann definieren Sie den inneren Container text-align: left;

Scrollleiste des Explorer-Textbereichs ausblenden

textarea { overflow:auto; }

Exploer Standardmäßig verfügt Textarea über vertikale Bildlaufleisten (fragen Sie mich nicht warum).

Druckseiten festlegen (wenn das Experiment nicht erfolgreich ist und der Effekt nicht sichtbar ist, teilen Sie uns dies bitte mit)

h2 {page-break-before:always; } Das Attribut „page-break-before“. kann den Seitenumbruch beim Drucken einer Webseite festlegen.

Syntax:

Parameter:

auto : 假如需要在对象之前插入页分割符

always : 始终在对象之前插入页分割符

avoid : 避免在对象前面插入页分割符

left : 在对象前面插入页分割符直到它到达一个空白的左页边

right : 在对象前面插入页分割符直到它到达一个空白的右页边 null : 空值。IE5用来取消页分割符设置

说明： 
检索或设置对象前出现的页分割符。 IE5仅支持always值和空白值（null）。 在IE4中此属性不作用于br对象，但是IE5作用。

删除链接上的虚线框

a:active, a:focus {outline:none; }

Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

最简单的 CSS 重置

* {margin: 0; padding: 0 } 如果想“复杂详细”，参考YUI 的做法（还有这里）。

http://developer.yahoo.com/yui/2/

/*CSS reset 示例*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;} 
table{border-collapse:collapse; border-spacing:0;} 
fieldset,img{border:0} 
address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal;font-weight:normal;} 
ol,ul{list-style:none} 
caption,th{text-align:left} 
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal} 
q:before,q:after{ content:''} 
abbr,acronym{border:0}

CSS盒模型以及IE和Firefox盒模型的区别

CSS盒子模型-什么是CSS盒子模型。

认识日常生活中盒子：

常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子，这个是比较具体的盒子。

CSS盒子： 
根据字面我们可以理解，CSS盒子也是装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。这个时候我们对其对象设置高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）,即可实现像盒子一样的长方形、正方形平面盒子。

通常我们这样： 
一组

、等类似这种语法标签组叫1个盒子。因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。所以我们CSS盒子模型因此而得来。

日常使用CSS盒子： 
我们说将什么内容放入一个盒子里，我们就要想到是放入

里，脑海里就要这个概念。 
假如我们说设置一个宽度为100px盒子，我们就要知道如下一个概念：

Css样式代码： 

.yangshi{width:100px;}

对应html代码： 

<div class="yangshi">内容</div>

这个时候我们可以将

<div class="yangshi">内容</div>看作为一个盒子。

CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。只要修改保存着网站格式的CSs样式表文件就町以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。以上就是CSS开发常用的技巧总结，希望在开发上能帮助到大家。

相关推荐：

巧用css代码打造圆角table

css3简单图形绘制教程

html和css中常见的浏览器兼容性问题

Das obige ist der detaillierte Inhalt vonDie umfassendsten gängigen Techniken für die CSS-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!