1 / 12

CSS: C ascading S tyle S heets

CSS: C ascading S tyle S heets. سرفصل. Css چیست؟ چند کد نمونه چرا از Css استفاده می کنیم؟ پیاده سازی. CSS چیست؟. در سال 1994 توسط Hakon Wium Lie از دانشگاه MIT ایجاد شد. استاندارد سازمان W3C برای کنترل نحوه نمایش صفحات وب شده است.

yoshiko-emiko
Download Presentation

CSS: C ascading S tyle S heets

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS: Cascading Style Sheets

  2. سرفصل • Css چیست؟ • چند کد نمونه • چرا از Css استفاده می کنیم؟ • پیاده سازی

  3. CSS چیست؟ • در سال 1994 توسط Hakon Wium Lie از دانشگاه MIT ایجاد شد. • استاندارد سازمان W3C برای کنترل نحوه نمایش صفحات وب شده است. • عناصر طراحی صفحه را از ساختار منطقی صفحه جدا می کند.

  4. نمونه کد • نمونه کد CSS

  5. انتخاب کننده ها • Element Selectors – (انتخاب تگ ها) H1 {color: purple;} H1, H2, P {color: purple;} • Contextual – (انتخاب تگ داخل تگ دیگر) LI B {color: purple;} • ID – (انتخاب با شناسه) #warning {color:Red;} در کد html <H1 id=“warning”>Danger</H1>

  6. انتخاب کننده ها • Class Selectors – (انتخاب کلاس) در کد html <H1 CLASS=“warning”>Danger!</H1> <P CLASS=“warning”>Be careful…</P> در کد css H1.warning {color: red;} یا به همه المان های کلاس .warning {color:red;}

  7. اعمال css به html • سه روش برای این کار وجود دارد. • روش اول: استایل درون خطی (inline style) <H1 STYLE=“color: blue; font-size: 20pt;”>A large purple Heading</H1>

  8. اعمال css • روش دوم: استایل تعبیه شده (embedded style sheet) <HTML><HEAD><TITLE>Stylin’!</TITLE> <STYLE TYPE=“text/css”> H1 {color: purple;} P {font-size: 10pt; color: gray;} </STYLE> </HEAD> … </HTML>

  9. اعمال css • روش سوم: در فایل جدا از html <HEAD> <LINK REL=stylesheet” TYPE=“text/css” HREF=“styles/mystyles.css”> </HEAD>

  10. مزایای استفاده از css • جریان کاری صفحه • دانلود سریعتر • نگهداری سایت بهینه تر • کنترل یکپارچه ظاهر سایت • قابلیت نمایش در دستگاه های مختلف • کنترل دقیق المان های صفحه • مکان و مختصات دقیق • ظاهر قابل تغییر با اندازه صفحه نمایش

  11. مزایای استفاده از css • کاهش هزینه ها • کاهش هزینه پهنای باند • یک فایل استایل مشترک در همه صفحه ها استفاده می شود و فقط یکبار دانلود می شود • امتیاز بالاتر در موتورهای جستو • کد html تمیز و مرتب قابلیت جستجوی بهتری برای موتورهای جستجو دارد

  12. Css هنوز کامل نیست! • پشتیبانی از همه المان های css در همه مرورگرها مثل هم نیست • بنابر این هنگام طراحی سایت از یکسان بودن ظاهر در همه مرورگرها اطمینان حاصل کنید

More Related