7 ) صفت عمومی style :


🌟  چنانچه قبلا بیان کردیم ، html قابلیت این را دارد که تکنولوژی های مختلف به آن ضمیمه شود . یکی از این تکنولوژی ها ، زبان css است .



🌟  زبان css ، یک زبان برای استایل دهی به المان ها می باشد . در واقع نشانه گذاری محتوا و قرارگرفتن در ظرف المان ها ، کار html ، و چیدن ، آرایش و زیباسازی آنها وظیفه ی استایل های زبان css است .



🌟  به طور خلاصه ما ابتدا محتوایمان را در المان می ریزیم و سپس با کمک استایل های css ، هم در نحوه ی چیده شدن المان ها در صفحه و هم بسیاری خصوصیت های دیگر محتوای آن المان ها ، تغییر ایجاد می کنیم .



🌟  هدف آموزشی این درس و حتی این دوره ، یادگیری  زبان css نیست . فقط این نکته را باید بدانیم که دستورات css ، وظیفه ی چیدن محتوا ، آرایش و تغییر خصوصیت های آن را بر عهده دارند .



🌟  چنانچه در آینده به طور مفصل حواهد آمد ، این دستورات را به سه روش می توان به فایل html و المان های آن نسبت داد و ضمیمه کرد .


1 )  در فایل خارجی ( external style ) : یعنی کدهای css را در یک فایل جداگانه بنویسیم و لینک آن فایل را با استفاده از تگ لینک در تگ head قرار دهیم .


2 )  در تگ استایل ( internal style ) : یعنی کدهای css را در درون تگ style و درون فایل html قرار دهیم .


3 )  در المان موردنظر و درون صفت style ، ( روش inline style ) : یعنی کدهای css را درون صفت عمومی style المان بنویسیم . مثلا می خواهیم دو قطعه کد تغییر رنگ و تغییر اندازه ی فونت را به المان body دهیم .


<body style="color:red;font-size:18px;">content</body>


این تغییر رنگ و اندازه ی فونت ، در کل محتوای متنی المان body اثر می گذارد .


🌟  ساختار صفت عمومی style : 


<element style="css_styles" >


🌟 از نظر اولویت اثرگذاری استایل ها ، ابتدا با inline بعد با internal و در آخر با external می باشد . مثلا اگر در هر یک از سه حالت رنگی برای المان مشخص شود ، آن رنگی که به صورت inline تعیین شده اعمال می شود . اگر نبود رنگی که به صورت internal تعیین شده اعمال می شود . و اگر نبود آن رنگی که به صورت external تعیین شده اعمال می شود .


🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .


🌟 مثال عملی : تغییر فونت و اندازه متن hello world موجود در تگ body :

1 )  نوت پد را باز کنید و قطعه کدهای زیر را در آن تایپ کنید !

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
hello world !
</body>
</html>

می خواهیم به استفاده از روش inline و صفت عمومی style ،  رنگ و اندازه متن را تغییر دهیم . فرض می کنیم css بلدیم و می دانیم قطعه کد های مورد نظر برای تغییر رنگ و اندازه متن چیست . حالا کافیست این کد ها را درون صفت style المان body قرار دهیم .

<!DOCTYPE HTML>
<html>
<head>
</head>
<body style="color:red;font-size:18px;">
hello world !
</body>
</html>

2 ) اکنون فایل را با نام دلخواه و پسوند html. در یک مکانی ذخیره کنید و آن را با مروگر باز کنید

مشاهده می کنید که رنگ و اندازه متن تغییر کرده است .


برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.