Mari kita bercakap tentang css kecuali gaya terakhir-Soal Jawab bahagian hadapan-php.cn

Mari kita bercakap tentang css kecuali gaya terakhir

PHPz

Lepaskan： 2023-04-24 09:26:01

asal

1164 orang telah melayarinya

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.

1. Pemilih CSS

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

Pemilih Teg

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

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

Salin selepas log masuk

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

Pemilih Kelas

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

.text-red {
    color: red;
}

Salin selepas log masuk

Kemudian gunakan kelas ini dalam HTML:

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

Salin selepas log masuk

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

Pemilih ID

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

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

Salin selepas log masuk

Gunakan ID ini dalam HTML:

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

Salin selepas log masuk

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

Pemilih Atribut

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

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

Salin selepas log masuk

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

Pemilih Keturunan

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

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

Salin selepas log masuk

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

Pemilih Kelas Pseudo

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

a:hover {
   color: red;
}

Salin selepas log masuk

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

2. Model kotak CSS

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.

3. Unit CSS

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

Pixel (Pixel)

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

p {
    font-size: 14px;
}

Salin selepas log masuk

Peratusan

Peratusan ialah unit panjang relatif kepada elemen induk. Contohnya:

.container {
    width: 80%;
}

Salin selepas log masuk

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

em dan rem

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;
}

Salin selepas log masuk

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.

Unit Viewport

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:

Dalam kod di atas, lebar elemen

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

Salin selepas log masuk

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

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

warna

Sifat warna digunakan untuk menetapkan warna teks.

Kod di atas menetapkan warna teks semua

h1 {
    color: red;
}

Salin selepas log masuk

elemen kepada merah. <h1>

warna latar belakang

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

Kod di atas menetapkan warna latar belakang elemen

.container {
    background-color: #f8f8f8;
}

Salin selepas log masuk

kepada kelabu muda. .container

sempadan

Atribut sempadan digunakan untuk menetapkan sempadan elemen.

Kod di atas menetapkan lebar sempadan elemen

.container {
    border: 2px solid black;
}

Salin selepas log masuk

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

saiz fon

Atribut saiz fon digunakan untuk menetapkan saiz fon.

Kod di atas menetapkan saiz fon semua

p {
    font-size: 16px;
}

Salin selepas log masuk

elemen kepada 16 piksel. 

text-align

Atribut penjajaran teks digunakan untuk menetapkan penjajaran teks.

h1 {
    text-align: center;
}

Salin selepas log masuk

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

五、CSS框架

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

以上就是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!