1.সিএসএস ওয়েব ডিজাইনের ক্ষেত্রে একটি গুরুত্বপূর্ণ বিষয়।ভালমানের একটি ওয়েব সাইট বানাতে হলে সিএসএস জানা দরকার।আজ আমি অপনাদের সিএসএস বিষয়ে কিছু ধারণা দেব।
সিএসএস টেবিলঃ-
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
সিএসএস ব্যাকগ্রাউন্ডঃ-
1. body {background-color:#b0c4de;}
2. h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
3. body {background-image:url("paper.gif");}
4. body
{
background-image:url("img_tree.png");
background-repeat:no-repeat;
}
সিএসএস বক্স মডেল তৈরী করতে হলে
Margin
Border
Padding
Content
এই চারটির মাপ আনুযায়ী সিএসএস বক্স মডেল তৈরী করা যায়।
যেমনঃ-
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
রাউন্ড বক্স তৈরী করতে হলেঃ-
div
{
border:2px solid;
border-radius:25px;
}
ডিভ এলিমেন্ট দিয়ে বক্স তৈরীঃ-
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 10.5-12.1 */
border-image:url(border.png) 30 30 round;
}
বক্সে ছায়া দিতেঃ-
div
{
box-shadow: 10px 10px 5px #888888;
}
টেক্সট ইফেক্ট দিতে ঃ
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
সিএসএস স্টাইলিং লিংকঃ-
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
অ্যানিমেশন ইফেক্টঃ-
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
2. আমি এই ওয়েব সাইট থেকে বিষয় বেছে নিয়েছি:
http://salearningschool.com
