Bagaimana untuk mereka bentuk css

CSS ialah bahasa gaya yang digunakan untuk reka bentuk web Ia membolehkan kami menggayakan persembahan halaman web, dengan itu mencipta pengalaman pengguna yang lebih baik. Dalam artikel ini, saya akan menerangkan konsep asas, prinsip reka bentuk dan teknik reka bentuk biasa CSS, dengan harapan dapat membantu pemula lebih memahami dan menggunakan CSS.

1. Konsep asas CSS

1. Pemilih

Pemilih CSS digunakan untuk menentukan elemen HTML kepada pemilih biasa ialah Pemilih teg, pemilih kelas, pemilih ID, pemilih atribut, pemilih kelas pseudo, dsb. Contohnya, pemilih teg boleh menggayakan teg dengan menyatakan nama teg HTML, seperti:

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

Ini akan menetapkan saiz fon semua teg p kepada 16px dan warna kepada #333.

2. Atribut

Atribut CSS digunakan untuk menentukan gaya elemen HTML, seperti warna fon, saiz, warna latar belakang, dsb. Sifat CSS biasa termasuk saiz fon, warna, warna latar belakang, dsb.

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

Ini akan menetapkan saiz fon semua teg p kepada 16px, warna kepada #333 dan warna latar belakang kepada #fff.

3. Nilai

Nilai CSS mewakili nilai khusus yang akan ditetapkan untuk atribut, yang boleh menjadi piksel, peratusan, rentetan, dsb. Sebagai contoh, nilai atribut saiz fon boleh dalam bentuk piksel, peratusan, dsb.

p {
    font-size: 16px;
    font-size: 1em;
}

16px dan 1em di sini ialah kedua-dua nilai atribut saiz fon. Yang pertama menunjukkan bahawa saiz fon ialah 16 piksel, dan yang terakhir menunjukkan bahawa saiz fon ialah gandaan fon. saiz elemen induk Satu kali ialah saiz lalai.

2. Prinsip reka bentuk CSS

1. Warisan

Pewarisan CSS bermakna elemen anak boleh mewarisi gaya elemen induk, dengan itu mengelakkan pertindihan dan tetapan gaya. Sebagai contoh, jika anda mahu warna fon bagi kedua-dua teg p dan teg menjadi biru, anda boleh menetapkan atribut warna untuk elemen induk, dan kemudian elemen anaknya akan mewarisi gayanya secara automatik.

body {
    color: blue;
}

Ini akan menjadikan warna fon semua teg dan teg p dalam halaman berwarna biru.

2. Cascading

Cascading CSS bermakna tetapan gaya berbeza bagi elemen yang sama akan menghasilkan kesan berbeza berdasarkan keutamaan berbeza. Contohnya, jika atribut warna dan saiz fon ditetapkan pada masa yang sama dalam teg, keutamaannya akan memberi kesan.

p {
    color: red;
    font-size: 20px;
    color: blue;
}

Atribut warna di sini akan ditimpa oleh biru seterusnya, jadi warna fon terakhir ialah biru dan atribut saiz fon akan berkuat kuasa.

3. Ringkas

Tetapan gaya CSS hendaklah ringkas dan sejelas mungkin untuk mengelakkan pertindihan dan kod berlebihan serta meningkatkan kelajuan pemuatan dan kebolehselenggaraan halaman. Kesan mudah boleh dicapai dengan mengurangkan tahap pemilih dan menyingkatkan atribut.

Contohnya:

/* 不优雅的写法 */
.wrapper .content .list .item .title {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

/* 优雅的写法 */
.title {
    font: 16px/1.5 sans-serif;
    color: #333;
    margin-bottom: 10px;
}

3. Kemahiran reka bentuk CSS

1. Model kotak

Model kotak CSS merujuk kepada semua HTML elemen Ia boleh dianggap sebagai kotak segi empat tepat, termasuk empat bahagian: kandungan, padding, sempadan dan margin.

div {
    width: 300px;
    height: 200px;
    border: 10px solid #ccc;
    padding: 20px;
    margin: 30px;
}

Atribut lebar dan tinggi di sini mentakrifkan lebar dan tinggi kotak, atribut sempadan mentakrifkan gaya sempadan dan lebar kotak, atribut padding mentakrifkan jidar dalam kotak dan atribut jidar mentakrifkan jidar luar kotak .

2. Reka Letak Terapung

Reka letak terapung CSS merujuk kepada merealisasikan reka letak halaman dengan menetapkan atribut apungan elemen. Elemen terapung akan melepaskan diri daripada aliran dokumen dan tidak lagi menduduki kedudukannya sendiri Sebaliknya, ia akan terapung ke kiri atau kanan dan menjejaskan kedudukan elemen di sekelilingnya.

img {
    float: left;
    margin-right: 20px;
}

Teg img di sini menetapkan atribut apungan ke kiri, yang bermaksud terapung ke kiri dan menetapkan atribut jidar kanan kepada 20px, yang bermaksud jidar kanan ialah 20 piksel.

3. Reka bentuk responsif

Reka bentuk responsif CSS merujuk kepada penggunaan pertanyaan media untuk menetapkan gaya untuk peranti dan saiz skrin yang berbeza untuk mencapai kesan pembentangan halaman yang berbeza. Ini boleh dicapai dengan menyediakan helaian gaya CSS yang berbeza atau mentakrifkan pertanyaan media yang berbeza dalam helaian gaya yang sama.

@media (max-width: 768px) {
    /* 在窄屏幕下的样式设置 */
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* 在宽屏幕下的样式设置 */
}

@media (min-width: 1025px) {
    /* 在超宽屏幕下的样式设置 */
}

Di atas adalah konsep asas, prinsip reka bentuk dan teknik reka bentuk biasa CSS. Dalam aplikasi praktikal, teknik dan kaedah yang berbeza perlu digunakan mengikut keperluan untuk mencapai kesan dan fungsi halaman. Pada masa yang sama, pembelajaran berterusan dan menguasai pengetahuan berkaitan CSS juga merupakan kunci untuk meningkatkan keupayaan reka bentuk web.

Atas ialah kandungan terperinci Bagaimana untuk mereka bentuk css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!