آموزش CSS (جلسه دوم)
سلام و درود به شما دوستان عزیز و همراهان مِستر آموز.
همانطور که در جلسه اول گفتیم CSS یکی از مفیدترین عنصر در وب است، مهمترین مزیت آن ساخت یک فایل و الگوی مشترک و استفاده آن در همه صفحات سایت می بشد. این امر از تکرار کد نویسی جلوگیری می کند و همین باعث محبوبیت این زبان در نزد توسعه دهندگان و طراحان وب شده است.
استفاده از CSS:
CSS را به سه روش می توان تعریف کرد:
1- در یک فایل خارجی
در قدم اول یک فایل text باز کنید و آن را با نام دلخواه (ترجیحا style ) و با پسوند .CSS ذخیره کنید.
اکنون فایلی که می خواهید در آن فایل CSS را فراخوانی کنید باز کنید. و کد زیر را در قسمت Head آن کپی کنید.
<link rel="stylesheet" type="text/css" href="style.css" />
نکته:
در قسمت href کد بالا اگر فایل css و فایل فراخوانند در یک مسیر هستند ، طبق تصویر زیر فقط نام فایل را ذکر می کنیم. اما اگر در یک مسیر نباشند باید اول آدرس مکان فایل و بعد نام فایل را با استفاده از / بنویسید.
نکته:
این تگ، تگ پایانی ندارد و در همان تگ ابتدایی بسته می شود.
اکنون در فایلی که کد بالا نوشته شده است می توانیم از کد هایی که در فایل CSS نوشته می شود استفاده کنیم.
2- در قسمت HEAD
برای استفاده از استایل ها یا همان CSS در قسمت هدر باید کد ها را بین 2 تگ <style> و </style> بنویسیم.
اما در این حالت باید از Class و ID استفاده کنیم.
به مثال زیر دقت کنید:
<head>
<style>
p.name { color : green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>
در تصویر زیر همه چی گویاست، ولی ما می خواهیم کد ها رو بررسی کنیم. همان طور که در کد های بالا آمده است، در قسمت Body یک تگ p داریم که در آن یک خصوصیت Class معرفی شده است. و ما با استفاده از این خصوصیت می توانیم به تگ p استایل اختصاص بدهیم.
در کد قسمت style، اول نام p را ذکر کرده ایم و بعد .name ، به این منظور که استایل را به تمام المان های p که خصوصیت class آن ها name است اختصاص بده.
نکته:
به جای class می توانیم از ID هم استفاده کنیم. اما برای معرفی ID در CSS بجای ” . ” باید از علامت ” # ” استفاده کنیم. مانند کد زیر:
<head>
<style>
name { color:green }
</style>
</head>
<body>
<p id=”name”> ...... </p>
</body>
3- قرار دادن style در عنصرها
روش سومی نیز برای نوشتن استایل برای عنصرهای HTML نیز وجود دارد. با گذاشتن خصوصیت Style در هر عنصر می توانیم استایل مورد نظر خود را بنویسیم.
<p style="color:green"> Text </p>
تعریف الگو یا Style
هر استایل باید برای یک تگ خاص تعریف شود. محتوای داخل تگی که قصد داریم بک Style نسبت دهیم selector یا انتخاب کننده می گوییم.
برای تعریف الگو در قدم اول باید نام selector را مشخص کنیم. مثلا برای در صورتی که بخواهیم برای تگ <h1> های صفحه مان استایل اختصاص بدهیم باید ابتدا بنویسیم h1 ، سپس علامت {} و خصوصیات و مقادیر را در بین آن ها بنویسیم.
نوشتن خصوصیات در {} باید به ترتیب باشد. ابتدا خصوصیت را می نویسیم. مانند color که رنگ نوشته ها را تغییر می دهد. سپس علامت نقل قول ” : ” می گذاریم، سپس مقدارش را می نویسیم.
h1 {color : red }
نکته:
اگر بخواهیم چند خصوصیت را به یک selector اختصاص دهیم ، باید بعد از هر کدام یک علامت ” ; ” بگذاریم. مانند:
h1
{
color:red;
size:20px;
background:black;
}
این هم از جلسه دوم زبان شیرین CSS که اینجا به اتما می رسانیم. با ما در جلسات بعدی همراه باشید.
موفق و پیروز باشید.
