
:IF:
Demo tại đây :e3:
:tt:
Bước 1: Như bình thường, ta sẽ tạo cấu trúc html cơ bản. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Itrum</title>
</head>
<body>
</body>
</html>
Giải thích:
- Bên trong phần ngoặc () của console.log(); là những gì muốn in ra màn hình bằng text
- Các text đó phải bao bọc bởi dấu ngoặc kép '' hoặc ""
- Trước các text ta cần thêm lênh: %c để trình duyệt nhận định phần tử cần style
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Itrum</title>
</head>
<body>
<script>
console.log("%cDừng Lại!");
console.log("%cĐây là một tính năng của trình duyệt dành cho các nhà phát triển. Nếu ai đó bảo bạn sao chép-dán nội dung nào đó vào đây để bật một tính năng của Website thì đó là hành vi lừa đảo.");
</script>
</body>
</html>
- Tạo một biến và style dưới dạng css như bình thường, biến tạo như sau: var tên_biến = "css";
- Sau khi khai báo biến hoàn tất, ta lấy tên biến đặt sau phần text ở console.log(); và ngăn cách chúng bằng dấu phẩy "," dạng như sau: console.log("một_vài_text", tên_biến);
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Itrum</title>
</head>
<body>
<script>
var stop = "color: #f00; font-size: 45px; font-weight: 700; font-family: sans-serif; text-shadow: 0px 0px 1px #000;";
var main = "color: #222; font-size: 14px; font-weight: 500; font-family: sans-serif";
console.log("%cDừng Lại!", stop);
console.log("%cĐây là một tính năng của trình duyệt dành cho các nhà phát triển. Nếu ai đó bảo bạn sao chép-dán nội dung nào đó vào đây để bật một tính năng của Website thì đó là hành vi lừa đảo.", main);
</script>
</body>
</html>
Chúc các bạn thành công!