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

شروع موضوع توسط شايان ‏18 اکتبر 2004 در انجمن CSS

  1. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    بزرگ نمائي حرف اول پاراگراف .

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

    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 ندارم ؟!؟! مدير جان كمك ! )
     
  2. بازدیدیار - افزایش بازدید سایت و سیگنال های برندخرید بک لینک
  3. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    من اينو تو DreamWeaver ساختم ! اونجا درست بود !

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

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

    HTML:
     
    
    #cap {
             HEIGHT: 37px;
    
    	FONT-SIZE: 65px;
    	
    	MARGIN-TOP: 2px;
    
    	LINE-HEIGHT: 37px;
    	PADDING-TOP: 10px;
    	PADDING-BOTTOM: 0px;
    }
    
    
     
  4. littlerabbit

    littlerabbit مدیر بازنشسته کاربر فعال

    تاریخ عضویت:
    ‏13 جولای 2003
    نوشته ها:
    667
    تشکر شده:
    5
    محل سکونت:
    Iran
    بنظر میاد یه کم شلوغش کردی شایان. ساده ترش اینه (گذشته از قضیه 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 غيز فعاله اخسان جان يه كاري بكن!!
     
  5. littlerabbit

    littlerabbit مدیر بازنشسته کاربر فعال

    تاریخ عضویت:
    ‏13 جولای 2003
    نوشته ها:
    667
    تشکر شده:
    5
    محل سکونت:
    Iran
    البته اين همه سلكتور ها نيست و چند نوع ديگه هم هست...فرصت شد باقي رو هم ميگم.
     
  6. shankimout

    shankimout Registered User

    تاریخ عضویت:
    ‏17 می 2004
    نوشته ها:
    1,491
    تشکر شده:
    3
    محل سکونت:
    ساری . . . . . . . . . . . . . . Permanently Bann
    اقا ممنون . خيلي بدرد خورد;)
     
  7. Ali_ix

    Ali_ix Registered User

    تاریخ عضویت:
    ‏16 دسامبر 2003
    نوشته ها:
    605
    تشکر شده:
    5
    محل سکونت:
    Tehran
    من عاشق این تیریپ سلکتورهای حرفه ای هستم ! ولی متاسفانه خیلی وقتا با مرورگر اصلی یعنی IE جور در نمیاد !
     
  8. mrxogolo

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

    تاریخ عضویت:
    ‏5 ژانویه 2005
    نوشته ها:
    58
    تشکر شده:
    0
    یه نمه کمتر و یه خورده کامل تر تو اینجا
     
  9. mrxogolo

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

    تاریخ عضویت:
    ‏5 ژانویه 2005
    نوشته ها:
    58
    تشکر شده:
    0
    این سلکتورهای حرفه ای که می گی Pseudo نام دارن. بیشتر
     
  10. Azemati

    Azemati کاربر فعال مووبل تایپ<br> فروشنده معتبر [<a title= کاربر فعال

    تاریخ عضویت:
    ‏18 فوریه 2003
    نوشته ها:
    3,366
    تشکر شده:
    1
    محل سکونت:
    wp-config.php
  11. Ali_ix

    Ali_ix Registered User

    تاریخ عضویت:
    ‏16 دسامبر 2003
    نوشته ها:
    605
    تشکر شده:
    5
    محل سکونت:
    Tehran
    مرسی ..اسمشو دقیقا نمیدونستم ...

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

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

    تاریخ عضویت:
    ‏5 ژانویه 2005
    نوشته ها:
    58
    تشکر شده:
    0
    ترکونده :lol:
     
عسل طبیعی و گرده گل ایرانیخدمات پی پال، وسترن یونیون