برگزیده های پرشین تولز

همه چیز درباره CSS

وضعیت
موضوع بسته شده است.

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
در این تاپیک مقالات فارسی در مورد Css گردآوری شده ... اگر مقاله ای نوشته اید و یا سراغ دارید که در این تاپیک نیست ، برای من بفرستید ( یا تو این تاپیک بنویسید ) تا اضافه کنم . دوستانی هم که مایل نیستن نوشته هاشون تو این تاپیک باشه اطلاع بدن تا حذف بشه .​

me [at] shayan [dot] ws


دوستانی که از نوشته هاشون تو این تاپیک استفاده شده ... :

- طاها ابراهیمی
- بابک هزاوه
- علي ستاری
- امیر فهیمی
- مرتضی الوانی
- محسن طالب
- میثم ضابط
- بهروز بهروزی

و سایتهای :

- بلغان تولز
- macromediax
- Web Nama


اگر کسی یا سایتی رو جا انداختم لطف کنید تذکر بدید اضافه کنم .


پ . ن : برای حفظ کپی رایت آثار لینک هر مطلب در انتهای اون اضافه شده .
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
استايل (CSS) چيست؟

- CSS مخفف کلمه Cascading Style Sheets ميباشند.
- اولين ورژن استايلها در سال ۱۹۹۶ ساخته شد. که اولين ورژن آن CSS1 بود.
- ديگر وژن آن CSS2 مي باشد که در سال ۱۹۹۸ ساخته شد که بيشتر براي ويرايش صفحات، نحوه نمايشها تگها و ... کاربرد دارد.
- فايل استايلها با فرمت CSS ذخيره ميشوند.

انواع استايلها:

۱. Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت و به صورت زير نوشته خواهد شد.

HTML:
<tag style="Style Declarations">
 
Example:
<p style="font-family: Tahoma">This is a paragraph</p>

در مثال بالا با استفاده از حالتهاي مختلف در استايلها نوع فونت آنرا تغيير داديم و همانطوري که در تعريف اين نوع استايل نوشتم اين استايل فقط و فقط تغييرات را بروي همين پاراگراف اعمال خواهد کرد.

۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت، اينرا بين دو تگ (<head></head>) به صورت زير نوشته خواهد شد.



HTML:
<style>
<!--
Style Declaration
-->
</style>
 
Example:
<head>
<style type="text/css">
<!--
p { color: red; text-align: left; font-size: 8pt }
-->
</style>
</head>

اين نوع حالت از تغييرات تعريف شده بروي تمامي تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوينت خواهد بود. توجه داشته باشيد در اين مثال سه حالت مختلف يک استايل را براي تگ پاراگراف تعريف کرديم که با استفاده از (;) حالتهاي مختلف آن از هم جدا شدند.
اگر بخواهيد اين حالت نوشته شده را براي چند تگ ديگر اعمال کنيد مي توانيد تگها را بااستفاده از کاما (,) از هم جدا کنيد براي مثال:


HTML:
h1, h2, h3, h4 { color: gold; font-family: sans-serif }

۳. Linked or External style sheet: نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمت CSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود.

HTML:
<link href="url" rel="relation type" type="link type">
 
Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


در اين نوع از استايلها بعد از اينکه فايل استايل خود را آماده کرديد آنرا با فرمت CSS ذخيره کرده و آنرا همانند بالا فايل استايل را به قالب لينک مي کنيم. براي راحت بود در کار مي توانيد ابتدا استايلها را به صورت Internal استفاده کرده و بعد از اينکه کارتان تمام شد کدهاي نوشته شده بين دو تگ (<style></style>) را در نت پد کپي کرده و آنرا با فرمت CSS دخيره کرده و سپس با استفاده از فرمول بالا آن فايل را به قالب لينک دهيد.
يکي از مزيتهاي اين نوع استايل اين ميباشد که مي توانيد با داشتن يک فايل استايل براي چندين صفحه استفاده کنيد و از ديگر مزيت هاي آن با اين کار کدهاي قالب را به چند فايل تقسيم کرده و قالب را منظم تر ميشود.


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

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
می‌توان گفت که امروزه CSS طراحی صفحات وب را در جهان متحول کرده است. این فناوری به طراحان وب کمک می‌کند که طراحی‌های خود را با بالاترین کیفیت و کاربرپسندترین شکل ارائه کنند. پیش از این، انجام این کار تنها با فایل‌های سنگین گرافیکی قابل انجام بود.
به جرات می‌توان گفت که اگر شما بدانید که با CSS چه کارهایی می‌توانید بکنید، قطعا از آن استفاده خواهید نمود. امروزه اکثر قریب به اتفاق سایت‌های حرفه‌ای از CSS بهره می‌برند. بنابراین برای یک طراح صفحات وب یادگیری این زبان بسیار مهم خواهد بود.
بسیاری از طراحان وب در زمینه‌ای که در آن به فعالیت مشغول هستند (یعنی طراحی) از اطلاعات ریشه‌ای و پایه‌ای برخوردار نیستند. اکثر آنها با خواندن یک کتاب در مورد HTML و یا JavaScript چیزهایی در مورد این زبان‌ها می‌دانند. همچنین بسیاری از آنها به نرم‌افزارهایی مانند Photoshop و Flash مسلط هستند. اما تعداد بسیار کمی هستند که تحصیلات دانشگاهی در این زمینه‌ها دارند. اما CSS برای هر دو گروه (چه آنهایی که تجربی و یا با خواندن یک کتاب طراحی را بلدند و چه آنهایی که به طور پایه‌ای به این زبان‌ها مسلط هستند) مفید و شاید لازم است.
اما به راستی با CSS چه کاری می‌شود کرد؟ به طور خلاصه می‌توان گفت مهم‌ترین کار آن، راحت‌کردن شما از یک سری کد است که علاوه بر خسته‌کردن شما، باعث پایین‌آمدن سرعت لود صفحات شما می‌شوند. CSS دست طراحان را به قدری باز گذاشته است که قطعا کسی با بهره‌گیری از CSS تمایلی به استفاده از جداول نخواهد داشت. CSS زمانی کاربرد خود را نشان می‌دهد که شما صفحه‌ای با حجم نسبتا زیادی از متن و عکس دارید (مانند یک وبلاگ) و نیاز است که صفحه زود لود شود. اگر شما از جداول استفاده کنید، بیننده باید منتظر شود تا زمانی که کل جدول لود شده و به نمایش درآید. اما با استفاده از CSS، هرچقدر اطلاعات لود شده باشد، در همان لحظه بر روی مانیتور بیننده درج خواهد شد.
اما چرا CSS مانع از خستگی شما در کدنویسی می‌شود؟ شما با CSS می‌توانید ویژگی‌های یک بخش را فقط یک‌بار تعریف کنید و دیگر مجبور نباشید این کار را تکرار کنید. مثلا شما دوست دارید که متون داخل کادری که در همه‌ی صفحات سایتتان وجود دارد، به رنگ قرمز باشد. برای این کار بدون CSS شما لازم است هربار تگ font را نوشته و ویژگی color را ذکر کنید. اما با CSS آن‌طور که بعدا خواهید آموخت، تنها لازم است یک‌بار این کار را انجام دهید.
اما بهتر است بیشتر شما را هیجان‌زده و مشتاق نکنم و به سراغ شروع داستانی با نام آموزش CSS بروم. یادگیری CSS همانند HTML است؛ اما باید بدانید که برای یادگیری CSS لازم است که شما HTML را بلد باشید. اگر به زبان HTML مسلط هستید با من برای یادگیری CSS همراه باشید.

http://www.babakweb.com/archives/000362.php
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
اشاره: در قسمت قبل با اصول کلی استایل‌ها آشنا شدید و دانستید که چگونه استایل بنویسید. اگر هنوز در استایل‌نویسی مشکلی دارید، نگران نباشید. در پایان این مطلب، فهرست بزرگی از مثال‌های استایل‌ها ارائه شده است که با مطالعه آن‌ها می‌توانید اشکالات خود را رفع کنید.
فراخوانی یک استایل به یک صفحه
گاهی اوقات شما چندین صفحه دارید که می‌خواهید استایل‌ آن‌ها یکی باشد. مسلمآ برای این کار شما باید وقت زیادی را صرف کنید تا برای هر صفحه، استایل‌ها را وارد کنید. شما می‌توانید یک فایل استایل را برای تمامی صفحات خود فراخوانی کنید. به این منظور، ابتدا در فایل موردنظر، استایل‌ها را نوشته و سپس آن را با پسوند css ذخیره و برای استفاده بر روی وب، بالاگذاری (Upload) نمایید. سپس کد زیر را در قسمت head صفحه خود قرار دهید.

HTML:
link rel="stylesheet" type="text/css"<br />
href="mystyle.css" /


نکته: در ابتدا و انتهای کد، دو علامت < و > قرار دهید!
نکته: در صفحه استایل‌ها، نیازی به شروع و پایان استایل با تگ‌های style و /style نیست.
مثال‌ها
خسته نباشید. شما با اصول پایه و مهم استایل‌ها آشنا شدید. چنانچه این آموزش‌ها را به دقت مطالعه کرده باشید، مشکلی در کار با استایل‌ها نخواهید داشت. اما اگر هنوز آن را به طور کامل فرا نگرفته‌اید، مثال‌های زیر گزینه‌های خوبی برای یادگیری بیشتر هستند.
» پس‌زمینه
» انتخاب رنگ پس‌زمینه
» انتخاب یک تصویر به عنوان پس‌زمینه
» چطور یک تصویر را به طور عمودی تکرار کنیم
» چطور یک تصویر را به طور افقی تکرار کنیم
» چطور تصویر پس‌زمینه را جای دهیم
» یک پس‌زمینه فیکس
» متن
» انتخاب رنگ متن
» تعیین فاصله بین کاراکترها
» طرز قرارگیری متن
» کنترل حروف در یک متن
» فونت
» انتخاب اندازه یک فونت
» انتخاب استایل یک فونت
» انتخاب درشتی یک فونت
» حاشیه
» انتخاب استایل چهار حاشیه (منظور از چهار حاشیه، قسمت‌های بالا، پایین، چپ و راست یک حاشیه کامل است.)
» انتخاب حاشیه‌های متفاوت برای هر طرف
» انتخاب رنگ چهار حاشیه
» فهرست
» لیست‌های مختلف
» قراردادن شاخص لیست
آن‌چه خواندید مهم‌ترین مثال‌هایی بودند که من انتخاب کرده‌ام. فهرست کامل مثال‌ها را در اینجا ببینید.
امتحان استایل‌ها
حالا وقت آن فرا رسیده است که از خود یک امتحان بگیرید تا ببینید چقدر نسبت به استایل‌ها تسلط دارید. من از خود امتحان گرفتم و در پایان، ۸۰ درصد سوالات را درست جواب دادم.
در این امتحان ۲۰ سوال به صورت چهارجوابی وجود دارد. همچنین مدت زمانی که شما برای پاسخ‌گویی به سوالات صرف می‌کنید نیز محاسبه می‌شود.
آماده‌اید؟ به سر جلسه امتحان بروید!

http://www.babakweb.com/archives/000320.php
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
استايل شيت ها يکي از مفيد ترين عنصر در وب ميباشند که يکي از مزيتهاي آن ساخت يک فايل و الگوي مشترک و استفاده آن در کليه صفحات سايت مي باشد. همين امر که از تکرار يک سري کد جلوگيري ميکند باعث محبوبيت اين عنصر در نزد طراحان وب شده است.​

با استايل شيت چه کارهايي ميتوانيد انجام دهيد؟
با اين عنصر شما ميتوانيد مدل، اندازه، رنگ و نوع آرايش متن ، رنگ زمينه و حاشيه صفحات و جدولها ، تنظيمات ليستها و همچنين عکسها را کنترل کنيد.

تعيين الگو و style
هر style بايد براي يک تگ خاص تعريف شود . به محتواي داخل تگي که ميخواهيم يک style نسبت دهيم selector يا انتخاب کننده ميگويند که ااگوي تعريف شده در تگ آغاز کننده يک عنصر تا تگ پايان دهنده آن تاثير خواهد داشت.
براي تعيين و تعريف يک الگو ابتدا بايد selector را مشخص و بنويسيم مانند h1 سپس خصوصيات و مقادير آنها را بين دو علامت { } بگذاريم که طرز نوشتن خصوصيت و مقدار آن بين { } به اين ترتيب ميباشد:
ابتدا خصوصيت را نوشته سپس علامت : ميگذاريم و بعد مقدار مشخصه آنرا مينويسيم ،
h1 { color:green }​
اگر بخواهيم چند خصوصيت را به يک selector نسبت دهيم ، بعد از هر کدام يک ; ميگذاريم،​
h1 { color:green; text-align:center }​

روشهاي تعريف ااگو و style
Style ها را به سه روش ميتوان تعريف کرد:
  • <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">روش اول: به عنوان يک الگوي خارجي که اطلاعات در يک فايل نوشته ميشود و با پسوند .css ذخيره ميشود که در تگ <link> داخل قسمت head آدرس دهي و فراخوانده ميشود. <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">روش دوم: style را ميتوانيم در قسمت head نوشته و جاسازي کنيم که با تگهاي<style></style> مشخص ميشوند.
  • روش سوم: با قرار دادن style به عنوان خصوصيت در يک تگ و مقدار دهي آن. مانند تگ زير:
<div style=”color:green”>​

نکته: اگر براي يک selector به چند روش style تعيين شود، آن الگويي که به تگ نزديکتر است اجرا خواهد شد، پس طبق اين اصل روش سوم نسبت به بقيه موثرتر است. در ضمن هيچ محدوديتي در تعيين selector ها ويا خصوصيات آنها نيست. به مثال زير توجه کنيد:​
<style>​
body { color:yellow; background-color:red }
h1,h2, h3, p { color:green }
</style>
تعريف الگو از طريق class
گاهي اوقات يک style به روشهاي اول يا دوم تعريف ميشود، اما شما نميخواهيد که آن الگو در همه جا اعمال شود، پس مياييد يک اسم واحد برايselector انتخاب ميکنيد ، بدين ترتيب که بلافاصله بعد از selector يک نقطه ميگذاريد و اسمي را مينويسيد. پس از اين کار در هر تگي که نياز به آن الگو هست خصوصيت class=” “ را مينويسيم و برابر با آن اسم قرار ميدهيم،
<head>​
<style>
p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>
<A name=link>فراخواني فايل css در تگ <link>
ارزش واقعي style sheet زماني به چشم ميايد که يکبار آنرا تعريف کنيد و در تمام صفحات از آن بهره ببريد. براي اين منظور شما فقط از طريق روش اول ميتوانيد اينکار را انجام دهيد، بدين ترتيب که style ها را در برنامه ويرايشگر متن مانند notepad مينويسيد و سپس آن فايل را با پسوند .css ذخيره کرده و در دايرکتوري اصلي وب سايتتان قرار ميدهيد. css مخفف Cascading Style Sheet است.

نکته: در اين روش نيازي به نوشتن تگهاي<style></style> نيست و فقط selector ها و خصوصيات را مينويسيد. در صورت رعايت نکردن اين موضوع الگوهاي تعريف شده در آن فايل در صفحات اعمال نخواهند شد.​

پس از ذخيره فايل style sheet ميتوانيد براي هر صفحه که ميخواهيد آنرا فراخواني کنيد، براي انجام اين عمل بايد تگ <link> را در قسمت head قرار دهيد و سه خصوصيت مربوط به آنرا وارد کنيد. خصوصيت rel=” “ است که برابر با کلمه stylesheet قرار ميدهيد و سپس type=” " وبا text/css مقداردهي ميشود و در آخر با خصوصيت href=” “ فايل را آدرس دهي ميکنيد،​
<link rel=”stylesheet” type=”text/css” href=”آدرس فايل “>​
اين تگ نيازي به پايان دهنده ندارد.​

http://www.iranw3.com/CSStut/
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
» این مطلب «۱۰ ریزه‌کاری در مورد CSS که شاید ندانید» خیلی جالب است؛ خصوصا شماره‌ی دوی آن. شاید شما هم نمی‌دانستید که در CSS می‌توان برای یک p از بیش از یک کلاس استفاده کرد و هردوی آن کلاس‌ها روی تگ تاثیر می‌گذارند. من این را نمی‌دانستم و قبلا برای هر قسمتی یک کلاس جداگانه تعریف می‌کردم.
کلاس‌ها را باید با یک فاصله (Space) از هم جدا کنید؛ به این شکل:
<p class="text side">...</p>

http://www.babakweb.com/archives/000348.php
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
با توجه به نوع نمایش عبارت «مارمولک - نظرات» می‌بینید که در این عبارت از تصویر استفاده نشده و متن به شکل جالبی دارای سایه است.
برای انجام این‌کار می‌توانید از style زیر (که از صفحه‌ی استایل خود مارمولک استخراج شده است) استفاده کنید.


HTML:
font-size: ۳۵pt;
font-weight: bold;
font-family: 'Times New Roman';
/*width: ۱۵۰px;*/
height: ۵۵px;
filter: blur(Direction=۲۷۰, Strength=۲۰);

توضیح: از کدهای بالا باید در استایل استفاده کنید.
مهم‌ترین بخش استایل بالا، سطر پایانی آن است. در سطر پایانی از فیلتر blur استفاده شده و خصوصیات آن توسط Direction که زاویه سایه و Strength که اندازه‌ی کشیدگی سایه را مشخص می‌کند، تعریف شده است.
توضیح: رنگ سایه تابع رنگ خود متن است.

http://www.babakweb.com/archives/000353.php
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
بیایید به روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر هر روز یه تگ جدید معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم استانداردی بنام W3C را تصویب کردند . در این زمان نیاز عمده ای حس میشد که محتویات سایت از طراحی جدا شود . در اینجا بود که سر و کله CSS پیدا شد و مسئولیت نمایش نمای صفحات را بعهده گرفت و XHTML نیز برای نمایش اطلاعات بگار گرفته شد .

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

در این مقاله شما یاد میگیرید چگونه بجای جداول از CSS وکلاس های آن استفاده کنید .
ساخت کلاسی برای عناصر تگ <div> : اولین قدم ساخت کلاس CSS است که المنت های تگ <DIV> از آن استفاده میکنند . بصورت زیر :
HTML:
div.leftnav{ 
 
background: white; 
 
color: black; 
 
/* other display information here */ 
 
/* add Positioning information here */ 
 
}

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

HTML:
div.leftnav{
 
background: white;
 
color: black;
 
/* Other display information here */
 
width: 15%;
 
}

خوب . ما چه انجام دادیم ؟ ما گفتیم که هدایتگر چپ باید در سمت چپ باشه ، جاییکه در صفحه قرار میگیرد . این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت یابی مطلقی نیاز داشته باشید . همچنین این خیلی مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت نمایی اصلی نیست . تمام چیزی که تعریف کردید Width بود . بنابرین یک المنت با پهنای 15% ساخته خواهد شد .

موقعیت نمایی مطلق . اضافه کردن border و margin :
موقعیت نمایی مطلق به معنای این است که شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند . اینکار با تعریف خاصیت های top , bottom, left , right امکان پذیر میشود :

HTML:
div.content{
 
background: white; 
 
color: black;
 
position: absolute; /* Says which positioning we are using */
 
left: 17%; /* 17% from the left side of the screen */
 
width: 69%; /* This is the width */
 
}

نکته اینجاست که در کد بالا فقط خاصیت left تعریف شده، این کافیه ! نیازی نیست که شما تمامی تمام خاصیت هایش را تعریف کنید . اما برای انعطاف پذیری بیشتر ممکنه خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما بخواهید یک منو در سمت راست اضافه کنید:
HTML:
div.rightnav{
 
background: white; 
 
color: black;
 
position: absolute;
 
left: 83%;
 
width: 10%;
 
top: 80px; /* 80 pixels from the top */
 
}

اساسا در موقعیت نمایی مطلق این المنت ها معانی زیر را دارند:
Left : فاصله از چپ صفحه ، معمولا بر حسب درصد
Right : فاصله از راست صفحه ، معمولا بر حسب درصد
Top: فاصله از بالای صفحه ، معمولا بر حسب پیکسل
Bottom : فاصله از پایین صفحه ، معمولا بر حسب پیکسل

نکته اینکه bottom به ندرت استفاده میشود ، اما گاهی لازم میشود . اگر شما از 4 یا 3 تا پراپرتی با هم استفاده کنید ،باید قادر به قرار دادن تگ DIV در هر کجا که میخواهید باشید . همچنین در نظر داشتن این نکته مهم است که راه های بیشتری نیز برای موقعیت نمایی یک المنت در کنار موقعیت نمایی مطلق وجود دارد . اما تمام مرورگر های وب آن راه ها را پشتیبانی نمیکنند .

افزودن Border :
ممکنه شما بخواهید کمی عناصرصفحه را با لبه کنار صفحه یا هر چیز دیگر فاصله دهید ، border ها برای این امر مناسبند . اما صفحه خود را در مرورگر های مختلف تست کنید تا نتیجه درستی دریافت کنید . و حال طرز ساخت حاشیه ها:

HTML:
div.rightnav{
 
background: white; 
 
color: black;
 
position: absolute;
 
left: 83%;
 
width: 10%;
 
top: 80px; /* 80 pixels from the top */
 
border-color: white; /* Keep the border invisible */ 
 
border-style: solid; /* It is a solid invisible line which is fine */ 
 
border-bottom-width: 2px; /* These attributes are pretty self-explanatory */ 
 
border-top-width: 2px; 
 
border-left-width: 3px; 
 
border-right-width: 4px; 
 
}

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

HTML:
div.content{
 
background: white; 
 
color: black;
 
margin-left: 20%; /* 20% from the left side of the screen */
 
margin-right: 20%; /* 20% from the right side of the screen */
 
}

نقصان وجود پشتیبانی مرورگر ها :
پشتیبانی نشدن تمام دستورات css توسط تمامی مرورگر ها مشکلات زیادی را برای طراحان پیش آورده . Mozilla ( و مرورگر های زیر مجموعه آن مانند FireFox ) و Opera بروز رسانی بسیار خوبی در پشتیبانی دستورات css دارند . اما Internet Explorer کمی عقب مانده است . کد هایی که در این مقاله نوشتیم توسط تمامی مرورگر ها پشتیبانی میشود .

ناسازگاری بین مرورگر ها :
بیشتر مردم از آخرین نسخه مرورگرها استفاده می کنند. مرورگر های گوناگون کد css شما را بگونه های مختلف تفسیر میکنند . اصلی ترین مرورگر در این زمینه IE است که ممکنه کد های border را بگونه دیگری نشان دهد .

افزودن تگ DIV :
افزودن تگ DIV برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است :

HTML:
<div class = "leftnav"> 
 
// Insert Links
 
</div>

همانطور که می بینید خیلی ساده اینکار انجام شد و بیشتر کار در فایل CSS انجام میشود . شما میتوانید از تگ DIV در هرجای صفحه استفاده کنید . در انتها اینجا یک صفحه XHTML ساده را می بینید که کد css آنرا سافته و نمای آن سه ستون دارد :

HTML:
<div class = "content"> 
 
// Content
 
</div>
 
<div class = "leftnav"> 
 
// Links 
 
</div>
 
<div class = "rightnav"> 
 
// Links
 
</div>

http://www.macromediax.com/learn/archive.asp?id=93
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
فونتها و خواص آنها:
۱. خانواده فونتها (Font-families)
خواص font-family اين ميباشد که مي توانيد فونت صفحه خود را انتخاب کنيد. استايلها با دو نوع فونت کار خواهند کرد:
- فونتهاي خاص (Specific): اين فونتهاي عبارتند از: Arial, Garamond, Times New Roman. اين فونتها در واقع بروي کامپيوتر اشخاص به صورت پيش فرض موجود ميباشد.
- فونتهاي عام (Generic): اين فونتها عبارتند از: Serif, Sans-serif, monospace, cursive, & fantasy که اين فونتها توسط استايلها ساپورت ميشوند.
براي تعريف صورت (اشکال) فونتها در استايلها از فرمول زير استفاده ميشوند:

کد:
font-family: font_name1, font_name2, ...
براي اينکه در نحوه نمايش فونتهاي بروي نمايشگرهاي متفاوت مشکل نداشته باشيد مي توانيد چند فونت دلخواه خود را بنويسيد تا اگر يکي از آنها توسط مرورگر ساپورت نشد به فونت بعدي برود، براي اينکار مي توانيد فونتها را با کاما از هم جدا کنيد. براي مثال:


کد:
font-family: tahoma, times new roman, arial, serif

۲. اندازه فونتها (Font Size)
در حالت استاندارد براي کنترل اندازه فونتها در HTML، با استفاده از SIZE دز تگ <FONT> ميباشد. در استايلهاي براي تعريف اندازه فونتها بايد از فرمول زير استفاده کنيد:

کد:
font-size: size

براي تعريف واحد در فونتهاي به چهار روش استفاده ميشوند:
- واحدهاي طول(Unit of length): اين واحدها عبارتند از: mm, cm, in, pt, pc, em, ex
- توضيحات کليدي (Keyword Description): اين واحدها عبارتند از: xx-small, x-small, small, large, x-large, xx-large
- واحد به صورت درصد (٪)
- نوع آخر بيان کردن حالتهاي کليدي در آن همانند: larger, smaller
حال اين اندازه ها به دو حالت منطقي (Absolute) و نسبي (Relative) تقسيم ميشوند. تفاوت اين دو نوع در اين ميباشد که در حالت منطقي اندازهاي را برحسب واحدهاي استاندارد اندازه گيري ميباشد اين اندازه مي اندازه را به صورت عدد و يا اعشاري تعيين کرد و واحدها در اين نوع عبارتند از: mm(millimeter), cm(centimeter), in(inch), pt(point), pc(pica) در حالت نسبي اندازه فونتها برحسب نوع کارکترها (حروف) ميباشد. براي اين حالت تنها دو واحد em, ex ميباشند. که اندازه em معادل حرف بزرگ M و ex معادل حرف کوچک x ميباشند.
بهترين نوع واحدها در اندازه گيري فونتها px ميباشد که برحسب تعداد پيکسلهاي مانيتور ميباشد.
۳. فاصله در بين کلمات، حروف و خطها
با استفاده از فومولهاي زير مي توانيد سه حالت بالايي رو مشخص کنيد:

کد:
word-spacing: size
letter-spacing: size
line-height: size

در حالتهاي بالا به ترتيب فاصله بين دو کلمه، فاصله بين دو حرف، فاصله بين دو خط را مشخص مي کنيد.
۴. جهتهاي افقي و عمودي متنها:


کد:
text-align: alignment
vertical-align: alignment

در حالت اولي (حالت افقي) جهتها عبارتند از: left, center, right و در حالت دومي (حالت عمودي) جهتها عبارتند از: baseline, bottom, middle, sub, super, text-top, text-bottom, top
۵. حالتهاي خاص


کد:
1. text-decoration: decoration
decoration: blink, line-throught, overline, underline, none
2. text-transform: transform
transform: capitalize, lowercase, uppercase, none
3. font-variant: variant
variant: small-caps, none

۶. خواص فونتهاي

خواص فونتها در حالت کلي به صورت زير ميباشد:

کد:
font:font-style; font-variant; font-weight; font-size/line-height; font-family

براي مثال اينرا مي توانيد به حالت زير بنويسيد:

کد:
h2 {
 font-style: italic;
 font-variant: small-caps;
 font-weight: bold;
 font-size: 3em;
 line-height: 0.5em;
 font-family: Times New Roman, Serif
 }
h2 { font: italic small-caps bold 3em/0.5em Times New Roman, serif }

http://tools.bolghan.com/archives/000175.html
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
یادمه تابستون دو سال پیش بود که کتاب HTML ناقوس و خریدم و موقع استراحت سر کار می خوندم. خیلی ازش خوشم اومد بویژه تکنیک برنامه نویسی با css. راستش به نسبت خیلی چیز ها آسونتر بود. اونروز ها خیلی با وبلاگ نویسی آشنا نبودم. ولی با همون چیز های که یاد گرفته بودم چند تا سایت استاتیک درست کردم.
من طراح وب هستم و امیدوارم خیلی ها بدونند این کار با طراحی قالب فرق داره. چیدن یه سری کد css نهایتا کنار هم بدون برنامه نویسی کار بچه های ترم یکی کامپیوتر هم نمی تونه باشه چون بیشتر شبیه یک بازیه. طراحی قالب هم برای من فقط یک سرگرمیه. چون از ور رفتن با css خیلی خوشم می آد. تقلید کردن از کد های یک طراح بیشتر شبیه یک شوخیه.
خیلی از تکنیک های css ثابت اند و خیلی ها ازشون استفاده می کنند مثل همین تکنیک دکمه های ناوبر. اینکه شخصی با چند خط css یاد گرفتن بقیه رو متهم به تقلید از اون کنه اصلا نمی تونه برام جدی باشه. هیچ کس حق نداره بگه حق کپی رایت ناوبر با تکنیک لیست نامرتب مثلا برای منه. من روز های بعد هم بقیه تکنیک های Css رو که در این وبلاگ بکار رفته رو آموزش می دم تا خدای css ایران زحمت افشا کردن کد های کسی رو نکشه. در ضمن امیدوارم کسی که ادعای طراحی داره در باره کد باز و اوپن سورس هم چیزکی بداند. راستی لینک هم ندادم تا بگم من دنبال تحقیر شخص خاصی نیستم و هر قدر اون تلاش برای ضایع بازی در بیاره من دم به تله اش نمی دم و اجازه نمی دم وجهه ای که برای این وبلاگ به زحمت بدست آوردم فدای ماجرا جویی های سخیف کسی بشه. امیدوارم به او توهین هم نکرده باشم چون این یه مورد کار اصلا تو کت من یکی نمی ره.
نکته آخر اینکه من قالبم رو برای IE طراحی کردم و برام مهمه که تو اون درست نشون داده بشه اگه به کم تو اندازه با FF مشکل داره خیلی مهم نیست. حدودا کمتر از 6 درصد خواننده های اینجا از FF استفاده م کنند و تازه به نسبت خیلی سایت و وبلاگ ها با اون همخونی بیشتری داره. درست کار کردن یک قالب در یک مرورگر مشخص اصلا نشونه کار درستی نیست. امیدوارم به اندازه کافی مفهوم باشه

اگر به بالای قالب وبلاگ من نگاه کنید, دکمه هایی را می بینید که با حرکت موس بر روی آن رنگشان عوض می شود. من به این دکمه ها ناوبر می گویم, چون در واقع برای انتقال بین صفحات مختلف وبلاگ بکار می روند- البته وبلاگ صفحات جانبی زیادی ندارد و این دکمه ها را بیشتر برای زیباتر شدن قرار داده ام - .همین Home, About, Xml, Messageو About. در این پست می خواهم نحوه ساخت چنین دکمه هایی را به شما آموزش بدهم. تکنیک بکار رفته در این پست لیست های نامرتب Unorder List است. البته تکنیک های دیگری هم برای ساخت چنین ناوبر هایی وجود دارد که من در قالب قبلی ام از آن تکنیک استفاده کرده بودم. به هر حال در این پست همان تکنیک جدید را آموزش می دهم.

مراحل ساخت
قبل از اینکه css هم وارد کار شود و طراحان سعی کنند بجای تگ های منسوخ شده html از css استفاده کنند, این تگ ها وجود داشتند و خیلی آنها را با نام لیست می شناسند. به تکه کد زیر نگاه کنید. سعی کنید در هر مرحله این کد ها را در Note Pad با پسوند .html ذخیره کنید و با مرورگرتان نتیجه کار را ببینید.

کد:
<ul>        <li>Item 1</li>        <li>Item 2</li>        <li>Item 3</li>        <li>Item 4</li>        <li>Item 5 we'll make a bit longer so            that it will wrap</li></ul>

حالا سعی می کنیم این کد ها را در داخل تگ div قرار بدهیم. آی دی Button را هم به div اعمال می کنیم.

کد:
<div id="Button"><ul>         <li><a href="<$BlogURL$>">Home</a></li>        <li><a       href="<A href="http://amirfs.blogspot.com/atom.xml">Xml</a></li">http://amirfs.blogspot.com/atom.xml">Xml</a></li>        <li><a href="<A href="mailto:[email protected]">Email</a></li">mailto:[email protected]">Email</a></li>        <li><a href="ymsgr:sendim?sarzaminshomali">Message</a></li>        <li><a href="">About</a></li></ul></div>

در این پست سعی می کنم از استایل شیت خارجی استفاده کنم. بنابراین کد های مربوط به آی دی Button را در قسمت style بالای صفحه تعریف می کنم. برای این کار در بالای صفحه قبل از تگ بسته </head> باید در میان تگ های باز و بسته <style> و </style> کد های زیر را قرار دهید. چون در قالب من این دکمه بالای دو ستون لینک ها و لینکدونی قرار می گیرند, بنابراین عرض کلی ستون 300 در نظر گرفته شده است. دقت کنید من این اندازه و نوع فونت رو بر اساس علاقم انتخاب کردم. اگر سایز فونت شما بزرگتر باشه ممکن عرض کل دکمه ها از 300 بیشتر بشه و بنابراین دکمه تو یه خط جا نگیرن و بنابراین انوقت باید سایز 300 را بیشتر کنید تا تو یه خط جا شوند.

کد:
#Button {
width: 300px;
font-size:10px;
font-family:tahoma;
margin-top:10px;
}}

کد ها را دوباره ذخیره کنید و نتیجه را ببینید. به بولت های سمت چپ نگاه کنید. چنین بولت هایی برای ما که قصد داریم با استفاده از این کد ها دکمه های ناوبر درست کردیم, چندان مناسب نیست. پس با اضافه کردن این کد به استایل آن بولت را حذف می کنیم. دقت کنید این کد را در همان محدوده استایل اضافه کنید.

کد:
#Button Ul{list-style: none;}
حالا با توجه به اینکه دکمه های ناوبر ما باید خطی کنار هم قرار بگیره. کافیه به css بگیم که این لیست رو خطی نشون بده. برای این کار به #Button Li کد نمایش خطی رو اضافه کنیم.

کد:
#Button li {
DISPLAY: inline;
}


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

کد:
#Button li a }
padding: 5px;
border: 1px solid #DAE0D2;
color: #000000;
font-weight:bold;
text-decoration: none;
{


برنامه دوباره اجرا کنید. تنها چیزی که مونده اینکه کاری کنیم با حرکت موس بر روی این دکمه رنگشون عوض شه. ما می خواهیم با حرکت موس رنگشون سبز کمرنگ شه.

کد:
#Button li a:hover {
border: 1px solid #f3f3f3;
background-color: #f3f3f3;
color: #000000;
{


http://amirfs.blogspot.com/2005/04/blog-post_18.html
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9

خواص رنگها:
رنگها را مي توان به چند حالت در استايلها تعريف کرد. براي مثال:

کد:
body { color: teal }
body { color: #008080 }
body { color: rgb(0, 128, 128) }
body { color: rgb(0%, 50%, 50%) }

همانطوري که در بالا مشاهده کرديد به چهار روش مي توانيد رنگها را تعريف کنيد. در روش اول شما مي توانيد اسم رنگهايي که توسط HTML پشتيباني ميشوند را بنويسيد. در روش دوم رنگها را به صورت اعداد هگزا استفاده شده اند و در دو روش بعد که مقادير سه رنگ قرمز، سبز و آبي را به صورت ارقام و درصد استفاده شده اند.

کنترل کردن تصاوير در زمينه:
براي نمايش عکس در زمينه و يا جاهاي بخصوص مي توانيد از فرمول زير استفاده کنيد:

کد:
background-image: url(IMAGE)

در اينجا IMAGE آدرس عکس ميباشد براي مثال:

کد:
B { background-image: url(d:\tem\images\bold_bg.gif) }

در مثال بالا شما زماني که تگ BOLD به کار برديد عکس زمينه براي آن تگ bold_bg.gif خواهد بود.
تکرار عکس در صفحه:

کد:
background-repeat: repeat_value

در اينجا مقدار repeat_value مي توان گزينه هاي از قبيل repeat, repeat-x, repeat-y, no-repeat باشند. مثال:

کد:
body { 
 background-image: url(d:\tem\images\eagles.jpg);
 background-image: repeat }

body { 
 background-image: url(d:\tem\images\eagles.jpg);
 background-image: repeat-x }

body { 
 background-image: url(d:\tem\images\eagles.jpg);
 background-image: repeat-y }

body { 
 background-image: url(d:\tem\images\eagles.jpg);
 background-image: no-repeat }

در مثالهاي بالا به ترتيب به صورتهاي مختلف نمايش داده ميشوند.: ۱. تکرار عکس در تمامي صفحه، ۲. تکرار عکس در جهت محور xها (افقي)، ۳. تکرار عکس در جهت محور yها (عمودي)، و ۴. بدون تکرار ميباشد. که به صورت شکل زير ميباشند.


bg_css.jpg


موقيعت عکس در زمينه:
در مبحث قبلي شما مي توانستيد عکس را به چهار صورت نمايش دهيد حال اگر بخواهيد موقيعت عکس را در صفحه نمايش دهيد مي توان از فرمول زير استفاده کنيد:

کد:
background-position: horizontal_value vertical_value

به جاي horizontal_value, vertical_value مي توان از عدد، درصد، و يا اسم جهتهاي top, center, bottom, right, left استفاده کرد. براي مثال:


bg_postion_css.jpg


شناور شدن متن بروي عکس:
براي اينکار مي توانيد از فرمول زير استفاده کنيد:

کد:
background-attachment: attach

به جاي کلمه attach مي توان از scroll و يا fixed استفاده کرد. در حالت اول که به صورت پيش فرض ميباشد و در حالت دون متن بروي تصوير شناور ميباشد.
فرمول کلي براي زمينه (background) به صورت زير ميباشد:

کد:
background:  background-color background-image background-repeat 
  background-attachment background-postion

براي مثال:

کد:
body { background: balck url(d:\tem\images\eagles.jpg) no-repeat fixed center center }

در مثال بالا رنگ زمينه سياه، و عکس eagles.jpg در وسط صفحه قرار خواهد گرفت که بدون تکرار ميباشد و متن بروي اين عکس شناور خواهد بود.

* منظور از شناور بودن متن بروي عکس اين ميباشد که عکس ثابت و متن بروي آن حرکت مي کند اما در حالت پيش فرض عکس به اندازه ارتفاع متن تکرار ميشود.

http://tools.bolghan.com/archives/000181.html
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
براي تغيير رنگ اسکرول بار کدهاي زير را بين <head></head> قرار دهيد:

کد:
<style type="text/css">
<!--
body {
scrollbar-face-color: #ffffff; 
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #ffffff; 
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #000000; 
scrollbar-track-color: #808080;
scrollbar-darkshadow-color: #000000;
}
-->
</style>


شما ميتوانيد با تغيير دادند رنگهاي سکرول بار رو به طرح دلخواه خود بسازيد.

 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
یکی از افکتهای معمول در طراحی وب ایجاد دکمه ها و کلیدهایی است که در حالتهای مختلف تغییر میکنند.
به عنوان مثال در زمان قرار گرقتن ماوس بر روی آنها (Hover) ، کلیک ماوس و حالت فعال بودن لینک تغییر شکل یا تغییر رنگ میدهند. به این کلیدها اصطلاحا Rollover گفته میشود.
روشهای زیاد و متفاوتی برای ایجاد چنین اثر و افکتی وجود دارد ، مانند استفاده از فلش ، استفاده از جاوا و … و استفاده از CSS !
در این مقاله به شما نحوه ساخت یک Rollover ساده با CSS را آموزش میدهیم. در اینجا ما فرض میکنیم که میخواهیم یک منوی افقی برای سایت خود بسازیم .
ابتدا باید به فکر گرافیک و شکل ظاهری و طرز ایجاد عکسها باشیم. شکل ظاهری کلید به شما و طرح سایر بخشهای سایت بستگی دارد در این مورد فقط توصیه میکنم که کار گرافیکی خود را با زیرکی و ظرافت نامحسوسی در قالب کادرهای یک قد مستطیلی جای دهید و با یک منحنی 5 پیکسلی که از کادر بیرون زده کار خود را سخت و پیچیده نکنید
icon_wink.gif

برای افکت قرار گرفتن ماوس ، کلیک و حالت فعال بودن لینک معمولا از تغییر رنگ و حداکثر از تغییر حالت متن از معمولی به درشت استفاده میشود و در این مورد هم بستگی به سلیقه شما دارد.
طرح گرافیکی مورد نظر من به این صورت است :
f_1.jpg

یک نوار 30 پیکسلی ساده با دو خط 2 پیکسلی در بالا و پایین و یک طیف زمینه کم رنگ خاکستری. تغییرات برای حالتهای مختلف در رنگ نوشته ها و نوار 2 پیکسلی پایینی اعمال میشود و در نهایت برای حالت معمولی ، Hover یا قرار گرفتن ماوس و حالت Active یا لینک فعال این شکلها را داریم.
مهمترین نکته این بخش نحوه خروجی گرفتن و ایجاد فایل تصویری برای استفاده در وب است. شاید ساده ترین راه ایجاد یک تصویر از هر یک از حالتهای کلید باشد که در این صورت بری هر کلید سه تصویر داریم که این تعدد تصاویر مشکلاتی چون حجم بیشتر و تاخیر در بارگذاری کامل صفحه ایجاد میکنند و نیز مدیریت و نگه داری طرح وقت گیر میشود و مهمترین اشکال و یکی از نکته های اصلی این آموزش تاخیر در بارگذاری عکسها در حالتهایHover و Active است به این معنی که در حالت عادی اگر عکسها به صورت جداگانه قرار گرفته باشد تنها در صورت وقوع رویداد (Event) خاص Hover یا Active این عکسها بارگذاری میشوند که از زیبایی و یکپارچگی طراحی میکاهد.
راه حل و به نوعی بهترین راه چیست ؟!
بهترین راه استفاده از یک فایل برای هر سه حالت است . بله ! با این کار از تعداد تصاویر کاسته شده و تمام حالات به طور همزمان و یکجا بارگذاری میشوند. اما چطور ؟!
f_2.jpg

بهترین راه قرار دادن و سه حالت معمولی ، Hover و Active به طور ستونی است به شکلی که حالت اصلی در پایین ، حالت Hover در وسط و حالت Active در بالا قرار گیرد. به این شکل :
حال ما به ازای هر کلید یک تصویر داریم که ارتفاعی سه برابر ارتفاع نوار یا منوی ما دارد.
اکنون به سراغ کدنویسی و بخش اصلی کار میرویم.
قبل از توضیح به شما پیشنهاد میکنم مجموعه آموزشهای MaxDesign در مورد لیستها را مطالعه کنید.
برای ایجاد یک منوی افقی از یک لیست نامرتب (UnorderedList) استفاده میکنیم و مطلقا درون صفحه از عکس (تگ img) استفاده نمیکنیم !
ابتدا کدهای صفحه را مینویسیم :
کد:
  <ul id="nav">
     <li><a href="/home">خانه</a></li>
     <li><a href="/hosting/">میزبانی وب</a></li>
     <li><a href="/support/">پشتیبانی</a></li>
     <li><a href="/web-develop/">توسعه وب</a></li>
     <li><a href="/web-design/">طراحی وب</a></li>
     <li><a href="/about-us/">درباره ما</a></li>
  </ul>
در ادامه به سراغ شیوه نامه میرویم و به این لیست نامرتبمان شکل میدهیم.
اول باید لیست عمودی خود را به صورت افقی نمایش دهیم پس یکراست به سراغ تگ UL رفته و آنرا با نام topmenu هدف قرار میدهیم. کمی ریزه کاری به خرج میدهیم، مکان و موقعیت لیست نامرتب خود را مشخص میکنیم و سپس یک پس زمینه به آن اختصاص میدهیم. این پس زمینه میله ای به اندازه یک پیکسل و به ارتفاع منوی ما (در اینجا 30 پیکسل) میباشد که به طور افقی در طول لیست تکرار میشود.
توصیه میکنم با تنظیم padding بر روی صفر مقادیر Margin راست و چپ روی auto منوی خود را در وسط بخش مورد نظر قرار دهید و همچنین کنترل li ها را به خود آنها واگذار کنیم !
برای نمایش افقی کافیست مقدار display را برای liها روی inline قرار دهیم. که در نهایت کدهای اولیه به این شکل خواهد بود :
کد:
 ul#topmenu  {
 height: 30px;
 margin: 0 auto;
 padding: 0;  list-style-type: none;
 text-align: center;
 background-image: url(images/tp_bg.gif);
  background-repeat: repeat-x;
  background-position: center;
}
ul#topmenu li  {
 margin: 0;
 padding: 0;
 display: inline;
}
و حالا نوبت به بخشهای اصلی یعنی لینکها میرسد. برای اینکه لینکها تمامی سطح مورد نظر ما یعنی سطح کلید را پوشش دهد باید به یک عنصر بلوکی یا Block Level تبدیل شود. که در اینجا دقیقا بر عکس li باید مقدار display روی block قرار داده شود. همانطوریکه میدانید عناصر بلوکی در حالت عادی در زیر هم قرار میگرند. در نتیجه برای اینکه لینکها در کنار هم و به صورت افقی قرار بگیرند از خاصیت float استفاده میکنیم و مقدار float را برای لینک روی right قرار میدهیم.
حالا ما یک لیست افقی برای کنترل بهینه عناصر و یکسری لینک بلوکی در کنار هم داریم که میتوانیم به این لینکها مقادیر عرض و ارتفاع نسبت دهیم.
نکته باقیمانده متنی است که به عنوان لینک در صفحه قرار دارد که در حالت عادی این متن روی عکس با رنگ پس زمینه عنصر لینک قرار میگیرد. برای اینکه از شر این حروف و کلمات هم خلاص شویم با یک ترفند آنها را به بیرون صفحه میفرستیم و از دید بینندگان مخفی میکنیم ! (با استفاده از text-indent)
در واقع این کار یک حرکت حرفه ای برای افزایش دسترس پذیری (Accessibility) و بهینه سازی برای موتورهای جستجو (SEO) نیز میباشد و همچنین گامی موثر برای پشتیبانی از مرورگرهای قدیمی. چرا که اگر به هر علتی مانند قدیمی بودن مرورگر ، عدم پشتیبانی از CSS یا … فایل CSS اجرا نشود این متنها به درستی و در جای خود نمایش داده میشوند و همچنین در مورد Spiderها ی موتورهای جستجو که فقط با متن و ساختار پایه ای صفحات سر و کار دارند و همچنین برای دستگاههای Screen Reader که افراد نابینا استفاده میکنند موثر است. ( یک تیر و چند نشان ! )
مورد آخر برای لینک تعیین موقعیت عکس پس زمینه با ویژگی background-position است که در حالت معمولی باید در جای اصلی خود یعنی به فاصله 0 پیکسل از پایین لینک باشد و همواره تصویر در وسط کادر لینک قرار گیرد ، هر چند که ما ابعاد لینک را دقیقا به اندازه تصویر انتخاب میکنیم.
حال ما کدی شبیه به این برای لینکها داریم :
کد:
ul#nav li a  {
  display:block;
  text-indent:-9000px;
 text-decoration:none;
 background-position: center 0px;
 height: 30px;
  float: right;
}
اکنون باید به فکر حالتهای دیگر یعنی Hover و Active باشیم. برای حالتهای Hover و Active تنها کافیست محل قرار گیری عکس پس زمینه خود را به اندازه لازم (در اینجا هر با 30 پیکسل) به پایین حرکت دهیم. پس داریم :
کد:
ul#nav li a:hover  {
   text-decoration:none;
 background-position: center -30px;
}
ul#nav li a:active  {
   text-decoration:none;
  background-position: center -60px;
}
حال باید به هر لینک عکس پس زمینه مربوطه را اختصاص دهیم. برای اینکار به li مربوط به هر لینک نام لینک را به عنوان ID اختصاص میدهیم :
کد:
  <ul id="nav">
     <li id="home"><a href="/home">خانه</a></li>
     <li id="host"><a href="/hosting/">میزبانی وب</a></li>
     <li id="supp"><a href="/support/">پشتیبانی</a></li>
     <li id="webdev"><a href="/web-develop/">توسعه وب</a></li>
     <li id="webdes"><a href="/web-design/">طراحی وب</a></li>
     <li id="about"><a href="/about-us/">درباره ما</a></li>
  </ul>
و در CSS به این شکل از این IDها استفاده میکنیم و عکس پس زمینه را برای هر لینک مشخص میکنیم و همچنین عرض تصویر پس زمینه هر لینک را به عنوان خاصیت width مشخص میکنیم :

کد:
ul#nav li#home a  {
  background-image: url(images/home.gif);
  width: 52px;
}
ul#nav li#host a  {
  background-image: url(images/host.gif);
  width: 98px;
}
ul#nav li#supp a  {
  background-image: url(images/supp.gif);
 width: 83px;
}
ul#nav li#webdev a  {
  background-image: url(images/webdev.gif);
  width: 92px;
}
ul#nav li#webdes a  {
  background-image: url(images/webdes.gif);
  width: 90px;
}
ul#nav li#about a  {
  background-image: url(images/about.gif);
  width: 76px;
}
الان ما یک منوی افقی با افکت Rollover با حداقل کدنویسی و حجم و حداکثر بازده و سازگاری داریم !
نکته اول : از آنجاییکه حالت active عموما در مرورگرهای مختلف حالتی ناپایدار و سطحی است توصیه میکنم این حالت را با استفاده از یک برنامه سمت سرور (Server Side) کنترل کنید و مثلا با استفاده از یک ساختار شرطی در برنامه مدیریت محتوای خود به لینک فعال خود کلاس active را نسبت دهید . به این شکل :
...
کد:
 <li id="home" class="active"><a href="/home">خانه</a></li>
...​
و برای CSS داریم :

کد:
ul#nav li.active a  {
   text-decoration: none;
 background-position: center -60px;
}
نکته دوم : شاید مایل باشید حالت بازدید شده یا Visited را نیز کنترل کرده و شکل دهید که با توجه به توضیحات بالا کار سختی نیست ! اما برای منوهای شبیه آنچه ساختیم توصیه نمیشود.
و اما نکته آخر اینکه این حالت تقریبا سخت ترین و پیچیده ترین حالت ایجاد چنین افکتی بود. اگر قادر به اجرای این حالت هستید قطعا ایجاد منوهای عمودی و ساده تر برای شما مثل آب خوردن است !
یک نمونه منوی افقی را میتوانید در این آدرس مشاهده کنید : DigitalDreamers.Biz
و یک نمونه از منوی عمودی را در اینجا : OrderedList.Com


http://weblog.corelist.net/archives/1384/05/08/css-rollover/
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
برای نمایش سایتها رسانه های گوناگونی وجود دارد که هر یک خصوصیات خاص خود را دارند. و شما به عنوان یک طراح وب یا مدیر سایت میتوانید نحوه نمایش سایت را در این رسانه ها کنترل کنید و ازنمایش صحیح سایت در هر یک از این رسانه ها مطمئن باشید.
یکی از این رسانه ها چاپ است. اگر شما صاحب سایت مرجعی هستید یا مقالات و محتوای متنی زیادی در سایت شما وجود دارد و کاربران حق چاپ این مطالب را دارند قطعا تمایل دارید که نسخه قابل چاپ مناسبی به کاربران خود ارائه کنید.
طراحان و توسعه دهندگان وب روشهای گوناگونی برای ایجاد نسخه مناسب چاپ برای وب سایتها دارند. با استفاده از برنامه های سمت سرویس دهنده و یا با شیوه نامه های چاپ ! بله شما با استفاده از CSS میتوانید نمایش سایت خود را در هر رسانه ای کنترل کنید.
چاپ جزو رسانه های ایستا است و مطالب بعد از چاپ قابل تغییر نیستند. و قطعا در نسخه چاپ شده از سایت شما بخشهای زیادی هستند که معنی خود را از دست میدهند.
به عنوان مثال تبلیغاتی که صرفا برای کلیک کردن در نظر گرفته شده ، عناصر گرافیکی صفحه و تصاویر متحرک نمایشی ، منوهای مختلف سایت و یا هر عنصری که مناسب چاپ نیست. و لازم است که این موارد از نسخه مخصوص چاپ شما حذف شوند. و شما مطالب مورد نظر را در یک ستون واحد و با رنگ زمینه و اندازه فونت مناسبی داشته باشید.
و حالا چطور این موارد را اجرا کنیم ؟
قبل از توضیح مراحل انجام لازم به تذکر است که اگر سایت شما بر اساس استانداردهای وب طراحی شده و بخش نمایشی (Presentation) توسط CSS کاملا از بخش ساختاری (Structural) سایت جدا باشد شما با کمترین زحمت و در کوتاه ترین زمان میتوانید نسخه مخصوص چاپ داشته باشید.
icon_wink.gif

مراحل کلی از این قرار است :
  1. نمایش و دسته بندی بخشهای مختلف سایت
  2. جدا کردن عناصر دربرگیرنده مطالب
  3. مخفی کردن کردن عناصر و بخشهای اضافی توسط CSS
  4. شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS
که در ادامه به شرح هر مورد میپردازیم.

1 نمایش و دسته بندی بخشهای مختلف سایت
شما باید بخشهای مختلف سایت را از لحاظ کاربرد و محتوا دسته بندی کنید ما برای نمونه یک وبلاگ را در نظر میگیریم. به عنوان مثال وبلاگ بخشهایی مثل سرآیند (Header) ، منوی کناری (Side Menu) ، بخش مطالب و بخش پاورقی (Footer) دارد که در بین هر مطلب هم یک کادر تبلیغاتی وجود دارد.
شما لازم است که که به این شکل دسته بندی کنید و مواردی که لازم است حذف شوند را مشخص کنید.
در این مثال عناصر گرافیکی بخش سرآیند ، منوی کناری ، بخش پاورقی و تبلیغات مابین مطالب باید حذف شوند.
2 جدا کردن عناصر دربرگینده مطالب
در این مرحله باید از لحاظ ساختاری عناصر دربرگینده مطالبتان را پیدا کنید. که معمولا یک Div یا Table cell هستند. همانطور که گفته شد اگر طراحی سایت استاندارد باشد این کار را به آسانی و به کمک نوارابزار Web Developer’s Toolbar مخصوص مرورگر FireFox میتوانید انجام دهید.
برای این کار کافی است که نوارابزار مورد نظر را دریافت کرده و بر روی فایرفاکس نصب کنید. و با استقاده از قسمت Outline و با انتخاب گزینه Outline block level elements تمامی عناصر بلوکی صفحه را مشاهده کنید در آخر با استفاده از قسمت Information و گزینه Display ID & Class Details میتوانید به راحتی ID یا Class عنصر مورد نظر را پیدا کنید !
و اگر برای طراحی از CSS استفاده نکردید متاسفانه باید وقت بیشتری بگذارید و با مرور کردن Source صفحه قسمتهای مورد نظر را پیدا کنید.
3 مخفی کردن عناصر بخشهای اضافی توسط CSS
الان که به وضوح از مشخصات عنصر حاوی مطالب آگاهی دارید میتوانید به سادی توسط CSS بخشهای دیگر را مخفی کنید. شما باید تک تک عناصر اضافی را حذف کنید :
کد:
#header, #sidemenu, #footer , .ads {
display: none;
}
و این برای حالتی بود که شما از CSS استفاده کردید ! و اگر غیر از این است کار شما کمی پیچیده تر میشود و باید با استفاده زیرکانه از CSS Selectorها عناصر مورد نظر را تحت تاثیر قرار بدهید :
مثلا این Selector دومین سلول جدول در اولین ردیف از سومین جدول داخل صفحه را در حالی که اولین و دومین سلولهای جدول قابل نمایش و سومین سلول مخفی هستند را تحت تاثیر قرار میدهد !
کد:
html body table+table+table tr td+td {
visibility: visible;
}
html body table+table+table tr td+td+td {
visibility: hidden;
}
4 شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS
حالا نوبت شکل دهی صفحه است. شما میتوانید با سلیقه خود نسخه مخصوص چاپی ایجاد کنید.
واگر این موارد را در نظر بگیرید نسخه چاپ شده زیباتر و بهتر خواهد بود.
سعی کنید برای نوشته ها عرض مشخصی تعیین کنید مثلا با درصد 80% صفحه و یا با مقادیر ثابت 6.5 اینچ تا متن شما از کناره های کاغذ چاپ فاصله مناسبی داشته باشد.
بهتر است رنگ پس زمینه مطالب سفید و رنگ متنها مشکی باشد.
در صورت نیاز اندازه فونت ها را کمی درشت تر کنید.
بله ، الان شما نسخه قابل چاپی برای سایت دارید پس امتحان کنید !
نکات قابل توجه :
  • با مطالعه مراجعی چون مرجع CSS در W3C میتوانید از امکانات حرفه ای تری استفاده کنید و کنترل بهتری روی اجزای صفحه داشته باشید.
  • اگر هنوز در طراحی سایت خود از CSS و مدلهای استاندارد استفاده نمیکنید باید به فکر نیروهای اضافی و هزینه بیشتر و وقت زیادی برای مدیریت و نگه داری سایت خود باشید !
  • از مزایای این روش برای ایجاد نسخه قابل چاپ سهولت ویرایش و آماده کردن برای شما و سرعت در انجام کار برای کاربر نهایی خواهد بود ! زیرا برای چاپ محتوا نیازی به ارتباط مجدد با سایت شما و دریافت نسخه قابل چاپ از یک برنامه سمت سرور نیست.
> اگر امکانات پیشرفته تری میخواهید :
ما اغلب حالتهایی که برای نسخه چاپ بی مورد بودند را حذف و ویرایش کردیم ولی برای لینکها و حروف اختصاری چه طور ؟!
فکر نمیکنید کلمه ای که در مطلب شما به مرجع دیگری از طریق لینک متصل شده است برای نسخه قابل چاپ نا مفهوم میشود ؟! بله ، ولی شما میتوانید این مشکل را با CSS حل کنید !
شما میتوانید آدرس لینکهای داخل صفحه را در کنار مطلب خود داشته باشید و یا عنوان کامل کلمه اختصاری را . به این مثال توجه کنید :

کد:
some texts as [URL="http://example.com/"]paragraph[/URL] text here

و یا

کد:
Tim Berners lee is the inventor of web and the main W3C Leader

شما میتوانید از طریق CSS به این شکل متن را برای چاپ اصلاح کنید :
کد:
acronym:after, abbr:after {
content: " ( " attr(title) " ) ";
font-size: smaller;
color: #666666;
}
a:after {
content: " ( " attr(href) " ) ";
font-size: smaller;
color: #666666;
}

و میتونید این آدرس را کمی کوچکتر از متن اصلی و کمرنگتر نمایش بدهید.
که متنی شبیه به این خواهید داشت :
کد:
[INDENT]some texts as paragraph (http://example.com) text here
[/INDENT]و
[INDENT]Tim Berners lee is the inventor of web and the main W3C (World Wide Web Consortium) Leader
[/INDENT]
در این مطلب سعی شد که شما با اصول کار آشنا شده و یک نمونه ساده از نسخه مخصوص چاپ داشته باشید. ادامه کار به سلیقه شما بستگی دارد. CSS یاد بگیرید و بهترین نسخه چاپ را درست کنید.
icon_wink.gif



http://weblog.corelist.net/archives/1384/02/15/printable-version-with-css/
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
سلام
حتما برای شما هم تا به حال پیش اومده که بخواید برای بخشهایی از سایتتون و یا سایتی که طراحی میکنید افکتی بزارید و زیبا تر و کاربرپسندترش کنید …
و اصولا اگر به حجم صفحه و سرعت لود هم اهمیت بدید استفاده از CSS میتونه گزینه مناسبی باشه نسبت به فلش یا بعضی برنامه های جاوا و …
تویه این مطلب میخوام براتون درباره افکت Hover صحبت کنم ..
نحوه کاربردش و امکاناتش و محدودیتها و راه حلهاش !
حتما اسم Hover رو برای رنگ متن لینکها زمانی که موس رویه اونها قرار میگیره رو شنیدید ( در واقع OnMouseOver Event هست )
ولی امروز برای طراحی های حرفه ای تر کاربرد Hover فقط به لینک محدود نمیشه .
در واقع شما میتونید برای هر عنصری از صفحتون استفاده کنید ..
به عنوان مثال برای Paragraph یا یک Box به صورت DIV یا …
و البته طبق معمول Internet Explorer با این افکت مشکل داره و در حقیقت اصلا نمایش نمیده .
راه حلی برای IE موجوده که بعدا توضیح میدم ..
برای درک ساده تر براتون مثالی میزنم :
فرض کنید شما میخواید یک منوی خیلی ساده برای یک سایت طراحی کنید…
شما تصمیم میگیرید با یک لیست غیر ترتیبی (Unordered List یا UL ) کارتون رو انجام بدید و میخواید که افکتی براش داشته باشید …
خیلی ساده میتونید با تعریف یک کلاس و حالت Hover اون کلاس این کارو رو انجام بدید …
نمونه کد CSS :
HTML:
.menu ul li {
background: #CCCCCC;
height: 18px;
margin: 3px 0px 2px;
padding: 0px 5px 0px 5px;
border-right: 7px solid #666666;
font: normal 12px Georgia, "Times New Roman", Times, serif;
}
و برای قسمت Hover :
HTML:
.menu ul li:hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-left: 7px;
} 
و

داخل صفحتون کد HTML به این شکل :

HTML:
<ul>Menu 1
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

قرار میگیره !
نمونه این منوها رو تویه این صفحه میتونید ببینید . هم افقی هم عمودی .
به همین شکل شما میتونید این افکت رو برای جدولها ، متنها و … استفاده کنید …
و اما بخش مهمتر موضوع IE و سازگاری با اون هست …
معمولا اگر بخواید همچین افکتی رو برای IE داشته باشیم باید از Event های onmouseover و onmouseout و .. استفاده کنیم که در واقع برنامه نویسی جاوا هست …
ولی مشکل اینجاست برای صفحات بزرگ و بخشهای مختلف استفاده زیاد از این موارد برای افکتمون خیلی جالب نیست و علاوه بر بالا بردن حجم ، سرعت Rendering صفحه هم پایین میاره و کدهامونو شلوغ میکنه !
حالا راه حل اینجاست !
خیلی ساده میشه با استفاده از یک فایل جاوا اسکریپت خارجی و CSS این مشکل رو حل کرد ..
و در واقع این فایل هم دقیقا از همون Event هایی که گفتم استفاده میکنه ولی احتیاجی به تکرار اونها برای هر مورد نیست !
و تنها نکتش برای استفاده اینه که شما تویه فایل CSS تون دقیقا اون خواص مورد نظرتون رو که میخواید در حالت Hover داشته باشید رو به صورت کلاسی به همون نام تکرار میکنید !
برای مثال برای منویی که بالا گفتم میشه :
HTML:
.menu ul li.hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-right: 7px;
}
و به همین صورت .
که اون فایل جاوا میاد و از تویه CSS تون این کلاسهایی که با .hover ختم میشه را به عنوان Event ه onmouseover قرار میده و مشکل حل میشه !

دریافت فایلهای نمونه و فایل جاوا

امیدوارم به دردتون بخوره …
موفق و پیروز باشید…
علی

http://weblog.corelist.net/archives/1383/08/13/hover-effect/
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
اگه با CSS2 آشنایی داشته باشید می‌دونین که برای طرح‌بندی (layout) یک صفحه از روش‌های مختلفی از جمله floating و positioning استفاده می‌کنن. البته امکاناتی که CSS 2 در اختیار ملت می‌ذاره زیاد جیگر نیست. اما در CSS3 یک ماژول مخصوص به نام Multi-column layout تعریف کردن که امکانات مناسب و خوبی در اختیار طراحان قرار می‌ده و مثل این که دردسرهاش از CSS2 خیلی کمتره.
شاید الان از خودتون بپرسید این مرتیکه هنوز CSS3 نیومده واس چی داره این چیزا رو به ما می‌گه؟!
ببینید دوستان! ما باید از قبل آماده باشیم تا یه کسی پنیر ما رو جابجا کنه :) به شخصه فکر نکنم زمان زیادی طول بکشه تا W3C نسخه‌ی نهایی CSS3 رو آماده کنه. پس بهتره ما هم قبل از این که تغییرات به سراغمون بیان به پیشوازشون بریم تا بعدا راحت‌تر درگیر مسائلی مثل به هنگام کردن دانش، مهاجرت کردن و خو گرفتن با محیط و ابزارهای جدید و مشکلاتی مثل این‌ها بشیم.
این امکان وجود داره که نسخه‌ی نهایی CSS3 نسبت به چیزی که در working draftهای فعلی وجود داره تغییراتی داشته باشه اما شخصا فکر نکنم این تغییرات بنیادی باشن. بذگریم!! و بریم سر اصل مطلب.

همونطور که قبلا گفتم در CSS3 یک ماژول به نام Multi-column layout وجود داره. این ماژول دارای چندین خواص (properties)ه که می‌شه اون‌ها رو در سه دسته‌ی زیر تقسیم بندی کرد:

الف) دسته‌ای که تعداد و عرض ستون‌ها رو تعیین می‌کنن:

کد:
# column-count
# column-width
# column-min-width
# column-width-policy

ب) دسته‌ای که فواصل بین ستون‌ها رو تنظیم می‌کنن:

کد:
# column-gap
# column-rule
# column-rule-color
# column-rule-style
# column-rule-width

پ) یه property تک و تنها به نام :

کد:
column-span
اما به خدمتتون بگم که من در چند مورد بی‌تقصیرم!!
...The border, padding and margin properties do not apply to these boxes (although they may do so in the future)...
...There is also no separate "background" properties for the column (although these may be defined in the future)...

اما بپردازیم به تشریح این propertyها:

3.jpg


- column-count: برای تعیین تعداد ستون‌ها به کار می‌ره. شما می‌تونید اون رو با یک عدد و یا یکی از دو حالت auto یا وراثتی (inherit) تعریف کنید.
- column-width: برای تعریف پهنای (عرض) هر یک از ستون‌ها. هر پارامتری که برای سایز وجود داره (٪ - em - px و ..) + مقدار auto & حالت وراثتی (inherit) رو می‌پذیره.
- column-min-width: مثل همون min-width می‌مونه منتها واسه‌ی هر ستون.
- column-width-policy: این مشخصه نحوه‌ی تفسیر column-width رو ارایه می‌ده. column-width-policy به دو صورت انعطاف‌پذیر (flexible) و یه دنده :) یا همون strict تعریف می‌شه. حالت انعطاف‌پذیر این اجازه رو می‌ده تا پهنای هر ستون جهت پر کردن فضای قابل دسترس بیشتر بشه و حالت strict هم که ~.
- column-gap: همونطور که تو تصویر هم می‌بینین این مشخصه فضای خالی بین هر ستون با column-role مشخص می‌کنه.
- colum-rule: خط جدا کننده‌ی هر دو ستون که شامل color | style | width هم می‌شه. (style همون استایل‌های borderهاس).
- column-span: تعیین کننده‌ی اینه که یه عنصر (المنت) به چندتا ستون می‌تونه تجاوز کنه!! تصویر زیر گویای همه چیز هست (۱۸- فقط :))

کد:
<div style="column-count: 3; column-rule: solid black 0.3em; column-gap: 
0.3em">
<h1 style="column-span: all">An imporant element</h1>
<p>...</p>
<h2 style="column-span: 2">A not-so important element</h2>
<p>...</p>
</div>

4.jpg


اما ما در این ماژول یه چیز مسخره داریم به نام CWRG. این موجود در آینده دوست‌داشتنی ;) دارای فرمولی است زیبا به قراره زیر:

کد:
CWRG = column_count * column_width + (column_count-1) * (column_rule_width) + (column_count -1) * column_gap)

در آخر باید بگم که به خاطر وجود این ماژول دو valueی دیگه به float اضاف شدن با نام‌های mid-column و in-column. تصویر زیر همه چیز رو بهتر می‌گه.
2.jpg


منبع: صاحابش!
Filed by S CH XOGOLO under CSS Web Standards

http://blogz.xogolo.info/wn/16/
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
اول از همه با ماوس برين روی عکس بعدش هم يکی از دايره‌ها رو انتخاب کنين.
امروز می‌خوام طرز ساختن يه همچين وروجکی (که بش می‌گن image map) رو یـاد بدم.



۱. مرحله‌ی نخست: آماده کردن تصاوير
از اين ايده استفاده‌های زيادی می‌شه کرد. مثلا وقتی يه عکس گروهی رو روی وبلاگ يا سايت شخصيتون منتشر می‌کنين به جای اينکه بنويسين از راست به چپ اين xه اون yه می‌تونين از يه همچين تکنيکی استفاده کنين که جذاب‌تره یـا با این کار می‌تونین یه photo dictionary بسازین یا هزار تـا کار دیگه . همون طور که می‌بينين ما تصويری داريم که شامل چهار مدل گوشی موبايله (اين W800i منو کشته). بعد که شما با موشواره (به سبک جوتی: ماوس سابق، Mouse اسبق!) روی اين عکس می‌رين زرتی چهار تـا دايره اون زير میرا ظاهر می‌شه (تصوير دوم)؛ روی هر کدوم از دايره‌ها هم که برين مدل اون گوشی ثبت می‌شه. پس اولين کار اينه که شما تصاوير رو آماده کنين!

نکته: لازم به اين همه تصوير بازی نيست! شما می‌تونين کاری کنين که مثلا موقع hover شدن چهار تـا border محدوده‌ی مورد نظرتون رو فرا بگيره و از اين فنت [...] کلک بازی‌ها!

۲. مرحله‌ی دٌيم: نوشتن کدهای HTML
در اينجا ما از دو تگ dl و dt استفاده می‌کنيم:

کد:
<dl id="imagemap">
<dt><a id="title" href="#"></a></dt>
<dd><a id="w800i" href="hala har chi !!"></a></dd>
<dd><a id="d750i" href="hala har chi !!"></a></dd>
<dd><a id="k750i" href="hala har chi !!"></a></dd>
<dd><a id="t637" href="hala har chi !!"></a></dd>
</dl>


۳. مرحله‌ی سوم: کدهای CSS
رسيديم به مرحله‌ی اصلی کار که همون نوشتن کد CSSه.
- imagemap: اولین کار اینه که به مرورگر بگیم با لیست imagemap به عنوان یه بلوک برخورد کنه و اون رو به صورت inline یا list-item نمایش نده. این کار با استفاده از display: block; امکان پذیره. بعدش هم باید position این لیست رو به صورت relative تعریف کنیم ( با position: relative;). حالا باید طول٬ عرض و پس زمینه‌ی این بنده خدا رو تعیین کنیم. پیشنهاد می‌کنم طول و عرض این بلوک رو به اندازه‌ی عکستون در نظر بگیرین. کد نهایی برای imagemap این فنتیه:

کد:
 #imagemap {
display:block; 
width:515px; 
height:400px; 
background:url(mobilez.jpg); 
position:relative;
}
- همون طور که تو کد HTML می‌بینین ما چندتـا لینک با شناسه(ID)های مختلف تعریف کردیم چون می‌خوایم از ویژگی hover اون‌ها استفاده کنیم. اولین لینک واسه این تعریف شده که وقتی شما روی تصویر می‌رین تصویر دوم که زیر موبایل‌ها چهارتـا دایره قرار دارن ظاهر شه و نیز وقتی که روی یکی از دایره‌ها می‌رین مدل موبایلی که بالاشه!.
خصوصیت مشترک همه‌ی لینک‌ها اینه که به صورت بلوک تعریف شدن و position همگی absolute تشریف داره. پس می‌تونین یه جایی بنویسین #imagemap a {display: block; position: absolute;}.
حالا به نوبت لینک‌ها رو بررسی می‌کنیم. اولین لینک که با شناسه‌ی title مشخص شده:

کد:
a#title {
width:515px; 
height:0; 
padding-top:400px; 
overflow: hidden; 
left:0; top:0; 
background:transparent url(mobilez-on.jpg) no-repeat 570px 400px; 
cursor:crosshair;
}

توجه!: شاید بگین آخه مرتیکه مگه مرض داری height رو می‌صفرونی و از padding-top استفاده می‌کنی؟! در جواب باید بگم اگه این کار رو نکنین پیتزاتون به اندازه‌ی n پیکسل کش میاد! خودتون امتحان کنین تـا بهتر متوجه شین.​
حالا می‌ريم سراغ چهارتـا لينک باقی مونده:

کد:
 a#w800i, a#d750i, a#k750i, a#t637 {
width:25px; 
height:25px; 
padding-top:0px;
overflow:hidden; 
}

اولا overflow:hidden; محض محکم کاریـه نه چیز دیگه. اون طول و عرضی هم که می‌بینید برابر است با قطر دایره‌ها!
اما جدای از خصوصيات مشترک هر کدوم از اين لينک‌ها دارای يک سری ويژگی‌های فردی!! هم هستند که دونه به دونه می‌ريم سراغشون.
اول از همه W800i (جيگرک من!):
کد:
a#w800i {left:49px; top:290px; background:transparent url(w800i.gif) no-repeat 400px 800px;}
در اينجا با توجه به يه بلوک ۲۵ ¤ ۲۵ و با استفاده از top و left مکان لينک رو تعريف می‌کنيم (طوری که روی دايره ست بشه) با توجه به تصوير همه‌ی لينک‌ها يه top دارن!
اما ما می‌خوايم وقتی که روی دايره‌ی نارنجی رنگ می‌ريم اين تصوير ظاهر شه که اندازش خیلی بیشتر از ۲۵ ¤ ۲۵ه پس:

کد:
 a#w800i:hover, a#d750i:hover, a#k750i:hover, a#t637:hover {width: 95px; height: 25px; 
background-position: 0 0;}

و نیز:
کد:
a#w800i:hover {left: 15px; top:290px;}
و همين طور سه‌تـای دیگه:

کد:
a#d750i {left:183px; top:290px; background:transparent url(d750i.gif) no-repeat 400px 400px;}
a#d750i:hover {left: 153px; top: 290px;}
a#k750i {left:322px; top:290px; background:transparent url(k750i.gif) no-repeat 400px 400px;}
a#k750i:hover {left:294px; top:290px;}
a#t637 {left:463px; top:290px; background:transparent url(t637.gif) no-repeat 400px 400px;}
a#t637:hover {left:436px; top:290px;}


متأسفانه این کد تو اپرا کار نمی‌کنه :(
با روش‌هایی دیگه:
http://www.frankmanno.com/ideas/css-imagemap
http://evan.nixsys.bz/note/ Filed by S CH XOGOLO under CSS

http://blogz.xogolo.info/wn/9/
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
امروز بالاخره تصمیم گرفتم که در مورد Css هم یه چیزی بنویسم . از اونجائی که خیلی از سایتها و وبلاگها Css رو از پایه آموزش دادن بنابر این من تصمیم دارم یه سری تکنیک ها و ترفندها و یا به طور کلی یه سری Tutorial در مورد Css بنویسم و امیدوارم بتونم اون اطلاعاتی رو که در مورد CSS دارم به شما منتقل کنم . اولین موضوعی رو که در این باره دنبال می کنیم ساخت یه منو واسه قالب سایت یا وبلاگتون هست به مثال زیر دقت کنید :



menu.jpg

1- برای ساختن یه همچین منویی شما باید ابتدا کد های زیر رو توی قالب استایل شیت وبلاگ یا سایتتون قرار بدید و یا اینکه در قالب اصلی ما بین بذارید :

کد:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(images/menu3.gif);
padding: 8px 0 0 30px;
}
#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}

2- برای اینکه منو در سایت یا وبلاگ شما نشون داده بشه باید کدهای اچ تی ام ال زیر رو در ساید بارهای چپ یا راست و یا کلا هرجای قالب وبلاگ که خواستید قرار بدید :

کد:
<div id="menu3">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="#6" title="Download">Download Menu</a></li>
</ul>
</div>

توضیحات اضافه :

1- چنانچه قصد دارید نوع و اندازه و شکل متون روی منو ها رو تغییر بدید باید در کد زیر از مجموعه کدهای بالا تغییرات خودتون رو اعمال کنید :

کد:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

2- چنانچه قصد دارید تغییراتی در اندازه طول و یا خطوط دور منو ( Border ) و یا محل قرار گرفتن کل محل انجام بدید باید تغییرات رو در کد زیر اعمال کنید :

کد:
#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}
3- اگر می خواین اندازه عرض و نوع حالت متنها رو در حالت عادی تغییر بدید باید در کد زیر تغییرات رو اعمال کنید :

کد:
#menu3 li a {
height: 32px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 24px;
text-decoration: none;
}

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

کد:
#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(images/menu3.gif);
padding: 8px 0 0 30px;
}

5- اگر قصد همه تغییرات بالا در حالت فعال منو ( حالتی که ماوس روی منو ها باشه ) رو داشته باشید باید روی کد زیر کار کنید :

کد:
#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}

6- در نهایت اگه قصد دارید تعداد خانه های منو رو کم یا زیاد کنید باید به ترتیب با حذف یا اضافه کردن کد زیر به دومین کد بالا ( کد اچ تی ام ال ) این کار رو انجام بدین :

کد:
<li><a href="#1" title="Home">Home</a></li>


و در نهایت می تونید از این تصویر یا به سلیقه خودتون از هر تصویر دیگه ای ( باید برای دو حالت عادی و فعال طراحی کنید و اونا رو به یک تصویر واحد تبدیل کنید ) استفاده کنید :


menu3.gif

البته اینم بگم که واسه طراحی منوهایی مشابهه این می شه از راههای دیگه هم عمل کرد منتها مزیتی که این آموزش داره اینه که شما فقط از یه تصویر در این روش استفاده می کنید که طبیعتا ، هم باعث سریعتر لود شدن کل قالب و هم اینکه وقتی شما ماوس رو روی منو می برید دیگه لازم نیست تصویر بعدی لود بشه و با همین تصویر کار ما را می افته.


http://behrouz.bushehr.ws/?id=-684941607
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
اگر شما یک طراح وب هستید یا در این شاخه فعالیت می کنید، شاید تاکنون متوجه این مطلب شده باشید که در میان مرورگرهای متفاوت هر کدام به نحوی طرحتان را نمایش می دهند. برای مثال شما بادقت پیکسل ها را کم و زیاد و مو به مو تمام نقص ها را برای مرورگری مثل فایرفاکس برطرف می کنید. اما در هنگام ارائه طرحتان در یک مرورگر دیگر مثل اینترنت اکسپلرر، صفحات بهم می ریزند!
طراحی با CSS نیز از این قاعده مستثنا نیست. برعکس در بیشتر موارد به نظر می رسد مرورگرها بیشتر با طرح بندی برپایه جدول (table based layout) سازگارند. شاید یکی از این دلایل این باشد که هنوز چندین نام بزرگ در طراحی صفحاتشان از طرح بندی بر مبنای جدول بهره می گیرند.
برای حل این مشکلات بسیاری از طراحان CSS از تنظیماتی در کدهایشان بهره می گیرند که CSS Hack نام دارد. در واقع CSS Hack راهی است برای اینکه برخی از مرورگرها را مجبور کنیم تا کدهای css معینی را نادیده بگیرند. ما این کا را با قرار دادن کاراکترهای و نشانه های ویژه ای در فایل CSS تعریف می کنیم. برای مثال، یکی از بدترین حالات در هنگام طراحی با CSS، مدل جعبه ایی (Box model) است. IE5 و IE5.5 ویندوز در CSS1 این مدل را با گذاشتن لبه و لایه گذاری (border and padding) درون عرض مشخص شده بجای بیرون، به غلط تفسیر می کنند.
برای مثال کد زیر را در نظر بگیرید که بر اساس آن در همه مرورگرها برای عنصر header عرضی به پهنای 10em خواهیم داشت بجز IE5 که عرضی به پهنای 5em را بر می گرداند.
( IE5 دو مقدار padding و border را در هنگام برآورد طول در هم می آمیزد)


کد:
#header {
  padding: 2em; 
  border: 0.5em;
  width: 10em
}



راه حل این مشکل توسط جناب Tantek celik در اینجا حل شده است و باعث شده که وی به خاطر این هک در میان css کاران معروف شود. برای شناسایی مرورگر و ارسال دستور css متناسب با آن از شیوه زیر استفاده می شود:

کد:
#header {
  padding: 2em; 
  border: 0.5em;
  width: 15em; 
  voice-family: "\"}\"";
  voice-family: inherit; 
  width: 10em
}

نکته مهم در اینجاست که IE5 اولین مفدار برای عرض را بکار خواهد گرفت یعنی همان 15em. دقت کنید ما قصد داشتیم عرضی به پهنای 10em داشته باشیم اما چون در IE5 این مقدار به دلایل ذکر شده در فوق به 5em نزول می یافت مقدار را 15 کردیم تا با 5 تای کاسته شده مقدار مطلوب به دست آید. حال برای آنکه مقدار فوق (همان 15em) در مرورگرهای دیگر در نظر گرفته نشود مقدار عرض را پس از دوخط دستوری فوق برابر 10em در نظر می گیریم. با این کار در هر دو نوع مرورگر ما عرضی به پهنای 10em خواهیم داشت. این تنها یکی از موارد رفع این مشکل بود. راه های دیگری برای آن در اینجا عرضه شده است.
با وجود اینکه CSS Hack از این طریق بسیار ساده و کاراست اما در برخی موارد سبب می شود المان های موجود اعتبار خود را در W3C از دست بدهند. برای این منظور از یک زبان برنامه نویسی مانند PHP برای شناسایی مرورگر و ارسال کدهای CSS متناسب با آن استفاده می شود که حتما در مقالات آینده بدان خواهم پرداخت. منبع: خودم بعلاوه اینجا.

http://weblog.alvanweb.com/2005/07/15/css-hacks-preface/
 

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,813
لایک‌ها
9
در پست قبلی مقدمه ای در مورد CSS Hacks بیان شد، حال در این پست قصد داریم راه حل باکلاس و بسیار جالبی را به کمک php برای شناسایی مرورگر و ارسال کدهای CSS متناسب با آن ارائه کنیم. برای آنکه بتوانیم دستورات PHP را در یک فایل css بکار ببریم، نیازمند این هستیم که از طریق شیوه نامه پیوندی (Linked Stylesheet) محتویات فایلی با پسوند php را در برچسب head صفحه، به شکل زیر قرار دهیم:

HTML:
<link rel="stylesheet" href="styles.php" type="text/css" />


اکنون شما باید فایلی با نام styles.php در همان دایرکتوری که فایل صفحه تان قرار دارد ایجاد کنید. در اولین خط این فایل، با استفاده از تابع header نوع محتویات به صورت text/css تعریف می شود. هنگامی که این فایل در صفحه فراخوانی می شود اطلاعاتی از مرورگر کاربر به وسیله پارامترهای از پیش تعریف شده در php دریافت می شود و سپس کد css متناسب با آن مرورگر، ارسال خواهد شد. بدین منظور تابع detect را جهت شناسایی مرورگر، نسخه آن و پلتفرم (نوع سیستم عامل) به شکل زیر تعریف می کنیم:

PHP:
<?php
header("Content-type: text/css");
$d = detect();
$b = $d['browser'];
$v = $d['version'];
$o = $d['os'];
function detect()
{
$browser = array ("IE", "OPERA", "MOZILLA", "NETSCAPE", "FIREFOX", "SAFARI");
$os = array ("WIN","MAC","LINUX");
$info['browser'] = "OTHER";
$info['os'] = "OTHER";
foreach ($browser as $parent)
{
$s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);
$f = $s + strlen($parent);
$version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
$version = preg_replace('/[^0-9,.]/','',$version);
if ($s)
{
$info['browser'] = $parent;
$info['version'] = $version;
}
}
foreach ($os as $val)
{
if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT']))) $info['os'] = $val;
}
return $info;
}
?>


نترسید، کد بالا هیچ چیز عجیبی نداره، بجز چندتا پارامتر و دو سه تا حلقه و عبارت شرطی. کدهای رنگ رنگی زیادی شلوغش کرده. روی هر تابعی که کارش رو نمی دونید کلیک کنید تا توضیحاتش رو در سایت php ببینید یا هر جاش گیر کردین عنوان کنید تا توضیح داده بشه. تا اینجا پایه کار شکل گرفته و باقی امور به خلاقیت شما بر می گردد. برای نمونه همان مدل جعبه ای پست قبل را در نظر بگیرید. اینبار می خواهیم مشکل را با استفاده از تابعی که نوشتیم حل کنیم. به سادگی و با استفاده از یک عبارت شرطی if/else این کار به صورت زیر امکان پذیر است:



PHP:
#header {
padding: 2em; 
border: 0.5em;
width: <?php
if ($o == "WIN" && $b == "IE" && $v < 6) echo "15em;"
else echo "10em;";
}



حالا کد بالا یعنی چه؟ یه عبارت شرطی ساده است که اگر سیستم ما ویندوز بود و مرورگرش از نوع IE و نسخه اش از 6 کمتر بود مقدار عرض رو 15em لحاظ کن در غیر اینصورت 10em. دقت کنید که ما در این شرط از عملگر and (&&) استفاده کردیم، یعنی همه شروط باید درست باشند تا نتیجه داری ارزش TRUE شود. فکر کنم با این مثال متوجه سادگی و انعطاف پذیری در استفاده از php نسبت به استفاده از کاراکترهای ویژه و دستورات نامفهوم درکدهای css شده باشید. واسه همهینه که فریاد زدم برو php یاد بگیر.
مثال مفید دیگری را بررسی می کنیم. همان گونه که می دانید ورژن های قدیمی اکثر مرورگرها از تصاویر با فرمت png پشتیبانی نمی کنند. یعنی اگر برای پشت صحنه یک عنصر در صفحه تصویری با فرمت png تعریف کنیم، در مرورگرهای مذکور نمایش داده نخواهد شد. راه حل چیست؟ مرورگرهای قدیمی را از ذهنمان حذف کنیم؟ برای یک طراح حرفه ایی غیر ممکن است. چون هنوز هستن کسانی که ورژن اکسپلررشان 5 یا 5.5 است. حتما می گویید از فرم gif استفاده می کنیم. باز هم برای یک طراح حرفه ایی این کار دشوار است. زیرا امکانات چشمگیری در مورد تصاویر png نسبت به gif موجود است که از آنجمله می توان شفاف سازی بهبود یافته را نام برد.
حتما می گین من نمی فهمم شفاف سازی بهبود یافته یعنی چه همون gif خوفه گیر هم نده! بنده هم در جواب عرض می کنم که شفاف سازی بهبود یافته یعنی اینکه فایل های png بیشتر از آنکه بخواهند محدود به تنها یک رنگ برای ماسک های شفافیت باشند، می توانند تا 256 رنگ در یک ماسک استفاده کنند، بنابراین آنها لبه های شفاف خود را صاف و اثرات سایه را از بین می برند. قبلا مقاله ایی در مورد این دو نوع فرمت نوشته بودم. خلاصه اینکه نهایت کار این می شه که از کدهای css بهمراه php به شکل زیر اسفاده کنیم که نه سیخ بسوزه نه کباب:


PHP:
body {
background: url(<?php
if ($o == "WIN" && $b == "IE" && $v < 6) echo "background.gif";
else echo "background.png";
?>);
}


فکر نکنم نیازی به تحلیل کد بالا باشه. کاملا مفهومه! مثال ها و کاربردهای مفید زیادی در این زمینه وجود داره که توضیحاتش از حوصله من خارجه. برای تمرین بیشتر فایلهای اسکریپت مقاله را از اینجا دریافت کنید. مقاله ایی که خوندید از نوشته ی استاد David Hellsing در اینجا و اطلاعات ناچیز من در اینباره اقتباس شده بود.

http://weblog.alvanweb.com/2005/07/17/php-css-hacks/
 
وضعیت
موضوع بسته شده است.
بالا