ورود به CSS3 و نحوه Select کردن اجزاء سند وب
معرفی :
با عرض سلام ادب و احترام خدمت شما کاربران محترم سایت دوست داشتنی ilikephp.ir به جلسه پنجم Html5 خوش آمدید .
هدف جلسه :
خب در این جلسه قرار هست به CSS3 وارد بشیم تا بتونیم اجزاء اولیه صفحه سایتمون رو مرتب کنیم ...
شروع آموزش :
خب خوش آمد میگم خدمت شما دوستان و همراهان گرامی ، امیدوارم که تا به این جلسه از آموزش ها راضی بوده باشید ... در این جلسه قصد داریم وارد مباحث CSS3 بشیم و بر روی اجزاء سند کار کنیم تا بتونیم صفحه ی خودمون رو مرتب کنیم .
خب بدون وقفه آموزش رو شروع می کنیم :
در ابتدا همانند تگ زیر یک سند Css می سازیم و اون رو به فایل اصلی یا index سند وب خودمون Import می کنیم مانند کد زیر :
<link rel=”stylesheet” href=”main.css”/>
سپس در قسمت body سه تگ پاراگراف می سازیم که راحتتر بتوانیم این مباحث رو آموزش بدیم :
<p>ILIKEPHP.IR</p>
<p>P30WAY.COM</p>
<p>TWO BEST SITE</p>
خب بعد از اینکه این 3 خط رو در body نوشتیم یه بازبینی کوچک از سند وب انجام می دهیم که ببینیم کدهایی که نوشتیم در سند درج شده یا نه و بعد از اطمینان وارد سند CSS می شیم تا کدهایی که درbody نوشتیم تغییراتش رو اعمال کنیم .
برای اینکه بتونید تغییراتی روی تگ های مورد نظرخودتون بدهید باید اون تگ یا دارای Class باشند یا ID که در ادامه همراه با مثال مشاهده می کنید و راحتتر متوجه می شوید.
اگر به کد اول همانند شکل زیر ID بدهیم در body :
<p id=”programming”>ILIKEPHP.IR</p>
در سند CSS برای اعمال تغییرات بر روی این تگ باید ID اون رو انتخاب یا در واقع Select بکنید تا بتونید تغییرات رو اعمال کنید مثل شکل زیر :
در سند CSS برای انتخاب یک تگ به این صورت عمل می کنیم :
#programming{
Color : red;
}
خب حالا تا اینجا اگر پروژه رو ذخیره کنید و اجرا کنید می بینید که عبارت ILIKEPHP.IR به صورت رنگ قرمز در آمده است .همینطور می تونید با استفاده از ID برای تگ های دیگر هم خصوصیات مختلفی رو تعریف کنید و از اونها در پروژه استفاده کنید .
یکی دیگر از بحث های این جلسه استفاده از کلاس یا Class بجای ID است .که برای تعریف class به صورت زیر باید عمل کنید :
.programming{
Color:red;
}
حالا شاید سوالی براتون پیش اومده باشه که فرق ID و Class چی هست ؟
ببینید دوستان طراحان وب اکثرا از ID ها در مواقعی استفاده می کنند که اجزای ثابت و مشخص شده ای در سند وب خودشون دارند . یعنی چی ؟
مثلا یک سایت : دارای یک هدر هستش که ثابته و درجای دیگه ای ازش استفاده نمیشه ، یعنی نمیتونیم از هدر دوبار در صفحه امون استفاده کنیم به همین خاطر از ID برای اونها استفاده می کنیم .
یا مثلا یک footer در سایت داریم که بازهم می تونیم از ID برای اون استفاده کنیم
اما Class زمانی استفاده میشه که شما می خواهید یک خاصیت رو به چند تگ مختلف بدین و از class استفاده می کنید .
مثلا : برای تگ های تیترهای هر پست می تونید از این کلاس استفاده کنید و یا قسمت هایی که می خواهید خاصیت های یک بخشی در آن تکرار بشه .
توجه داشته باشید که در زمان تعریف ID برای یک تگ باید در سند CSS برای Select کردن از # استفاده کنید و برای Select کردن class از . استفاده کنید .
خب کمی حرفه ای تر عمل کنیم :
می تونیم با استفاده از امکاناتی که CSS3 داره توی Select هامون روش های جدید رو امتحان کنیم مثلا :
p.programming{color:red;}
این کد یا نحوه Select باعث میشه که پاراگراف هایی که دارای کلاس programming هستند به رنگ قرمز در بیان .
حالا شما می تونید تگ هاتون رو سفارشی تر تعریف کنید مثلا :
<p name=”html5”>ILIKEPHP.IR</p>
این کد دارای یک خاصیت Name هستش ( حالا امکان داره چند تا تگ دیگه هم همین خاصیت رو داشته باشن ) با استفاده از کد زیر می تونید اون ها رو Select کنید و تغییرات خودتون رو اعمال کنید مثلا :
P[name]{color:red;}
با استفاده از این کد شما دستور دادید که پاراگراف هایی رو که خاصیت Name رو دارند به رنگ قرمز در بیان.
همچنین شما می تونید به شکل زیر هم در سند خودتون اجزاء رو Select کنید :
P[name= “html5”]{
Color:red;
}
با استفاده از این کد شما دستور می دهید پاراگراف هایی رو که دارای نام Html5 هستند به رنگ قرمز در بیان .
نتیجه گیری:
خب در این جلسه وارد Css3 شدیم و نحوه انتخاب کردن اجزاء سند و Select کردن رو تا حدودی یاد گرفتید در جلسات بعدی با این Select ها بیشتر آشنا خواهید شد .
ممنون از اینکه همراه ما بودید
دوره های مارو به دوستانتان معرفی کنید
دوستدار شما : عباس حبیبی
سوالات خود را از ما بپرسید ...
نظرات کاربران