langkah gaya css-Soal Jawab bahagian hadapan-php.cn

langkah gaya css

PHPz

Lepaskan： 2023-05-21 09:11:07

asal

1399 orang telah melayarinya

Langkah Gaya CSS

Kata Pengantar

CSS (Cascading Style Sheets) ialah bahagian yang amat diperlukan dalam pembangunan web Ia boleh menambah gaya pada elemen dalam dokumen HTML untuk mencantikkan halaman web pengalaman pengguna. Sebelum menggunakan CSS, kita perlu pastikan kita telah menguasai asas HTML. Artikel ini akan memperkenalkan langkah dan penggunaan gaya CSS.

Langkah 1: Tulis gaya CSS

Dalam fail HTML, terdapat dua cara untuk menambah gaya CSS. Yang pertama ialah menulis gaya CSS dalam teg fail HTML melalui helaian gaya dalaman. Kodnya adalah seperti berikut:

<head>
  <style>
    /* CSS代码 */
  </style>
</head>

Salin selepas log masuk

Yang kedua ialah memperkenalkan fail CSS ke dalam fail HTML melalui helaian gaya luaran. Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Tidak kira apa cara sekalipun, kita perlu menulis kod gaya CSS. Sintaks asas CSS adalah seperti berikut:

selector {property: value;}

Salin selepas log masuk

Antaranya, pemilih menunjukkan elemen gaya yang digunakan, sifat menunjukkan atribut yang perlu ditetapkan dan nilai menunjukkan nilai atribut. Contohnya:

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

Salin selepas log masuk

Langkah 2: Pemilih

Apabila menulis gaya CSS, pertimbangkan jenis, kategori, ID, dsb. elemen yang gaya itu perlu digunakan. Elemen berbeza ini boleh dipilih menggunakan pemilih dan digayakan secara berbeza. Berikut ialah beberapa pemilih biasa.

Pemilih elemen

Pemilih elemen memilih elemen yang sepadan dengan namanya.

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

Salin selepas log masuk

Pemilih kelas

Pemilih kelas memilih elemen yang sepadan mengikut nama kelas.

.class {
  color: #f00;
}

Salin selepas log masuk

Dalam HTML, tambahkan nama kelas pada elemen melalui atribut kelas:

<p class="class">这是一个段落</p>

Salin selepas log masuk

Pemilih ID

Pemilih ID lulus ID bagi elemen Atribut untuk memilih elemen yang sepadan.

#id {
  font-weight: bold;
  color: #000;
}

Salin selepas log masuk

Dalam HTML, tambahkan ID pada elemen melalui atribut id:

<p id="id">这是一个段落</p>

Salin selepas log masuk

Langkah 3: Reka letak dan model kotak

Gaya CSS bukan sahaja boleh menetapkan warna dan saiz elemen dan gaya lain, dan juga boleh memberikan sokongan untuk reka letak dan reka bentuk struktur halaman web. Memahami model kotak adalah asas penting untuk susun atur dan reka bentuk.

Model kotak

Model kotak boleh menganggap elemen sebagai kotak, dibahagikan kepada jidar (sempadan), padding (margin dalam) dan jidar (margin luar) ) tiga bahagian .

langkah gaya css

Kita boleh menetapkan sifat yang berbeza untuk tiga bahagian ini, contohnya:

.box {
  border: 1px solid #000;
  padding: 10px;
  margin: 10px;
}

Salin selepas log masuk

Layout

CSS disediakan Terdapat banyak cara untuk melaksanakan susun atur dan reka bentuk Berikut adalah beberapa cara biasa.

Terapung

Apungkan satu elemen ke kiri atau kanan elemen lain melalui atribut apungan untuk mencapai reka letak berbilang elemen. Contohnya:

.box1 {
  float: left;
}

.box2 {
  float: right;
}

Salin selepas log masuk

Kedudukan

Atribut kedudukan boleh digunakan untuk meletakkan elemen pada kedudukan berbeza pada halaman web, seperti relatif kepada bahagian atas, kiri, dsb. . Atribut kedudukan mempunyai empat nilai iaitu statik (nilai lalai), relatif, mutlak dan tetap.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

Salin selepas log masuk

Reka Letak Fleksibel

Model kotak fleksibel boleh melaksanakan reka letak penyesuaian melalui atribut flex. Bekas yang ditetapkan untuk melentur akan secara automatik melaraskan kedudukan dan saiz elemen kanak-kanak mengikut saiz yang berbeza.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Salin selepas log masuk

Langkah 4: Reka Bentuk Responsif

Reka bentuk responsif ialah bahagian yang semakin penting dalam pembangunan web. Memandangkan jenis peranti dan saiz skrin terus berubah, terdapat keperluan untuk menyediakan reka letak dan gaya yang berbeza untuk peranti dan saiz skrin yang berbeza. Berikut ialah dua kaedah reka bentuk responsif yang biasa.

Pertanyaan Media

Pertanyaan media membolehkan anda menetapkan gaya berbeza untuk peranti dan saiz skrin yang berbeza. Contohnya:

@media (max-width: 768px) {
  .box {
    width: 100%;
    margin: 0;
  }
}

Salin selepas log masuk

Apabila lebar skrin kurang daripada atau sama dengan 768px, gaya akan digunakan secara automatik.

Reka Letak Fleksibel

Model kotak fleksibel boleh melaksanakan reka letak responsif melalui pertanyaan media. Contohnya:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Salin selepas log masuk

Apabila lebar skrin kurang daripada atau sama dengan 768px, bekas flex akan menyusun elemen anak secara menegak.

Ringkasan

Langkah gaya CSS termasuk menulis gaya CSS, pemilih, reka letak dan model kotak serta reka bentuk responsif. Dalam pembangunan sebenar, kita perlu menentukan gaya dan susun atur yang sesuai berdasarkan keperluan khusus untuk mencapai pengindahan dan reka bentuk struktur halaman web. Mahir dalam pengetahuan asas dan teknik biasa CSS boleh meningkatkan kecekapan pembangunan web.

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