Pengenalan kepada sintaks CSS

CSS terdiri daripada tiga bahagian:

pemilih,

properties

nilai atribut.

Sintaks: pemilih {property: value} (pemilih {property: value})

1. Perihalan

Pemilih secara umumnya boleh dalam pelbagai bentuk yang anda mahukan dalam HTML. , seperti BODY, P, JADUAL, anda boleh mentakrifkan atribut dan nilainya melalui kaedah ini Atribut dan nilai harus dipisahkan dengan titik bertindih:

Contoh: badan {warna: hitam}, kesan daripada. contoh ini ialah menggunakan Teks pada halaman berwarna hitam.

Jika nilai atribut terdiri daripada berbilang perkataan, tanda petikan mesti ditambah pada nilai Contohnya, nama fon selalunya merupakan gabungan beberapa perkataan:

Contoh: p {font. -family: "sans serif"} (Takrifkan fon perenggan sebagai sans serif)

Jika anda perlu menentukan berbilang atribut untuk pemilih, gunakan titik bertitik untuk memisahkan semua atribut dan nilai:

Contoh: p {teks -selaraskan: tengah; warna : merah} (Perenggan disusun di tengah; dan teks dalam perenggan berwarna merah)

2 Kumpulan pemilih

Anda boleh menulis pemilih digabungkan dengan atribut dan nilai, dan pisahkan pemilih dengan koma , ini boleh mengurangkan takrifan berulang gaya:

h1, h2, h3, h4, h5, h6 { color: green } (Kumpulan ini termasuk semua elemen tajuk dan teks setiap elemen tajuk berwarna hijau)

p, jadual{ saiz fon: 9pt } (Saiz teks dalam perenggan dan jadual ialah saiz 9)

Kesannya bersamaan sepenuhnya dengan:

fon {- saiz: 9pt }

jadual { font-size: 9pt }

3. Pemilih kelas

Menggunakan pemilih kelas, anda boleh mentakrifkan elemen yang sama dan mentakrifkan kelas yang berbeza , dalam kelas tersuai Tambah noktah di hadapan nama. Jika anda mahukan dua perenggan berbeza, satu dijajarkan ke kanan dan satu ditengah, anda boleh mentakrifkan dua kelas dahulu:

p.kanan {text-align: right}

p.center { text-align: center }.

Terdapat cara lain untuk menggunakan pemilih kelas Abaikan nama teg HTML dalam pemilih, supaya beberapa elemen berbeza boleh ditakrifkan dalam gaya yang sama:

center {text-align: center} (define .center. Pemilih kelas ialah teks berpusat). Yang berikut mengklasifikasikan kedua-dua elemen h1 (tajuk 1) dan elemen p (perenggan) ke dalam kelas "tengah", yang menjadikan gaya kedua-dua elemen mengikut pemilih kelas ".center":

Tajuk ini berpusat

Perenggan ini juga berpusat

Pemilih kelas ini yang mengetepikan teg HTML ialah kaedah CSS yang paling biasa digunakan pada masa hadapan.

4. Pemilih ID

Dalam halaman HTML, parameter ID menentukan satu elemen dan pemilih ID digunakan untuk menentukan gaya berasingan untuk elemen tunggal ini. Aplikasi pemilih ID adalah serupa dengan pemilih kelas, cuma gantikan CLASS dengan ID. Gantikan kelas dalam contoh di atas dengan ID: sejajarkan perenggan ini ke kanan dan tentukan pemilih ID dengan tanda "#" sebelum nama ID. Seperti pemilih kelas, terdapat dua cara untuk menentukan atribut pemilih ID. Dalam contoh berikut, atribut ID akan memadankan semua elemen dengan id="intro":

#intro

{

font-size:110%;

;

warna:#0000ff;

warna latar:lutsinar

} (saiz fon ialah 110% daripada saiz lalai; tebal; biru; warna latar belakang adalah lutsinar) contoh, Atribut ID hanya sepadan dengan elemen perenggan dengan id="intro":

p#intro

{

font-saiz: 110%

;-berat ; Warna: #0000ff; keadaan khas. . Elemen 2 dalam ditakrifkan, dan tiada definisi untuk elemen 1 atau elemen 2 individu, contohnya:

jadual a

{

saiz fon: 12px

}

Pautan dalam jadual telah menukar saiz dan gaya teks 1,2 piksel di luar meja Masih saiz lalai.

6. Sifat melata bagi helaian gaya

Sifat melata ialah warisan. Malah, semua elemen bersarang dalam elemen akan mewarisi nilai atribut yang ditentukan oleh elemen luar, kadangkala menyusun banyak lapisan gaya bersarang bersama-sama melainkan diubah sebaliknya. Contohnya, sarang teg P dalam teg DIV:

div { color: red; font-size: 9pt}

Teks perenggan ini ialah fon 9 titik merah (kandungan dalam elemen P akan mewarisi Properties definisi DIV)

Terdapat kes di mana pemilih dalam tidak mewarisi nilai pemilih sekeliling, tetapi secara teori ini adalah istimewa. Sebagai contoh, nilai atribut sempadan atas tidak diwarisi Secara intuitif, perenggan tidak akan mempunyai nilai sempadan atas yang sama dengan BODY dokumen. Selain itu, apabila warisan helaian gaya bercanggah, gaya yang ditentukan terakhir sentiasa diutamakan. Jika warna P ditakrifkan dalam contoh di atas:

div { color: red; font-size:9pt}

p {color: blue}

CSS album

Teks dalam fon biru 9 mata. Saiz teks dalam perenggan ialah saiz 9, yang mewarisi atribut div, dan atribut warna mengikuti definisi terakhir. Apabila pemilih berbeza mentakrifkan elemen yang sama, keutamaan antara pemilih berbeza mesti diambil kira. Pemilih ID, pemilih kelas dan pemilih teg HTML Oleh kerana pemilih ID ditambahkan pada elemen terakhir, ia mempunyai keutamaan tertinggi, diikuti oleh pemilih kelas. Jika anda ingin mengatasi hubungan antara ketiga-tiga ini, anda boleh menggunakan !important untuk meningkatkan keutamaan helaian gaya, contohnya:

p { warna: #FF0000!penting }

biru { warna: # 0000FF}

#id1 { color: #FFFF00}

Tambah tiga gaya ini pada perenggan dalam halaman pada masa yang sama, dan akhirnya ia akan menjadi teks merah mengikut gaya pemilih teg HTML yang diisytiharkan oleh ! penting. Jika !important dialih keluar, pemilih ID dengan keutamaan tertinggi ialah teks kuning.

7

Sisipkan ulasan dalam CSS untuk menerangkan maksud kod anda akan membantu anda atau orang lain memahami maksud kod apabila anda atau orang lain mengedit dan menukar kod pada masa hadapan. Dalam penyemak imbas, ulasan tidak dipaparkan. Komen CSS bermula dengan "/*" dan berakhir dengan "*/", seperti berikut:

/* Takrifkan helaian gaya perenggan*/

p

{

: tengah-tengah teks ; /* Teks disusun secara mendatar dan berpusat */

warna: hitam; /* Teks berwarna hitam*/

font-family: arial /* Font ialah arial */

}

Buku imej CSS

css boleh dibangunkan dengan sebarang alat penulisan teks, seperti alatan teks dan pembangunan dreamweaver. CSS juga bahasa ini mesti digabungkan dengan HTML atau , forum, bentuk ungkapan pada halaman pada masa ini ialah senarai menegak, yang tidak cukup cantik Anda boleh menggunakan CSS untuk menambah baik senarai ini ke dalam bar navigasi mendatar dan hiperpautan:

css bahagian:

ul{

list-style:none;

margin:0px;/*Tetapkan pelayar : 0px;/*Tetapkan lekukan pelayar standard*/

}

ul li{margin:0px;padding:0px;float:left;}

ul li a{display:block :100px;height:30px;background:#efefef;color:# 333;text-decoration:none;text-align:center}

ul li a:hover{background:#333;color:#fff;}

Selepas menambah css, senarai ini menjadi bar Navigasi mendatar, hiperpautan mempunyai latar belakang yang terang, fon kelabu, tiada garis bawah, tinggi ialah 30 piksel, lebar ialah 100 piksel Apabila tetikus melepasi hiperpautan ini, ia bertukar menjadi kelabu latar belakang dan fon putih digunakan semasa membuat halaman utama, yang berkesan Dapatkan kawalan yang lebih tepat ke atas reka letak halaman, fon, warna, latar belakang dan kesan lain. Selagi anda membuat beberapa pengubahsuaian mudah pada kod yang sepadan, anda boleh menukar rupa dan format bahagian yang berbeza pada halaman yang sama, atau halaman web dengan halaman yang berbeza.

Ia boleh mencapai:

(1) Ia boleh digunakan pada hampir semua pelayar.

(2) Beberapa fungsi yang terpaksa dilaksanakan melalui penukaran imej pada masa lalu kini boleh dilaksanakan dengan mudah menggunakan CSS, dengan itu memuat turun halaman dengan lebih pantas.

(3) Jadikan fon pada halaman lebih cantik dan lebih mudah untuk disusun, menjadikan halaman itu benar-benar menyenangkan mata.

(4) Anda boleh mengawal susun atur halaman dengan mudah.

(5) Anda boleh mengemas kini gaya dan format banyak halaman web pada masa yang sama, tidak perlu lagi mengemas kini halaman demi halaman. Anda boleh menggunakan fail CSS untuk mengawal gaya semua halaman web pada tapak selagi baris yang sepadan dalam fail CSS diubah suai, semua halaman seluruh tapak akan berubah dengan sewajarnya.

Bagaimana untuk mengawal warna dan saiz fon dan fon yang digunakan sebelum menggunakan CSS? Ia biasanya dilaksanakan menggunakan tag HTML, dan kodnya sangat menyusahkan. Sukar untuk membayangkan bahawa jika warna dan saiz fon perlu ditukar dengan kerap pada halaman, panjang kod HTML yang dihasilkan mesti mengembang. CSS dilahirkan untuk memudahkan kerja sedemikian, tetapi sudah tentu fungsinya tidak semudah itu. CSS mengawal gaya keseluruhan halaman melalui idea kawalan gaya struktur halaman. Lembaran gaya diletakkan pada halaman dan ditafsirkan dan dilaksanakan oleh pelayar Ia adalah teks yang lengkap dan boleh dikuasai oleh sesiapa sahaja yang memahami HTML. Walaupun untuk beberapa pelayar yang sangat lama, kekeliruan halaman tidak akan berlaku. Salah satu kelebihan hebat CSS ialah kelajuan penghantaran imejnya lebih pantas daripada halaman web HTML yang lengkap.