آموزش css
آموزش css:
چرا از css استفاده میکنیم؟
CSS مخفف Cascading Style Sheets است. CSS برای تعیین سبک صفحات وب، از جمله طراحی، طرح بندی و تغییرات در صفحه نمایش برای دستگاه های مختلف و اندازه صفحه نمایش استفاده می شود.
CSS، یک ابزار کلیدی در طراحی وب است.سریع ترین راه یادگیری CSS، این است که آشنا به HTML5 و پایه های وب باشید.
CSS یک زبان است که به سبک HTML عمل می کند.CSS توصیف می کند که چگونه عناصر HTML باید نمایش داده شوند.
این آموزش به شما, CSS را از ابتدایی تا پیشرفته آموزش خواهد داد.
به این مثال دقت کنید:
نحوه ی انتخاب عنصر:
بیشتر بخوانید:
اصول طراحی یک نرم افزار خوب
نحوه ی انتخاب شناسه:
در انتخاب شناسه ID یک عنصر HTML برای انتخاب یک عنصر خاص استفاده می شود.
شناسه یک عنصر باید در یک صفحه منحصر به فرد باشد، بنابراین انتخاب شناسه برای انتخاب یک عنصر منحصر به فرد استفاده می شود!
برای انتخاب یک عنصر با یک شناسه خاص، یک هشتگ (#) بگذارید و بعد از شناسه عنصر، قاعده style زیر به عنصر HTML با id = “para1” اعمال خواهد شد:
نحوه ی انتخاب کلاس (برای همه عناصر):
انتخاب کلاس انتخاب عناصر با یک ویژگی کلاس خاص است.برای انتخاب عناصر با یک کلاس خاص، یک حرف (.) را بزنید و سپس نام کلاس را بنویسید.در مثال زیر، تمام عناصر HTML با “class = “center قرمز و درمحور مرکزی خواهند بود.
نحوه ی انتخاب کلاس (فقط برای عناصر <p>):
شما همچنین می توانید مشخص کنید که فقط عناصر HTML خاص باید توسط یک کلاس تحت تاثیر قرار بگیرند. در مثال زیر، تنها عناصر <p> با “class = “center در مرکز می باشند:
نحوه ی انتخاب گروه بندی:
یک مجموعه قوانین CSS شامل یک انتخابگر و یک بلوک اعلامیه است:
هر بلوک اعلامیه حاوی یک یا چند اعلامیه جدا از هم است.
هر یک از اعلان ها شامل یک نام مالک CSS و یک مقدار است که توسط یک کولون جدا شده است.
یک اعلامیه CSS همیشه با یک سمیکولن به پایان می رسد، و بلوک های اعلامیه توسط پرانتز احاطه شده اند.
در مثال زیر، تمام عناصر <p> به صورت مرکزی با رنگ متن قرمز قرار خواهند گرفت:
بیشتر بخوانید:
ابداع هوش مصنوعی جدید گوگل با قابلیت خلق هوش مصنوعی قوی تر
انتخابگرهای CSS برای پیدا کردن (یا انتخاب) عناصر HTML بر اساس نام، شناسه، کلاس، صفت و غیره استفاده می شوند.
نحوه ی انتخاب عنصر:
در انتخاب عنصر،عناصر را براساس نام عنصر انتخاب می کنند.
نحوه ی انتخاب گروه بندی:
اگر عناصری با همان تعاریف داشته باشید، مانند این است:
بهتر است گروهها را انتخاب كنید تا كد را به حداقل برسانید. برای انتخابگرهای گروه، هر انتخابگر را با کاما جدا کنید.در مثال زیر، selectors از کد بالا را دسته بندی کرده ایم:
- CSS با * /شروع می شود و با / * به پایان می رسد .
سه روش برای وارد کردن CSS وجود دارد:
- ورق سبک خارجی
- ورق سبک داخلی
- سبک درونی
ورق سبک خارجی:
با یک ورق سبک خارجی، می توانید یک وب سایت کامل را فقط با یک فایل تغییر دهید! هر صفحه حاوی یک عنصر <link>است. عنصر <link> در قسمت <head> قرار دارد.
یک ورق سبک خارجی را می توان در هر ویرایشگر متن نوشت.این فایل نباید حاوی تگ های HTML باشد.فایل پرونده باید با یک پسوند css ذخیره شود.
ورق سبک داخلی:
اگر یک صفحه تنها دارای یک سبک منحصر به فرد باشد، می توان از یک ورق سبک داخلی استفاده کرد.در سبک های داخلی درون عنصر <style>، داخل بخش <head> یک صفحه HTML تعریف می شوند:
سبک های درونی:
یک سبک درونی می تواند برای اعمال یک سبک منحصر به فرد برای یک عنصر استفاده شود.برای استفاده از سبک های درون خطی، ویژگی سبک را به عنصر مربوطه اضافه کنید. خصوصیات سبک می تواند شامل هر ویژگی CSS باشد. مثال زیر نشان می دهد که چگونه رنگ و حاشیه چپ یک عنصر <h1> را تغییر دهید:
صفحات سبک چندگانه:
اگر برخی از خواص برای همان انتخاب کننده (عنصر) در ورق های مختلف سبک تعریف شده باشد، از آخرین ورق خواندن استفاده می شود.
به طور مثال: فرض کنید که یک ورقه سبک خارجی دارای سبک زیر برای عنصر <h1> است.
سپس، فرض کنید که یک سبک داخلی نیز دارای سبک زیر برای عنصر <h1> است:
اگر سبک داخلی پس از پیوند به صفحه سبک خارجی تعریف شود، عناصر <h1> “نارنجی” خواهند بود:
با این حال، اگر سبک داخلی قبل از پیوند به جدول سبک خارجی تعریف شده باشد، عناصر <h1> به صورت “navy” خواهند بود:
برای مشاهده سایر مقالات این سایت اینجا کیلیک کنید.
ارسال دیدگاه