آموزشهایCSS-جادوی طراحی وب!

sky boy · 2012 , December 27

CSS مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی زبانی کمکی جهت شکل دهی ظاهر و فرم صفحات وب (HTML) است،
تیتر مطلب گویا است که CSS را باید به راستی جادوگر طراحی وب نامید!،
اگر تجربه کار با آن را داشته باشید حتما شما هم با نظر ما موافقید،
فلسفه پیدایش CSS به آسان کردن کار طراحان صفحات وب جهت شکل دهی و فرم بندی ایده هایشان بر می گردد،
پیش از این برای اینکه به فرض رنگ فونت یک متن را در صفحات مختلف تغییر دهیم،
ناچار بودیم در هر صفحه فونتمان را پیدا کنیم و با هزاران رنج و مشقت و صرف وقت زیاد، تک تک آنها را ویرایش کنیم،
اما با آمدن CSS، کار خیلی راحت شد!
برای پی بردن به اهمیت این زبان (کمکی) و دیدن چند مثال، جایی نریید و همینجا باشید:خنده2:

فرمت بندی بدون استفاده از css

کد زیر بدون استفاده از CSS فرمت بندی شده است (برای تست کافی است کد را در یک ویرایشگر متنی یا HTML کپی و ذخیره کنید):

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> صفحه وب بدون استفاده از css</title>
</head>
<body bgcolor="#0099CC">
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن بدون استفاده از css
</font>
</div>
</body>
</html>

فرمت بندی با استفاده از css

و همان کد با استفاده از CSS:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>صفحه وب با استفاده از css</title>

<style type="text/css">
body{
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=0099CC]#0099CC[/URL]
}
.mydiv{
    text-align:justify;
    direction:rtl;
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=003366]#003366[/URL]
}
</style>
</head>
<body>
<div class="mydiv">
نمایش متن با استفاده از css
</div>
</body>
</html>

sky boy · 2012 , December 27

قدرت این زبان به قابلیت ایجاد حالت های گوناگون و تعریف کلاس (CLASS) و آی دی (ID) است،
به اینصورت که مثلا با تعریف یک کلاس، از آن در صفحات مختلف و بدون تکرار کدنویسی، استفاده می کنیم.
دو صفحه که گذاشته شد هر دو از یک فایل CSS استفاده می کنند که در صفحه مورد نظر به اصطلاح ایمپورت شده اند (درباره این در ادامه بیشتر توضیح میدم)،
و واضح است که این کار تا چه حد در ذخیره وقت و بالا بردن قدرت مانورمان موثر است (تا جایی که دیگه کسی به طراحی وب بدون CSS فکر نمی کنه!).

توضیح:
- css یک زبان کمکی است، یعنی به خودی خود کاربرد خاصی ندارد، ولی به تگ های html شکل و قالب می دهد.
- برای دیدن و مقایسه کد صفحات، کلیک راست و view source را انتخاب کنید.
- کد های css یا به صورت درون صفحه ای است یا ایمپورت به صورت فایل خارجی (شیوه استاندارد).
- تگ style برای ایجاد کدهای css داخلی کاربرد دارد.
- برای ایمپورت یک فایل css خارجی، از کد link و خاصیت های آن، درون تگ head استفاده می کنیم.

sky boy · 2012 , December 27

css-آشنایی با class و id

یکی از ویژگی ها و قابلیتهای اصلی css استفاده از کلاس و آی دی در تعریف استایل (style) مشخص برای عناصر موجود در صفحات وب (html) است،
کلاس و آی دی الگوهایی کلی را تعریف می کنند که از آن الگوها در شکل دهی ظاهری و ایجاد قابلیتهای تگ های html استفاده می شود؛
هر کدام از موارد گفته شده (class و id) برای هدف خاصی استفاده می شوند و میبینیم که چگونه آنها را تعریف و استفاده کنیم.

تعریف کلاس و آی دی در css

آی دی و کلاس با علائم خاصی در کدهای css شناخته می شوند، برای آی دی از علامت # و برای کلاس از علامت نقطه استفاده می کنیم:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>کلاس و آی دی در css</title>

<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#main{
    display:block;
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=069]#069[/URL]
}
.text{
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL]
}
</style>
</head>
<body>
<div id="main" class="text">
این یک متن در کلاس text و آی دی main است.
</div>
</body>
</html>

توضیح:
- از آی دی برای عناصر یکتا استفاده می شود (یعنی هر آی دی مخصوص تنها یک تگ است) و استفاده از چند آی دی هم نام در یک صفحه مجاز نیست.
- از کلاس ها می توان به هر اندازه تکرار در صفحه استفاده کرد (هدف از ایجاد کلاس ها نیز همین است تا از یک الگو برای عناصر متعدد بتوان استفاده نمود).

sky boy · 2012 , December 27

تعریف ویژگی، بدون کلاس و آی دی در css

علاوه بر کلاس و آی دی، برخی از موارد در css به صورت کلی قابل تعریف شدن هستند،
مثلا body استایل خود را به تگ body و زیر مجموعه آن اختصاص می دهد یا p به تمام عناصر پاراگرافی استایل خود را اختصاص می دهد:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>استایل بدون کلاس و آی دی</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
p,div{
    border:#CCC 1px solid;
    padding:4px;
}
#main{
    display:block;
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=069]#069[/URL]
}
.text{
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL]
}
</style>
</head>
<body>
<div id="main" class="text">
<p>
این یک متن در کلاس text و آی دی main است. برخی از ویژگی های کلی از div و p استفاده می کنند.
</p>
</div>
</body>
</html>

در مثال بالا علاوه بر استفاده از آی دی main و کلاس text به صورت کلی استایلی را برای تگ های div و p اختصاص دادیم،
با این کار تمام عناصر پاراگراف و بلاک های div آن ویژگی را خواهند داشت.

sky boy · 2012 , December 27

CSS-بکگراند و ویژگی ها

بعد از آشنایی نسبی با css، تعریف کلاس (class) و آی دی (ID)،حال تنظیمات مربوط به Backgrounds در CSS،
خوشبختانه CSS قابلیت های تقریبا کاملی در این خصوص دارد و هرآنچه که در طراحی وب فکرش را بکنیم با کد های آن دست یافتنی است،
در ادامه می بینید که چطور پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر خود
با ویژگی های color، image، repeat، attachment و position به زیبایی شکل میگیرند و از آنها به طور سفارشی استفاده کنید.
شیوه نگارش کلی این عنصر و زیرمجموعه های آن به شکل زیر است:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>شیوه کلی نگارش عناصر background در css</title>

<style type="text/css">
body{
    background:url(background.gif);
    /*background-image:url(background.gif);*/
    background-attachment:fixed;
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=069]#069[/URL]
    background-position:top;
    background-repeat:repeat-x;
}
</style>
</head>
<body>
</body>
</html>

توضیح:
- در کد بالا صفحه ای فرضی را با عناصر background شکل دادیم.
- در قسمت مربوط به عکس پس زمینه می توان از background به صورت پیش فرض یا background-image به صورت حرفه ای تر، استفاده کرد.
- برای نوشتن یک نکته یا یادداشت در حین کدنویسی css از علامت /*یادداشت*/ استفاده می کنیم.
- در قسمت مربوط به url باید آدرس دایرکتوری (یا آدرس کامل تصویری که آپلود می کنید) را به همراه نام کامل فایل (با پسوند) قرار دهید.
- در کد بالا ما تصویری با ابعاد 5 پیکسل در 5 پیکسل را آنقدر در راستای محور x ها تکرار کرده ایم که سطر اول صفحه را به طور کامل پوشش داده است.
- رنگ پس زمینه صفحه را با background-color و یک مقدار هگز که به صورت 069# مشخص است، تنظیم کرده ایم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه مشخص می کنید.
- background-repeat نیز مشخص می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.
حالا در ادامه بصورت جزیی تر توضیح میدم

sky boy · 2012 , December 27

عنصر background:

این عنصر می تواند مقادیر رنگی (هگز) یا آدرس یک تصویر را در خود داشته باشد:

HTML:

.my-div-background{
    background:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=093]#093[/URL]
}

برای حالت های شفاف می توان از مقادیر transparent استفاده کرد.

عنصر background-image:

آدرس یک تصویر را به صورت url در خود دارد، این قابلیت، تصویر پس زمینه ما را با توجه به زیرمجموعه ای که در آن تعریف شده است، مشخص می کند، به فرض ممکن است در یک بلاک div از آن استفاده کنیم و لذا این عنصر تصویر پس زمینه آن بلاک را شکل می دهد:

HTML:

.my-div-background{
    background-image:url(bgimage.jpg);
}

برای نادیده گرفتن این قابلیت مقدار آن را none قرار می دهند.

عنصر background-attachment:

background-attachment به مرورگر می گوید که آیا تصویر پس زمینه با اسکرول صفحه، اسکرول شود یا خیر، اگر مقادیر آن را fixed قرار دهید، در صفحاتی که ارتفاع آنها از صفحه نمایش کاربر بیشتر است، نوار اسکرول کناری نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه برود، تصویر پس زمینه در جای خود بدون تغییر و ثابت خواهد بود (این تکنیکی است که در برخی از قالب های وبلاگ ها نیز مشاهده می شود):

HTML:

.my-div-background{
    background-attachment:fixed;
}

مقادیر دیگر این عنصر scroll است که حالت پیش فرض می باشد.

sky boy · 2012 , December 27

عنصر background-position:

background-position موقعیت تصویر پس زمینه ما را در محلی که استفاده شده، مشخص می کند، به فرض اگر بخواهیم تصویر خود را از سمت راست شروع به نمایش کنیم، باید از مقدار background-position:right استفاده کنیم؛ مثالی دیگر:

HTML:

.my-div-background{
    background-position:bottom;
}
.my-div-background2{
    background-position:bottom left;
}

مقادیر این عنصر به صورت bottom، top، left، right و center است که قابلیت استفاده از دو خاصیت را به طور همزمان در خود دارد (به طور مثال background-position:top right).

عنصر background-repeat:

این عنصر برای مشخص کردن نحوه تکرار تصویر پس زمینه در صفحه به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این عنصر و خاصیت های آن استفاده می کنیم:

HTML:

.my-div-background2{
    background-repeat:repeat-y;
}

مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.

sky boy · 2012 , December 27

خب
این بخش رو با یک مثال و البته کمی پیشرفته تر به پایان می برم:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>شیوه پیشرفته استفاده از عناصر background در css</title>

<style type="text/css">
body{
    background-color:transparent;
    height:1000px;
}
.bgdiv{
    background-image:url(background.gif);
    background-repeat:repeat;
    background-position:bottom;
    background-attachment:scroll;
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=F90]#F90[/URL]
    height:400px;
    width:600px;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>
<div class="bgdiv">
</div>
</body>
</html>

sky boy · 2012 , December 27

ویژگی های font و text در css

پیش از این، از کاربرد این زبان، نحوه تعریف و استفاده از کلاس (class) و آی دی (id) صحبت کردیم،
همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Backgrounds) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص
به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه، ارائه کردم،
اکنون در ادامه بحث آموزش های css میخوام با یکی دیگر از کاربردهای این زبان آشناتون کنم و اون کار با فونت و متن و بررسی تنظیماتش هست.

کار با فونت (Font) در css:

همانطور که قبلا گفتیم، css به عنوان ابزاری کمکی در شکل دهی ظاهر محتوای صفحاوت وب (html) کابرد دارد،
به عبارتی از آن برای ایجاد استایل های مورد نظر برای عناصر صفحات وب که می تواند به فرض فونت مطالب باشد، استفاده می شود.

تنظیم حروف چپ به راست یا راست به چپ با direction:

در css برای نمایش حروف راست به چپ (مثل زبان فارسی)، از عنصر direction استفاده می کنند.

HTML:

<style type="text/css">
body{
 direction:rtl;
}
</style>

direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد.

sky boy · 2012 , December 27

تعریف فونت در :css

در css فونت را در حالت کلی به شیوه های زیر تعریف می کنند.
تعریف مستقیم فونت:

HTML:

<style type="text/css">
body{
 font:Tahoma, Geneva, sans-serif
}
</style>

تعریف خانواده فونت:

HTML:

<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
}
</style>

خانواده یک فونت می توانید برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (مناسب برای حروف فارسی)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول بود، دیگر از فونت های بعدی استفاده نمی شود،
ولی اگر فونت اول وجود نداشت، نوبت به استفاده از فونت های بعدی می رسد،
ذکر یک نکته ضروری است: استفاده از فونتهایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مثل برخی از فونت های فارسی)،
ممکن است موجب شود که کاربران صفحه شما، به همان شکلی که شما آن را می بینید،
نتوانند مطالب را ببینند (به این دلیل که آن فونت خاص در سیستم آنها نصب نیست، لذا با نوع دیگری جایگزین می شود).

sky boy · 2012 , December 27

اندازه فونت یا font-size:

اندازه فونت ها در css با مقادیر px، em یا به صورت عبارات مشخص می شوند.

HTML:

<style type="text/css">
body{
 font-size:12px;
}
</style>

علاوه بر مقادیر پیکسلی می توان از em و یا عبارت تعریف شده در css استفاده کرد (البته توصیه می کنیم فقط از px استفاده کنید، چرا که استانداردتر است و در تمام مرورگرها به یک شکل پردازش می شود)؛ عباراتی که برای اندازه فونت به کار می روند عبارتند از:
- large (بزرگ)
- larger (بزرگتر از بزرگ)
- medium (معمولی)
- small (کوچک)
- smaller (کوچکتر از کوچک)
- x-large و xx-large (به ازای هر x یک مقدار بزرگتر از large)
- x-small و xx-small (به ازای هر x یک مقدار کوچکتر از small)
مقادیر پیکسلی به طور استاندارد از 9، 10، 12 شروع و به 36 ختم می شوند، مقادیر em از حاصل تقسیم مقادیر پیکسلی بر عدد 16 (16 اندازه پیش فرض فونت در مرورگر است) به دست می آید، مثلا 30px مساوی است با 1.875em، در مثال زیر از em استفاده شده است.

HTML:

<style type="text/css">
body{
 font-size:0.875em;
}
</style>

sky boy · 2012 , December 27

[h=2]کشیدگی (stretch) فونت:

HTML:

<style type="text/css">
body{
 font-stretch:condensed;
}
</style>

stretch یا کشیدگی فونت بیشتر در مورد حروف لاتین کاربرد دارد، با این حال مقادیر زیر را می توان برای stretch در نظر گرفت.
- condensed (فشرده)
- expanded (بسیط)
- extra-condensed (خیلی فشرده)
- extra-expanded (خیلی بسیط)
- narrower (باریک)
- normal (عادی)
- semi-condensed (تقریبا فشرده یا نیمه فشرده)
- ultra-condensed (خیلی خیلی فشرده)
- ultra-expanded (خیلی خیلی بسیط)
- wider (عریض)

sky boy · 2012 , December 27

استایل فونت یا font-style:

از استایل فونت می توان برای ایجاد متون کج شده یا مایل استفاده کرد.

HTML:

<style type="text/css">
body{
 font-style:oblique;
}
</style>

مقادیر استایل فونت:
- oblique (مایل)
- italic (کج)
- normal (عادی)

ضخامت فونت یا font-weight:

در css برای برجسته کردن یک فونت، می توان این کار را با خاصیت font-weight انجام داد، font-weight و font-style در css تقریبا عملکردی شبیه تگ های b، strong، em و i در html دارند.

HTML:

<style type="text/css">
body{
 font-weight:bold;
}
</style>

برای ضخامت فونت می توانیم از مقادیر زیر استفاده کنیم.
- مقادیر عددی به صورت ضریبی از 100 تا 900 (100، 200، 300 تا 900).
- bold (ضخیم)
- bolder (خیلی ضخیم)
- lighter (نازک و سبک)
نکته: چند خاصیت دیگر نیز در css3 برای فونت وجود دارد که یا توسط برخی مرورگرها پشتیانی نمی شود یا اینکه کاربرد چندانی ندارد،
از جمله font-size-adjust و font-variant.
برای آشنایی بیشتر با خاصیت های مربوط به فونت، در مثال زیر من یک کلاس فرضی تعریف کردم و متن موجود که در آن را با عناصر فونت تنظیم شده.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>کار با فونت در css</title>
<style type="text/css">
.example{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 font-style:italic;
 font-weight:bold;
 direction:rtl;
}
</style>
</head>
<body>
<div class="example">
این متن به عنوان مثال با استفاده از ویژگی های فونت در css تنظیم شده است.
</div>
</body>
</html>

sky boy · 2012 , December 27

تنظیمات متن (text) در css:

تعریف نوع فونت و ویژگی های آن، گام اول برای نمایش محتوا در css است،
در قدم بعدی نیاز به تنظیم چینش مطالب و نحوه نمایش آنها است، این ویژ گی ها با text و زیرمجموعه های آن ایجاد می شوند.

تنظیم تراز و چینش متن با text-align:

برای اینکه متن خود را به صورت راست چین یا چپ چین و... تنظیم کنید، باید از text-align و یکی از مقادیر زیر استفاده نمائید.
- center (تنظیم گوشه های متن در وسط)
- justify (تمام چین کردن متن، پوشش از سمت چپ و راست)
- left (چپ چین کردن متن)
- right (راست چین کردن متن)

مثال:

HTML:

<style type="text/css">
body{
 text-align:justify;
}
</style>

sky boy · 2012 , December 27

تزئین متن با text-decoration:

در css متن (و مخصوصا لینک) را با text-decoration تنظیم می کنند، مثلا اگر از این گزینه استفاده نکنید، بیشتر مرورگرها، لینک ها را به صورت متن زیرخط دار نشان می دهند.
مقادیری که در text-decoration استفاده می شود:
- blink (متن چشمکزن)
- line-through (متنی که خطی از داخلش گذشته یا بر روی آن خط کشیده شده)
- none (بدون موارد اضافه و حالت عادی)
- overline (متن با خطی روی آن)
- underline (متن زیر خط دار)

مثال:

HTML:

<style type="text/css">
body{
 text-decoration:none;
}
</style>

میزان فشردگی متن یا text-indent:

از این قابلیت بیشتر برای حروف انگلیسی (که بین آنها فاصله است) استفاده می شود و مقادیر آن را با پیکسل تعریف می کنند.

مثال:

HTML:

<style type="text/css">
body{
 text-indent:45px;
}
</style>

sky boy · 2012 , December 27

ایجاد سایه متن یا text-shadow:

text-shadow قابلیتی است که در css3 افزوده شده است، از این عنصر برای ایجاد سایه متن استفاده می شود؛ روش ایجاد آن به طور کلی به صورت زیر است:

HTML:

<style type="text/css">
body{
 text-shadow:5px 5px 2px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=666]#666[/URL]
}
</style>

اعداد در عبارت بالا به ترتیب نشانه فاصله افقی (horizontal shadow)، فاصله عمودی (vertical shadow)، فاصله ماتی (blur) و رنگ سایه است.
نکته: این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.

نمایش کوچک بزرگی حروف با text-transform:

text-transform قابلتی است در css که بیشتر برای حروف انگلیسی کاربرد دارد، چرا که می توان با آن حروف را بزرگ یا کوچک نشان داد، مقادیر text-transform عبارتند از:
- capitalize (حروف اول بزرگ نشان داده می شود)
- lowercase (تمام حروف کوچک نشان داده می شوند)
- uppercase (تمام حروف بزرگ نشان داده می شوند)
مثال:

HTML:

<style type="text/css">
body{
 text-transform:uppercase;
}
</style>

در خاتمه این بحث،کدی رو آماده کردم که کافیه اون رو با پسوند HTML ذخیره کنید یا روشهای دیگر که وارد هستید
که در آن، متنی فرضی را با عناصر تنظیم کننده، شکل دادم.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>تنظیمات متن در css</title>
<style type="text/css">
.text{
 width:200px;
 height:auto;
 border:1px solid [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=666]#666[/URL]
 padding:4px;
 margin-left:auto;
 margin-right:auto;
 direction:rtl;
 text-align:justify;
 text-transform:uppercase;
 text-shadow:2px 2px 2px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=F90]#F90[/URL]
}
</style>
</head>
<body>
<div class="text">
این متن به عنوان مثال با استفاده از ویژگی های text در css تنظیم شده است.
</div>
</body>
</html>

sky boy · 2012 , December 27

تنظیم لینک در استایل css

در ادامه آموزش استایل نویسی با css، نوبت به آشنایی با خواص کاربردی این زبان در نحوه تنظیم لینک های وب است،
حتما در صفحات مختلف در اینترنت با اینگونه لینک ها آشنا هستید که با بردن نشانه گر(ماوس) روی آنها به فرض رنگ متن لینک تغییر می کند
و یا پس از دیدن یک لینک، به رنگی دیگر نشان داده می شود،
جالب است اگر بدانید تمام این ویژگی ها با کمک css خلق می شوند و این چیزی است که در ادامه آموزش به آن می پردازیم،
یادآوری کنم که آموزش سلسله وار هست واگه نکته ای مبهم بود به صفحات قبل مراجعه کنید،

تعریف یک لینک در html

همانطور که قبلا گفتم، css به خودی خود کاربردی نداره و در کنار تگ های html هست که قدرت آن مشخص میشه،
لذا وقتی صحبت از تنظیم لینک در css است، باید ابتدا ببینیم که اصلا لینک در html چگونه تعریف می شود؛
یک لینک (hyperlink) در html با تگ href و a تعریف می شود و با افزودن کلاس (class) یا آی دی (id) به آن،
یا قرار دادن لینک، درون یک بلاک دیگر که از (class) و آی دی (id) در css پیروی می کند،
با خواص ظاهری تنظیم می شود که در زیر نمونه ای از کاربرد آن را ملاحظه می کنید.

HTML:

<a href="http://www.iranjoman.com" title="skyboy" target="_self" class="your-css-class" id="your-css-id"> آموزش css</a>

sky boy · 2012 , December 27

تعریف خواص لینک در css

در css خواص لینک را درون کلاس ها یا آی دی ها تعریف می کنند، یک لینک در وب به طور معمول درچند حالت مختلف می تواند عملکرد مختلف داشته باشد،
مثلا در حالت عادی که ماوس را روی آن نبرده اید، ممکن است رنگ آن به فرض آبی باشد،
اما پس از اینکه ماوس را برای کلیک کردن روی آن می برید به رنگ دیگری درآید، یا پس از دیدن صفحه مربوط به آن لینک، رنگ آن به صورت ثابتی تغییر کند،
همچنین در لحظه ای که بر روی یک لینک کلیک می کنید، ظاهری متفاوت داشته باشد، به هر صورت تمام این ویژگی ها در css با عناصر مربوط به لینک های به اصطلاح اینتراکتیو قابل ایجاد شدن هستند،
این عناصر عبارتند از: a یا a:link برای حالت عادی، a:visited برای حالتی که صفحه مربوط به آن لینک دیده شده است،
a:hover برای حالتی که ماوس را روی لینک می برید و a:active برای لحظه ای که روی آن لینک کلیک می کنید،
به کاربرد این ویژگی ها در مثال زیر دقت کنید.

HTML:

<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=06C]#06C[/URL]
    text-decoration:none;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=C30]#C30[/URL]
}
/*حالت یک لینک فعال*/
a:hover{
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=990]#990[/URL]
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
}
</style>

توضیح:
- دقت کنید که عناصر مربوط به لینک باید به ترتیب ذکر شده در مثال بالا پشت سر هم و به ترتیب تعریف شوند، در غیر اینصورت ویژگی های مورد نظر عمل نخواهند کرد.
- به جزء حالت a:link، استفاده از سایر ویژگی ها اختیاری است و بستگی به هدف و سلیقه شما دارد.

sky boy · 2012 , December 27

استفاده از text-decoration در تنظیم css لینک

اکثر مرورگرها در حالت پیش فرض، زیر لینک (hyperlink) های وب خطی افقی را ترسیم می کنند که شاید از لحاظ ظاهری جلوه خوبی نداشته باشد،
خوشبختانه در css عنصری به نام text-decoration وجود دارد که به کمک آن و با افزودن مقادیر none،
می توان لینک هایی با ظاهری بهتر ایجاد کرد، مقادیری که به text-decoration مربوط می شوند عبارتند از: blink برای لینک های چشمک زن،
line-through برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است،
none برای حالت عادی، overline برای حالتی که خطی در قسمت بالای لینک ظاهر می شود و underline برای حالتی که خطی در زیر لینک وجود دارد،
به مثال زیر توجه کنید.

HTML:

<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:underline;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
a:hover{
    color:#990;
    text-decoration:blink;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:#999;
}
</style>

توضیح:
- اگر از استایل بالا در صفحه خود استفاده کنید، با نگه داشتن ماوس روی لینک، علاوه بر اینکه رنگ آن تغییر می کند، پس از اندک زمانی شروع به چشمک زدن می نماید.
- همانطور که ملاحظه می کنید، برخی خواص لینک ها در قسمت اول یعنی a:link تعریف می شوند و در عناصر بعدی نیازی به تعریف مجدد آنها نیست (و از همان تنظیمات پیروی می کنند)، مانند font-family یا font-size در مثال بالا.

sky boy · 2012 , December 28

استفاده از color و background-color در تنظیم css لینک

مثل کلاس ها و آی دی ها در css، تگ های خاصی مانند a و href نیز می توانند با ویژگی های مربوط به رنگ و پس زمینه تنظیم شوند
و این نمودی از انعطاف پذیری بالای css است،
به دلیل اینکه در این رابطه پیش تر و در آموزش های قبلی به طور مفصل صحبت کردم، در اینجا یک مثال فکر میکنم کافی باشه.

HTML:

<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=06C]#06C[/URL]
    text-decoration:none;
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=F90]#F90[/URL]
    padding:4px;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=C30]#C30[/URL]
}
/*حالت یک لینک فعال*/
a:hover{
    color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL]
    text-decoration:blink;
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
}
</style>

آموزشهایCSS-جادوی طراحی وب!

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی