سری آموزش های فصل پنجم:
آموزش HTML:شیوه نامه ها انواع و خواص
عنوان آموزش امروز:
شیوه نامه آبشاری
انواع شیوه نامه ها
خواص شیوه نامه
سلام خدمت همراهان عزیز یکشنبه ها و پنج شنبه ها، با آموزش زبان برنامه نویسی (HTML)و(PHP) همراه شما هستیم.
مقدمه:
در آموزش های قبلی صفحات ساده ای را طراحی کردید و به شیوه طراحی صفحات در HTML آشنا شدید. درمطالب قبل مثال های صفحات ساده ای طراحی شدند. فاصله سطرها در مرورگر بسیار زیاد بوده است . آیا فک کردید که چگونه می توان فاصله سطرها را کم کرد؟ آیا روش تنظیم حاشیه متنها را می دانید؟ می دانید چگونه باید رنگها و فونت هایی را برای کل متن موجود در صفحه تعیین کنید ؟
همه ی این موارد و بسیاری از موارد دیگر مربوط به صفحه آرایی متنها را می توان با استفاده از فناوری شیوه نامه انجام داد. شیوه نامه توسط موسسه W3C پذیرفته شده اولین نسخه آن به نام CSS1 و نسخه بعدی آن به نام CSS2 ارائه شده اند . به طور کلی می توان گفت که شیوه نامه برای قالب بندی و صفحه آرایی صفحات وب به کار می رود.
قبل از استفاده از شیوه نامه ها ، برای صفحه آرایی صفحات وب از تصاویر گرافیکی استفاده می شد. که بسیار وقت گیر بوده است.
شیوه نامه آبشاری :
منظور از شیوه نامه آبشاری این است که انواع مختلفی از شیوه نامه ها را می توان در یک فایل HTML مورد استفاده قرارداد و مرورگر از آنها به روش خاصی به نام آبشار استفاده می کند . هر آنچه توسط HTML به نمایش در می آید توسط شیوه نامه ها قابل کنترل است . به عنوان مثال ، نوع فونت، اندازه، وزن و مدل فونت را می توان توسط شیوه نامه ها تعیین کرد.
اگر مرورگری از شیوه نامه ها پشتیبانی نکند، آنها را اجرا نخواهد کرد و صفحه را بدون اعمال شیوه نامه ظاهر می کند .
انواع شیوه نامه ها:
شیوه نامه ها را به سه روش می توان به صفحات وب اعمال کرد.
1 یک روش این است که شیوه نامه ها فقط برای یک دستور مورد استفاده قرار گیرند که آنها را شیوه نامه دستوری می نامند. بنابراین حوزه عمل شیوه نامه های دستوری در یک دستور است. برای اعمال شیوه نامه های دستوری از صفت STYLE استفاده می شود.
2 روش ها ی دیگر استفاده از شیوه نامه ها این است که اثر آنها در یک صفحه وب باشد. این شیوه نامه را شیوه نامه صفحه ای می نامند. برای این شیوه نامه از دستورات <STYLE> و <STYLE/> استفاده می شود . این دستور در یک فایل HTML بین دستورات <HTML> و <BODY> قرار می گیرد . یعنی دستورات شیوه نامه ها در بین دو دستور <STYLE> و <STYLE/> قرار دارد.
3 سومین روش استفاده از شیوه نامه این است که آنها را در یک فایل جداگانه قرار دادو اسناد HTML از آن فایل استفاده کنند.
این شیوه نامه را شیوه نامه خارجی می نامند. پسوند فایلی که حاوی شیوه نامه ها است .CSS می باشد. هر فایل HTML می تواند با استفاده از یک پیوند به این فایل مراجعه و از شیوه نامه های موجود در آن استفاده نماید.
در دستورات HTML دیدید که برای تعیین مقادیر خواص ، از علامت مساوی استفاده می شود و مقادیر در داخل کوتیشن قرار می گیرند . اما برای تعیین خواص شیوه نامه ها ، آنها را در داخل آکولا ({}) قرار می دهیم و مقادیر آنها را با کولن (:) تعیین می کنیم. به عنوان مثال ، اگر font-family یک خاصیت شیوه نامه باشد. برای تعیین مقدار آن به صورت زیر عمل می شود:
| {font-family:Helvetica} |
|---|
برای تعیین چند خاصیت ، باید آنها را با ; از هم جدا کرد:
| {font-family:Helvetica; font-size: 2 inch} |
|---|
خواص شیوه نامه :
تاکنون با اهداف شیوه نامه و روشهای استفاده از شیوه نامه (دستوری ،صفحه ای و خارجی ) آشنا شدید . اما در این بخش می آموزیم که خواص مربوط به شیوه نامه ها کدامندو چگونه مقدار می گیرند. خواص شیوه نامه ها را می توان به دسته های زیر تقسیم کرد:
1. خواص فونت ها
2. خواص رنگ و زمینه
3. خواص متن
4. خواص کادربندی (شامل موارد زیر است)
5. خواص دسته بندی
6. خواص لیستها
یک : خواص فونت ها:
ویژگی های مربوط به فونت ها برای تعیین خانواده فونت ، سبک اندازه و شکل فونت مورد استفاده قرار می گیرند. علاوه براین ، می توان قواعد مربوط به رنگ ، زمینه ، حاشیه بندی و فاصله گذاری ترکیب کنید تا اثرمتنی زیبایی را در صفحه ایجاد کنید.
یک: خاصیت font -family
برای تعیین خانواده فونت به کار میرود. مقدار آن می تواند یک فونت خاص مثل Arial یا خانواده کلی مثل scan serif باشد. براساس استاندارد CSS1 ، خانواده های کلی زیر باید در مرورگر هایی که از CSS1 پشتیبانی می کنند وجود داشته باشد.
- Serif(مثل Times)
- Serif )Scan-مثل Helvetica)
- Cursive( Zaff-Chancery)
- Fantasy(Westorn)
- Monospace( Courier)
همانند دستور <FONT> ، وقتی از چند خانواده فونت استفاده می کنید. باید آنها را به ترتیب اولویت بنویسید و آنها را اولویت بنویسید و آنها را با کاما از هم جدا کنید.
استفاده از چند خانواده فونت به این دلیل صورت می گیرد که اگر بر روی کامپیوتری یک خانواده فونت موجود نبود. از خانواده دیگری استفاده شود. دستور {ّfont-family;Arial,scans-serif} موجب می شود تا از خانواده فونت Arial استفاده گردد و صورت عدم وجود این خانواده در یک کامپیوتر ، از خانواده scans-serif استفاده می شود.
دو :خاصیت font-size
با استفاده از این خاصیت می توان اندازه نسبی یا واقعی فونت را تعیین کرد. اندازه فونت را با استفاده از کلمات xx-large,x-large,large,medium,small,x-small,xx-small نسبی مثل smaller,larger تعیین کرد.
علاوه بر این اندازه فونت برحسب 5 واحد قابل بیان است: تعداد نقاط (مثل font-size:12pt)، تعداد پیکسلها (مثل font-size:30px) اینچ (مثل font-size:2inch) سانتیمتر مثل (font-size:2cm) و در صد (مثل 200%font-size:) . وقتی اندازه فونت برحسب در صد بیان می شود نسبت به اندازه پیش فرض آن سنجیده خواهد شد. دستورات زیر را ببینید:
| {font-size: 18pt}
{font-size: 200%} |
|---|
سه: خاصیت font-style
این خاصیت برای تعیین سبک فونت به کار می رود که می تواند مقادیر normal ، italic یا oblique را بپذیرد سبک oblique مشابه سبک italic است ولی مرورگر خودش سعی کند میزان اریب بودن متن راتعیین کند:
| {font-style:oblique}
{font-style: normal} |
|---|
چهار :خاصیت font-weight:
خاصیت وزن فونت یا میزان تاریکی آن راتعیین می کند مقادیر این خاصیت از 100تا 900 با افزایش 100 است.
از کلمات کلیدی نیز می توان استفاده کرد: lighter,bolder,bold بعضی از مرورگر ها از کلمات کلیدی extra-bold,bold,demi-bold ,medium,demi-light,extra-light نیز استفاده می کنند. چون خاصیت خانواده فونت نیز می تواند مقدار bold را بپذیرد برای جلوگیری از اشتباه بهتر است از مقادیر عددی استفاده شود:
| {font-weight: bolder}
{font-weight: 900} |
|---|
پنج: خاصیت font-variant
شکل خاصی از فونت تعیین شده یا فونت پیش فرض را انتخاب می کند دو شکلی که فعلا پشتیبانی می شودعبارتنداز: (normal,small-caps) مقدار (small-caps) حروف بزرگ را به شکل کوچکی نمایش می دهدو normal کار خاصی انجام نمی دهد:
| {font-variant:small-caps} |
|---|
شش: خاصیت فونت:
یک روش دقیق برای تعیین تمام خواص فونت با یک خاصیت STYLE است یکی از صفات خاصیت font برابر با line-height است که فاصله بین دو سطر از متن را مشخص می کند.صفات فونت می توانند با فاصله از هم جدا شوند به جز(line-height) که با(font-size) به کار می رود و با اسلش (/) از آن جدا می گردد. شکل کلی قاعده فونت به صورت زیر است:
| font: font-style font-variant font-weight font-size/line-hight font-family |
|---|
این مقاله دارای دو بخش می باشد. ادامه این مقاله در مطلب بعدی منتشر خواهد شد. با ما همراه باشید.
برگرفته از :
کتاب: (HTML-DHTML-XML)
مولف: دکتر عین الله جعفر نژاد قمی
پاسخ به سوال دوستان :
شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟
دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از
تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.
یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.
توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش میرود و نداشتن وب سایت
برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.
برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact