دسته ها
دسته‌ها
- php (1)
- امنیت (6)
- اندروید (3)
- اینترنت (2)
- برنامه نویسی (14)
- بوت استرپ (1)
- پایتون (1)
- تازه ها (22)
- ترفند ها (30)
- تکنولوژی های جدید (1)
- جاوا (2)
- جاوا اسکریپت (2)
- سئو (1)
- سخت افزار (4)
- صنعت بازی (1)
- صنعت رباتیک (1)
- طراحی وب (14)
- عکاسی (1)
- فضاهای ذخیره سازی (1)
- فلاتر (1)
- گوشی های هوشمند (1)
- متفرقه (1)
- موبایل (3)
- نرم افزار (17)
- هوش مصنوعی (4)
- وب (1)
- وردپرس (7)
- ویدئو های آموزشی (24)
استایل ها
CSS مخفف عبارت Cascading Style Sheets است و در واقع زبان تصویری وب است. به وسیله آن می توانیم نحوه نمایش صفحات HTML را طراحی کنیم. CSS این امکان را به ما می دهد که داده صفحه را (که توسط HTML سازماندهی می شود) از استایل صفحه (که توسط CSS سازماندهی می شود) جدا کنیم. در این درس با موستانگ همراه باشید تا استفاده از css را بیاموزیم.
دلیلی که CSS را آبشاری یا به اصطلاح Cascading می نامند، در نحوه تعریف استایل ها برای استفاده است. هر کدام از عنصرهای HTML، استایل های خود را طبق مجموعه ای از اولویت ها، از کمترین تا بیشترین و به روشی آبشاری به ارث می برند.
تعدادی از این اولویت ها عبارتند از:
- استایل پیش فرض مرورگر
- استایل تعریف شده در صفحه
- برخی از استایل ها، همانند فونت، توسط عنصرهای فرزند به ارث برده می شوند.
- آخرین استایلی که لود می شود، بر روی عنصر اعمال خواهد شد.
- انتخاب یک نوع عنصر (مثلاً، استایل دهی تمامی عناصر
<footer>) - انتخاب یک کلاس (مثلاٌ، استایل دهی همه عناصر main. )
- انتخاب یک ID ، برای استایل دهی یک عنصر خاص در صفحه
- نوع رسانه (بعداً توضیح داده خواهد شد)
- تعریف یک CSS خاص برای یک عنصر توسط ویژگی style
- استفاده از important! (این عبارت باعث لود استایل در آخرین مرحله و در نتیجه اِعمال آن به عنصر می شود.)
تعریف یک استایل ( CSS )
CSS را می توان با 4 روش زیر تعریف کرد:
1. Inline
برای استفاده از این روش از ویژگی style استفاده کنید:
<p>This is the default serif font. It is commonly used in
printed media for better readability, since letters
are more distinct in serif fonts.</p>
<p style="font-family: sans-serif">This is a sans-serif font.
It is commonly used in screens because it is hard
for screens to render letters with such great detail.</p>
2. استفاده از تگ CSS
استفاده از روش inline برای تعریف استایل ها اصلاً پیشنهاد نمی شود. بنابرین تا جایی که امکان دارید از آن پرهیز کنید. بهتر است تا ابتدا یک استایل را جدا تعریف کرده و سپس در تگ های مختلف از آن استفاده کنید.
به مثال زیر توجه کنید:
<!DOCTYPE html>
<head>
<style>
.nice {
font-family: sans-serif;
}
</style>
</head>
<body>
<p>This is the default serif font. It is commonly used in
printed media for better readability, since letters
are more distinct in serif fonts.</p>
<p class="nice">This is a sans-serif font.
It is commonly used in screens because it is hard
for screens to render letters with such great detail.</p>
</body>
3. استفاده از یک استایل شیت مجزا
می توانید در فایلی مجزا، یک استایل شیت را تعریف کرده (معمولاً با استفاده از پسوند css. ) و سپس آن را در فایل خود لود نمایید.
در زیر مثالی از تعریف همان کلاس CSS مثال قبل را مشاهده می کنید، اما این بار در فایلی به نام style.css:
.nice {
font-family: sans-serif;
}برای لود کردن فایل CSS، باید از تگ <link> طبق شیوه ی زیر استفاده کنیم:
<link rel="stylesheet" href="nice.css">
4. دسترسی به وسیله برنامه نویسی
عنصرهای HTML دارای ویژگی style هستند که می توانید از آن ها برای اضافه کردن استایل با برنامه نویسی استفاده کنید.
به عنوان مثال:
<!DOCTYPE html>
<body>
<p id="serif-text">This is the default serif font. It is commonly used in
printed media for better readability, since letters
are more distinct in serif fonts.</p>
<p class="nice" id="sans-serif-text">This is a sans-serif font.
It is commonly used in screens because it is hard
for screens to render letters with such great detail.</p>
<script>
var sansSerifText = document.getElementById("sans-serif-text");
sansSerifText.style.fontFamily = "sans-serif";
</script>
</body>
در نهایت
[*] در این درس، با مفهوم مهمی در استایل دهی عناصر html آشنا شدیم: یعنی CSS و دیدیم که چطور می توان این کار را به روش های مختلفی انجام داد.
[*] سوالات و نظرات خود را می توانید در پایین این نوشته و در قسمت دیدگاه ها ثبت کنید. همچنین، در قسمت مانژ می توانید سوالات خود را قرار دهید. تیم متخصصان برنامه نویسی موستانگ ، پاسخگوی شما خواهند بود.
