Rumah > Artikel > hujung hadapan web > Helaian Gaya HTML
Helaian Gaya HTML
- 王林asal
- 2024-09-04 16:16:281235semak imbas
Artikel berikut menyediakan garis besar untuk Helaian Gaya HTML. HTML Cascading Style Sheet ialah helaian dengan peraturan dan sifat yang memberitahu penyemak imbas cara untuk memaparkan HTML menggunakan semua gaya yang ditentukan. CSS ialah cara kami menggayakan mana-mana halaman web. CSS mempunyai semua sifat seperti latar belakang, warna, fon, jarak, sempadan, dll., yang boleh kami tentukan untuk setiap elemen pada halaman.
Helaian Gaya HTML juga digunakan untuk menetapkan reka letak halaman, seperti tempat pengepala, pengaki atau mana-mana elemen lain akan diletakkan pada halaman. CSS sentiasa dibincangkan bersama HTML kerana halaman tanpa sebarang penggayaan sangat pucat tanpa penyerlahan mana-mana tajuk dsb., dan saiz fon yang sama di seluruh halaman, yang tidak memberikan pandangan yang baik sama sekali kepada pengguna.
Bagaimana untuk Menggunakan Helaian Gaya HTML?
Pada masa lalu, gaya, skrip, HTML semuanya ditulis pada halaman yang sama. Ini menjadikan halaman tersebut sangat panjang dan amat sukar untuk dibaca dan diedit. Kemudian datang cara untuk memisahkan HTML, gaya dan Javascript.
Cara-cara untuk Memasukkan Helaian Gaya HTML pada Halaman Web
Terdapat 3 cara kami boleh memasukkan gaya:
1. Penggayaan Sebaris
Ini ialah cara menulis gaya untuk setiap elemen dalam HTML itu sendiri di dalam atribut yang dipanggil gaya.
Cara penggayaan ini tidak disyorkan sama sekali kerana HTML kelihatan berselerak dan kami tidak boleh mengikut pendekatan "Tulis Sekali, Gunakan di banyak tempat."
Contoh:
Kod:
<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
2. Penggayaan Dalaman
Ini mempunyai gaya yang disertakan dalam teg gaya dan meletakkannya dalam halaman web di atas HTML. Cara penggayaan ini masih lebih baik daripada penggayaan sebaris kerana kita boleh menggabungkan gaya biasa sekiranya ia perlu digunakan untuk berbilang elemen pada satu masa.
Lebih mudah untuk mengedit fail HTML pada peringkat pembangunan, dan kami tidak perlu setiap kali membuka fail CSS yang sepadan dan mengeditnya setiap kali.
Contoh:
Kod:
<html>
<head>
<style>
container-block{
font-size: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=”container-block”>Hello World!</div>
</body>
3. Penggayaan Luaran
Ini adalah cara yang paling biasa dan terbaik untuk mempunyai gaya untuk halaman web. Ini serupa dengan penggayaan dalaman, tetapi perbezaannya ialah gaya ditulis dalam fail berasingan dengan sambungan .css dan rujukan kepadanya diletakkan dalam teg kepala halaman web.
Sintaks untuk memautkan fail CSS pada halaman web ialah:
Sintaks:
<link rel="stylesheet" type="text/css" href="theme.css">
Gaya hendaklah disertakan dalam teg kepala, yang terletak di atas teg badan (iaitu kandungan sebenar) HTML.
Apakah Keutamaan Antara Penggayaan Sebaris, Dalaman, Luaran?
Gaya sebaris lebih diutamakan daripada dalaman, dan kemudian keutamaan terakhir datang untuk penggayaan luaran.
Sebaris>Dalaman>Luaran
Amalan terbaik semasa menggunakan CSS:
- CSS boleh dipisahkan kepada beberapa fail dan bukannya hanya satu.
- Fail CSS yang dipisahkan sama ada boleh disertakan satu demi satu dalam teg kepala menggunakan teg pautan.
- Atau satu fail CSS boleh mempunyai berbilang penyata import untuk mengimport fail CSS yang lain. Ini secara logik akan memisahkan CSS tetapi akhirnya mendapat; semua gaya dipaparkan daripada fail yang sama.
Penggunaan: @import ‘./process.css’;
- Gaya boleh ditakrifkan untuk mana-mana elemen halaman web dengan pemilih sebagai teg HTML itu sendiri, nama kelas, id, sebarang nama atribut.
- Terdapat beberapa pemilih pseudo yang tersedia seperti:
- sebelum ini
- selepas
- anak ke-1
- anak sulung
- anak terakhir
- tuding
- dilawati
Ini pada asasnya ialah keadaan elemen yang dipilih dan bukan elemen yang tepat.
- Apabila fail CSS berganda disertakan dalam halaman, yang terakhir mengambil keutamaan tertinggi dan mengatasi gaya sedia ada fail sebelumnya yang mempunyai pemilih yang sama.
- Lembaran gaya hendaklah digunakan sebelum HTML itu sendiri supaya gaya digunakan semasa halaman dimuatkan. Jika disertakan pada penghujungnya, HTML akan mula-mula dimuatkan dan kemudian perlahan-lahan gaya diterapkan, yang memberikan pengalaman yang sangat buruk kepada pengguna.
Pelbagai Ciri Helaian Gaya Lata HTML
Pelbagai ciri disebutkan di bawah:
- CSS Menyediakan Animasi: Sebelum ini, javascript hanya digunakan untuk animasi. Tetapi CSS terkini, iaitu CSS3, menyediakan animasi menggunakan sifat itu sendiri.
- Awalan Vendor: Sebelum penyemak imbas mengeluarkan versi standard/nama sifat untuk sebarang ciri baharu, penyemak imbas memberikan kami beberapa awalan vendor untuk beberapa waktu untuk beberapa tempoh masa sebagai percubaan. Pembangun perlu menunggu sehingga penyemak imbas mengeluarkan versi standardnya dan sementara itu, ciri percubaan boleh digunakan dengan awalan vendor.
- Transformasi CSS: Peralihan digunakan untuk pergi secara progresif ke satu nilai daripada harta yang lain dalam tempoh tertentu.
Contoh:
Code:
-webkit-transition: width 2s, height 4s;
- CSS Transforms: Transforms in CSS allow you to translate, rotate, scale and skew elements.
Media Queries
Mobile, Desktops, iPads behave differently; however, we cannot style the pages in the same way. Previous web standards have been designed in such a way that we had different CSS for every type of device.
With the progress of web standards and the way the web is built, browsers are developed to have a single CSS that can be used for any type of device. To change the styles for devices based on width and height, media queries are used with which we can specify the min or max-width of the device and write styles within it.
Example:
Code:
@media screen and (max-width: 767px){
container{
width: 60%;
padding: 20px;
}
}
Styles are definitely a boon for the web. And as web development has increased exponentially in recent times, CSS3 has definitely gained a lot of demand to make the pages extremely interactive and intuitive.
Atas ialah kandungan terperinci Helaian Gaya HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!