آموزش css 2

bluekerm · Jul 10, 2010

CSS ATTRIBURE SELECTORS
در css این امکان رو داریم که بتونیم برای عناصری style تعریف کنیم که یه صفت خاص رو دارن.
مثال: در این مثال color:blue فقط به اون عناصری اعمال میشه که title داشته باشن.

کد:

[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 اینجوری نخواهد بود.
حالا اگه کد زیر رو اضافه کنیم:

کد:

[LEFT]<"style type="text/css>
[title=W3Schools]
}
border:5px solid green;
{
<style/>
[/LEFT]

در این صورت استایل بالا به هر تگی که title داشته باشه و مقدار title برابر W3Schools باشه اعمال می شه.
با این روش می تونیم برای فرم ها به راحتی استایل بنویسیم.
مثال:

کد:

[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 · Jul 10, 2010

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

TINA 061 · Aug 26, 2010

سلام
ببخشيد يه سوال برام پيش اومده
توي تمام فايل هاي css عكس ها با اسم مثلا bg.jpg يا m1.jpg نوشته ميشن ... من ميخوام بدونم مثلا اگه بخوايم يه عكس بذاريم پس لينك عكس رو چجوري بايد قرار بديم؟

bluekerm · Sep 9, 2010

tina 061 گفت:
سلام
ببخشيد يه سوال برام پيش اومده
توي تمام فايل هاي css عكس ها با اسم مثلا bg.jpg يا m1.jpg نوشته ميشن ... من ميخوام بدونم مثلا اگه بخوايم يه عكس بذاريم پس لينك عكس رو چجوري بايد قرار بديم؟

منظورتون از لینک دادن چیه؟ :-?

یعنی عکس رو تو یه سایت دیگه آپلد کردین حالا می خواین ازش استفاده کنین؟

Agent 47 · Nov 25, 2010

یه سؤال داشتم.
تفاوت بین padding و margin چیه؟

pouya saadeghi · Nov 25, 2010

Agent 47 گفت:
یه سؤال داشتم.
تفاوت بین padding و margin چیه؟

padding حاشیه داخلیه ولی Margin فاصله بیرونی:

hasanak852 · Mar 1, 2012

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

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:

ramezany72 · Apr 11, 2015

سلام من این مشکلو دارم من یک 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;