Rumah > Artikel > hujung hadapan web > Bagaimana untuk memasukkan gaya css ke dalam html
Bagaimana untuk memasukkan gaya css ke dalam html
- 青灯夜游asal
- 2021-09-14 16:53:3414807semak imbas
Cara memasukkan gaya css ke dalam HTML: 1. Gunakan atribut gaya untuk memasukkan kod CSS ke dalam teg HTML tertentu 2. Letakkan kod CSS ke dalam pasangan tag gaya di bahagian kepala dokumen; . Masukkan kod CSS ke dalam fail CSS luaran, gunakan tag pautan untuk memperkenalkannya ke dalam dokumen html.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
1. Sebaris
Gunakan atribut gaya untuk menetapkan gaya CSS dalam teg HTML tertentu.
Adalah disyorkan untuk tidak menggunakan CSS sebaris kerana setiap teg HTML perlu digayakan secara berasingan dan mengurus tapak web anda boleh menjadi sangat sukar jika anda hanya menggunakan CSS sebaris. Walau bagaimanapun, ia boleh berguna dalam situasi tertentu. Contohnya, dalam situasi di mana anda tidak mempunyai akses kepada fail CSS atau anda hanya perlu menggunakan gaya pada satu elemen. Contoh halaman HTML dengan CSS sebaris adalah seperti berikut:
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>2. Sebaris
Gaya CSS sebaris adalah untuk meletakkan kod css di dalam bahagian a801d9c20ab268ecdf000c4cd37b7338 CSS sebaris perlu diletakkan di antara teg c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927
Kelas dan ID boleh digunakan untuk merujuk kod CSS, tetapi ia hanya aktif pada halaman tertentu itu. Gaya CSS yang dibenamkan dengan cara ini dimuat turun setiap kali halaman dimuatkan, yang boleh meningkatkan kelajuan pemuatan. Menggunakan helaian gaya sebaris berguna dalam beberapa situasi, seperti menghantar seseorang templat halaman Lebih mudah untuk melihat pratonton kerana semuanya berada dalam satu halaman.
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>3. Sambungan luar
Sambungan luaran ialah menggunakan elemen tag pautan untuk merujuk fail CSS luaran (fail.css) ke halaman HTML diletakkan di bahagian a801d9c20ab268ecdf000c4cd37b7338
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Penjelasan setiap atribut:
atribut href menetapkan alamat fail helaian gaya luaran, yang boleh menjadi alamat relatif atau alamat mutlak. Atribut
rel mentakrifkan dokumen yang berkaitan, yang di sini bermaksud helaian gaya yang berkaitan.
Atribut jenis mentakrifkan jenis fail yang diimport Seperti elemen gaya, teks/css menunjukkan fail teks CSS.
Secara amnya apabila mentakrifkan teg 261f5faa98205db566fb261e4276ef68 3 atribut asas harus ditakrifkan, antaranya href ialah atribut yang mesti ditetapkan.
Anda juga boleh menambah atribut tajuk dalam elemen pautan untuk menetapkan tajuk helaian gaya pilihan Iaitu, apabila dokumen web mengimport berbilang helaian gaya, anda boleh memilih fail helaian gaya untuk digunakan nilai atribut tajuk.
Petua: Dalam penyemak imbas Firefox, anda boleh memilih pilihan "Lihat --> Gaya Halaman" dalam menu, dan kemudian nilai atribut tajuk akan dipaparkan dalam submenu Hanya pilih atribut tajuk yang berbeza Gunakan fail helaian gaya yang diperlukan secara terpilih. Pelayar IE tidak menyokong ciri ini.
Selain itu, atribut tajuk berkaitan dengan atribut rel Menurut rancangan organisasi W3C, dokumen web masa hadapan akan menggunakan berbilang elemen 261f5faa98205db566fb261e4276ef68 fail, dan fail tema, malah boleh menyertakan fail tambahan tersuai lain. Selepas mengimport begitu banyak fail dengan jenis dan nama yang berbeza, anda boleh menggunakan atribut tajuk untuk memilih Pada masa ini, peranan atribut rel menjadi jelas. Pada masa ini, ia hanya boleh dikaitkan dengan jenis helaian Gaya.
Gaya luaran ialah penyelesaian terbaik untuk aplikasi CSS Fail helaian gaya boleh dirujuk oleh berbilang halaman web Pada masa yang sama, fail halaman web boleh mengimport berbilang helaian gaya dengan berulang kali menggunakan elemen pautan untuk mengimport lembaran gaya yang berbeza.
Cadangan berkaitan: "tutorial video css"
Atas ialah kandungan terperinci Bagaimana untuk memasukkan gaya css ke dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!