讓你大跌眼鏡的瘋狂 HTML 和 CSS 技巧
作者：dev
今天，分享一個(gè)讓你大開(kāi)眼界的技巧。通過(guò)使用這個(gè)技巧，你可以將整個(gè)網(wǎng)頁(yè)變成一個(gè)CSS編輯器。沒(méi)錯(cuò)，你從未見(jiàn)過(guò)這種方法。當(dāng)我第一次嘗試時(shí)，我完全被震驚到了。
今天，分享一個(gè)讓你大開(kāi)眼界的技巧。通過(guò)使用這個(gè)技巧，你可以將整個(gè)網(wǎng)頁(yè)變成一個(gè)CSS編輯器。沒(méi)錯(cuò)，你從未見(jiàn)過(guò)這種方法。當(dāng)我第一次嘗試時(shí)，我完全被震驚到了。
現(xiàn)在，讓我們開(kāi)始吧！
步驟 1
首先，創(chuàng)建一個(gè)基礎(chǔ)的HTML骨架，并在<body>標(biāo)簽內(nèi)嵌入一個(gè)<style>標(biāo)簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tricks</title>
</head>
<body>
<style>
html{
font-size: 15px;
}
</style>
</body>
</html>步驟 2
接下來(lái)，我們進(jìn)入技巧的核心。為<style>標(biāo)簽添加一個(gè)內(nèi)聯(lián)CSS樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tricks</title>
</head>
<body>
<style style="display: block;">
html{
font-size: 15px;
}
</style>
</body>
</html>啟動(dòng)你的實(shí)時(shí)服務(wù)器。
步驟 3
在<style>標(biāo)簽中加入contenteditable屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tricks</title>
</head>
<body>
<style contenteditable style="display: block;">
html{
font-size: 15px;
}
</style>
</body>
</html>
圖片
現(xiàn)在，你可以直接在網(wǎng)頁(yè)上編寫(xiě)任何CSS樣式，而所有的CSS屬性都會(huì)立即生效。
責(zé)任編輯：武曉燕
來(lái)源：
大遷世界
