آموزش طراحی قالب وردپرس #۹(زیباسازی!)
۳۱ اردیبهشت ۸۸
سلام اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.
style.css رو که یادتون هست؟!
فایلی که تا امروز مورد بی مهری ما قرار گرفت واصلا کاری بهش نداشتیم!
اما از امروز به بعد تقریبا همه ی کارهای ما روی این فایل خواهد بود.
این فایل که فرمتش css است وظیفه ی درست کردن ساختار سایت و شکل دادن به اون رو داره.
نیازی به اینکه شما چیزی از css بدونین نیست!
شما بعد از اتمام این سری آموزش تنها چیزی که ۱۰۰ درصد مطمئن هستم یاد خواهید گرفت همین css است.
خوب از امروز من با Dreamweaver به جای Notepad کار میکنم.
این دو برنامه اصلا قابل مقایسه نیستند! برای همین من چیزی در رابطه با تفاوت هاشون نمیگم چون تا صبح باید نوشت! فقط همین و بدونین Notepad سوسکه و Dreamweaver اباما!! یعنی تا این حد…!
خوب style.css رو باز میکنیم و شروع میکنیم به زیبا سازی!!
قبلش اینو بگم که این چیزهایی که اول فایل نوشتیم هیچ گونه ربطی به css ندارن، یعنی هر چیزی میشه بین */ و /* نوشت، داستان، شعر و یا مقاله و هر چی شما دوست دارین!
البته معمولا بین این دو علامت توضیحاتی راجع به کدی که مینویسیم نوشته میشه!!
یک نکته ی ناراحت کننده هم در css اینه که معمولا مرورگرهای مختلف هر کدام یک ساز مینوازند!
البته بیشترشون با یک ساز کار میکنند و سبکشون فرق داره اما IE تو حال خودشه و هر غلطی میخواد میکنه، ابله!
اما چون بیشتر مردم یا نمیدونن راههای دیگری برای رفتن به سایتهای مختلف به جز از طریق IE هم هست و یا تنبلی میکنند یا هر چیز دیگه این مرورگر ابله پر استفاده ترین مرورگر است و بیشترین بازدیدکننده های شما از این کودن استفاده میکنن و شما مجبورید سایت رو برای اونها هم خوشگل کنید و این کار ممکنه به قیمت خراب شدن صفحه در مرورگرهای استاندارد تموم بشه!
خلاصه اینکه ما از دو browser برای چک کردن تغییرات سایت استفاده خواهیم کرد که از همه بیشتر طرفدار دارند(هر چند این جانب از یکی با دلیل و از اون یکی بی دلیل متنفرم!)
پس علاوه بر wamp برنامه های IE و FireFox رو باز میکنیم.
(اگه افزونه ی فایر باگ رو دانلود کردین که هیچ، اگه نکردین از google chrome استفاده کنید،البته فعلن مهم نیست!)
در style کدهای زیر رو بنویسید لطفا:
body{
margin:0 0 0 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000;}
در css اولین چیزی که مینویسیم باید شناسه ای در صفحه ی مربوطه اش باشه!
یعنی body در اینجا اشاره دارد به تمام کدهایی که ما در بین تگ های <body> تا <body/> نوشتیم.
یعنی در واقع کل صفحه ای که کاربران میبینین و شامل همه چیز ماست!
} در جلوی اسم قرار میگیره و تا به { نرسه مربوط به همون body (البته در اینجا) است.
حالا توضیحات کدهایی که نوشتیم:
margin یعنی فاصله ای که مرزهای تگ ما از مرزهای تگ مادر خودش داره، در اینجا چون تگ ما body است خودش مادر بزرگه! و margin اون از اطراف صفحه ی مرورگر حساب میشه، یعنی مثلا اگه ما به جای ۰ از ۱۰۰px استفاده کنیم از اطراف ۱۰۰px فاصله میگیره،همین!
اما علت اینکه ۴ تا صفر داریم چیه!؟
اینه که هر کدوم مربوط به یکی از جهات تگ هستند! از چپ به راست به ترتیب : یالا، راست، پایین ، چپ. (یعنی در جهت عقربه های ساعت)
font-family هم دست خط یا همون font صفحه رو مشخص میکنه که چی باشه و علت اینکه از چند فونت استفاده شده این است که خواهم گفت:
مرورگرها (و در واقع سایت ها) فونت ها رو از کامپیوتر بیننده بارگذاری میکنن یعنی اینکه شما این فونتی که الان میبینید رو در کامپیوتر خودتون دارین (نصب شده)
و این تعداد فونت به این علت است که ممکنه مثلا یک کاربر فونت Arial رو توی کامپیوترش نداشته باشه(که بعیدتر از این نمیشه!)اگه اینطور بود فونت بعدی انتخاب میشه و همینطور به ترتیب.
font-size هم که سایز فونت رو تعیین میکنه یعنی بزرگیشو که میتونین تغییرش بدین!
vertical-align هم شرو وره! باعث میشه که مطمئن شیم نوشته ها از بالای صفحه (top) شروع بشن!
background رنگ پس زمینه ی صفحه ی سایت رو تعیین میکنه و ffffff# کد مربوط به رنگ سفید است که اگه DW داشته باشین با نوشتن # لیست رنگها را خواهید داشت.
color مربوط به نوشته هاست که رنگشون رو معین میکنه ۰۰۰۰۰۰# هم کد رنگ سیاه است!
با سیو کردن صفحه و رفتن به سایت میبینیم که اندازه ی فونتها کمی بهتر شده و از اون قیافه ی مسخره در اومده.
یک توضیح در مورد کدهای رنگ که با # شروع میشن اینکه Hexadecimal Codes اسمیه که بهشون دادن
و با یک سرچ میتونین یک سایت خوب در این زمینه پیدا کنید،هرچند با برنامه های مختلفی مثل Photoshop و همین DreamWeaver میشه کد مربوط به هر رنگ رو پیدا کرد.
شاید جالب باشه براتون که بدونید ۲ عدد اول مربوط به رنگ قرمز، ۲ عدد وسط مربوط به سبز، و ۲ عدد آخر مربوط به رنگ آبی هستند. یعنی مثلا F00 که F در اون یعنی ۱۰ رنگ قرمز رو ۱۰ و آبی و سبز رو ۰ میره در نتیجه رنگ ما قرمز خواهد شد! و ۰ّF0 سبز خواهد بود و همچنین ۰۰F آبی.
البته لازم نیست اینهارو حفظ کنید، گفتم که یه چیزی گفته باشم!
خوب در مورد لینک ها هم یک صحبتی بکنم، اگه یادتون باشه برای اینکه لینکی درست کنیم باید نوشته ی مربوطه رو در تگ a قرار میدادیم، پس تگ مربوطه در css ما a است، اما ما میخواهیم لینکهامون رو مثلا کاری کنیم که زیرشون یک خط کشیده بشه مثل این نوشته!
خوب برای اینکار باید بعد از مشخص کردن تگ (یعنی a) اون رو به صورت زیر به لینکها مربوط کنیم:
a:link{
}
و بعد از کد text-decoration استفاده میکنیم و اون رو برابر با underline قرار میدیم:
a:link{
text-decoration:underline;
}
به همین راحتی ما تمام لینکهایی که در صفحه هستند رو با یک Underline یا خط زیرین مشخص کردیم.
ما میتونیم لینکهایی که کاربر روی اونها کلیک کرده هم به همین صورت در بیاریم، برای شناساندن این لینکها باید از a:visited استفاده کنیم، برای اینکه یک رفتار رو با دو یا چند تگ مختلف داشته باشیم از , استفاده میکنیم:
a:link, a:visited{
text-decoration:underline;
}
اینطوری هم لینکهایی که کاربر دیده و هم اونهایی که ندیده underline نمایش داده میشن، ما میتونیم لینکهامون رو به هر رنگی که دوست داریم نمایش بدیم(با استفاده از color ) و اگر اینکار رو نکنیم هر مرورگر بر اساس تنظیمات خودش لینکها رو مشخص میکند(که در مرورگرهای معروف این رنگ آبیست!)
حالا ما میتونیم یک کار دیگه هم انجام بدیم و اون اینه که وقتی موس کاربر روی لینک میره لینکمون چه قیافه ای پیدا کنه! میتونیم مثلا رنگ نوشته رو عوض کنیم یا مثلا فونت رو تغییر بدیم!!
البته معمولا یک خط زیرش میاد یا رنگش عوض میشه، لازم نیست شلوغ کاری کنیم:
a:hover{
text-decoration
}
hover برای زمانی استفاده میشه موس روی یک تگ مشخص (در اینجا a) قرار میگیره، من میتونم با استفاده از دادن blink به text-decoration لینک رو چشمک زن کنم یا با line-through یک خط وسط لینک بکشم و یا با overline یک خط بالاش بکشم و یا همون چیزی که داره (یعنی underline ) رو با استفاده از none بردارم!:
a:hover{
text-decoration:none;
}
من تا حالا کاری کردم که لینکهامون آبی بوده و underline داشته باشن و وقتی کاربر روی لینک میره اون خط زیرین برداشته بشه.(البته معمولا برعکس این اتفاق میافته :D)
حالا میتونیم رنگش هم مشخص کنیم، مثلا قرمز!:
a:hover{
text-decoration:none;
color:#F00;
}
این هم یک تصویر از انواع حالات لینکها
بس است دیگر
خسته شدم!
بای!
