آموزش 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 گیگابایت (کلیک کنید +) |
در notpad ، با پسوند html نمایش داده شد ولی css رو نمیدونم چجوری ببینم
سپاس
1- فایل CSS را با پسوند css. ذخیره کنید و در کنار فایل html قرار دهید.
2- فایل html را در notepad باز کنید و از کد زیر برای لینک کردن فایل css به فایل html استفاده کنید:
[dir=#555]<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css" />
</head>[/dir]
لطفا منو راهنمایی کنید
ترتیب اعمال استایل بر فایل اچتمل بصورت زیر هس؟؟؟
اول درون تگی بعد اکسترنال و بعد اینترنال؟؟؟؟
1. استایل های inline
2. استایل های اکسترنال و اینترنال، که در بخش head قرار می گیرند و اولویت اونها به ترتیب قرارگیری اونها بستگی داره.
3. استایل های پیش فرض مرورگر
من چطور تو صفحه وب ام یک بخش نظر خواهی مثل وبسایت شما درست کنم که مردم نظرات و پرسش های خود را بکنند
من یه سایت علمی میسازم که اخبار تکنولوژی رو میذاره من می خوام از وسط یه خط بکشم که صفحه اصلی وب منو به دو بخش تقسیم کنه اصلا من باید چطوری اون خطو رسم کنم که صفحه رو به دو بخش از وسط تقسیم کنم
)وبسایت من روی هیچ هاست قرار ندارد
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 خبری از آموزش ریسپانسیو کردن نبود میشه بگید این آموش داخل سایت هست یا نه؟
www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-bootstrap
من یه سوالی داشتم و اونم اینه که میشه بوسیله css کاری بکنیم که وقتی روی یک المنت هاور میکنیم , استایل یک عنصر دیگه تو صفحه تغییر کنه.(بدون کمک از جاوااسکریپت و با css تنها).
مثلا : وقتی روی div1 با ماوس میریم, رنگ پس زمینه div2 تغییر کنه.
با CSS تا جایی که اطلاع دارم میشه روی المان‌های خود اون عنصر مانور داد و در واقع روی کلیک یا هاورشون کار کرد.
ولی برای المان‌های دیگه رو فکر نمی‌کنم.
معمولا برای اینطور کارها از جاوااسکریپت یا جی‌کوئری استفاده میشه.
uupload.ir/files/4kdl_a.z.png
کدهای css هم اینها هستن .
[dir=#555]li#noneStyle{ list-style:none; display:inline; text-align:center; float:right;}
a#linkMenu{ text-decoration:none; background-color:#9e9d9d; width: 85px; display: block; height:35px; margin-top: 5px; padding-top: 15px; color: white;}[/dir]
لطفا در سایت زیر که یک ادیتور آنلاین است ثبت نام کنید و کد خودتون رو به طور کامل در اونجا ذخیره کنید و لینک اون رو برای ما ارسال کنید تا دقیقا بتوانیم شما را راهنمایی کنیم:
codepen.io/
آیا آنها را هم نیازه یاد بگیریم،شما آموزش نمی دهید؟
آموزش sass هم در آینده در سایت بیاموز قرار می گیره، تا اون موقع صبور باشید..
من تازه با وب سایت شما آشنا شدم
برای من بسیار خوب و مفید است
برای تمام گردانندگان وب سایت شما آرزوی موفقیت و شادمانی می کنم
با تقدیم احترام
بنده سوالم در مورد اینه که z-index
و همچنین position:absoluteو position:relative به چه دردی میخوره ؟
beyamooz.com/css/87-advance/292-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-position-%D8%AF%D8%B1-css
http://avada.theme-fusion.com/hosting/
هستند رو هم از لحاظ قاب دایره ای که در اطراف ان ها هست و هم از لحاظ رنگ بندی انها ؟
سؤالتون واضح نیست. اگه منظورتون این هست که چطور میتونید آیکن رو به صورت دایره در بیارید، برای این کار باید از خصوصیات border-radius استفاده کنید و مقدار اون رو 50% بذارید.
بیشتر توضیح بدید.
ببخشید ی سوال داشتم
خیلی از خواص css را میتوانیم با html بنویسیم
چه لزومی داره که از css استفاده کنیم؟؟؟
شما با استفاده از CSS خیلی میتونید تغییرات رو راحت‌تر اعمال کنید. مدیریت ظاهری سایت با CSS به شدت راحت و کارایی بیشتر میشه.
در پروژه‌ها چه معمولی و چه بزرگ با تغییر در فایل CSS، ظاهر تمامی فایلهای html تغییر خواهد کرد و این یعنی مدیریت راحت‌تر. اگر خصوصیات رو از طریق خود html بخواید اعمال کنید، برای یه تغییر جزئی باید تمامی اون فایلهای موردنیاز رو باز و تغییر رو اعمال کنید.
کدومش بهتره؟؟؟
beyamooz.com/product/web
اگه یه انجمن هم برای حل مشکلات کاربران بزارید عالی میشه
واقعا دست مریزاد و خسته نباشید بهتون میگم بابت سایت فوق العاده ای که ایجاد کردین. خدا خیرتون بده. میخواستم بدونم آیا اگه هنوز هم در خصوص CSS سوالی داشته باشیم میتونیم تو همین قسمت ازتون بپرسیم؟؟
و اینکه تهیه فیلم آموزشی پروژه محور در خصوص CSS به کجا رسیده؟؟
من چند تا سوال دیگه هم داشتم. اگه اشکال نداره در همین جا می پرسم.
در مورد سوالات، توجه داشته باشید که با عنوان مطلب همخوانی داشته باشد.
در مورد فیلم آموزشی CSS برنامه خاصی نداریم، فکر می کنم مطالب به اندازه کافی گویا هستند.
با تشکر
میخوام مثل شما تو یک مربع کد رو بذارم
ممنون
برای قرار دادن علامت کوچکتر از ;lt& و برای قرار دادن علامت بزرگتر از ;gt& استفاده کنید.
من css را با دریم ویور مینویسم وقتی نوشتم save میکنم
چطوری باید توی مرورگر ببینم؟
ابتدا فایل خودتون رو با پسوند css. ذخیره کنید و سپس در فایل html موردنظر اون رو توسط تگ link به فایل پیوست کنید. آدرس دهی رو هم دقت کنید.
[dir=#555]<link rel="stylesheet" type="text/css" href="/file.css">[/dir]
ابتدا بایدفایل css خود را به فایل html یا php خود اضافه کنید (ایمپورت کنید).
[color=#FF0000][/color]
منظورم از نرم افزار این بود که برای کدنویسی از notepad استفاده کنم یاdreamweaver یا ....
در حال حاضر دارم با notepad یاد میگیرم به نظرتون ادامه بدم ؟
ممنون
اگه قصد یادگیری مصرانه دارید، بهتره از یه IDE خوب استفاده کنید. دریم ویور بد نیست، اما IDEهای خیلی بهتری هم وجود داره. مثل NetBeans!!!
اگر هم IDE ساده دوست دارید، نرم افزار ++notepad خیلی خوبه.
یه سوال داشتم برای یادگیری cssبهتره از چه نرم افزاری استفاده کنیم برای کسی که مبتدیه و تازه شروع کرده؟
در صورت حرفه ای شدن چی ؟
ممنون از سایت عالی و بی نقصتون
CSS در واقع یک شیوه کدنویسی برای استایل دهی متون در HTML هست. نرم افزاری نیست که اون رو معرفی کرد و شما با کار توی اون نرم افزار در CSS مهارت کسب کنید.
شما میتونید با مطالعه کتاب و یا استفاده از همین سایت شروع به یادگیری CSS کنید. سوالی داشتید، من و سایر دوستان در خدمت هستیم.
من می خوام واسه سایتم یه قالب طراحی کنم
فقط یه سوال فیلم آموزشی هم دارید یا اینکه آموزش ها فقط به صورت مطلب در سایت انتشار یافته اند.
لطفاً روش قراردادن کدهای سی اس اس و ایجاد کلاس در جوملا را توضیح بدین.
می توانید از فایرباگ استفاده کنید و کلاس ها رو ببینید و اونا رو در فایلی که گفتم بازنویسی کنید ...
این آموزش ها در قسمت جوملا اومده .. البته در دست تکمیل هست .. اونا رو دنبال کنید مشکل مرتفع خواهد شد
1- تنظیم کلاس برای ماژول: تصور بفرمایید که در قسمت ماژول ها قصد ساخت یک ماژول جدید از نوع آمار سایت یا هر چیز دیگه ای رو داریم. اگر دقت بفرمایید در قسمت "گزینه های پیشرفته" می توانید نام کلاس Set کنید. یک نام دلخواه تنظیم کنید. این نام بعنوان پیشوند استفاده خواهد شد، بنابراین باید نام کامل کلاس رو با View Source گرفتن از خروجی سایت، در آورید.
2- ذکر کلاس در یکی از فایل های CSS سایت: حالا باید کلاس تون را در یکی از فایل های CSS قالبتون ذکر کنید و سپس فایل رو ذخیره کنید. بنابراین از منوی افزونه ها، گزینه "مدیریت قالب ها" رو انتخاب کنید در جدول ظاهر شده در ستون قالب روی نام قالب فعال کلیک کنید و ...
ممنون از پاسختون.
1- نام کلاس رو باید با پسوند .css ثبت کنم در ماژول یا نیازی به پسوند مذکور نیست؟
2- فایل css مربوطه باید در پوشه template مربوطه قرار بگیره یا باید فایل رو در پوشه مربوط به ماژولی که میخواهیم css روی اون اعمال بشه بزارم؟
Desktop\Untitled.jpg
اگر می خواهید ماژول طراحی کنید باید پوشه ی assets\css در ماژول باشه ... اگر می خواهید قالب طرحی کنید باید در پوشه ی قالب در پوشه ی css قرار دهید . در ضمن باید آن را با دستورات مخصوص جوملا وارد کنید
سلام، اگر برای عنصر div، خصوصیت width تنظیم نشده باشد، تمام طول سطری که در آن قرار دارد را به خود اختصاص می دهد، بنابراین در عرض مشکلی نخواهیم داشت. و اما تغییر اندازه div داخلی، اگر منظورتون تنظیم خصوصیت resize است، بنده مورد شما رو تست کردم، div والد به همان اندازه در عرض و ارتفاع تغییر می کند. شاید بهتر باشه زحمت بکشید و کد html رو برام ارسال کنید.