همه‌ی نوشته‌های امین مرادی

HTML و CSS

آموزش برنامه نویسی CSS – اعمال تغییر بر روی لینک ها

درود
با استفاده از CSS می توانیم نحوه نمایش دادن لینکها را در صفحه تنظیم کنیم. به صورتی که استفاده از جاوا اسکرپت در صفحه تا حد زیادی کم می شود. از طریق استفاده از استایل می توانیم رنگ لینکها، اندازه فونت آنها، زیر خط لینکها، رنگ زمینه هر لینک و بسیاری دیگر از خواص لینکها را تغییر دهیم.

برای اینکه بتوانیم از همه خواصی که برای لینکها در CSS وجود دارد استفاده کنیم بهتر است تا استایل را در بخش HEAD متن خود یا در فایلهای CSS خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحل انجام کار شبیه هم است. ما در اینجا به استایل را در بخش HEAD متن تعریف می کنیم.
برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:

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

برای کار کردن با لینکها ما در قسمت HEAD متن از مشخصه های بالا استفاده می کنیم. یعنی کد زیر را در بخش HEAD متن وارد می کنیم اگر می خواهید از استایل خارجی استفاده کنید می توانید نحوه فرا خوانی استایل خارجی به صفحه را مطالعه کنید.

برای هر ویژگی بالا می توانید مشخصات خاص خود را تعریف کنید برای مثال می تواند رنگ از مشخصه bachkground-color برای تعیین رنگ زمینه لینک وقتی که ماوس روی ان قرار می گیرد استفاده کنید یا از color برای تعیین رنگ متن لینکها. به طور کلی می توانید از بیشتر مشخصه هایی که برای متن ها کارایی دارند در مورد لینکها هم استفاده کنید برای مثال font-family و font-size و border و …

در اینجا یک مثال مطرح می کنیم که در آن لینکهای صفحه به رنگ سبز نمایش داده می شوند با اندازه فونت ۱۲pt و بدون زیرخط، وقتی که ماوس روی آنها قرار می گیرد رنگ آنها قرمز می شود و رنگ زمینه متفاوتی پیدا می کنند همچنین یک کادر نیز اطراف آنها به وجود می آید. در موقع کلیک کردن رنگ لینک سفید می شود و لینکهایی که در دفعات قبلی کلیک شده اند با زیر خط نمایش داده می شوند. برای ساختن لینکهایی با مشخصاتی که بیان شد می توانیم از کد زیر در قسمت HEAD متن یا استایل خارجی استفاده کنیم:

همانطور که می بینید کدهایی که در قسمت HEAD این صفحه قرار دارند بر روی لینکهای بالا تأثیر گذاشته اند اما لینکها در سایر نقاط صفحه ویژگیهای متفاوتی دارند. دلیل این تفاوت این است که ما لینکهای بالا را در یک DIV قرار دادیم و برای آن یک ID در بخش HEAD صفحه تعریف کردیم و ویژگیهای مربوط به لینکهای بالا در قالب ID مشخص کردیم. در اینجا می توانید کدی را که ما مورد استفاده قرار داده ایم ببینید:

کد مربوط به DIV را نیز به صورت زیر نوشتیم:

و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی padding-margin – CSS در CSS

درود
در این جلسه ی آموزشی قصد دارم خصوصیات margin و Padding در CSS یا به عبارتی box model در css رو خدمتتون آموزش بدم. البته box model شامل border هم میشه که اون رو جلسات گذشته آموزش دادم .
11
Margin
توسط این خاصیت شما میتونید یک فاصله بین عنصر فرزند و عنصر والد ایجاد کنید. به کد زیر دقت کنید:

در اینجا عنصر والد رو body قرار میدیم و عنصر فرزند ChildElement در نظر میگیریم . اگر ما بخوایم این کادر رو از حاشیه ی Body به اندازه ی ۵۰ پیکسل فاصله بدیم باید margin رو برای این عنصر ۵۰px در نظر بگیریم.

در این صورت کادر childElement به اندازه ۵۰ پیکسل از سمت چپ ، راست ، بالا و پایین از body فاصله میگیره . به طور کلmargin رو فاصله ی بیرونی می نامیم .

قاعده دستوری Margin

Margin : margin-top margin-right margin-bottom margin-left

مثال margin : 10px 20px 15px 40px

در این مثال ما به اندازه ی ۱۰ پیکسل از بالا ۲۰پیکسل از راست ۱۵ پیکسل از پایین و ۴۰ پیکسل از سمت چپ بین عنصر والد و فرزند فاصله ایجاد کردیم .

نحوه ی نوشتن margin به اشکال مختلف

margin:10px 5px 15px 20px;
سمت بالا ۱۰px
سمت راست ۵px
سمت پایین ۱۵px
سمت چپ ۲۰px

margin:10px 5px 15px;
سمت بالا ۱۰px
سمت راست و چپ ۵px
سمت پایین ۱۵px

margin:10px 5px;
سمت بالا و پایین ۱۰px
سمت راست و چپ ۵px

margin:10px;
سمت بالا و راست و پایین و چپ ۱۰px

علاوه بر خلاصه نویسی در مثال های بالا شما میتونید از خصوصیات مجزای margin هم استفاده کنید .

Margin-top : فاصله از بالا

Margin-right: فاصله از راست

Margin-bottom : فاصله از پایین

Margin-left: فاصله از چپ

نمونه : margin-top : 20px

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

Padding

توسط این خاصیت شما می تونید یک فاصله ی داخلی ایجاد کنید . به کد زیر دقت کنید :

در اینجا عنصر والد مد نظر ما نیست . ما یک فاصله از لبه ی عنصر فرزند به داخل ایجاد می کنیم .

در مثال بالا ما فاصله ای به اندازه ۳۰ پیکسل بین لبه ی کادر و محتوای درون کادر ایجاد کردیم . همونطور که در تصویر ابتدای مقاله میبینید ، padding فاصله ی محتوای درون کادر رو با لبه ی کادر تعیین می کنه . به طور کل padding رو فاصله ی داخلی می نامیم .

قاعده دستوری Padding

Padding : Padding-top Padding-right Padding-bottom Padding-left

مثال Padding : 10px 20px 15px 40px

در این مثال ما به اندازه ی ۱۰ پیکسل از بالا ۲۰پیکسل از راست ۱۵ پیکسل از پایین و ۴۰ پیکسل از سمت چپ از لبه ی کادر تا محتوای داخل کادر فاصله ایجاد کردیم.

نحوه ی نوشتن Padding به اشکال مختلف

Padding :10px 5px 15px 20px;
سمت بالا ۱۰px
سمت راست ۵px
سمت پایین ۱۵px
سمت چپ ۲۰px

Padding :10px 5px 15px;
سمت بالا ۱۰px
سمت راست و چپ ۵px
سمت پایین ۱۵px

Padding :10px 5px;
سمت بالا و پایین ۱۰px
سمت راست و چپ ۵px

Padding :10px;
سمت بالا و راست و پایین و چپ ۱۰px

علاوه بر خلاصه نویسی در مثال بالا شما میتونید از خصوصیات مجزایpadding هم استفاده کنید .

Padding-top : فاصله از بالا

Padding-right: فاصله از راست

Padding-bottom : فاصله از پایین

Padding-left: فاصله از چپ

نمونه : padding-right : 20px

در این نمونه شما تنها از سمت راست یک فاصله ۲۰ پیکسلی ایجاد میکنید .
و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی Transform – CSS در CSS

درود
در CSS3

با استفاده از این خاصیت ، برای ایجاد افکت های زیبا دیگه نیازی به جی کوئری ندارید . خاصیت transform به شما این امکان و میده تا شما عناصرتون رو بچرخونید ، بزرگ و کوچیک کنید و … . حالا در مثال هایی که زده میشه به راحتی متوجه این موارد میشید .

قاعده دستوری transform

منظور از effect مقادیری هست که شما میتونید به transform بدید .

مقادیر خاصیت transform

با استفاده از این متدها و افکت ها شما میتونید عناصرتون رو بپرخونید ، برعکس کنید ، بزرگ یا کوچک کنید.

()translate

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

(translateX(valueX

این خاصیت فقط عنصر رو در جهت افقی جابجا میکنه .

(translateY(valueY

این خاصیت فقط عنصر رو در جهت عمودی جابجا میکنه .

()rotate

با استفاده از این متد میتونید عناصرتون رو بچرخونید . منظور از deg درجه هست که مقدارشو تعیین می کنید .
(rotateX(180deg

عنصر رو بصورت عمودی میچرخونه و در ۱۸۰ درجه که قرار بگیره کاملا عنصر رو در حالت عمودی پشت و رو میکنه .
(rotateY(180deg

عنصر رو بصورت افقی میچرخونه و در ۱۸۰ درجه که قرار بگیره کاملا عنصر در حالت افقی پشت رو رو میشه .
()scale

با استفاده از این متد میتونید ابعاد عنصرتون رو بصورت افقی و عمودی افزایش بدید . در مثال بالا ما ابعاد عنصر رو در حالت افقی ۲ برابر و در حالت عمودی ۳ برابر افزایش دادیم .
()scaleX

این متد ابعاد عنصر رو در حالت افقی افزایش میده .

()scaleY

این متد ابعاد رو در حالت عمودی افزایش میده .

()skew

با استفاده از این متد میتونید عنصرتون رو در دو حالت افقی و عمودی بصورت ۳ سه بعدی بچرخونید .

اگر مقدار درجه ای که تعیین می کنید مثبت باشه عنصر به سمت راست و اگر منفی باشه عنصر به سمت چپ میچرخه .

به عنوان مثال ما یه باکس ساده داریم که برای این باکس متد transform : skew(10deg,10deg) رو لحاظ می کنیم
میتونید با درجه ها بازی کنید و شکل های مختلفی دربیارید .

()skewX

این متد عنصر رو در حالت افقی میچرخونه .

()skewY

این متد عنصر رو در حالت عمودی میچرخونه .

پشتیبانی مرورگرها از خاصیت transform

و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی CSS – ساخت Navigation Bar با CSS

درود

Navigation Bar (نوار هدایت)
داشتن Navigation با کاربری آسان ، برای هر وب سایتی مهم است.
با CSS شما می توانید منوهای HTML خسته کننده را به نوار هدایتی با ظاهری خوب ، تبدیل کنید .
نوار هدایت – لیست لینک ها
یک نوار هدایت به HTML استانداردی به عنوان پایه و اساس نیاز دارد.
در نمونه ها ، ما نوار هدایت را از یک لیست HTML استاندارد خواهیم ساخت.
اساسا یک نوار هدایت یک لیست از لینک ها است ، بنابراین استفاده از عناصر

    و

  • باعث می شود که مفهوم کاملی ایجاد شود :
حالا بیایید bullet و margin و padding را از لیست حذف کنیم:
توضیح نمونه :

list-style-type:none – bullet را حذف می کند. یک نوار هدایت نیاز به نشانگر لیست ندارد
برای حذف تنظیمات پیش فرض مرورگر margins و padding را بر روی ۰ تنظیم می کند

کد در نمونه بالا کد استاندارد مورد استفاده در هر دو میله های هدایت عمودی و افقی است.
نوار هدایت عمودی
برای ساختن یک نوار هدایت عمودی علاوه بر کد بالا به استایل دهی به عناصر نیز نیاز داریم:

توضیح نمونه:

display:block – نمایش لینک به عنوان عناصر بلوک ، کل منطقه لینک را قابل کلیک می کند (نه فقط متن) و این به ما برای تعیین عرض اجازه می دهد
width:60px – عناصر بلوک عرض کامل پیش فرض در دسترس را می گیرند. ما می خواهیم به ۶۰ پیکسل عرض مشخص کنیم

نکته: همچنین نگاهی به نمونه نوار هدایت کاملا عمودی ما بیاندازید.
توجه: همیشه عرض عناصر در نوار هدایت عمودی را مشخص کنید. اگر شما عرض را فراموش کنید، IE6 می تواند نتایج غیر منتظره ای را تولید کند.
نوار هدایت افقی
دو راه برای ایجاد یک نوار هدایت افقی وجود دارد. با استفاده از اقلام لیست درون خطی و یا متغیر .
هر دو متد به خوبی کار می کنند ، اما اگر شما می خواهید لینک ها به یک اندازه باشند ، باید از متد شناور استفاده کنید.
اقلام لیست درون خطی
یکی از راه های ساخت یک نوار هدایت افقی ، مشخص کردن عناصر

 

توضیح نمونه :

display:inline – به طور پیش فرض، عناصر

  • عناصر بلوک هستند. در اینجا، پرش به خط قبل و بعد از هر یک از اقلام لیست را حذف می کنیم ، تا آنها را در یک خط نشان دهیم

 

نکته: همچنین نگاهی به نمونه نوار هدایت کاملا افقی ما بیاندازید.
اقلام لیست متغیر (floating)
در نمونه بالا لینک ها ، عرض های مختلفی دارند.
برای اینکه تمام لینک ها عرض برابری داشته باشند ، عناصر

 

به عنوان نمونه توضیح داد:

float:left – استفاده از متغیر برای اسلاید کردن عناصر بلوک بعد از یکدیگر
display:block – نمایش لینک به عنوان عناصر بلوک ، کل منطقه لینک را قابل کلیک می کند (نه فقط متن) و این به ما برای تعیین عرض اجازه می دهد
width:60px – از آنجا که عناصر بلوک عرض کامل در دسترس را می گیرند ، نمی توانند در کنار یکدیگر متغیر باشند. ما عرض هر یک از لینک ها را ۶۰px مشخص می کنیم

نکته: همچنین نگاهی به نمونه نوار هدایت کاملا افقی ما بیاندازید.
و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی Align – CSS در CSS

درود
تراز افقی CSS

در CSS، چندین خاصیت برای تراز عناصر به صورت افقی مورد استفاده قرار می گیرد.
تراز عناصر بلوک
عنصر بلوک ، عنصری است که عرض کامل را در دسترس قرار می دهد ، و یک پرش به سطر بعد ، قبل و بعد از آن دارد.
نمونه هایی از عناصر بلوک:

برای تراز متن، فصل متن CSS را مطالعه کنید.
در این فصل ما به شما چگونگی تراز عناصر بلوک به صورت افقی برای اهداف طرح بندی را نشان خواهیم داد.
تراز وسط با استفاده از خاصیت margin
عناصر بلوک می توانند با تنظیم حاشیه های چپ و راست بر روی “auto” تراز شوند.
توجه: استفاده از margin:auto در IE8 و نسخه های قبل از آن کار نخواهد کرد ، مگر اینکه یک DOCTYPE! بیان شود.
تنظیم حاشیه های چپ و راست بر روی خودکار مشخص می کند که آنها باید حاشیه موجود را به طور مساوی تقسیم کنند. نتیجه یک عنصر با تراز مرکزی است:

نکته: اگر عرض ۱۰۰٪ باشد ، هماهنگی دیگر اثر ندارد.
توجه: در IE5 یک باگ حاشیه برای عناصر بلوک وجود دارد. برای اینکه نمونه بالا در IE5 کار کند، چند کد بیشتر اضافه کنید : مشاهده نتیجه
تراز چپ و راست با استفاده از خاصیت position
یکی از روش های تراز عناصر استفاده از موقعیت مطلق است:

وجه داشته باشید: موقعیت مطلق عناصر از جریان عادی خارج شده است، و می تواند عناصر را با یکدیگر همپوشانی دهد.
مسئله سازگاری Crossbrowser
هنگام تراز عناصری شبیه به این ، تعریف از پیش تعیین شده margin و padding برای عنصر ، همیشه یک ایده خوب است. این برای جلوگیری از تفاوت های بصری در مرورگرهای مختلف است.
هنگامی که از خاصیت position استفاده می کنیم ، مشکلی در IE8 و قبل از آن وجود دارد. اگر یک عنصر ظرف (در مورد ما ) عرض مشخصی داشته باشد ، و بیانیه DOCTYPE! از دست رفته باشد، IE8 و نسخه های قبلی یک حاشیه ۱۷px در سمت راست اضافه خواهد کرد. این به نظر می رسد که فضای محفوظی برای اسکرول است. همیشه بیانیه DOCTYPE! در هنگام استفاده از خاصیت position تنظیم کنید :

تراز چپ و راست با استفاده از خاصیت float
یکی از روش های تراز عناصر استفاده از خاصیت float است :

مسئله سازگاری Crossbrowser
هنگام تراز عناصری شبیه به این ، تعریف از پیش تعیین شده margin و padding برای عنصر ، همیشه یک ایده خوب است. این برای جلوگیری از تفاوت های بصری در مرورگرهای مختلف است.
هنگامی که از خاصیت float استفاده می کنیم ، مشکلی در IE8 و قبل از آن وجود دارد. اگر بیانیه DOCTYPE! از دست رفته باشد، IE8 و نسخه های قبلی یک حاشیه ۱۷px در سمت راست اضافه خواهد کرد. این به نظر می رسد که فضای محفوظی برای اسکرول است. همیشه بیانیه DOCTYPE! در هنگام استفاده از خاصیت float تنظیم کنید:

و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسیfloat – CSS در CSS

درود

CSS شناور چیست؟

با شناور CSS، یک عنصر می تواند به سمت چپ یا راست تحت فشار داده شود ،که به عناصر دیگر اجازه می دهد تا در اطراف آن شناور شوند.
شناور اغلب برای تصاویر استفاده می شود، اما در هنگام کار با طرح بندی نیز از آن استفاده می شود.
چگونه عناصر شناور می شوند
عناصر به صورت افقی شناور می شوند ، این بدان معنی است که یک عنصر تنها می تواند به سمت چپ یا راست شناور شود ، نه بالا یا پایین.
عنصر شناور تا آنجا که بتواند به سمت چپ یا راست حرکت خواهد کرد. معمولا این به معنای تمام راه به سمت چپ یا راست عنصر محتوا است.
عناصر بعد از عنصر شناور در اطراف آن شناور خواهند شد.
عناصر قبل از عنصر شناور تاثیر نخواهد گرفت.
اگر یک تصویر را به سمت راست شناور کنیم ، متن بعد از آن در اطراف آن ، به سمت چپ جریان می یابد :

عناصر شناور در کنار یکدیگر
اگر شما عناصر متعددی را بعد از یکدیگر شناور کنید، آنها تا جایی که فضا هست کنار یکدیگر شناور خواهند شد.
در اینجا ما گالری عکسی با استفاده از خاصیت float ساخته ایم :

خاموش کردن “شناور” – استفاده از “پاک سازی”
عناصر پس از عنصر شناور در اطراف آن شناور می شوند. برای جلوگیری از این کار، از خاصیت clear استفاده کنید.
خاصیت clear مشخص می کند که کدام طرف یک عنصر برای عناصر شناور دیگر مجاز نیست.
با استفاده از خاصیت clear ، یک خط متن را به گالری تصویر اضافه کنید:

نمونه های بیشتر

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

و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی CSS – ویژگیهای مربوط به متن در CSS (بخش اخر)

درود

در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.
text-transform

این ویژگی مشخص می کند که متن با استفاده از حروف بزرگ نوشته شود یا حروف کوچک و یا به صورت معمولی البته بدون آنکه در حروفی که تایپ شده است تغییری به وجود آورید. با این روش اگر خواستید قسمتی از متن مثلاً برای تأکید بیشتر با حروف بزرگ مشاهده شود نیازی نیست که دوباره آن قسمت را از اول تایپ کنید. البته این ویژگی در زبان فارسی چندان استفاده ای ندارد ولی در زبانهایی مثل انگلیسی می توانید آنرا به کار ببرید.

به یک مثال در مورد این ویژگی توجه کنید:

همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود.

این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید:

none :
با انتخاب این گزینه متن به همان صورتی که تایپ شده است نمایش داده می شود.
lowercase :
با انتخاب این گزینه متن با حروف کوچک نمایش داده می شود.
uppercase :
این گزینه متن را با حروف بزرگ نمایش می دهد.
capitalize :
این گزینه حروف اول کلماتی را که با حروف کوچک نوشته شده اند با حروف بزرگ و بقیه حروف را با حروف کوچک نمایش می دهد. به مثال زیر توجه کنید:

line-height

این ویژگی به ما امکان می دهد تا ارتفاع سطر ها را مشخص کنیم. این ارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرها را مشخص می کند.

برای مثال اگر بخواهیم سطرها از هم ۵۰ پیکسل فاصله داشته باشند می توانیم به صورت زیر عمل کنیم:

text-indent

این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اول هر پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صد باشد.

در مثال زیر این مقدار تو رفتگی را ۳۰ پیکسل در نظر می گیریم:

و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی CSS – ویژگیهای متن درCSS (بخش اول)

درود
در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به شما معرفی می کنیم. با کمک این ویژگیها می توانیم نحوه قرار گرفتن متن در صفحه، فاصله بین حروف و بسیاری از خواص یک متن را تغییر دهیم.

letter-spacing

ین ویژگی به ما اجازه می دهد تا فاصله میان حروف یک کلمه را در یک متن تعیین کنیم. این ویژگی می تواند مقادیری را در مقیاس پیکسل به خود بگیرد یا از مقدار normal استفاده کند. گزینه پیش فرض برای این ویژگی همان normal است. در اینجا به ذکر یک مثال در مورد این ویژگی می پردازیم:

فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم:

text-align

این ویژگی به ما اجازه می دهد تا نحوه قرارگیری قسمتی از متن را از لحاظ راست چین، چپ چین یا وسط چین بودن تنظیم کنیم.

این ویژگی می تواند مقادیر زیر را به مورد استفاده قرار دهد:
left :
با استفاده از این مقدار می توانیم محتویات یک تگ را در سمت چپ صفحه نمایش دهیم.
right :
این مقدار معین می کند که محتویات یک تگ باید در سمت راست صفحه نمایش داده شوند.
center :
این مقدار محتویات یک تگ را به صورت وسط چین تعریف میکند.

برای مثال اگر می خواهید متنی که در یک DIV قرار دارد به صورت چپ چین نمایش داده شود می توانیم از این ویژگی به مانند زیر استفاده کنیم:

text-decoration

این ویژگی به ما اجازه می دهد تا برای قسمت خاصی از متن خاصیتهای از قبیل زیرخط تعریف کنیم. مثلاً فرض کنید می خواهیم یک متن را با خطی بالای آن به وجود بیاوریم. در اینجام می توانیم از این ویژگی به صورت زیر استفاده کنیم:

ین ویژگی چندین مقدار دارد که در اینجا به آنها می پردازیم:

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

در اینجا یک لینک را می بینید که با استفاده از ویژگی بالا بدون زیر خط نمایش داده می شود:
متن مورد استفاده در لینک
و بازهم خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی CSS – تنظیم فونت صفحه با استفاده از استایل

درود
در این قسمت به روش تنظیم فونت متن با استفاده از استایل می پردازیم. بسیاری از اعمالی را که قبلاً با تگ انجام می دادیم می توانیم با استایل انجام دهیم.
font-family

ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد، اما معمولاً Times New Roman است.

در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:

لبته باید به خاطر داشته باشید که اگر بازدید کننده فونت مورد نظر شما را نداشته باشد، مرورگر به جای آن از فونت پیش فرض خود استفاده می کند. برای جلوگیری از بروز این مشکل باید از فونتهایی استفاده کنید که معمولاً به همراه سیستم عامل نصب می شوند و در اکثر سیستمها موجود هستند.

font-size

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

فرض کنید می خواهیم متن درون یک DIV با اندازه ۳۰ پیکسل نمایش داده شود:

font-style

کار این ویژگی تقریباً شبیه تگ در HTML است، اما چون استفاده از تگهایی نظیر , , و در حال کمرنگ شدن است بهتر است از استایل برای مورب نشان دادن متن استفاده شود.این ویژگی می تواند مقادیر زیر را داشته باشد:

normal
italic
oblique

به یک مثال در مورد این ویژگی توجه کنید:

font-weight

این ویژگی به ما امکان می دهد تا میزان ضخامت متن را تعیین کنیم. می توانیم از مقادیر زیر برای این ویژگی استفاده کنیم:

normal
bold
bolder
lighter
۱۰۰
۲۰۰
۳۰۰
۴۰۰
۵۰۰
۶۰۰
۷۰۰
۸۰۰
۹۰۰

در اینجا به ذکر یک مثال می پردازیم:

و بازهم خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود

HTML و CSS

آموزش برنامه نویسی CSS – تنظیم ابعاد در CSS

سلام
امروز در این قسمت از آموزش CSS میخواهیم یکبار و برای همیشه از بحث های تئوری CSS خارج شده و سمت بحث های گرافیکی این موضوع بریم.
پس بدون وقفه کار یا همون آموزش رو شروع می کنیم.
تنظیم ابعاد در CSS
برای تنظیم ابعاد عناصر در CSS از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.
در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.
height : این ویژگی در تمام مرورگر ها پشتیبانی میشود.

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

با دو ویژگی min-height و min-width شما میتوانید حداقل مقدار را برای یک عنصر تنظیم کنید.

min-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

width : این ویژگی در تمام مرورگر ها پشتیبانی میشود.

عرض استاندارد برای طراحی سایت :

برای تنظیم عرض استاندارد برای طراحی سایت با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده میکنند (۷۶۸*۱۰۲۴) ، بهتر است عرض ۹۸۰px را تنظیم کنید. این عرض طبق استاندارد های صفحات وب انتخاب شده است.
و یکبار دیگر از شما به خاطر اینکه وقت گران بهاتون رو در اختیار ما گذاشتین از طرف خودم و گروه برنامه نویسی پنگوئن از شما متشکرم.