با سلام در این جلسه اول آموزش css رو از ابتدا و به صورت کامل در وب سایت سون ریپلای به صورت کام به کام آموزش خواهیم داد.
آموزش بصورت کاربردی و بر اساس استانداردهای آموزشی تهیه و در اختیار شما قرار گرفته که امید وارم از این آموزش لذت ببرید.
توضیحات آموزش CSS
به عنوان دومین قدم در مسیر یادگیری طراحی وب، هر شخصی باید بعد از یادگیری HTML، چیزی با عنوان CSS را یاد بگیرد .
اگر ما HTML را به عنوان اسکلت یک وبسایت در نظر بگیریم، قطعا میتوان CSS را به عنوان ظاهر سازنده این اسکلت در نظر گرفت.
شما برای مشاهده این دوره نیاز به هیچ پیش نیاز خاصی به غیر HTML ندارید.
اگر HTML را هنوز یاد نگرفتید میتوانید از جلسات دوره آموزش HTML را فرابگیرید و در قدم بعدی شروع به دیدن این دوره کنید.
در دوره آموزش کامل HTML
در دوره آموزش کامل HTML ما به طور کامل یاد گرفتیم تا ساختار اصلی یک صفحه وب رو تشکیل بدیم اما همانطور که گفتیم این صفحه وب فقط و فقط یک ساختار بی رنگ و لعاب و کاملا بی روح بود که نیاز به یک مکمل داشت تا بتونه این کاستی ها رو رفع کنه…
خب الان وقتش رسیده که ما این مکمل رو به ساختار اصلی صفحه وب خودمون اضافه کنیم تا بتونیم یک قالب زیبا و حرفه ای رو ایجاد کنیم ،
این مکمل آموزش CSS یا بهتره بگیم آموزش تصویری css3 و css هستش .
آموزش css – css چیست ؟
CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است پیشنهاد داده است.
عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.
CSS زبانی است که توسط آن قادر خواهید تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید.
آموزش css – نحوه اتصال شیوه نامه به صفحه وب
زمانی که یک صفحه وب در مرورگر اجرا میشه مرورگر بر اساس فایل استایل که به صفحه نسبت داده شده موقعیت عناصر رو تعیین میکنه و به صفحه استایل میده برای اتصال یک استایل به صفحه html سه روش وجود داره
- External Style Sheet : شیوه نامه خارجی
- Internal Style Sheet : شیوه نامه داخلی
- Inline Style : شیوه درون خطی
آموزش css – استایل خارجی یا External Css در HTML
اکسترنال یا خارجی یا External یکی دیگر از روش های استفاده از CSS در HTML می باشد، این روش یکی از بهینه ترین روشهای استفاده از دستورات CSS در HTML می باشد.
در استایل های خارجی یک فایل را با پسوند css در اینترنت ذخیره (آپلود) می کنیم و آدرس آن را در تگ <link> می گذاریم.
در آن فایل باید از سلکتور هایی استفاده کنیم که بتوان آنها را به کد ها و تگ های موجود در صفحه وصل کرد.
توجه داشته باشید که همیشه باید تگ <link> درون تگ <head> قرار داشته باشد تا عملکردی مناسب داشته باشد. البته نه ازلحاظ کد نویسی بلکه از لحاظ سئو بودن.
آموزش css – به مثال زیر توجه فرمایید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7reply.com</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>External Style sheet</h1> </body> </html> |
دقت کنین که شیوه نامه ها رو میشه در هر ویرایشگر متنی (notepad++, notepad, sublime, dreamweaver,…) نوشت. شیوه نامه ها نیازی به تگ های html ندارن و حتما باید با پسوند CSS ذخیره بشن
Internal Style Sheet یا شیوه نامه ی داخلی
یک استایل داخلی زمانی باید استفاده شود که معمولا استایل به یک تگ html وصل است اما بهتر است که همین استایل ها را نیز مانند استایل های داخلی به کار ببریم چون کاربر با چند کلیک و رفتن به صفحات دیگر ،
نیازی نیست این استایل ها را دوباره دانلود کند.
نحوه نوشتن این استایل ها مانند استایل خارجی می باشد ولی تنها فرق آن این است که به جای تگ <link> از تگ <style> استفاده می کنیم.
به مثال زیر توجه فرمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7reply.com</title> <style> p{ font-size: 25px; color: yellow; background-color: #aaa; } </style> </head> <body> <p>Internal Style sheet</p> </body> </html> |
آموزش css – استایل خطی یا Inline Css در HTML
با استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که CSS بخاطر آنها به وجود آمد را از دست میدهید.
چراکه برای هر عنصر باید دستورات مختص آن را بنویسید و بدیهی است که برای تغییر باید به تک تک عناصر مراجعه کرده و آنها را تغییر دهید که بسیار زمانبر و گاهی همراه با خطا خواهد بود.
همچنین باعث افزایش حجم صفحات و در نتیجه کاهش سرعت بارگزاری خواهد شد.
در ضمن کدها پیچیده، شلوغ و ناخوانا خواهد شد. پس باید در استفاده از آنها صرفه جویی کنید!
برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید.
در مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده میکنیم:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7reply.com</title> </head> <body> <h4 style="color: gray; font-size: 50px; background-color: #000;">Inline style</h4> </body> </html> |
به طور کلی هنگامی یک دستور به هر سه روش برای یک عنصر HTML نوشته میشود،
اولویت اجرای آنها به صورت زیر است:
- Inline Style : شیوه درون خطی
- Internal Style Sheet : شیوه نامه داخلی
- External Style Sheet : شیوه نامه خارجی
پس استایل هایی که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می شود،
باعث می شود دستورات مربوط به آن عنصر در شیوه نامه داخلی که در تگ نوشته شده و همچنین دستورات مربوطه در شیوه نامه خارجی که با تگ به صفحه فعلی متصل شده نادیده گرفته شوند.
نکته: چنانچه لینک یک شیوه نامه خارجی بعد از دستورات شیوه نامه داخلی در تگ قرار داده شود، در نهایت دستورات شیوه نامه خارجی اعمال خواهند شد.
خب دوستان و همراهان همیشگی وب سایت سون ریپلای این جلسه از ( آموزش نحوه استفاده از CSS در HTML ) نیز به پایان رسید,
لطفا در جلسات بعدی نیز با من همراه باشید.
هیچ دیدگاهی برای این نوشته ثبت نشده است.