Style Sheet ها و پس زمینه
در این جلسه به آموزش Style Sheet ها و پس زمینه خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
Style Sheet خارجی (external)
Style Sheet خارجی، هنگامی که style به صفحات زیادی اعمال می شود، مناسب است. با یک Sheet Style خارجی، می توانید ظاهر کل یک سایت ر با تغییر دادن یک فایل عوض کنید. هر صفحه باید با استفاده از تگ <link> به sheet style لینک شود. تگ <link> درون بخش head قرار می گیرد.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
Style Sheet خارجی، را می توان در یک editor text نوشت. این فایل نباید حاوی هیچ تگ html باشد. sheet style شما باید با پسوند css .ذخیره شود. نمونه ای از یک sheet style در زیر نشان داده شده است.
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
فضاهای بین مقدار صفت و واحدها را خالی نگذارید!
Style Sheet داخلی (internal)
Style Sheet داخلی باید هنگامی مورد استفاده قرار گیرد که یک سند واحد، style منحصر به فردی دارد. Style های داخلی با استفاده از تگ <style> در بخش head صفحه HTML تعریف می شود، مانند مثال زیر
<head>
<style type="text/css">
hr {
color: sienna;
}
p {
margin-left: 20px;
}
body {
background-image: url("images/back40.gif");
}
</style>
</head>
Style Sheet ها و پس زمینه
style های inline
استایل inline ،با ترکیب کردن content با presentation ،بسیاری از مزایای sheet style ها را از دست می دهد. از این متد باید به ندرت استفاده کرد. برای استفاده از استایل های inline ،باید از اتری بیوت استایل در تگ مربوط استفاده کرد. اتری بیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد
<p style="color:sienna;margin-left:20px">This is a paragraph</p>
Style Sheet های چندگانه
اگر بعضی از صفت ها برای یک selector در sheet style های مختلف تعیین شده باشد، value ها از style sheet معینی به ارث برده خواهند شد.
مثلا، یک sheet style خارجی دارای صفت های زیر برای سلکتور h3 است
h3
{
Color:red;
text-align:left;
font-size:8pt;
}
و یک style sheet داخلی دارای صفت های زیر برای سلکتور h3 است
h3
{
text-align:right;
font-size:20pt;
}
اگر صفحه ای با sheet style داخلی به یک sheet style خارجی لینک شود، صفت های h3 اینگونه خواهد بود
Color:red; text-align:right; font-size:20pt;
رنگ، از sheet style خارجی ارث می برد و alignment-text و اندازه فونت با sheet style داخلی جایگزین می شود. Style های چندگانه به یک استایل cascade می شوند . Style ها را می توان به طریق زیر معین کرد درون یک عنصر HTML درون بخش head صفحه HTML در یک فایل CSS خارجی نکته حتی sheet style های خارجی چندگانه را نیز می توان درون یک سند HTML واحد reference کرد. ترتیب cascade کردن هنگامی که بیش از یک style که برای عنصر HTML تعیین شده، وجود داشته باشد، از کدام style استفاده می شود؟
معمولا می توان گفت که همه style ها، با قوانین زیر به یک sheet style مجازی cascade می شود، و قانون چهارم بالاترین اولویت را دارد پبش فرض مرورگر خارجی style sheet sheet style داخلی در بخش head استایل inline درون عنصر HTML بنابراین، یک استایل inline ،بالاترین اولویت را دارد.
نکته اگر لینک به sheet style خارجی بعد از sheet style داخلی در<head <HTML داخلی قرار داده شود، sheet style خارجی، sheet style داخلی را override می کند.
پس زمینه
از خصوصیت های properties پس زمینه ی CSS به منظور تعریف جلوه های effect پس زمینه ی المان ها استفاده می شود. خصوصیت های CSS که ویژه ی جلوه های پس زمینه بکار برده می شوند به ترتیب زیر می باشد
background-color
background-image
background-repeat
background-attachment
background-position
رنگ پس زمینه
خصوصیتbackground-color در واقع رنگ پس زمینه ی یک المان را مشخص می کند .
رنگ پس زمینه ی یک صفحه ی متعارف به صورت زیر تعریف set می شود
مثال
body {
background-color: #b0c4de;
}
در CSS ،رنگ یک صفحه اغلب توسط مقادیر زیر تعیین می شود
یک مقدار HEX شانزده شانزدهی – مثل “ff0000”
یک مقدار RGB مانند rgb(“۲۵۵″,”۰″,”۰”)
اسم رنگ دلخواه – مانند “red”
در مثال زیر،
در مثال زیر، h1 و p ، و المان های <div> رنگ های پس زمینه ی متفاوتی دارند
مثال
h1 {
background-color: #6495ed;
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
Style Sheet ها و پس زمینه
تصویر پس زمینه
خصوصیت image-background در حقیقت تصویری برای استفاده به عنوان پس زمینه ی یک المان تعریف می کند . به صورت پیش فرض، تصویر تکرار می شود تا بدین وسیله بتواند کل عنصر ( element )مربوطه را تحت پوشش قرار دهد . تصویر پس زمینه به صورت زیر انتخاب می شود
body {
background-image: url("paper.gif");
}
در زیر مثالی از ترکیبی نامناسب از متن و تصویر پس زمینه ارائه شده است، به گونه ای که متن تقریبا ناخوانا است
body {
background-image: url("bgdesert.jpg");
}
تصویر پس زمینه – تکرار تصویر پس زمینه با نمای افقی و عمودی
به صورت پیش فرض، خصوصیت image-background یک تصویر را با هر دو نما یا صورت افقی و عمودی تکرار می کند . برخی از این تصاویر باید تنها به صورت افقی یا عمودی تکرار شوند، در غیر این صورت به گونه ای عجیب و نامتعارف به نظر می رسد، مشابه نمونه ی زیر
body {
background-image: url("gradient_bg.png");
}
در صورتی که اگر تصویر مورد نظر تنها افقی تکرار شود (x-repeat ) پس زمینه ظاهر بهتری پیدا خواهد کرد
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
نکته جهت تکرار تصویری به صورت عمودی از ;y-repeat:repeat-background بهره بگیرید .
آموزش خاصیت های Set position و no-repeat
نکته: حین استفاده از یک تصویر پس زمینه، سعی کنید از آن تصویری استفاده کنید که قالب متن را برهم نمی زند .
به منظور نمایش تصویری برای تنها یکبار کافی است از خاصیت repeat-background بهره بگیرید این خاصیت تعریف می کند که تصویر مربوطه تنها یک مرتبه تکرار شود
مثال
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
در مثال فوق، تصویر پس زمینه درست در مکانی یکسان با متن نمایش داده شده است .
حال می خواهیم موقعیت position تصویر را تغییر دهیم تا از این طریق تصویر مذکور شکل متن مورد نظر را برهم نزد .
موقعیت تصویر توسط خاصیت position-background تعیین می گردد
مثال
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Style Sheet ها و پس زمینه
آموزش خاصیت Shorthand – Background
همان طور که در مثال های فوق مشاهده می کنید، خاصیت های فراوانی وجود دارند که حین پرداختن به پس زمینه و مدیریت آن باید درنظر گرفت .
به منظور کاهش حجم کد، این امکان وجود دارد که تمامی خصوصیت ها properties را در تنها یک خصوصیت تعریف کرد . خاصیت مذکور همچنین shorthand خصوصیت مختصر نویسی اطالق می گردد . خاصیت مختصرنویسی property shorthand ویژه ی پس زمینه همان “background “می باشد
مثال
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
به خاطر داشته باشید که هنگام استفاده از خصوصیت مختصر نویسی، ترتیب مقادیر property ها به صورت زیر خواهد بود
background-color
background-image
background-repeat
background-attachment
background-position
هیچ اهمیتی ندارد اگر یکی از مقادیر property مفقود بوده یا در حال حاضر موجود نمی باشد، به خصوص تا زمانی که دیگر مقادیر موجود به ترتیبی که فوق ذکر شده سامان دهی شده باشند .
این مثال از نوع یا سطح پیشرفته ی CSS بهره می گیرد . تصویر همراه با بقیه ی صفحه، بالا یا پایین scroll نمی رود .
تمامی خصوصیت های پس زمینه ی CSS در جدول زیر تشریح شده
background:
کلیه ی خصوصیت های پس زمنیه را در تنها یک تعریف declaration مشخص می کند
background-attachment:
تعیین می کند آیا یک تصویر پس زمینه ثابت بوده و یا همراه با بقیه ی صفحه حرکت داشته و جا به جا شود (scroll)
background-color:
رنگ پس زمینه ی یک عنصر را انتخاب می کند
background-image:
تصویر پس زمینه ی یک المان را تعیین می کند
background-position:
مکان شروع جای گیری یک تصویر پس زمینه را مشخص می کند
background-repeat:
نحوه ی نمایش مجدد یا تکرار یک تصویر پس زمینه را تعیین می کند
ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری Style Sheet ها و پس زمینه پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت. پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید
دیدگاه ها