آموزش css 2

شروع موضوع توسط bluekerm ‏28 فوریه 2010 در انجمن زبان HTML

  1. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    CSS ATTRIBURE SELECTORS
    در css این امکان رو داریم که بتونیم برای عناصری style تعریف کنیم که یه صفت خاص رو دارن.
    مثال: در این مثال color:blue فقط به اون عناصری اعمال میشه که title داشته باشن.
    کد (Text):
    [LEFT]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <"style type="text/css>
    [title]
    {
    color:blue;
    }
    </style>
    </head>
    <body>
    <h1 title="Hello world">Hello world</h1>
    <a title="W3Schools" href="http://w3schools.com">W3Schools</a>
    <hr />
    <h2>Will not apply to:</h2>
    </body>
    <html/>
    [/LEFT]
    یعنی h1 و a با رنگ آبی خواهند بود ولی h2 اینجوری نخواهد بود.
    حالا اگه کد زیر رو اضافه کنیم:
    کد (Text):
    [LEFT]<"style type="text/css>
    [title=W3Schools]
    }
    border:5px solid green;
    {
    <style/>
    [/LEFT]
    در این صورت استایل بالا به هر تگی که title داشته باشه و مقدار title برابر W3Schools باشه اعمال می شه.
    با این روش می تونیم برای فرم ها به راحتی استایل بنویسیم.
    مثال:
    کد (Text):
    [LEFT]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <style>
    Input[type="text"]
    {
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:gray;
    }
    Input[type="button"]
    }
    width:120px;
    margin-left:35px;
    display:block;
    }
    </style>
    </head>
    <body>
    <"form name="input" action="" method="get>
    Firstname:<input type="text" name="Name" value="Enter name" size="20">>
    Lastname:<input type="text" name="Name" value="Enter family" size="20">>
    <"input type="button" value="Example Button>
    </form>
    </body>
    </html>
    [/LEFT]
     
    نوشته شده توسط bluekerm در ‏10 جولای 2010
    mazyar_f، splinter cell، echessdesign و 3 نفر دیگر از این ارسال تشکر کرده اند.
  2. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    آموزش css2 هم تموم شد و اینم pdf کل پست هایی که تا الان نوشتم
    تو این فایل pdf نه چیزی اضافه شده و نه کم شده دقیقا همین مطالب هستن :wink:
     

    پیوست ها:

    • css.pdf
      اندازه فایل:
      کیلوبایت 399.3
      نمایش ها:
      211
    نوشته شده توسط bluekerm در ‏10 جولای 2010
    mazyar_f، tarhekhial، baviran و 5 نفر دیگر از این ارسال تشکر کرده اند.
  3. TINA 061

    TINA 061 New Member

    ارسال‌ها:
    19
    تشکر شده:
    5
    امتیاز دستاورد:
    1
    سلام
    ببخشيد يه سوال برام پيش اومده
    توي تمام فايل هاي css عكس ها با اسم مثلا bg.jpg يا m1.jpg نوشته ميشن ... من ميخوام بدونم مثلا اگه بخوايم يه عكس بذاريم پس لينك عكس رو چجوري بايد قرار بديم؟
     
    نوشته شده توسط TINA 061 در ‏26 آگوست 2010
  4. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    منظورتون از لینک دادن چیه؟:-?
    یعنی عکس رو تو یه سایت دیگه آپلد کردین حالا می خواین ازش استفاده کنین؟
     
    نوشته شده توسط bluekerm در ‏9 سپتامبر 2010
    تیله از این پست تشکر کرده است.
  5. Agent 47

    Agent 47 New Member

    ارسال‌ها:
    27
    تشکر شده:
    19
    امتیاز دستاورد:
    1
    یه سؤال داشتم.
    تفاوت بین padding و margin چیه؟
     
    نوشته شده توسط Agent 47 در ‏25 نوامبر 2010
    Morteza1371 از این پست تشکر کرده است.
  6. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    padding حاشیه داخلیه ولی Margin فاصله بیرونی:

    [​IMG]
     
    نوشته شده توسط pouya saadeghi در ‏25 نوامبر 2010
    mazyar_f، tarhekhial، meher و 3 نفر دیگر از این ارسال تشکر کرده اند.
  7. hasanak852

    hasanak852 Active Member

    ارسال‌ها:
    128
    تشکر شده:
    59
    امتیاز دستاورد:
    28
    یکی از قابلیتهای سی اس اس که باعث میشه کدهای اچ تی ام ال شما مرتب تر و ساده تر باشن رو با مثال میگم:
    شما به تیبل دارید به این صورت:
    HTML:

    <table id="test">
        <tr>
            <td>
                Hello,
                <p>
                    This is
                    <span>
                        My Table
                    </span>
                </p>
            </td>
        </tr>
    </table>
     
    خب با سی اس اس میتونید اینجوری برای هر تگ استایل مشخص کنید:
    HTML:

    <style>
    <!--
    #test{
       border:1px solid #000;
    }
    #test td{
       font: bold 11px tahoma; color:red;
    }
    #test td p{
       font: normal 11px arial; color:blue;
    }
    #test td p span{
       font: normal 11px mitra; color:yellow;
    }
    -->
    </style>
     
    یعنی نوشته Hello قرمزباشه با فونت تاهما، This is آبی با فونت آریال و My table زرد رنگ باشه و فونت میترا.
    امیدوارم مفید باشه.:rose:
     
    نوشته شده توسط hasanak852 در ‏1 مارس 2012
    تیله از این پست تشکر کرده است.
  8. ramezany72

    ramezany72 New Member

    ارسال‌ها:
    1
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام من این مشکلو دارم من یک div درون یک div دیگر تعرف می کنم و می خواهم دیو دوم را به تنهایی جابجا کنم اما هر بار دیو اولی هم جابجا می شود
    #background{
    width:1200px;
    height:1099px;
    margin:0px auto;
    background-image:url(ShelfWebTemplate.png);
    }
    #background1{
    width:952px;
    height:55px;
    background-color:#093;
    margin:auto;​

     
    نوشته شده توسط ramezany72 در ‏11 آوریل 2015
  9. andria

    andria New Member

    ارسال‌ها:
    8
    تشکر شده:
    1
    امتیاز دستاورد:
    1
    سلام .. نوشتن استایل در قالب بهتره یا لینک دادن به css?
     
    نوشته شده توسط andria در ‏14 ژوئن 2015
  10. iliadata

    iliadata New Member

    ارسال‌ها:
    1
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    دوست عزیز مقیاس em بهتر از % هستش
     
    نوشته شده توسط iliadata در ‏4 ژانویه 2016

به اشتراک بگذارید