Rumah > Artikel > hujung hadapan web > Apakah tiga cara berbeza untuk memperkenalkan css?
Apakah tiga cara berbeza untuk memperkenalkan css?
- 青灯夜游asal
- 2022-09-02 17:23:5822433semak imbas
Tiga cara untuk memperkenalkan css: 1. Pengenalan sebaris, gunakan atribut gaya untuk memasukkan kod CSS ke dalam teg HTML tertentu, sintaksnya ialah "
..< ; /nama tag>"; 2. Pengenalan terbenam, letakkan kod CSS dalam pasangan tag gaya di bahagian kepala dokumen, sintaksnya ialah ""; 3. Pengenalan luaran, letak kod CSS dalam Ke dalam fail CSS luaran, gunakan teg pautan atau peraturan "@import" untuk memperkenalkannya ke dalam dokumen html.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
CSS: Helaian gaya berlatarkan ialah bahasa komputer yang digunakan untuk menyatakan gaya dokumen seperti HTML atau XML. CSS bukan sahaja boleh mengubah suai laman web secara statik, tetapi juga boleh bekerjasama dengan pelbagai bahasa skrip untuk memformat pelbagai elemen halaman web secara dinamik CSS boleh melakukan kawalan tepat tahap piksel bagi susun atur kedudukan elemen dalam halaman web, menyokong hampir semua fon saiz dan gaya, dan mempunyai Keupayaan untuk mengedit objek halaman web dan gaya model
Sintaks asas CSS:
Peraturan CSS terdiri daripada dua bahagian utama: pemilih, Serta satu atau lebih pernyataan, pemilih biasanya elemen HTML yang gayanya perlu diubah Setiap pernyataan terdiri daripada atribut dan nilai.
1.Pemilih
Pemilih terdiri daripada id, atribut kelas atau nama elemen itu sendiri bagi elemen HTML dan beberapa Khas simbol digunakan untuk menentukan elemen HTML untuk menentukan gaya Sebagai contoh, pemilih p bermaksud untuk menentukan gaya untuk semua teg
>
Mungkin terdapat satu atau banyak pengisytiharan ini memberitahu penyemak imbas cara untuk memaparkan objek yang ditentukan oleh pemilih. Semua pengisytiharan diletakkan dalam sepasang pendakap kerinting { }, serta-merta mengikut pemilih. Perisytiharan mesti mengandungi dua bahagian: atribut dan nilai atribut, dan menggunakan koma bertitik untuk menandakan pengakhiran pengisytiharan boleh diabaikan untuk pengisytiharan terakhir dalam gaya.
Atribut: Nama gaya yang anda ingin tetapkan untuk elemen HTML, yang terdiri daripada satu siri kata kunci, seperti warna, jidar, fon, dll., dalam CSS Menyediakan banyak atribut, anda boleh melihatnya melalui laman web rasmi W3C;
Nilai: terdiri daripada nilai berangka dan unit atau kata kunci, digunakan untuk mengawal kesan paparan atribut tertentu, seperti nilai bagi atribut warna Ia boleh menjadi merah atau #F1F1F1 dsb.
- Kolon: diperlukan untuk memisahkan atribut dan nilai Setiap gabungan atribut dan nilai boleh dianggap sebagai pernyataan, dan koma bertitik diperlukan pada akhir setiap. pernyataan ; Pada penghujungnya, pengisytiharan milik pemilih yang sama perlu dibalut dengan pendakap kerinting { }.
Tiga bentuk pengenalan CSS
1 Tambahkan atribut gaya terus pada teg elemen HTML tunggal untuk mengawal gaya persembahan teg HTML.
Cara memperkenalkan CSS ini adalah terpencar, fleksibel dan mudah, tetapi ia tidak mempunyai integriti dan perancangan, yang tidak sesuai untuk pengubahsuaian dan penyelenggaraan kemudian Apabila gaya tapak web perlu diubah suai, pengubahsuaian yang sama mungkin melibatkan pelbagai tempat , kos penyelenggaraan yang tinggi. Kesan gaya menggunakan atribut STYLE adalah yang paling kuat dan akan menimpa kesan gaya yang sama daripada kaedah pengenalan lain.
Walaupun gaya sebaris (gaya sebaris) boleh menjadi sangat mudah untuk menetapkan gaya CSS kepada teg HTML, kelemahannya juga sangat jelas, dan tidak disyorkan untuk gunakannya terlalu banyak.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: maroon; margin-left: 40px">PHP中文网</h1>
<p style="color: blue;">https://www.php.cn/</p>
</body>
</html>
Mentakrifkan gaya sebaris memerlukan penentuan atribut gaya dalam setiap teg HTML, yang sangat menyusahkan; apabila menggunakan tanda petikan atau tanda petikan tunggal, kerana atribut tag HTML biasanya menggunakan tanda petikan berganda untuk membalut nilai atribut, seperti ; > dalam Gaya yang ditakrifkan dalam gaya sebaris tidak boleh digunakan semula di mana-mana tempat lain; halaman perlu diubah suai satu demi satu;
- Menambah terlalu banyak gaya sebaris akan meningkatkan saiz dokumen HTML.
- 2. Helaian gaya dalaman (pengenalan terbenam) Tulis kod gaya pada halaman
语法：
<style type="text/css">
@import url("css文件路径");
</style>简单实例：
css外部样式表 style.css
h1{
color:red;
}
p{
font-size:14px;
color:green;
}HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="styleSheet" href="style.css" />
<!-- <style>
@import url("style.cs");
</style> -->
</head>
<body>
<h1>link标签或@import的应用</h1>
<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
</body>
</html>实现效果：
link和@import的区别：
1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
（学习视频分享：web前端）
Atas ialah kandungan terperinci Apakah tiga cara berbeza untuk memperkenalkan css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!