Nama lengkap CSS adalah Cascading Style Sheet. Lembar gaya berjenjang.
1. Empat metode implementasi CSS:
1. Tipe tersemat:
2. Tipe tautan eksternal:
3. Tipe yang diimpor
4. Tipe atribut:
2. Definisi CSS:
Pilih objek {atribut 1: nilai 1; atribut 2: nilai 2; atribut 3: nilai 3;
menyukai:
td{ukuran font:12px;warna:#FFFF00}
.namaku{ukuran font:12px;warna:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
Tiga. Empat objek pilihan
1.Pemilih HTML (NamaTag)
2.pemilih kelas (.NAME)
3.Pemilih ID (#NamaID)
4. Objek khusus (a:hover a:link a:visited a:active)
1.HTML selector
Pemilih HTML adalah karakter markup HTML, seperti: DIV, TD, H1. Cakupan pemilih HTML adalah semua tag di semua halaman yang gayanya diterapkan.
contoh:
td
{
warna: #FF0000;
}
-->
Catatan: Fungsi kode tersebut adalah untuk secara otomatis mengubah teks di sel tabel menjadi merah.
2.pemilih kelas
Untuk menentukan pemilih kelas, Anda perlu menambahkan titik "." pada namanya. Seperti ".nama kelas". Cakupan pemilih kelas adalah semua tag yang mengandung "class="classname"".
contoh:
.fontMerah
{
warna: #FF0000;
}
-->
Catatan: Tidak ada "class="fontRed"" di yang kedua, jadi teks tidak berubah menjadi merah.
3. Pemilih ID
Untuk menentukan pemilih ID, Anda perlu menambahkan titik "#" pada namanya. Seperti "#NamaID". Cakupan pemilih ID adalah semua tag yang berisi "ID="namakelas"".
Contoh:
#fontRed
{
warna: #FF0000;
}
-->
Catatan: Tidak ada "ID="fontRed"" pada teks kedua, sehingga teks tidak berubah menjadi merah.
4. Objek khusus Ada empat jenis objek khusus, yang ditetapkan untuk objek terkait:
a: arahkan hyperlink saat mouse digerakkan
a:link hyperlink biasa yang tidak dapat diakses
a: mengunjungi hyperlink yang dikunjungi
Cakupan objek khusus hyperlink a:active ketika mouse diklik adalah semua penanda (kalimat ini perlu dibahas, karena akan segera ada metode untuk membatalkan kata "semua").
contoh:
a: arahkan kursor
{
warna: #0000FF;
dekorasi teks: garis bawah;
}
-->
Perhatikan hal berikut ini, sangat bermanfaat! ! !
a.nama kelas: arahkan kursor
a#Nama ID: arahkan kursor
Kedua metode penulisan ini digunakan masing-masing dengan .classname dan #IDname. Cakupannya menjadi semua tag yang berisi "class="classname"" atau "ID="IDname"". Metode penulisan ini dapat membantu Anda mendapatkan beberapa efek a:hover pada halaman yang sama. Anda dapat melihat perbedaan antara teks bilah navigasi di beranda Yiwang dan judul artikel biasa saat Anda mengarahkan mouse ke atasnya.
4. Aplikasi:
1. Secara otomatis menerapkan penanda
2. Kelas khusus class="NAMA"
3.ID ID="Nama ID"
4. Objek khusus secara otomatis diterapkan 5. Properti CSS
Ada banyak properti CSS, seperti warna, yang paling banyak digunakan di atas, yang menunjukkan warna teks. background-color mewakili warna latar belakang. Ini yang paling penting, tapi karena tidak sulit, lihat saja manual terkait.
Properti Tag CSS/Referensi Properti Berikut adalah daftar properti tag style sheet (CSS) yang saat ini didukung.
Atribut/atribut tag CSS,
atribut perilaku, font perilaku
, dan arah atribut teks
arah [di?rek??n] panduan
font
font-keluarga
ukuran font
gaya font
varian font [?v??ri?nt] varian
berat font [weit] berat
mode waktu [m?ud] mode
tata letak-grid [?leiaut] pengaturan huruf tata letak [ɡrid] kisi
layout-grid-char [t?ɑ:](bakar..)
tata letak-garis kisi
mode tata letak-grid
tipe tata letak-grid
spasi huruf [?biarkan?] spasi huruf [?speisi?].
jeda baris [breik] jeda
tinggi garis [hait] tinggi
tinggi minimum
menyelaraskan rubi [?ru:bi] rubi
ruby-overhang [??uv??hæ?] menonjol
posisi ruby [p??zi??n] posisi
perataan teks
spasi otomatis teks [speis] spasi otomatis
dekorasi teks [?dek??rei??n] dekorasi
pengaturan huruf indentasi teks [dalam?dent]
perataan teks-justify [?d??stifai].
teks-kashida-spasi
luapan teks [??uv??fl?u] meluap
transformasi teks [træns?f?:m] berubah
posisi garis bawah teks
unicode-bidi [?bi:di]
perataan vertikal
ruang putih
istirahat kata
bungkus kata
mode penulisan
dan lampiran latar belakang
warna latar belakang
gambar latar belakang
posisi latar belakang
latar belakang-posisi-x
latar belakang-posisi-y
ulangi latar belakang
batas atribut tata letak
warna
perbatasan-bawah
warna batas bawah
gaya perbatasan-bawah
lebar batas bawah
keruntuhan perbatasan*
warna batas
kiri perbatasan
batas-kiri-warna
gaya perbatasan-kiri
perbatasan-kiri-lebar
kanan perbatasan
warna batas kanan
gaya perbatasan-kanan
perbatasan-kanan-lebar
gaya perbatasan
perbatasan-atas
warna batas atas
gaya perbatasan atas
perbatasan-lebar atas
lebar batas
jernih
mengambang
aliran tata letak
batas
margin-bawah
margin-kiri
margin-kanan
margin-atas
lapisan
bantalan-bawah
padding-kiri
padding-kanan
bantalan atas
scrollbar-3dlight-color
scrollbar-panah-warna
scrollbar-warna dasar
scrollbar-warna bayangan gelap
scrollbar-warna-wajah
scrollbar-sorot-warna
scrollbar-bayangan-warna
tata letak tabel
atribut klasifikasi
zoom
menampilkangaya daftar
gambar gaya daftar
posisi gaya daftar
klip
bawah atribut pemosisian
tipe gaya daftar
tinggi
kiri
meluap
meluap-x
meluap-y
posisi
Kanan
atas
visibilitas
lebar
halaman atribut cetak
indeks-z
pageBreakAfter
pageBreakBefore
filter atribut filter
kelas semu dan atribut lainnya: aktif
@charset
kursor
:huruf pertama
: baris pertama
@ font-wajah
: melayang
@impor
!penting
:link
@media
@halaman
:dikunjungi
cara utama untuk mencapai efek batas gambar CSS
. Cara yang lebih sederhana adalah dengan langsung menentukan batas (border) untuk img di file CSS.
img.dibingkai {
bantalan: 6 piksel;
batas: 1px solid #CCCCCC;
warna latar belakang: #FFFFFF;
Kemudian dalam file HTML, atau ketika halaman web diperbarui, menggunakan class="framed" untuk definisi gambar yang disematkan akan memiliki efek batas yang sesuai.
Kelebihan dari cara diatas adalah relatif sederhana, namun efek yang dicapai relatif monoton dan belum tentu mencapai hasil yang memuaskan dan beberapa efek khusus seperti bayangan, perubahan warna, dll. Hal ini dapat dilakukan dengan sangat baik dengan menggunakan substitusi gambar dan terjemahan posisi. Saya tidak akan menjelaskan secara detail di sini. Saya yakin setelah Anda mempelajari CSS dasar, tidak akan sulit untuk menantang efek CSS tingkat lanjut.
Menyortir sintaks css untuk batas tabel.
Kita tahu bahwa Dreamweaver melakukan pekerjaan yang baik dalam membuat tabel, tetapi pada titik tertentu masih harus dikombinasikan dengan css untuk mencapai beberapa efek tertentu. Mari kita memilah sintaks css untuk batas tabel terlebih dahulu. lalu perkenalkan secara terpisah. Cara mempercantik border tabel menggunakan css.
Sintaks css khusus untuk batas tabel
meliputi: lebar batas atas, lebar batas kanan, lebar batas bawah, lebar batas kiri, lebar batas, warna batas, gaya batas, batas atas, batas bawah, batas kiri, batas kanan, batas, lebar, tinggi, label terkait, dll.
1. Sintaks lebar batas atas
: lebar batas atas: <nilai>
Nilai yang diizinkan: tipis | sedang |. <panjang>
Nilai awal: sedang
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak
Atribut lebar batas atas digunakan untuk menentukan a Lebar batas atas elemen. Nilai dapat berupa salah satu dari tiga kata kunci, tidak ada satupun yang dipengaruhi oleh ukuran atau panjang font, dan dapat digunakan untuk menerapkan lebar proporsional. Nilai negatif tidak diperbolehkan. Ini juga dapat digunakan untuk menyingkat batas atas, lebar batas, atau properti batas.
2. Sintaks lebar tepi kanan
: lebar tepi kanan: <nilai>
Nilai yang diizinkan: tipis | sedang |. <panjang>
Nilai awal: sedang
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak
Atribut lebar tepi kanan digunakan untuk menentukan elemen Lebar batas kanan. Nilai dapat berupa salah satu dari tiga kata kunci, tidak ada satupun yang dipengaruhi oleh ukuran atau panjang font, dan dapat digunakan untuk menerapkan lebar proporsional. Nilai negatif tidak diperbolehkan. Bisa juga digunakan untuk menyingkat border kanan, lebar border, atau properti border.
3. Sintaks lebar batas bawah
: lebar batas bawah: <nilai>
Nilai yang diizinkan: tipis | sedang |. <panjang>
Nilai awal: sedang
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak
Atribut lebar batas bawah digunakan untuk menentukan elemen Lebar batas bawah. Nilai dapat berupa salah satu dari tiga kata kunci, tidak ada satupun yang dipengaruhi oleh ukuran atau panjang font, dan dapat digunakan untuk menerapkan lebar proporsional. Nilai negatif tidak diperbolehkan. Ini juga dapat digunakan untuk menyingkat batas bawah, lebar batas, atau properti batas.
4. Sintaks lebar batas kiri
: lebar batas kiri: <nilai>
Nilai yang diizinkan: tipis | sedang |. <panjang>
Nilai awal: sedang
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak
Atribut lebar batas kiri digunakan untuk menentukan elemen Lebar batas kiri. Nilai dapat berupa salah satu dari tiga kata kunci, tidak ada satupun yang dipengaruhi oleh ukuran atau panjang font, dan dapat digunakan untuk menerapkan lebar proporsional. Nilai negatif tidak diperbolehkan. Ini juga dapat digunakan untuk menyingkat batas kiri, lebar batas, atau properti batas.
5. Sintaks lebar batas
: lebar batas: <nilai>
Nilai yang diizinkan: [ tipis | sedang |. <panjang> ]{1,4}
Nilai awal: Tidak ditentukan
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak ada
atribut Lebar batas Menyetel batas elemen dengan satu hingga empat nilai, dimana nilainya adalah kata kunci atau panjang. Panjang negatif tidak diperbolehkan. Jika keempat nilai diberikan, maka nilai tersebut berlaku masing-masing pada gaya batas atas, kanan, bawah, dan kiri. Jika suatu nilai diberikan, maka nilai tersebut akan diterapkan pada setiap sisi. Jika dua atau tiga nilai diberikan, nilai yang dihilangkan sama dengan sisi yang berlawanan. Properti ini adalah singkatan dari properti atas, kanan, bawah, dan kiri. Anda juga dapat menggunakan atribut perbatasan yang disingkat.
6. Sintaks warna batas
: warna batas: <nilai>
Nilai yang diizinkan: <warna>{1,4}
Nilai awal: Nilai atribut warna
berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak
Atribut warna batas menetapkan batas warna suatu elemen. Anda dapat menggunakan satu hingga empat kata kunci. Jika keempat nilai diberikan, maka nilai tersebut berlaku masing-masing pada gaya batas atas, kanan, bawah, dan kiri. Jika suatu nilai diberikan, maka nilai tersebut akan diterapkan pada setiap sisi. Jika dua atau tiga nilai diberikan, nilai yang dihilangkan sama dengan sisi yang berlawanan. Anda juga dapat menggunakan atribut perbatasan yang disingkat.
7. Sintaks gaya batas
: gaya batas: <nilai>
Nilai
yang diperbolehkan: [ tidak ada |. putus-putus |.
putus-putus |. alur ganda |. punggungan |
dengan: Tidak
Properti border-style digunakan untuk mengatur gaya batas suatu elemen. Properti ini harus digunakan untuk menentukan batas yang terlihat. Anda dapat menggunakan satu hingga empat kata kunci. Jika keempat nilai diberikan, maka nilai tersebut berlaku masing-masing pada gaya batas atas, kanan, bawah, dan kiri. Jika suatu nilai diberikan, maka nilai tersebut akan diterapkan pada setiap sisi. Jika dua atau tiga nilai diberikan, nilai yang dihilangkan sama dengan sisi yang berlawanan. Anda juga dapat menggunakan atribut perbatasan yang disingkat.
tidak ada: tidak ada gaya;
putus-putus: garis putus-putus;
putus-putus: garis putus-putus;
padat: garis padat;
ganda: garis ganda;
alur: garis alur;
punggung bukit: punggung bukit;
sisipan: cekung;
Awal: cembung.
8. Sintaks batas atas
: batas atas: <nilai>
Nilai yang diizinkan: <lebar batas atas> ||. <gaya batas> ||. <warna>
Nilai awal: Tidak ditentukan
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak ada
atribut Batas atas Adalah a singkatan untuk mengatur lebar, gaya, dan warna batas elemen. Perhatikan bahwa hanya satu gaya batas yang dapat diberikan. Anda juga dapat menggunakan atribut perbatasan yang disingkat.
9. Sintaks batas kanan
: batas kanan: <nilai>
Nilai yang diperbolehkan: <lebar batas kanan> ||. <gaya batas> ||. <warna>
Nilai awal: Tidak ditentukan
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak ada
atribut batas kanan Adalah a singkatan untuk mengatur lebar, gaya, dan warna batas kanan elemen. Perhatikan bahwa hanya satu gaya batas yang dapat diberikan. Anda juga dapat menggunakan atribut perbatasan yang disingkat.
10. Sintaks batas bawah
: batas bawah: <nilai>
Nilai yang diperbolehkan: <Lebar batas bawah> || <Gaya batas> ||. <Warna>
Nilai awal: Tidak ditentukan
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak ada
atribut batas bawah Adalah a singkatan untuk mengatur lebar, gaya, dan warna batas bawah elemen. Perhatikan bahwa hanya satu gaya batas yang dapat diberikan. Anda juga dapat menggunakan atribut perbatasan yang disingkat.
11. Sintaks batas kiri
: batas kiri: <nilai>
Nilai yang diperbolehkan: <lebar batas kiri> ||. <gaya batas> ||. <warna>
Nilai awal: Tidak ditentukan
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak ada
properti batas kiri Adalah a singkatan untuk mengatur lebar, gaya, dan warna batas kiri elemen. Perhatikan bahwa hanya satu gaya batas yang dapat diberikan. Anda juga dapat menggunakan atribut perbatasan yang disingkat.
12. Sintaks batas
: batas: <nilai>
Nilai yang diizinkan: <lebar batas> ||. <gaya batas> ||. <warna>
Nilai awal: Tidak ditentukan
Berlaku untuk: Semua objek
Kompatibilitas mundur: Tidak
Properti perbatasan adalah pengaturan Singkatan untuk lebar, gaya, dan warna batas elemen.
Contoh deklarasi perbatasan antara lain:
H2 { border: alur 3em }
A:link { batas: biru solid }
A: dikunjungi { batas: titik tipis #800080 }
A:active { border: bold double red }
Atribut border hanya dapat mengatur empat jenis border; atribut ini hanya dapat memberikan lebar dan gaya pada satu set border. Untuk memberikan nilai yang berbeda pada keempat batas suatu elemen, pembuat halaman web harus menggunakan satu atau beberapa atribut, seperti: batas atas, batas kanan, batas bawah, batas kiri, warna batas, lebar batas, gaya batas, Lebar tepi atas, lebar tepi kanan, lebar tepi bawah, atau lebar tepi kiri.
13. Sintaks lebar
: lebar: <nilai>
Nilai yang diizinkan: <panjang> |. <persen> |.otomatis
Nilai awal: otomatis
Berlaku untuk: Level blok dan elemen pengganti
Kompatibilitas mundur: Tidak
Nilai awal atribut lebar adalah "otomatis", yaitu Merupakan lebar asli elemen (ada lebar elemen itu sendiri). Persentase mengacu pada lebar elemen induk. Nilai panjang negatif tidak diperbolehkan.
14.
Sintaks tinggi: tinggi: <nilai>
Nilai yang diizinkan: <panjang> |. otomatis
Nilai awal: otomatis
Berlaku untuk: Level blok dan elemen pengganti
Kompatibilitas mundur: Tidak
Nilai awal atribut ketinggian adalah "otomatis", yang merupakan elemen Tinggi aslinya (ada tinggi elemen itu sendiri). Persentase mengacu pada lebar elemen induk. Nilai panjang negatif tidak diperbolehkan.
15. Mengenai label tabel label
, definisi gaya tabel secara keseluruhan harus ditempatkan di dalam tabel;
label sel td, definisi gaya sel harus ditempatkan di td.
BODY adalah elemen utama dokumen web. Semua rentang yang terlihat berada dalam elemen <BODY>.
TOMBOL Tombol pada kolom form dapat berupa “submit”, “reset”, dan sebagainya.
DIV mendefinisikan suatu area pada halaman web. Tinggi, lebar, atau posisi absolut area tersebut diketahui
Elemen gambar IMG, tentukan sumber gambar dengan menentukan atribut "src".
Bidang formulir masukan INPUT
Efek subtitle bergerak MARQUEE
SPAN mendefinisikan suatu area pada halaman web. Tinggi, lebar, atau posisi absolut area tersebut diketahui
Area teks TEXTAREA
Kotak teks masukan multi-baris TFOOT
Sel header tabel TH
Judul tabel THEAD
Baris tabel TR