آموزش HTML – قسمت نهم(مفهوم css)
سلام
امیدوارم از قسمت های قبلی استفاده ی کامل را برده باشید ، در این جلسه میشه گفت کمی از مبتدی بیرون میایم و میریم به یک سطح بالاتر ، آموزشی که امروز میخوایم با هم کار کنیم ، کار با css ها هست ، در قسمت سوم ، با استایل ها آشنا شدیم و یک چند تا مثال هم حل کردیم ؛ حالا در این قسمت کمی میخوایم پیشرفته تر با استایل ها کار کنیم .
- CSS
به کمک css میتوینم به صفحاتمون رنگ ولعاب بدیم ، رنگشون رو تغییر بدیم ، فونت ها رو عوض کنیم ، انیمیشن بدیم و … (که در دوره ی بعدی که دوره آموزش CSS هست به طور کامل آشنا میشیم) ، در این قسمت توضیح مختصری میدیم.
- به سه روش میتونیم ، از css استفاده کنیم:
1- سی اس اس درون خطی ، یعنی داخل تگ ها هر جا خواستیم میتونیم تگ <style> را باز کنیم و به عناصر درون صفحه ربطشون بدیم.
سلام 🙂 شما در بپرسم هستید
<h1 style="color:blue;">سلام :) شما در بپرسم هستید</h1>
همانطور که مشاهده می کنیم ، داخل تگ h1 از style درون خطی استفاده کردیم و یک متن به رنگ آبی نوشتیم.
2- سی اس اس داخلی ، در این روش میتونیم بین تگ <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>
خروجی کد بالا :
همانطور که مشاهده می کنید ، تگ استایل را باز کردیم و نام تگ را نوشتیم و بهش استایل دادیم.
3- سی اس اس خارجی ، در این نوع یک فایل با پسوند 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 که بعد از این دوره قرار میگیره به طور کامل آشنا میشیم.
با ما باشید تا آموزش های بعدی …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید