Drop capitals - بزرگ نمائي حرف اول پاراگراف

شايان · 18 اکتبر 2004

بزرگ نمائي حرف اول پاراگراف .

بيشتر از اين نمتونم توضيح بدم چيه ! ببينيد !

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

<HEAD>
<TITLE>PT - Css Samples</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



<STYLE type=text/css>


#box {
	FONT-SIZE: 16px;
	FONT-FAMILY:  Georgia, Times New Roman, Times, serif;
  	COLOR: #000;
	HEIGHT: 100px;
	WIDTH: 250px;

	MARGIN: 5em; 

	BORDER-RIGHT: dotted #999999 1px;
	BORDER-TOP: dotted #999999 1px;
	BORDER-LEFT: dotted #999999 1px;
         BORDER-BOTTOM: dotted #999999 1px;

	PADDING-RIGHT: 5px;
	PADDING-LEFT: 5px; 
	PADDING-BOTTOM: 5px;
	PADDING-TOP: 5px;
	

	DISPLAY: block;

	LINE-HEIGHT: normal;
	LETTER-SPACING: 1px;
}

#cap {
         HEIGHT: 37px;

	FLOAT: left;

	FONT-WEIGHT: bold;
	FONT-SIZE: 65px;
	COLOR: #FF8000;
	
	MARGIN-TOP: 2px;
	MARGIN-RIGHT: 1px;

	OVERFLOW: hidden;

	LINE-HEIGHT: 37px;
	PADDING-TOP: 10px;
	PADDING-BOTTOM: 0px;
}

 HTML #cap {
 	MARGIN-TOP: 3px;
	MARGIN-RIGHT: -2px
}
</STYLE>

</HEAD>
<BODY>

<DIV>



    <DIV id=box>

	  <SPAN id=cap>
	    P
	  </SPAN>

  	  ersiantools forum is a place for iranian and persian users 
	  to find the answer to their technical questions about 
	  persian content making on internet.
	 
	 </DIV>
	  


</DIV>


</BODY>

</HTML>

اين رو چك كردم ! مشكلي از نظر استادندارد بودن نداشت ! نه HTML نه CSS !

( راستي من چرا Attach ندارم ؟!؟! مدير جان كمك ! )

شايان · 18 اکتبر 2004

من اينو تو DreamWeaver ساختم ! اونجا درست بود !

الان تو IE نگاه كردم ... يكم تو اون حرف اول كه بزرگ هست مشكل داره ! يعني از پائين كم نشون ميده !

براي اصلاحش ( مخصوصا اگر بخوايد فونت رو تغير بديد حتما بايد اصلاح كنيد ) ، با متغيرهاي اين قسمت ور بريد !

HTML:

#cap {
         HEIGHT: 37px;

	FONT-SIZE: 65px;
	
	MARGIN-TOP: 2px;

	LINE-HEIGHT: 37px;
	PADDING-TOP: 10px;
	PADDING-BOTTOM: 0px;
}

littlerabbit · 22 اکتبر 2004

بنظر میاد یه کم شلوغش کردی شایان. ساده ترش اینه (گذشته از قضیه Box)

کد:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
<style type="text/css">
	
	p:first-letter.testclass
		{
		text-transform : capitalize;
		 HEIGHT: 37px;

		FLOAT: left;

		FONT-WEIGHT: bold;
		FONT-SIZE: 65px;
		COLOR: #FF8000;
		
		MARGIN-TOP: 2px;
		MARGIN-RIGHT: 1px;

		OVERFLOW: hidden;

		LINE-HEIGHT: 37px;
		PADDING-TOP: 10px;
		PADDING-BOTTOM: 0px;
		MARGIN-TOP: 3px;
		MARGIN-RIGHT: -2px	
		}
</style>
</head>
<body>
	<p class="testclass">
		this is a test
	</p>
</body>
</html>

اون text-transform : capitalize; رو هم من اضافه کردم که حرف به حرف بزرگ تبدیل شه (اولین حرف کلمه )

شاید بد نباشه در باره سلکتور ها یه کم وراجی کنم؟
Selector
یه سلکتور نشونگر اینه که کدوم یکی از تگها تحت تاثیر قرار بگیرن و کلا سه نوع سلکتور داریم که میشه با هم ترکیبشون کرد.
1- تحت تاثیز قرار دادن کلیه تگها :
خیلی ساده اسم تگ رو مینویسیم :

کد:

p
/* p : selector for tag P */
{ }
div
/* selector for div tag */
{ }

2-تحت تاثیز قرار دادن (یا انتخاب کردن ) یک کلاس خاص :
در این موارد از یک نقطه قبل از نام کلاس استفاده میکنیم.

کد:

.myclass
/* all tag (any ) with class="myclass" attribute */
{ }

و ترکیب این دو :

کد:

p.myclass
/* for <p class="myclass"> */
{ }

نکته مهم اینه که خصیصه کلاس در مورد تگ ها میتونه تکراری باشه یعنی میشه صدتا تگ P با یه کلاس داشت.
3- ID به عنوان سلکتور
در این حالت فقط یه ID خاص تحت تاثیر قرار داده میشه و باید از علامت # در جلوی شناسه استفاده کرد

کد:

#MyID
/* Tag with ID="MyID" attribute */
{ }

و ترکیب یه تگ با یه ID :

کد:

p#MyID
/* Select <p ID="MyID"> */
{ }

نکته مهم اینه که ID بایست تو صفحه HTML یکتا باشه یعنی هیچ دو تگی نمیتونن یه ID داشته باشن. بنابراین اگه خواستید چند تا مشابه رو تحت تاثیر قرار بدید از کلاس استفاده کنید (البته این که ID باید یکتا باشه بازم مربوطه به استاندارد و غیر استاندارد بودن و خطا نیست! اصطلاحا مکروهه!)

نکته دیگه اینکه منطقی نیست ID و کلاس با هم ترکیب بشن وقتی ID یکتاست دیگه کلاس بی معنیه.
نکته مهم بعدی تگهایی هستن که تقسیم بندی شدن. مثلا تگ A چند حالت داره :

کد:

A:Hover 
/* Mouse over the link */
{ }
A:active
/*Active link */
{ }

یا مثلا تمام تگهای مربوط به پاراگراف میتونن اینجوری باشن :

کد:

p:first-letter
/* First letter in paragraph*/
{ }
p:first-line
/* First line */
{ }

بنابر این در این موردی که دوستمون شایان گفته بود نیازی به جدا نوشتن حرف اول پاراگراف تو یه تگ span اضافه نیست.
البته در این موارد هم میشه کلاس یا ID رو هم در نظر گرفت مثل مثال اول که اولین حرف از کلیه پاراگرافهایی که از کلاس testclass هستن رو تحت تاثیر قرار میده.

راستي اصولا تو اين بخش Attach غيز فعاله اخسان جان يه كاري بكن!!

littlerabbit · 23 اکتبر 2004

البته اين همه سلكتور ها نيست و چند نوع ديگه هم هست...فرصت شد باقي رو هم ميگم.

shankimout · 26 اکتبر 2004

اقا ممنون . خيلي بدرد خورد

Ali_ix · 30 اکتبر 2004

من عاشق این تیریپ سلکتورهای حرفه ای هستم ! ولی متاسفانه خیلی وقتا با مرورگر اصلی یعنی IE جور در نمیاد !

mrxogolo · 11 ژانویه 2005

یه نمه کمتر و یه خورده کامل تر تو اینجا

mrxogolo · 11 ژانویه 2005

به نقل از Ali_ix :
من عاشق این تیریپ سلکتورهای حرفه ای هستم ! ولی متاسفانه خیلی وقتا با مرورگر اصلی یعنی IE جور در نمیاد !

این سلکتورهای حرفه ای که می گی Pseudo نام دارن. بیشتر

Azemati · 11 ژانویه 2005

littlerabbit جان، خيلي آموزنده و جالب بود.
دستت درست!

Ali_ix · 11 ژانویه 2005

به نقل از mrxogolo :
این سلکتورهای حرفه ای که می گی Pseudo نام دارن. بیشتر

مرسی ..اسمشو دقیقا نمیدونستم ...

حالا CSS 2 که در این زمینه بچه است !
CSS 3 چه کرده ! :wacko:

mrxogolo · 11 ژانویه 2005

به نقل از Ali_ix :
مرسی ..اسمشو دقیقا نمیدونستم ...

حالا CSS 2 که در این زمینه بچه است !
CSS 3 چه کرده ! :wacko:

ترکونده :lol:

Drop capitals - بزرگ نمائي حرف اول پاراگراف

شايان

مدیران قدیمی

شايان

مدیران قدیمی

littlerabbit

مدیر بازنشسته

littlerabbit

مدیر بازنشسته

shankimout

Registered User

Ali_ix

Registered User

mrxogolo

کاربر تازه وارد

mrxogolo

کاربر تازه وارد

Azemati

کاربر فعال

Ali_ix

Registered User

mrxogolo

کاربر تازه وارد

بک‌لینک