Sampai gaya CSS terhubung ke halaman HTML, tidak akan ada efek penggunaannya. Ada beberapa cara yang bisa dilakukan.

Bagi yang suka menonton dalam format video.

Untuk mendemonstrasikan cara kerja masing-masing metode ini, mari kita ambil, misalnya, file html dengan konten berikut.

Tugas style CSS yang akan dihubungkan adalah membuat elemen paragraf

Berwarna merah.

Dalam semua contoh, hasil pada halaman web akan sama. Anda akan melihat paragraf teks berwarna merah ini.

Pilihan 1. Di dalam tag pembuka menggunakan atribut style.

Elemen pada halaman yang terletak di dalam elemen body dapat ditambahkan atribut style. Nilai atribut ini dapat berupa properti CSS dan nilai yang harus diterapkan pada elemen ini.

Mari kita lihat cara kerjanya dengan contoh spesifik. atribut gaya ditambahkan ke elemen

Ayat

Harap dicatat bahwa dalam hal ini tidak perlu menggunakan pemilih, karena elemen yang ditambahkan gaya sudah ditentukan.

pilihan 2. Di dalam elemen gaya.

Cara lain untuk memasukkan gaya CSS adalah dengan menggunakan elemen

Pilihan 3. Menghubungkan file gaya eksternal.

Dan opsi terakhir untuk menghubungkan gaya CSS adalah dengan menggunakan elemen link, yang memungkinkan Anda menghubungkan file eksternal ke halaman HTML.

Perhatikan atribut yang ditentukan untuk elemen ini.

Itu juga wajib. Atribut href menentukan jalur ke file css yang perlu disertakan.

File style.css berisi kode berikut:

P (warna: merah;)

3 cara untuk memasukkan gaya CSS ini sangat sering digunakan dalam praktik. Saya mendorong Anda untuk bereksperimen dengan contoh-contoh ini di komputer Anda. Kedepannya, ini akan sangat berguna bagi Anda.

Pada bab pertama, Anda mempelajari bahwa desain website dibuat menggunakan CSS. Untuk pemahaman yang lebih baik tentang apa yang perlu digunakan dan untuk apa, mari kita lihat salah satu contoh ilustratif. Bayangkan HTML sebagai bingkai rumah berstruktur hitam putih tanpa hiasan, dan CSS adalah yang kami gunakan untuk menciptakan tampilan unik.

Seperti yang Anda lihat, rumah di sebelah kanan kini memiliki warna, bahan, dan dekorasi tambahan. Hal yang sama terjadi pada halaman web: dengan bantuan aturan CSS, warna dan indentasi muncul di dalamnya, gaya font dan ukuran elemen berubah, dan gaya yang utuh dan lengkap dibuat.

Lembar gaya sederhana

Mari kita lihat seperti apa style sheet paling dasar dan elemen apa saja yang ada di dalamnya. Ini adalah contoh penataan CSS untuk semua tag

Yang ada di halaman web:

Seperti apa teksnya sekarang?

Di browser dan apa arti setiap baris? Ini sangat sederhana: font akan memiliki gaya dan warna tebal #1E824C (kode warna heksadesimal) dan akan ditampilkan pada 1em (satuan relatif sama dengan ukuran font default di browser).

Gaya yang dijelaskan di atas, seperti gaya lainnya, mencakup sekumpulan elemen yang memiliki namanya sendiri. Ingatlah hal-hal tersebut sehingga ketika Anda membaca bab-bab berikut ini Anda akan memahami apa yang sedang terjadi.

Selector Dengan menentukannya, kita memberi tahu browser apa sebenarnya yang ingin kita terapkan gayanya. Dalam kasus kami, pemilihnya adalah p.

Blok deklarasi Ini adalah nama seluruh konten yang terletak di antara kurung kurawal () setelah pemilih. % Properti gaya Ini adalah perintah yang menentukan opsi pemformatan yang diinginkan (misalnya, Anda ingin mengubah gaya font font-weight , warna warna , ukuran font font-size , dll.). Tanda titik dua harus ditempatkan setelah nama properti. Anda akan mempelajari lebih lanjut tentang properti CSS nanti. Nilai properti Setelah titik dua, nilai properti itu sendiri ditulis, yang Anda tentukan sendiri, sehingga menciptakan gaya Anda sendiri. Tergantung pada propertinya, Anda harus menentukan nilai yang sesuai. Misalnya, gaya font ditentukan dengan kata kunci bold , bolder , dll., warna ditentukan oleh nilai heksadesimal, RGB(A), HSL(A) atau kata kunci red , orange , white , dll., ukuran font ditentukan oleh CSS satuan (persentase) , piksel, piksel, poin

pt

tinggi font em

Ini juga berfungsi, tetapi apakah mudah dimengerti? Apalagi jika kode CSSnya cukup panjang. Tentu saja tidak ada salahnya untuk memisahkannya setidaknya dengan spasi. Ada beberapa aturan sopan santun, dan jika Anda segera mempelajarinya, Anda akan mengucapkan “terima kasih” kepada diri sendiri di kemudian hari.

Sangat sering, ketika mendeskripsikan suatu gaya, bentuk notasi ringkas digunakan, di mana semua properti untuk satu pemilih ditunjukkan dalam satu blok:

P ( berat font: tebal; warna: #1E824C; ukuran font: 1em; )

Dan bentuk notasi ini sangat rumit, meskipun berhasil:

P (berat font: tebal;) p (warna: #1E824C;) p (ukuran font: 1em;)

Untuk mempermudah navigasi kode, disarankan untuk menulis setiap properti pada baris baru dan menggunakan tab atau spasi saat membuat daftar properti. Terkadang ada spasi antara titik dua dan nilai properti, namun di sini Anda dapat memutuskan mana yang lebih nyaman bagi Anda.

Untuk menambah kenyamanan, Anda dapat menambahkan komentar langsung di CSS. Di dalamnya Anda dapat menulis penjelasan dan catatan untuk membantu Anda menavigasi style sheet.

Komentar pada CSS ditulis antara karakter /* dan */. Mereka tidak ditampilkan di halaman web di browser dan hanya terlihat di kode. Pengembang juga sering menggunakan komentar untuk menyembunyikan bagian kode CSS yang sementara tidak diperlukan. Komentarnya terlihat seperti ini:

/* Gaya untuk isi teks */ p ( font-weight: bold; color: #1E824C; font-size: 1em; )

Lembar gaya internal dan eksternal

Setelah Anda membuat style sheet, Anda dapat memilih cara melampirkannya ke halaman web Anda. Ada dua opsi untuk tabel - internal, yang ditambahkan langsung ke halaman, dan eksternal, yang terletak di file terpisah dengan ekstensi .css dan terhubung ke halaman menggunakan link.

Style sheet internal ditulis dalam dokumen HTML di antara tag. Anda perlu menambahkan style sheet ke setiap halaman web. Jika situs memiliki banyak halaman yang memerlukan desain yang sama, maka menambah dan mengedit gaya menjadi pekerjaan tanpa pamrih - prosesnya akan memakan waktu yang sangat lama. Oleh karena itu, style sheet internal dianggap merepotkan.

Style sheet eksternal jauh lebih umum. Anda hanya perlu menghubungkan tabel ke semua halaman web yang diperlukan menggunakan tag dengan atribut rel (mendefinisikan hubungan antara halaman dan file yang disertakan) dan nilai stylesheet, yang berarti bahwa file yang disertakan berisi style sheet. Atribut href adalah jalur (URL) ke file .css Anda:

Dengan mengedit satu file saja, Anda dapat mengubah gaya seluruh situs sekaligus, berapa pun jumlah halamannya. Ini sangat mudah, terutama untuk sumber daya yang besar.

Pelajaran: membuat style sheet

Karena style sheet eksternal adalah yang paling nyaman dan banyak digunakan dalam pengembangan desain, kita akan mempelajari cara membuatnya. Anda dapat mengunduh arsip beserta file untuk pelajaran ini di halaman ini.

Di dalam folder tersebut Anda akan menemukan dokumen HTML dengan contoh halaman sederhana dan gambar (untuk digunakan dalam tutorial). Buka dokumen HTML di browser Anda. Anda akan melihat bahwa halaman tersebut terlihat normal sepenuhnya. Untuk memberikan tampilan yang lebih menarik, mari kita menatanya.

Untuk saat ini, Anda tidak perlu mempelajari terlalu dalam tentang arti setiap bagian kode. Sekarang Anda perlu memahami prinsip operasinya. Mari kita mulai.

Menghubungkan CSS ke HTML

Untuk memulai, buka editor teks apa pun di komputer Anda (notepad bisa digunakan) dan buat file kosong bernama style , simpan dengan ekstensi .css (Anda akan mendapatkan file style.css). Simpan file di folder tempat dokumen HTML yang diunduh berada.

Buka dokumen HTML di editor teks, serta di browser (untuk melihat perubahan tampilan halaman dengan mudah). Tambahkan di antara tag kode berikut:

Ringkaslah secara singkat apa yang baru saja Anda lakukan. Dengan menempelkan kode ini ke dalam dokumen HTML, Anda:

• memberikan tautan ke font bernama Roboto Condensed, yang akan diambil dari server Google (kami akan memberi tahu Anda lebih banyak tentang font Google nanti);
• menghubungkan style sheet eksternal kita style.css (kosong untuk saat ini).

Menulis gaya CSS

Simpan perubahan Anda ke dokumen HTML dan buka file .css kosong yang Anda buat. Mari tambahkan beberapa gaya pada halaman:

Html ( padding-top: 5px; gambar latar: url(background.jpg); )

Simpan perubahan Anda. Selamat, Anda telah menulis aturan pertama Anda - ini menyangkut tag . Properti pertama - padding-top - akan menambahkan padding atas sebesar 5 piksel antara jendela browser dan konten halaman web. Dengan properti kedua, background-image , Anda telah menyertakan gambar untuk latar belakang seluruh halaman dengan menentukan jalur ke file grafik (terletak di folder yang sama dengan dokumen HTML).

Refresh halaman web yang terbuka di browser Anda. Jika semuanya dilakukan dengan benar, Anda akan melihat bahwa latar belakang telah muncul di halaman, dan jarak antara bagian atas jendela dan teks sedikit bertambah.

Badan ( lebar: 75%; padding: 40 piksel; margin: 15 piksel otomatis; warna latar: #EBEBEB; radius batas: 30 piksel; )

Simpan perubahan ke file. Sekarang kamu:

• atur area untuk konten tag , yang setara dengan 75% lebar jendela browser;
• memberikan margin 40 piksel dari semua sisi area konten;
• memposisikan area di tengah halaman, dan juga membuat indentasi bagian atas dan bawah sebesar 15 piksel;
• atur warna latar belakang #EBEBEB untuk area konten;
• membulatkan sudut area persegi panjang, menentukan radius pembulatan 30 piksel.

Perbarui dokumen HTML lagi. Pada saat yang sama, pastikan cache dinonaktifkan atau muat ulang halaman dengan semua file terkait diperbarui menggunakan kombinasi tombol khusus (misalnya, untuk Chrome ini Ctrl+F5).

Anda akan melihat area persegi panjang dengan sudut membulat telah ditambahkan ke tengah halaman. Ini adalah hasil tindakan Anda pada file CSS. Anda juga dapat mencoba memperkecil jendela browser Anda dan mengagumi bagaimana lebar area persegi panjang menyesuaikan dengan ukurannya. Hal ini disebabkan oleh fakta bahwa lebar ditentukan dalam persentase.

Mengubah font menggunakan CSS

Saatnya menghias teks kita. Tambahkan kode ini ke stylesheet Anda dan simpan perubahan Anda:

H1 ( warna: #E87E04; ukuran font: 2em; margin-kiri: 20px; font-family: "Roboto Condensed", sans-serif; ) h2 ( warna: #E87E04; ukuran font: 1.7em; margin-kiri : 20px; font-family: "Roboto Condensed", sans-serif; ) p ( warna: #22313F; tinggi garis: 150%; margin-atas: 20px; margin-kiri: 20px; font-family: "Roboto Condensed ", sans-serif; )

Setelah menulis ini, Anda mengatur warna font untuk tag h1 , h2 , p, menunjukkan ukurannya, menambahkan margin dari tepi kiri sebesar 20 piksel dan tambahan untuk

Kami membuat indentasi bagian atas sebanyak 20 piksel dan mengatur tinggi garis (spasian baris teks) menjadi 50% lebih besar dari standar. Selain itu, Anda menghubungkan font Roboto Condensed ke ketiga tag (itulah sebabnya Anda harus memberikan tautan ke font tersebut di file HTML di awal).

Refresh halaman di browser Anda dan kagumi hasilnya. Dalam tutorial ini kita akan mencoba satu hal lagi. Tambahkan kode ini ke CSS:

Penekanan ( font-weight: bold; )

Simpan dan segarkan halaman di browser Anda. Anda akan melihat bahwa di paragraf terakhir font menjadi tebal di beberapa bagian teks. Untuk memahami apa yang terjadi, buka jendela editor teks tempat Anda membuka file HTML di awal. Perhatikan paragraf terakhir: sebagian kalimat dibungkus dengan tag dengan kelas penekanan. Dengan cara ini Anda telah menulis gaya untuk satu baris teks dalam sebuah paragraf. Kita akan berbicara lebih banyak tentang kelas di bab berikutnya.

Anda akan mendapatkan halaman seperti ini:

Sebagai latihan, coba ubah ukuran teks

(misalkan 1.1em), dan juga tambah jarak di antaranya

Dan tepi kiri area konten sebesar 10 piksel lagi.

Kesimpulan

Bab ini membahas sintaks CSS dan cara membuat style sheet dasar. Anda telah mempelajari cara memasukkan CSS ke dalam halaman HTML dan cara membuat gaya sederhana. Mari kita soroti hal-hal utama yang perlu Anda ingat dari bab ini:

Setiap gaya CSS terdiri dari beberapa elemen: pemilih, properti gaya, dan nilai properti ini.

Semua properti dan nilainya ditulis dalam blok deklarasi di antara dua kurung kurawal () setelah menentukan pemilih.

Anda harus hati-hati mengikuti tanda-tandanya: dua kurung kurawal (membuka di awal blok iklan dan menutup di akhir). Tanpa tanda kurung ini, CSS tidak akan berfungsi dengan benar.

Diperlukan untuk menempatkan titik dua setelah properti dan titik koma setelah nilai.

Untuk kenyamanan dan keterbacaan kode CSS Anda yang lebih baik, tulis setiap properti di baris baru, dan jangan berhemat pada spasi dan tab.

Selamat siang semuanya.

Jadi, di salah satu artikel sebelumnya kita berkenalan.

Namun kami belum membahas satu masalah yang sangat penting. Yaitu - cara mengikat gaya CSS ke kode HTML halaman situs web kami.

Pertanyaan ini sebenarnya sangat penting. Bagaimanapun jika kita salah mengikat gaya css ke halaman situs kita, maka kita tidak akan bisa menggunakan gaya tersebut. Browser akan mengabaikannya begitu saja dan kita tidak akan melihat hasil yang diberikan oleh penggunaan gaya tertentu.

Ada berbagai cara untuk mengikat gaya CSS ke kode halaman, dan hari ini kita akan mencoba melihat semuanya.

Mari kita mulai.

Berdasarkan sifat menghubungkan style sheet cascading CSS ke dokumen HTML, ada: style sheet eksternal dan internal.

1. Lembar gaya CSS internal.

Style sheet internal terletak tepat di dalam halaman web kita. Ya, ya... Tepat di dalam kode HTML setiap halaman.

Ini, tentu saja, sedikit merepotkan, tetapi kemungkinan seperti itu masih ada dan saya tidak bisa tidak mengatakannya.

Jadi, cara pertama untuk menghubungkan gaya CSS ke kode halaman adalah dengan menggunakan tag, berlaku untuk seluruh konten dokumen HTML. Jumlahnya bisa sebanyak yang Anda suka, bahkan semua gaya untuk keseluruhan situs. Tapi ini sedikit salah. Saya akan membicarakan hal ini nanti ketika saya melihat style sheet eksternal.

Terkadang Anda harus melakukannya tulis gaya CSS di dalam kode HTML.

Misalnya, ketika Anda memasang semacam spanduk iklan di situs web Anda, Anda memasukkan kode spanduk tersebut ke dalam kode halaman.

Agar banner ini dapat ditampilkan dengan benar (tidak melampaui batas yang ditentukan, mungkin memerlukan bingkai, dll.), terkadang Anda perlu melampirkan beberapa instruksi CSS ke dalamnya.

Tapi tidak ada gunanya membuat perubahan pada style sheet secara umum. Spanduk adalah fenomena sementara. Hari ini satu, besok lagi. Oleh karena itu, lebih mudah untuk menulis gaya langsung di dalam kode spanduk ini.

Artinya, kita perlu menghubungkan gaya CSS hanya ke elemen halaman tertentu. Ini dilakukan dengan sangat sederhana - menggunakan atribut style.

Gaya yang ditulis dengan cara ini hanya memengaruhi elemen yang tagnya ditempatkan. Dalam hal ini, hanya untuk paragraf ini (tag

). Dan tidak kepada yang lain!

2. Style sheet eksternal.

Nama style sheet CSS eksternal berarti bahwa lembar tersebut ditulis bukan di badan dokumen HTML, tetapi di file khusus yang terpisah. File-file ini memiliki ekstensi .css

Jadi, seperti yang dijanjikan, saya akan memberi tahu Anda mengapa lebih baik menggunakan style sheet eksternal.

Faktanya adalah ini memungkinkan halaman situs Anda dimuat sedikit lebih cepat. Mungkin sepersekian detik, tapi lebih cepat. Ini mengurangi beban di situs Anda dan lebih nyaman bagi pengunjung Anda - mereka tidak perlu menunggu lama untuk memuat halaman.

Mengapa ini terjadi?

Jika gaya CSS untuk situs Anda berada dalam file terpisah, maka browser pengguna tidak perlu memuat gaya ini setiap kali halaman baru dimuat. Ia mendownloadnya satu kali, menempatkannya di cache (area memori di komputer pengunjung), dan ketika halaman berikutnya dimuat, ia mengambil gaya dari sana.

Ada dua cara untuk melampirkan file stylesheet CSS ke halaman web.

Cara pertama, yang paling umum, adalah dengan menggunakan tag dengan atribut: rel = "stylesheet" type = "text/css" href = "style file.css" di dalam kode header halaman (tag ).

Misalnya:

Contoh ini melampirkan gaya CSS yang ditulis dalam file style.css ke halaman. Mereka berlaku di seluruh dokumen.

Ada cara lain lampirkan style sheet eksternal ke HTML dokumen. Ini menggunakan direktif @import. Ini memungkinkan Anda untuk mengimpor konten file CSS ke dalam style sheet saat ini.

Anda dapat menggunakannya untuk menambahkan beberapa style sheet ke yang lain, dan untuk melampirkan file style sheet ke dokumen HTML. Untuk melakukan ini, Anda perlu menuliskannya di dalam tag

Gaya terhubung dengan cara ini berlaku di seluruh dokumen, tapi bagaimana jika Anda perlu menentukannya hanya untuk satu blok? Anda dapat mendeskripsikan gaya di dalam blok (tag) tertentu menggunakan atribut tag ini - gaya. Contoh menghubungkan gaya untuk satu tag:

Teks acak ukuran 15 dan warna merah

Gaya dijelaskan dengan cara ini tidak mempengaruhi tag dokumen lainnya.

2. Metode yang memungkinkan Anda menghubungkan gaya dari file lain atau menghubungkan gaya desain eksternal.

Jika Anda memiliki gaya dalam file terpisah, maka gaya tersebut harus dihubungkan dengan baris khusus. Untuk menentukan gaya seluruh dokumen HTML, kita akan menggunakan tag , yang harus ditempatkan di dalam tag yang saya bicarakan di . Contoh koneksi tersebut:

Jalur ke file yang berisi gaya ditunjukkan di bagian tag ini: href="style.css" dalam tanda kutip. Contohnya mencakup file gaya yang berada di folder yang sama dengan dokumen HTML.

Anda juga dapat menghubungkan gaya eksternal dengan cara lain - dengan arahan @import khusus, yang diapit di dalam tag . Contoh koneksi menggunakan arahan @impor:

.....

file gaya css, atau lebih tepatnya jalur menuju ke sana, dalam metode ini ditunjukkan dalam tanda kurung.

Koneksi gaya yang dijelaskan pada metode kedua harus ditempatkan di antara tag .

Jika Anda perlu menyertakan gaya CSS untuk dokumen XML, Anda perlu menggunakan baris berikut:

Dalam metode koneksi ini, jalur ke file dengan gaya ditunjukkan dalam tanda kutip.

Pelajaran hari ini selesai! Tata letak yang menyenangkan dan pengetahuan baru!

Apakah Anda ingin pergi ke Eropa? Apakah kamu membutuhkan