Référence rapide CSS2_CSS/HTML

Sejak W3C (The World Wide Web Consortium) merumuskan versi 4.0 kod HTML bernama Cougar, kesan dinamik yang wujud dalam halaman Web telah diiktiraf secara rasmi buat kali pertama W3C telah membahagikan pelaksanaan hiperteks dinamik (Dynamic HTML) kepada tiga bahagian: skrip, penyemak imbas yang menyokong kesan dinamik dan CSS. Anda mungkin sering menggunakan dua yang pertama, tetapi anda mungkin tidak tahu apa itu CSS Jika anda mempunyai pengalaman dalam membuat halaman web, anda mungkin pernah mendengar tentang helaian gaya atau helaian gaya Jika anda tidak pernah mendengarnya, tidak mengapa . Jika anda ingin membuat halaman Web dengan lebih banyak ciri baharu, artikel ini juga sesuai untuk anda.
1. Apakah itu CSS?
CSS ialah singkatan dari Cascading Style Sheet Sesetengah buku menterjemahkannya sebagai "Cascading Style Sheet" atau "Cascading Style Sheet" (selepas ini dirujuk sebagai "Style Sheet" pada tahun 1997, W3C mengumumkan standard HTML4 pada masa yang sama masa. CSS1, standard pertama untuk helaian gaya. Lembaran gaya adalah inovasi utama dalam sintaks HTML sebelumnya (versi HTML sebelum 3.2 Dalam versi HTML sebelumnya, pelbagai fungsi telah dilaksanakan melalui elemen penanda, yang juga menyebabkan pelbagai pengeluar penyemak imbas menyeragamkan kandungan baharu dengan sengaja hanya disokong oleh syarikat anda sendiri. Pelbagai teg boleh bersarang antara satu sama lain untuk mencapai kesan yang berbeza Contohnya, jika anda ingin menukar sebahagian daripada teks menjadi merah dalam perenggan, ia sepatutnya seperti ini dalam HTML3.2: <.>

Teks merah dipaparkan di sini

Dalam helaian gaya, beberapa teg (seperti teg "font" dalam contoh di atas) diatributkan menggunakan helaian gaya, contoh di atas boleh diubah Cheng:

Teks merah ditunjukkan di sini

​
Ist das alles die Funktion von Stylesheets? Weit gefehlt! Wie bereits erwähnt, sind Stylesheets Teil von DHTML. Die eigentliche Bedeutung der Einrichtung von Stylesheets besteht darin, Objekte tatsächlich in HTML einzuführen, sodass Skriptprogramme (wie Javascript und VBScript) zum Aufrufen von Objektattributen und zum Ändern von Objektattributen verwendet werden können Für dynamische Zwecke war dies in früheren HTML-Versionen nicht möglich. Wenn Sie objektorientierte Programmiertools wie VB verwendet haben, werden Sie schnell feststellen, wie einfach es ist, Stylesheets zur Erstellung von DHTML zu verwenden. Ein weiterer Beitrag von Stylesheets besteht darin, verschiedene umständliche Tags in HTML zu vereinfachen, wodurch die Attribute jedes Tags allgemeiner und vielseitiger werden. Stylesheets erweitern die ursprünglichen Tag-Funktionen und können mehr Effekte erzielen. Stylesheets gehen sogar über die Anzeigefunktion des Webs hinaus Seite selbst und erweitert den Stil auf eine Vielzahl von Medien und zeigt einen unwiderstehlichen Charme.​
Seit der CSS1-Version wurde im Mai 1998 die CSS2-Version veröffentlicht und das Stylesheet wurde weiter bereichert. Sowohl Internet Explorer 4 als auch Netscape Navigator 4 bieten Unterstützung für Stylesheets, aber in jeder Hinsicht ist IE4 effektiver als NE4. Dies liegt an der Oberfläche des Der Unterschied zwischen den beiden ist nicht sehr unterschiedlich, aber im Wesentlichen sind sie ziemlich unterschiedlich. Das IE4-Modell kann dynamische Effekte einfacher in Webseiten einführen. Obwohl das IE4-Modell derzeit nur von Microsoft selbst unterstützt wird, wurde es eindeutig geschrieben in den DHTML-Standard des W3C; das Stylesheet von NE4 kann die Eigenschaften von Objekten nicht über Skripte aufrufen. (Netscape hat ein Stylesheet namens J SSS entwickelt, das Javascript zum Definieren von Stilen verwendet, aber vom W3C nicht erkannt wird.)
2. Erfahren Sie mehr über Stylesheets
Cascading in Cascading Style Sheet ist „Cascading“ Das bedeutet, dass im selben Webdokument mehrere Stylesheets vorhanden sein können. Je höher die Priorität, desto mehr Stylesheets werden für die Anzeige verwendet. Aus Sicht der Form des Stylesheet-Einfügens kann es in drei Typen unterteilt werden:
Inline-Stylesheet: Es erleichtert vorhandene HTML-Tags und fügt den durch die Tags gesteuerten Informationen spezielle Stile hinzu, wie im Beispiel gerade.
Eingebettetes Stylesheet: Wie JavaScript kann es in den Header einer HTML-Datei eingebettet werden (zwischen den Tags und

) und mithilfe eines -Containers geladen werden, zum Beispiel: „“ , Dies gilt für alle

-Tags auf der Seite.
Ein externes Stylesheet ist eine extern gespeicherte Stylesheet-Datei. Die externe Datei hat die Erweiterung .CSS, z. B. „“.
Sie können die oben genannten drei Methoden je nach Bedarf während der Anwendung verwenden, in der Praxis werden jedoch häufiger Inline-Stylesheets und eingebettete Stylesheets verwendet.
3. Grammatische Merkmale von Stylesheets
Stylesheets haben ihre eigenen einzigartigen Schreibmethoden. Wenn Sie ihre grammatikalischen Merkmale beherrschen und ihre verschiedenen Eigenschaften verstehen, werden Sie feststellen, dass die Verwendung von Stylesheets in Webseiten wie entspannend ist. Es gibt zum Beispiel das einfachste HTML-Dokument:

Text goes here…

us-Stile können mithilfe eingebetteter Stylesheets angegeben werden.

  

Utilisez
Class et
IDAfficher le contenu.

Où.someclass représente la classe et #someID représente l'ID. Les classes et les ID peuvent également être utilisés avec des balises d'éléments, par exemple :
p.bigFont {...}
signifie que la feuille de style doit être exécutée dans une balise P (
) de la classe bigFont. La même chose est vraie. Convient pour l'identification.
Afin de simplifier les balises qui déclarent certains attributs répétés, vous pouvez utiliser "," pour séparer les différents sélecteurs, indiquant qu'ils représentent tous le même attribut, comme par exemple :

H1,H2 {color:red}

Div, p.mytext {……} Parfois, nous souhaitons également rendre la feuille de style efficace dans une plage spécifique : p em {color:red} Les balises d'élément sont séparées par des espaces, indiquant en et dan antara ditunjukkan dalam warna merah. Selain itu, anda juga boleh menggunakan "~" untuk menunjukkan bahawa satu pemilih diikuti oleh pemilih lain, dan ia dikelilingi oleh "/" pada kedua-dua belah:
/ Selector1 ~ Selector2/ {...}
menunjukkan bahawa jika Selector2 mengikuti Selector1 maka gunakan helaian gaya ini.
2. Unit nilai atribut
Dalam helaian gaya, unit atribut kebanyakannya adalah unit panjang, termasuk px (piksel), pt (paun), em (satu unit dalam penetapan taip, 1em=12pt) , mm (milimeter), cm (sentimeter), pc (1pc=12pt), dalam (inci), unit ini boleh dinyatakan dengan integer (seperti px) atau nombor nyata (seperti em), dan nilai logaritma dalam elemen Terdapat juga hubungan warisan seperti:
badan {font-size:12pt;
text-indent:3em; -atribut indent H1 dalam paparan bukan 36pt tetapi 45pt.
Unit sesetengah atribut malah boleh menjadi nilai negatif, seperti margin, yang boleh mencapai beberapa kesan khas, seperti pertindihan antara elemen.
Terdapat juga unit lain seperti sudut, yang unitnya ialah deg (darjah), grad (gradien) dan rad (radian), unit frekuensi, Hz dan kHz, sangat kita kenali.
3. Komen dan ruang
Helaian gaya juga mempunyai pernyataan ulasan: anda boleh menggunakan "/*...*/" sebagai teg ulasan Terdapat penganalisis untuk helaian gaya dalam penyemak imbas, yang bertanggungjawab untuk menganalisis helaian gaya Semak bahawa penganalisis akan mengabaikan kandungan antara tag ulasan. Ruang adalah sah dalam helaian gaya Jika terdapat lebih daripada satu ruang antara aksara, ruang yang selebihnya akan disimpan dan hanya satu. Terutamanya apabila mengisytiharkan fon tertentu, ruang tidak boleh ditinggalkan.
 Perkara yang perlu diberi perhatian
Pertama sekali, helaian gaya adalah sensitif huruf besar-besaran, jadi perhatikan ejaan kedua, untuk sifat dan kaedah yang tidak diisytiharkan dalam CSS2, penghurai helaian gaya akan mengabaikan kewujudannya, seperti :
H1 ,H2 {color:green}  
H3 ,H4 & H5  {color:red}  
P  {color:blue ;font-variant:small-caps}  
Di mana “&” adalah lembaran gaya Keseluruhan baris kedua dilangkau oleh penghurai untuk label yang tiada di dalamnya. Varian fon dalam baris ketiga bukan atribut undang-undang dan juga dilangkau ("warna:biru" adalah sah).
Setelah memahami peraturan di atas, anda sudah biasa dengan helaian gaya Di bawah saya akan memperkenalkan pelbagai atribut dan nilai atribut helaian gaya secara terperinci.

Rujukan Pantas CSS2 2
Kata kunci: Lain-lain
4 Sifat CSS:
1 Jenis Media (Media)
Salah satu ciri terpenting helaian gaya ialah ia boleh Berfungsi pada pelbagai media, seperti halaman, skrin, pensintesis elektronik dan banyak lagi. Sifat tertentu hanya boleh berfungsi pada media tertentu Contohnya, sifat "saiz fon" hanya sah pada jenis media boleh tatal (skrin).
Mengisytiharkan atribut media boleh diperkenalkan menggunakan @import atau @media:
@import url(loudvoice.css) ucapan
@cetakan media {
/* helaian gaya untuk cetakan pergi ke sini */
}
Anda juga boleh memperkenalkan media dalam teg dokumen:


Seperti yang anda lihat, perbezaan antara @import dan @media ialah yang pertama memperkenalkan helaian gaya luaran untuk jenis media , dan yang kedua Secara langsung memperkenalkan sifat media. Kaedah menggunakan @import ialah menambah alamat URL fail helaian gaya pada @import dan kemudian menambah jenis media Berbilang media boleh berkongsi helaian gaya dan jenis media dipisahkan oleh pemisah ",". @ penggunaan media adalah untuk mendahulukan jenis media, dan peraturan lain pada dasarnya adalah sama dengan peraturan yang ditetapkan. Pelbagai jenis media disenaraikan di bawah:
SKRIN: merujuk kepada skrin komputer. CETAKAN: Merujuk kepada media legap yang digunakan untuk pencetak.
PROJEKSI: merujuk kepada projek yang digunakan untuk paparan.
BRAILLE: Sistem Braille, merujuk kepada bahan bercetak dengan kesan sentuhan.
AURAL: merujuk kepada pensintesis elektronik pertuturan.
TV: merujuk kepada media jenis televisyen.
PEGANG GANGGANG: Merujuk kepada peranti paparan pegang tangan (skrin kecil, monokrom)
SEMUA: Sesuai untuk semua media.
2. Atribut Model BOX (Model BOX)
Apakah itu BOX? CSS memanggil bahagian yang bermula dengan
...
dalam HTML sebagai BOX (bekas mempunyai tiga jenis atribut: padding, margin dan border.
Atribut margin:
Atribut margin dibahagikan kepada lima atribut: margin-atas, margin-kanan, margin-bawah, margin-kiri dan jidar, yang masing-masing mewakili jarak antara kandungan dalam BOX dan jidar. Nilai atributnya ialah nilai berangka Unit boleh menjadi panjang, peratusan atau auto malah boleh ditetapkan kepada nilai negatif, menyebabkan paparan bertindih antara B OX dan BOX Lihat jadual di bawah untuk butiran tentang atribut margin:
Atribut nama: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Nilai atribut:
Nilai awal: 0
Objek yang sesuai: semua elemen
Sama ada untuk mewarisi: tidak
Nota peratusan: relatif kepada lebar KOTAK
Contohnya:
H1 { margin-atas: 2em }
H2 { margin-kanan: 12.3% }
Margin juga mempunyai cara cepat untuk menulisnya, iaitu Gunakan atribut margin secara langsung, contohnya:
BODY { margin: 1em 2em 3em 2em}
bersamaan dengan:
BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em; atribut, dipisahkan oleh ruang (ingat bukan koma), susunannya ialah "atas, kanan, bawah "Kiri", sudah tentu boleh terdapat kurang daripada empat nilai selepas jidar, contohnya:
BODY { margin: 2em } /* Semua jidar ditetapkan kepada 2em */
BODY { margin: 1em 2em } /* Jidar atas dan bawah ialah 1em , jidar kanan dan kiri ialah 2em */
BODY { margin: 1em 2em 3em } /* Jidar atas ialah 1em, jidar kanan dan kiri ialah 2em, dan jidar bawah ialah 3em*/
Atribut padding:
Atribut padding digunakan untuk menerangkan Berapa banyak ruang yang disisipkan antara sempadan dan kandungan BOX adalah serupa dengan atribut margin Ia juga dibahagikan kepada atas, kanan, bawah, kiri dan padding pintasan Untuk butiran tentang atribut margin, lihat jadual di bawah:
Nama atribut: 'padding-top. ' , 'padding-right', 'padding-bottom', 'padding-left', 'padding'
Nilai atribut:

Nilai awal: 0 Objek yang sesuai: semua elemen
Sama ada Warisan: tidak
Peratusan Nota: Berbanding dengan lebar KOTAK
Contohnya:
BLOCKQUOTE { padding-top: 0.3em }
Atribut padding adalah serupa dengan margin dan ditinggalkan di sini.
Atribut sempadan:
Biasanya apabila kita melihat dokumen HTML dan melihat sekeping teks, kita tidak menganggapnya sebagai BOX Sebenarnya, BOX mempunyai sempadan, tetapi ia tidak dipaparkan secara normal atribut Ia digunakan untuk menerangkan sempadan BOX. Atribut sempadan dibahagikan kepada lebar sempadan, warna sempadan dan gaya sempadan, dan terdapat cawangan di bawah atribut ini.
atribut lebar sempadan:
atribut lebar sempadan terbahagi kepada: lebar sempadan atas, lebar sempadan kanan, lebar bawah sempadan, lebar kiri sempadan dan atribut lebar sempadan, sempadan- Lebar diwakili oleh panjang sebagai "nipis/sederhana/tebal" atau unit panjang Berikut ialah senarai terperinci bagi atribut lebar tertib b:
Nama atribut: 'lebar-atas sempadan', 'lebar-kanan-sempadan. ', 'border-bottom-width', 'border-left-width', 'border-width'
Nilai atribut:

Nilai awal: sederhana Objek yang sesuai: semua elemen
Sama ada hendak mewarisi : tidak
Peratusan Nota: Dilarang
lebar sempadan ialah pintasan, susunannya adalah atas, kanan, bawah, kiri dan nilai dipisahkan dengan ruang.
atribut warna sempadan:
atribut warna sempadan digunakan untuk memaparkan warna jidar KOTAK, yang dibahagikan kepada warna atas sempadan, warna sempadan kanan, warna sempadan bawah, warna sempadan kanan- atribut warna dan sempadan-warna, nilai atribut ialah warna, yang boleh dinyatakan dalam perenambelasan atau rg b(Atribut ditunjukkan di bawah:
Nama atribut: 'border-top-color', 'border-right-). color', 'border-bottom-color', 'border-left-color',
'border-color'
Nilai atribut:

Nilai awal: Nilai awal warna elemen Objek yang sesuai: Semua elemen
Sama ada untuk mewarisi: tidak
Peratusan Nota: Dilarang
warna sempadan ialah jalan pintas, tertib adalah atas, kanan, bawah, kiri dan nilai dipisahkan dengan ruang .
atribut gaya sempadan:
atribut gaya sempadan digunakan untuk menetapkan gaya sempadan objek BOX Nilai atributnya ialah kata kunci yang ditentukan oleh CSS Biasanya, anda tidak boleh melihat sempadan kerana nilai awalnya tiada.Lihat atribut di bawah:
Nama atribut: 'gaya atas sempadan', 'gaya-kanan-sempadan', 'gaya-bawah-sempadan', 'gaya-kiri-sempadan', 'gaya-sempadan'
Nilai atribut:
Nilai awal: tiada
Objek yang sesuai: semua elemen
Sama ada untuk mewarisi: tidak
Nota peratusan: dilarang
warna sempadan ialah jalan pintas, susunannya ialah atas kanan Kiri bawah, nilai dipisahkan oleh ruang. Nama dan makna nilai atribut
adalah seperti berikut:
tiada: Tiada sempadan.
bertitik: Sempadan ialah garis putus-putus.
berputus-putus: Sempadan ialah garisan panjang dan pendek.
pepejal: Sempadan ialah garisan pepejal.
berganda: Sempadan ialah garisan berkembar.
alur, rabung, sisipan dan permulaan: paparkan sempadan 3D dengan kesan berbeza (mengikut atribut warna).
atribut sempadan:
atribut sempadan ialah pintasan ke Sempadan Nilai atribut dipisahkan oleh ruang.

Anda juga boleh menggunakan sempadan-atas, sempadan-kanan, sempadan-bawah, dan sempadan-kiri masing-masing sebagai pintasan untuk atas, kanan, bawah dan kiri Susunan nilai atribut adalah sama seperti iaitu atribut sempadan. | anda boleh meletakkan elemen dengan lebih tepat. Netscape pernah mencadangkan tag Layer, yang sangat bagus untuk susun atur yang tepat, tetapi ia tidak dikenali oleh W3C W3C mencadangkan fungsi yang serupa dengan tag Layer dalam CSS.

Atribut kedudukan:
Atribut kedudukan digunakan untuk menentukan jenis kedudukan elemen Untuk butiran, lihat atribut:
Nama atribut: 'kedudukan'
Nilai atribut: mutlak | 🎜>Nilai awal: statik
Objek yang sesuai: Semua elemen
Sama ada untuk diwarisi: tidak
Peratusan kenyataan: Dilarang
Nilai atribut mewakili:
mutlak: kedudukan mutlak pada skrin.
relatif: kedudukan relatif pada skrin.
statik: kedudukan yang wujud.
Atribut arah:
Atribut arah menentukan arah susunan BOX Untuk butiran, lihat atribut:
Nama atribut: 'arah'
Nilai atribut: ltr|rtl
Nilai awal: ltr
Objek yang Sesuai: Semua elemen
Sama ada untuk mewarisi: ya
Peratusan Nota: Dilarang
atribut terapung dan jelas:
Dalam HTML, anda boleh memilih kedudukan terapung gambar Objek BOX juga boleh memilih untuk terapung melalui lokasi CSS.改变BOX的float属性，BOX将飘浮在其他元素的左或右方：  
属性名称: 'float'  
属性值: left| right|none  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
例如：  
  
  

  
  
Some sample text that has no other...  
  
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：  
属性名称: 'clear'  
属性值: left| right|both|none  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
绝对位置属性：  
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：  
属性名称: 'top'、'right'、'bottom'、'left'  
属性值: ||auto  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
利用以上属性，用户就可以精确定义元素的位置，如：  

  
I used two red hyphens to serve as a change bar. They  
will "float" to the left of the line containing THIS  
--  
word.

z-index 속성:
CSS에서 요소의 중첩 표시를 허용하므로 표시 순서에 문제가 있습니다. z-index 속성은 컴퓨터 화면을 기준으로 요소의 앞, 뒤 위치를 설명합니다. X-Y 평면, 그러면 Z 축은 화면에 수직이고 z-index는 정수를 사용하여 요소의 앞뒤 위치를 나타냅니다. 값이 클수록 상대적으로 앞쪽 위치에 표시되며 CSS가 동의합니다. Z-색인에 음수를 사용하려면
속성 이름: 'z-index'
속성 값: auto|
초기값: auto
적합 객체: position 속성을 사용하는 요소
상속 여부: no
백분율 설명: 금지됨
너비 속성:
BOX의 너비가 포함된 내용에 따라 달라지지 않도록 BOX의 너비 속성을 지정합니다.
속성 이름: '너비'
속성 value: | BOX의 너비를 최소 너비와 최대 너비 사이로 만들기 위해 min-width 및 max-width 속성도 제공됩니다. 속성 이름: 'min-width'
속성 값:
|

초기 값: 0
적합 개체: 모두
상속 여부: 없음
백분율 비고 : 상위 요소의 너비에 따라 다름 속성 이름: 'max-width' 속성 값:
|

초기 값: 100%
적합 개체: 모두
상속 여부: 없음
백분율 참고: 상위 요소의 너비에 따라 다름 높이 속성: 동일한 BOX에는 자체 높이를 제어하는 ​​높이 속성도 있습니다.
속성 이름: 'height'
속성값:
|
| auto
초기값: auto
적합 객체: 블록 요소
상속 여부: no
백분율 참고: 상위 요소의 높이 CSS에는 min-height 및 max-height 속성도 제공되어 BOX의 높이를 최소 높이와 최대 높이 사이로 만듭니다. 속성 이름: 'min-height'
속성 값:
|

초기 값: 0
적합 개체: all
상속 여부: 없음
백분율 비고 : 상위 요소의 높이에 따라 다름 속성명 : 'max-height' 속성값 :
|

초기값 : 100%
적합객체 : all
상속 여부: 없음
백분율 참고: 상위 요소의 높이에 따라 다름 오버플로 속성: 요소의 너비와 높이를 지정할 때 요소의 면적이 그렇지 않은 경우 전체 내용을 표시할 만큼 충분하면 오버플로가 사용됩니다. 속성:
속성 이름: 'overflow'
속성 값: visible 스크롤 | attribute
상속 여부: no
Percentage 참고: 금지
속성 값의 의미는 다음과 같습니다.
visible: 영역을 확장하여 모든 콘텐츠를 표시합니다.
hidden: 범위를 벗어난 콘텐츠를 숨깁니다.
스크롤: 요소 오른쪽에 스크롤 막대를 표시합니다.
auto: 콘텐츠가 요소의 영역을 초과하면 스크롤바가 표시됩니다.
clip 속성:
CSS는 요소 영역을 다양한 모양으로 자를 수 있는 클립 속성도 제공하지만 현재는 사각형만 제공됩니다.
속성 이름: 'clip'
속성 값:
| auto
초기값: auto
적합 요소: 요소의 위치 속성을 절대값으로 설정
상속 여부: no
백분율 참고: 금지

값은 직사각형(오른쪽 상단 왼쪽 하단)입니다.
Attribute „line-height“ und „vertikale Ausrichtung“:
Das Attribut „line-height“ kann den Zeilenabstand innerhalb des Elements mithilfe von Längeneinheiten oder Prozentsätzen angeben:
Attributname: „line-height“
Attribut Wert: normal |. |. Im folgenden Beispiel ist das Ergebnis dasselbe: DIV { line-height: 1.2; DIV { Zeilenhöhe: 1,2em; Schriftgröße: 10pt }
DIV { Zeilenhöhe: 120%; Schriftgröße: 10pt }
Das Vertical-Alignment-Attribut bestimmt die Anzeige des Elements in der vertikalen Position:
Attributwert: baseline | 🎜>Anfangswert: Grundlinie
Geeignetes Objekt: Inline-Elemente
Geeignet für Vererbung: nein
Prozentsatz Hinweis: Hängt vom Zeilenhöhenattribut des Elements ab. Die Bedeutung des
-Attributwerts ist wie folgt folgt:
Grundlinie: An der Grundlinie des Elements ausgerichtet.
Mitte: An der Mitte des Elements ausgerichtet.
sub: Das Wort sinkt.
Super: Wort erhebt sich. text-top: Richtet den Text oben aus. text-bottom: Ausrichtung des Textes unten.
Oben: Ausgerichtet am höchsten Element in dieser Zeile.
Unten: Ausgerichtet am untersten Element in dieser Zeile.
Sichtbarkeitsattribut:
Dieses Attribut wird verwendet, um die Anzeige oder das Ausblenden von Elementen zu steuern:
Attributname: „Sichtbarkeit“
Attributwert: inherit | hide
Anfangswert: inherit
Geeignete Objekte: Alle Elemente
Ob vererbt werden soll: Wenn der Wert vererbt ist, werden die Attribute des übergeordneten Elements vererbt
Prozentsatz Hinweis: Verboten
4. Farb- und Hintergrundattribute (Farbe und Hintergrund):
Hier vorgestellt Informationen zum Festlegen der Vordergrundfarbe, Hintergrundfarbe und des Bildes in CSS.
Farbattribut:
Farbattribut wird verwendet, um die Vordergrundfarbe des Elements festzulegen:
Attributname: 'color'
Attributwert:

Anfangswert: basierend auf dem des Benutzers Anfangswert Definiert
Geeignete Objekte: Alle Elemente
Ob vererbt werden soll: ja
Prozentsatz Hinweis: Verboten
Der Wert des Farbattributs kann ein Hexadezimalwert, die Funktion rgb() oder ein Farbname sein Von CSS anerkannt. Zum Beispiel:
EM { color: red }
EM { color: rgb(255,0,0)}
Background-Attribut:
background-color-Attribut wird verwendet, um die Hintergrundfarbe festzulegen Anfangswert ist Transparent:
Attributname: 'background-color' Attributwert:
| transparent
Anfangswert: transparent
Geeignetes Objekt: alle Elemente
Ob vererbt werden soll: Nein
Prozentsatz Hinweis: Verboten
Das backgroud-image-Attribut wird zum Festlegen des Hintergrundbilds verwendet:
Attributname: 'background-image'
Attributwert:
keiner
Anfangswert : keine
Geeignete Objekte: Alle Elemente Geerbt oder nicht: nein
Prozentangaben: Verboten
Die URL kann eine absolute Adresse oder eine relative Adresse sein, zum Beispiel:
BODY { Hintergrund- image: url( Marble.gif) }
P { background-image: none }
Die beiden oben genannten Attribute können auch mit gewöhnlichen HTML-Attributen erreicht werden. Die folgenden Attribute sind CSS-Erweiterungen des Original-HTML.
Das Attribut „background-repeat“ wird verwendet, um die wiederholte Anordnung von Hintergrundbildern zu beschreiben:
Attributwert: „repeat-x |“. 🎜>Anfangswert: Wiederholung Geeignete Objekte: Alle Elemente
Ob vererbt werden soll: nein
Anmerkungen zum Prozentsatz: Verboten
Die Bedeutung des Attributwerts ist:
Wiederholung: zwei entlang der X- Achse und Y-Achse Die Richtung wiederholt das Bild.
repeat-x: Wiederholen Sie das Bild entlang der X-Achsenrichtung.
repeat-y: Wiederholen Sie das Bild entlang der Y-Achsenrichtung.
keine: Keine doppelten Bilder.
Contohnya:
BODY {
latar belakang: url merah(pendant.gif);
background-repeat:
}
/* bermaksud mengulang imej sepanjang Y axis" pendant.gif", dan selebihnya menggunakan merah sebagai warna latar belakang*/
Atribut lampiran latar belakang menunjukkan cara imej latar belakang dipaparkan apabila keseluruhan dokumen ditatal. Ia mempunyai dua nilai atribut: tetap dan tatal Tetap adalah bersamaan dengan kesan tera air dalam IE4, yang bermaksud bahawa apabila menyeret dokumen, latar belakangnya agak statik, manakala tatal menatal dengan dokumen. Atribut
background-position digunakan untuk menentukan kedudukan di mana imej latar belakang dipaparkan:
Nama atribut: 'background-position'
Nilai atribut: [ | 2} |. [atas |. bawah] |. [kiri |.] |. : rujuk saiz elemen itu sendiri Makna nilai atribut ialah:
"kiri atas" dan "kiri atas" bermaksud "0% 0%". ​
"atas", "atas tengah" dan "tengah atas" bermaksud "50% 0%".
"kanan atas" dan "kanan atas" kedua-duanya bermaksud "100% 0%".
"kiri", "kiri tengah" dan "tengah kiri" bermaksud "0% 50%".
"pusat" dan "pusat pusat" bermaksud "50% 50%".
"kanan", "tengah kanan" dan "kanan tengah" semuanya bermaksud "100% 50%".
"kiri bawah" dan "kiri bawah" bermaksud "0% 100%".
"bawah", "bawah tengah" dan "tengah bawah" semuanya bermaksud "50% 100%"
"bawah kanan" dan "kanan bawah" bermaksud "100% 100%".
Zum Beispiel:
BODY { Hintergrund: url(banner.jpeg) rechts oben } /* 100 % 0 % */
BODY { Hintergrund: url(banner.jpeg) oben in der Mitte } /* 50 % 0 % */
BODY { Hintergrund: url(banner.jpeg) Mitte } /* 50 % 50 % */
BODY { Hintergrund: url(banner.jpeg) unten } /* 50 % 100 % */
Das Hintergrundattribut ist eine Verknüpfung zu den oben genannten Hintergrundattributen:
Attributwert:
| > |. |. Geeignete Objekte: alle Elemente Prozentsatz: Nur in Hintergrundposition erlaubt CSS2-Kurzreferenz Nr. 4 Schlüsselwörter: Andere
5. Schriftart-Attribute (Schriftart):
Hier werden verschiedene Attribute zu Schriftarten definiert.
Das Attribut „font-family“ definiert den Namen der Schriftart, der der Name einer Schriftart oder der Name einer Schriftart sein kann. Der Name der Schriftart muss genau mit dem im Computersystem übereinstimmen:
Attributname: 'Schriftfamilie'
Attributwert: [[
],]* [
|
Anfangswert: Abhängig von der Benutzerdefinition
Geeignetes Objekt: alle Elemente
Ob vererbt werden soll: ja Prozentsatz Hinweis: Verboten Wenn das Stylesheet in einigen Computersystemen keine Schriftarten erfordert, können Sie für alle Fälle eine sekundäre Schriftart festlegen. Zum Beispiel: BODY { Schriftfamilie: Baskerville, „Heisi Mincho W3“, Symbol, Serif } Familienname bezieht sich auf eine bestimmte Schriftart, z. B. Heisi Mincho W3, generische Familie bezieht sich auf einen bestimmten Typ Schriftart, z. B. Serifen.
Das Attribut „font-style“ beschreibt den Neigungsgrad der Schriftart:
Attributname: „font-style“
Attributwert: normal | oblique
Anfangswert: normal
Geeignet Objekte: alle Elemente
Ob vererbt werden soll: ja
Prozentsatzbemerkungen: verboten
font-variant-Attribut:
Attributname: 'font-variant'
Attributwert: normal | Kapitälchen
Anfangswert: normal
Geeignet für: Alle Elemente
Ob vererbt werden soll: ja
Prozentsatz Hinweis: Verboten
Kleinbuchstaben in einem Element, das das Kapitälchen-Attribut verwendet, werden kleiner angezeigt als normale Großbuchstaben Manche.
Das Attribut „font-weight“ wird zur Beschreibung der Schriftstärke verwendet.
Attributwert: normal |. 200 |. 700 | 🎜>Geeignete Objekte: alle Elemente
Ob vererbt werden soll: ja
Anmerkungen zum Prozentsatz: verboten
100 bis 900 stehen für 9 verschiedene Schriftstärken, 400 steht für normal, 700 steht für fett und 900 ist die schwerste Schriftart, fetter oder heller gibt an, dass die Schriftstärke eine Stufe höher oder niedriger als die des übergeordneten Elements ist. Wenn das übergeordnete Element beispielsweise eine Schriftstärke von 400 hat, stellt „fetter“ eine Schriftstärke von 500 dar. Wenn das übergeordnete Element selbst eine Schriftstärke hat von 9 00, dann bleibt die Schriftstärke nach der Fettschrift immer noch 900, dasselbe gilt für die hellere Schrift. Einige Schriftarten verfügen nicht über den gesamten Strichstärkenbereich von 100 bis 900, möglicherweise von 300 bis 700, daher liegen die minimalen und maximalen Strichstärken ebenfalls bei 300 bis 700. Zum Beispiel:
P { Font-Weight: Normal } /* 400 */
H1 { Font-Weight: 700 } /* Bold */ Das
Font-Size-Attribut beschreibt die Größe der Schriftart:
Attributname: 'font-size'
Attributwert:
|.
Prozentsatz: relativ zur Schriftgröße des übergeordneten Elements
Dieses Attribut kann die absolute Größe verwenden oder relative Größe kann verwendet werden, wie durch die folgenden Schlüsselwörter gezeigt:
x-small |
Saiz relatif boleh diterangkan menggunakan: lebih besar atau lebih kecil.
Contohnya:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: greater }
EM { font-size: 150% }
EM { font-size: 1.5 em }
Atribut fon ialah pintasan kepada atribut di atas:
Nama atribut: 'font'
Nilai atribut: [ [ | ]? [/ fon: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "buku sekolah abad baru", serif } P { fon: huruf tebal italik besar Palatino, serif } P { fon: huruf kecil biasa 120%/120% fantasi }
6 Atribut Teks (Teks):
Atribut di sini akan menjejaskan paparan teks dalam dokumen WEB.
Atribut text-indent menerangkan tahap lekukan teks:
Nama atribut: 'text-indent'
Nilai atribut:
|

Nilai awal: 0
Sesuai untuk objek : Unsur bekas
Sama ada untuk mewarisi: ya
Peratusan Nota: Bergantung pada lebar elemen induk
Contoh berikut menunjukkan bahawa nilai inden perenggan ialah 3em:
P { teks -inden: 3em } Atribut penjajaran menunjukkan penjajaran teks: Nama atribut: 'penjajaran'
Nilai atribut: kiri | kanan | justify
Nilai awal: seperti yang ditakrifkan oleh pengguna
Objek yang sesuai: elemen peringkat blok
Sama ada hendak mewarisi: ya
Peratusan Nota: Dilarang
atribut hiasan teks menerangkan kaedah pengubahsuaian teks:
Nama atribut: 'hiasan teks'
Nilai atribut: tiada |. garis bawah |. Peratusan kenyataan: dilarang
Maksud nilai atribut ialah:
gariskan: garis bawah.
atas: garis bawah.
baris melalui: padamkan baris.
kelip: Kelip (seperti fungsi teg kelip dalam Navigator)
Atribut bayang teks boleh menambah kesan bayang pada teks:
Nama atribut: 'text-shadow'
Nilai atribut : tiada |.
[,
]*
Nilai awal: tiada
Objek yang sesuai: semua
Sama ada untuk diwarisi: Tidak
Nota Peratusan: Hanya sah apabila menerangkan ketelusan
Untuk contoh:
P { text-shadow: black }
Contoh di atas akan memaparkan bayang-bayang hitam di sebelah kanan bawah teks dan bayang-bayang akan menambah luas KOTAK.
Atribut jarak huruf menunjukkan jarak perkataan teks: Nama atribut: 'jarak huruf'
Nilai atribut: normal | semua elemen
Sama ada untuk mewarisi: ya
Peratusan Nota: Dilarang 'jarak perkataan'
Nilai atribut: normal |

Nilai awal: normal
Objek yang sesuai: semua elemen
Sama ada untuk mewarisi: ya
Peratusan catatan: dilarang
Contohnya : H1 { jarak perkataan: 1em }
atribut transformasi teks boleh memaparkan teks dalam KOTAK dalam huruf besar atau huruf kecil yang ditentukan bentuk:
Nama atribut: 'teks-transform'
Nilai atribut : huruf besar | huruf kecil | tiada
Nilai awal: tiada
Objek yang sesuai: semua elemen
Sama ada untuk diwarisi: ya <.>Nota peratusan: dilarang
Maksud nilai atribut ialah:
huruf besar : Huruf pertama setiap ayat dalam KOTAK.
huruf besar: Tukar semua huruf dalam BOX kepada huruf besar.
huruf kecil: Tukar semua huruf dalam BOX kepada huruf kecil.
Atribut White-space menerangkan cara memaparkan ruang dalam teks Dalam HTML, ruang ditinggalkan, yang bermaksud bahawa tidak kira berapa banyak ruang yang anda masukkan pada permulaan tanda perenggan, ia akan menjadi tidak sah untuk memasukkan ruang. Terdapat dua kaedah, satu ialah memasukkan terus kod ruang " ", atau menggunakan tag

 Terdapat juga atribut yang serupa dengan pra dalam CSS: 
Nama atribut: 'white-. space' 
Nilai atribut: normal |. pra | nowrap 
Nilai awal: normal 
Objek yang sesuai: elemen bekas 
Sama ada untuk mewarisi: ya 
Nota peratusan: dilarang 
Contohnya: 
PRE { white-space: pra } 
P { white-space: normal } 

CSS2 Quick Rujukan 5 
Kata kunci: Lain-lain 
7. Senaraikan atribut: 
Atribut di sini digunakan untuk menerangkan senarai (senarai ) siri atribut. 
Atribut jenis gaya senarai menerangkan simbol yang digunakan sebelum setiap item dalam senarai: 
Nama atribut: 'jenis-gaya senarai' 
Nilai atribut: bulatan bulatan bawah | |. upper-roman |. lower-alpha |. upper-alpha |. >cakera: bentuk kek bulat. 
bulatan: bulatan berongga. 
segi empat: segi empat sama. 
perpuluhan: nilai perpuluhan. 
roman bawah: angka Roman huruf kecil. 
roman besar: Angka Roman huruf besar. 
alfa rendah: huruf kecil Yunani. 
alfa atas: huruf besar Yunani. 
Contohnya: 
 

 

 

 Ini adalah item pertama 

 Ini adalah item kedua 

 Ini adalah item ketiga 
 
Anda juga boleh. gunakan list -style-image menggantikan simbol di hadapan senarai dengan grafik: Nama atribut: 'list-style-image' 
Nilai atribut: 
 | tiada 
Nilai awal: tiada 
Objek yang sesuai: Elemen senarai 
 Sama ada untuk mewarisi: ya 
 Nota Peratusan: Dilarang 


 boleh menjadi alamat mutlak atau alamat relatif.
Atribut senarai-style-position digunakan untuk menerangkan paparan kedudukan senarai: 
Nama atribut: 'list-style-position' 
Nilai atribut: dalam | di luar 
Nilai awal: luar 
Objek yang Sesuai: Elemen senarai 
 Sama ada untuk mewarisi: ya 
Nota Peratusan: Dilarang 
 Nilai atribut di luar dan dalam mewakili paparan di luar atau di dalam KOTAK masing-masing, contohnya: 
 UL { list-style: outside } 
UL.compact { list-style: inside }  
 


Item senarai pertama datang pertama 


 item senarai kedua datang kedua 


 


 


item senarai pertama didahulukan 


item senarai kedua datang kedua 


 
senarai- Atribut gaya ialah pintasan untuk atribut di atas: 
Nama atribut: 'gaya senarai' Nilai atribut:  | >Nilai awal: tidak Objek yang Sesuai: Elemen senarai 
 Sama ada untuk mewarisi: ya 
Nota Peratusan: Dilarang 
 Contohnya: 
UL { gaya senarai: upper-roman dalam } /* Sah untuk mana-mana UL*/ 
UL ~ UL { gaya senarai: bulatan di luar } /* Sah untuk mana-mana tanda UL di dalam UL*/ 
8 Atribut jadual: 
 Oleh kerana kebanyakan atribut dalam jadual telah dibincangkan dalam pelbagai atribut di atas, jadi hanya terdapat dua atribut yang diperkenalkan di sini: 
atribut row-span menerangkan bilangan baris yang dibentangkan oleh jadual: 
Nama atribut: 'row-span' 
Atribut nilai: 
 
Nilai awal : 1 Objek yang sesuai: elemen jadual 
Sama ada untuk mewarisi: tidak 
Peratusan catatan: dilarang 
atribut rentang-lajur menerangkan bilangan lajur yang dibentangkan oleh jadual: 
Nama atribut: 'column-span ' 
Nilai atribut: 
 
Nilai awal: 1 Objek yang sesuai: elemen jadual 
Sama ada untuk diwarisi: tidak 
Nota peratusan : dilarang 
9. Atribut antara muka pengguna: 
atribut kursor, pengguna boleh menentukan bentuk kursor untuk digunakan pada elemen: 
Nama atribut: 'kursor' 
Nilai atribut: auto | lalai |. ubah saiz |. ubah saiz | Nilai awal: auto 
Objek yang sesuai: semua elemen 
Sama ada untuk mewarisi: ya Peratusan ucapan: dilarang Kursor animasi. 
Pada ketika ini, semua sifat CSS yang sedia ada telah diperkenalkan (terdapat juga beberapa helaian gaya pendengaran, yang tidak akan diperkenalkan lagi Artikel ini akan berakhir, walaupun jenis penyemak imbas yang menyokong gaya pada masa ini). helaian masih terhad, tetapi ia merangkumi kebanyakannya Helaian gaya akan menjadi standard bersatu untuk penyemak imbas lambat laun: 1. Helaian gaya adalah satu-satunya piawaian gaya yang diterima oleh W3C tiada tanda bahawa W3C akan menggunakan helaian gaya JavaScript sebagai piawaian helaian gaya. Kedua, CSS berkesan menyelesaikan masalah memperkenalkan acara ke dalam skrip, ia adalah bahagian penting dalam HTML dinamik halaman, dan anda akan mendapati bahawa ia sangat mudah. Saya harap usaha saya dapat membantu anda menguasai helaian gaya dengan mahir.