Cara menulis css

CSS ialah bahasa reka bentuk gaya halaman web dan teknologi yang digunakan untuk mengawal gaya elemen halaman web. Melalui CSS, anda boleh mengawal gaya dan susun atur pelbagai elemen seperti teks, imej, latar belakang dan sempadan pada halaman web. Artikel ini akan memperkenalkan sintaks asas dan sifat biasa CSS secara terperinci untuk membantu pereka web menguasai penggunaan CSS dengan lebih baik.

1. Sintaks asas CSS

1. Sintaks ulasan CSS

Ulasan dalam CSS bermula dengan "/" dan berakhir dengan "/" penghujungnya. Tiada apa-apa dalam pernyataan ulasan akan dihuraikan dan dipaparkan oleh penyemak imbas.

Contoh:

/*这是注释语句*/

2. Sintaks pemilih CSS

Dalam CSS, pemilih digunakan untuk menentukan elemen untuk gaya yang akan digunakan. Pemilih boleh menentukan atribut, jenis, ID, kategori, dsb. elemen.

pemilih boleh dibahagikan kepada jenis berikut:

(1) Pemilih elemen

Pemilih elemen boleh terus menentukan nama teg dalam teg HTML.

Contoh sintaks:

p { color: red; }

(2) pemilih ID

Pemilih ID ditentukan dengan simbol "#".

Contoh sintaks:

#box { width: 200px; height: 200px; }

(3) Pemilih kategori

Pemilih kategori ditentukan dengan simbol "."

Contoh sintaks:

.box { background-color: #fff; }

(4) Pemilih keturunan

Pemilih turunan memisahkan dua pemilih dengan ruang dan boleh memilih elemen keturunan dalam perhubungan hierarki.

Contoh sintaks:

div p { color: red; }

(5) Pemilih kelas pseudo

Pemilih kelas pseudo digunakan untuk memilih elemen dalam keadaan tertentu, seperti alih tetikus, Pautan yang dilawati dsb. .

Contoh sintaks:

a:hover { color: red; }

(6) Pemilih atribut

Pemilih atribut boleh memilih elemen berdasarkan atribut atau nilai atributnya.

Contoh sintaks:

input[type="text"] { border: 1px solid #ccc; }

(7) Pemilih gabungan

Pemilih gabungan boleh menentukan berbilang syarat pada masa yang sama, dipisahkan dengan koma.

Contoh sintaks:

h1, h2, h3 { color: #000; }

3. Sifat CSS biasa

Sifat CSS boleh mengawal penampilan, reka letak, saiz, warna, fon, dll. elemen halaman web.

Berikut ialah atribut CSS yang biasa digunakan:

(1) saiz fon: saiz fon

Contoh sintaks:

body { font-size: 14px; }

(2) warna : fon Warna

contoh sintaks:

h1 { color: #ff0000; }

(3) latar belakang: warna latar belakang

contoh sintaks:

body { background-color: #f7f7f7; }

(4) lebar: lebar

Contoh sintaks:

img { width: 100px; }

(5) ketinggian: ketinggian

Contoh sintaks:

img { height: 100px; }

(6) sempadan: sempadan

Contoh sintaks :

.box { border: 1px solid #ccc; }

(7) padding: jidar dalam

contoh sintaks:

.box { padding: 10px; }

(8) jidar: jidar luar

contoh sintaks:

.box { margin: 10px; }

(9) text-align: text centered

Contoh sintaks:

h1 { text-align: center; }

4 CSS inheritance and priority

CSS inheritance merujuk kepada elemen anak Boleh mewarisi gaya. sifat daripada unsur induk. Contohnya, jika anda menetapkan saiz fon elemen badan kepada 14px, semua elemen yang terletak dalam elemen badan akan mewarisi atribut gaya ini.

Peraturan keutamaan CSS merujuk kepada gaya yang akan berkuat kuasa apabila berbilang gaya CSS digunakan pada elemen yang sama pada masa yang sama. Peraturan keutamaan CSS dinilai dalam susunan berikut:

(1) Lebih spesifik nilai atribut gaya, lebih tinggi keutamaan.

Sebagai contoh, pemilih ID diutamakan daripada pemilih kategori dan pemilih kategori diutamakan daripada pemilih elemen. Jika elemen dipilih oleh berbilang pemilih pada masa yang sama, peraturan gaya dengan pemilih yang lebih khusus akan digunakan terlebih dahulu.

(2) Semakin lewat atribut gaya muncul, semakin tinggi keutamaannya.

Sebagai contoh, apabila elemen mentakrifkan berbilang atribut gaya yang sama pada masa yang sama, peraturan gaya yang muncul kemudian akan menimpa peraturan sebelumnya.

(3) Gaya yang ditetapkan oleh peraturan !penting mempunyai keutamaan tertinggi.

Dalam kes ini, nilai atribut gaya yang sepadan tidak akan ditindih oleh peraturan pemilih lain.

2. Ringkasan

CSS ialah teknologi yang sangat penting dalam reka bentuk web. Memahami dan menguasai sintaks dan sifat biasa CSS dengan betul boleh meningkatkan tahap reka bentuk web. Artikel ini memberikan penjelasan terperinci tentang sintaks asas dan sifat biasa CSS, dengan harapan dapat membantu pereka web menggunakan teknologi CSS dengan lebih baik.

Atas ialah kandungan terperinci Cara menulis css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!