آموزش CSS
آموزش CSS (سی اس اس) - مقدمه
در این آموزش با استفاده از CSS (سی اس اس) فراخواهید گرفت که تمام صفحات پروژه خود را در یک مرحله، قالب بندی کنید.
با استفاده از CSS می توانید، در انجام کارهای زیاد صرفه جویی کنید.
هم اکنون یادگیری CSS (سی اس اس) را آغاز نمایید!
آموزش CSS همراه با صدها مثال
در این خودآموز، برای آموزش CSS از صدها مثال استفاده شده است.
به کمک ویرایشگری که در اختیارتان است، می توانید سند HTML را ویرایش کنید و با کلیک روی یک دکمه، نتیجه را مشاهده کنید:
مثال (مقدمه آموزش CSS)
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.
پیش نیازهای آموزش CSS
پیشنهاد می شود اگر با آموزش زیر آشنا نیستید، قبل از ادامه آموزش CSS، آنرا مطالعه فرمایید:
CSS (سی اس اس) چیست؟
- CSS (سی اس اس) سرنام واژگان Cascading Style Sheets است. (صفحات استایل آبشاری)
- با استفاده از CSS می توان، نحوه ی نمایش عناصر html را مشخص نمود.
- Styleها برای حل کردن یک مشکل به HTML 4.0 اضافه شدند.
- برگه های استایل خارجی (External Style Sheets) می توانند در انجام کارهای زیاد صرفه جویی کنند.
- برگه های استایل خارجی در فایل های با فرمت css. ذخیره می شوند.
آموزش CSS (سی اس اس) - یک پیش نمایش یا دمو از CSS
با استفاده از CSS می توان، ظاهر یک صفحه HTML را به چندین سبک مختلف نمایش داد: نمایش نحوه انجام کار
آموزش CSS (سی اس اس) - حل یک مشکل بزرگ توسط CSS (سی اس اس)
HTML هرگز قصد نداشت که توسط تگ ها، صفحات را قالب بندی کند، بلکه قصد داشت محتوای یک سند را فقط نمایش دهد.
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
زمانی که تگ هایی مانند <font> و مشخصه هایی مانند color به HTML 3.2 اضافه شد، برای طراحان وب یک کابوس بزرگ آغاز شد. در وب سایت های بزرگ باید اطلاعات fontها و colorها به هر صفحه ای اضافه می شد و این کار بسیار هزینه بری بود.
برای حل این مشکل، CSS (سی اس اس) توسط کنسرسیوم W3C یا (World Wide Web) ایجاد شد.
در HTML 4.0 قالب بندی صفحات می تواند از فایل HTML حذف شده و در یک فایل CSS (سی اس اس) جدا ذخیره شود.
امروزه تمام مرورگرها، CSS (سی اس اس) را پشتیبانی می کنند.
آموزش CSS (سی اس اس) - انجام کارهای زیاد، فقط ، با یک حرکت
در آموزش CSS (سی اس اس) مشخص می کنید که عناصر HTML را چگونه نمایش دهید.
Styleها معمولاً در فایلهای جداگانه با فرمت CSS (سی اس اس) ذخیره می شوند (External style sheets) اینکار شما را قادر می سازد فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات یک پروژه را تغییر دهید.
در آموزش های بعدی، چگونگی انجام این کار را خواهید آموخت.
آموزش تصویری مطلب بالا (فیلم آموزش CSS) |
|---|
| درس شماره 1 (مقدمه آموزش CSS) زمان فیلم: 14:56 |
|
خرید و دانلود مستقیم فیلم آموزش CSS - حجم دانلود 1.12 گیگابایت (کلیک کنید +) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 279240
دیدگاه‌ها
با سلام و خسته نباشید. مطالب خوبی در سایت خود منتشر می کنید، من برای پروژه پایانی دانشگاهمون یه سایت طراحی کردم و خیلی از آموزش های شما استفاده کردم.
سلام عالی
سلام . در not pad دستور css رو نوشتم چجوری باید خروجیه دستورم رو ببینم؟
در notpad ، با پسوند html نمایش داده شد ولی css رو نمیدونم چجوری ببینم
سپاس
سلام
1- فایل CSS را با پسوند css. ذخیره کنید و در کنار فایل html قرار دهید.
2- فایل html را در notepad باز کنید و از کد زیر برای لینک کردن فایل css به فایل html استفاده کنید:
<head>
<link rel="stylesheet " type="text/css" href="/mystyle.c ss" />
</head>
ممنون از اموزش های پرمحتوای شما.
ببخشید من در سایتم چطور می تونم فایل دانلودیک بازی اندرویید رو بذارم؟
لطفا منو راهنمایی کنید
شما باید فایل اندرویدی رو zip کنید و سپس توی هاست خودتون آپلود کنید. سپس آدرس فایل رو در داخل یک لینک قرار بدید تا وقتی کاربر روی لینک کلیک می کنه فایل رو بتونه دانلود کنه.
سلام.
ترتیب اعمال استایل بر فایل اچتمل بصورت زیر هس؟؟؟
اول درون تگی بعد اکسترنال و بعد اینترنال؟؟؟؟
سلام ترتیب به صورت زیر است:
1. استایل های inline
2. استایل های اکسترنال و اینترنال، که در بخش head قرار می گیرند و اولویت اونها به ترتیب قرارگیری اونها بستگی داره.
3. استایل های پیش فرض مرورگر
ببخشید باز هم سوال نا مربوط
من چطور تو صفحه وب ام یک بخش نظر خواهی مثل وبسایت شما درست کنم که مردم نظرات و پرسش های خود را بکنند
اگر از جوملا استفاده می کنید، می تونید از کامپوننت jcomments یا دیگر کامپوننت ها استفاده کنید.
ببخشید سوال من هیچ مربوط به این صفحه نیست
من یه سایت علمی میسازم که اخبار تکنولوژی رو میذاره من می خوام از وسط یه خط بکشم که صفحه اصلی وب منو به دو بخش تقسیم کنه اصلا من باید چطوری اون خطو رسم کنم که صفحه رو به دو بخش از وسط تقسیم کنم
)وبسایت من روی هیچ هاست قرار ندارد
دوست عزیز شما باید از پلاگین ها و کامپوننت های ارائه شده توسط شرکت های مختلف مخصوص این کار استفاده کنید. البته اگه از سیستم های مدیریت محتوا استفاده می کنید.
سلام. وقتی با css به پس زمینه عکس میدم تمام عکس به عنوان پس زمینه قرا نمیگیره مشکل از چیه؟ ):
سلام. به نظرم مقاله ی زیر مشکل شما رو حل می کنه:
www.beyamooz.com/css/595-css-responsive/4932-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-css-%D8%B9%DA%A9%D8%B3-%D9%87%D8%A7
ببخشید سوال من هیچ مربوط به این صفحه نیست
سوال من در مورد ساخت یک جستجو گر در صفحه وب است مانند جستجو گر وب سایت شما محصول مورد نظر خود را جستجو کنید یا همون جستجو پیشرفته
این جستجو گر ها را چطور می سازند
ممنون
برای ساخت برنامه ای که کلمات و عبارات را جستجو کند، می توانید از عبارت های منظم استفاده کنید. ابتدا مقالات زیر را مشاهده نمایید:
www.beyamooz.com/javascript/128-object/404-%D8%B9%D8%A8%D8%A7%D8%B1%D8%A7%D8%AA-%D9%85%D9%86%D8%B8%D9%85-%D8%AF%D8%B1-javascript
www.beyamooz.com/jsref/342-javascript/2620-%DA%A9%D9%84%DB%8C%D9%87-%D9%85%D8%AA%D8%AF%D9%87%D8%A7%DB%8C-%D8%B4%DB%8C%D8%A1-regexp-%D8%AF%D8%B1-javascript
سلام ممنون از سایت خوبتون میشه تو اموزشاتون تمرین بگذارید مثلا بگید در اساس مثال یه صفحه طراحی کنید
سلام . خواهش می کنم. ان شا الله در آینده این کار رو انجام می دهیم. اما فعلا تیم بیاموز بر روی موارد دیگری تمرکز کرده است.
سلام خسته نباشید... ممنون از مطالب اموزندتون...میخ واستم بدونم ایا اموزش تصویری css رو هم روی سایت قرار میدین؟...اگه باشه عالی میشه... ممنون
سلام ممنون از لطفتون
منظور از تصویری رو متوجه نشدم.Css چون کد نویسی هست ویدئو اموزشی میتونه کمکتون کنه چون در طول فیلم هم نکات گفته میشه و هم نتیجه کار رو میتونید ببینید.
سلام خسته نباشید
هرچی گشتم داخل آموزش های CSS خبری از آموزش ریسپانسیو کردن نبود میشه بگید این آموش داخل سایت هست یا نه؟
سلام، یکی از روش های ساخت سایت ریسپانسیو استفاده از Bootstrap هست که می توانید از طریق لینک زیر آنرا براحتی آموزش ببینید:
www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-bootstrap
با سلام ضمن تشکر از وبسایت خوبتون
من یه سوالی داشتم و اونم اینه که میشه بوسیله css کاری بکنیم که وقتی روی یک المنت هاور میکنیم , استایل یک عنصر دیگه تو صفحه تغییر کنه.(بدون کمک از جاوااسکریپت و با css تنها).
مثلا : وقتی روی div1 با ماوس میریم, رنگ پس زمینه div2 تغییر کنه.
با سلام و تشکر.
با CSS تا جایی که اطلاع دارم میشه روی المان‌های خود اون عنصر مانور داد و در واقع روی کلیک یا هاورشون کار کرد.
ولی برای المان‌های دیگه رو فکر نمی‌کنم.
معمولا برای اینطور کارها از جاوااسکریپت یا جی‌کوئری استفاده میشه.
با سلام
بنده سوالم در مورد اینه که z-index
و همچنین position:absolu teو position:relati ve به چه دردی میخوره ؟
سلام، لطفا پاسخ را در مطلب زیر مطالعه فرمایید:
beyamooz.com/css/87-advance/292-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-position-%D8%AF%D8%B1-css
عرض ادب . بنده با استفاده از CSS چگونه میتونم قسمت مربوط به ایکون های شبکه اجتماعی که در قسمت هدر لینک زیر:
http://avada.theme-fusion.com/hosting/
هستند رو هم از لحاظ قاب دایره ای که در اطراف ان ها هست و هم از لحاظ رنگ بندی انها ؟
با سلام و تشکر.
سؤالتون واضح نیست. اگه منظورتون این هست که چطور میتونید آیکن رو به صورت دایره در بیارید، برای این کار باید از خصوصیات border-radius استفاده کنید و مقدار اون رو 50% بذارید.
بیشتر توضیح بدید.
سلام
ببخشید ی سوال داشتم
خیلی از خواص css را میتوانیم با html بنویسیم
چه لزومی داره که از css استفاده کنیم؟؟؟
با سلام.
شما با استفاده از CSS خیلی میتونید تغییرات رو راحت‌تر اعمال کنید. مدیریت ظاهری سایت با CSS به شدت راحت و کارایی بیشتر میشه.
در پروژه‌ها چه معمولی و چه بزرگ با تغییر در فایل CSS، ظاهر تمامی فایلهای html تغییر خواهد کرد و این یعنی مدیریت راحت‌تر. اگر خصوصیات رو از طریق خود html بخواید اعمال کنید، برای یه تغییر جزئی باید تمامی اون فایلهای موردنیاز رو باز و تغییر رو اعمال کنید.
کدومش بهتره؟؟؟
سلام من موضوع پروژه ام طراحی سایت با css وhtml و زبان php و هیچی بلد نیستم میشه یه کتاب خیلی خوب بهم معرفی کنید.
سلام. کتاب های مورد نیاز شما در لینک زیر آماده و کامل هستند:
beyamooz.com/product/web
سلام
من css را با دریم ویور مینویسم وقتی نوشتم save میکنم
چطوری باید توی مرورگر ببینم؟
با سلام.
ابتدا فایل خودتون رو با پسوند css. ذخیره کنید و سپس در فایل html موردنظر اون رو توسط تگ link به فایل پیوست کنید. آدرس دهی رو هم دقت کنید.
<link rel="stylesheet " type="text/css" href="/file.css" >
سلام.
ابتدا بایدفایل css خود را به فایل html یا php خود اضافه کنید (ایمپورت کنید).
سلام خسته نباشین
منظورم از نرم افزار این بود که برای کدنویسی از notepad استفاده کنم یاdreamweaver یا ....
در حال حاضر دارم با notepad یاد میگیرم به نظرتون ادامه بدم ؟
ممنون
بله! پس سوالتون یه کوچولو اییراد داره. منظور شما استفاده از یک IDE مناسب برای کد زدن هست...
اگه قصد یادگیری مصرانه دارید، بهتره از یه IDE خوب استفاده کنید. دریم ویور بد نیست، اما IDEهای خیلی بهتری هم وجود داره. مثل NetBeans!!!
اگر هم IDE ساده دوست دارید، نرم افزار ++notepad خیلی خوبه.
سلام خسته نباشین
یه سوال داشتم برای یادگیری cssبهتره از چه نرم افزاری استفاده کنیم برای کسی که مبتدیه و تازه شروع کرده؟
در صورت حرفه ای شدن چی ؟
ممنون از سایت عالی و بی نقصتون
با سلام و تشکر.
CSS در واقع یک شیوه کدنویسی برای استایل دهی متون در HTML هست. نرم افزاری نیست که اون رو معرفی کرد و شما با کار توی اون نرم افزار در CSS مهارت کسب کنید.
شما میتونید با مطالعه کتاب و یا استفاده از همین سایت شروع به یادگیری CSS کنید. سوالی داشتید، من و سایر دوستان در خدمت هستیم.
End of CSS.....This SAit ...the Best...Thank You.....Boooooooos
سلام و خسته نباشید خدمت شما وبا تشکر از سایت عالیتون . یه سوال از خدمت شما داشتم . من یک نمو دارم میسازم ولی هر کاری میکنم ادامه ی منو که توی عکس زیر مشخص کردم به وجود نمیاد .
uupload.ir/files/4kdl_a.z.png
کدهای css هم اینها هستن .
li#noneStyle{ list-style:none ; display:inline; text-align:cent er; float:right;}
a#linkMenu{ text-decoration :none; background-colo r:#9e9d9d; width: 85px; display: block; height:35px; margin-top: 5px; padding-top: 15px; color: white;}
سلام ممنون
لطفا در سایت زیر که یک ادیتور آنلاین است ثبت نام کنید و کد خودتون رو به طور کامل در اونجا ذخیره کنید و لینک اون رو برای ما ارسال کنید تا دقیقا بتوانیم شما را راهنمایی کنیم:
codepen.io/
آموزش های جدیدی مانند sass و... اومده است
آیا آنها را هم نیازه یاد بگیریم،شما آموزش نمی دهید؟
با تشکر از شما
آموزش sass هم در آینده در سایت بیاموز قرار می گیره، تا اون موقع صبور باشید..
با سلام و احترام
من تازه با وب سایت شما آشنا شدم
برای من بسیار خوب و مفید است
برای تمام گردانندگان وب سایت شما آرزوی موفقیت و شادمانی می کنم
با تقدیم احترام
سلام.سایتتون خیلی خوبه اما یه انجمن کم داره.
اگه یه انجمن هم برای حل مشکلات کاربران بزارید عالی میشه
ممنون از پیشنهاد تون. انشاءاله در آینده در برنامه ی کاری قرار می‌گیرد.
سلام و وقتون بخیر؛
واقعا دست مریزاد و خسته نباشید بهتون میگم بابت سایت فوق العاده ای که ایجاد کردین. خدا خیرتون بده. میخواستم بدونم آیا اگه هنوز هم در خصوص CSS سوالی داشته باشیم میتونیم تو همین قسمت ازتون بپرسیم؟؟
و اینکه تهیه فیلم آموزشی پروژه محور در خصوص CSS به کجا رسیده؟؟
من چند تا سوال دیگه هم داشتم. اگه اشکال نداره در همین جا می پرسم.
سلام
در مورد سوالات، توجه داشته باشید که با عنوان مطلب همخوانی داشته باشد.
در مورد فیلم آموزشی CSS برنامه خاصی نداریم، فکر می کنم مطالب به اندازه کافی گویا هستند.
با تشکر
سلام خسته نباشید من میخوام یک کد بذارم تو پست ولی وقتی میذارم کد رو اجرا میکنه چکار کنم؟
میخوام مثل شما تو یک مربع کد رو بذارم
ممنون
برای اینکه کد رو قرار بدهید می بایست دکمه ی دوم از سمت چپ را از دکمه های بالای متن نقل قول انتخاب کنید.
برای قرار دادن علامت کوچکتر از ;lt& و برای قرار دادن علامت بزرگتر از ;gt& استفاده کنید.
سلام خسته نباشید بسیار سایت مفیدی دارید
من می خوام واسه سایتم یه قالب طراحی کنم
فقط یه سوال فیلم آموزشی هم دارید یا اینکه آموزش ها فقط به صورت مطلب در سایت انتشار یافته اند.
سلام، ان شاء الله در آینده فیلم های آموزشی نیز در اختیار کاربران قرار داده می شود.
با سلام
لطفاً روش قراردادن کدهای سی اس اس و ایجاد کلاس در جوملا را توضیح بدین.
برای قرار دادن کلاس در جوملا باید کد های خود را در فایل template.css قرار بدید ....
می توانید از فایرباگ استفاده کنید و کلاس ها رو ببینید و اونا رو در فایلی که گفتم بازنویسی کنید ...
این آموزش ها در قسمت جوملا اومده .. البته در دست تکمیل هست .. اونا رو دنبال کنید مشکل مرتفع خواهد شد
سلام، بصورت معمول عمل می کنیم ...!
1- تنظیم کلاس برای ماژول: تصور بفرمایید که در قسمت ماژول ها قصد ساخت یک ماژول جدید از نوع آمار سایت یا هر چیز دیگه ای رو داریم. اگر دقت بفرمایید در قسمت "گزینه های پیشرفته" می توانید نام کلاس Set کنید. یک نام دلخواه تنظیم کنید. این نام بعنوان پیشوند استفاده خواهد شد، بنابراین باید نام کامل کلاس رو با View Source گرفتن از خروجی سایت، در آورید.
2- ذکر کلاس در یکی از فایل های CSS سایت: حالا باید کلاس تون را در یکی از فایل های CSS قالبتون ذکر کنید و سپس فایل رو ذخیره کنید. بنابراین از منوی افزونه ها، گزینه "مدیریت قالب ها" رو انتخاب کنید در جدول ظاهر شده در ستون قالب روی نام قالب فعال کلیک کنید و ...
با سلام
ممنون از پاسختون.
1- نام کلاس رو باید با پسوند .css ثبت کنم در ماژول یا نیازی به پسوند مذکور نیست؟
2- فایل css مربوطه باید در پوشه template مربوطه قرار بگیره یا باید فایل رو در پوشه مربوط به ماژولی که میخواهیم css روی اون اعمال بشه بزارم؟
Desktop\Untitled.jpg
به نقل از مجتبی :
اگر می خواهید ماژول طراحی کنید باید پوشه ی assets\css در ماژول باشه ... اگر می خواهید قالب طرحی کنید باید در پوشه ی قالب در پوشه ی css قرار دهید . در ضمن باید آن را با دستورات مخصوص جوملا وارد کنید
به نقل از cenazakhar:
سلام، اگر برای عنصر div، خصوصیت width تنظیم نشده باشد، تمام طول سطری که در آن قرار دارد را به خود اختصاص می دهد، بنابراین در عرض مشکلی نخواهیم داشت. و اما تغییر اندازه div داخلی، اگر منظورتون تنظیم خصوصیت resize است، بنده مورد شما رو تست کردم، div والد به همان اندازه در عرض و ارتفاع تغییر می کند. شاید بهتر باشه زحمت بکشید و کد html رو برام ارسال کنید.
با سلام ، خیلی خوشحالم که تو این موقعیت که نیاز دارم یه سری مباحث رو خیلی فوری آموزش ببینم ، با وب سایت شما آشنا شدم ، امیدوارم به کارتون ادامه بدید و اینجا رو تبدیل به یه منبع قوی و جامع برای آموزش کنید :-)