با سلام مجدد خدمت دوستان عزیز
تو پست قبلی به شکل کلی html اشاره کردم و گفتم که هر تگ توی html شامل یک سری خصوصیت ها هست که ظاهرش رو تعیین می کنن. مثلا رنگ پشت زمینه (background-color) ، رنگ نوشته (color) ، فونت (font-family) ، عرض (width) ، ارتفاع (height) و ....
اما سازمان w3c تصمیم گرفت که یک سری صفحه های استاندارد برای تعیین خصوصیات المان های موجود در html در نظر بگیره ، که این صفحه ها stylesheet نام دارن. توی این صفحه ها ۳ دسته کلی از تعریف خصوصیات وجود داره. نوع اول برای تعیین المان های ذاتی html هست . به شکل زیر :
کد:
body
{
background-color : Gray;
font-family : tahoma;
direction : rtl;
}
با نوشتن این کد توی stylesheet و پیوند دادن این stylesheet با هر صفحه html ، قسمت body اون صفحه به شکل خصوصیت های گفته شده در میاد.(یعنی دارای پشت زمینه ی خاکستری ، فونت نوشته های tahoma و سمت نوشته ها از راست به چپ خواهد بود)
این طرز نوشتن برای تمام المان های html وجود داره ، یعنی مثلا اگه برای تگ <p> این خصوصیت ها رو تنظیم کنیم ، تمام پاراگراف های صفحه به این شکل در میاد.
نوع دوم ، تعیین یک دسته کلی از خصوصیت ها در قالب یک کلاس هست که میشه اون کلاس رو به هر تگی توی html نسبت داد. این نوع تعریف با یک نقطه در اول اسم کلاس شروع میشه. مثلا
کد:
.mystyle
{
width : 200px;
height : 100px;
margin-left : 20px;
text-align : center;
background-color : Navy;
}
این دسته کلی از خصوصیت ها از این به بعد با اسم mystyle شناخته میشه و به هر المانی نسبت داده بشه ، اون المان از این خصوصیت ها پیروی می کنه. (یعنی ، عرض اون ۲۰۰ پیکسل میشه و ارتفاش ۱۰۰ پیکسل ، فاصله از المان سمت چپ ، ۲۰ پیکسل ، نوشته های وسط چین و رنگ پشت زمینه ی آبی تیره )
برای نسبت دادن این کلاس به هر المان باید اسم اینو توی خاصیت class برای اون المان نوشت. مثلا :
نوع سوم این خاصیت ها برای نسبت دادن مستقیم یک سری ویژگی ها به فقط یک شیء استفاده میشه. هر المان توی html دارای یک id منحصر به فرد هست. توی صفحه stylesheet میشه مستقیما به این شکل ویژگی ها رو به اون المان نسبت داد:
کد:
#id5
{
width : 300px;
background-image : path;
background-position : top center;
background-repeat : no-repeat;
}
و این ویژگی ها به المان id5 نسبت داده میشه.
پس از این که این کد ها داخل یک Stylesheet نوشته شد (یعنی یک صفحه با پسوند : css) اون صفحه با قرار دادن کد زیر در قسمت head به یک صفحه html نسبت داده میشه :
کد:
<link rel="stylesheet" type="text/css" href="stylesheetpath" />
در پست بعدی ، بخش های دیگری از مفاهیم css رو مطرح می کنم .
منتظر نظرات شما دوستان عزیز هستم.