Rumah > Artikel > hujung hadapan web > Apakah gaya sebaris css

Apakah gaya sebaris css

青灯夜游asal: 2022-08-01 16:34:286857semak imbas

Dalam css, gaya sebaris, juga dikenali sebagai gaya sebaris, adalah untuk menetapkan gaya CSS elemen secara langsung melalui atribut gaya di dalam teg HTML Sintaks "". Gaya sebaris akan menimpa kesan gaya yang sama bagi kaedah pengenalan lain adalah sukar untuk berbilang elemen untuk berkongsi gaya, yang tidak kondusif untuk penggunaan semula kod dan kod CSS bercampur, yang tidak kondusif untuk pengaturcara dan enjin carian.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Gaya sebaris, juga dikenali sebagai gaya sebaris, bermaksud meletakkan gaya CSS terus dalam teg dalam baris kod, biasanya dalam atribut gaya teg, iaitu, menetapkannya secara terus melalui atribut gaya dalam HTML tag Gaya CSS elemen. Memandangkan gaya sebaris dimasukkan terus ke dalam teg, ia adalah cara yang paling langsung dan ia juga paling tidak mudah untuk diubah suai.

Sintaks:

<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>

Contohnya:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p style="color: red;font-size: 30px;">我是一个段落</p>
    </body>
</html>

Apakah gaya sebaris css

Dalam contoh di atas, gaya sebaris diwakili oleh elemen HTML Untuk atribut gaya, letakkan sahaja kod CSS dalam nilai atribut CSS berbilang dipisahkan oleh titik bertitik

<p style="color: red;font-size: 30px;">我是一个段落</p>

Kelebihan gaya sebaris: <.>

Tanpa fail helaian gaya, kecekapan boleh dipertingkatkan pada satu ketika;
Kesan gaya menggunakan atribut gaya akan menjadi yang paling kuat dan akan tulis ganti yang lain Kesan gaya yang sama seperti yang diperkenalkan.

Kelemahan gaya sebaris:

Sukar untuk pelbagai elemen berkongsi gaya, yang tidak kondusif untuk penggunaan semula kod;
Kod HTML dan CSS bercampur, yang tidak sesuai untuk dibaca oleh pengaturcara dan enjin carian.

Ringkasnya, walaupun gaya sebaris mudah ditulis, kecacatan berikut boleh didapati melalui contoh:

Setiap teg perlu digayakan Tambah atribut gaya.
Perbezaannya ialah pada masa lalu, pembuat halaman web mencampurkan teg dan gaya HTML Kini, gaya sebaris ditulis melalui CSS Pada masa lalu, atribut teg HTML digunakan untuk mencapainya kesan ini. Walaupun kaedahnya berbeza, kesan gaya adalah sama: kos penyelenggaraan kemudiannya adalah tinggi, iaitu apabila mengubah suai halaman, anda perlu membuka setiap halaman tapak web satu demi satu dan mengubahnya satu demi satu, dan anda tidak dapat melihat peranan CSS sama sekali.
Menambahkan begitu banyak gaya sebaris akan menjadikan halaman besar Jika portal ditulis dengan cara ini, ia akan membazirkan lebar jalur dan trafik pelayan.

Sesetengah halaman web di Internet boleh melihat cara penulisan ini dengan melihat fail sumber Walaupun hanya sebahagian daripada halaman web dilakukan dengan cara ini, ia perlu dibezakan mengikut situasi:

Jika pengarang halaman web menulis gaya sebaris sedemikian, gaya semasa boleh ditukar dengan cepat tanpa mengambil kira konflik gaya yang ditulis sebelum ini;
Jika situasi ini wujud dalam halaman web, maka Apabila mengedit di latar belakang, gaya dijana melalui editor, atau latar belakang tidak dibangunkan sepenuhnya Ia adalah perlu untuk membangunkan pilihan untuk editor untuk memilih gaya dan bukannya menukar terus warna, ketebalan, warna latar belakang, kecondongan dan kesan lain melalui editor.
(Mempelajari perkongsian video:
Bermula dengan bahagian hadapan web

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk mengalih keluar atribut html5 dalam jqArtikel seterusnya：Bagaimana untuk mengalih keluar atribut html5 dalam jq

Artikel berkaitan

Lihat lagi