کاربرد شیوه نامه خارجی
کاربرد شیوه نامه خارجی
3341 تعداد بازدید | دوشنبه 5 مرداد ماه 1394
شیوه نامه خارجی یک فایل متنی ساده است که حاوی مشخصات شیوه نامه برای دستورات و کلاسهای : است.
: است. بنابراین مراحل استفاده |3 شیوه نامه خارجی عبارت است .CSS است. پسوند این فایلها HTML
۱. ایجاد یک فایل متنی با پسوند CSS که حاوی شیوه نامه باشد.
۲. استفاده از دستور <LINK> در یک برنامه HTML برای استفاده از فایلی حاوی شیوه نامه . دو صفت مهم این دستور عبارتند از REL و HREF. صفت REL رابطه بین فایل HTML و فایل حاوی شیوه نامه را نامگذاری می کند و به صورت "REL = "STYLESHEET استفاده می شود. صفت HREF مشخصی می کند چه فایلی باید مورد استفاده قرار گیرد.
مثالی ۲-۵
برنامه HTML که با استفاده از شیوه نامه خارجی، صفحه وبی را طراحی می کند. برای اجرای این مثال، مراحل زیر را
انجام دهید:
).. دستورات زیر را که یک شیوه نامه را تشکیل می دهند در یک ویراستار مثل notepad تایپ کنید و به نام example.cssذخیره کنید
BODY {font: 20pt; font-family: Serif; color: black; background: white}
H1 {font: 20pt ; font-family: Sans-Serif ; color: block; text-align:center}
H2 {font; 16pt ; font-family: Sans-Serif ; color:black; text-align:center}
P {text-indent: 0.5 in ; margin-left:50px; margin-right: 50px}
A:link: {color:blue ; text-decoration: none}
Avisited: (color: red ; text-decoration: none}
A:active: {color: red ; text-decoration: none}
<HTML>
<HEAD>
<TITLE: Style Sheet Linking Example <tiTLE><LINK REL=STYLESHEET HERF="a:\example.css" TYPE="text/css"> - </HEAD>
<BODY >
<H1> External style sheet.</H1>
<H2> This is in the file example.css.</H2>
<P>
formation systems are not a mere collection of hardware,
software, and people. They should be structured to fit the organization's strategy and structure. They have to provide for the information needs of the operational level and the various management level of the organization.
</P>
</BODY>
</HTML>
۳. برنامه htm.5-3 را در یک مرورگر اجرا کنید. بدین ترتیب شکل ۳-۵ ظاهر میشود.
مثالی ۴-۵
برنامه ای که استفاده از حاشیه ها و فونتهای مختلف را در صفحه وب نمایش میدهد. نتیجه اجرا در شکل ۴-۵ آمده است.
<HTML>
<ΗΕΑD>
<TITLE- CSS Font Attributes Example <tITLE><STYLE TYPE="text/css">
<!--
BODY {font-size: 14pt, line-height:12pt)
serif {font-family: serif}
sans-serif {font-family: sans-serif)
..cursive {font-family: cursive}
.fantasy {font-family: fantasy}
.comic {font-family: Comic Sans MS}
.xx-small {font-family: xx-small}
.x-small {font-family: x-small}
.small {font-family: small}
.medium {font-family: medium}
.large {font-family: large}
.x-large {font-family: x-large}
.xx-large {font-family: xx-large}
.smaller {font-family: smaller}
.larger {font-family: larger}
.points {font-family: 18pt}
.percentage {font-family: 200 %}
.italic {font-family: italic} .oblique {font-family: oblique}
.weight {font-weight: 900}
.smallcaps {font-variant: small-caps}
.uppercase {text-transform: uppercase
} .lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
.underline {text-decoration: underline}
.blink {text-decoration: blink}
.line-through {text-decoration: line-through}
.overline {text-decoration: overline}
-->
</STYLE>
</HEAD>
<BODY>
font Family </H2>
This text is in <span> CLASS="serif.</SPAN> <BR>
This text is in <span> CLASS="sans-serif">Sans-Serif.</SPAN> <BR>
This text is in <span> CLASS="cursive"> Cursive.</SPAN> <BR>
This text is in <span> CLASS=lantasy"> Fantasy. </SPAN> <BR>
Actual fonts can be specified like <SPAN CLASS=comic>
Comic Sans MS </SPAN> <BR>
<H2> Font Sizing </H2>
This is <SPAN CLASS="xx-small">xx-small text. </SPAN> <BR>
This is <SPAN CLASS="x-small">x-small text. </SPAN> <BR>
This is <SPAN CLASS="small">small text. </SPAN> <BR>
This is <SPAN CLASS="medium">medium text. </SPAN> <BR>
This is <SPAN CLASS="large">large text. </SPAN> <BR>
This is <SPAN CLASS="x-large">x-large text. </SPAN> <BR>
This is <SPAN CLASS="xx-large"»cc-large text. </SPAN> <BR>
This is <SPAN CLASS="smaller">smaller text </SPAN> than the rest. <BR>
This is <SPAN CLASS="larger>larger text </SPAN> than the rest. <BR> This is <SPAN CLASS="points">exactly 18 point text. </SPAN> <BR> This is <SPAN CLASS="parcentage"> 200% larger text. </SPAN> <BR> <H2> Font Style, weight, and Variant </H2> This text is <SPAN CLASS="italic">italic. </SPAN> <BR> This text is <SPAN CLASS="oblique">oblique. </SPAN> <BR> This text is <SPAN CLASS="smallcaps">smallcaps. </SPAN> <BR> <H2> Text Transformation </H2> The next bit of text is transformed <SPAN CLASS="uppercase"> to all uppercase. </SPAN> <BR> The next bit of text is transformed <SPAN CLASS="lowercasen> to all lowercase. </SPAN> <BR> <SPAN CLASS="capitalize"> This text is all capitalized. It doesn't do what you think, does it? <SPAN> <BR> <H2> Text Decoration </H2> This text should <SPAN CLASS="blink">blink under Netscape. </SPAN> <BR> This text should be <SPAN CLASS="underline">underlined. </SPAN><BR> This text should be <SPAN CLASS="line-through" >struck. </SPAN><BR><BR> This text should be <SPAN CLASS="overline">overline. </SPAN> <BR> </BODY> </HTML
چگونه باید تعیین کرد که شیوه نامه ای متعلق به یک دستور اعمال شود ولی به دستورهای دیگر مشابه با آن اعمال نشود ؟ برای این منظور باید از قاعده کلاس استفاده کرد. که در ادامه بحث می شود. دستورات زیر استفاده از صفت ID را نشان می دهند.
<HTML>
<HEAD>
<TITLE> ID Style Sheet Example </TITLE>
<STYLE TYPE = lext/css">
#SecondParagraph {background: green}
</STYLE>
</HEAD>
<BODY>
<p> This is the first paragraph. <P>
<P ID = "SecondParagraph"> This is the second paragraph </P>
<P> This is the third paragraph. </P>
</BODY>
</HTML>
همانطور که گفته شد، با استفاده از مفهوم CLASS می توان تعیین کرد که شیوه نامه ای به یک دستور اعمال شود ولی به سایر دستورات مشابه با آن اعمال نگردد. به عنوان مثال، در دستورات قبلی می توان طوری عمل کرد که شیوه نامه ای به اولین و سومین دستور <P >اثر کند ولی برای دومین دستور <P> اثری نداشته باشد.صفت CLASS نام کلاسی را تعریف میکند که عنصری باید به آن متعلق باشد. لازم نیست مقادیر CLASS منحصر بفرد باشد، زیرا عناصر زیادی می توانند عضو یک کلاس باشند. دستورات زیر ، کاربرد CLASS را تشریح می کنند
<HTML>
<HEAD>
<TITLE> ID Style sheet Example </TITLE>
<STYLE TYPE = "text/css">
important {background: yellow}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS = "importanr> Example </H1>
<P CLASS = "importanr> This is the first paragraph. </P>
<p> This is the second paragraph. </P>
<P CLASS = "importanr> This is the third paragraph. </P>
</BODY>
</HTML>
این مثال سه عنصر دارد که هر کدام صفت CLASS مخصوص به خود را دارند و مقدار آنها important است. بر اساس اطلاعات شیوه نامه، رنگ زمینه تمام اعضای کلاس important، همانطور که با نقطه مشخص شده اند
(important) زرد است. نوشتن قواعد برای کلاسها اسان است: قبل از نام کلاسی یک نقطه قرار دهید: main-item {font-size : 150%}
شکلهای دیگری از قواعد کلاس ممکن است. به عنوان مثال برای اینکه رنگ زمینه عناصر <H1> از کلاس important نارنجی باشند، به صورت زیر عمل می شود:
H1.important (background: orange}
ه HTML هستند. به عنوان مثال، دو دستور
زیر را ببینید:
P.left {font-family: garamond; font-size: 12pt; font-style: normal; line-height:
11pt; text-align: left}
P.right {font-family: garamond; font-size: 12pt; font-style: normal;
line-height: 11pt; text-align: right}
پاراگراف اعمال می گردد. دستورات زیر را ببینید:
<P class = "left"> تنظیم پاراگراف در سمت چپ
<P class = "right"> - تنظیم پاراگراف در سمت راست
توجه: برای اینکه دستورات برنامه خلاصه شوند، می توانید خواصی مشترک این دو شیوه نامه را انتخاب کرده، برای دستور <P > تعریف کنید و سپس موارد غیر مشترک را در دو دستور <P > جداگانه منظور نمایید:
P {font; gramond 12pt/11pt normal}
Pleft (text-align: left}
P.right (text-align: right}
بدین ترتیبه، دستورات خلاصه شاله، عیب یابی برنامه آسانتر است.
اکنون دستورات زیر را ببینید:
<P class = "left"> This paragraph is left adjust. </P
<P class = "right"> This paragraph is right adjust </P>
دستور اول یک پاراگراف را زا سمت چپ و دستور دوم یک پاراگراف را از سمت راست تنظیم میکند
- همانطور که گفته شد، با استفاده از مفهوم کلاسها، می توان در یک شیوه نامه، کلاسهایی را تعریف کرد که به یک دستور اختصاصی نداشته باشند، بلکه در تمام دستورات HTML قابل استفاده باشند. دستورات زیر را ببینید. first (text-align: left} -
second (text-align: right}
این دو دستور، دو کلاسی کلی به نامهای first و Second تعریف می کنند که هر دستور HTML می تواند از آنها استفاده کند. دستورات زیر را ببینید.
<P class = "first">