Gaya- satu set parameter yang menentukan representasi eksternal objek. Sebagai contoh, katakanlah kita ingin semua judul tingkat pertama (tag

) di satu halaman akan berwarna merah, ukuran 24 dan dicetak miring, dan di halaman lain akan berwarna biru, ukuran 12. Judul kita adalah objek, dan warna, ukuran, dan gaya adalah opsi. Hanya saja parameter objek kita berbeda untuk halaman yang berbeda, yaitu. mereka berbeda dalam gaya.

Setiap elemen pada halaman dapat memiliki gayanya sendiri (paragraf, judul, baris, teks ...). Himpunan gaya untuk semua elemen disebut lembar gaya.

Jika beberapa gaya ditentukan untuk satu elemen (seperti dalam contoh dengan judul), maka mengalir, yang menentukan prioritas gaya tertentu.

Manfaat CSS

• CSS memungkinkan Anda untuk secara signifikan mengurangi ukuran kode Anda dan membuatnya dapat dibaca.
• CSS memungkinkan Anda untuk mengatur parameter yang tidak dapat diatur dalam HTML saja. Misalnya, hapus garis bawah dari tautan.
• CSS memudahkan untuk mengubah tampilan halaman Anda. Bayangkan Anda telah membuat situs web 50 halaman dengan semua judul berwarna biru. Setelah beberapa saat, Anda ingin berubah warna biru untuk hijau. Anda harus melalui semua 50 halaman dan mengubah warna pada atribut yang sesuai. Dengan CSS, Anda hanya perlu melakukan ini sekali, di stylesheet Anda.
• Tata letak blok yang disebut situs dikaitkan dengan CSS.

Atau jika Anda sangat akrab dengan HTML, setelah mengumpulkan pengetahuan yang diperlukan dari sumber lain, maka inilah saatnya untuk mempelajari CSS.

CSS (Lembar Gaya Berjenjang)- Lembar gaya berjenjang adalah kumpulan deskripsi gaya, tag HTML tertentu (selanjutnya elemen HTML), yang dapat diterapkan baik ke tag tunggal - elemen, dan secara bersamaan ke semua elemen identik di semua halaman situs. CSS pada dasarnya adalah pelengkap HTML yang sangat memperluas kemampuannya.

Terus? Anda bertanya .. Mengapa saya membutuhkan CSS terkenal ini? Saya melakukannya dengan cukup baik dengan HTML dalam bentuknya yang murni!

Saya akan memberikan sejumlah alasan yang mendukung menggunakan CSS:

HTML dalam bentuknya yang murni memiliki seperangkat alat yang sangat terbatas yang tidak memungkinkan penyelesaian desain dan ide fungsional tertentu dari webmaster. Yah, setidaknya, misalnya, ambil poin sakit dari semua pengrajin web pemula "Bagaimana cara menghapus garis bawah tautan?" atau "Bagaimana cara mengubah warna dan sorot dengan mengarahkan kursor ke tautan ini?" tidak ada cara untuk melakukan ini dengan HTML saja!! Dan berapa banyak lagi dari "pertanyaan menyakitkan" ini? - kegelapan .. Di sinilah CSS datang untuk menyelamatkan, yang memecahkan sebagian besar masalah yang berkaitan dengan desain situs.

Misalkan Anda menulis situs web dengan 100 halaman .. situs yang bagus, informatif, orang mengunjunginya .. Dan tiba-tiba, untuk beberapa alasan, Anda perlu mengubah desainnya, saya tidak tahu, mode telah berubah, Anda telah menemukan yang lebih baik satu solusi desain, pelanggan tidak menyukainya .. tetapi Anda tidak pernah tahu mengapa .. Berapa banyak waktu dan usaha yang Anda perlukan untuk mengulang semua 100 halaman situs? CSS menawarkan solusi yang masuk akal untuk masalah ini. Tetapi bagaimana jika sekali dalam file terpisah untuk sepenuhnya menggambarkan seluruh desain situs? Katakanlah: semua header

buat merah, paragraf

tulis dalam huruf miring, tautan jangan digarisbawahi :) latar belakang pada semua halaman diisi dengan warna hijau, dan seterusnya ... lalu buat saja 100 halaman HTML ini mengakses file CSS dan mengambil informasi yang diperlukan darinya? Sekarang ketika Anda memutuskan, misalnya, untuk mewarnai ulang semua judul dari merah menjadi hijau, Anda tidak perlu membuka semua 100 halaman untuk menemukan tag di dalamnya.

dan tunjukkan di masing-masing bahwa Anda sekarang bukan merah tetapi hijau! Anda hanya perlu membuka deskripsi file dan mengubah warna elemen di dalamnya

di hijau dan hanya itu !! Semua judul di semua halaman situs akan berubah menjadi hijau seperti sulap.

Karena fakta bahwa CSS memungkinkan deskripsi gaya berulang dari elemen yang sama dalam satu file, terjadi "pembebanan" dokumen HTML yang signifikan, dan ini menghemat volume, lalu lintas, waktu, uang. Kode HTML menjadi ringan, mudah dibaca dan diedit.

Bagaimana itu? Tertarik? Jika demikian, saya sarankan untuk beralih ke belajar CSS secara langsung. Dalam bab-bab dari tutorial ini, Anda akan belajar cara menyematkan lembar gaya berjenjang pada halaman situs Anda, berkenalan dengan properti gaya dasar elemen menggunakan contoh membuat situs menggunakan CSS, mempelajari seluk-beluk dan trik urusan. Jika Anda sudah terbiasa dengan cascading style sheets dan Anda hanya tertarik pada informasi referensi, maka saya sarankan untuk melihat referensi CSS di mana properti CSS dan kemungkinan nilainya dikumpulkan dan dijelaskan secara singkat.

Hai. Saatnya menulis sesuatu tentang topik tersebut. Sudah jelas dari judulnya tentang apa posting ini, tetapi saya ingin sedikit mengklarifikasi.

Saya tidak akan membuat buku teks tentang dasar-dasar bahasa dari blog saya, saya tidak akan berbicara tentang apa itu kelas, pemilih, tanda kutip, dan titik. Begitu banyak materi telah dikunyah di Web sehingga tidak masuk akal bagi saya untuk mengulanginya. Saya tidak ingin menjalankan blog saya di sepanjang jalan menulis ulang artikel dari situs lain dengan kata-kata saya sendiri (seperti yang dilakukan kebanyakan "blogger").

Tetapi saya akan dengan senang hati membagikan trik, trik, dan teknik menarik yang umumnya berguna yang saya gunakan dalam pekerjaan saya!

Langsung ke intinya

Saya akan mengambil definisi dari Wikipedia:

html(dari Bahasa Inggris HyperText Markup Language - "hypertext markup language";) - bahasa markup standar untuk dokumen di Web di seluruh dunia... Sebagian besar halaman web dibuat menggunakan HTML (atau XHTML). HTML ditafsirkan oleh browser dan ditampilkan sebagai dokumen dalam bentuk yang ramah manusia.

CSS(Bahasa Inggris Cascading Style Sheets - cascading style sheets) - bahasa deskripsi formal penampilan dokumen yang ditulis menggunakan bahasa markup. Ini terutama digunakan sebagai sarana untuk menggambarkan, mendekorasi tampilan halaman web yang ditulis menggunakan bahasa markup HTML dan XHTML, tetapi juga dapat diterapkan ke dokumen XML apa pun, seperti SVG atau XUL.

Tampaknya sangat jelas apa itu HTML dan CSS, tapi saya akan tetap mengatakannya dengan kata-kata saya sendiri.

HTML adalah sejenis bahan bangunan untuk halaman web. Dengan membaca tag khusus (perintah, kata-kata yang memiliki arti khusus untuk browser), browser membangun halaman dengan konten teks, gambar, dan hal-hal lain di jendelanya.

CSS adalah bahan pelapis yang melakukan semua keindahan.

Secara kasar, HTML adalah apa yang harus ada di situs, dan CSS bertanggung jawab untuk bagaimana seharusnya terlihat?... Berkat CSS kami melihat berbagai efek, animasi, dan barang lainnya di situs.

Sedikit sejarah saya

Apa yang akan saya tulis sekarang sudah ada di halaman, tetapi saya akan menulisnya lagi dan menambahkannya :)

Saya membuat situs web pertama saya pada tahun 2008. Ini bekerja pada sistem Ucoz. Saya tidak ingat persis bagaimana, tetapi salah satu teman sekelas saya memberi tahu saya tentang Ucoz dan betapa mudahnya membuat situs web Anda sendiri di sana. Itu menjadi menarik bagi saya. Saya tidak tahu mengapa, tapi agak "keren" membuat situs web saya sendiri. Saat itulah saya belajar tentang HTML. Tapi saya mempelajarinya, bukan mempelajarinya :) Sepertinya itu adalah kelas 9 sekolah. Dengan menerapkan pengetahuan dasar menggunakan photoshop dan ucoz, saya masih bisa membuat website.

Situs batu. Di feed berita utama dan forum yang nyaman) Saya malu untuk menunjukkannya sekarang, tetapi saya pikir saya akan memiliki keberanian di masa depan.

Penyebutan tag kedua dalam hidup saya adalah di tahun pertama saya di ilmu komputer. Ya, ada banyak tugas yang tidak masuk akal tentang hal ini dan akan lebih baik jika kita mempelajari AutoCAD daripada MS Access (perencana kota, bagaimanapun), tetapi saya masih bersyukur untuk tugas membuat situs web dari beberapa halaman HTML . Pada awalnya saya benar-benar tidak peduli tentang ini, tetapi saya menyukainya ketika saya duduk untuk melakukannya.

Saya mengambil catatan kuliah dan mulai menulis struktur halaman dengan tag, yang saya salin dari papan tulis, tetapi ... saya menyadari bahwa saya tidak dapat melakukan apa pun yang saya buat dan mulai membaca lebih banyak detail tentang html di Internet (saya tidak tahu tentang css saat itu). Akibatnya, pekerjaan saya adalah yang terbaik di grup, tetapi sayangnya, hampir tidak ada yang menghargai ini, karena mereka memberi nilai untuk memiliki pekerjaan, tetapi jika ada peringkat untuk pekerjaan ...

Yah, oke, aku masih senang dengan diriku sendiri. Tugas di depan saya adalah menempatkan elemen-elemen pada halaman seperti yang saya inginkan, dan bukan seperti yang terlihat dari catatan kuliah. Masalahnya adalah HTML tidak memiliki fungsi untuk menempatkan elemen 20 piksel dari tepi kanan jendela browser. Dan kemudian saya berpikir ... tetapi bagaimana jika saya meletakkan elemen yang diperlukan dalam sebuah tabel, yang saya masukkan ke dalam sel tabel utama, yang ujungnya tidak terlihat, tetapi yang menempati seluruh halaman dan mengatur ukuran tabel? sel, saya dapat menempatkan elemen itu dengan indentasi 20px dari tepi kanan ?? ... Saya mencobanya - berhasil!

Saya baru mengetahui bahwa ini adalah praktik umum sebelum CSS adalah ketika saya mulai serius tentang teknologi web. Bukan, bukan karena saya memuji diri sendiri, tapi itu keren untuk memindahkan makna dan memahami apa yang digunakan orang dalam pekerjaan mereka.

Apa yang dibutuhkan untuk ini?

Pada Oktober 2011, saya mulai serius mempelajari seluruh materi, yang mengalir dengan lancar ke dalam aktivitas utama hidup saya. Saya ingin membuat website. Saya tahu saya membutuhkan HTML untuk ini. Kemudian saya menemukan referensi ke CSS. Saya memutuskan sedikit lebih untuk memahami apa itu dan ... itu sangat ketat! Situs-situs yang saya kunjungi, tampaknya memberikan pengetahuan dasar, tetapi tidak ada momen yang akan membawa teko lengkap dari ketidaktahuan ke poin dasar. Dan kemudian saya tidak sengaja menemukan video gratis pelajaran dari Evgeny Popov. Pertama-tama, saya bingung harus memasukkan email dan nama saya untuk mendapatkan kursus video gratis. Yah, sial, mereka akan mengirim spam ke saya, atau bahkan meretas email saya, saya tidak mau! Tapi tetap saja saya memutuskan)

Tapi ... tidak ada yang masuk ke kotak masuk saya (seharusnya saya menerima tautan untuk mengunduh kursus HTML dan CSS gratis). Jadi saya pergi ke ex.ua dan mengunduhnya di sana :) Berpikir heroik, saya pikir saya tidak memerlukan kursus HTML, sepertinya saya tahu sedikit, tapi saya akan melihat CSS. Melihat pelajaran pertama - saya menyadari bahwa saya perlu melihat dan belajar HTML terlebih dahulu.

Apa yang bisa saya katakan kepada kalian ... itu lebih baik daripada semua situs tutorial disatukan. Di mana-mana penulis menulis sesederhana mungkin, seperti yang dilihatnya, tetapi tetap saja ini tidak cukup untuk sebuah teko. Hanya saja penulis tidak bisa membayangkan bahwa “ini” bisa diabaikan. Dan E. Popov tidak hanya menjelaskan bagaimana menjadi kecil dan bodoh, tetapi juga menunjukkan setiap langkahnya dan inilah yang Anda butuhkan jika Anda ingin belajar HTML / CSS!

Tidak ada manfaat bagi saya dari kenyataan bahwa saya menawarkan kursus ini kepada Anda, tetapi kemungkinan besar Eugene akan melakukannya. Dan saya tidak keberatan. Berkat dia, saya lebih mudah terjun ke pengembangan web.

Tapi ada satu "Tapi" kecil. Dalam kursus CSS-nya, dia tidak mengatakan sepatah kata pun tentang CSS3 - dasar dari semua efek modern. Tapi percayalah, dengan mengetahui dan memahami apa itu CSS, akan sangat mudah untuk mencari informasi tentang CSS3 di Internet. Nah, dan berbagai teknik (seperti yang saya katakan di atas) akan saya jelaskan di blog saya.

Setelah mempelajari kursus-kursus itu, saya membuat situs nyata pertama saya (dalam hal hosting pribadi, dll.). Ya, saya tidak tahu apa itu PHP dan MySQL, dan WordPress, dll ...

TAPI ini adalah cerita yang sama sekali berbeda ...

Ada banyak situs berguna di Internet dengan pelajaran, tetapi ketika Anda membutuhkan solusi yang sangat baik untuk pertanyaan Anda, maka yang terbaik adalah melihat habrahabr.ru.

Pada awalnya, saya sering menggunakan lembar contekan: satu dan dua.

Mungkin saya akan menambahkan beberapa tautan yang berguna di sini, atau saya akan merilis bagian kedua dari artikel ini, jadi saya sarankan untuk berlangganan berita di formulir di bawah ini.

Halo para pembaca situs blog yang terhormat. Hari ini saya ingin mulai berbicara dengan semua detail tentang CSS (materi akan terakumulasi dalam yang sesuai).

Saatnya untuk beralih ke sana setelah mempelajari HTML. Bahasa markup gaya bertanggung jawab atas desain eksternal halaman situs dan tanpa memahaminya, akan sangat sulit untuk memperbaiki, memindahkan, atau menyelaraskan sesuatu.

Tentu saja, Css dibandingkan dengan Html terlihat jauh lebih rumit, tetapi ini adalah masalah tata letak lintas-browser, tetapi ketika datang untuk memperbaiki beberapa hal sepele dalam desain situs Anda sendiri, Anda tidak perlu banyak intelijen. Secara umum, kami akan mencoba membongkar dasar-dasarnya secara rinci, dan nuansa penggunaan kerawang mereka akan tetap untuk studi opsional (opsional). Tetapi semua webmaster perlu mengetahui konsep dasarnya.

Apa itu CSS dan untuk apa?

Singkatan CSS adalah singkatan dari Cascading Style Sheets atau, dalam terjemahan Rusia, sebagai Cascading Style Sheets. Apa itu dan mengapa bahasa ini ditemukan pada suatu waktu?

Jadi, berdasarkan apa yang kami pelajari sedikit sebelumnya, kami dapat mengatakan bahwa markup dokumen web dilakukan menggunakan tag bahasa ini. Itu. dengan bantuan HTML kami membuat struktur dokumen kami (halaman web). Misalnya, dalam Html murni, kita dapat mendefinisikan elemen lain dari struktur dokumen, dan bahkan memberikan tampilan yang kita inginkan di browser.

Tetapi waktu menentukan kebutuhan untuk menggunakan semakin banyak atribut baru dari desain visual dalam HTML, yang sangat berserakan sumber... Dalam hal ini, opsi pengembangan lain yang lebih menjanjikan diusulkan - membuat bahasa markup gaya terpisah CSS. Dan opsi ini memiliki sejumlah keunggulan dibandingkan peningkatan sederhana dalam jumlah atribut desain.

Mengapa? Apakah Anda ingat bagaimana Anda dapat mengatur warna untuk sepotong teks dalam HTML murni? Itu benar, dengan bantuan. Dan jika Anda ingin melukis beberapa paragraf dalam teks Anda dengan warna yang diinginkan sekaligus?

Maka Anda harus memasukkan tag Font dengan nilai yang diinginkan warna dalam atribut Warna.

Semua ini akan sangat mengacaukan kode sumber, yang sangat, sangat tidak diinginkan, karena kecepatan memuat situs akan berkurang, dan beban yang tidak perlu akan dibuat pada peralatan komunikasi Internet. Pengembang tidak dapat "menerima" ini.

Oleh karena itu, mereka menemukan jalan keluar berikut dari situasi ini. Pengembang dari W3C memutuskan untuk merancang semua representasi visual dari dokumen web dalam bentuk bahasa markup gaya khusus, yang mereka sebut lembar gaya berjenjang, atau hanya CSS (dibaca sebagai c-es-es). Apa inti dari teknologi?

Dan intinya adalah sebagai berikut - dengan menghubungkan bahasa markup gaya ke dokumen (halaman) apa pun, kita akan dapat mengatur representasi visual dari semua elemen itu ( HTML yang dihasilkan tag) yang akan muncul dalam dokumen ini.

Ada sumber daya di Internet yang membantu untuk melihat dengan jelas bagaimana halaman web dapat mengubah tampilannya hanya karena file cascading style sheet lain terhubung dengannya. Menurut pendapat saya, ini akan menjadi jawaban terbaik untuk pertanyaan: apa itu CSS dan mengapa itu dibutuhkan.

Anda dapat melihat tampilan dasar dokumen (halaman web) dengan mengklik tautan ini:

Tidak ada yang istimewa, tetapi jika Anda mengklik tautan "Lihat Semua Desain" dari menu sebelah kiri, Anda dapat melihat lusinan atau bahkan ratusan opsi desain untuk halaman web yang sama dengan menghubungkan gaya yang berbeda (file stylesheet yang berbeda).

Harap dicatat bahwa kode HTML asli tetap sama persis, tetapi hanya perubahan gaya CSS... Luar biasa, bukan?!

CSS bukan bahasa markup dalam arti yang sama seperti, misalnya, Html. Ini adalah bahasa markup gaya - ia memiliki sintaksnya sendiri, konten internalnya sendiri, dan dalam banyak hal akan sangat berbeda dari apa yang telah dipelajari sebelumnya.

Selain itu, dibandingkan dengan HTML, bahasa penataannya jauh lebih kompleks. Ada banyak nuansa di dalamnya yang perlu Anda ketahui selain konsep dasarnya. Tidak ada nuansa khusus dalam HTML - kami mempelajari semua elemen dan Anda dapat bekerja dengan kode dengan aman. Bagi saya CSS dapat dibandingkan dengan catur - tidak cukup hanya mengetahui bagaimana semua bidak bergerak, Anda juga harus bisa bermain.

Jadi apa itu dan terdiri dari apa? Seharusnya bahasa ini bisa bagi menjadi dua bagian:

1. Aturan yang memberi tahu browser bagaimana elemen akan muncul di layar.
2. Selector adalah label yang memungkinkan browser memahami elemen kode HTML mana yang perlu menerapkan aturan ini.

Sekarang mari kita lihat bagaimana gaya terhubung ke kode sumber halaman web. Ada tiga cara utama menggunakan CSS bersama dengan HTML:

1. Lampiran - Kode CSS ditulis langsung di tag elemen yang diinginkan menggunakan atribut Gaya
2. Embedding - semua kode gaya untuk dokumen web ditulis di headernya (di dalam tag Head) menggunakan elemen Style
3. Menautkan - semua kode CSS ditempatkan (dirender) dalam file eksternal terpisah, yang terhubung ke dokumen menggunakan elemen Tautan di headernya

Nah, Anda lihat bagaimana kita telah belajar banyak tentang gaya bahasa markup. Sekarang adalah waktu untuk berbicara tentang dia sintaksis... Secara umum, ini cukup sederhana:

Satu aturan dalam kode CSS terdiri dari dua elemen - properti (dalam contoh kita adalah) dan nilainya (dalam contoh kita adalah merah dan #CCCCCC). Sebuah prasyarat adalah memisahkan properti dari nilainya dengan titik dua.

Lebih jauh. Satu aturan tentu terpisah dari yang lain. titik koma... Setelah aturan terakhir, Anda tidak bisa lagi menempatkan titik koma, tetapi untuk menghindari kelebihan, yang terbaik adalah membuat aturan untuk selalu meletakkannya. mereka tidak masalah dalam kode CSS dan Anda dapat mengaturnya sesuai kebijaksanaan Anda.

Menggunakan Gaya untuk Menghubungkan Css ke Kode Html

Nah, sekarang mari kita lihat contoh semua cara menerapkan aturan gaya ke dokumen kita yang ada dan yang dijelaskan secara umum di atas.

Cara pertama disebut metode menyematkan css di html menggunakan atribut Gaya:

Mari kita lihat bagaimana Anda dapat menggunakan metode ini untuk mengatur warna dan latar belakang paragraf:

Apa itu metode bersarang?

Seperti yang Anda lihat, dengan satu sapuan kecil, kami melukis teks paragraf dengan warna merah (warna: merah) dan pada saat yang sama meletakkan latar belakang abu-abu di bawahnya (latar belakang: #cccccc). Gaya mengacu pada enam yang dapat digunakan bersama dengan semua tag (mereka terdaftar di bagian bawah tangkapan layar):

Di Css, kita juga akan aktif menggunakan universal, tetapi ini akan dibahas di artikel berikutnya, tetapi untuk saat ini kita telah mempertimbangkan kemungkinan menggunakan Style untuk menghubungkan aturan desain gaya ke elemen tertentu kode html... Ini memungkinkan Anda untuk menggunakan seperangkat aturan ini (dalam jumlah tidak terbatas) sebagai nilainya.

Metode bersarang menggunakan atribut Style sangat mudah diimplementasikan dalam praktiknya, namun demikian dalam tata letak yang sebenarnya jarang dipakai... Tetapi di sisi lain, dengan bantuannya Anda dapat dengan mudah mencoba dan bereksperimen sesuatu, dan baru kemudian mentransfer semua aturan ini ke file terpisah dengan lembar gaya CSS.

Cara selanjutnya untuk menghubungkan bahasa markup gaya disebut metode menyematkan CSS dalam html... Metode ini pada dasarnya berbeda dari metode bersarang yang dipertimbangkan sebelumnya.

Alih-alih menyertakan di setiap tag pada halaman atribut Gaya yang berisi aturan bahasa gaya, sekarang kita akan menulis semua aturan CSS yang kita perlukan untuk dokumen web ini di dalam satu Label gaya, yang pada gilirannya akan ditempatkan di kepala dokumen ini (di antara elemen Kepala).

Apakah Anda ingat apa itu Head dan di mana tertulis dalam struktur dokumen web? Jika Anda tidak ingat, lihat diagram blok ini:

Itu. dalam kode mungkin terlihat seperti ini:

... ...

Tidak cukup jelas? Nah, untuk saat ini saya akan mencoba menggambarkan hal ini:

Agar browser tidak mengambil aturan gaya untuk bahasa markup hypertext, atribut yang diperlukan harus ditulis dalam elemen Gaya Ketik dengan nilai "teks/css"(tajuk konten media untuk lembar gaya berjenjang). Itu. kode di dalam elemen ini akan ditafsirkan oleh browser sebagai CSS.

Kami melihat lebih jauh pada contoh yang diberikan tepat di atas. Seperti yang Anda lihat, aturan gaya tertutup dalam kawat gigi , dan di depan mereka ada yang disebut pemilih dalam bentuk huruf Latin "P". Mengapa pemilih ini diperlukan?

Jika tidak, kami dapat memberi tahu browser bahwa aturan CSS ini perlu diterapkan hanya ke tag paragraf (pemilih P) dari dokumen web ini dan tidak ke yang lain.

Di sini kita kembali menyentuh masalah sintaks. Saat menggunakan metode embedding dan nesting, semua aturan CSL harus diapit kurung kurawal, dan harus didahului oleh pasti berdiri atau beberapa pemilih:

Pemilih CSS (Properti: Nilai; Properti: Nilai)

Saat menggunakan metode bersarang, kami tidak menggunakan selektor dan kurung kurawal, karena sudah jelas bagi browser bahwa aturan CSS ini perlu diterapkan persis ke tag, di mana atribut Style ditulis.

Saat menggunakan metode embedding atau nesting, situasi dengan menentukan kepada siapa aturan gaya ini ditujukan menjadi lebih rumit dan menjadi perlu untuk menggunakan kurung kurawal dan selektor. Itu. kami memberi tahu browser bahwa kumpulan aturan CSS ini (terlampir dalam kurung kurawal) Anda berlaku untuk semua paragraf, dan kumpulan ini untuk hal lain.

Dalam kasus yang paling sederhana, sebagai pemilih, Anda dapat menggunakan nama tag yang aturan bahasa CSSnya harus diterapkan, diapit dalam kurung kurawal yang terbuka segera setelah nama pemilih. Dalam contoh kita, nama tag paragraf "P" digunakan sebagai pemilih. Kami akan berbicara lebih detail tentang penyeleksi dalam bahasa markup gaya di artikel berikutnya (lihat tautan di atas).

Untuk meringkas metode penyematan kode CSS ke dalam dokumen Html - semua aturan gaya yang diperlukan untuk dokumen ini akan dijelaskan dalam satu tag Gaya tunggal, dan tidak dalam banyak elemen yang berbeda, seperti jika menggunakan metode penyematan yang dijelaskan di atas .

Menghapus stylesheet CSS menjadi file terpisah menggunakan Tautan

Cara terakhir untuk mengintegrasikan kode gaya ke dalam dokumen web disebut metode pengikatan... Cara termudah untuk menggambarkan metode ini adalah:

Perbedaan utamanya dari metode yang dibahas di atas (bersarang dan menyematkan) adalah bahwa saat menggunakan metode penautan, semua aturan CSS ditempatkan dalam file eksternal yang terpisah... Ini akan menjadi tekstual (seperti dokumen Html lainnya) dan biasanya memiliki ekstensi .css yang ditetapkan untuk itu, sehingga untuk membukanya di komputer lokal di bawah Kontrol jendela bisa ditunjuk program khusus ().

Saat menggunakan file CSS eksternal, khusus Tautan tag, yang ditulis lagi di antara elemen Head pembuka dan penutup di header halaman web. Tautan tidak terlihat di browser.

Dalam hal ini, browser akan menemukan file style sheet yang ditentukan (sebelum ditentukan dalam atribut Href dari tag Link), memuatnya dan menerapkan aturan CSS yang ditentukan untuk desain eksternal dokumen Html saat ini.

Secara umum, pengikatan sangat mirip dengan penggunaan tag Gaya yang dijelaskan sedikit sebelumnya, tetapi memungkinkan Anda untuk secara signifikan mempercepat pemuatan halaman situs dan mengurangi beban pada peralatan komunikasi Internet.

Saat menggunakan elemen Style (metode penyematan), browser harus memuat setiap kali bersama dengan kode HTML dokumen dan aturan CSS dan penyeleksi yang tertanam di dalamnya, dan dalam kasus menggunakan file style sheet eksternal, browser hanya perlu memuat Style.css sekali dan baru kemudian mengambilnya dari cache sendiri (area di hard drive komputer pengguna) saat mendesain halaman lain di situs Anda.

Atribut type = "text / css" dari tag Link berarti bahwa konten media ini tidak lebih dari bahasa markup gaya. Tetapi juga saat menautkan file CSS dan dokumen Html digunakan atribut Rel dengan nilai Stylesheet... Intinya adalah bahwa Link (sebuah hyperlink layanan) dapat digunakan untuk tujuan yang sama sekali berbeda.

Jika Anda melihat kode sumber untuk halaman ini di browser, Anda akan melihat bahwa area Kepala memiliki banyak tag Tautan yang berbeda:

Dan tujuan dari masing-masing hyperlink layanan ini ditentukan oleh nilainya Atribut rel... Misalnya, rel = "ikon pintasan" digunakan untuk menunjukkan jalur ke file, dan rel = "alternate" dapat digunakan untuk menunjukkan versi alternatif halaman (contoh representasi alternatif dari dokumen Html adalah).

Nah, dalam hal menggunakan atribut rel = "stylesheet" di Tautan, kami mengatur browser jalur ke file lembar gaya(dalam atribut HRef, jalur ini dapat ditentukan dalam bentuk absolut atau relatif). Itu. menggunakan atribut Rel, kami memberi tahu browser seperti apa tampilan file, jalur yang ditentukan dalam HRef (stylesheet - dengan CSS).

Di situs metode bind hampir selalu digunakan CSS dan HTML (file style sheet eksternal). Atribut dan tag gaya biasanya digunakan hanya untuk pengujian, meskipun mungkin ada tugas khusus seperti itu ketika penggunaannya akan dibenarkan (misalnya, saat mendesain). Tetapi dalam pekerjaan nyata di situs, file eksternal yang digunakan, mis. metode mengikat.

Untuk ini saya akan membiarkan diri saya mengambil cuti dan berjanji bahwa kelanjutannya akan menyusul dalam waktu dekat. Sekali lagi, saya ulangi bahwa belajar CSS biasanya jauh lebih sulit daripada belajar CTML, jadi saya akan berusaha sedetail dan sevisual mungkin.

Semoga sukses untuk Anda! Sampai jumpa di halaman situs blog

Anda mungkin tertarik

Gaya daftar (tipe, gambar, posisi) - Aturan Css untuk menyesuaikan tampilan daftar dalam kode Html
Tampilan (blok, tidak ada, sebaris) di CSS - atur jenis tampilan Elemen HTML di halaman web
Untuk apa CSS, bagaimana menghubungkan lembar gaya berjenjang ke Dokumen HTML dan dasar-dasar sintaks bahasa ini
Latar belakang dalam CSS (warna, posisi, gambar, pengulangan, lampiran) - semuanya untuk mengatur latar belakang atau warna latar belakang gambar html elemen
Prioritas dan Peningkatan Css dengan Penting, Kombinasi dan Pengelompokan Pemilih, Gaya Kustom dan Penulis
Tinggi, lebar, dan luapan - Aturan CSS untuk mendeskripsikan area konten dalam tata letak blok
Unit Ukuran (Piksel, Em dan Ex) dan Warisan Aturan CSS Gaya berbeda untuk tautan internal dan eksternal melalui CSS
Selektor untuk kelas semu dan elemen semu dalam CSS (arahkan kursor, anak pertama, baris pertama, dan lainnya), hubungan antara tag html kode
Float dan clear di CSS - blokir alat tata letak