با مقالات این سری آموزشی :
- آشنایی با CSS و شروع کار با آن
- آموزش انتخابگر ها (Selectors) در CSS
- روش های اضافه کردن CSS به سایت
- آموزش قرار دادن تصویر پس زمینه در CSS
سه راه برای اضافه کردن کدهای css به صفحه داریم :
- شیوه نامه خارجی یعنی در یک فایل مجزا(External style sheet)
- شیوه نامه داخلی (Internal style sheet)
- اعمال به خود عنصر(Inline style)
شیوه نامه خارجی
این نوع بهترین حالت برای استفاده در سایتی با چندین صفحه است،چون با یک تغییر کوچک این تغییر در همه صفحه های سایت (که فایل CSS بهشون الحاق شده) اعمال میشه . برای لینک کردن فایل css مجزا به صفحه باید از تگ <link> استفاده کنید ،به این شکل:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
این فایل مجزای CSS رو می تونید با هر ادیتوری بنویسید و حتما باید پسوند فایل رو .CSS بزارید . در ضمن هیچ کد html نباید در اون باشه و فقط کد css رو قبول می کنه. مثل این :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}هیچ وقت بین مقدار خصیصه و واحد اون مقدار فاصله قرار ندید (مثل این :
margin-left: 20 px;) بلکه حتما باید به این صورت نوشته بشه :margin-left: 20px;)
شیوه نامه داخلی
این نوع استایل دهی بهتره زمانی استفاده شود که یک استایل شیت بیشتر ندارین و یک صفحه یا چند صفحه محدود دارید ،اون موقع از این روش استفاده میکنیم و داخل همون فایل HTML و با کمک تگ <style> کدها رو مینویسیم.این تگ رو باید داخل تگ head بذارید:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>شیوه نامه Inline
اگر از این روش استفاده کنید بسیاری از مزیتهای اصلی css رو از دست خواهید داد! چون محتوا رو با نحوه ی نمایش قاطی میکنه (اگه با MVC آشنا باشید بهتر متوجه میشید این بخش رو) . به هرحال برای استفاده از این روش باید از خاصیت style برای عنصر مورد نظر استفاده کنید:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
چندتا نکته:
- هر سه ی این روشها رو میتونید با هم به کار ببرید.
- اگر برای یک عنصر صفحه مثل تگ <h1> با هر سه روش استایل تعریف کنید تکلیف چیه ؟ اون موقع بحث اولویت میاد وسط . به این صورت که نزدیک ترین استایل به عنصر در اولویته یعنی :
- اول: Inline style
- دوم: Internal style sheet
- سوم: External style sheet
- چهارم: پیشفرضهای خود مرورگر
یادتون باشه که تگ های <link> و <style> رو داخل تگ <head> استفاده کنید .
سلام وقت بخیر. سوالی داشتم درمورد اسلایدر
https://github.com/jnicol/particleground
فایل زیپ رو اکسترکت کردم. ممکنه راهنمایی کنید که به چه شکل این اسلایدر رو در صفحه اول سایتم نمایش بدم؟
مطالب فوق‌العاده مفید هستن
ممنون!
عالی بود عالی..
فقط کدای جاواشو سریع بزنید تا کلس پلتفورم اندرویدش کار کنه مرسیییی
سلام من دانشجو کاردانی رشته نرم افزار کامپیوترم باید یه سایت موسیقی برای واحد پروژه ام طراحی کنم میشه منو راهنمایی کنید؟
اگه میشه به ایمیلم پیام بدین تا ایدی تلگرامم رو بفرستم ممنون