CSS چيست؟ استايل (CSS) چيست؟ - CSS مخفف کلمه Cascading Style Sheets ميباشند. - اولين ورژن استايلها در سال ۱۹۹۶ ساخته شد. که اولين ورژن آن CSS1 بود. - ديگر وژن آن CSS2 مي باشد که در سال ۱۹۹۸ ساخته شد که بيشتر براي ويرايش صفحات، نحوه نمايشها تگها و ... کاربرد دارد. - فايل استايلها با فرمت CSS ذخيره ميشوند. انواع استايلها: ۱. Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت و به صورت زير نوشته خواهد شد. <tag style="Style Declarations"> Example: <p style="font-family: Tahoma">This is a paragraph</p> در مثال بالا با استفاده از حالتهاي مختلف در استايلها نوع فونت آنرا تغيير داديم و همانطوري که در تعريف اين نوع استايل نوشتم اين استايل فقط و فقط تغييرات را بروي همين پاراگراف اعمال خواهد کرد. ۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت، اينرا بين دو تگ (<head></head>) به صورت زير نوشته خواهد شد. <style> <!-- Style Declaration --> </style> Example: <head> <style type="text/css"> <!-- p { color: red; text-align: left; font-size: 8pt } --> </style> </head> اين نوع حالت از تغييرات تعريف شده بروي تمامي تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوينت خواهد بود. توجه داشته باشيد در اين مثال سه حالت مختلف يک استايل را براي تگ پاراگراف تعريف کرديم که با استفاده از ( حالتهاي مختلف آن از هم جدا شدند. اگر بخواهيد اين حالت نوشته شده را براي چند تگ ديگر اعمال کنيد مي توانيد تگها را بااستفاده از کاما (,) از هم جدا کنيد براي مثال: h1, h2, h3, h4 { color: gold; font-family: sans-serif } ۳. Linked or External style sheet: نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمت CSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود. <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 دخيره کرده و سپس با استفاده از فرمول بالا آن فايل را به قالب لينک دهيد. يکي از مزيتهاي اين نوع استايل اين ميباشد که مي توانيد با داشتن يک فايل استايل براي چندين صفحه استفاده کنيد و از ديگر مزيت هاي آن با اين کار کدهاي قالب را به چند فايل تقسيم کرده و قالب را منظم تر ميشود.
آشنایی با اصول کلی استایلها میتوان گفت که امروزه 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 همراه باشید.
فراخوانی یک استایل به یک صفحه فراخوانی یک استایل به یک صفحه گاهی اوقات شما چندین صفحه دارید که میخواهید استایل آنها یکی باشد. مسلمآ برای این کار شما باید وقت زیادی را صرف کنید تا برای هر صفحه، استایلها را وارد کنید. شما میتوانید یک فایل استایل را برای تمامی صفحات خود فراخوانی کنید. به این منظور، ابتدا در فایل موردنظر، استایلها را نوشته و سپس آن را با پسوند css ذخیره و برای استفاده بر روی وب، بالاگذاری (Upload) نمایید. سپس کد زیر را در قسمت head صفحه خود قرار دهید. link rel="stylesheet" type="text/css"<br /> href="mystyle.css" / نکته: در ابتدا و انتهای کد، دو علامت < و > قرار دهید! نکته: در صفحه استایلها، نیازی به شروع و پایان استایل با تگهای style و /style نیست.
Cascading Style Sheet استايل شيت ها يکي از مفيد ترين عنصر در وب ميباشند که يکي از مزيتهاي آن ساخت يک فايل و الگوي مشترک و استفاده آن در کليه صفحات سايت مي باشد. همين امر که از تکرار يک سري کد جلوگيري ميکند باعث محبوبيت اين عنصر در نزد طراحان وب شده است. با استايل شيت چه کارهايي ميتوانيد انجام دهيد؟ با اين عنصر شما ميتوانيد مدل، اندازه، رنگ و نوع آرايش متن ، رنگ زمينه و حاشيه صفحات و جدولها ، تنظيمات ليستها و همچنين عکسها را کنترل کنيد. تعيين الگو و 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=”آدرس فايل “> اين تگ نيازي به پايان دهنده ندارد.
متنهای سایهدار بدوننیاز به تصاویر font-size: ۳۵pt; font-weight: bold; font-family: 'Times New Roman'; /*width: ۱۵۰px;*/ height: ۵۵px; ******: blur(Direction=۲۷۰, Strength=۲۰); توضیح: از کدهای بالا باید در استایل استفاده کنید. مهمترین بخش استایل بالا، سطر پایانی آن است. در سطر پایانی از فیلتر blur استفاده شده و خصوصیات آن توسط Direction که زاویه سایه و Strength که اندازهی کشیدگی سایه را مشخص میکند، تعریف شده است. توضیح: رنگ سایه تابع رنگ خود متن است.
طراحی یک سایت بدون استفاده از جدول ها بیایید به روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر هر روز یه تگ جدید معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم استانداردی بنام W3C را تصویب کردند . در این زمان نیاز عمده ای حس میشد که محتویات سایت از طراحی جدا شود . در اینجا بود که سر و کله CSS پیدا شد و مسئولیت نمایش نمای صفحات را بعهده گرفت و XHTML نیز برای نمایش اطلاعات بگار گرفته شد . چرا باید بجای جدول از کد CSS استفاده کرد ؟ اول اینکه کد شما خیلی کوتاه تر میشه ، حتی نصف ! دوم اینکه سرعت لودینگ سایت شما بیشتر میشه . راحت تر تغییر مییابد : شما یک فایل CSS را تغییر می دهید و کل سایت شما تغییر می یابد . مطالب از قالب سایت میشود . در این مقاله شما یاد میگیرید چگونه بجای جداول از CSS وکلاس های آن استفاده کنید . ساخت کلاسی برای عناصر تگ <div> : اولین قدم ساخت کلاس CSS است که المنت های تگ <DIV> از آن استفاده میکنند . بصورت زیر : div.leftnav{ background: white; color: black; /* other display information here */ /* add Positioning information here */ } این کلاس بسیار ساده است و در اصل الان کاری انجام نمیدهد . فقط متن سیاه را روی زمینه سفید تعریف میکند . شما باید از این المنت در جایی از صفحه استفاده کنید . موقعیت یابی وابسته ساده : این بدین معناست که ما فقط هر عنصر را در موقعیتش قرار میدهیم و بدین تعریف کردن جای دقیق آن در صفحه . div.leftnav{ background: white; color: black; /* Other display information here */ width: 15%; } خوب . ما چه انجام دادیم ؟ ما گفتیم که هدایتگر چپ باید در سمت چپ باشه ، جاییکه در صفحه قرار میگیرد . این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت یابی مطلقی نیاز داشته باشید . همچنین این خیلی مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت نمایی اصلی نیست . تمام چیزی که تعریف کردید Width بود . بنابرین یک المنت با پهنای 15% ساخته خواهد شد . موقعیت نمایی مطلق . اضافه کردن border و margin : موقعیت نمایی مطلق به معنای این است که شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند . اینکار با تعریف خاصیت های top , bottom, left , right امکان پذیر میشود : 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 تعریف شده، این کافیه ! نیازی نیست که شما تمامی تمام خاصیت هایش را تعریف کنید . اما برای انعطاف پذیری بیشتر ممکنه خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما بخواهید یک منو در سمت راست اضافه کنید: 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 ها برای این امر مناسبند . اما صفحه خود را در مرورگر های مختلف تست کنید تا نتیجه درستی دریافت کنید . و حال طرز ساخت حاشیه ها: 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 ها در وسط قرار دهید . 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 برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است : <div class = "leftnav"> // Insert Links </div> همانطور که می بینید خیلی ساده اینکار انجام شد و بیشتر کار در فایل CSS انجام میشود . شما میتوانید از تگ DIV در هرجای صفحه استفاده کنید . در انتها اینجا یک صفحه XHTML ساده را می بینید که کد css آنرا سافته و نمای آن سه ستون دارد : <div class = "content"> // Content </div> <div class = "leftnav"> // Links </div> <div class = "rightnav"> // Links </div>
آموزش استایلها 2 فونتها و خواص آنها: ۱. خانواده فونتها (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 }
روش ساخت ناوبر برای وبلاگ ها و وب سایت ها یادمه تابستون دو سال پیش بود که کتاب 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 ذخیره کنید و با مرورگرتان نتیجه کار را ببینید. Code: <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 اعمال می کنیم. Code: <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:amirfs@gmail.com">Email</a></li">mailto:amirfs@gmail.com">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 را بیشتر کنید تا تو یه خط جا شوند. Code: #Button { width: 300px; font-size:10px; font-family:tahoma; margin-top:10px; }} کد ها را دوباره ذخیره کنید و نتیجه را ببینید. به بولت های سمت چپ نگاه کنید. چنین بولت هایی برای ما که قصد داریم با استفاده از این کد ها دکمه های ناوبر درست کردیم, چندان مناسب نیست. پس با اضافه کردن این کد به استایل آن بولت را حذف می کنیم. دقت کنید این کد را در همان محدوده استایل اضافه کنید. Code: #Button Ul{list-style: none;} حالا با توجه به اینکه دکمه های ناوبر ما باید خطی کنار هم قرار بگیره. کافیه به css بگیم که این لیست رو خطی نشون بده. برای این کار به #Button Li کد نمایش خطی رو اضافه کنیم. Code: #Button li { DISPLAY: inline; } حالا نتیجه را مجددا مشاهده کنید.می بینید که براحتی تونستیم این دکمه ها رو خطی کنیم. اگه نتیجه کار خیلی راضی تون نمی کنه. زیاد ناراحت نشید. چون با چند تا اضافه کردن آی دی اون قضیه هم حل میشه. بنابراین اصل تکنیک همینی بود که تا اینجا گفته شد. حالا در ادامه سعی می کنیم دکمه ها رو به شکل زیبایی در بیاریم. با توجه به اینکه محتویات هر یک از این دکمه ها یک لینکه, سعی می کنیم کاری کنیم که هر لینک در داخل یک کارد قرار بگیره. درست شبیه وبلاگ خودم. البته رنگ کادر دور این دکمه خیلی کمرنگه باید خوب نگاه کنید. برای این کار این آی دی را به بخش استایل ها اضافه کنید. Code: #Button li a } padding: 5px; border: 1px solid #DAE0D2; color: #000000; font-weight:bold; text-decoration: none; { برنامه دوباره اجرا کنید. تنها چیزی که مونده اینکه کاری کنیم با حرکت موس بر روی این دکمه رنگشون عوض شه. ما می خواهیم با حرکت موس رنگشون سبز کمرنگ شه. Code: #Button li a:hover { border: 1px solid #f3f3f3; background-color: #f3f3f3; color: #000000; {
کار کردن با زمينه و رنگها خواص رنگها: رنگها را مي توان به چند حالت در استايلها تعريف کرد. براي مثال: Code: body { color: teal } body { color: #008080 } body { color: rgb(0, 128, 128) } body { color: rgb(0%, 50%, 50%) } همانطوري که در بالا مشاهده کرديد به چهار روش مي توانيد رنگها را تعريف کنيد. در روش اول شما مي توانيد اسم رنگهايي که توسط HTML پشتيباني ميشوند را بنويسيد. در روش دوم رنگها را به صورت اعداد هگزا استفاده شده اند و در دو روش بعد که مقادير سه رنگ قرمز، سبز و آبي را به صورت ارقام و درصد استفاده شده اند. کنترل کردن تصاوير در زمينه: براي نمايش عکس در زمينه و يا جاهاي بخصوص مي توانيد از فرمول زير استفاده کنيد: Code: background-image: url(IMAGE) در اينجا IMAGE آدرس عکس ميباشد براي مثال: Code: B { background-image: url(d:\tem\images\bold_bg.gif) } در مثال بالا شما زماني که تگ BOLD به کار برديد عکس زمينه براي آن تگ bold_bg.gif خواهد بود. تکرار عکس در صفحه: Code: background-repeat: repeat_value در اينجا مقدار repeat_value مي توان گزينه هاي از قبيل repeat, repeat-x, repeat-y, no-repeat باشند. مثال: Code: 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ها (عمودي)، و ۴. بدون تکرار ميباشد. که به صورت شکل زير ميباشند. http://webriz.com/no/index.php?q=aHR0cDovL2JvbGdoYW4uY29tL3Rvb2xzL0FydG ljbGVzL2Nzcy9pbWFnZS9iZ19jc3MuanBn موقيعت عکس در زمينه: در مبحث قبلي شما مي توانستيد عکس را به چهار صورت نمايش دهيد حال اگر بخواهيد موقيعت عکس را در صفحه نمايش دهيد مي توان از فرمول زير استفاده کنيد: Code: background-position: horizontal_value vertical_value به جاي horizontal_value, vertical_value مي توان از عدد، درصد، و يا اسم جهتهاي top, center, bottom, right, left استفاده کرد. براي مثال: http://webriz.com/no/index.php?q=aHR0cDovL2JvbGdoYW4uY29tL3Rvb2xzL0FydG ljbGVzL2Nzcy9pbWFnZS9iZ19wb3N0aW9uX2Nzcy5qcGc%3D شناور شدن متن بروي عکس: براي اينکار مي توانيد از فرمول زير استفاده کنيد: Code: background-attachment: attach به جاي کلمه attach مي توان از scroll و يا fixed استفاده کرد. در حالت اول که به صورت پيش فرض ميباشد و در حالت دون متن بروي تصوير شناور ميباشد. فرمول کلي براي زمينه (background) به صورت زير ميباشد: Code: background: background-color background-image background-repeat background-attachment background-postion براي مثال: Code: body { background: balck url(d:\tem\images\eagles.jpg) no-repeat fixed center center } در مثال بالا رنگ زمينه سياه، و عکس eagles.jpg در وسط صفحه قرار خواهد گرفت که بدون تکرار ميباشد و متن بروي اين عکس شناور خواهد بود. * منظور از شناور بودن متن بروي عکس اين ميباشد که عکس ثابت و متن بروي آن حرکت مي کند اما در حالت پيش فرض عکس به اندازه ارتفاع متن تکرار ميشود.
نسخه مخصوص چاپ با CSS برای نمایش سایتها رسانه های گوناگونی وجود دارد که هر یک خصوصیات خاص خود را دارند. و شما به عنوان یک طراح وب یا مدیر سایت میتوانید نحوه نمایش سایت را در این رسانه ها کنترل کنید و ازنمایش صحیح سایت در هر یک از این رسانه ها مطمئن باشید. یکی از این رسانه ها چاپ است. اگر شما صاحب سایت مرجعی هستید یا مقالات و محتوای متنی زیادی در سایت شما وجود دارد و کاربران حق چاپ این مطالب را دارند قطعا تمایل دارید که نسخه قابل چاپ مناسبی به کاربران خود ارائه کنید. طراحان و توسعه دهندگان وب روشهای گوناگونی برای ایجاد نسخه مناسب چاپ برای وب سایتها دارند. با استفاده از برنامه های سمت سرویس دهنده و یا با شیوه نامه های چاپ ! بله شما با استفاده از CSS میتوانید نمایش سایت خود را در هر رسانه ای کنترل کنید. چاپ جزو رسانه های ایستا است و مطالب بعد از چاپ قابل تغییر نیستند. و قطعا در نسخه چاپ شده از سایت شما بخشهای زیادی هستند که معنی خود را از دست میدهند. به عنوان مثال تبلیغاتی که صرفا برای کلیک کردن در نظر گرفته شده ، عناصر گرافیکی صفحه و تصاویر متحرک نمایشی ، منوهای مختلف سایت و یا هر عنصری که مناسب چاپ نیست. و لازم است که این موارد از نسخه مخصوص چاپ شما حذف شوند. و شما مطالب مورد نظر را در یک ستون واحد و با رنگ زمینه و اندازه فونت مناسبی داشته باشید. و حالا چطور این موارد را اجرا کنیم ؟ قبل از توضیح مراحل انجام لازم به تذکر است که اگر سایت شما بر اساس استانداردهای وب طراحی شده و بخش نمایشی (Presentation) توسط CSS کاملا از بخش ساختاری (Structural) سایت جدا باشد شما با کمترین زحمت و در کوتاه ترین زمان میتوانید نسخه مخصوص چاپ داشته باشید. http://webriz.com/no/index.php?q=aHR0cDovL3dlYmxvZy5jb3JlbGlzdC5uZXQvd3 AtaW1hZ2VzL3NtaWxpZXMvaWNvbl93aW5rLmdpZg%3D%3D مراحل کلی از این قرار است : نمایش و دسته بندی بخشهای مختلف سایت جدا کردن عناصر دربرگیرنده مطالب مخفی کردن کردن عناصر و بخشهای اضافی توسط CSS شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با 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 بخشهای دیگر را مخفی کنید. شما باید تک تک عناصر اضافی را حذف کنید : Code: #header, #sidemenu, #footer , .ads { display: none; } و این برای حالتی بود که شما از CSS استفاده کردید ! و اگر غیر از این است کار شما کمی پیچیده تر میشود و باید با استفاده زیرکانه از CSS Selectorها عناصر مورد نظر را تحت تاثیر قرار بدهید : مثلا این Selector دومین سلول جدول در اولین ردیف از سومین جدول داخل صفحه را در حالی که اولین و دومین سلولهای جدول قابل نمایش و سومین سلول مخفی هستند را تحت تاثیر قرار میدهد ! Code: 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 حل کنید ! شما میتوانید آدرس لینکهای داخل صفحه را در کنار مطلب خود داشته باشید و یا عنوان کامل کلمه اختصاری را . به این مثال توجه کنید :… Code: some texts as paragraph text here … و یا… Code: Tim Berners lee is the inventor of web and the main W3C Leader … شما میتوانید از طریق CSS به این شکل متن را برای چاپ اصلاح کنید : Code: acronym:after, abbr:after { content: " ( " attr(title) " ) "; font-size: smaller; color: #666666; } a:after { content: " ( " attr(href) " ) "; font-size: smaller; color: #666666; } و میتونید این آدرس را کمی کوچکتر از متن اصلی و کمرنگتر نمایش بدهید. که متنی شبیه به این خواهید داشت : Code: some texts as paragraph (http://example.com) text here وTim Berners lee is the inventor of web and the main W3C (World Wide Web Consortium) Leader در این مطلب سعی شد که شما با اصول کار آشنا شده و یک نمونه ساده از نسخه مخصوص چاپ داشته باشید. ادامه کار به سلیقه شما بستگی دارد. CSS یاد بگیرید و بهترین نسخه چاپ را درست کنید.
