cari
Rumahhujung hadapan webtutorial cssSepuluh teknik CSS klasik_CSS/HTML

1. Peraturan singkatan atribut fon CSS

Secara amnya, ini adalah cara untuk menetapkan atribut fon dengan CSS:

font-weight:bold;
gaya fon:italic;
varian fon: huruf besar kecil;
saiz fon:1em;
tinggi garis:1.5em;
keluarga fon:verdana,sans-serif ;

Tetapi anda juga boleh menulis kesemuanya pada satu baris:

font: huruf besar kecil italik tebal 1em/1.5em verdana,sans-serif;

Sungguh bagus! Hanya satu kaveat: kaedah trengkas ini hanya berfungsi apabila kedua-dua sifat saiz fon dan keluarga fon ditentukan. Selain itu, jika anda tidak menetapkan berat fon, gaya fon dan varian fon, mereka akan menggunakan nilai lalai, jadi ingat perkara ini.

2 Gunakan dua kelas pada masa yang sama

Secara umumnya, hanya satu kelas (Kelas) boleh ditetapkan untuk elemen, tetapi ini tidak bermakna dua kelas tidak boleh ditetapkan. digunakan. Malah, anda boleh melakukan ini:

...

Berikan dua elemen P di Kelas masa yang sama, dipisahkan oleh ruang, supaya semua atribut teks dan kelas sampingan akan ditambahkan pada elemen P. Jika terdapat percanggahan antara atribut dalam dua kelas, satu set kemudian akan berkuat kuasa, iaitu atribut kelas yang diletakkan kemudian dalam fail CSS akan berkuat kuasa.

Tambahan: Untuk ID, anda tidak boleh menulis

...

anda juga tidak boleh menulis

3. Nilai lalai sempadan CSS

Biasanya anda boleh menetapkan warna, lebar dan gaya sempadan, seperti:

sempadan: 3px pepejal #000

Ini menunjukkan sempadan sebagai garisan pepejal selebar 3 piksel, hitam. Tetapi sebenarnya, anda hanya perlu menentukan gaya di sini.

Jika gaya sahaja ditentukan, atribut lain akan menggunakan nilai lalai. Secara amnya, lebar lalai Sempadan adalah sederhana, yang biasanya bersamaan dengan 3 hingga 4 piksel warna lalai ialah warna teks. Jika nilai ini betul, tidak perlu menetapkan begitu banyak tetapan.

4. CSS untuk pencetakan dokumen

Banyak tapak web mempunyai versi untuk mencetak, tetapi sebenarnya ini tidak diperlukan kerana ia boleh ditetapkan dengan gaya cetakan Set CSS.

Dengan kata lain, anda boleh menentukan dua fail CSS untuk halaman, satu untuk paparan skrin dan satu untuk mencetak:

>

Barisan pertama adalah untuk paparan, dan baris kedua adalah untuk mencetak.

Tetapi apakah yang perlu ditulis dalam CSS percetakan? Anda boleh menyediakannya dengan cara yang sama seperti anda mereka bentuk CSS biasa. Semasa mereka bentuk, anda boleh menetapkan CSS ini untuk memaparkan CSS untuk menyemak kesannya. Mungkin anda akan menggunakan perintah paparan: none untuk mematikan beberapa imej hiasan dan mematikan beberapa butang navigasi. Untuk mengetahui lebih lanjut, lihat artikel "Perbezaan Pencetakan".

5. Kemahiran menggantikan imej

Secara amnya disyorkan untuk menggunakan HTML standard untuk memaparkan teks dan bukannya imej, yang bukan sahaja lebih pantas tetapi juga lebih mudah dibaca. Tetapi jika anda ingin menggunakan beberapa fon khas, anda hanya boleh menggunakan gambar.

Sebagai contoh, jika anda ingin mencipta ikon untuk menjual barangan, anda akan menggunakan imej ini:

 Beli widget

Sudah tentu ia boleh dilakukan, tetapi untuk enjin carian, berbanding dengan teks biasa, mereka tidak berminat dengan teks gantian dalam alt . Ini kerana Ramai pereka meletakkan banyak kata kunci di sini untuk menipu enjin carian. Jadi kaedahnya hendaklah seperti ini:

Beli widget

Tetapi dengan cara ini tiada fon khas. Untuk mencapai kesan yang sama, anda boleh mereka bentuk CSS seperti ini:

h1 { background: url(widget-image.gif) no-repeat; height image text-indent: -2000px }

Beri perhatian untuk menggantikan ketinggian imej dengan ketinggian imej sebenar. Di sini, imej akan dipaparkan sebagai latar belakang, dan kerana lekukan -2000 piksel ditetapkan untuk teks sebenar, ia akan muncul 2000 mata di sebelah kiri skrin dan tidak akan kelihatan. Tetapi bagi orang yang mematikan gambar, mereka mungkin tidak dapat melihatnya langsung, jadi berhati-hati.


6. Satu lagi teknik pelarasan untuk model kotak CSS

Pelarasan model Box ini terutamanya untuk IE sebelum IE6 Untuk penyemak imbas , mereka mengira lebar sempadan dan ruang putih ke dalam lebar elemen. Contohnya:

#kotak { lebar: 100px; padding: 20px }

Panggilnya seperti ini:

...

Pada masa ini, lebar penuh kotak hendaklah 150 mata, yang berlaku dalam semua penyemak imbas kecuali Pelayar IE sebelum IE6 Semua adalah betul pada peranti. Tetapi pada pelayar seperti IE5, lebar penuhnya masih 100 mata. Perbezaan ini boleh dikendalikan menggunakan kaedah pelarasan Kotak yang dicipta oleh orang terdahulu.

Tetapi tujuan yang sama boleh dicapai dengan CSS untuk menjadikannya dipaparkan secara konsisten.

#kotak { lebar: 150px } #kotak p { jidar: 5px }

Panggil seperti ini:

...

Dengan cara ini, tidak kira apa pelayar, lebarnya ialah 150 mata.

7. Penjajaran tengah elemen blok

Jika anda ingin membuat halaman web dengan lebar tetap dan mahu halaman web dipusatkan secara mendatar, ia biasanya seperti ini:

#content { width: 700px; margin: 0 auto }

Anda akan menggunakan

Ini mudah, tetapi tidak cukup baik, dan versi sebelum IE6 tidak akan memaparkan kesan ini. Tukar CSS seperti berikut:

body { text-align: center } #content { text-align: left width: 700px; 0 auto }

Ini akan Kandungan halaman web dipusatkan, jadi penjajaran teks: kiri ditambahkan pada Kandungan.

8 Gunakan CSS untuk mengendalikan penjajaran menegak

Penjajaran menegak boleh dicapai dengan mudah menggunakan jadual. Hanya tetapkan penjajaran menegak: tengah. Tetapi ini tidak berguna dengan CSS. Jika anda ingin menetapkan bar navigasi menjadi 2em tinggi dan mahu teks navigasi dipusatkan secara menegak, menetapkan atribut ini tidak berguna.

Apakah kaedah CSS? Ngomong-ngomong, tetapkan ketinggian baris perkataan ini kepada 2em: ketinggian baris: 2em dan itu sahaja.

9. Kedudukan CSS dalam bekas

Satu faedah CSS ialah anda boleh meletakkan elemen secara sewenang-wenangnya, walaupun dalam bekas. Contohnya, untuk bekas ini:

#bekas { kedudukan: relatif }

Dengan cara ini, semua elemen dalam bekas akan berada pada kedudukan yang agak anda boleh menggunakannya seperti ini:

Jika anda ingin mencari 30 mata ke kiri, 5 mata ke atas, seperti ini:

#navigation { position: absolute left: 30px; >

Sudah tentu, anda boleh Suka ini:

margin: 5px 0 0 30px

Perhatikan bahawa susunan 4 nombor ialah: atas , kanan, bawah, kiri. Sudah tentu, kadangkala meletakkan kedudukan berbanding margin adalah lebih baik.

10. Warna latar belakang yang pergi terus ke bahagian bawah skrin

dikawal dalam arah menegak dan tidak boleh dikawal oleh CSS. Jika anda mahu bar navigasi terus ke bahagian bawah halaman seperti bar kandungan, adalah sangat mudah untuk menggunakan jadual, tetapi jika anda hanya menggunakan CSS seperti ini:

#navigation { latar belakang: biru; lebar: 150px }

Bar navigasi yang lebih pendek tidak akan terus ke bawah, ia akan tamat apabila kandungan tamat separuh jalan. Apa yang perlu dilakukan?

Malangnya, satu-satunya cara untuk menipu ialah menambah imej latar belakang pada lajur yang lebih pendek, dengan lebar yang sama dengan lebar lajur, dan menjadikannya warna yang sama dengan warna latar belakang yang ditetapkan.

body { background: url(blue-image.gif) 0 0 repeat-y }

Anda tidak boleh menggunakan ia sebagai unit pada masa ini, kerana dalam itu kes, sebaik sahaja pembaca Tukar saiz fon dan helah ini akan didedahkan, hanya px boleh digunakan.

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini