خواص لیستها(راهنمای html)

6513 تعداد بازدید | دوشنبه 29 تیر ماه 1394

همانطور که گفته شد، HTML از سه نوع لیست پشتیبانی می کند: لیستهای مرتب، لیستهای نامرتب و لیستهای تعریفی. شیوه نامه های ابشاری، امکاناتی را برای دستکاری لیستها فراهم می کنند

همانطور که گفته شد، HTML از سه نوع لیست پشتیبانی می کند: لیستهای مرتب، لیستهای نامرتب و لیستهای تعریفی. شیوه نامه های ابشاری، امکاناتی را برای دستکاری لیستها فراهم می کنند. یعنی خواصی وجود که در مورد لیستها به کار می روند:list-style-position , list-style-image. list-style-type )خاصیت list-style-type به جای هر سه خاصیت دیگر قابل استفاده است.
خاصیتlist-style-type . براساس نوع لیست، عناصر لیست با شماره یا شکلهای خاصی مثل دایره توپر، توخالی و غیره مشخصی می شوند. شش مقدار برای لیستهای مرتب مناسب اند: decimal (اعداد دهدهی)،lower-roman (حروف کوچک رومی ) upper-roman (حروف بزرگ رومی ) lower-alpha ( حروف کوچک )و upper alpha ( حروف بزرگ ).مقادیر مناسبی برای لیستهای نامرتب عبارتند از disk (دایره توپر)، circle (دایره)، و Square (مربع). مقدار none موجب جلوگیری از برچسب عناصر لیست می شود. دستورات زیر را ببینید:

{list-style-type ; upper-roman}
{list-style-type : square}

خاصیت liSt-Style-image. این خاصیت می تواند تصویر گرافیکی را به عنوان برچسب عناصر لیست قرار دهد .دستور زیر را ببینید none یا URL ،انتخاب کند. مقادیر این خاصیت

{list-style-image : url ("arm.gif")}

خاصیت list-type-position. این خاصیت تعیین میکند که برچسب عناصر لیست نسبت به کادر دستورات، چگونه قرار گیرد. مقادیر این خاصیت عبارتند از : inside و outside . مقدار inside موجب میشود تا بر چسب در داخل و مقدار outside موجب می شود در خارج کادر قرار گیرد. مقدار پیش فرض است. دستور زیر Outside

{list-style-position : inside}

تاکنون با انواع شیوه نامه ها و بعضی از خواص مربوط به آنها آشنا شدید. اکنون می خواهیم مشخص کنیم کهچگونه میتوانیم این خواص را در شیوه نامه ها به کار گیریم. ابتدا کاربرد شیوه نامه دستوری را مورد بررسی قرار می دهیم. شیوه نامه های دستوری، فقط در همان دستوری از HTML که به کار گرفته می شوند عمل می کنند و بر روی هیچ دستور دیگری، حتی اگر از همان نوع باشد، اثربخش نیست.
در مورد شیوه نامه ها توجه داشته باشید که با تمام مزایایی که شیوهنامه ها دارند، مشکلات خاصی به همراه انها وجود دارد. به عنوان مثال، با استفاده از صفات مربوط به فونت، خانواده فونت، اندازه فونت و وزن فونت تعیین می شود. ممکن است کاربران، فونت موردنظر طراحی سایت را نداشته باشند. بدین ترتیب، صفحه ای که در کامپیوتر ان کاربر ظاهر می شود، صفحه ای نیست که در نظر طراح بوده است. نکته دیگر در مورد شیوه نامه های خارجی است. اگر از چندین شیوه نامه خارجی استفاده شود، ممکن است فراموش کنید که از کدام شیوه نامه برای کدام صفحه وب استفاده نمودید. به همین دلیل توصیه میشود که کمتر از شیوه نامه های خارجی استفاده نمایید.
در مورد کاربرد فونتها باید توجه داشته باشید که از فونتهای Serif برای متنهای طولانی و از فونتهای Scan Serif برای متنهای کوتاه مثل سرفصلها استفاده می شود. علتش این است که میزان خوانایی فونتهای Serif بالا است. اما امروزه محبوبیت فونتهای Scan Serif بیشتر شده، کاربرد آنها در متنهای طولانی افزایش یافته است. علتش این است که فونتهای serif نمی توانند خودشان را با اندازه و دقتهای مختلف صفحه نمایشی، هماهنگ کنند، ولی فونتهای Scan Serif فاقد جلوه های اضافی اند و در اندازه های مختلف صفحه نمایشی، تغییر شکل چندانی نمی دهند. خلاصه اینکه، اگر دنبال زیبایی هستید از فونتهای serif و اگر دنبال خوانایی هستید از فونتهای Scanserif استفاده کنید.
نکته دیگر در مورد شیوه نامه ها این است که در صفاتی که نیاز به تعیین اندازه است (مثل اندازه فونت، فاصله بین خطوط و غیره)، از یک مقیاسی استفاده کنید. مثلاً از تعداد نقاط (pt)، یا پیکسلها (px) یا سانتیمتر (cm) استفاده کنید. این کار موجب یکپارچگی در طراحی سایت می شود و اعمال تغییرات را در صفحه وب ساده تر می کند.

مثال ۱ - ۵

<HTML>
<HEAD>
<TITLE> An inline Style </TITLE>
</HEAD>
<BODY bgcolor = "#FFFFFF">
<P style = "font-size:14pt" id = p14>
This book about design web pages.
It describes the FrontPage Express and HTML.
It is a teach yourself book. </P>
<P>
This came from a P tag without a style.
This book about design web pages.
It describes the FrontPage Express and HTML.
It is a teach yourself book. </P>
<SPAN STYLE = "font-size:18pt">
This came from a SPAN tag with a style.
This book about design web pages.
It describes the FrontPage Express and HTML.
It is a teach yourself book. </p>
<SPAN/>
<BR><BR>
<SPAN>
This book about design web pages.
It describes the FrontPage Express and HTML.
It is a teach yourself book. </p>
<SPAN/>
<DIV STYLE = "background:yellow; font-weight:bold; color:black">
<p> style sheets separete the structure of a document from its presentation.
dividing layout and presentation has many theoretical benefits and can provide for flexible documents that display equally well on large graphically rich systems and palmtop computers. </p>
<p> This is another paragraph describing the wonderfull benefits of style sheets. </p>
<DIV/>
<BODY/>
<HTML/>

تشریح مثال ۱ - ۵
همانطور که ملاحظه میکنید، در یک دستور <P> و یک دستور < SPAN که از شیوه نامه دستوری استفاده شد و در دستور دیگر <P> و دستور دیگر < SPAN که از شیوه نامه استفاده نشده است. در یک پاراگراف نیز از دستور <DIV> استفاده شده است. دستور <DIV که همانند دستور < SPAN> برای شیوه نامه دستوری مورد استفاده قرار می گیرد. اما دستور <DTV> برای متنهای طولانی و دستور <SPAN> برای متنهای کوچک مورد استفاده قرار میگیرد. نتیجه اجرای مثال ۱-۵ در شکل ۱-۵ آمده است.

شیوه نامه صفحه ای، روشی بسیار سادهای برای صفحه آرایی است. برای استفاده 3 شیوه نامه صفحه ای دستورات <STYLE > و <STYLE/> استفاده میگردد که در بین دو دستور < HEAD > و < HEAD/> قرار می گیرد. چون شکلهای گوناگونی از شیوه نامه ها ممکن است مورد استفاده قرار گیرند که متفاوت از فرمت استاندارد CSS باشند، در دستور <STYLE> باید با استفاده از صفت TYPE مشخص کنید که از چه فرمتی استفاده خواهید کرد. بنابراین، برای استفاده از فرمت CSS، صفت TYPE را به صورت "TYPE="text/CSS در دستور چندین شیوه نامه را تعریف کرد در -STYLE- به کار ببرید. البته می توان با استفاده از چند دستور <STYLE این صورت باید بتوان تعیین کرد که از کدام شیوه نامه استفاده خواهد شد. این همان مفهوم آبشاری است و در ادامه بحث می شود.نکته مهم و قابل توجه در مورد شیوه نامه های صفحه ای این است که بعضی شیوه نامه ها پشتیبانی نمی کنند. در این صورت، آنها را عیناً در صفحه وب نمایش میدهند که این کار چندان جالب نیست. برای جلوگیری از این وضعیت، شیوه نامه را در داخل دستور توضیحات قرار میدهیم. دستور توضیحات به صورت <-- توضیحات --! که مشخصی می شود. با توضیحاتی که داده شد، شکل کلی یک برنامه HTML که حاوی شیوهنامه صفحه ای باشد، به صورت زیر است :

<HTML
<HEAD>
<TITLE: ... </TITLE:
<STYLE TYPE = "text/css">

</STYLES
</HEAD
<BODY >
محتویات صفحه وب </BODY
</HTML

مثال ۲-۵
برنامه ای که با استفاده از شیوه نامه صفحه ای، صفحه وب را صفحه آرایی و تنظیم میکند. صفحه طراحی شده در شکل ۲-۵ آمده است.

<ΗΤΜL>
<ΗΕΑd>
<STYLE TYPE = "text/css">
<!-- H1 {
background-color:blue; color:white, font-size:30 pt ;
font-family:arial; text-transform:uppercase
; text-align:right
}
{

مقالات مرتبط به طراحی سایت :

خواص لیستها(راهنمای html)

خواص لیستها(راهنمای html)

هایبــــــــرد

دنیای تجارت بدون مرز