آموزش HTML – قسمت سوم(استایل)
سلام
با سومین جلسه از آموزش های HTML در خدمتتون هستیم ، در این قسمت با استایل ها آشنا می شیم و یاد میگریم که استایل ها چی هستن و به چه کار میاد .
- استایل چیست ؟
با استفاده از استایل میتونیم به عناصر موجود در صفحه رنگ و لعاب بدیم:) ، مثلا رنگش رو تغییر بدیم ، فونتش رو بزرگتر کنیم ، رنگ پس زمینه براش انتخاب کنیم و … .
شکل کلی استایل :
|
۱ |
style="property:value;" |
که property ویژگی هست که تعیین می کنیم (مثل فونت،رنگ،اندازه) و Value مقدار .
بریم چند تا مثال عملی حل کنیم تا بیشتر متوجه بشیم .
- میخوایم رنگ پس زمینه صفحه رو تغییر بدیم ، برای اینکار باید برای تگ body ویژگی background-color را تعیین کنیم ، که میشه :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
<html> <body style="background-color:lightgrey;"> <h1>www.beporsam.ir</h1> <p>beporsam@gmail.com</p> </body> </html> |
- حالا رنگ متن تگ h1 و p را میخوایم تغییر بدیم ، که میشه :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
<html> <body style="background-color:lightgrey;"> <h1 style="color:blue;">www.beporsam.ir</h1> <p style="color:red;">beporsam@gmail.com</p> </body> </html> |
- حالا بیایم با فونت ها هم کار کنیم و فونت تگ h1 و p رو هم تغییر بدیم ، که میشه :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
<html> <body style="background-color:lightgrey;"> <h1 style="color:blue;font-family:verdana;">www.beporsam.ir</h1> <p style="color:red;font-family:verdana;">beporsam@gmail.com</p> </body> </html> |
- حال اندازه متون رو هم بیاید بزرگ کنیم ، که میشه :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
<html> <body style="background-color:lightgrey;"> <h1 style="color:blue;font-family:verdana;font-size:25;">www.beporsam.ir</h1> <p style="color:red;font-family:verdana;font-size:45;">beporsam@gmail.com</p> </body> </html> |
- میخوایم متن داخل تگ h1 در وسط صفحه و متن داخل تگ p در سمت راست صفحه قرار بگیره ، که میشه :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
<html> <body style="background-color:lightgrey;"> <h1 style="color:blue;font-family:verdana;font-size:25;text-align:center">www.beporsam.ir</h1> <p style="color:red;font-family:verdana;font-size:45;text-align:right">beporsam@gmail.com</p> </body> </html> |
برای اینکه متن ها را بتونیم در چپ،وسط،راست صفحه قرار بدیم از ویژگی text-align استفاده می کنیم ، که سه حالت میگیره :
|
۱ ۲ ۳ |
text-align:right text-align:left text-align:center |
با ما باشید تا آموزش های بعدی …
موفق باشید .
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید