ভিজ্যুয়াল ফরম্যাটিং মডেলের অধীনে প্রক্রিয়াকরণের পরে একটি নথি গাছের প্রতিটি উপাদানের জন্য এক বা একাধিক বাক্স তৈরি করা হয়। একটি তৈরি করা বাক্সের সাথে কিছু CSS বৈশিষ্ট্য যুক্ত থাকে এবং সেই অনুযায়ী HTML-এ রেন্ডার করা হয়।
নিম্নলিখিত বাক্সগুলি CSS -
-এ তৈরি করা হয়- ব্লক-স্তরের উপাদান এবং ব্লক বক্স
- বেনামী ব্লক বক্স
- ইনলাইন-লেভেল এলিমেন্ট এবং ইনলাইন বক্স
- বেনামী ইনলাইন বক্স
উদাহরণ
আসুন Block-level Elements এবং Block Boxes -
-এর উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<title>CSS Block-level Elements and Block Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
box-sizing: border-box;
/*margin:5px;*/
}
input[type="button"] {
border-radius: 10px;
}
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Block-level Elements and Block Boxes</legend>
<div id="container">Color Orange
<div class="child"></div>Color Red
<div class="child"></div>Color Violet
<div class="child"></div>
</div><br>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
উদাহরণ
আসুন ইনলাইন-লেভেল এলিমেন্ট এবং ইনলাইন বক্স -
-এর উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
