Mari kita bercakap tentang css kecuali gaya terakhir

<p>CSS ialah bahasa yang digunakan untuk menerangkan gaya halaman web Ia boleh menggayakan pelbagai elemen dalam halaman web untuk mencantikkan dan meningkatkan halaman web. Yang terakhir dalam CSS merujuk kepada gaya terakhir dalam helaian gaya CSS, tetapi sebenarnya terdapat banyak perkara yang patut diterokai dalam CSS selain yang terakhir.

<p>1. Pemilih CSS

<p>Pemilih CSS digunakan untuk memilih elemen HTML. Mereka membuat pilihan berdasarkan atribut, hubungan dan kedudukan elemen. Pemilih yang biasa digunakan ialah:

1. Pemilih Teg

<p>Pemilih teg ialah pemilih yang paling biasa digunakan, yang memilih teg nama elemen HTML untuk menetapkan gaya. Contohnya:

h1 {
    color: red;
    font-size: 24px;
}

<p>Kod di atas menggunakan pemilih teg untuk memilih semua <h1> elemen.

2. Pemilih Kelas

<p>Pemilih kelas memilih elemen HTML dan menggayakannya dengan menetapkan atribut kelas. Contohnya:

.text-red {
    color: red;
}

<p> Kemudian gunakan kelas ini dalam HTML:

<p class="text-red">这里的文字是红色的。</p>

<p> Pemilih kelas boleh digunakan untuk menetapkan gaya secara seragam dalam halaman yang sama.

3. Pemilih ID

<p>Pemilih ID memilih elemen HTML dengan atribut ID unik dan menetapkan gayanya. Contohnya:

#my-title {
    font-size: 36px;
}

<p>Gunakan ID ini dalam HTML:

<h1 id="my-title">这是我的标题</h1>

<p>Perlu diambil perhatian bahawa hanya boleh ada satu nilai ID yang sama dalam dokumen HTML.

4. Pemilih Atribut

<p>Pemilih atribut memilih dan menetapkan gaya berdasarkan atribut elemen HTML. Contohnya:

input[type="submit"] {
    background-color: blue;
}

<p>Kod di atas akan menetapkan latar belakang biru untuk semua submit elemen yang atribut jenisnya ialah <input>.

5. Pemilih Keturunan

<p>Pemilih keturunan memilih elemen keturunan elemen HTML, iaitu elemen anak, elemen cucu, elemen cicit, dll. . Contohnya:

.container .title {
    font-size: 24px;
}

<p>Kod di atas bermaksud memilih semua elemen turunan kelas container dalam elemen dengan kelas title dan menetapkan saiz fonnya kepada 24 piksel.

6. Pemilih Kelas Pseudo

<p>Pemilih kelas pseudo ialah kata kunci yang ditakrifkan selepas titik bertindih pemilih, digunakan untuk memilih elemen dalam keadaan tertentu . Contohnya:

a:hover {
   color: red;
}

<p>Kod di atas bermaksud untuk menetapkan warna pautan kepada merah apabila tetikus melayang.

<p>2. Model kotak CSS

<p>Model kotak CSS bermakna setiap bahagian elemen HTML ialah "kotak", termasuk kawasan kandungan, kawasan padding, kawasan sempadan dan kawasan jidar. Model ini penting untuk memahami keseluruhan struktur dan penggayaan elemen HTML.

<p>3. Unit CSS

<p>Terdapat pelbagai unit dalam CSS, yang boleh digunakan untuk mewakili atribut gaya yang berbeza untuk mencapai pelbagai kesan. Unit biasa ialah:

1. Pixel (Pixel)

<p>Pixel ialah unit asas panjang dan biasanya digunakan untuk menentukan saiz elemen pada skrin. Contohnya:

p {
    font-size: 14px;
}

2. Peratusan

<p>Peratusan ialah unit panjang relatif kepada elemen induk. Contohnya:

.container {
    width: 80%;
}

<p>Kod di atas bermaksud menetapkan lebar .container kepada 80% daripada lebar elemen induknya.

3. em dan rem

<p>em dan rem ialah unit panjang berbanding dengan saiz fon elemen semasa. em ialah saiz fon berbanding elemennya sendiri, manakala rem ialah saiz fon berbanding elemen akar (biasanya elemen HTML). Contohnya:

h1 {
    font-size: 2.5em;
}

.container {
    width: 40rem;
}

<p>Dalam kod di atas, saiz fon elemen h1 ialah 2.5 kali saiz fon elemennya sendiri dan lebar elemen .container ialah 40 kali ganda saiz fon unsur akar.

4. Unit Viewport

<p>Unit Viewport ialah unit panjang berbanding saiz viewport, selalunya digunakan dalam reka bentuk responsif. Unit port pandangan biasa ialah:

• vw/vh: relatif kepada 1% daripada lebar dan tinggi port pandangan; % daripada nilai yang lebih kecil atau lebih besar.
• Contohnya:

<p>

Dalam kod di atas, lebar elemen

.container {
    width: 80vw;
    height: 50vmin;
}

ialah 80% daripada lebar viewport dan ketinggian adalah lebih kecil daripada lebar dan ketinggian ruang pandang 50%. <p>.container4. Sifat CSS

<p>Sifat CSS ialah pelbagai sifat yang digunakan untuk menetapkan gaya elemen. Beberapa sifat biasa termasuk:

<p>

warna

1. Sifat warna digunakan untuk menetapkan warna teks.

<p>

Kod di atas menetapkan warna teks semua

h1 {
    color: red;
}

elemen kepada merah. <p><h1>

warna latar belakang

2. Sifat warna latar belakang digunakan untuk menetapkan warna latar belakang elemen.

<p>

Kod di atas menetapkan warna latar belakang elemen

.container {
    background-color: #f8f8f8;
}

kepada kelabu muda. <p>.container

sempadan

3. Atribut sempadan digunakan untuk menetapkan sempadan elemen.

<p>

Kod di atas menetapkan lebar sempadan elemen

.container {
    border: 2px solid black;
}

kepada 2 piksel, warna kepada hitam dan gaya sempadan kepada garisan pepejal. <p>.container

saiz fon

4. Atribut saiz fon digunakan untuk menetapkan saiz fon.

<p>

Kod di atas menetapkan saiz fon semua

p {
    font-size: 16px;
}

elemen kepada 16 piksel. <p><p>

text-align

5. Atribut penjajaran teks digunakan untuk menetapkan penjajaran teks.

h1 {
    text-align: center;
}

<p>上述代码将所有的<h1>元素的文本居中对齐。

<p>五、CSS框架

<p>CSS框架是指提供一组预定义的CSS样式和JavaScript交互，可以快速搭建网页的开发工具。常见的CSS框架有Bootstrap、Foundation、Materialize等。它们提供了大量的预设样式和交互组件，可以极大地加速开发的进度和提升用户体验。

<p>以上就是CSS的一些基本内容和重要性，虽然CSS的最后一个很重要，但我们也要关注其它内容，以了解并掌握CSS的全部知识，从而开发出更为优秀的网页。

Atas ialah kandungan terperinci Mari kita bercakap tentang css kecuali gaya terakhir. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!