سری آموزش های فصل پنجم (HTML):
بخش اول :شیوه نامه ها انواع و خواص
دوم: خواص شیوه نامه، رنگ و زمینه
سوم : خواص شیوه نامه ها خواص متنی
چهارم : خواص شیوه نامه ها ؛ کادر بندی
پنجم: خواص کادرها (مرز کادرها)
ششم : خواص کادر بندی (فاصله گذاری)
هفتم : خواص شیوه نامه (خواص دسته بندی و لیستها)
آموزش HTML : کاربرد شیوه نامه دستوری
سلام خدمت همراهان عزیز یکشنبه ها با آموزش زبان برنامه نویسی (HTML) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی هفته ی قبل مراجعه فرمایید .
قواعد پیشرفته شیوه نامه :
همانطور که دیدید استفاده از ID و CLASS قابلیت انعطاف زیادی در ایجاد قواعد شیوه نامه به وجود می آورد اما انواع دیگری از قواعد نیز قابل استفاده اند. به وجود می آورد اما انواع دیگری از قواعد نیز قابل استفاده اند . به عنوان مثال با دستور <STRONG> که در دستور <P> ظاهر می شود طوری می توان رفتار کر دکه گویی یک دستور مستقل در هر جای دیگری از برنامه ظاهر شده است.
برای ایجاد چنین قاعده ای از مفهوم بستر کاربرد استفاده می شود براساس این مفهوم می توان ترتیب تو در تویی قواعد را تعیین کرد. دستور زیر را ببینید:
| P STRONG {background : yellow} |
|---|
این قاعده موجب می شود هر جا که دستور < STRONG> در دستور <P> ظاهر می شود رنگ زمینه اش زرد باشد زیرا از ویژگی وراثت استفاده می شود.
برنامه های HTML ساختار های ضمنی دارند با دستور <HTML> ساختار های ضمنی دارند با دستور <HTML> شروع می شوند . در داخل این دستور ، دستورات <HEAD> و <BODY> قرار می گیرند که به ترتیب ممکن است شامل دستورات <TITLE> و <P> باشند ساختار برنامه های HTML همانند درخت خانوادگی است . درخت تجزیه برنامه ای که در زیر آمده است. در شکل زیر نشان داده شده.
در شکل زیر دقت کنید که دستور <B> در داخل دستور <P> و این دستوردر داخل دستور<BODY> و این دستور نیز در داخل دستور <HTML> قرار دارد. اگر شیوه نامه ای را برای دستور <P> انتخاب کنید چه اتفاقی می افتد؟
آیا این قاعده به دستور <B> اعمال می شود؟ گاهی اعمال خواهد شد این همان ایده وراثت است.
در بعضی موارد اگر شیوه یکسان به چند دستور اعمال شود مفید تر از حالتی است که آن شیوه به طور جداگانه به هر دستور اعمال گردد و یا کلاس خاصی ایجاد شود. در چنین مواردی ، از نشانه گذاری ساده تری به نام دسته بندی دستورات استفاده می شود.
به عنوان مثال اگر بخواهید دستورات <H1> ، <H2> ، <H3> از رنگ زمینه و متن مشابهی استفاده کنند از قاعده زیر استفاده کنید:
| H1 , H2 ,H3 { background : yellow ; color : black} |
|---|
برای اینکه اندازه هر یک از عناوین متفاوت باشد. می توانید از قواعد دیگری استفاده کنید :
| H1 {font-size: 200%}
H2{ font-size :150%} H3{ font-size :125%} |
|---|
وقتی قواعد گروه بندی و سایر قواعد در برنامه وجود داشته باشند باهم ترکیب می شوند و نتیجه ترکیب شیوه نامه کلی را ارائه می کند. اما در موراد زیر چه اتفاقی می افتد؟
| H1 , H2 ,H3 { background : yellow ; color : black}
H1 { background : green} |
|---|
با اجرای این دستورات رنگ زمینه دستور <H1> سبز است یا زرد ؟ شاید بگویید که رنگ آن سبز خواهد بود زیرا بعد از رنگ زرد ذکر شده است اما اگر این دو دستور جابه جا شوند چه اتفاقی می افتد ؟ این ایده را آبشار گویند و کلید توانایی قاعده شیوه نامه است.
اگر چنین قاعده شیوه نامه وجود داشته باشد ایده آبشاری تعیین می کند که کدام قاعده اعمال شود . به عنوان مثال یک برنامه HTML ممکن است برای یک دستور بخصوص شامل شیوه نامه دستوری شیوه نامه صفحه ای و شیوه نامه خارجی باشد. حتی ممکن است.
کاربر یا مرورگر نیز شیوه نامه ای را برای آن دستور اعلان کرده باشد. از بین همه اینها سرانجام یک شیوه نامه (احتمالا شیوه نامه ترکیبی ) استفاده می گردد. در استاندارد CSS شیوه نامه مرورگر از اهمیت کمی برخوردار است ، بعد از آن شیوه نامه کاربر قرار می گیرد و شیوه نامه طراح از همه مهمتر است.
از دیدگاه طراح سایت اولویت بندی مناسب است. در داخل خود برنامه HTML قواعد دستوری مثل آنهایی که در صفت STYLE ذکر می شوند. نسبت به شیوه نامه صفحه ای اولویت دارند و شیوه نامه صفحه ای نسبت به شیوه نامه خارجی اولویت دارند.
قاعده کلی :
هرچه شیوه نامه به دستور نزدیکتر باشد اولویت آن بیشتر است . مفهوم آبشار و وراثت قابلیت انعطاف زیادی به شیوه نامه داده است.
مثال:
برنامه HTML که با استفاده از شیوه نامه صفحه ای و شیوه نامه دستوری یک صفحه وب ساده را طراحی می کند و کاربرد این شیوه نامه ها را نشان می دهد.
| <“doctype html public”-/w3c//dtd html 4.0 transitional//en!>
<html> <head> <title> simple css example </title> <“style Type=”text/css> –!> body {background : black} DIV.PAGE { background : #FFD040 ; color:black; margin: 50px 10px 50px 10 px; padding:10px 10px ; width:100%; height: 100%} h1 {font-family: comic sans ms,cursive ; font-size:24pt ; text-align:center} block {color:black; background : white}. white{ color:white; background :black}. P {font-family: san-serif ,Arial ; font-size:16pt ; text-align:justify; line-height: 200%;text-indent:20px; font-style: oblique} style{color:blue; font-family: arial; font-style:oblique}. size{ font-size:x-large}. letterspace {letter-spacing:15pt}# <– <style/> <head/> <body> <“div class=”page> <h1> <span class=”black”> Css </span> <span class=”white”> Fun </span> </h1> <HR> <P> with style sheets , you will be able to control the pressentation of web pages with precision style sheets can be used to set everything from <span class=”style”> font styles</span> and <span class=”size”> sizes </span> to <span id=”letterspace”> letterspacing </span> and line heights <p/> <div/> <body/> <html/> |
|---|
نتیجه کار در شکل زیر آمده است.
برگرفته از :
کتاب راهنمای جامع (HTML, BHTML, XML)
دکتر عین الله جعفر نژاد قمی
پاسخ به سوال دوستان :
شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟
دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از
تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.
یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.
توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت
برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.
برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact