Cara menggunakan css

CSS ialah bahagian penting dalam reka bentuk web. Ia boleh digunakan untuk mengawal gaya dan reka letak halaman web. Dalam reka bentuk web, menggunakan CSS boleh menjadikan halaman web kelihatan lebih cantik, teratur dan mudah dibaca. Artikel ini akan memperkenalkan penggunaan asas CSS.

1. Apakah itu CSS?

Nama penuh CSS ialah Cascading Style Sheets Ia adalah bahasa penanda yang digunakan untuk menukar gaya paparan dokumen HTML atau XML. Ia adalah teknologi reka bentuk web. Fungsi asas helaian gaya CSS adalah untuk menggunakan atribut yang berbeza, seperti fon, warna, latar belakang, dll., pada elemen halaman web yang berbeza untuk mencapai kesan visual yang berbeza.

2. Sintaks asas CSS

Sintaks asas CSS terdiri daripada pemilih, atribut dan nilai. Pemilih digunakan untuk memilih elemen HTML yang digunakan gaya Atribut menentukan atribut yang akan ditetapkan, dan nilai ialah nilai khusus atribut.

Sebagai contoh, jika kita ingin menetapkan warna perenggan kepada merah dalam dokumen HTML, kita boleh menggunakan kod berikut:

p { warna: merah }

p dalam kod ialah Pemilih bermaksud semua elemen perenggan akan dipilih, warna ialah atribut, yang bermaksud warna akan ditetapkan, dan merah ialah nilai, yang bermaksud warna itu akan ditetapkan kepada merah.

3. Pemilih CSS

Pemilih CSS digunakan untuk memilih elemen HTML yang perlu digayakan. Ia boleh dipilih berdasarkan nama tag elemen, kelas, ID dan atribut lain.

1. Pemilih teg

Pemilih teg merujuk kepada memilih elemen berdasarkan nama tegnya Sebagai contoh, untuk memilih semua elemen perenggan, anda boleh menggunakan kod berikut:

p { color: red; }

2. Pemilih kelas

Pemilih kelas merujuk kepada memilih elemen berdasarkan atribut kelas bagi elemen HTML Elemen "intro" boleh menggunakan kod berikut:

.intro { color: red; }

3. Pemilih ID

Pemilih ID merujuk kepada pemilihan berdasarkan atribut ID daripada Elemen elemen HTML, atribut ID bagi elemen HTML adalah unik dan tidak boleh terdapat dua atribut ID yang sama dalam satu halaman. Contohnya, untuk memilih elemen dengan id "intro", anda boleh menggunakan kod berikut:

intro { color: red; }

4. Atribut dan nilai CSS

Atribut dan nilai CSS digunakan untuk mengawal gaya elemen CSS menyediakan banyak atribut dan nilai yang boleh digunakan untuk menetapkan kesan gaya yang berbeza.

1. Atribut fon

Atribut fon boleh digunakan untuk menetapkan fon, saiz, warna dan atribut teks yang lain, contohnya:

fon-famili: Arial, Verdana, sans- serif; / Jenis fon/
saiz fon: 16px; / Saiz fon/
warna: #333; 🎜>/2. Atribut latar belakang

Atribut latar belakang boleh digunakan untuk menetapkan warna latar belakang, gambar, kedudukan, dsb. elemen, contohnya:

background-color: #f8f8f8; /

Background color

/background-image: url("bg.jpg"); / Background image
/background-repeat: no-repeat; / Latar belakang tidak berulang
/kedudukan latar: tengah tengah; / Kedudukan latar belakang
/3 🎜> Atribut sempadan boleh digunakan untuk menetapkan gaya sempadan elemen , ketebalan, warna, dll., contohnya:

gaya sempadan: pepejal /

gaya sempadan

/

lebar sempadan: 1px; /

lebar sempadan/warna sempadan: #ccc; /
Warna sempadan/
Atribut saizAtribut saiz boleh digunakan untuk menetapkan lebar, tinggi, lebar maksimum dan Tinggi maksimum, dsb., contohnya:

lebar: 500px /

lebar elemen

/

tinggi: 300px; /

ketinggian elemen/lebar maksimum: 100%; /
Lebar maksimum elemen /tinggi maksimum: 100%; 🎜> Ketinggian maksimum elemen
/ 5. Keutamaan CSS
Apabila elemen dipilih oleh berbilang pemilih, keutamaan CSS menentukan gaya yang digunakan padanya. Keutamaan CSS dari tinggi ke rendah ialah: !penting, gaya sebaris, pemilih ID, pemilih kelas dan pemilih teg. Apabila keutamaan adalah sama, gaya kemudian akan mengatasi gaya sebelumnya.

Contohnya, jika anda mempunyai helaian gaya berikut:

p { warna: biru; }

.intro { warna: merah; : hijau; }

Jadi jika ada unsur sedemikian:

Ini adalah perenggan< ;/p> ;

maka warna teksnya adalah hijau, iaitu, pemilih ID mempunyai keutamaan tertinggi, meliputi gaya pemilih kelas dan pemilih label.

6. Pewarisan CSS

Warisan merujuk kepada fungsi yang unsur boleh mewarisi atribut gaya elemen induknya Ciri ini membolehkan helaian gaya dikurangkan dengan banyak, mengurangkan saiz fail dan meningkatkan kebolehbacaan. Contohnya:

badan { saiz fon: 14px; }

p { warna: #333; dan warna Sebagai #333, elemen p mewarisi saiz fon elemen badan.

7. Cara memperkenalkan CSS

CSS boleh diperkenalkan dalam tiga cara: sebaris, dalaman dan luaran. Gaya sebaris adalah untuk satu elemen, manakala gaya luaran dan dalaman digunakan untuk menentukan helaian gaya keseluruhan halaman HTML.

1. Sebaris

Gaya sebaris boleh ditakrifkan terus menggunakan atribut gaya dalam elemen HTML, contohnya:

Ini ialah perenggan

2. Gaya dalaman

Gaya dalaman merujuk kepada mentakrifkan helaian gaya CSS dalam teg kepala dokumen HTML , contohnya:

3.外部式

外部式是指将CSS样式表定义在一个单独的.css文件中，然后在HTML文档中引入，例如：

<link rel="stylesheet" type="text/css" href="style.css">

以上三种引入方式中，外部式是推荐使用的方式。这种方式可以使CSS样式表单独存放，方便维护和修改，也可以提高页面加载速度。

总结：

CSS是网页设计中的重要组成部分，它可以用来控制网页中的样式和布局。CSS的基本语法由选择器、属性和值组成，选择器用来选择要应用样式的HTML元素，属性指定要设置的属性，值是属性的具体数值。当同一个元素被多个选择器选中时，CSS的优先级决定它应用哪一个样式。CSS有三种引入方式：内联式、内部式和外部式，而外部式是推荐使用的方式。

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