خب تا الان با شکل کلی دستورات CSS و چگونگی اون آشنا شدید. از الان سعی می کنم کلیه دستورات مربوط به یک خاصیت رو بذارم.
از خاصیت border شروع می کنیم. border یا همون کادر می تونه دور پاراگراف ها و بخش ها بیاد. border چند خاصیت رو می تونه بپذیره :
border-top, border-left, border-right, border-bottom
برای تعیین خواص مربوط به کادر بالا و پایین و چپ و راست هست که هر کدوم خواص دیگه ای به شرح زیر می گیرن :
style, width, color
خاصیت style به صورت زیر مقادیری رو می پذیره :
This is a none border style sample in css
This is a solid border sample style in css
This is a dashed border sample style in css
This is a dotted border sample style in css
This is a double border sample style in css
This is a groove border sample style in css
This is a inset border sample style in css
This is a outset border sample style in css
This is a ridge border sample style in css
none کادر نمایش داده نمیشه.
solid کادر رو به صورت یکنواخت نمایش میده.
dashed به صورت نقطه چین بزرگ نمایش میده.
dotted به صورت نقطه چین کوچک نمایش میده.
double به صورت 2کادری یا 2 خطی نمایش میده.
groove به صورت شیار نمایش میده.
hidden مثل none هست و نمایش داده نمیشه.
inset به صورت گودی و تو رفته نمایش میده.
outset به صورت برجسته با سایه زیاد تر نمایش میده.
ridge به صورت برجسته با سایه کمتر نشون میده.
<p style="border-style:none">This is a none border style sample in css</p>
<p style="border-style:solid">This is a solid border sample style in css</p>
<p style="border-style:dashed">This is a dashed border sample style in css</p>
<p style="border-style:dotted">This is a dotted border sample style in css</p>
<p style="border-style:double">This is a double border sample style in css</p>
<p style="border-style:groove">This is a groove border sample style in css</p>
<p style="border-style:hidden">This is a hidden border sample style in css</p>
<p style="border-style:inset">This is a inset border sample style in css</p>
<p style="border-style:outset">This is a outset border sample style in css</p>
<p style="border-style:ridge">This is a ridge border sample style in css</p>
خاصیت width مقادیر ی رو به صورت زیر می پذیره :
This is a usual solid border style sample in css
This is a thin solid border sample style in css
This is a medium solid border sample style in css
This is a thick solid border sample style in css
This is a 10px width solid border sample style in css
thin کادر رو بصورت نازک نمایش میده.
medium متوسط و thick ضخیم و همچنین می تونید خودتون برحسب پیکسل عرض کادرتون رو مشخص کنید.
<p style="border-style:solid">This is a usual solid border style sample in css</p>
<p style="border-style:solid;border-width:thin;">This is a thin solid border sample style in css</p>
<p style="border-style:solid;border-width:medium;">This is a medium solid border sample style in css</p>
<p style="border-style:solid;border-width:thick;">This is a thick solid border sample style in css</p>
<p style="border-style:solid;border-width:10px;">This is a 10px width solid border sample style in css</p>
خاصیت color که رنگ ها رو بر اساس rgb به صورت هگزادسیمال یا مبنای 16 می پذیره و رنگ کادر رو تعیین می کنه :
This is a green solid border sample style in css
<p style="border-color:#0f0;">This is a green border sample style in css</p>
شما می تونید مثل کد زیر برای هر کدوم از خطوط کادرتون یک خاصیت جداگانه به کار ببرید:
<p style="border-style:solid;
border-left-style:hidden;
border-right-style:hidden;
border-top-style:solid;
border-top-color:#0f0;
border-bottom-color:#00f;
border-bottom-width:5px;">This is a customize border sample style in css</p>
تا اینجا هر چی در مورد CSS گفتیم، کد هامون رو در تگ head تعریف کردیم. اما بعضی وقت ها می خوایم فقط به یک تگ خاص یک خاصیت اضافه کنیم و لازم نمی دونیم اون رو توی head تعریف کنیم. در واقع می خوایم CSS رو در تگ body تعریف کنیم. برای این کار از مدل زیر استفاده می کنیم :
style="property:value"
می بینید که در واقع تفاوت خاصی بیت تعریف CSS در head با body نیست فقط در head ما تگ style ایجاد می کردیم اما در body خاصیت style رو تعریف می کنیم.
باید این مسئله رو یادمون باشه style رو چه در head و چه در body تعریف می کنیم باید با " ; " چند خاصیت رو از هم جدا کنیم. مثلا خواص font-family رو با " ; " از font-size جدا کنیم. اما نیازی نیست بعد از آخرین خاصیت از " ; " استفاده کنیم. اگر هم فقط یک خاصیت داشتیم نیازی نیست. پس مثال پست های قبل رو یک بار بدون " ; " امتحان کنید.
برای نمونه من می خوام این پاراگراف رو با رنگ سبز و متن کج و فونت bkoodak نمایش بدم ( در صورتیکه فونت bkoodak رو سیستم شما نصب باشه می تونید به درستی ببینید).
<p style="font-family: b koodak; font-style: italic; color:#0f0">
برای نمونه من می خوام این پاراگراف رو با رنگ سبز و متن کج و فونت bkoodak نمایش بدم ( در صورتیکه فونت bkoodak رو سیستم شما نصب باشه می تونید به درستی ببینید).
</p>
خب حالا اگه فونت bkoodak رو سیستم شما نصب نبود ظاهر نوشته من بهم میریزه و از فونت پیش فرض مرورگر برای نمایش استفاده می کنه. پس من با نوشتن tahoma یا اسم هر فونت دیگه ای بعد از bkoodak به مرورگر می فهمونم که اگه فونت اولی نبود از فونت دوم و ... استفاده کن. پس کد بالا به صورت زیر در میاد :
برای نمونه من می خوام این پاراگراف رو با رنگ سبز و متن کج و فونت bkoodak نمایش بدم ( در صورتیکه فونت bkoodak رو سیستم شما نصب باشه می تونید به درستی ببینید).
<p style="font-family: B Koodak,Tahoma; font-style: italic; color:#0f0;">
برای نمونه من می خوام این پاراگراف رو با رنگ سبز و متن کج و فونت bkoodak
نمایش بدم ( در صورتیکه فونت bkoodak رو سیستم شما نصب باشه می تونید به
درستی ببینید)
.</p>
توی بخش قبل ما از کد های زیر استفاده کردیم :
p.ff{font-family:b koodak,tahoma;}
p.cl{color:red;}
p.fs{font-style:italic;}
p.fw{font-wight:bold;}
p.ta{text-align:right;}
معنی کد های بالا اینه که هر جا تگ های P داشتیم که کلاس اونها ff, cl, fs, fw, ta بود یه سری خواص به اون ها اضافه کن. حالا اگه به جای p.ff فقط ff. رو بذاریم معنیش تفاوت میکنه و به معنای این میشه که توی صفحه هر تگی مثل p یا div یا table بود خواص ff رو بهش اضافه کن. پس حواستون باشه قبل از خواصتون چه عبارتی رو میذارید.
در مثال زیر من یک استایلی رو تعریف کردم و قبلش " . " گذاشتم و می بینید که هر تگی که کلاسش cf هست خواص مربوط به cf رو گرفته یعنی رنگش قرمز و کج شده.
پاراگراف با متن کج و به رنگ قرمز
یک پاراگراف معمولی
یک لینک آزمایشی با متن کج به رنگ قرمز
<html>
<head>
<style>
.cf{color:red;font-style:italic;}
</style>
</head>
<body>
<div>
<div class="cf">بخش با متن کج و به رنگ قرمز</div>
<div>یک بخش معمولی</div>
<p class="cf">پاراگراف با متن کج و به رنگ قرمز</p>
<p>یک پاراگراف معمولی</p>
<a href="#" class="cf">یک لینک آزمایشی با متن کج به رنگ قرمز</a><br/>
<a href="#">یک لینک آزمایشی معمولی</a>
</div>
<div class="textcode">
</div>
</body>
</html>
در ادامه بحث css در این بخش به معرفی کلی کدهای css می پردازیم. در css میشه برای تمام المنت های موجود در صفحه خاصیت های زیادی تعریف کرد، مثلا برای زمینه یا background میشه تصویر، موقعیت، اندازه، رنگ رو تعریف کرد و برای فونت میشه نوع، استایل، اندازه و ... تعریف کرد.
برای تعیین استایل هر تگی چند تا راه داریم.
1.با استفاده از class
2.با استفاده از id
3.برای input ها با استفاده از type یا id
فرض کنید 2 تا پاراگراف داریم که برای یکی id و برای دیگری class تعریف می کنیم.
<p class="classpar">پاراگراف با class</p>
<p id="idpar">پاراگراف با id</p>
حالا موقع تعریف css برای این 2 پاراگراف باید کمی دقت کنیم. برای پاراگرافی که براش کلاس تعریف کردیم موقع تعریف css از " . " استفاده می کنیم و برای پاراگرافی که براش id تعریف کردیم موقع تعریف css از " # " استفاده می کنیم و بعد اسم کلاس یا آی دی رو میاریم مثل زیر :
p.classpar{color:yellow}
p#idpar{color:blue}
با تعریف با هر تگ p که کلاس classpar داشته باشه رنگش زرد و هر تگ p که آی دی idpar داشته باشه رنگش آبی میشه.
نوع سوم رو هروقت به قسمت input ها رسیدیم توضیح میدم.
برای این بخش سعی می کنم چند تا از کدهای مفید رو معرفی کنم.
برای تعیین فونت از font-family ، برای تعیین رنگ از color ، استایل متن از font-style ، وزن متن از font-weight، و تعیین چایگاه متن از text-align استفاده می کنیم.
به مثال زیر دقت کنید :
b koodak و tahoma پاراگراف با فونت
پاراگراف رنگ قرمز
پاراگراف با متن کج
پاراگراف با متن توپر
پاراگراف با متن راست چین
<html>
<head>
<style>
p.ff{font-family:b koodak,tahoma;}
p.cl{color:red;}
p.fs{font-style:italic;}
p.fw{font-wight:bold;}
p.ta{text-align:right;}
</style>
</head>
<body>
<div>
<p class="ff">b koodak و tahoma پاراگراف با فونت
</p>
<p class="cl">پاراگراف رنگ قرمز</p>
<p class="fs">پاراگراف با متن کج</p>
<p class="fw">پاراگراف با متن توپر</p>
<p class="ta"> پاراگراف با متن راست چین</p>
</div>
</body>
</html>
یکی از مولفه های جذابیت وبلاگ یا سایت طراحی اون هست. خیلی وقت ها ما برای زیبا شدن صفحاتمون از تصاویر استفاده می کنیم اما این کار معایبی داره. اولیش هم گرفتن پهنای باند ما هست. بعضی وقت ها هم از تگ های HTML استفاده می کنیم. مثلا برای تگ های پاراگرافمون تعیین می کنیم که رنگشون سبز باشن. حالا اگه ما 15 تا تگ پاراگراف داشته باشیم برای عوض کردن رنگشون باید هر 15 تا تگ رو عوض کنیم. یا ما دوست داریم وقتی کاربر موس رو برد روی یک هایپرلینک رنگش نارنجی شه و وقتی کلیک کرد قرمز شه. برای اینکارا و خیلی کارهای دیگه که به طراحی کمک می کنه از CSS یا Cascading Style Sheet استفاده می کنیم. با استفاده از CSS تعیین می کنیم که بر فرض تمام تگ های پاراگراف ها رنگشون سبز باشه. وقتی خواستیم که رنگ پاراگراف ها رو عوض کنیم فقط کافیه که یک جارو عوض کنیم. مزیت دیگر CSS این هست که مثل جاوا اسکریپت نمیشه غیر فعالش کرد و در تمام مرورگر ها به یک صورت دیده میشه. در jquery و جاوا هم میشه از اون استفاده کرد و کار با اون هم خیلی راحته.
برای استفاده از CSS باید اون رو تعریف کنیم. معمولا در head و در بین تگ های <style></style>تعریف میشه اما هم میشه در body و هم در یک فایل خارجی با پسوند .css تعریف و ذخیره شه.
در تعریف css نکاتی رو باید رعایت کنیم:
1. تمام کد ها در {} قرار میگیره
2. برای تعیین مقدار یک خاصیت از " : " استفاده میکنیم جای " = "
3. برای جدا کردن چند خاصیت از " ; " استفاده میکنیم.
4. برای کد های چند بخشی مثل font size به جای فاصله بینشون از " - " استفاده میکنیم که میشه font-size
خب برای نمونه اول می خوام هر پاراگراف رنگ خودش رو داشته باشه. اما تمام پاراگرافها فونت و اندازه یکی داشته باشن.
این پاراگراف به رنگ سبز است
این پاراگراف به رنگ قرمز است
این پاراگراف به رنگ آبی است
<html>
<head>
<style>
p{
font-family:tahoma;
size:10px;}
.green {
color:#0f0;}
.red{
color:#f00;}
.blue{
color:#00f;}
</style>
</head>
<body>
<p class="green">این پاراگراف به رنگ سبز است</p>
<p class="red">این پاراگراف به رنگ قرمز است</p>
<p class="blue">این پاراگراف به رنگ آبی است</p>
</body>
</html>