CSS (Cascading Styel Sheet) adalah serangkaian aturan pemformatan yang mengontrol tampilan halaman Web. Ini adalah salah satu alat penting untuk desain web. Selanjutnya kita akan mulai mempelajari format sintaks dasar css.
1. Aturan definisi CSS
Cascading style sheet adalah file teks biasa lengkap, biasanya digunakan sebagai file terpisah dengan ekstensi "css". Isinya berisi seperangkat aturan yang memberi tahu browser cara mengatur dan menampilkan konten dalam aturan definisi CSS HTML tertentu terdiri dari tiga bagian: penyeleksi, atribut, dan nilai atribut. Sintaksnya adalah sebagai berikut:
Sintaks: pemilih { properti: nilai }
↑ ↑ ↑
pemilih {properti: nilai}
Gaya CSS terdiri dari serangkaian aturan yang diurai oleh browser web dan kemudian diterapkan ke elemen terkait dalam dokumen HTML. Aturan gaya CSS terdiri dari tiga bagian, yaitu penyeleksi, atribut, dan nilai:
1. Selector: Selector adalah tag html untuk menentukan gaya. Setelah tag html didefinisikan sebagai pemilih, konten di bawah tag di halaman html akan diubah sesuai dengan aturan yang ditentukan oleh CSS.
2. Atribut: Nama gaya yang ingin Anda atur untuk elemen HTML mengacu pada konten yang akan diubah di pemilih. Yang umum meliputi: atribut font, atribut warna, atribut teks, dll. Di bawah ini adalah style sheet yang kami tentukan.
3. Nilai: Nilai suatu atribut, yang terdiri dari nilai numerik dan satuan atau kata kunci, digunakan untuk mengontrol efek tampilan atribut tertentu.
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}Dalam lembar gaya ini:
1. @charsetgb2312; berarti menggunakan kumpulan karakter standar nasional Tiongkok.
2. body dan p adalah dua tag dalam html, dan tiga gaya ditetapkan untuk kedua tag ini, yaitu:
font-family: Menentukan jenis font font.
"> 2. Sematkan lembar gaya
Lembar gaya CSS yang ditentukan di dalam halaman Html disebut lembar gaya CSS tertanam, yaitu, di bagian kepala dokumen HTML, tag gaya digunakan dan serangkaian aturan CSS ditentukan dalam tag.
Sintaks: <head><styletype=text/css><!--......--></style></head>
menjelaskan:
<style> menandakan awal dari style sheet CSS, dan tanda akhirnya adalah </style>. Pada tanda awal <style>, Anda dapat menambahkan beberapa atribut sesuai kebutuhan, seperti atribut type=text/css pada gambar di atas. kolom yang menandakan bahwa style sheet CSS mengadopsi tipe MIME, ciri khas dari tipe ini adalah ketika browser tidak mendukung kode CSS, maka kode CSS tersebut difilter untuk mencegah browser menampilkan kode CSS dalam bentuk. kode sumber. Untuk memastikan keandalan yang lebih baik, tambahkan pengidentifikasi komentar <!--...--> lagi di style sheet. Aturan CSS ditentukan dalam pengidentifikasi komentar ini.
Contoh 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Lembar gaya CSS tertanam</title><styletype=text/css><!--@charsetgb2312; {font-fa mily:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body> Burung dari ribuan gunung terbang melintasi ribuan jalur dan jejak manusia terhapus<p>Burung dari ribuan gunung terbang melintasi ribuan jalur dan jejak manusia terhapus</p></body></html>3. Tautan ke style sheet eksternal
Lembar gaya CSS eksternal adalah file eksternal dengan akhiran .css. Mendefinisikan lembar gaya eksternal dapat diterapkan ke beberapa halaman. Menggunakan tag link di halaman HTML, Anda dapat menghubungkan style sheet css eksternal. Sintaksnya adalah sebagai berikut:
tata bahasa:
<linkrel=stylesheethref=*.css” tipe=teks/css>
parameter:
1. Atribut rel menunjukkan bagaimana style sheet akan digabungkan dengan dokumen HTML. nilai rel: Stylesheet, menunjukkan penentuan style sheet eksternal
2. *.css adalah file style sheet yang disimpan secara terpisah.
Contoh 2 Tentukan file css eksternal p2.css, lalu sambungkan file tersebut ke file t2.htm.
Contoh 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Tautan ke style sheet eksternal</title><styletype=text/css><!--@charsetgb2312; body {font-family:宋体;f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>Yang terhormat, kamu Terbang Pelan-pelan hati-hati dengan mawar berduri di depan<p>Sayangku, buka mulutmu, wangi bunga yang tertiup angin akan membuatmu mabuk</p></body></html>4. Lembar gaya sebaris
Gaya sebaris mengacu pada lembar gaya CSS yang ditentukan dalam tag khusus HTML. Tag HTML yang umum digunakan terutama adalah beberapa elemen dalam BODY, seperti: <p>, <h2>, <ul>, <div>, dll. Berikut ini adalah contoh gaya inline.
Contoh 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Dokumen Tanpa Judul</title></head><body><divstyle=color:blue;font- size :30px;>Aroma bunga yang tertiup angin akan membuatmu mabuk</div><pstyle=color:#ff0000;font-style:italic;>Aroma bunga yang tertiup angin akan membuatmu mabuk</p>< /tubuh></html>
5. Impor style sheet eksternal
Mengimpor style sheet eksternal berarti bahwa style sheet yang tertanam telah dibuat dalam file html, namun beberapa pengaturan style sheet eksternal perlu digunakan. Dalam hal ini, Anda dapat mengimpor style sheet eksternal di <style> dan menggunakan @. impor, seperti yang ditunjukkan pada contoh di bawah ini.
<html><head><styletype=text/css><!--@importurl(mystyle.css);Deklarasi style sheet lainnya--></style></head></body>..... .</body></html>
Diantaranya, @import url(mystyle.css); berarti mengimpor style sheet mystyle.css. Style sheet eksternal yang diimpor harus berada di awal style sheet, di atas style sheet internal.
Contoh 4
Tentukan file css eksternal p4.css, lalu impor file dalam file t4.htm
Contoh 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Impor style sheet eksternal</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;tubuh {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>Ribuan burung terbang melintasi ribuan gunung dan tidak ada jejak manusia yang terlihat<p>Ribuan burung terbang melintasi ribuan gunung dan tidak ada jejak manusia yang terlihat</p></body></html>6. Warisan style sheet css
Dalam style sheet CSS, beberapa atribut dari tag anak akan mewarisi atribut dari tag induk. Misalnya, tag p adalah elemen anak dari badan tag. Ketika tag p tidak menyetel atribut warna font, kontennya di p akan menggunakan nilai warna pada isi, contoh berikut menggambarkan situasi ini.
Contoh 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Lembar gaya CSS tertanam</title><styletype=text/css><!--@charsetgb2312; { font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千山鸟Terbang melintasi ribuan jalur, jejak manusia terhapus<p>Ribuan gunung, burung terbang melintasi ribuan jalur, jejak manusia terhapus</p></body></html>7. Tetapkan beberapa elemen
CSS memungkinkan satu format untuk diterapkan ke beberapa tag. Setiap tag dipisahkan dengan koma saat digunakan sebagai pemilih, seperti yang ditunjukkan pada contoh berikut.
Contoh 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Lembar gaya CSS tersemat</title><styletype=text/css><!--@charsetgb2312; ,h2,h3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>Ribuan burung terbang melintasi ribuan gunung dan ribuan orang menghilang</h1> <h2> Burung dari ribuan gunung terbang melintasi ribuan jalur, menghilang tanpa jejak manusia</h2><h3>Burung dari ribuan gunung terbang melintasi ribuan jalur, menghilang tanpa jejak manusia</h3><p>Burung dari ribuan gunung terbang melintasi ribuan jalan, menghilang tanpa jejak manusia</p></ body></html>