Perenggan 2

Hasil dalam pelayar

Perenggan 1

Perenggan 2

Gaya luaran

Gaya luaran disertakan dalam fail berasingan menggunakan . Dalam kes ini, semua gaya terletak dalam fail teks biasa dengan sambungan .css dan mempengaruhi elemen semua halaman yang fail ini disambungkan. Biasanya, penciptaan gaya tapak bermula dengan kaedah ini, kerana hanya dengan bantuannya semua kelebihan CSS dirasakan, kerana dengan menukar data hanya dalam satu fail, anda boleh mengawal paparan sejumlah besar halaman sekaligus. Dan sudah dalam proses bekerja di tapak, gaya dalaman atau terbina dalam ditambah, jika perlu.

Apabila menggunakan gaya luaran, pengarang bertindak dengan cara yang sama sekali berbeza. Sesetengah menyimpan semua gaya tapak dalam satu fail, yang lain - dalam beberapa. Sebagai contoh, satu fail mengandungi gaya untuk keseluruhan tapak dan terdapat pada semua halaman, satu lagi disambungkan hanya kepada bahagian tertentu, satu pertiga - kepada subseksyen tertentu, dsb. Apa yang anda lakukan terpulang kepada anda untuk membuat keputusan.

Contoh menyambungkan gaya luaran ke CSS

Perenggan 1

Perenggan 2

Kandungan fail style.css

Badan ( latar belakang: #ccccff; /* warna latar belakang halaman */ ) p (warna: merah; /* warna teks perenggan */ keluarga fon: Helvetica, sans-serif; /* fon perenggan */ saiz fon: 150 % ; /* saiz fon */ text-align: center; /* centered text */ border: 5px green double; /* border styles */ )

Hasil dalam pelayar

Perenggan 1

Perenggan 2

Seperti yang anda lihat, semuanya sangat mudah. Secara umum, dengan nama hampir semua sifat CSS anda sudah boleh memahami perubahan yang mereka lakukan, sudah tentu, jika anda tahu sekurang-kurangnya sedikit bahasa Inggeris.

Dalam kebanyakan contoh ini Tutorial CSS Saya akan menggunakan gaya dalaman kerana ia adalah yang paling visual untuk demonstrasi. Untuk kajian lanjut, lebih baik anda membuat fail gaya luaran dengan segera dan membiasakan diri menggunakannya. Contohnya, buat subfolder gaya, buat fail style.css di dalamnya dan masukkannya dalam halaman HTML anda.

Termasuk CSS melalui peraturan @import

Cara lain untuk menyambungkan gaya yang terletak dalam fail berasingan ialah menggunakan peraturan . Peraturan ini digunakan untuk menggabungkan beberapa helaian gaya menjadi satu, yang kadangkala agak mudah. Sambungan berlaku dalam helaian gaya luaran atau dalaman; untuk ini, selepas nama peraturan, pembinaan url() ditulis, di mana alamat fail CSS ditunjukkan dalam petikan (" "). Atau url() tidak ditulis sama sekali, tetapi petikan dan alamat fail disertakan dengan serta-merta. Sintaks umum adalah seperti berikut.

Dalam helaian gaya luaran

@import url("alamat fail"); @import "alamat fail"; ...

Di dalam

Mari kita lihat penggunaan peraturan ini dalam helaian gaya luaran, untuk ini saya akan memberikan anda dua contoh untuk perbandingan.

Contoh 1: sambungan biasa gaya luaran

Kandungan halaman.

Contoh 2: menyambungkan gaya luaran bersama-sama dengan peraturan CSS @import

Kandungan halaman.

Kandungan fail style1.css

@import url("style/style2.css"); @import url("style/style3.css"); Di bawah ini, sebagai tambahan, boleh terdapat gaya biasa dengan sifat, nilai, dsb.

Untuk memerintah berfungsi dengan betul, ia mesti dinyatakan pada awal helaian gaya. Satu-satunya pengecualian ialah peraturan di sini , yang sentiasa didahulukan, walaupun dalam praktiknya ia sangat jarang digunakan.

Saya tidak mengesyorkan anda menggunakan semua jenis kaedah CSS ini dengan segera - tumpukan pada helaian gaya luaran biasa, kerana ini adalah pilihan utama. Jika anda mahu, anda boleh, sudah tentu, bereksperimen, tetapi tidak lebih. Secara umum, anda sentiasa boleh memutuskan cara menyambungkan CSS, perkara utama ialah apa yang hendak disambungkan. :)

Gaya Tersuai

Banyak penyemak imbas mempunyai keupayaan untuk memasukkan fail dengan CSS oleh pengguna sendiri, supaya mereka boleh menukar rupa tapak yang mereka lihat, seperti yang mereka katakan, "untuk disesuaikan dengan diri mereka sendiri." Contohnya, tukar saiz fon dan muka taip, warna teks dan latar belakang beberapa elemen, dsb. Sememangnya, dalam kes ini, gaya dicipta oleh pengguna sendiri. Contohnya, dalam Internet Explorer anda boleh mendayakan gaya tersuai dengan pergi ke: Alat → Pilihan Internet → Umum → Rupa.

Halo, pembaca yang dikasihi projek Anatomi Perniagaan. Juruweb Alexander ada bersama anda! Dalam artikel lepas, kami melihat apakah gaya CSS dan betapa pentingnya gaya tersebut dalam pengaturcaraan WEB.

Agak jelas bahawa jika gaya CSS mempunyai kesan yang ketara pada paparan fail HTML, maka ia mesti disambungkan entah bagaimana. Hari ini kita akan melihat empat cara utama untuk menyambung gaya CSS ke HTML.

Jangan berlengah dan mari kita mulakan!

Termasuk fail CSS yang berasingan!

Salah satu cara yang paling mudah dan paling mudah untuk menyambung gaya ialah menyambungkan fail berasingan dengan gaya. Untuk melakukan ini, gunakan editor teks notepad++ (atau mana-mana yang lain) untuk mencipta fail dengan sambungan .css dan letakkannya dalam folder yang sama dengan fail yang ingin kita letakkan.

Kemudian dalam fail HTML antara tag siarkan kod berikut:

Sekarang mari kita lihat apa maksud semua ini:

Pautan # diterjemahkan daripada bahasa Inggeris bermaksud “pautan”. Dengan cara ini kami menunjukkan kepada penyemak imbas bahawa perkara yang akan kami bincangkan seterusnya ialah pautan. rel= # dengan atribut ini kami menunjukkan cara fail CSS berkaitan dengan fail HTML. "stylesheet" # iaitu fail CSS ialah helaian gaya berlatarkan. type="text/css" # semuanya mudah di sini: ini adalah petunjuk bahawa fail ditulis dalam format teks dan mempunyai sambungan .css href="style.css" # ini ialah pautan ke fail dengan gaya CSS.

Pada pendapat saya, ini adalah cara yang paling disukai untuk memasukkan gaya CSS.

Kami menulis gaya terus dalam fail HTML (kaedah pertama)

Cara seterusnya untuk menentukan gaya CSS adalah dengan menulisnya terus dalam dokumen HTML. Ia kelihatan seperti ini:

Jika kita melihat bagaimana dokumen HTML ini akan dipaparkan dalam penyemak imbas, kita akan melihat bahawa teks antara tag bertukar merah. Dan menggunakan atribut gaya, kami mengatakan bahawa seterusnya kami mempunyai parameter gaya paparan. Warna adalah pemilih yang bertanggungjawab untuk warna. merah ialah nilai pemilih ini. Dengan cara ini, kita boleh menyerlahkan bahagian tertentu teks dengan jenis paparan tertentu.

Meletakkan helaian gaya berlatarkan dalam HTML (kaedah kedua)

Satu lagi cara untuk memasukkan gaya CSS ialah meletakkan jadual berlata di dalam fail HTML itu sendiri. Pada pendapat saya, kaedah ini bukanlah yang paling mudah, kerana menggunakannya, menganalisis kod tapak menjadi tidak begitu mudah. Untuk mula menulis gaya CSS, anda hanya perlu memasukkan tag ke dalam fail HTML . Dalam amalan ia kelihatan seperti ini:

Berikut ialah contoh: memaparkan gaya CSS dalam dokumen HTML

Sila ambil perhatian bahawa di dalam teg kami juga menulis kod mengikut peraturan CSS, menggunakan pendakap kerinting. Dalam artikel seterusnya saya akan bercakap dengan lebih terperinci tentang peraturan sintaks dalam CSS.

Menyambungkan berbilang fail CSS ke satu dokumen HTML.

Peraturan HTML membenarkan berbilang fail CSS disertakan sekali gus. Ramai juruweb menggunakan ini: mereka mencipta fail CSS yang berasingan untuk teks dan imej. Atau fail berasingan untuk pengepala, pengaki dan badan utama halaman. Mari kita fikirkan bagaimana untuk melaksanakan ini.

Kami sedang mencipta beberapa fail gaya CSS. Biarkan nama mereka style-1.css dan style-2.css. Kami meletakkannya, seperti dalam kaedah nombor satu, dalam folder yang sama dengan fail HTML.

Berikut ialah contoh: memaparkan gaya CSS dalam dokumen HTML

Semuanya serupa dengan kaedah pertama, hanya dalam kes ini kami menunjukkan pautan ke dua fail sekaligus.

Pautan ke fail CSS di dalam ke fail dari jenis yang sama.

Sebagai tambahan kepada semua kaedah di atas, terdapat kaedah yang membolehkan anda meletakkan pautan kepada banyak orang lain di dalam satu fail CSS!

Ini dilaksanakan seperti berikut:
Pertama, kami perlu menyambungkan sekurang-kurangnya satu fail CSS ke kod anda dengan cara yang sama.

Kedua, masukkan kod berikut ke dalam fail yang telah disambungkan:

@import url("style-2.css");

Baris ini termasuk fail CSS tambahan pada fail kami. Jika anda mempunyai sebarang kesulitan menyambungkan CSS, anda boleh bertanya kepada mereka dalam ulasan.
Seperti yang kita pelajari daripada dua pelajaran sebelumnya, teknologi CSS ialah alat berkuasa yang harus dikuasai oleh setiap juruweb! Untuk meningkatkan asimilasi bahan, saya memutuskan untuk menambah video latihan + ujian pada akhir setiap pelajaran untuk menyatukan maklumat yang diterima.

Ujian penetapan bahan:

Kita perlu memasukkan fail CSS dengan meletakkan pautan kepadanya dalam fail HTML. Antara kaedah berikut, yang manakah betul?

Pilihan 1:

Pilihan 2:

Pilihan 3:

Pilihan 4:

Bolehkah kita meletakkan lata CSS terus dalam fail HTML?

Sekarang sukar untuk membayangkan mengubah rupa dan pemformatan dokumen HTML tanpa menggunakan helaian gaya CSS, kerana HTML telah lama tidak lagi menjadi bahasa yang mencukupi untuk reka bentuk dan mula melaksanakan fungsi asalnya untuk menstruktur dan menanda dokumen web. Dalam artikel ini, kami akan memperincikan cara berbeza anda boleh memasukkan CSS ke dalam dokumen HTML.

Secara ringkas tentang CSS dan HTML

Sebelum ini, laman web direka secara eksklusif menggunakan HTML. Pada masa kini pendekatan ini tidak diamalkan, dan alat CSS digunakan untuk penggayaan, yang mempunyai kemungkinan yang sangat luas untuk mencipta reka bentuk yang menakjubkan.

Agar reka bentuk tapak dipaparkan dengan betul, anda perlu menyambungkan CSS ke dokumen HTML; alat ini berfungsi tidak dapat dipisahkan antara satu sama lain - HTML mencipta struktur, dan helaian gaya bertanggungjawab untuk penampilan.

Terdapat beberapa cara asas di mana anda boleh menyesuaikan paparan gaya dalam kod HTML anda, masing-masing mempunyai kebaikan dan keburukan tersendiri.

Menyambung fail CSS

Ini adalah kaedah utama yang dianggap oleh pemaju sebagai yang paling praktikal dan mudah.

Menggunakan kaedah ini, anda boleh menukar reka bentuk halaman web dengan cepat jika terdapat struktur dokumen HTML - contohnya, untuk tapak yang sama anda boleh menulis beberapa pilihan reka bentuk dan menyambungkannya bergantung pada keperluan yang sepadan.

Untuk memasukkan fail dengan gaya, anda mesti mengkonfigurasi struktur fail terlebih dahulu - ini dilakukan supaya anda boleh menulis laluan yang betul ke dokumen yang dikehendaki terus dalam kod.

Buat direktori di mana dokumen HTML utama akan ditempatkan, dalam folder yang sama buat fail yang dipanggil gaya dalam editor teks dan simpan dalam resolusi .css. Ia akan mengandungi kod CSS dengan semua peraturan penggayaan dokumen yang ditentukan.

Sambungan CSS dilakukan menggunakan tag HTML dengan atribut href. Ia kelihatan seperti ini:

Di sini kod terletak dalam apa yang dianggap optimum, tetapi tidak diperlukan. Ia boleh didapati di mana-mana dalam dokumen.

Kaedah ini mudah kerana semua perubahan pada helaian gaya dibuat dalam fail berasingan, yang menjadikan kod lebih mudah difahami dan dibaca serta menjadikan dokumen lebih kemas.

Jika anda membuat perubahan pada style.css dan buka index.html dalam penyemak imbas, anda akan dapat melihat semua perubahan yang telah dimasukkan.

Dengan cara yang sama, anda boleh menetapkan bukan sahaja laluan ke fail dalam struktur tapak, tetapi juga pautan ke halaman dengan gaya yang terletak di Internet. Dalam kes ini, ia juga sesuai dengan tanda petikan selepas atribut href.

Kaedah memasukkan helaian gaya daripada fail berasingan mengoptimumkan prestasi tapak, kerana ia membolehkan penyemak imbas memuatkan data daripada cache, akibatnya halaman dimuatkan dengan lebih cepat.

Helaian gaya dalam dokumen HTML

Kadangkala nilai parameter gaya ditetapkan terus dalam badan dokumen HTML menggunakan atribut gaya.

Sintaks:

Teks dalam perenggan ini berwarna merah

Kelemahan yang jelas ialah kekurangan kesejagatan; anda perlu menentukan nilai untuk setiap teg.

Selain itu, menyambung menggunakan helaian gaya dalaman tidak membenarkan penyemak imbas menyimpan maklumat cache, tidak seperti kaedah sebelumnya.

Gaya global

Jika anda perlu menggayakan elemen tertentu di seluruh dokumen HTML, gunakan teg

Gaya yang ditentukan akan digunakan pada teg

, sebaik sahaja ia didaftarkan pada halaman.

Memasukkan CSS dengan cara ini akan dibaca dengan keutamaan yang lebih tinggi oleh penyemak imbas daripada helaian gaya luaran.

Bagaimana untuk menambah fon pada tapak web

Fon adalah salah satu elemen reka bentuk utama mana-mana halaman web. Tanggapan yang dibuat oleh tapak web pada pengguna secara langsung bergantung pada fon yang digunakan. Nasib baik, anda tidak perlu mengehadkan diri anda kepada set kepala standard; anda boleh menyambungkan mana-mana yang lain - kami akan memberitahu anda cara ini dilakukan.

Menggunakan CSS, fon disambungkan seperti berikut:

• Cari dan muat turun set kepala yang sesuai.
• Buka fail CSS dan tulis kod berikut di dalamnya:

Pertama, nama fon ditentukan, kemudian laluan kepadanya, dan akhirnya parameter. Sila ambil perhatian bahawa dalam contoh ini, fail fon terletak dalam folder fon, yang, seterusnya, terletak dalam direktori akar. Untuk kemudahan, lebih baik membuat folder berasingan untuk pelbagai fail dan elemen (imej, skrip, helaian gaya, dll.).

Jadi, dalam folder fon kita mempunyai fail yang dipanggil OpenSans.ttf, dengan parameter biasa. Ia kini akan dipaparkan dalam penyemak imbas.

Menyambungkan fon melalui Google Font

Salah satu cara yang paling biasa untuk memasukkan fon dalam CSS dan HTML ialah perkhidmatan Google Font.

Antara muka adalah intuitif - anda perlu mencari fon yang sesuai mengikut nama atau parameter yang ditentukan, klik butang Pilih fon ini dan perkhidmatan menjana kod serta-merta yang dimasukkan ke dalam medan teg Dokumen HTML, serta fail CSS yang sepadan dengan gaya.

Bagaimana ia sepatutnya kelihatan dalam HTML:

Dan dalam fail CSS dengan gaya:

Keluarga fon: "Open Sans", sans-serif;

Kaedah ini mudah kerana ia membolehkan anda mencari fon yang dikehendaki dengan cepat dari pangkalan data yang sangat besar dan menjimatkan banyak masa, serta menghapuskan masalah yang timbul akibat paparan fon yang salah dalam beberapa pelayar.

Mari kita ringkaskan

Jadi, kami melihat cara utama untuk menyambungkan gaya CSS kepada dokumen HTML. Berdasarkan tugasan yang ditetapkan untuk pembangun dalam setiap kes tertentu, anda boleh memilih pilihan keutamaan tertinggi.

Mereka bentuk halaman web ialah proses kreatif yang memerlukan, walau bagaimanapun, pendekatan yang teliti. Manfaatkan keupayaan untuk mengulas pada kod dan jangan lupa tentang pengoptimuman tapak web.

Terdapat sekurang-kurangnya tiga cara untuk mengikat gaya css ke halaman tapak web. Artikel tersebut menerangkan kaedah mengikat ini secara terperinci dan memberikan penjelasan yang komprehensif.

Mula-mula, anda harus menerangkan sebab anda perlu mengikat apa-apa ke halaman tapak web sama sekali, dan sebab gaya css diletakkan dalam fail yang berasingan.

Sejak kemunculan set gaya kandungan halaman web (CSS), peraturan yang sangat berguna telah dikemukakan dalam kalangan pembangun web: "pisahkan kandungan daripada pembentangannya!"

Iaitu, halaman web mengandungi kod HTML tulen, dan semua reka bentuk diletakkan dalam set peraturan CSS yang berasingan dan sebaik-baiknya di luar halaman web ini. Ini membunuh dua burung dengan satu batu.

Pertama, kod html kekal bersih. Ia hanya mengandungi kandungan dan markup. Yang meringankan berat halaman dengan ketara.

Dan, kedua, bahagian ini memungkinkan untuk mengedit gaya reka bentuk dengan lebih cekap tanpa menjejaskan halaman web itu sendiri.

Malah terdapat keseluruhan galeri dengan contoh tapak yang cukup untuk menggantikan satu fail gaya CSS dengan yang lain, dan tapak itu serta-merta akan diubah sepenuhnya dari segi reka bentuk dan struktur penempatan blok.