Chúng tôi có thể xác định kiểu cho trang web ở chế độ toàn màn hình bằng cách sử dụng CSS:fullscreen pseudo-class.
Cú pháp của CSS:fullscreen pseudo-class như sau
Selector:fullscreen {
attribute: /*value*/
} Các ví dụ sau minh họa CSS:fullscreen pseudo-class.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 3%;
}
:fullscreen {
background-color: thistle;
font-size: 2em;
}
:-webkit-full-screen {
background-color: thistle;
font-size: 2em;
}
:-ms-fullscreen {
background-color: thistle;
font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
if (item.requestFullscreen) {
item.requestFullscreen();
} else if (item.webkitRequestFullscreen) {
item.webkitRequestFullscreen();
} else if (item.msRequestFullscreen) {
item.msRequestFullscreen();
}
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 3%;
color: white;
box-shadow: inset 0 0 40px green;
}
:fullscreen {
background: url("https://images.unsplash.com/photo-1612149413930- 72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
font-size: 2em;
}
:-webkit-full-screen {
background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
font-size: 2em;
}
:-ms-fullscreen {
background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
if (item.requestFullscreen) {
item.requestFullscreen();
} else if (item.webkitRequestFullscreen) {
item.webkitRequestFullscreen();
} else if (item.msRequestFullscreen)
item.msRequestFullscreen();
}
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
