صفحه: [1]   پایین
  چاپ صفحه  
نويسنده موضوع: آموزش css (قسمت دوم)  (دفعات بازدید: 2325 بار)
تقدسی
Super Manager
*

تشكرها : 100
آفلاین آفلاین

جنسيت : دختر
تعداد ارسال: 380

هیهات من الذله ...


ديدن مشخصات WWW
« : 25 آذر 1388,ساعت 11:52:14 »

آموزش css (قسمت دوم)
اصول نوشتن style

یک دستور CSS از سه قسمت تشکیل شده است: سلکتور یا انتخابگر (selector)، ویژگی (property) و مقدار (value). این سه قسمت در CSS به صورت زیر نوشته می شوند:

کد:
 

کد:
selector {property: value}
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 



سلکتور معمولاً یکی از تگهای HTML یا سایر عناصر صفحه است که می خواهیم ویژگیهایی را برای آن تعریف کنیم. ویژگی ها مشخصاتی هستند که ما می خواهیم آنها را تغییر دهیم و مقادیر هم مقدار آن ویژگی را تعیین می کنند که ممکن است یک اندازه برای تعیین ارتفاع، یک رنگ، آدرس یک تصویر و … باشند. برای جدا کردن ویژگی ها از مقادیر آنها از علامت دو نقطه ( : ) استفاده می کنیم و ویژگیها و مقادیر را درون آکولاد ( {} ) قرار می دهیم تا از سلکتور مجزا باشند. برای مثال دستور زیر برای مشخص کردن رنگ متن در صفحه استفاده می شود:

کد:
 

کد:
body {color: black}
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 



تذکر: اگر مقداری که استفاده می کنید از چند کلمه مجزا تشکیل شده است از علامت دابل کوت ( ” ” ) در اطراف آن استفاده کنید:


کد:
 

کد:
body {font-family: “Times New Roman”}
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 



تذکر : اگر از چند ویژگی برای یک سلکتور استفاده می کنید باید ویژگیها را با یک نقطه ویرگول ( ; ) از هم جدا کنید. برای نمونه در مثال زیر یک پاراگراف با متن وسط چین و آبی رنگ را تعریف می کند:


کد:
 
کد:
p { text-align: center; color:blue }
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 


برای اینکه استایلی که می نویسید قابل فهم تر باشد می توانید هر ویژگی را در یک سطر جداگانه بنویسید. مانند زیر:


کد:
 

کد:
p {
font-family: Tahoma;
font-size: ۱۰pt;
color: black
}
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 


گروه بندی سلکتورها :
شما می توانید از یک ویژگی برای چندین سلکتور استفاده کنید بدون آنکه نیازی باشد برای هر سلکتور کد جداگانه ای بنویسید. برای این کا باید نام همه سلکتور ها را به دنبال هم بنویسید اما به خاطر داشته باشید که سلکتور ها باید به وسیله یک کاما از هم جدا شده باشند. در مثال زیر رنگ متن را برای ۵ تگ متفاوت HTML مشخص می کنیم:


کد:
 
کد:
p,h۱,h۲,div,table {
color: blue
}
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 



نکته: نباید بعد از آخرین سلکتور از کاما استفاده شود. این باعث می شود تا بعضی مرورگرها از استایل چشم پوشی کنند.

برای مثال نمونه زیر غلط است:


کد:
 

کد:
p, a, h۱, { color: #۳۳۳۳۳۳ }
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 



ولی نمونه زیر صحیح است:


کد:
 
کد:
p, a, h۱ { color: #۳۳۳۳۳۳ }
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 


چند کلاس و id نیز قابلیت گروهبندی دارند که بعداً به نحوه گروهبندی آنها می پردازیم.

کامنتها در CSS :
کامنت شامل توضیحاتی است که در مورد کد داده می شود و هنگامی که بعد از اینکه مدتی از نوشتن یک کد گذشت قصد ویرایش آنرا داشته باشید به شما در فهمیدن کدها کمک می کند. کامنتها توسط مرورگر خوانده نمی شوند و در صفحه نمایش داده نمی شوند. یک کامنت در CSS با علامت ( */ ) آغاز می شود وبا علامت ( /* ) پا می یابد. مثال زیر یک کامنت را در CSS نشان می دهد:


کد:
 
کد:
*/این یک کامنت است /*
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 

 

خارج شده است

كاربران گرامی : لطفاً قبل از هرگونه فعاليت ابتدا قوانين انجمن را مطالعه  و قبل از ارسال جديد در انجمن جستجو نماييد.
تقدسی
Super Manager
*

تشكرها : 100
آفلاین آفلاین

جنسيت : دختر
تعداد ارسال: 380

هیهات من الذله ...


ديدن مشخصات WWW
« پاسخ #1 : 25 آذر 1388,ساعت 11:57:19 »

آموزش CSS قسمت 3- استفاده از Style در تگهای HTML : ( روش خطی )

برای استفاده از CSS به صورت کلی ۳ حالت داریم ( در مقدمه به آنها اشاره شد)
که در آموزش های بعدی با اونها آشنا میشید
ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است. که به این روش روش خطی (inline ) می گویند.

برای افزودن استایل به یک تگ باید عبارت ” “=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( ” ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید



کد:
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->



برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

کد DIV:
 

کد:
متن داخل

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( ” ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

متن داخل DIV

به خاطر داشته باشید که برای اینکه خاصیت این استایل از بین برود باید تگی را که استایل در آن به کار رفته است ببندید. در اینجا تا زمانی که تگ DIV بسته نشده باشد متن ما به رنگ قرمز نمایش داده خواهد شد.

این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:


این متن قرمز رنگ و ایتالیک است

.


کد:
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 

نتیجه به صورت زیر خواهد بود:

این متن قرمز رنگ و ایتالیک است.

در این روش می توانیم به هر تعداد که لازم باشد از ویژگیهای مختلف درون یک تگ HTML استفاده کنیم. به مثال زیر توجه کنید:


کد:



متن مورد نظر اینجا قرار می گیرد


<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
 



در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت ۱۲pt و در وسط صفحه خواهیم داشت:

متن مورد نظر اینجا قرار می گیرد.

در قسمتهای بعدی لیستی را از ویژگیهای مختلفی که با استایل می توانیم آنها را کنترل کنیم خواهیم آورد. در اینجا فقط قصد آموزش نحوه قرارگیری استایل در تگهای HTML را داشتیم

روش های دیگر استفاده از Style بهینه تر هستند ، اما گاهی اوقات نیاز به استفاده از این روش ضروری می باشد
در قسمت های بعد روش های دیگر استفاده از Style را هم بررسی می کنیم
خارج شده است

كاربران گرامی : لطفاً قبل از هرگونه فعاليت ابتدا قوانين انجمن را مطالعه  و قبل از ارسال جديد در انجمن جستجو نماييد.
انجمن تخصصی استادان و دانشجویان کامپیوتر ایران
   

پنل اس ام اس
 خارج شده است
صفحه: [1]   بالا
  چاپ صفحه  
 
پرش به :