Cara menggunakan CSS

CSS ialah teknologi yang sangat penting dalam reka bentuk web Melaluinya, kita boleh mengubah gaya dan reka letak halaman web untuk menjadikannya kelihatan lebih cantik dan mudah dibaca. Dalam artikel ini, kami akan memperkenalkan sintaks asas CSS dan beberapa sifat gaya yang biasa digunakan untuk membantu pemula memahami cara menggunakan CSS.

1. Tatabahasa asas CSS

Sebelum menggunakan CSS, kita perlu memahami beberapa peraturan tatabahasa asas. Struktur sintaks CSS terdiri daripada tiga bahagian: pemilih, atribut dan nilai, seperti yang ditunjukkan di bawah:

选择器 {
    属性1: 值1;
    属性2: 值2;
    属性3: 值3;
}

Antaranya, pemilih digunakan untuk menentukan elemen HTML untuk digunakan pada gaya, dan atribut digunakan untuk menerangkan ciri yang akan diubah, nilainya ialah nilai atribut yang akan diubah. Gunakan titik bertindih (:) untuk memisahkan setiap atribut daripada nilainya, dan memisahkan setiap atribut daripada nilainya dengan koma bertitik (;).

Sebagai contoh, untuk menukar warna teks semua perenggan (p) dalam HTML kepada merah, anda boleh menggunakan gaya CSS berikut:

p {
    color: red;
}

2 atribut gaya CSS

Dalam CSS, terdapat banyak sifat yang boleh digunakan untuk mengubah suai gaya visual halaman web. Berikut adalah beberapa sifat gaya yang biasa digunakan.

1. Atribut fon

• saiz fon: saiz fon, unit boleh menjadi piksel (px), peratusan (%) atau em, dsb.
• fon-family: nama fon, yang boleh menjadi fon Inggeris biasa atau fon Cina.

Contohnya:

p {
    font-size: 16px;
    font-family: "Microsoft Yahei", Arial, sans-serif;
}

2. Atribut teks

• warna: warna fon.
• text-align: Penjajaran teks, yang boleh ke kiri, kanan, tengah atau justify, dsb.

Contohnya:

p {
    color: #333;
    text-align: center;
}

3. Atribut latar belakang

• warna latar belakang: warna latar belakang.
• imej latar belakang: imej latar belakang.
• background-repeat: Sama ada imej latar belakang diulang, ia boleh diulang, repeat-x, repeat-y atau no-repeat, dsb.
• kedudukan latar belakang: kedudukan imej latar belakang, yang boleh di kiri atas, tengah tengah, kanan bawah, dsb.

Contohnya:

body {
    background-color: #fff;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

4. Atribut sempadan

• lebar sempadan: lebar sempadan.
• gaya sempadan: gaya sempadan, yang boleh padat, putus-putus, bertitik atau berganda, dsb.
• warna sempadan: warna sempadan.

Contohnya:

div {
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

5. Atribut model kotak

• lebar: lebar elemen.
• tinggi: ketinggian unsur.
• lapik: pelapik.
• margin: jidar luar.

Contohnya:

div {
    width: 200px;
    height: 150px;
    padding: 10px;
    margin: 20px;
}

3. Pemilih CSS

Pemilih CSS ialah corak yang digunakan untuk memadankan elemen HTML dan boleh digunakan untuk memilih elemen tertentu. Tetapkan gaya. Di bawah adalah beberapa pemilih yang biasa digunakan.

1. Pemilih elemen

Pemilih elemen boleh memadankan mana-mana elemen dalam HTML, seperti p, div, h1, dsb.

Contohnya:

p {
    color: #333;
}

2. Pemilih kelas

Pemilih kelas bermula dengan noktah (.) dan boleh menjadi berbilang elemen dalam HTML Tentukan gaya yang sama.

Contohnya:

.highlight {
    background-color: yellow;
}

3. Pemilih ID

Pemilih ID bermula dengan tanda paun (#) dan digunakan untuk memadankan HTML unik unsur .

Contohnya:

#logo {
    width: 100px;
    height: 80px;
}

4. Pemilih Keturunan

Pemilih keturunan boleh memadankan elemen yang bersarang di dalam elemen HTML lain, menggunakan ruang ( ) memisahkan pemilih yang berbeza .

Contohnya:

#nav li {
    display: inline-block;
}

5. Pemilih adik-beradik bersebelahan

Pemilih adik-beradik bersebelahan boleh memadankan elemen adik-beradik serta-merta mengikut elemen yang dinyatakan sebelumnya dengan tanda tambah (+).

Contohnya:

h1 + p {
    font-size: 14px;
}

4. Pewarisan gaya CSS

Gaya CSS boleh diserahkan kepada elemen anaknya melalui pewarisan. Apabila elemen induk menetapkan gaya tertentu, elemen anaknya akan mewarisi gaya tersebut secara automatik, melainkan elemen anak menetapkan gayanya sendiri.

Contohnya:

body {
    font-size: 16px;
    color: #333;
}

Dalam contoh ini, semua elemen HTML akan mewarisi saiz dan warna fon secara automatik.

Kesimpulan

Melalui pengenalan artikel ini, pemula boleh menggunakan CSS untuk menukar gaya dan reka letak halaman web. Walaupun terdapat banyak sifat dan pemilih CSS yang tersedia, memahami sintaks asas dan sifat gaya biasa adalah asas. Melalui pembelajaran dan amalan berterusan, anda akan menjadi lebih mahir dalam menggunakan CSS dan mencipta reka bentuk web yang lebih kompleks.

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