برنامه نویسی
دفعات بازدید ۴۷۱آموزش برنامه نویسی جلسه اول آشنایی با زبان css
۱
جلسه اول آموزش css
از این جلسه ما شروع کار با css را خواهیم داشت. این زبان برای ایجاد تغییرات ظاهری در طراحی سایت ها به کار می رود. به عبارت دیگر این زبان تفاوت معنایی ایجاد نمی کند بلکه تنها ظاهر سایت و رنگ و لعاب آن را تغییر می دهد.
اولین نکته در مورد این زبان محل به کار گیری این زبان است.
برای استفاده از این زبان سه محل کلی وجود دارد . اولین حالت inline نامیده می شود. یعنی روی همان تگی که می خواهیم استایلش را تغییر بدهیم این دستورات را می نویسیم.
<p style="color:red"> این یک متن نمونه است</p>
این یک متن نمونه است
این روش نقاط قوت وضعف خود را دارد. نقطه قوت آن این است که نیاز به آدرس دهی ندارید. شما همان جا که میخواهید دستورات اعمال شود می نویسید. اما نقاط ضعف آن این است که از نظر گوگل این کار مناسب نیست. مشکل دیگر کد ها بسیار شلوغ می شود. و خوانایی کد بسیار کاهش پیدا می کند. همچنین نمی توان تکرار پذیر کد بنویسیم. یعنی اگر برای یک المان چند خط استایل بنویسیم. اگر از این المان ها چند مورد دیگر هم داشته باشیم باید برای همه آن ها دوباره همین دستورات را بنویسیم. حالا اگر بخواهیم یکی را تغییر بدهیم همه را باید تغییر بدهیم.
مشکل دیگر این که این دستورات قابل استفاده در پروژه ها و صفحات دیگر نیست. چرا که ادغام شده است در صفحه .
حال اگر ما بتوانیم این دستورات را جدا کنیم بسیاری از مشکلات حل می شود.
حالت دوم زمانی است که شما یک بخش از صفحه را به این زبان تخصیص می دهید. اشاره کردیم که تگ style برای این منظور ساخته شده است. شما می توانید دستورات خود را در این قسمت بنویسیم. خوبی این روش .سادگی کد و قابلیت استفاده آن در قسمت های مختلف است. اما مشکل استفاده از آن در صفحات مختلف هنوز وجود دارد. یعنی اگر شما ۱۰۰ خط کد برای استایل بنویسید برای اینکه در صفحه ی دیگر هم این ها را استفاده کنید باید این کد ها را کپی کنید. به مثال زیر توجه کنید.
<p> این یک متن نمونه است
</p>
<style>
P{
color:red;
}
</style>
این یک متن نمونه است
برای این کار یک بخش style در کد ایجاد می کنیم. معمولا محل آن قسمت head صفحه است. یعنی داخل تگ head آن را قرار می دهیم. سپس باید مشخص کنیم که دستوراتی که می خواهیم بنویسیم برای چه تگی است. سپس یک براکت برای آن باز و بسته می کنیم که مشخص کنیم محدوده دستورات تا کجاست.
سپس در داخل این براکت ها کد های css را می نویسیم. دستورات تفاوتی با آنچه که در حالت inline هست ندارد. تنها نکته این است که شما باید بتوانید درست ادرس دهی کنید.
برای تگ ها کافی است فقط اسم آن را بنویسیم. برای کلاس ها کافی است یک نقطه قبل از اسم قرار بدهیم. به مثال زیر توجه کنید.
<p class="myClass">این یک متن نمونه است
</p>
<style>
.myClass{
color:red;
}
</style>
این یک متن نمونه است
اما اگر بخواهیم به آیدی ها ادرس دهی کنیم باید از علامت # استفاده کنیم. به مثال زیر توجه کنید.
<p id="myParagraph">این یک متن نمونه است
</p>
<style>
#myParagraph{
color:red;
}
</style>
این یک متن نمونه است
حال به نظر شما کدام یکی از این آدرس دهی ها الویت بیشتری خواهد داشت. بیایید امتحان کنیم.
<p id="myParagraph" class="myClass">این یک متن نمونه است
</p>
<style>
#myParagraph{
color:red;
}
.myClass{
color:blue;
}
p{
color:yellow;
}
</style>
این یک متن نمونه است
نتیجه اینکه چون اشاره کردن با اسم تگ بسیار کلی است و اشاره کردن با اسم کلاس خاص تر از آن است و اشاره با ایدی از همه آن ها خاص تر است در نتیجه دستور آخری اجرا می شود.
به صورت یک معیار کلی اختصاصی ترین انتخاب گر معیار عمل خواهد بود.
ما معمولا از حالت تگ استایل برای نوشتن دستورات استفاده می کنیم. چرا که می توانید از آن برای حالت سوم هم استفاده کنید . اما حالت سوم چیست. تنها مشکلی که حالت دوم داشت این بود که نمی توانستیم از آن در صفحات مختلف استفاده کنیم. برای این کار روش سوم را استفاده می کنیم. یک فایل می سازیم با پسوند css و دستورات خود را درون آن می نویسیم. توجه کنیم که در این روش از تگ style استفاده نمی کنیم.
حال برای فراخوانی این فایل و دستورات css کافی است در قسمت head صفحه ی مورد نظر از تگ فراخوانی استفاده کنیم.
<head>
<link rel="stylesheet" href="file.css"/>
</head>
با تگ لینک شما می خواهید یک صفحه دیگر را که حاوی دستورات css است به این صفحه لینک کنید. افراد زیادی هستند که کتابخانه های بسیاری برای زیباتر کردن سایت های شما نوشته اند که تنها کافی است شما آدرس آن را بردارید و در صفحات خود استفاده کنید. یکی از مهم ترین کتابخانه های css عبارت است از bootstrap که در همین سایت هم از آن استفاده شده است. این کتاب خانه برای تمامی تگ ها تغییرات ظاهری زیادی قرار داده است. شما می توانید برای آشنایی با آن به سایت bootstrap مراجعه کنید.
ما در مورد سه روش استفاده از زبان css صحبت کردیم. اما همان طور که گفتیم مهم ترین مسئله بخش آدرس دهی است.
آدرس دهی به خود تگ ، کلاس ها و آیدی ها را گفتیم اما انتخاب گر ها به همین ها خلاصه نمی شود. شما میتوانید ترکیبی از این دو را داشته باشیم. برای مثال آدرس دهی به تگ input هایی که کلاس به خصوصی هم داشته باشد . برای این کار این دو را بلافاصله می نویسیم. به مثال زیر توجه کنید.
<input class="classA" value="text">
<input class="classB" value="text">
<style>
input.classA{
Color:red;
}
input.classB{
Color:blue;
}
</style>
اگر بخواهیم یک دستور را برای انتخاب گر های مختلفی بنویسیم چطور؟ فرض کنید برای مثال بالا یک دستور را برای کلاس های classA و کلاس classB بنویسیم. برای این کار با یک ویرگول آن ها را از هم جدا می کنیم. مانند زیر.
<input class="classA" value="text">
<input class="classB" value="text">
<style>
classA , classB{
Color:red;
}
</style>
انتخاب گر دیگر پیدا کردن فرزندان یک تگ است. فرض کنید شما میخواهید بگویید تمام تگ هایی پارگرافی که داخل یک کلاس به خصوص هستند را پیدا کنید. برای این کار از یک فاصله استفاده می کنیم. مانند زیر.
<div class="red">
<p> red text</p>
</div>
<div class="blue">
<p> blue text</p>
</div>
<style>
.red p{
Color:red;
}
.blue p{
Color:blue;
}
</style>
red text
blue text
مبحث انتخاب گر ها بسیار پیچیده هستند و موارد بسیار دیگری را نیز در بر می گیرند اما برای این جلسه و شروع کار تنها به یک مورد دیگر نیز اشاره می کنیم. موارد بعدی را به ترتیب در طول آموزش ها اشاره می کنیم.
شما می توانید تمام المان های موجود را با علام * مشخص کنید. برای مثال تمام فرزندان یک کلاس . یا حتی تمام تگ های موجود در صفحه . هر جایی که دیگر نتوانیم بیشتر اشاره کنیم و همه تگ ها را بخواهیم. مثال زیر را نگاه کنید.
<div class="red">
<p> red text</p>
<textarea> this is another element</textarea>
</div>
<style>
.red *{
Color:red;
}
</style>
red text