- ۱۳۹۳/۱۱/۲۶ ۱۶:۲۲:۰۸
- در همه مقالات
- توسط admin
- بازدید: 2432
- اخرین ویرایش: ۱۳۹۷/۰۲/۰۱ ۱۴:۴۱:۵۳
-
چاپ 
آموزش HTML بخش سوم
Styleها
Styleچیست ؟
یکی از مهمترین مباحث در زمینه طراحی و کد نویسیStyleها هستند به طور دقیقتر خصوصیات وتواناییهایی برای تگهایHTMLمی باشند و از اهمیت بسیار بالایی برخوردارند.
یاد گیریStyleها پیش نیازی برای یادگیریCSSمی باشد.
Styleها ابزاری برای کنترل تمامی تگهایHTMLدر صفحه وب هستند. در اینجا به صورت کلی توضیحاتی در موردStyleها و صفحاتCSSداده خواهد شد و در آینده به صورت کامل با این کدها آشنا خواهیم شد.
Styleها به چندینروش درون صفحات وب نوشته می شوند.
·به صورت خطی و درون تگهایHTML.
·به صورت تگهای<Style> </Style>درون صفحاتHTML.
·ویا بصورت صفحات و کدهایCSS.( برای یادگیری و توضیحدر مورد کدهایCSSعجله نکنید ! )
برای آشنایی بیشتر با این موارد به ذکر چندین مثال می پردازیم.
style=”background-color:yellow”
style=”font-size:10px”
style=”font-family:Times”
style=”text-align:center”
اینها کدهایی هستند که درون تگهای HTML نوشته می شوند.
تغیر رنگ BackGround (پس زمینه ) با استفاده از Style ها.
خوب ، برای شروع به کدهای زیر توجه کنید.
<html>
<body style=”background-color:yellow”>
<h2>Look: Colored Background!</h2>
</body>
</html>
در قسمت body , ویا بدنه صفحه وب مشاهده می کنید که از یک Style خطی استفاده شده است. این کد باعث خواهد شد که پس زمینه و یا Back Ground صفحه وب شما با رنگ زرد نمایش داده بشه.
برای مشاهده عملی این صفحه آن را با توجه به خود آموزهای قبلی بسازید. البته این صفحه در فایل مربوط به این خود آموز موجود است.
تغییر Font نوشته ها با استفاده از Style ها .
در اینجا مشاهده خواهید کرد که font نوشته ها با استفاده از خصوصیات Style ها قابل کنترل می باشد.
<html>
<body>
<h1 style=”font-family:verdana”>A heading</h1>
<p style=”font-family:courier new; color:red; font-size:20px;”> A paragraph </p>
</body>
</html>
مشاهده می کنید در تگ <h1> , <p> این Style ها برای تغییر نوع font به کار رفته است.
تغییر نوع چینش نوشته ها ( Text Alignment )
در اینجا مشاهده می کنید که با استفاده از Style ها نوع چینش نوشته ها را کنترل می کنیم.
<html>
<body>
<h1 style=”text-align:center”>This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.
</p>
</body>
</html>
با توجه به گستردگی مطالب در مورد Style ها در اینجا یه همین توضیحات اکتفا می کنیم و توضیحات بیشتر را در مورد Style ها به خود آموزهای بعدی موکول می کنیم.
در قسمت بعدی به HyperLink ها و یا پیوندهای بین صفحات و یا تگهای <a> می پردازیم.
دیدگاه دیگران (بدون دیدگاه)...
Leave a reply