让你大跌眼镜的疯狂 HTML 和 CSS 技巧

今天，分享一个让你大开眼界的技巧。通过使用这个技巧，你可以将整个网页变成一个CSS编辑器。没错，你从未见过这种方法。当我第一次尝试时，我完全被震惊到了。

现在，让我们开始吧！

步骤 1

首先，创建一个基础的HTML骨架，并在<body>标签内嵌入一个<style>标签。

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>HTML Tricks</title>
   
7. </head>
   
8. <body>
   
9.     <style>
   
10.         html{
    
11.             font-size: 15px;
    
12.         }
    
13.     </style>
    
14. </body>
    
15. </html>

复制代码

步骤 2

接下来，我们进入技巧的核心。为<style>标签添加一个内联CSS样式。

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>HTML Tricks</title>
   
7. </head>
   
8. <body>
   
9.     <style style="display: block;">
   
10.         html{
    
11.             font-size: 15px;
    
12.         }
    
13.     </style>
    
14. </body>
    
15. </html>

复制代码

启动你的实时服务器。

步骤 3

在<style>标签中加入contenteditable属性。

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>HTML Tricks</title>
   
7. </head>
   
8. <body>
   
9.     <style contenteditable style="display: block;">
   
10.         html{
    
11.             font-size: 15px;
    
12.         }
    
13.     </style>
    
14. </body>
    
15. </html>
    

复制代码

现在，你可以直接在网页上编写任何CSS样式，而所有的CSS属性都会立即生效。

亲自试试这个技巧吧，如果你喜欢的话，别忘了点赞并留言评论哦！