واضح آرشیو وب فارسی:سایت ریسک: t=5155">CSS AmiraliOnline 12 آذر 1382, 14:48سلام. كي مي تونه يكم در مورد سي اس اس برام توضيح بده؟ واقعاٌ به درد مي خوره و كار رو ساده مي كني؟ :?: با تشكر Scorpio 12 آذر 1382, 16:00CSS مخفف کلمات زیر است Cascading Style Sheets. Style ها مشخص میکنند که عناصر HTML چگونه نمایش داده شوند. Style ها معمولا در Stlye Sheet ها قرار میگیرند. Style ها برای برطرف کردن مشکلات HTML 4.0 بوجود آمد. External Style Sheet ها میتوانند حجم زیادی از کارها را صرفه جویی کنند. External Style Sheet ها را میتوان در فایلهای CSS ذخیره کرد. چند تعریف از Style ها را میتوان در یک تعریف مجتمع کرد. Style ها مشکلات معمول را حل میکنند. تگهای HTML معمولا برای طراحی متن ها بکار میروند. مثلا برای آنکه مشخص کنند که قسمتی از یک متن سرتیتر ، یا پاراگراف ، یا یک جدول است از تگ های <h1> , <p> , <table> استفاده میکند. پیش فرض آن است که طرح متن توسط براوزر بدون توجه به شکل تگ ها حفظ میشود. به تدریج که برازرهای Internet Explorer و Netscape شروع به اضافه کردن پارامترهایی به تگ های HTML نمودند بتدریج روز به روز تولید صفحاتی که بسادگی طرح یک متن را نمایش دهد دشوارتر میشد. برای حل این مشکل کنسرسیوم اینترنت(World Wide Web Consortium W3C) که مسئولیت استاندارد سازی HTML را به عهده دارد CSS را معرف نمود. CSS در HTML 4.0 پشتیبانی میشود. هم IE 4.0 به بعد و هم Netscape 4.0 به بعد از CSS پشتیبانی میکنند. CSS در کار طراحی صفحات وب صرفه جویی میکند. Style ها مشخص میکنند که عناصر HTML چگونه نمایش یابند، دقیقا مانند پارامترهای تعدادی از تگ های مانند Font که در میتوانند رنگ و یا سایر خواص یک نوشته را تغییر دهند. معمولا Style ها در فایلهایی جدای از فایلهای HTML ذخیره میشوند. CS های خارجی شما را قادر میسازند که ظاهر طرح صفحات وب را تنها با تغییر یک فایل CSS تغییر بدهید. مثلا اگر بخواهید فونت یا رنگ تمام سرتیترهای صفحات وب خودتان را تغییر بدهید در اینصور پی خواهید برد که استفاده از CSS چقدر در وقت و کار صرفه جویی خواهد کرد. CSS طراحی صفحات وب را متحول نمود، چون به طراحان این امکان را داد که طرح صفحات خود را یکجا تغییر دهند. بعنوان یک طراح صفحات وب ، میتوانید Style مربوط به هر عنصر HTML را تعریف کنید و آنرا به تمام صفحاتی که میخواهید اعمال کنید. برای ایجاد تغییرات عمومی( در تمام صفحات) بسادگی میتوان فایل CSS را تغییر داد و بطور اتوماتیک این تغییر در تمام صفحات وبی که از آن فایل CSS استفاده میکنند اعمال میگردد. چند Style در یکی CS این امکان را فراهم میکند که تعاریف با روشهای مختلفی تعریف شوند. Style ها را میتوان در داخل عناصر HTML تعریف نمود. در داخل عنصر <head> یک صفحه HTML یا در یک فایل خارجی. حتی چندین CS را میتوان در داخل یک صفحه HTML استفاده کرد. روش Cascade هنگامی که بیشتر از یک Style برای یک عنصر HTML تعریف شده است ، کدام Style استفاده خواهد شد؟ در حالت عمومی میتوان گفت که تمام تعاریف بصورت آبشاری (Cascade) بر اساس اولویت های زیر در نظر گرفته خواهند شد: 1- آنچه براوزر خود بعنوان پیش فرض در نظر میگیرد. 2- Style Sheet های خارجی 3- Style Sheet های داخلی ( تعریف شده در داخل تگ <head>) 4- Style های هر خط ( تعریف شده در داخل عناصر HTML) بنابراین یک Style که در داخل یک عنصر تعریف میشود کمترین اولویت را دارد و بوسیله CS های داخلی و خارجی و آنچه که پیش فرض براوزر است لغو میشود. قالب CSS CSS از سه بخش تشکیل شده است. که به ترتیب عبارتند از بخش انتخابگر(Selector) و خاصیت (Property) و بخش مقدار (Value) selector {property: value} بخش سلکتور در واقع نام یکی از عناصر یا تگهای HTML است که میخواهیم یکی از خواص آنرا تغییر دهیم. بخش خصوصیت نیز اشاره به آن خصوصیتی دارد که ما میخواهیم مقدار آنرا تغییر دهیم. توجه کنید که عبارت property , value داخل علامت آکلاد قرار داردند و با یک علامت : از هم جدا میشوند. body{color: black} اگر قسمت مقدار از چندین کلمه ساخته شده باشد باید آنرا در میان جفت علامت " " قرار دهیم مانند مثال زیر: p{ font-amily: "sans serif"} توجه : اگر بخواهید بیش از یک خاصیت را تغییر دهید بایسیتی بین خواص با علامت ; آنها را از هم جدا کنید. مانند مثال زیر: p {text-align:center;color:red} برای آنکه تعاریف را خواناتر کنیم و ظاهری زیباتر به شکل نوشتاری بدهیم میتوانیم تعریف را به شیوه زیر نیز بنویسیم : p { text-align: center; color: black; font-family: arial } تعریف گروهی : میتوانیم گروهی از سلکتورها را باهم تعریف کنیم. برای اینکار نام هر سکلکتور را نوشته وبعد از آن یک علامت کاما (,) قرار میدهیم. مثلا در مثال زیر رنگ همه تگهای header استفاده شده در به رنگ سبز تنظیم میکنیم : h1,h2,h3,h4,h5,h6 { color: green } کلاس سلکتورها : گاه لازم میشود که برای یک تگ یا عنصر HTML چندین نوع تعریف را ارائه دهیم. در این حالت از کلاس استفاده میکنیم. مثلا تصور کنید که میخواهیم دو نوع پاراگراف در صفحه وب خود تعریف کنیم. یک نوع از این پاراگرافها راست چین و دیگری وسط چین باشد در این صورت تعریف را بشکل زیر انجام میدهیم : p.right {text-align: right} p.center {text-align: center} سپس به روش زیر از این تعاریف در طراحی صفحه وب استفاده میکنیم. <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p توجه : به همراه هر تگ میتوان تنها از یک کلاس استفاده کرد. بنابراین تکه برنامه زیر اشبتاه است. <p class="right" class="center"> This is a paragraph. </p> نکته جالب توجه دیگری که وجود دارد این است که میتوان از نام تگ صرفنظر کرد در صورتی که بوسیله تمام عناصر HTML از آن استفاده شود. در مثال زیر تمام عناصر HTML به همراه عبارت class="center" در وسط صفحه قرار خواهد گرفت. .center { text-align: center} در تکه برنامه زیر هر دو عنصر h1 وه همچنین p از عبارت class="center" استفاده میکنند این به معنای آن است که هر دو دستور از دستور .center استفاده میکنند. <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> مشخصه سلکتور id selector سلکتور اختصاصی مشخصه سلکتور نوع دیگری از سلکتور است! در حالی که یک سلکتور میتوان به چندین دستور اعمال گردد. اما یک مشخصه سلکتور تنها میتواند به یک عنصر اعمال گردد. یک مشخصه باید در تمام یک متن مقدار منحصر بفردی داشته باشد. در style زیر یک تگ p را با مشخصه "para 1" منطبق میکند : p#para 1 { text-align: center; color: red } در عبارت زیر style اولین عنصر را با مشخصه "wer345" انطباق میدهد. *#wer345 {color: green} *** دستور بالا منطبق میشود با عنصر h1 : <h1 id="wer345">Some text</h1> دستور پایین یک عنصر p را با مشخصه "wer345" انطباق میدهد. p#wer345 {color: green} تعریف بالا با عنصر h2 منطبق نمیشود: <h2 id="wer345">Some text</h2> توضیحات در CSS: در مابین کدهای نوشته شده ی CSS میتوان توضیحاتی هم برای کمک به خواناتر کردن کد استفاد کرد. برای اینکار از جفت علامت /* */ میتوان استفاده کرد. هرچیزی که مابین این دو علامت نوشته شود توسط براوزر نادیده گرفته میشود : /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial } خوب ديگه انگشت هام داره قري وري ميره :wink: :lol: بر گرفته شده از مجله كامپوتر (تهیه کننده : بختیار ناهید ) موفق باشيد علي AmiraliOnline 12 آذر 1382, 21:00خيلي خيلي خيلي ممنون!!!!! :wink: :D مهرداد سماوات 25 آذر 1382, 17:45خيلي عالي بود ممنون guitarpro 24 اسفند 1382, 01:49دستت درد نکنه عالی بود
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 414]