Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Pengantar CSS

CSS adalahLembar Gaya Bertingkat(Singkatan dari Cascading Style Sheets) digunakan untuk mengontrol gaya halaman HTML secara tepat agar menampilkan informasi grafis dengan lebih baik atau menghasilkan pengalaman interaktif yang keren/ramah.

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
1

Akhiran file CSS adalah .css

Komentar

/* 注释的内容 */
1

Tiga cara untuk menambahkan gaya

1. gaya Gaya sebaris

<span style="color: red">红色文字</span>
1

2. Tambahkan melalui pemilih gaya CSS

https://blog.csdn.net/weixin_41192489/artikel/detail/140226382

3. Warisan

Elemen dalam wadah akan mendapatkan gaya yang ditambahkan pada wadah

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>
1
2
3

• Atribut gaya teks semuanya diwariskan. Atribut tersebut antara lain: warna, dimulai dengan teks-, dimulai dengan garis, dan dimulai dengan font-.
• Atribut kotak, posisi, dan tata letak tidak dapat diwariskan.

Siapa yang memutuskan gaya terakhir?

Karena ada banyak sumber gaya pada elemen, termasuk gaya default browser, gaya sebaris gaya, gaya yang ditambahkan oleh berbagai pemilih CSS, dan gaya yang diwarisi dari elemen induk, gaya terakhir akan menjadi gaya dengan prioritas tertinggi di antara banyak gaya gaya.

Prioritas gaya CSS

https://blog.csdn.net/weixin_41192489/artikel/detail/139720467

Dasar-dasar penting dari gaya

Satuan panjang CSS

https://blog.csdn.net/weixin_41192489/artikel/detail/140236423

fungsi CSS

https://blog.csdn.net/weixin_41192489/artikel/detail/140318834

model kotak

https://blog.csdn.net/weixin_41192489/artikel/detail/102411612

• Tinggi dan tinggi baris dapat membuka kotak, tetapi gambar latar belakang tidak dapat membuka kotak.

Hal yang perlu diperhatikan tentang elemen sebaris

• Elemen sebaris hanya dapat menampilkan margin dalam dan luar di awal dan akhir, dan harus dihindari sebisa mungkin, jadi jangan menetapkan margin dalam dan luar untuk elemen sebaris.

• Setelah elemen sebaris dibungkus, tampilan batas akan bertumpuk dan tidak teratur, jadi jangan atur batas untuk elemen sebaris!

• Saat Anda perlu menambahkan batas/margin dalam dan luar ke elemen sebaris, ubah menjadi kotak sebaris

  display：inline-block
  1

Gaya apa yang bisa ditambahkan?

Gaya universal

Gaya dapat ditambahkan ke hampir setiap elemen html.

Lebar tinggi

• lebar: Defaultnya adalah lebar konten (bukan lebar kotak)
• tinggi: Standarnya adalah tinggi konten (bukan tinggi kotak)

Melalui gaya berikut, Anda dapat mengubah model kotak standar default elemen menjadi model kotak IE.

box-sizing:border-box;
1

pada saat ini

• Lebar: Lebar kotak (batas kiri + bantalan kiri + lebar konten + bantalan kanan + batas kanan)
• tinggi: tinggi kotak (batas atas + bantalan atas + tinggi konten + bantalan bawah + batas bawah)

Lapisan

• Nilai negatif tidak didukung
• Nilai persentase, baik horizontal maupun vertikal, dihitung relatif terhadap lebarnya.

padding: 10px;
1

Padding: 10px untuk atas, bawah, kiri dan kanan

padding:10px 5px;
1

Padding atas dan bawah adalah 10px

Padding kanan dan kiri berukuran 5px

padding:10px 5px 15px;
1

Padding atas adalah 10px

Padding kanan dan kiri berukuran 5px

Padding bawah adalah 15px

padding:10px 5px 15px 20px;
1

Padding atas adalah 10px

Padding kanan adalah 5px

Padding bawah adalah 15px

Padding kiri adalah 20px

perbatasan perbatasan

Gaya terkait juga

• radius perbatasan yang membulat
• isian batas gambar batas
• garis besar garis besar

Lihat detailnya https://blog.csdn.net/weixin_41192489/artikel/detail/140325106

batas

https://blog.csdn.net/weixin_41192489/artikel/detail/115140348

meluapmeluap

• terlihat [Nilai default] Semua konten berlebih akan ditampilkan tanpa memotong atau menambahkan bilah gulir.
• tersembunyi: Menyembunyikan bilah gulir dan tidak menampilkan konten yang melebihi ukuran objek, namun tetap dapat digulir.
• otomatis: Jika kontennya tidak melebihi, bilah gulir tidak akan ditampilkan; jika kontennya melebihi, bilah gulir akan ditampilkan.
• gulir: Pada platform Windows, bilah gulir selalu ditampilkan terlepas dari apakah kontennya melebihi batas. Di bawah platform Mac, ini sama dengan atribut auto.

Kontainer dengan nilai overflow otomatis dan gulir adalah kontainer bergulir (kontainer dengan bilah gulir). Tidak disarankan menggunakan padding untuk spasi putihnya, karena masalah kompatibilitas, Anda hanya dapat menggunakan margin-bawah elemen anak untuk mencapainya bantalan bawah wadah gulir berwarna putih.

transparansiopasitas

Nilai atribut berkisar dari 0,0 (sepenuhnya transparan) hingga 1,0 (sepenuhnya buram). Jika melebihi batas rentang 0 hingga 1, nilai akhir yang dihitung adalah nilai batas.

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */
1
2

latar belakang latar belakang

https://blog.csdn.net/weixin_41192489/artikel/detail/140301618

bayangan kotak-bayangan

Bayangan tidak akan mengubah ukuran kotak dan tidak akan mempengaruhi tata letak elemen saudaranya. Anda juga dapat mengatur beberapa bayangan batas untuk mendapatkan efek yang lebih baik dan meningkatkan efek tiga dimensi.

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影
1

• Offset horizontal: Nilai positif ke kanan, nilai negatif ke kiri.
• Offset vertikal: nilai positif ke bawah dan nilai negatif ke atas.
• Tingkat keburaman: tidak boleh negatif
• Bayangan dalam/luar - inset adalah bayangan dalam, tidak ditulis sebagai bayangan luar

box-shadow: 15px 21px 48px -2px #666;
1

Bayangan yang umum digunakan

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
1

Lihat penggunaan lainnya
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

• [Praktis] Menimpa warna latar belakang pengisian otomatis kotak masukan

  input:-webkit-autofill {
      -webkit-box-shadow: inset 0 0 0 1000px #fff;
      background-color: transparent;
  }
  1
  2
  3
  4

• [Praktis] Ubah warna penekanan tombol secara bertahap

  button:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  1
  2
  3

• 【Pertempuran sebenarnya】Panduan pemula untuk efek masking

  .guide {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
      border-radius: 50%;
  }
  1
  2
  3
  4

klip jalur klip

https://blog.csdn.net/weixin_41192489/artikel/detail/121341551

• [Praktis] clip-path mengimplementasikan animasi transisi yang mirip dengan PPT
  https://www.zhangxinxu.com/wordpress/2019/05/animasi-transfer-css

transformasitransformasi

https://blog.csdn.net/weixin_41192489/artikel/detail/140314866

zoomzoom

Browser Firefox tidak mendukungnya. Ini dapat memiliki nilai atribut berikut.

• Nilai persen.zoom:50%, menunjukkan penyusutan hingga setengah dari ukuran aslinya.
• nilai numerik.zoom:0.5, menunjukkan penyusutan hingga setengah dari ukuran aslinya.
• normalKata kunci.zoom:normalSetara denganzoom:1, adalah nilai default.
• resetKata kunci.zoom:reset , menunjukkan bahwa ketika pengguna menekan Ctrl dan − atau Ctrl dan + untuk memperbesar dokumen, elemen tidak akan diperkecil atau diperbesar. Namun kata kunci ini memiliki kompatibilitas yang buruk dan hanya didukung oleh browser Safari.

Perbandingan antara fungsi zoom dan scale()

• zoomKoordinat pusat penskalaan atribut relatif terhadap sudut kiri atas elemen dan tidak dapat diubah.transformmentransformasikanscale()Koordinat pusat default penskalaan fungsi adalah titik pusat elemen.
• Penskalaan atribut zoom akan mengubah ukuran ruang yang ditempati oleh elemen secara real-time dan memicu penggambaran ulang dan penghitungan ulang. Oleh karena itu, kinerja penskalaan atribut zoom lebih buruk daripada fungsi scale().
• Menerapkan atribut zoom ke suatu elemen tidak akan menciptakan konteks berjenjang, tidak akan memengaruhi pemosisian elemen tetap dan penyembunyian luapan elemen yang diposisikan secara mutlak oleh atribut overflow, juga tidak akan mengubah blok yang memuat elemen yang diposisikan secara mutlak.

topeng topeng

https://blog.csdn.net/weixin_41192489/artikel/detail/121158821

gradiengradien

https://blog.csdn.net/weixin_41192489/artikel/detail/140316024

Gaya unik untuk berbagai jenis elemen

teks

https://blog.csdn.net/weixin_41192489/artikel/detail/140264311

hyperlink

Gaya kelas semu - harus ditulis dalam urutan tetap berikut:

• :link "Link": sebelum hyperlink diklik - berlaku untuk semua hyperlink dengan atribut href (tidak termasuk jangkar) - dapat dihilangkan, disingkat dalam tag a
• :visited "Visited": setelah link dikunjungi - bisa dihilangkan, disingkat di tag a
• :hover "hover": ketika mouse diletakkan pada label
• :aktif "Aktifkan": Ketika mouse mengklik label tetapi tidak melepaskannya.

    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

gambar

Filter penyaring gambar

https://www.runoob.com/cssref/css3-pr-filter.html

ikon

• Menerapkan ikon responsif dengan font-weight
  Ketika ukuran font lebih besar, font ikon lebih detail, dan ketika ukuran font lebih kecil, font ikon lebih sederhana.
  https://demo.cssworld.cn/8/5-1.php

• penggabungan ikon css - Teknologi ClipPath Sprite
  https://blog.csdn.net/weixin_41192489/artikel/detail/121242735

lembaran

Sorot baris saat mengarahkan kursor

/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}
1
2
3
4

deretan warna bergantian

Pergantian warna antar baris data dapat mengurangi kelelahan membaca pengguna.

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}
1
2
3
4
5
6

menggulir

kursor mouse

kursor

Warna kursor warna sisipan
Mengatur warna kursor penyisipan kotak input (belum didukung oleh browser IE dan Edge)

input {
    caret-color: red;
}
1
2
3

Tampilkan dan sembunyikan gaya terkait

Jika tidak ada gaya berikut yang dapat menyembunyikan elemen, elemen tersebut akan ditampilkan (beberapa tidak terlihat hanya karena kaskade tertutup):

• display: none [Biasa digunakan] Elemen tersembunyi, tidak menempati ruang, akan memuat sumber daya, dan DOM dapat diakses (menambahkan tersembunyi ke tag html akan mengubah tampilan tag menjadi tidak ada)
• visibility: hidden Elemen tersembunyi menempati posisinya, sumber daya akan dimuat, dan DOM dapat diakses
  • Jika elemen induk menyetel visibilitas: tersembunyi, elemen turunannya juga tidak akan terlihat (warisan)
  • Jika visibilitas: terlihat diatur pada elemen anak, elemen anak akan ditampilkan lagi.
• opacity: 0 Elemen tersebut tidak terlihat, menempati posisinya, dan dapat diklik atau dipilih.
• clip: rect(0 0 0 0) Elemen tidak terlihat, tidak dapat diklik, tidak memakan ruang, namun dapat diakses dengan keyboard
• Nilai indeks-z negatif menyembunyikan elemen. Elemen tersebut tidak terlihat dan tidak dapat diklik, tetapi memakan ruang dan dapat diakses dari keyboard.

  .lower {
  　position: relative;
  　z-index: -1;
  }
  1
  2
  3
  4

Gaya yang bergantung pada posisi

Posisi suatu elemen pada halaman ditentukan oleh banyak gaya, termasuk positioning, display, float, margin, dll.

Ketika posisi, tampilan, dan float ada pada saat yang sama, efek tampilan akhir elemen akan ditentukan berdasarkan logika yang dijelaskan pada tautan di bawah.

https://blog.csdn.net/weixin_41192489/artikel/detail/119009647

posisi posisi

https://blog.csdn.net/weixin_41192489/artikel/detail/140242430

tampilan tata letak

https://blog.csdn.net/weixin_41192489/artikel/detail/140250775

batas

https://blog.csdn.net/weixin_41192489/artikel/detail/115140348

Penyelarasan

https://blog.csdn.net/weixin_41192489/artikel/detail/140255028

Indeks-z bertingkat

https://blog.csdn.net/weixin_41192489/artikel/detail/140297366

Gaya terkait interaksi

Perilaku gulir gulir yang halus: halus

https://blog.csdn.net/weixin_41192489/artikel/detail/121365831

peregangan mengubah ukuran

https://blog.csdn.net/weixin_41192489/artikel/detail/121396794

Gaya terkait adaptasi perangkat

Pertanyaan media @media

https://blog.csdn.net/weixin_41192489/artikel/detail/126028971

[Praktis] Solusi adaptasi terminal seluler (tiga jenis)

https://blog.csdn.net/weixin_41192489/artikel/detail/120999355

Gaya CSS khusus (variabel CSS/properti khusus)

https://blog.csdn.net/weixin_41192489/artikel/detail/140317369

Meningkatkan efisiensi penulisan CSS

Praprosesor CSS

Praprosesor CSS adalah bahasa pemrograman khusus yang digunakan untuk menambahkan beberapa fitur pemrograman ke CSS (CSS sendiri bukanlah bahasa pemrograman). Tidak perlu mempertimbangkan masalah kompatibilitas browser karena praprosesor CSS pada akhirnya mengkompilasi dan mengeluarkan gaya CSS standar. Anda dapat menggunakan keterampilan pemrograman dasar seperti variabel, penilaian logis sederhana, dan fungsi dalam praprosesor CSS.

Praprosesor CSS arus utama mencakup Sass (Scss), Less, dan Stylus.
(SASS telah berganti nama menjadi SCSS sejak versi 3.0)

• Scss tutorial praktis
  https://blog.csdn.net/weixin_41192489/artikel/detail/134313564

kerangka CSS

• Tutorial Praktis UnoCSS
  https://blog.csdn.net/weixin_41192489/artikel/detail/140034188

Konvensi pengkodean CSS

• Setel ulang gaya default browser
• Cobalah untuk menghindari penggunaan gaya
• Satuan hanya dapat dihilangkan jika nilai atributnya nol
• Nilainya biasanya berupa bilangan genap, misalnya 6px, bukan 5px (terutama tinggi garis dan ukuran font, untuk memastikan perbedaannya habis dibagi 2, sehingga font berada di tengah baris)
• Nama kelas harus semantik, sehingga Anda dapat mengidentifikasi secara sekilas elemen mana yang digunakan oleh nama kelas/efek gaya yang dicapai oleh nama kelas.

/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Gaya teks yang direkomendasikan

• Gunakan font-size: medium; untuk wadah teks (bila ukuran default browser diubah, teks dapat diperbesar atau diperkecil)
• Teks dalam wadah teks, menggunakan satuan relatif - persentase atau em
• Gunakan em sebagai satuan untuk margin teks

Animasi berkinerja tinggi

Tiga elemen animasi kinerja tinggi CSS mengacu pada penentuan posisi absolut, atribut opacity, dan atribut transformasi. Oleh karena itu, efek animasi yang sama pertama kali dicapai dengan menggunakan atribut transform. Misalnya, animasi pergerakan elemen harus menggunakan atribut transform, bukan atribut margin.