سلام به همه دوستان همیشگی هنرکده دیجیتال .امروز با ادامه آموزش های css در خدمت شما هستیم .

مباحثی که امروز قرار هست در مورد آن صحبت کنیم شامل:

• تنظیم پس زمینه در css
• تنظیم قلم و فونت در css
• تنظیم متن و نوشته در css

خوب در ادامه قصد داریم هر کدام از موارد بالا را توضیح دهیم.

تنظیم پس زمینه در css

ویژگی  پس زمینه که در طراحی وب سایت به کار می رود باعث می شود سایت شما شکیل تر به نظر بیاید. انواع ویژگی پس زمینه عبارتند از :

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

• background-color : این خاصیت  در css رنگ پس زمینه سایت را مشخص می کند . به عنوان مثال برای تعیین رنگ پس زمینه از کد زیر استفاده کنید:

body {background-color:#b0c4de;}

• background-image: با این ویژگی تصویر پس زمینه سایت را می توانید با عکس تعیین کنید. به عنوان مثال برای تعیین تصویر پس زمینه سایت از کد زیر استفاده کنید:

body {background-image:url('paper.gif');}

• background-repeat: با این ویژگی در css می توانیم تعیین کنیم که تکرار تصویر به چه صورت باشد. اگر خود تصویر افقی است می خواهید تصویر به صورت افقی تکرار شود از کد زیر استفاده کنید:

 body

{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

اگر می خواهید تصویر یک بار و بدون تکرار نمایش داده شود از کد زیر استفاده کنید:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

• background-attachment: اگر دوست دارید تصویر پس زمینه ثابت باشد از این روش در css استفاده کنید.( مقدار پیش فرض هم scroll است. )

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

• background-position:  این ویژگی موقعیت عنصر را مشخص می کند. به عنوان مثال برای تنظیم موقعیت تصویر به گوشه سمت راست – بالا از کد زیر استفاده کنید.

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;

}

سه خط کد بالا به طور خلاصه به صورت زیر است

body {background:#ffffff url('img_tree.png') no-repeat right top;}

تنظیم قلم و فونت در css

Font Family

در این بخش قصدمان این است که به شما آموزش دهیم چگونه قلم و فونت را در css تنظیم کنید.

در css دو نوع از خانواده فونت ها وجود دارد که در زیر به آن ها اشاره کردیم

• “generic family” مثل  “Serif” یا “Monospace”
• “font family” مثل “Times New Roman” یا “Arial”

با ویژگی font-family شما می توانید در css نوع قلم مدنظرتان را برای متن تعیین کنید. اگر تمایل دارید از یک فونت خاص استفاده کنید نوع فونت مدنظرتان را اول بنویسید و چون این امکان هست که این فونت در کامپیوترهای دیگر وجود نداشته باشد (  همین باعث شود بهم ریختگی می شود ) ، به همین دلیل می توانید نام چند فونت دیگر  را  وارد کنید تا در نبود فونت اصلی از آن استفاده کند به عنوان مثال:

p{font-family:"Times New Roman", Times, serif;}

Font Style

این خاصیت می تواند کمک کند تا شما سبک نمایش متن را در css مشخص کنید. این خاصیت دارای ۳ مقدار می باشد که در زیر به آن ها اشاره خواهیم کرد:

•  normal   :متن به صورت معمولی نشان داده می شود.
•  italic   : متن به صورات ایتالیک (کج) نشان داده می شود.
•  bold  :  متن به صورت برجسته و تو پور نشان داده می شود.

به عنوان مثال:

p {font-style:normal;}
p {font-style:italic;}
p {font-style:bold;}

Font Size

همان طور که از نام این ویژگی مشخص است سایز متن را در css مشخص می کند. و این ویژگی جزو ویژگی های بسیار مهم در طراحی وب سایت می باشد.

برای متن هایی که در بالای صفحه نشان داده می شود از تگ های <h1> – <h6> و برای پارگراف از  تگ <p> استفاده کنید به عنوان مثال:

h1 {font-size:30px;}
h2 {font-size:20px;}
p {font-size:14px;}

تنظیم فونت با واحد EM

در نسخه هایی ابتدایی اینترنت اکسپلورر به خاطر اینکه از واحدهای px پشتیبانی نمی شد از واحد  em استفاده می شد جالب است بدانید این واحد در تمامی مرورگرها پشتیبانی می شود.

به عنوان مثال:

h1 {font-size:2.5em;} /* 40px/16=2.5em */

تنظیم متن و نوشته در css

Text Color

در این قسمت قصد داریم به شما آموزش دهیم چگونه متن و نوشته را در css تنظیم کنید.

ویژگی Color برای تنظیم نمودن رنگ متن استفاده می شود. این ویژگی به ۳ روش مقدار دهی می گردد که در زیر به آن ها اشاره می کنیم:

• HEX : مثال : “#ff000”
•  RGB:  مثال :   (rgb(255,0,0
• نام رنگ :  مثال :  red

رنگ پیش فرض در یک صفحه وب سایت بستگی به این دارد که چه رنگی را برای بدنه سایت انتخاب کرده اید به عنوان مثال:

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Text Alignment

اگر می خواهید متن را در حالت افقی در css تنظیم نمایید از این ویژگی استفاده کنید. این ویژگی با یکی از مقدارهایی که در زیر اشاره کردیم مقدار دهی می شود.

• Center
• Right
• Justify
• Left

مقدار Justify برای این است که تمام خطوط عرض یکسانی داشته باشند.

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration

این ویژگی برای این استفاده می شود که بتوان فرم خاصی را به متن اضافه یا حذف کرد.

a {text-decoration:none;}

در مثال زیر می توانید اگر متن شما دارای فرمت خاصی مثلا زیرخط (underline) است را پاک کنید. مقادیری که می تواند ویژگی Text Decoration بگیرد در زیر آمده است:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

به پایان جلسه دوم از آموزش css رسیدیم .در جلسات بعد با بخش های دیگر آموزش در خدمت شما خواهیم بود.