کارگاه آموزشی توسعه وب

کارگاه آموزشی توسعه وب بخش دوم - CSS ارائه: عباس نادری انجمن علمی دانشجویی مهندسی کامپیوتر دانشگاه شهید بهشتی نسخه 1

تعاریف CSS چیست ؟

CSS چیست؟ • CSS یا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است. • معمول ترین استفاده CSS برای قالب بندی اسناد وب (HTML) منظور می شود. • با پیچیده شدن وب ها، تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل گردد. • CSS سه نسخه اصلی دارد: • CSS 1: در سال 1996 توسط W3C استاندارد شد. • CSS 2: در سال 1998 توسط W3C استاندارد شد و هنوز به عنوان استاندارد بکار می رود. • CSS 3: هنوز در دست توسعه توسط W3C است. • CSS به دلیل امکان استفاده مجدد، به شدت توسعه وب را ساده و سریع می کند. همچنین قالب بندی صفحات با استفاده از آن در قالب تیمی مقدور خواهد بود. • CSS از طریق انتخابگرها قالب بندی را سرعت می بخشد. همچنین از موتور انتخابگر CSS در کاربردهای دیگر بهره فراوان برده می شود.

اصطلاحات • Layout Engine: برنامه ایست در کاوشگرها که سند HTML و فایل CSS را دریافت کرده، خروجی گرافیکی بر روی صفحه تولید می نماید. • Selector Engine: موتوریست بر روی کاوشگر که زیرمجموعه ای از برچسب های HTML را انتخاب می کند.

CSS Syntax • CSS گرامر بسیار ساده ای دارد، با چند مثال آنرا بررسی می کنیم: Template: Selection { Property: value; Property: value; //Comment /*Comment */ } Example: div.main { background-color:#777777; border-width: 1px; border-style: solid; font-family: ‘Tahoma’; }

CSS Syntax (ادامه) • CSS جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد. • در سه جای مختلف می توان از CSS استفاده کرد: • فایل های CSS: می توان CSS را در فایلی جداگانه نوشت و آنرا در HTML افزود. • برچسب های Style در داخل فایل HTML: می توان با افزودن برچسب Style در Head یا Body یک سند، CSS تعریف کرد. • صفت Style برای برچسب ها: می توان در یکی از صفتهای هر برچسب، CSS آنرا تعریف کرد. در این حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود. • سه نوع تعریف CSS می توانند همزمان باشند. اولویت آنها به ترتیب افزایش می یابد. • استفاده از حالت سوم (InlineCSS) توصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می برد، اما در جاهای خاصی استفاده از آن کار را راحتتر می کند.

مثال نحوه های استفاده • تعریف در فایل CSS جدا و استفاده از آن در HTML: //SomeFile.css input[text] { width:200px; background-color:#000000; border:solid 0px; }  <head> <link rel="stylesheet" href=“SomeFile.css" type="text/css" /> </head>

مثال نحوه های استفاده (2) • تعریف CSS در بدنه سند HTML: <head> <style> Div { color:#ff0000; text-align:center; } P { font-size: 16px;} </style> </head>

مثال نحوه های استفاده (3) • تعریف CSS در صفت یک برچسب: <div style=‘background-color:black;color:white;’> <p style=‘font-family:tahoma;’> This is some text with tahoma font </p> </div>

انتخابگر چگونگی انتخاب برچسبها

انتخابگر چیست؟ • براي مشخص كردن اينكه يك CSS به كدامين اشياء يك صفحه اعمال شود، بايد از انتخابگرها استفاده نمود. هر انتخاب گر يك يا چند شيء در يك صفحه HTML را انتخاب مي كند و سپس مي توان قالب هاي مورد نظر را به آن اعمال كرد. • انتخابگرهاي CSS تنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع شوند آنها را بررسي خواهيم كرد. • انتخابگر ها در دو نحوه اوليه تعريف CSS ها قابل استفاده هستند به قالب زير: SelectorStatement { Css Properties & Values; }

انواع انتخابگرها انتخاب تمام برچسب ها :‌ * انتخاب برچسب هاي خاص: tagName انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگر: ParentTag DescendantTag انتخاب برچسبي از فرزندان يك برچسب ديگر : ParentTag > ChildTag انتخاب برچسبي بعد از يك برچسب ديگر: Tag1 + Tag2 انتخاب برچسبي با صفتي خاص: Tag[attrib=“value”] آنتخاب يك برچسب در وضعيت هاي خاص: Tag:hover برچسبي كه ماوس رويش است Tag:activeبرچسب درحال كليك Tag:focusبرچسب فعال صفحه Tag:link لينك ديده نشده Tag:visitedلينك ديده شده

صفات عمومي • همانطور كه قبلا ذكر شد، هر بچسب در HTML مي تواند صفات خاصي را داشته باشد. صفاتي كه در CSS به ما كمك مي كنند، دو صفت class , id هستند. با اختصاص دادن اين دو صفت به يك برچسب در HTML مي توان ويژگيهاي CSS آنرا به سادگي كنترل كرد. • با تعريف يك كلاس خاص براي برچسبي ، مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSS مشترك خاصي بر روي همگي آنها اعمال شود. • با تعريف يك مشخصه منحصره (Unique Identifier) براي يك برچسب، مي توان كنترل هاي خاصي از طريق CSS‌و جاوااسكريپت بر روي آن برچسب اعمال كرد. • بايد توجه گردد كه id هيچ دو برچسبي در يك سند HTML‌نبايد يكسان باشند، در غير اينصورت نتايج قابل پيش بيني نخواهد بود.

مثال انتخابگرها * { font-family: “Tahoma”, “Trebuchet”,”MS Sans Serif” } div.Container { background-color:#777777; border-width: 1px; } P#title { font-weight:bold; } H1 + P { font-style:italic; } input [type=‘button’] { border-style:none; } Body Form > input[type=‘text’] { text-align:center; } DIV P * [title] { color:#ffffff; }

دسته بندي انتخابگرها • براي اينكه CSS خاصي را به چند انتخابگر يكجا اعمال كنيم، مي توانيم آنها را به صورت گروهي قرار دهيم: div.Container , p , input[type=‘text’] { font-family: ‘Tahoma’, ‘Comic Sans MS’ ; } • در صورتي كه چند دستور يكسان CSS به يك برچسب خاص اعمال شوند، آخرين آنها باقي مي ماند. • CSS‌با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط Client) را به Property ها اعمال كند: Width: expression( document.width /2 )px;

مشخصه ها مشخصه هاي استاندارد CSS 2

Background • Background : خلاصه اي براي تنظيم تمام مشخصات Background • Background-Attachement (scroll,fixed) : وضعيت قرارگيري تصوير در Background، در صورتي كه fixed‌باشد، با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد. • Background-color (RGB Value) : رنگ پشت صفحه • Background-image: يا مقدار none مي گيرد و يا با استفاده از URL(adress)‌يك آدرس فايل تصويري (آدرس وب) • Background-position: مقاديري مانند top left, center center , … • Background-repeat: در صورتي كه از تصوير استفاده شود، روش تكرار آنرا مشخص مي كند. مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat

Border • Border: خلاصه اي براي تنظيم مشخصات حاشيه، به ترتيب عرض، نوع و رنگ مي گيرد. • Border-width: عرض حاشيه (ضخامت آن) به عدد، درصد و واحد هاي ديگر اندازه • Border-color: رنگ حاشيه به RGB • Border-style: نوع حاشيه از مقادير none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset • براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (بالا، پايين، چپ، راست)‌مي توانيد از چهار ويژگي بالا به همراه نام طرف مورد نظر استفاده نماييد، براي مثال: • Border-left-width • Border-top-color • Border-bottom

Classification • Cursor: شمايل اشاره گر ماوس را معين مي سازد، مقادير مجاز عبارتند از url(file), auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , n-resize, se-resize, sw-resize, s-resize, w-resize , text, wait , help • Display: نحوه نمايش يك برچسب، مقادير مجاز عبارتند از none, inline, block, list-item, run-in, compact, marker, table, inline-table , …. • Float: گرايش و شناوري يك برچسب به طرفي خاص، مقادير مجاز عبارتند از left, right, none • Position: نحوه قرارگيري يك برچسب در يك سند، مقادير مجاز عبارتند از Static, Relative, Absolute, Fixed

Dimension • Height: ارتفاع يك برچسب در سند. مشخصه اندازه اي • Line-Height: فاصله بين دو خط متن در سند • Max-Height: حداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد • Min-Height: حداقل ارتفاع يك برچسب • Width: عرض يك برچسب • Max-Width: حداكثر عرض يك برچسب • Min-Width: حداقل عرض يك برچسب

Font • Font: ميانبري براي اعمال مشخصات كامل فونت و قلم • Font-Family: نام قلم، بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود. معمولا نوشته هاي فارسي با قلم Tahoma خوب نمايش داده مي شوند. • Font-Size: اندازه قلم. هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز باشد xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger • Font-Stretch: كشيدگي فونت (فاصلي افقي مابين حرفهاي آن)‌يا مقدار عددي يا يكي از مقادير normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded • Font-Style: يكي از مقادير Normal, Italic, Oblique • Font-Weight: يكي از مقادير normal, bold, bolder, lighter و يا مقدار عددي

List & Marker • List-Style: ميانبري براي تنظيمات ليست. به ترتيب، نوع ، موقعيت و تصوير ليست را مي گيرد • List-Style-Image: none , url(file) • List-style-Position: inside, outside • List-Style-Type: شكل موارد ليست، موارد مجاز عبارتند از none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha • Marker-Offset: فاصله علامت از نوشتار (مقدار يا auto)

Margin & Padding • Margin: ميانبري براي تنظيمات كناره. به ترتيب اندازه كناره هاي بالا، راست، پايين و چپ را مي گيرد (ساعتگرد) • Margin-left, Margin-right, Margin-top, Margin-bottom: مقدار كناره، مقدار يا auto • Padding: ميانبري براي تنظيم مشخصات لايي گذاري، به ترتيب بالا، راست، پايين و چپ • Padding-left, Padding-right, Padding-top, Padding-bottom: مقدار لايي گذاري، مقدار يا auto

Outline • Outline: ميانبري براي تمام تنظيمات خط حاشيه، به ترتيب رنگ، نوع و عرض • Outline-color: رنگ خط حاشيه به RGB • Outline-style: نوع خط حاشيه يك شيء، انوع مجاز عبارتند از none, dotted, dashed, solid , double , groove, ridge, inset, outset • Outline-width: قطوري خط حاشيه، مقدار عددي يا يكي از مقادير thin, thick, medium

Positiontion • Overflow: در صورتي كه محتويات يك برچسب در آن جاي نگيرند، اين مشخصه معين مي سازد كه چه اتفاقي بيافتد. مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll • Position: نحوه قرارگيري برچسب نسبت به سند، مقادير مجاز عبارتند از Static, Relative, Absolute, Fixed • Vertical-Align: نحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند. مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom, text-bottom و يا مقدار عددي • Z-Index: اولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها). Auto يا يك عدد

Table • Border-Collapse: معين مي سازد كه حواشي جداول جدا باشند و يا يك مجموعه خط بهم پيوسته باشند. مقادير مجاز Separate , Collapse • Border-Spacing: فاصله ميان دو حاشيه جدول، تنها در صورتي كه Seperate باشد. • ٍEmpty-Cells: مشخص مي كند كه سلول هاي خالي در مدل Seperate نمايش داده شوند و يا خير. مقادير مجاز Show/Hide • Table Layout: الگوريتم نحوه نمايش سلولهاي يك جدول، Auto/Fixed

Text • Color: رنگ يك متن را مشخص مي سازد، RGB • Direction: جهت متن (و محتويات)‌يك برچسب را مشخص مي سازد، مقادير مجاز LTR/RTL • Text-Align: مقادير مجاز Left, Right, Center, Justify • Text-Decoration: افزودن افكتي به متن، مقادير مجاز عبارتند از none, underline, overline, line-through, blink • Text-Indent: تو رفتگي اولين خط يك متن. مقدار عددي • Word-Spacing: فاصله ميان لغات يك متن، normal يا مقدار عددي • Letter-Spacing: فاصله ميان حروف يك متن، normal يا مقدار عددي

نكات تكميلي تسلط كامل بر CSS

رنگها در CSS • در CSS رنگها را به دو شیوه می توان مشخص کرد: • تعیین مقدار 24 بیتی RGB آنها • استفاده از نام رنگ • در روش اول 16 میلیون رنگ مختلف برای انتخاب وجود دارند، اما در روش دوم حدود 200 رنگ با نام های مختلف قابل استفاده هستند. • برای مشخص کردن رنگ با نام آن، کافیست نام رنگ را بنویسید: Cyan, Purple • برای مشخص کردن رنگ RGB، پس از قرار دادن علامت # به ترتیب مقدار R و G و B را در مبنای 16 وارد می کنیم: #FFFFFF , #00FF00 • همچنین می توان برای مشخص کردن رنگ RGB به صورت روبرو عمل کرد: RGB(100,255,10) و یا RGB(70%,20%,100%)

واحدهای اندازه گیری • تمامی مقادیر اندازه ای در CSS واحد های متفاوتی را می پذیرند. پایه ای ترین واحد همان Pixel است که با px در انتهای مقدار مشخص می گردد. واحدهای دیگر عبارتند از: • %: درصد! • In: اینچ • Cm: سانتیمتر • Mm: میلیمتر • Em: اندازه فونت • Pt: 1/72 اینتچ • Pc: 12 pt • Px: یک نقطه

شفافیت • شفافیت (Transparency) یک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گیرد. • با استفاده از شفافیت می توان جذابیت بصری را بسیار بالاتر برد، اما باید دقت داشت که کندی پردازش تصویری سایت برای کاربر ایجاد مزاحمت نکند. • متاسفانه کاوشگر IE برای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند. • برای ایجاد شفافیت در کاوشگرهای استادارد، از Opacity : .5 استفاده می شود. • برای ایجاد شفافیت در IE از filter:alpha(opacity=50) استفاده می شود. • برای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود لازم است هردو دستور بالا بکار روند.

CSS های ویژه • کاوشگرهایی مانند Firefox دستورات CSS ویژه ای دارند (البته IE نیز دستورات مخصوص خود را داراست) . • عبارت –moz-border-radius می تواند گوشه های مستطیل ها را از تیزی درآورده و آنها را نرم کند: -moz-border-radius: 5px; • استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefox قابل مشاهده خواهد بود.

رسانه ها و CSS • CSS توانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSS یک سایت را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود. • برای مشخص کردن اینکه CSS را برای چه رسانه ای می نویسیم، از @media استفاده می کنیم: @media screen * { color:#ff0000;} @media print * { color:#000000;} رسانه های معمول عبارتند از: all, braille, handheld, print, projection, screen, tv, …

تمرینات CSS را قورت بده!

تمرینات • فایل HTML ای که در تمرینات HTML ساخته اید و تمامی برچسب ها را داراست، با استفاده از تمامی برچسب های CSS قالب بندی کنید. سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در داخل سند تنها می توانید برچسبهای DIV و SPAN اضافه کنید و یا به برچسب های موجود ID , CLASS بیافزایید. • بدون استفاده از جداول و تنها با استفاده از CSS یک صفحه سه ستونی (مانند SBCE.ir) بسازید. • آیا می توان با استفاده از CSS منو ساخت؟ اگر بله راه حل را معین کنید. • مزایا و معایب نوشتن CSS در یک فایل جداگانه را برشمارید. • با استفاده از CSS یک taskbar برای یک صفحه بسازید که همواره در قسمت پایین پنجره کاوشگر (نه لزوما انتهای سند) باشد.

کارگاه آموزشی توسعه وب

کارگاه آموزشی توسعه وب

Presentation Transcript