Download presentation
Presentation is loading. Please wait.
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 در همه مرورگرها مثل هم نیست بنابر این هنگام طراحی سایت از یکسان بودن ظاهر در همه مرورگرها اطمینان حاصل کنید
Similar presentations
