آموزش HTML – قسمت نهم(مفهوم css)
سلام
امیدوارم از قسمت های قبلی استفاده ی کامل را برده باشید ، در این جلسه میشه گفت کمی از مبتدی بیرون میایم و میریم به یک سطح بالاتر ، آموزشی که امروز میخوایم با هم کار کنیم ، کار با css ها هست ، در قسمت سوم ، با استایل ها آشنا شدیم و یک چند تا مثال هم حل کردیم ؛ حالا در این قسمت کمی میخوایم پیشرفته تر با استایل ها کار کنیم .
- CSS
به کمک css میتوینم به صفحاتمون رنگ ولعاب بدیم ، رنگشون رو تغییر بدیم ، فونت ها رو عوض کنیم ، انیمیشن بدیم و … (که در دوره ی بعدی که دوره آموزش CSS هست به طور کامل آشنا میشیم) ، در این قسمت توضیح مختصری میدیم.
- به سه روش میتونیم ، از css استفاده کنیم:
۱- سی اس اس درون خطی ، یعنی داخل تگ ها هر جا خواستیم میتونیم تگ <style> را باز کنیم و به عناصر درون صفحه ربطشون بدیم.
سلام 🙂 شما در بپرسم هستید
۱ |
<h1 style="color:blue;">سلام :) شما در بپرسم هستید</h1> |
همانطور که مشاهده می کنیم ، داخل تگ h1 از style درون خطی استفاده کردیم و یک متن به رنگ آبی نوشتیم.
۲- سی اس اس داخلی ، در این روش میتونیم بین تگ <head> … </head>، تگ <style> را باز کنیم و کدهای سی اس اس را داخلش بنویسیم.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ |
<html> <head> <style> body {background-color: lightgrey;} h1 {color: blue;} p {color: green;} </style> </head> <body> <h1>www.beporsam.ir</h1> <p>beporsam@gmail.co</p> </body> </html> |
خروجی کد بالا :
همانطور که مشاهده می کنید ، تگ استایل را باز کردیم و نام تگ را نوشتیم و بهش استایل دادیم.
۳- سی اس اس خارجی ، در این نوع یک فایل با پسوند css. ایجاد میکنیم و کدهای سی اس س را داخل این فایل می نویسیم و آدرس فایل را میایم در صفحه بین تگ های <head> … </head> می نویسیم.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ |
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>www.beporsam.ir</h1> <p>beporsam@gmail.com</p> </body> </html> |
آدرس دهی فایل Css به این صورت است:
۱ |
<link rel="stylesheet" href="style.css"> |
یک فایل با پسوند سی اس اس ایجاد کردیم و نام فایل را نوشتیم
و کدهای سی اس اس که در این فایل نوشتیم:
۱ ۲ ۳ |
body {background-color: lightgrey;} h1 {color: blue;} p {color: green;} |
دیگه نیاز به گذاشتن <style> نیست ، چون فایل با پسوند css. است و به عنوان یک فایل استایل شناخته میشه.
برای اینکه با مفهوم سی اس اس خارجی آشنا بشید:
- یک پوشه ایجاد کنید.
- درون این پوشه یک فایل با پسوند html. و یک فایل با پسوند css. بسازید.
- داخل فایل html کدهای html زیر را قرار بدید:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ |
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>www.beporsam.ir</h1> <p>beporsam@gmail.com</p> </body> </html> |
- داخل فایل css کدهای زیر:
۱ ۲ ۳ |
body {background-color:lightgrey;} h1 {color:blue;} p {color:green;} |
- سپس ذخیره کنید و فایل با پسوند html را باز کنید تا نتیجه را ببینید.
این قسمت ، نمونه ای بود برای اینکه با سی اس اس آشنا بشید ؛ در دوره ی آموزشCSS که بعد از این دوره قرار میگیره به طور کامل آشنا میشیم.
با ما باشید تا آموزش های بعدی …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید