HTML CSS
1. Pengenalan asas kepada CSS
Cascading Style Sheet (Cascading Style Sheet) dirujuk sebagai "CSS", biasanya juga dipanggil "Style Sheet (Style Sheet)", yang digunakan untuk menggayakan web halaman. Sebagai contoh, jika anda mahu perkataan pautan menjadi biru apabila ia tidak diklik, dan kemudian bertukar merah dan bergaris apabila tetikus dialihkan, ini adalah gaya. Dengan menyediakan helaian gaya, anda boleh mengawal secara seragam atribut paparan setiap tanda dalam HTML. Helaian gaya berlatarkan membolehkan orang ramai mengawal penampilan halaman web dengan lebih berkesan. Menggunakan helaian gaya berlatarkan, anda boleh mengembangkan keupayaan anda untuk menentukan kedudukan dan penampilan elemen halaman web dengan tepat dan mencipta kesan khas.
CSS ialah singkatan daripada Lembaran Gaya Cascading Bahasa Inggeris (Cascading Style Sheets) Ia adalah bahasa komputer yang digunakan untuk menyatakan gaya fail seperti HTML atau XML. Versi terbaru CSS ialah CSS3, iaitu bahasa reka bentuk gaya yang benar-benar boleh memisahkan prestasi dan kandungan halaman web. Berbanding dengan prestasi HTML tradisional, CSS boleh melakukan kawalan tepat tahap piksel ke atas kedudukan dan susun atur objek dalam halaman web, menyokong hampir semua gaya saiz fon, mempunyai keupayaan untuk mengedit objek halaman web dan gaya model, dan boleh melakukan pendahuluan. Interaksi. Reka bentuk kini merupakan bahasa reka bentuk ekspresif terbaik berdasarkan paparan teks. CSS boleh memudahkan atau mengoptimumkan kaedah penulisan mengikut keupayaan pemahaman pengguna yang berbeza, menjadikannya sangat mudah dibaca untuk semua jenis orang.
2. Cara menggunakan CSS
Terdapat tiga cara untuk menggunakan helaian gaya pada halaman tapak:
Gaya sebaris - digunakan dalam gaya elemen HTML" atribut
Helaian gaya dalaman - gunakan elemen <style> dalam kawasan <head> pada dokumen HTML untuk memasukkan CSS
Rujukan luaran - menggunakan fail CSS luaran
Setiap kaedah mempunyai kebaikan dan keburukan:
Apabila anda ingin menggunakan gaya yang sama secara konsisten pada semua atau sebahagian daripada halaman di tapak anda , anda boleh menggunakan helaian gaya rujukan luaran. Menentukan gaya dalam satu atau lebih helaian gaya luaran dan memautkannya ke semua halaman web memastikan penampilan yang konsisten merentas semua halaman web. Jika orang memutuskan untuk menukar gaya, mereka hanya perlu mengubahnya sekali dalam helaian gaya luaran dan perubahan itu akan ditunjukkan pada semua halaman yang dipautkan ke helaian gaya. Biasanya helaian gaya luaran mempunyai .css sebagai sambungan fail, seperti gaya biasa Common.css dalam sistem keluaran berita. Kemudian pautkannya dalam halaman yang memerlukan gaya ini, seperti:
<link href="/css/Common.css" rel="stylesheet" type="text/css"/ > ;
Apabila orang hanya mahu menentukan gaya halaman web semasa, helaian gaya dalaman boleh digunakan. Helaian gaya dalaman ialah helaian gaya bertingkat yang "terbenam" dalam teg <HEAD> Gaya dalam helaian gaya terbenam hanya boleh digunakan pada halaman web yang sama. Seperti:
<style type="text/css">
<!-- /* Sertakan gaya yang diisytiharkan dalam ulasan html, yang boleh menyelesaikan masalah penyemak imbas lama yang tidak mengenali gaya*/ -->
badan {background:grey ;}
</style>
Gunakan gaya sebaris untuk menggunakan atribut helaian gaya berlatarkan pada elemen halaman web. Contohnya:
<pstyle="@importurl('style3.css');">dokumen CSS</p>
<!-- Tidak Boleh Menggunakan @import dalam atribut gaya -->
Jika halaman web dipautkan ke helaian gaya luaran, gaya sebaris atau dalaman yang dibuat untuk halaman web akan melanjutkan atau mengatasi atribut yang ditentukan dalam luaran helaian gaya.
Untuk menggunakan gaya daripada helaian gaya luaran pada halaman web, pautkan halaman web ke helaian gaya dengan menggunakan arahan Pautan Helaian Gaya pada menu Format. Anda boleh memautkan satu atau beberapa helaian gaya ke halaman web semasa dalam mod paparan halaman Web, ke halaman web yang dipilih dalam senarai folder, atau ke semua halaman web di tapak.
Kotak Gaya menyenaraikan teg HTML standard, seperti tajuk 1, serta pemilih kelas atau ID yang terkandung dalam helaian gaya terbenam atau helaian gaya luaran yang dipautkan ke halaman web. Untuk menggunakan gaya pada elemen halaman web, pilih gaya dan klik gaya atau pemilih dalam kotak Gaya.
Dalam Microsoft FrontPage 2000, ciri pemformatan tertentu digunakan secara automatik sebagai gaya sebaris. Contohnya: Jika anda menggunakan arahan Borders & Shadows (pada menu Format) untuk menggunakan kotak di sekeliling perenggan biasa, FrontPage menulis maklumat pemformatan sebagai sifat gaya sebaris tanda perenggan (contohnya: <pstyle=" border-style : pepejal">). Walau bagaimanapun, aplikasi beberapa sifat memerlukan penggunaan CSS, dan yang lain memerlukan penggunaan HTML. Jika seseorang hanya mahu menggunakan gaya sebaris menggunakan CSS, mereka boleh menggunakan butang Gaya (terletak dalam kotak dialog Sifat unsur Web) untuk menggunakan pemilih kelas atau ID atau gaya sebaris.
Contoh 1
Atribut warna latar belakang mentakrifkan warna latar belakang elemen:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body style="background-color: green;"> <h2 style="background-color: red;">标题</h2> <p style="background-color: blue;">内容</p> </body> </html>
Contoh 2
Gunakan atribut fon-famili (font), warna (warna) dan saiz fon (saiz fon) ) untuk menentukan gaya fon:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1 style="font-family:verdana;">文字的标题</h1> <p style="font-family:arial;color:red;font-size:20px;">下面是一句话。</p> </body> </html>
Contoh 3
Gunakan atribut penjajaran teks (penjajaran teks) untuk menentukan teks mendatar dan menegak Penjajaran:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p> </body> </html>
