Apakah css? Apa gunanya?

CSS, Cascading Style Sheets, ialah bahasa gaya yang digunakan untuk reka bentuk web. Dengan CSS, anda boleh menukar rupa, reka letak dan tingkah laku elemen individu pada halaman HTML.

CSS pada asalnya dicipta oleh pemaju di Sadie Corporation (Spector Corporation) dan menjadi standard industri pada tahun 1996. Dengan perkembangan Internet dan kemunculan bahasa HTML, CSS telah menjadi salah satu alat reka bentuk web yang paling banyak digunakan.

Mari kita lihat kegunaan asas CSS.

1. Tukar fon, warna dan saiz

Dengan menggunakan CSS, anda boleh menukar saiz, warna, fon dan atribut lain teks pada halaman dengan mudah. Sebagai contoh, anda boleh menggunakan kod berikut untuk menukar gaya teks perenggan:

p {
    color: blue;
    font-size: 16px;
    font-family: Arial;
}

Blok kod ini akan menukar warna teks semua perenggan kepada biru, saiz teks kepada 16 piksel dan fon kepada Arial.

2. Susun elemen halaman

CSS juga membolehkan anda mengawal kedudukan dan susun atur elemen individu pada halaman. Dengan menggunakan sifat kedudukan dan apungan dalam CSS, anda boleh mencapai kesan susun atur yang kompleks dengan mudah. Sebagai contoh, anda boleh melaksanakan susun atur pengepala dan pengaki yang mudah menggunakan blok kod berikut:

header {
    background-color: gray;
    height: 100px;
}

footer {
    background-color: gray;
    height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

Blok kod ini menukar warna latar belakang elemen pengepala (pengepala) dalam halaman kepada kelabu dan ketinggian kepada 100 piksel. Warna latar belakang elemen pengaki (footer) dalam halaman juga ditukar kepada kelabu, ketinggian ialah 50 piksel, dan ia diletakkan di bahagian bawah halaman.

3. Bina halaman web responsif

Dengan populariti telefon bimbit dan tablet, orang ramai semakin menggunakan peranti mudah alih untuk menyemak imbas web. Ini juga membawa kepada keperluan baharu: reka bentuk tapak web yang boleh menyesuaikan diri dengan saiz skrin yang berbeza.

CSS melaksanakan reka bentuk web responsif melalui fungsi pertanyaan media. Dengan menggunakan teknologi reka letak responsif, anda boleh menggayakan dan susun atur peranti dan lebar skrin yang berbeza dengan mudah.

@media screen and (max-width: 600px) {
    /* 小于600像素宽度时的样式 */
    body {
        font-size: 14px;
    }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    /* 在601像素至900像素宽度范围内的样式 */
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 901px) {
    /* 大于900像素宽度时的样式 */
    body {
        font-size: 18px;
    }
}

Blok kod ini akan menetapkan tiga julat lebar port pandangan yang berbeza untuk halaman dan menetapkan saiz fon yang berbeza dalam julat yang berbeza.

Untuk meringkaskan, CSS ialah bahasa gaya yang digunakan untuk mereka bentuk halaman web. Ia boleh digunakan untuk menukar rupa, reka letak dan tingkah laku setiap elemen pada halaman HTML. Dengan menguasai CSS, anda boleh mereka bentuk halaman web yang cantik, berkuasa dan mudah digunakan, menjadikan halaman web dan tapak web anda lebih menarik dan mudah digunakan.

Atas ialah kandungan terperinci Apakah css? Apa gunanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!