کارگاه آموزشی توسعه وب
This presentation is the property of its rightful owner.
Sponsored Links
1 / 35

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


  • 67 Views
  • Uploaded on
  • Presentation posted in: General

کارگاه آموزشی توسعه وب. بخش دوم - CSS. ارائه: عباس نادری انجمن علمی دانشجویی مهندسی کامپیوتر دانشگاه شهید بهشتی. نسخه 1. تعاریف. CSS چیست ؟. CSS چیست؟. CSS یا Casacading Style Sheets یک استاندارد قالب بندی ظاهری اسناد است.

Download Presentation

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

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


6976912

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

بخش دوم - CSS

ارائه: عباس نادری

انجمن علمی دانشجویی

مهندسی کامپیوتر

دانشگاه شهید بهشتی

نسخه 1


6976912

تعاریف

CSS چیست ؟


6976912

CSS چیست؟

  • CSS یا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.

  • معمول ترین استفاده CSS برای قالب بندی اسناد وب (HTML) منظور می شود.

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

  • CSS سه نسخه اصلی دارد:

    • CSS 1: در سال 1996 توسط W3C استاندارد شد.

    • CSS 2: در سال 1998 توسط W3C استاندارد شد و هنوز به عنوان استاندارد بکار می رود.

    • CSS 3: هنوز در دست توسعه توسط W3C است.

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

  • CSS از طریق انتخابگرها قالب بندی را سرعت می بخشد. همچنین از موتور انتخابگر CSS در کاربردهای دیگر بهره فراوان برده می شود.


6976912

اصطلاحات

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

  • Selector Engine: موتوریست بر روی کاوشگر که زیرمجموعه ای از برچسب های HTML را انتخاب می کند.


Css syntax

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 syntax1

CSS Syntax (ادامه)

  • CSS جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.

  • در سه جای مختلف می توان از CSS استفاده کرد:

    • فایل های CSS: می توان CSS را در فایلی جداگانه نوشت و آنرا در HTML افزود.

    • برچسب های Style در داخل فایل HTML: می توان با افزودن برچسب Style در Head یا Body یک سند، CSS تعریف کرد.

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

  • سه نوع تعریف CSS می توانند همزمان باشند. اولویت آنها به ترتیب افزایش می یابد.

  • استفاده از حالت سوم (InlineCSS) توصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می برد، اما در جاهای خاصی استفاده از آن کار را راحتتر می کند.


6976912

مثال نحوه های استفاده

  • تعریف در فایل CSS جدا و استفاده از آن در HTML:

    //SomeFile.css

    input[text] {

    width:200px;

    background-color:#000000;

    border:solid 0px;

    }

    <!--HTML File Here -->

    <head>

    <link rel="stylesheet" href=“SomeFile.css" type="text/css" />

    </head>


6976912

مثال نحوه های استفاده (2)

  • تعریف CSS در بدنه سند HTML:

    <head>

    <style>

    Div {

    color:#ff0000;

    text-align:center;

    }

    P {

    font-size: 16px;}

    </style>

    </head>


6976912

مثال نحوه های استفاده (3)

  • تعریف CSS در صفت یک برچسب:

    <div style=‘background-color:black;color:white;’>

    <p style=‘font-family:tahoma;’>

    This is some text with tahoma font

    </p>

    </div>


6976912

انتخابگر

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


6976912

انتخابگر چیست؟

  • براي مشخص كردن اينكه يك CSS به كدامين اشياء يك صفحه اعمال شود، بايد از انتخابگرها استفاده نمود. هر انتخاب گر يك يا چند شيء در يك صفحه HTML را انتخاب مي كند و سپس مي توان قالب هاي مورد نظر را به آن اعمال كرد.

  • انتخابگرهاي CSS تنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع شوند آنها را بررسي خواهيم كرد.

  • انتخابگر ها در دو نحوه اوليه تعريف CSS ها قابل استفاده هستند به قالب زير:

    SelectorStatement {

    Css Properties & Values;

    }


6976912

انواع انتخابگرها

انتخاب تمام برچسب ها :‌ *

انتخاب برچسب هاي خاص: tagName

انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگر: ParentTag DescendantTag

انتخاب برچسبي از فرزندان يك برچسب ديگر : ParentTag > ChildTag

انتخاب برچسبي بعد از يك برچسب ديگر: Tag1 + Tag2

انتخاب برچسبي با صفتي خاص: Tag[attrib=“value”]

آنتخاب يك برچسب در وضعيت هاي خاص:

Tag:hover برچسبي كه ماوس رويش است

Tag:activeبرچسب درحال كليك

Tag:focusبرچسب فعال صفحه

Tag:link لينك ديده نشده

Tag:visitedلينك ديده شده


6976912

صفات عمومي

  • همانطور كه قبلا ذكر شد، هر بچسب در HTML مي تواند صفات خاصي را داشته باشد. صفاتي كه در CSS به ما كمك مي كنند، دو صفت class , id هستند. با اختصاص دادن اين دو صفت به يك برچسب در HTML مي توان ويژگيهاي CSS آنرا به سادگي كنترل كرد.

  • با تعريف يك كلاس خاص براي برچسبي ، مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSS مشترك خاصي بر روي همگي آنها اعمال شود.

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

  • بايد توجه گردد كه id هيچ دو برچسبي در يك سند HTML‌نبايد يكسان باشند، در غير اينصورت نتايج قابل پيش بيني نخواهد بود.


6976912

مثال انتخابگرها

* {

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;

}


6976912

دسته بندي انتخابگرها

  • براي اينكه CSS خاصي را به چند انتخابگر يكجا اعمال كنيم، مي توانيم آنها را به صورت گروهي قرار دهيم:

    div.Container , p , input[type=‘text’] {

    font-family: ‘Tahoma’, ‘Comic Sans MS’ ;

    }

  • در صورتي كه چند دستور يكسان CSS به يك برچسب خاص اعمال شوند، آخرين آنها باقي مي ماند.

  • CSS‌با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط Client) را به Property ها اعمال كند:

    Width: expression( document.width /2 )px;


6976912

مشخصه ها

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


Background

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: خلاصه اي براي تنظيم مشخصات حاشيه، به ترتيب عرض، نوع و رنگ مي گيرد.

  • 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

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

Dimension

  • Height: ارتفاع يك برچسب در سند. مشخصه اندازه اي

  • Line-Height: فاصله بين دو خط متن در سند

  • Max-Height: حداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد

  • Min-Height: حداقل ارتفاع يك برچسب

  • Width: عرض يك برچسب

  • Max-Width: حداكثر عرض يك برچسب

  • Min-Width: حداقل عرض يك برچسب


6976912

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 & 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 & Padding

  • Margin: ميانبري براي تنظيمات كناره. به ترتيب اندازه كناره هاي بالا، راست، پايين و چپ را مي گيرد (ساعتگرد)

  • Margin-left, Margin-right, Margin-top, Margin-bottom: مقدار كناره، مقدار يا auto

  • Padding: ميانبري براي تنظيم مشخصات لايي گذاري، به ترتيب بالا، راست، پايين و چپ

  • Padding-left, Padding-right, Padding-top, Padding-bottom: مقدار لايي گذاري، مقدار يا auto


Outline

Outline

  • Outline: ميانبري براي تمام تنظيمات خط حاشيه، به ترتيب رنگ، نوع و عرض

  • Outline-color: رنگ خط حاشيه به RGB

  • Outline-style: نوع خط حاشيه يك شيء، انوع مجاز عبارتند از none, dotted, dashed, solid , double , groove, ridge, inset, outset

  • Outline-width: قطوري خط حاشيه، مقدار عددي يا يكي از مقادير thin, thick, medium


Positiontion

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

Table

  • Border-Collapse: معين مي سازد كه حواشي جداول جدا باشند و يا يك مجموعه خط بهم پيوسته باشند. مقادير مجاز Separate , Collapse

  • Border-Spacing: فاصله ميان دو حاشيه جدول، تنها در صورتي كه Seperate باشد.

  • ٍEmpty-Cells: مشخص مي كند كه سلول هاي خالي در مدل Seperate نمايش داده شوند و يا خير. مقادير مجاز Show/Hide

  • Table Layout: الگوريتم نحوه نمايش سلولهاي يك جدول، Auto/Fixed


6976912

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 يا مقدار عددي


6976912

نكات تكميلي

تسلط كامل بر CSS


6976912

رنگها در CSS

  • در CSS رنگها را به دو شیوه می توان مشخص کرد:

    • تعیین مقدار 24 بیتی RGB آنها

    • استفاده از نام رنگ

  • در روش اول 16 میلیون رنگ مختلف برای انتخاب وجود دارند، اما در روش دوم حدود 200 رنگ با نام های مختلف قابل استفاده هستند.

  • برای مشخص کردن رنگ با نام آن، کافیست نام رنگ را بنویسید: Cyan, Purple

  • برای مشخص کردن رنگ RGB، پس از قرار دادن علامت # به ترتیب مقدار R و G و B را در مبنای 16 وارد می کنیم: #FFFFFF , #00FF00

  • همچنین می توان برای مشخص کردن رنگ RGB به صورت روبرو عمل کرد: RGB(100,255,10) و یا RGB(70%,20%,100%)


6976912

واحدهای اندازه گیری

  • تمامی مقادیر اندازه ای در CSS واحد های متفاوتی را می پذیرند. پایه ای ترین واحد همان Pixel است که با px در انتهای مقدار مشخص می گردد. واحدهای دیگر عبارتند از:

    • %: درصد!

    • In: اینچ

    • Cm: سانتیمتر

    • Mm: میلیمتر

    • Em: اندازه فونت

    • Pt: 1/72 اینتچ

    • Pc: 12 pt

    • Px: یک نقطه


6976912

شفافیت

  • شفافیت (Transparency) یک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گیرد.

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

  • متاسفانه کاوشگر IE برای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.

  • برای ایجاد شفافیت در کاوشگرهای استادارد، از Opacity : .5 استفاده می شود.

  • برای ایجاد شفافیت در IE از filter:alpha(opacity=50) استفاده می شود.

  • برای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود لازم است هردو دستور بالا بکار روند.


6976912

CSS های ویژه

  • کاوشگرهایی مانند Firefox دستورات CSS ویژه ای دارند (البته IE نیز دستورات مخصوص خود را داراست) .

  • عبارت –moz-border-radius می تواند گوشه های مستطیل ها را از تیزی درآورده و آنها را نرم کند: -moz-border-radius: 5px;

  • استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefox قابل مشاهده خواهد بود.


6976912

رسانه ها و CSS

  • CSS توانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSS یک سایت را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.

  • برای مشخص کردن اینکه CSS را برای چه رسانه ای می نویسیم، از @media استفاده می کنیم:

    @media screen

    * { color:#ff0000;}

    @media print

    * { color:#000000;}

    رسانه های معمول عبارتند از: all, braille, handheld, print, projection, screen, tv, …


6976912

تمرینات

CSS را قورت بده!


6976912

تمرینات

  • فایل HTML ای که در تمرینات HTML ساخته اید و تمامی برچسب ها را داراست، با استفاده از تمامی برچسب های CSS قالب بندی کنید. سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در داخل سند تنها می توانید برچسبهای DIV و SPAN اضافه کنید و یا به برچسب های موجود ID , CLASS بیافزایید.

  • بدون استفاده از جداول و تنها با استفاده از CSS یک صفحه سه ستونی (مانند SBCE.ir) بسازید.

  • آیا می توان با استفاده از CSS منو ساخت؟ اگر بله راه حل را معین کنید.

  • مزایا و معایب نوشتن CSS در یک فایل جداگانه را برشمارید.

  • با استفاده از CSS یک taskbar برای یک صفحه بسازید که همواره در قسمت پایین پنجره کاوشگر (نه لزوما انتهای سند) باشد.


  • Login