چگونگی استفاده از CSS
در این جلسه به آموزش چگونگی استفاده از CSS خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
در این سلسله از مقالات، شما چگونگی استفاده از CSS جهت کنترل style و layout چندین صفحه وب بطور همزمان را یاد خواهید گرفت. برای یادگیری CSS ،شما باید درکی پایه ای از مفاهیم HTML و XHTML داشته باشید.
یک نمونه از CSS
body {
background-color :#d0e4fe;
}
h1 {
color :orange;
text-align :center;
}
p {
font-family: "Times New Roman";
font-size :20px;
}
CSS چیست؟
Css مخفف Cascading Style Sheets است.
style ها چگونگی نمایش عناصر HTML را تعریف می کنند. Style ها برای حل یک مشکل به ۰.۴ HTML اضافه شدند. External Style Sheets می تواند در در انجام کار صرفه جویی کند. External Style Sheets در فایل های CSS ذخیره می شوند.
نمایش CSS
سند HTML را می توان با style های مختلف نمایش داد.. Styleها مشکل بزرگی را حل کردند.
HTML هرگز به قصد در برگرفتن tag برای فرمت کردن یک سند ایجاد نشد. HTML هرگز به قصد تعریف محتوای یک سند ایجاد نشد. وقتی tag ها و attribute های رنگ به ۲.۳ HTML اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وب سایت های بزرگ، که فونت ها و اطلاعات رنگ در هر صفحه مجزا بودند، فرآیندی طولانی و پر هزینه ای شد.
برای حل این مشکل، کنسرسیوم World Wide Web ،تصمیم گرفت CSS را ایجاد کند. در ۰.۴ HTML ،می توان کل قالب بندی را از سند HTML حذف کرد، و در فایل CSS جداگانه ای ذخیره کرد.
امروزه، همه مرورگرها CSS را ساپورت می کنند. CSS ،در انجام مقدار زیادی کار صرفه جویی می کند CSS ،تعریف می کند عناصر HTML چگونه نمایش داده می شوند.
معمولا Style ها در فایلهای .css ذخیره می شوند. sheet style های خارجی شما راتنها با ویرایش یک فایل قادر به تغییر ظاهر و layout همه صفحات موجود در یک وبسایت می کند.
مثال
فایل HTML زیر، لینکی به یک sheet style خارجی با تگ است
<html> <head> <link rel="stylesheet" type="text/css" href="ex1.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>
این، فایل sheet style است
body {
background-color: yellow;
}
h1 {
font-size: 36pt;
}
h2 {
color: blue;
}
p {
margin-left: 50px;
}
دستور نحوی CSS
یک set rule یک حکم یا دستور است که نحوه ی پردازش المان ها را روی یک صفحه ی HTML برای مرورگر مورد نظر تعریف می کند. همان طور که در تصویر زیر مشاهده می کنید متشکل است از یک selector انتخاب گر و block declaration بلوک یا ساختمان اعلان است .
Selector به آن عنصر HTML ی اشاره دارد که طراح وب مایل است سبک دهی کند .
یک declaration block دربردارنده ی یک یا چند تعریف declaration است که توسط نقطه ویرگول semicolon از هم جدا می شوند .
هر تعریف نیز خود شامل یک اسم خصوصیت name property و همچنین یک مقدار value است. که توسط یک دو نقطه colon از هم جدا سازی می شوند .
یک مثال CSS
همیشه یک تعریف CSS به نقطه ویرگول ختم می شود، گروه های تعریفی group declaration نیز داخل کاراکترهای }{ محصور می شوند
p {color:red; text-align:center;}
به منظور افزایش قابلیت خوانایی CSS ،شما می توانید هر بخش یک تعریف را روی خط مجزا قرار دهید . مثال
p {
color: red;
text-align: center;
}
چگونگی استفاده از CSS
توضیحات یا comment ها در CSS
comment به منظور ارائه ی توضیح درباره ی کد مورد نظر استفاده می شود ، در صورت لزوم همچنین به شما کمک می کند متن برنامه code source را در آینده اصلاح کنید . توضیحات comments کاملا توسط مرورگرها نادیده گرفته می شوند . یک توضیح CSS با عالمت /* آغاز گردیده و با کاراکتر /* پایان می یابد . توضیحات نیز ممکن است چندین خط را به خود تخصیص دهد.
مثال
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
انتخاب گر های CSS
انتخاب گر های CSS به شما این امکان را می دهد که المان های html را انتخاب کرده و متناسب با نیاز خود آن ها را تنظیم و دستکاری manipulate کنید . با استفاده از انتخاب گرهای CSS می توان المان های دلخواه و مورد نظر HTML را بر اساس شناسه ID ، کالس، نوع type ،خصیصه attribute پیدا و یا انتخاب و گزینش کرد . انتخاب گر المان selector element the انتخاب گر عنصر در واقع المان ها را بر اساس اسم المان مربوطه انتخاب می کند . می توانید کلیه ی المان های <p> را روی صفحه درست بدین ترتیب انتخاب کنید کلیه ی عناصر <p> وسط چین center- align شده و متن آن با رنگ قرمز نشان داده می شود.
p {
text-align: center;
color: red;
}
چگونگی استفاده از CSS
انتخاب گر شناسه (id selector)
id selector از خصیصه ی شناسه attribute id HTML برای انتخاب یک المان معین بهره می گیرد . یک شناسه داخل صفحه باید منحصر بفرد باشد، بنابراین انتخاب گر شناسه زمانی بکار گرفته می شود که بخواهید یک عنصر تک و منحصر بفرد را انتخاب کنید . جهت انتخاب یک المان با شناسه ی ویژه مشخص، باید یک کاراکتر hash # را تایپ کرده و بدنبال این کاراکتر شناسه ی المان را قرار دهید . قانون سبک دهی rule style زیر با شناسه ی “para1 “به المان HTML اضافه می شوند
#para1 {
text-align: center;
color: red;
}
توجه هیچگاه اسم شناسه name ID را با یک عدد آغاز نکنید .
انتخاب گر کلاس (class selector)
انتخاب گر کلاس المان ها را با یک خصیصه ی کلاس / attribute class ویژه آغاز می کند . به منظور انتخاب المان ها با کلاسی معین، یک کاراکتر نقطه و به دنبال آن اسم کلاس را تایپ کنید. در مثال زیر، کلیه ی عناصر HTML با کلاس “center ،”وسط چین (center- align )خواهند بود
.center {
text-align: center;
color: red;
}
همچنین می توان مشخص کرد که تنها عناصر خاصی از HTML دست خوش تغییر یک کلاس معین قرار گیرند. به عبارتی دیگر می توانید تعیین کنید که فقط المان های مدنظر شما توسط یک کلاس کنترل شده و تحت تاثیر آن قرار گیرند. در مثالی که زیر ارائه شده، تمامی المان های <p> با کلاس “center “وسط چین (center- align)می شوند.
p.center {
text-align: center;
color: red;
}
توجه از آغاز کردن اسم کلاس با عدد اکیدا خودداری کنید .
ادغام گروه ها / گروه بندی انتخاب گرها (selectors grouping)
چنانچه المان هایی با تعاریف سبک (definition style)مشابه به مثال ذیل دارید، در آن صورت می توانید با گروه بندی کد ها آنها را سامان دهی کرده و در عین حال اندازه ی کدهای ذکر شده را به حداقل برساند.
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
برای این منظور کافی است انتخاب گرها را با استفاده از ویرگول از هم جدا ساخت .
نمونه ی زیر در حقیقت همان تکه کد فوق است. که در آن سه گروه مزکور با هم در یک گروه ادغام شده اند و هر گروه با بهره گیری از ویرگول از گروه دیگر متمایز شده است
h1,h2,p{
text-align: center;
color: red;
}
ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری چگونگی استفاده از CSS پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت. پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید
دیدگاه ها