di mana peraturan ditulis. Dia sendiri juga berdaftar di

— Jika anda memutuskan untuk menentukan gaya secara langsung kandungan dalam , maka anda harus menggunakan parameter gaya="..."

Peraturan yang betul untuk CSS dan cara mengulas dalam CSS

Di sini, sudah tentu, anda boleh menulis sejumlah besar teori, tetapi kami tidak mempunyai buku rujukan di sini. Saya akan menunjukkan segala-galanya dengan contoh mudah, perkara utama yang perlu diingat ialah terdapat pemilih, sifat dan nilai. Pemilih ialah peraturan yang akan digunakan, harta ialah jenis peraturan yang akan kami gunakan dan nilai ialah nilai. (harta + nilai = peraturan)

Penulisan kelihatan seperti ini pemilih ( property: value; ), jika anda perlu menggunakan beberapa pemilih, tuliskannya koma jika beberapa peraturan melalui koma bertitik. Sentiasa di penghujung koma bertitik.

Untuk mengulas sebarang teks dalam CSS, anda perlu meletakkan teks dalam petikan seperti ini /* teks */ dan semua 🙂

Seperti yang dijanjikan, contoh CSS ilustrasi :

p(
keluarga fon: Verdana
latar belakang: putih;
warna: merah;
}

Pemilih di sini ialah p, yang bermaksud bahawa mana-mana perenggan yang ditag akan mengikut peraturan ini. Apa sahaja yang anda tulis di atas, perenggan akan berwarna putih dengan teks Verdana merah. Walaupun latar belakang umum berwarna kuning dan fon berbeza.

• tutorial

Ralat dan petua yang saya tulis dalam pengalaman saya sendiri. Sekiranya terdapat kesilapan seperti "nasihat buruk", maka saya akan gembira mendengar kritikan yang membina. Siaran ini bertujuan untuk pemula mempelajari HTML dan CSS, tetapi mungkin juga menarik bagi pakar untuk membiasakan diri dengan bahan ini.

1. Pengesah W3C

• tag tidak ditutup;
• aksara yang tidak disyorkan dalam pautan;
• tag yang tidak disyorkan digunakan;
• atribut yang diperlukan tidak dinyatakan;
• dan lain-lain.

2. Reka letak dalam format UTF-8

Fail dalam format UTF-8 membenarkan penggunaan aksara bukan standard (contohnya, aksara pelbagai bahasa, tanda mata wang dan lain-lain).

Anda juga perlu memberitahu pelayar bahawa halaman dibuka dalam pengekodan UTF-8. Ini dilakukan melalui tag di bawah:

3. Id yang sama untuk berbilang elemen

4. Sprite

Kini ia juga popular untuk menggunakan fon dengan ikon dan bukannya sprite. Itu. bukannya huruf, ikon gear, emotikon dan ikon lain dipaparkan. Contohnya ialah glyphicons yang digunakan dalam Twitter Bootstrap.

Kelebihan fon kepada sprite ialah mengekalkan kualiti apabila mengubah saiz ikon dan saiz yang lebih kecil. Tetapi kelemahannya ialah anda tidak boleh menggunakan lebih daripada satu warna dalam ikon.

5. Banyak pemilih

/* ditamatkan, banyak bersarang */ .halaman .item .tajuk a () /* boleh dipendekkan */ .halaman .item a ()
Pelayar membaca CSS dari kanan ke kiri. Itu. dalam kod di atas, semua pautan yang ada pada halaman akan dipilih dahulu, dan kemudian pautan yang berada di dalam elemen .item akan dipilih.

6. Gaya dalam HTML

Ralat dalam kod

Ralat dalam kod

7. Nama kelas yang salah

Teks mesej

Teks mesej

Teks mesej

8. Piksel dalam nilai pecahan

P ( /* salah */ jarak huruf: 1.5px; /* kanan */ jarak huruf: .005em; )

9. Menggunakan kelas dan bukannya id

#modal a ( color: blue; ) /* warna di bawah tidak boleh ditimpa, kerana #modal mempunyai lebih berat daripada kelas */ .modal-header a ( color: #333; ) /* dalam kes ini anda perlu menambah #modal */ #modal .modal-header a ( color: #333; )
Ia juga tidak disyorkan untuk menggunakan!penting, sebagai beratnya lebih tinggi daripada atribut id dan ia juga sukar untuk ditindih.

10. Menu

Laman Utama Berita Mengenai syarikat

• rumah
• berita
• Mengenai syarikat

11. Hilang alt pada gambar

12. Tag

. Pada asasnya, teg ini mengandungi tajuk halaman.

13. Transkripsi

/* salah */ .product () .stranica () .zapros () /* right */ .product () .page () .query ()

14.Pembetulan

Kelas .clearfix mesti dinyatakan dalam teg induk, bukan di sebelahnya.

15. HTML - bahasa pengaturcaraan

Kami membentangkan terjemahan artikel "Mengapa Grid CSS lebih baik daripada Bootstrap untuk mencipta reka letak" oleh Per Harald Borgen, diterbitkan di tapak ru.hexlet.io.

Grid CSS ialah cara baharu untuk membuat reka letak di web. Buat pertama kalinya, sistem susun atur sepenuhnya tersedia secara langsung dalam penyemak imbas, yang memberikan banyak kelebihan.

Faedah ini menjadi lebih jelas apabila anda membandingkan Grid CSS dengan rangka kerja yang paling popular, Bootstrap. Anda bukan sahaja boleh membuat reka letak yang sebelum ini mustahil tanpa JavaScript, tetapi kod anda akan menjadi lebih mudah untuk diselenggara dan difahami.

Mari kita lihat tiga sebab utama mengapa saya rasa CSS Grid lebih unggul daripada Bootstrap.

Penandaan akan menjadi lebih mudah

Menggantikan Bootstrap dengan Grid CSS akan menjadikan HTML lebih bersih. Walaupun ini bukan faedah yang paling penting, ia mungkin yang pertama yang anda akan perhatikan.

Untuk kejelasan, saya mencipta reka letak tapak web palsu supaya saya boleh membandingkan kod yang diperlukan untuk kedua-dua versi. di sini:

Bootstrap

Mari kita lihat pada penanda yang diperlukan untuk membuat tapak web ini dalam Bootstrap.

Di sini saya ingin anda memberi perhatian kepada perkara berikut:

1. Setiap baris hendaklah dengan tag yang berasingan
   .
2. Nama kelas (col-xs-2) mesti digunakan untuk menetapkan reka letak.
3. Apabila corak ini menjadi lebih kompleks, begitu juga dengan HTML.

Jika tapak itu responsif, teg cenderung kelihatan lebih teruk:

Grid CSS

Sekarang mari kita lihat cara untuk melaksanakan perkara yang sama dalam Grid CSS. Berikut ialah HTML:

Saya boleh menggunakan elemen semantik, tetapi saya memutuskan untuk kekal dengan div untuk menjadikan perbandingan Bootstrap lebih jelas.

Anda boleh melihat dengan segera bahawa penanda ini lebih mudah. Nama kelas hodoh dan tag div tambahan untuk setiap baris adalah perkara yang sudah lama. Ia hanya bekas untuk grid dan kedudukan di dalamnya.

Dan tidak seperti Bootstrap, penanda ini tidak akan menjadi terlalu rumit kerana susun atur halaman berkembang dalam kerumitan.

Dalam contoh Bootstrap, anda tidak perlu menambah CSS, dalam Grid CSS, sudah tentu, anda lakukan. Khususnya, anda perlu menambah ini:

Bagi sesetengah orang, ini mungkin hujah yang memihak kepada Bootstrap: anda tidak perlu risau tentang CSS untuk mencipta grid ringkas - anda hanya membina reka letak dalam HTML.

Tetapi seperti yang anda akan lihat dalam perenggan seterusnya, hubungan antara penanda dan reka letak sebenarnya adalah kelemahan apabila ia berkaitan dengan fleksibiliti.

Lebih banyak fleksibiliti

Katakan anda ingin menukar reka letak bergantung pada saiz skrin. Contohnya, naikkan menu ke baris atas untuk dilihat dari peranti mudah alih.

Dengan kata lain, tukar susun atur daripada ini:

pada yang ini:

Grid CSS

Melakukan ini dengan Grid CSS adalah sangat mudah. Kami menambah pertanyaan media dan mencampurkan blok yang berbeza seperti yang kami mahu:

Keupayaan untuk mencipta reka letak dengan cara ini - tanpa mempedulikan cara HTML ditulis - dipanggil kebebasan pesanan sumber, dan ia merupakan kemenangan besar bagi pembangun dan pereka bentuk.

Grid CSS membolehkan anda menukar HTML kepada apa yang dimaksudkan. Dalam penanda kandungan, bukan visualiti yang dimaksudkan untuk CSS.

Bootstrap

Jika kita mahu melakukan perkara yang sama dalam Bootstrap, kita perlu menukar HTML. Kita perlu menaikkan teg menu ke baris atas, sebagai tambahan kepada pengepala, kerana menu di baris kedua sedang dijadikan tebusan.

Melakukan ini dengan pertanyaan media bukanlah tugas yang remeh. Ini hanya boleh dilakukan dengan HTML dan CSS, dan anda perlu bermain-main dengan JavaScript.

Contoh ini menunjukkan manfaat besar CSS Grid yang saya alami secara langsung.

Tiada lagi had 12 lajur

Ini bukan masalah terbesar, tetapi ia membuat saya marah berkali-kali. Memandangkan grid Bootstrap dibahagikan kepada 12 lajur, anda akan menghadapi masalah jika anda mahukan susun atur lima lajur. Atau tujuh. Atau sembilan. Atau daripada nombor yang bukan dua belas.

Tidak begitu dengan Grid CSS. Anda boleh membuat reka letak anda sendiri dengan seberapa banyak lajur yang anda suka. Berikut ialah susun atur tujuh lajur.

Ini dilakukan dengan menetapkan nilai repeat(7, 1fr) untuk grid-template-columns, seperti:

Mungkin terdapat penggodaman untuk melakukan ini dalam Bootstrap... Dan saya sedar bahawa Bootstrap 4 menggunakan Flexbox, yang membolehkan fleksibiliti ini, tetapi ia masih tidak akan keluar daripada beta.

Sebelum kita menutup artikel ini, sudah tentu, kita perlu bercakap tentang sokongan penyemak imbas. Pada masa penulisan ini, 75% daripada trafik web global menyokong Grid CSS.

Tetapi sebelum anda menyerah sepenuhnya pada idea menggunakan CSS Grid, saya cadangkan anda mendengar apa yang Morten Rand-Hendricksen katakan mengenainya. Beliau berpendapat bahawa Grid CSS ialah peluang untuk memikirkan semula cara kami mewakili keserasian ke belakang:

“CSS Grid ialah modul markup, ia membolehkan kami menukar markup dokumen tanpa mengganggu susunan kod sumber. Dalam erti kata lain, Grid CSS ialah alat visual sepenuhnya, dan jika digunakan dengan betul, ia tidak akan menjejaskan hubungan dalaman kandungan dalam dokumen. Daripada ini mengikuti fakta yang mudah tetapi mengejutkan: kekurangan sokongan untuk Grid CSS dalam penyemak imbas lama tidak seharusnya menjejaskan pengalaman pelawat tapak, ia hanya perlu mengubah persepsi ini.

Dalam erti kata lain, sebaik sahaja anda memisahkan kandungan daripada visual, semua pelawat akan melihat kandungan tersebut, tetapi Grid CSS akan menjadikan pengalaman penyemakan imbas lebih baik bagi mereka yang menyokongnya dengan penanda yang lebih baik.

Kesimpulan

"Semakin saya menggunakan Grid CSS, semakin yakin saya bahawa tiada kelebihan untuk menambah lapisan abstraksi di atasnya. Grid CSS ialah rangka kerja penanda yang dibina terus ke dalam penyemak imbas.”

Saya mempunyai html ini:

Perpisahan adalah kesedihan yang manis!- Bill Rattle dan Roll Speer

Dan css ini (ditambah pada penghujung Site.css):

Fancify ( font-size: 1.5em; font-weight: 800; font-family: Consolas, "Segoe UI", Calibri, sans-serif; font-style: italic; )

Jadi, saya menjangkakan petikan ("Perpisahan adalah satu kesedihan yang manis!") dalam huruf condong dan dalam fon yang berbeza daripada nama petikan (Bill Rattleandrollspeer) kerana tag rentangnya mempunyai kelas "fancify" yang dilampirkan padanya . Kelas harus dilihat kerana fail yang dipaparkan dalam rujukan fail susun atur yang menggunakan fail Site.css.

Apakah kesilapan rookie yang saya lakukan sekarang?

KEMASKINI

Saya fikir mungkin masalahnya ialah saya menambah kelas baharu dalam Site.css selepas bahagian ini dalam fail ini:

Tetapi saya mengalihkannya ke atas dan ia masih tidak berfungsi dan tidak dapat dilihat melalui F12 | Semak elemen untuk label yang sepadan.

KEMASKINI 2

Begini cara HTML keluar:

Perpisahan adalah kesedihan yang manis!

Dan inilah peraturan css saya dalam Site.css:

Label span P .fancify ( saiz fon: 1.5em; berat fon: 800; keluarga fon: Consolas, "UI Segoe", Calibri, sans-serif; gaya fon: condong; paparan: sebaris; )

Tetapi ia tidak diiktiraf. Saya menganggap ini sebagai pelaksanaan protokol css/html dan harus dipertimbangkan oleh beberapa badan dunia. Sekali lagi, saya boleh melakukan beberapa kesilapan bodoh.