آموزش سی اس اس ابتدا تا انتها
|
۱۷-۱۰-۱۳۸۹, ۰۷:۲۱ صبح
(آخرین ویرایش در این ارسال: ۲۶-۱۱-۱۳۸۹ ۰۸:۲۷ عصر، توسط Reza Ganji.)
ارسال: #1
|
|||
|
|||
آموزش سی اس اس ابتدا تا انتها
توجه:اين آموزش به كتاب الكتروني (ايبوك) تبديل شده و در آخرين پست لينك دانلود قرار گرفته است سلامدر این پست به آموزش سی اس اس از منابع مختلف میپردازم و هر از چندگاهی که فرصت شد تاپیک را ادامه میدهم و از دوستان خواهش میکنم در این تاپیک پستی ارسال نکنند تا طبق روال این تاپیک رو به پیش ببرم ! در مورد تاریخچه سی اس اس دوست عزیزم آقای سمیع عادل مطالبی را در تاپیک تاریخچه سی اس اس گفتند و ما وارد جزئیات نمیشیم و مطاب آموزشی را شروع میکنیم. البته برای یادگیری سی اس اس لازم است اچ تی ام ال هم یاد گرفت! سی اس اس چیست؟ زبان HTML براي ايجاد يك سيستم كد سازي جهاني به وجود آمد تا بوسيله آن بتوان صفحات وب را بدون توجه به نوع كامپيوتر طراحي كرد. خاصيت مهم HTML قالب بندي ساختاري ميباشد ولی متاسفانه به طراحان قابلیت کنترل در همه زوایای صفحه را نمیدهد. برای قالب بندی و ایجاد افکت های بیشتر از CSS استفاده میکنیم. در واقع CSS این امکان را ایجاد میکند تا طراح بتواند چندین مشخصه در طراحی صفحه را به یکباره تعیین کند بعنوان مثال خصوصیات تمامی تگهای h1 موجود در صفحه اعم از اندازه، فونت و رنگ را مشخص نمايد. و يا مشخصات ظاهري چندين صفحه را در يك فايل CSS تعيين نمايد. CSS مخفف کلمه Cascading Style Sheets یا همان برگه سبک آبشاری ميباشند. نسخه های مختلف CSS به شرح زیر میباشد: CSS1 CSS2 CSS3 CSS-P روشهای به کارگیری CSS سه روش برای به کارگیری CSS وجود دارد: 1- محلی: (Inline) در صورتیکه تا به حال از CSS استفاده نکردهاید بهتر است از این روش ساده استفاده کنید، اگر چه با این روش نمیتوان یک style را برای یک مجموعه تگ در آن واحد اعمال کرد. در این روش درون تگ HTML ای که میخواهیم قالب آن را تغییر دهیم ویژگی style را مانند زیر تایپ میکنیم. کد: (انتخاب همه) <tag style="css declarations"...>content </tag> 2-داخلی: (Internal) این روش برای صفحات مجزایی که متن طولانی دارند بسیار مناسب میباشد. بدین صورت میتوان style را در بالای سند HTML برای کل متن تعریف نمود. در اینحالت در داخل تگ < head > تگ < style > را مانند زیر تایپ کنید. کد: (انتخاب همه) <html xmlns="http://www.w3.org/1999/xhtml"> نمونه حاوی کدهای سی اس اس: کد: (انتخاب همه) <head> 3-خارجی: (External) در صورتیکه بخواهید از یک style در چندین صفحه استفاده کنید این روش را به کار ببرید. در این حالت میتوان برای تمام صفحات وب ظاهر متداول و یکسانی بوجود آورد. یعنی به جای آنکه برای هر صفحه از style های داخلی استفاده کنید میتوانید تمام صفحات را با یک style خارجی طراحی کنید. برای اینکار در برچسب head یک لینک به فایل سی اس اس میدهیم و توجه داشته باشید که فایل سی اس اس هم بر روی همان سرور قرار دارد. نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server میباشد. در تصویر زیر تمامی صفحات به یک فایل سی اس اس لینک شده اند. اکنون هر تغییری که در فایل سی اس اس دهید در تمامی صفحات به طور اتوماتیک اجرا خواهد شد. |
|||
|
۱۷-۱۰-۱۳۸۹, ۰۸:۰۶ صبح
(آخرین ویرایش در این ارسال: ۱۷-۱۰-۱۳۸۹ ۰۸:۰۹ صبح، توسط Reza Ganji.)
ارسال: #2
|
|||
|
|||
RE: آموزش سی اس اس ابتدا تا انتها
طریقه نوشتن CSS در روش داخلی و خارجی
طریقه نوشتن CSS در روش داخلی و خارجی به یکی از صورتهای عمومی زیر است: فعلا فرض را بر این میگذاریم که selector همان تگ HTML است. نکات مورد توجه: - خصوصیات هر تگ بایستی بین دو علامت {} قرار داده شوند. در ضمن بین هر خصوصیت و مقدار مربوطه به آن علامت ( : ) قرار داده میشود. - میتوان چند خصوصیت از یک تگ را به یکباره تعریف نمود. در این حالت خصوصیات مختلف را با علامت ( ; ) از هم جدا میکنند. - میتوان خصوصیات چندین تگ را به یکباره تعریف نمود. البته مي بايستي هر کدام از تگها را با علامت (, ) از هم جدا نمود. به عنوان مثال: کد: (انتخاب همه) h1,h2,h3 {color: red} کد بالا رنگ فونت هر سه تگ را قرمز میکند. - از آنجا که تمام عناصر موجود در CSS توسط Browser ها شناخته نمیشود بهتر است محتویات داخل تگ < style > را بین دو علامت کوچکتر و بزرگتر قرار داده تا مشخصه های تگ در Browser هايي كه اين عناصر را نميشناسند به صورت اشتباه نشان داده نشوند. ادامه دارد..... |
|||
|
۵-۱۱-۱۳۸۹, ۱۱:۲۸ صبح
(آخرین ویرایش در این ارسال: ۳-۸-۱۳۹۰ ۰۸:۱۹ عصر، توسط Reza Ganji.)
ارسال: #3
|
|||
|
|||
RE: آموزش سی اس اس ابتدا تا انتها
این آموزش در اینجا به پایان نرسیده ولی چون دوست عزیزم آقای مهدی رفوگر زحمت کشیدند و این آموزش رو به ایبوک تبدیل کردند شما میتوانید در تاپیک زیر این کتاب را دانلود کنید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. |
|||
|
۳-۸-۱۳۹۰, ۰۸:۲۰ عصر
ارسال: #4
|
|||
|
|||
RE: آموزش سی اس اس ابتدا تا انتها
لینک تصحیح شد !
|
|||
|
۲۴-۲-۱۳۹۱, ۰۳:۴۲ صبح
ارسال: #5
|
|||
|
|||
نظیم شفافیت (Opacity) تصاویر با سی اس اس
در فرمت PNG می توانیم شفافیت (Opacity) تصویر را تغییر دهیم.
اما متاسفانه مروگر IE6 از این فرمت بطور پیش فرض پشتیبانی نمی کند و اغلب کاربران در ایران از این مروگر قدیمی و آسیب پذیر استفاده می کنند. به همین علت، هنوز استفاده از PNG برای تنظیم شفافیت (Opacity) راهکار مناسبی نیست و می توان از سی اس اس برای تنظیم شفافیت (Opacity) در تصاویر استفاده کرد. استفاده از سی اس اس برای تنظیم شفافیت (Opacity) یک حسن دیگری نیز دارد و آن این است که اگر شما به دو تصویر با شفافیت ۷۰% و ۱۰۰% نیاز داشته باشید می توانید فقط از یک تصویر استفاده کنید و فقط شفافیت ها را در سی اس اس تغییر دهید. البته متاسفانه تا زمان نگارش این مقاله هنوز w3c این خصیصه CSS را Valid نکرده است. نکنته مهم این است کدی که برای تنظیم Opacity یا همان شفافیت استفاده می کنید در تمام مروگر ها کار کند. برای این منظور از کد زیر استفاده کنید و فقط مقادیر شفافیت را تغییر دهید: .transparent_class { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; } |
|||
|
۲۸-۹-۱۳۹۱, ۰۷:۱۵ صبح
ارسال: #6
|
|||
|
|||
RE: آموزش سی اس اس ابتدا تا انتها
سلام من یک سایت با سیستم شیرترانیکس دارم
برای کادر دور عکس های یوذر های سایتم یک کد سی اس اس میخوام میتونید کمکم کنید؟ |
|||
۲۹-۹-۱۳۹۱, ۰۶:۱۰ عصر
ارسال: #7
|
|||
|
|||
RE: نظیم شفافیت (Opacity) تصاویر با سی اس اس
(۲۴-۲-۱۳۹۱ ۰۳:۴۲ صبح)تیم اسان وب نوشته شده توسط: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. سلام محمد جان همکار محترم لطفا آموزش را کامل قرار بدهید باتشکر سرپرست گروه آسان وب شرکت فنی مهندسی آسان پردازشگر (فناوران مانــدگار) |
|||
۲۷-۱۲-۱۳۹۶, ۰۹:۲۴ عصر
ارسال: #8
|
|||
|
|||
RE: آموزش سی اس اس ابتدا تا انتها
سلام...استاد...ایا پی اچ پی و سی اس اس مکمل همدیگه هستن....
|
|||
۴-۱-۱۳۹۷, ۱۰:۵۴ عصر
ارسال: #9
|
|||
|
|||
RE: آموزش سی اس اس ابتدا تا انتها
این css 3 رو من وقت باشه بتونم کامل یادبگیرم jquery بی صاحابو میزارم کنار :|
خیلی تو دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. کمک میکنه |
|||
۱۴-۱-۱۳۹۷, ۰۷:۴۶ عصر
ارسال: #10
|
|||
|
|||
RE: آموزش سی اس اس ابتدا تا انتها
درود
پی اچ پی زبان برنامه نویسی است ولی سی اس اس برای استایل دهی بکار میرود.البته در اچ تی ام ال 5 و سی اس اس 3 هم میتوان از توابع استفاده کرد . در لینک زیر میتوانید برخی توابع آموزش داده شده در سایت دبیلوتری اسکول را مشاهده کنید : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. در سایت بالا به زبان ساده میتوانید بیشتر زبان های نشانه گذاری و برنامه نویسی را یاد بگیرید. |
|||
|
کاربرانِ درحال بازدید از این موضوع: 1 مهمان