suchen
HeimWeb-FrontendCSS-Tutorial10 wenig bekannte CSS-Techniken_CSS/HTML

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。

如果你得到原作者或原发表网站的授权,可以自由使用本翻译。

1.CSS字体属性简写规则

一般用CSS设定字体属性是这样做的:

font-weight:bold;

font-style:italic;

font-varient:small-caps;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:

...

同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。

补充:对于一个ID,不能这样写

...

也不能这样写

3. CSS border的缺省值

通常可以设定边界的颜色,宽度和风格,如:

border: 3px solid #000

这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。

如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。

也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:

第1行就是显示,第2行是打印,注意其中的media属性。

但 应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。

比如你想整个卖东西的图标,你就用了这个图片:

Buy widgets

这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:

Buy widgets

但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

Attention à remplacer la hauteur de l'image par la hauteur de l'image réelle. Ici, l'image sera affichée comme arrière-plan, et comme l'indentation de -2000 pixels est définie, le texte réel apparaîtra à 2000 points sur le côté gauche de l'écran et sera invisible. Mais pour les personnes qui désactivent l’image, elles risquent de ne pas la voir du tout, alors soyez prudent.

6. Une autre technique d'ajustement pour le modèle de boîte CSS

L'ajustement de ce modèle Box concerne principalement les navigateurs IE antérieurs à IE6. Ils comptent la largeur de la bordure et les espaces dans la largeur de l'élément. Par exemple :

#box { largeur : 100px ; bordure : 5px ; remplissage : 20px }

Appelez-le comme ceci :

...

La largeur totale de la boîte devrait désormais être de 150 points, ce qui est correct sur tous les navigateurs sauf IE avant IE6. Mais sur les navigateurs comme IE5, sa largeur totale est toujours de 100 points. Cette différence peut être gérée en utilisant la méthode d'ajustement Box inventée par les personnes précédentes.

Mais le même objectif peut être atteint en utilisant CSS pour les rendre cohérents.

#box {largeur : 150px } #box div { bordure : 5px; remplissage : 20px }

Appelez comme ceci :

...

De cette façon, quel que soit le navigateur, la largeur est de 150 points.

7. Alignez les éléments du bloc au centre

Si vous souhaitez créer une page Web de largeur fixe et que vous souhaitez que la page Web soit centrée horizontalement, elle ressemble généralement à ceci :

#content { largeur : 700px ; marge : 0 auto }

Vous utiliseriez

pour entourer tous les éléments. C'est simple, mais pas suffisant, et les versions antérieures à IE6 n'afficheront pas cet effet. Modifiez le CSS comme suit :

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

Cela centrera le contenu de la page Web, j'ai donc ajouté

au contenu.

alignement du texte : gauche .

8. Utilisez CSS pour gérer l'alignement vertical

L'alignement vertical peut être facilement réalisé à l'aide de tables. Il suffit de régler l'unité de table en alignement vertical : au milieu. Mais cela ne sert à rien avec CSS. Si vous souhaitez définir une barre de navigation d'une hauteur de 2 em et que le texte de navigation soit centré verticalement, la définition de cet attribut est inutile.

Qu'est-ce que la méthode CSS ? Au fait, définissez la hauteur de ligne de ces mots sur 2em : line-height : 2em et c'est tout.

9. Positionnement CSS au sein du conteneur

L'un des avantages du CSS est que vous pouvez positionner un élément arbitrairement, même dans un conteneur. Par exemple, pour ce conteneur :

#conteneur { position : relative }

De cette façon, tous les éléments du conteneur seront positionnés relativement. Vous pouvez l'utiliser comme ceci :

Si vous souhaitez localiser 30 points à partir de la gauche et 5 points à partir du haut, vous pouvez faire ceci :

#navigation { position : absolue ; gauche : 30px ; haut : 5px }

Bien sûr, vous pouvez aussi faire ceci :

marge : 5px 0 0 30px

Notez que l'ordre des 4 nombres est : haut, droite, bas, gauche. Bien sûr, il est parfois préférable de privilégier le positionnement plutôt que les marges.

10. Couleur de fond directement en bas de l'écran

Le contrôle dans le sens vertical dépasse les capacités du CSS. Si vous souhaitez que la barre de navigation aille directement en bas de page comme la barre de contenu, utiliser un tableau est très pratique, mais si vous n'utilisez que du CSS comme ceci :

#navigation { arrière-plan : bleu ; largeur : 150px }

Une barre de navigation plus courte n'ira pas directement vers le bas, elle se terminera lorsque le contenu se terminera à mi-chemin. Ce qu'il faut faire?

Malheureusement, la seule façon de tricher est d'ajouter une image d'arrière-plan à la colonne la plus courte, avec la même largeur que la largeur de la colonne, et de lui donner la même couleur que la couleur d'arrière-plan définie.

corps { background: url(blue-image.gif) 0 0 répétition-y }

Vous ne pouvez pas les utiliser comme unité pour le moment, car l'astuce sera alors révélée une fois que le lecteur aura modifié la taille de la police, et vous ne pourrez utiliser que px.

Source originale :
http://blog.csdn.net/zhoujian2003/archive/2006/04/28/696012.aspx

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Wie wir Google -Schriftarten getaggt und Goofonts.com erstellt habenWie wir Google -Schriftarten getaggt und Goofonts.com erstellt habenApr 12, 2025 pm 12:02 PM

Goofonts ist ein Nebenprojekt, das von einer Entwicklerin und einem Designer-Ehemann signiert wurde, beide große Fans der Typografie. Wir haben Google markiert

Zeitlose Web -EntwicklerartikelZeitlose Web -EntwicklerartikelApr 12, 2025 am 11:44 AM

Pavithra Kodmad bat die Menschen um Empfehlungen zu den Angaben, die sie für einige der zeitlossten Artikel über Webentwicklung hielten, die ihre verändert haben

Der Deal mit dem AbschnittselementDer Deal mit dem AbschnittselementApr 12, 2025 am 11:39 AM

Zwei Artikel veröffentlichten genau den selben Tag:

Üben Sie GraphQL -Abfragen mit dem Status der JavaScript -APIÜben Sie GraphQL -Abfragen mit dem Status der JavaScript -APIApr 12, 2025 am 11:33 AM

Das Erstellen des Erstellens von GraphQL -APIs kann eine große Herausforderung sein. Sie können jedoch lernen, wie Sie GraphQL -APIs in 10 Minuten verwenden! Und es passiert so, dass ich das perfekte bekommen habe

CMSS auf KomponentenebeneCMSS auf KomponentenebeneApr 12, 2025 am 11:09 AM

Wenn eine Komponente in einer Umgebung lebt, in der die Datenabfragen sie in der Nähe leben, gibt es eine ziemlich direkte Grenze zwischen der visuellen Komponente und der

Geben Sie den Typ auf einen Kreis ein ... mit Offset-PfadGeben Sie den Typ auf einen Kreis ein ... mit Offset-PfadApr 12, 2025 am 11:00 AM

Hier ist einige legitime CSS -Tricks von Yuanchuan. Es gibt diesen CSS-Immobilien-Offset-Pfad. Es war einmal, es wurde als Bewegungspfad bezeichnet und dann umbenannt. ICH

Was macht 'Rückkehr' in CSS?Was macht 'Rückkehr' in CSS?Apr 12, 2025 am 10:59 AM

Miriam Suzanne erklärt in einem Mozilla -Entwickler -Video zu diesem Thema.

Die modernen LiebhaberDie modernen LiebhaberApr 12, 2025 am 10:58 AM

Ich liebe solche Sachen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor