Bagaimana untuk memasukkan gaya css ke dalam html-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memasukkan gaya css ke dalam html

青灯夜游

Lepaskan： 2023-01-11 09:20:09

asal

14815 orang telah melayarinya

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.

Bagaimana untuk memasukkan gaya css ke dalam 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>

Salin selepas log masuk

2. Sebaris

Gaya CSS sebaris adalah untuk meletakkan kod css di dalam bahagian CSS sebaris perlu diletakkan di antara teg

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>

Salin selepas log masuk

3. Sambungan luar

Sambungan luaran ialah menggunakan elemen tag pautan untuk merujuk fail CSS luaran (fail.css) ke halaman HTML diletakkan di bahagian

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

Salin selepas log masuk

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 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 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!