مقدمه
بخش مجزای دیگری که در طراحی صفحات وب از آن استفاده می شود، زبان CSS است.
CSS یا همان Cascading Style Sheet (سبک نامه آبشاری) روشی است برای قالب بندی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریبا هر چیزی که در طراحی صفحه HTML استفاده می شود.
با استفاده از CSS می توان از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کندشدن سرعت بارگذاری صفحه در اینترنت می شود، جلوگیری کرد. برای مثال فرض کنید ما 30 صفحه HTML داریم و در هرکدام از 10 تگ پاراگراف استفاده کرده ایم، که در مجموع می شود 300 تگ پاراگراف، حال اگر بخواهیم برای همه این پاراگراف ها یک استایل را تعریف کرد باید از 300 تگ فونت دیگر نیز استفاده کرد، اما با استفاده از CSS می توان این 300 تگ فونت را در یک خط خلاصه کرد!! که هم باعث کم شدن حجم صفحات و نیز افزایش سرعت بارگذاری صفحات خواهد شد.
یکی دیگر از مزیت های CSS قابلیت های بسیار زیاد آن است، که با رسیدن CSS3 حتی در بعضی مواقع می توان از آن بجای JavaScript و jQuery نیز استفاده کرد. در این سری آموزشی سعی خواهد شد شما را با این زبان شگفت انگیزکه یکی از لازمه های اجتناب ناپذیر برای تبدیل شدن به یک طراح وب است، آشنا کنیم. اما یک پیش نیازی که برای یادگیری CSS لازم دارید، این است که شما حداقل اطلاعات پایه ای با زبان HTML را دارا، و به خوبی با تگ های HTML آشنایی داشته باشید.
این سری آموزشی با پوشش آخرین نسخه از این زبان، یعنی CSS3 این قول را به شما خواهد داد که پس از به پایان رساندن آموزش ها، شما قادر خواهید بود بدون کمک دیگران، یک وبسایت را طراحی کنید.یک نکته دیگر اینکه برای کدنویسی زبان css از هر ویرایشگری می توان استفاده کرد اما پیشنهاد من نرم افزار ripid css است که می توانید آن را از لینک زیر دریافت کنید
این سری آموزشی در 15 فصل ارائه خواهد شد ، و هر سه روز یک بار مطلب جدید افزوده می شود.
با ما باشید.....
سلام یه سوالی در مورد سی اس اس داشتم :
p{
color:blue;
}
li{
color:red
}
hello
دیدم که نتیجه پاراگراف هلو را ابی کرد چرا قرمز نکرد ایا سی اس اس در خواندن سلکتور ها ترتیب و اولوییتی را به کار می برد اگر می برد ان چیست؟ با تشکر ممنون از سایت خوبتان
من این کد هارو تو rapidبا html ذخیره میکنم
7Learn :
JavaScript and Web Design Tutorials
.red { color: red; }
.blue { color: blue; }
تومرورگر فقط 2کد اول معنی میشه redوblueهمونجور نوشته میشن!!
سلام.
اینجوری قرار دادن کد ها صحیح نیست، به علاوه اینکه شما 7Learn :
JavaScript and Web Design Tutorials رو درون تگی قرار ندادین.
کدهای css رو هم وقتی درون فایل html قرار می دین باید درون تگ style قرار بگیرند
کد بالا رو به شکل زیر تغییر بدین :
<p class="red">7learn : </p> <p class="blue">JavaScript and Web Design Tutorials</p> <style type="text/css"> .red { color: red; } .blue { color: blue; } </style>سلام میشه نحوه کار باrapid ccرو هم بگین؟!!!سیو میکنم تو مرورگر نشون نمیده
سلام.
اگه فرمت فایل css هست چیز خاصی توی مرورگر نمی بینید باید فرمت فایل html باشه، و کدهای html هم کنار کدهای css قرار بگیره.
یا مثلا کد هاروکه مینویسم دستور cssخودش همونجوری نوشته میشه تو مرورگر و انجام نمیشه ❗
ممنون
سلام ، خسته نباشید
من آموزش طراحی قالب وب سایت با استفاده از CSS رو میخوام و نحوه ی استفاده از آن در visual studio صفحات با پسوند .asp رو بلد نیستم اگر مطالبی یا فیلمی در این رابطه دارید ممنون میشم به ایمیلم بفرستید، یا اگه جایی رو سراغ دارید که بشه بهش دسترسی پیدا کرد بگید…
پروژه ای دارمکه باید زودتر تحویل بدم…
یک دنیا ممنونم…
سلام ببخشید من یک سئوال دارم می خواستم بدونم این نرم افزاری که معرفی کردید چه کاری انجام می ده اگر همزمان پیشنمایش می ده بگید که دانلود کنم وگر نه از همین notepad++ استفاده کنم اگر هم این کار رو نمی کنه یا یک نرم افزار بزارید که این قابلیت رو داشته باشه یا یک سایت آنلاین معرفی کنید این رو به این خاطر می گم چون دیدم بعضی از کد نویسان عزیز موقعی که ازشون کد خواستم تو یک سایت آنلاین که واسه کد نویسی هست نوشتن و با پیشنمایش بهم دادن این سایت جوری هست که از سه کد نویسی جاوا اسکریپت سی اس اس و یک کد نویسی دیگه پشتیبانی می کنه و همزمان با کد نویسی پیشنمایش هم داره ممنون
سلام.
اگه روی لینک کلیک کنید، در صفحه ای که باز میشه قابلیت ها نرم افزار نوشته شده، از جمله “نمایش آنی کدهای نوشته شده”
اما با این حال بهترین نرم افزاری که تا حالا باهاش کار کردم برای کدنویسی که هم خیلی سادس هم راحت و هم قابلیت های زیادی داره sublime text بوده.
اقا خیلی عالیه، واژه استاد برازندته.
فقط میشه در اخر راجع به اینکه چطور میشه من که یه قالب با فتو شاپ ساختم و میخوام ازش برای سایت استفاده کنم هم توضیح بدید؟؟؟؟؟
خیلی لطف بزرگی میکنید در این صورت هرچند با مطالب ارائه شدتون تا اینجا کلی چیز یاد گرفتم
سلام
تبدیل PSD به قالب صفحه وب خودش نکات ریز زیادی داره . انشاءالله اگر وقت شد در آینده سعی می کنیم یه آموزش ویدیویی در این باره بزاریم .
بابا میگین که چجوری میتونم توی وبلاگ دکمه ادامه مطلبو تغییر بدم یا نه؟بابا تو رو خدا همین یه سئوالو جواب بدید .تو انجمن هم رفتم جوابمو ندادید.آقا من هیچی بلد نیستم اگه حوصله جواب دادنمو ندارید بگید همینجا برم.باشه.ولی خداوند کسایی رو که به کسای دیگه یه چیزی یاد میدن دوست داره 😥
سلام.
خیلی ببخشید که زود پاسخ ندادیم.
آدرس تاپیکتون رو بدین
دمتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتت گرم داداش 😳
امیدوارم مثل آموزش های html پر بار و مفید باشن که حتما همین طور هستن 😉
سلام.
نظر لطفته علی.
منم امیدوارم…
کارت خیلی درسته …
سری html ات که واقعا عالی بود …
مطمئنم CSS هم همینطوره ..
سلام.
لطف داری لقمان جان.
خوشحالم که سری قبل مورد توجهت قرار گرفته
امیدوارم این سری هم مثل سری html بشه
دمت گرم حسابی این بخشو لازم دارم بزار! تند تند آموزشاشو بزار! .مرسی