وبسایت هک شد ها ها ها ها

i am monster

this web by sarbaz vatan

ha ha ha ha ha ha

در این بخش از آموزش css ، انتخابگرها  را برای شما نام می بریم.

از جمله مواردی که سی اس اس در اختیار شما می گذارد تعیین انتخابگرهایی به نام class و id می باشد.در اینجا انواع انتخابگرها را برای شما توضیح می دهیم.
class : عناصری که به آنها این دستور وارد شده را به style مورد نظر تبدیل میکند.
#id : عناصری که دستور id=name را  دارند را به style موزد ظنر تبدیل می کند.
* : همه ی عناصر را انتخاب می کند و دستورات مورد نظر را اعمال میکند.
 element : تگ های <p> را انتخاب میکند و دستورات مورد نظر را در آنها اعمال می کند.
 elementءelement : تگ های p , h1 را انتخاب میکند و style موردنظر را در آنها اعمال می کند.
element element : همه ی تگهای p که داخل تگ div قرار گرفته اند را انتخاب می کند و دستور مورد نظر را در آنها اعمال می کند.
element>element : تگ ها p که داخل تگ div می باشند و داخل این تگ ها به وجود آمده اند را انتخاب می کند و style موردنظر را به اعمال می کند.
element+element : تگ های p که بلافاصله پپس از تگ div قرار گرفته اند را انتخاب می کند و دستورات مورد نظر را به انها اعمال می کند.

attribute : تگ های a که ویژگی target را داشته باشند را انتخاب کرده و style مورد نظر را به آن اعمال می کند.

 attribute=value: تگ های a که ویژگی target=_blank را داشته باشند را انتخاب می کند و style مورد نظر را به آن اعمال می کند.

attribute~=value : تگ های a که ویژگی title=pars را دارند را انتخاب کرده و style مورد نظر را به آن اعمال می کند.
attribute|=value : این انتخابگر عناصری که ویژگی lang آنها با fa شروع میشود را انتخاب کرده و style موردنظر را بر روی آن اعمال می کند.

link : این انتخابگر تگ های a ای را که روی آنها کلیک نشده است را انتخا کرده و style موردنظر را به آن اعمال می کند.
visited : گ های a ای که روی آن کلیک شده باشد را انتخاب کرده و style موزدنظر را بر روی آن اعمال میکند.
 hover:تگ های a ای که با ماوس روی آن ها میروید را انتخاب می کند و دستورات موردنظر را به آن اعمال می کند.
focus:همه ی تگ های input را انتخاب کرده و دستور موردنظر را اجرا می کند.

first-letter : این انتخابگر اولین حرف تگ p را انتخاب کرده و دستور مورد نظر را به آن اعمال می کند.مواردی که می تواند در first-letter مورداستفاده قرار داد عبارتند از:

  √  font properties
  √  color properties
  √  background properties
  √  margin properties
  √  padding properties
  √  border properties
  √  text-decoration
  √  vertical-align (only if float is 'none')
  √  text-transform
  √  line-height
  √  float
  √  clear

first-line : این انتخابگر اولین خط از تگ p را انتخاب می کند و style مورد نظر را به آن اعمال می کند.first-line شامل ویژگی هایی می باشد که عبارتند از :

 √  font properties
  √  color properties
  √  background properties
  √  word-spacing
  √  letter-spacing
  √  vertical-align
  √  text-decoration
  √  text-transform
  √  line-height
  √  clear

first-child : این انتخابگر تمام تگ های p را انتخاب می کند و دستور مورد نظر را به آن اعمال می کند.

before : به اول تمامی تگ های p لینک http://sitedesign-co.ir را اضافه می کند.

after : بعد تگ های p لینک http://sitedesign-co.ir را اضافه می کند.

lang : این انتخابگر تمام تگ های p که با ویژگی lang=it شروع می شوند ر انتخاب کرده و دستورات مورد نظر را به آنها اعمال می کند.

element1~element2 : تمام تگ های ul که والد مشترکی با تگ p دارند را انتخاب می کند و دستورات را در آن ها اعمال می کند.

attribute^=value : تمام تگ های div که با ویژگی class=test شروع میشوند را انتخاب کرده و style موردنظر را به آنها اعمال می کند.
attribute$=value : تمام تگ ها ی div که با ویژگی class=test  هستند را انتخاب می کند و style مورد نظر را به آنها اعمال می کند.
attribute*=value : این انتخابگر تگ های div که ویژگی class=test را شامل می شود را انتخاب کرده و style موردنظر را به آن اعمال می کند.

first-of-type : اولین تگ p را انتخاب کرده و سپس دستور مورد نظر را در آن اعمال می کند.
last-of-type : این انتخابگر آخرین تگ p را انتخاب کرده و  دستورات مدنظر را در آن اعمال می کند.
only-of-type : این انتخابگر تگ p را که only child  والد خود باشد را انتخاب می کند و style موردنظر را به آن اعمال می کند.
()nth-child : تگ های p که دومین فرزند والد خود باشد را انتخاب کرده و دستور موردنظر را به آن اعمال می کند.

()nth-last-child : هر تگ <p>  که دومین فرزند (only child) والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
()nth-of-type : هر تگ <p>  که دومین تگ <p> از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
()nth-last-of-type : هر تگ <p>  که دومین تگ <p> از والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
last-child :  برای هر تگ <p>  که آخرین فرزند (child) از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
root : تمامی تگ های html را انتخاب می کند و style مورد نظر را به آن اعمال می کند.

empty :  هر تگ <p>  که محتوایی نداشته باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
enabled : تمام تگ های <input>  که  "type="text باشند و فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

disabled : تمام تگ های <input>  که  "type="text باشند وغیر فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.
checked : تمام تگ های <input>  که  "type="checked باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند. 
not :  تمامی تگ ها جز  تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.
selection : متن هایی که با دوبار کلیک کردن بر آنها انتخاب میشوند ، style مورد نظر را به آنها اعمال میکند.

در این قسمت از آموزش css می خواهیم ایجاد یک نمودار برای محتوای پویا را با استفاده از css توضیح دهیم.

توجه داشته باشید که کدهای پایین را در قسمت head از صفحه html خود وارد کنید.(یا اینکه این کدها رو به فایل css خود وارد کنید.) برای ایجاد این نوع نموادرها می توانید از دستورات زیر استفاده کنید:

<style>
  
.container{
 width:300px;
 font-family: Arial;
 }
  
.record{
 float: left;
 width: 100%;
 border: 1px solid #ccc;
 background-color: #f0f0f0;
 margin-bottom: 2px;
 -moz-border-radius: 0px 10px 10px 0px;
 -moz-border-radius: 0px 10px 10px 0px;
 }
  
.bar {
 background: transparent url(gradient.png) repeat-x top left;
 float: left;
 clear: left;
 height: 30px;
 }
  
.bar span{
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 float: left;
 margin-left: 5px;
 margin-top: 7px;
 }
  
.p{
 padding-top: 3px;
 float: right;
 color: #6D8591;
 clear: right;
 font-size: 12px;
 font-weight: bold;
 height: 25px;
 }
  
.p span{
 font-size: 12px;
 font-weight: bold;
 float: left;
 margin-right: 5px;
 margin-top: 5px;
 }
  
</style><br><br>

توجه داشته باشید که در ابتدا ما یک container ایجاد میکنیم که نمودار و تمام رکوردهای ما را نگه خواهد داشت.عرض اون میتواند با توجه به نیاز شما تغییر کند.در اینجا ما عرض رکوردها رو به درصد تعیین کرده ایم.شما میتونید از این نمودار زیبا در محتوای پویا استفاده کنید.(در پیشرفت پروژه, میزان فعالیت ها در سایت,..., هر آنچه که در یک سایت نیاز به نمودار دارد.)

کدهای html که توضیح داده شد و باید در فایل html ما قرار گیرند:

<div class="container">
 <div class="record"><div class="bar" style="width:55%;"><span>Mozilla</span></div><div class="p"><span>55%</span></div></div>
 <div class="record"><div class="bar" style="width:30%;"><span>IE</span></div><div class="p"><span>30%</span></div></div>
 <div class="record"><div class="bar" style="width:22%;"><span>Safari</span></div><div class="p"><span>22%</span></div></div>
 <div class="record"><div class="bar" style="width:20%;"><span>Opera</span></div><div class="p"><span>20%</span></div></div>
</div>

 دراین قسمت از آموزش css می خواهیم روش هایی را توضیح دهیم که به وسیله ی آن بتوانید از اشکالی که می خواهید استفاده کنید .
با یادگیری این موارد می توانید در طراحی سایت خوب یکی از بهترین ها باشید ی زرا ایجاد شکل در طراحی بسیار مهم و برای کاربر جالب می باشد . در ابتدا از اشکال ساده ای مثل مربع و مستطیل استفاده می کنیم . دستور زیر شکل کلی رسم مربع یا مستطیل را نمایش می دهد.دقت شود که هر نامی را میتوان در بخش id در نظر گرفت اما برای مفهومی تر بودن بهتر است اسمهای با معنی را در نظر بگیرید.توجه داشته باشید که عرض را با width و طول را با height نمایش می دهیم و رنگ لازم را مشخص می کنیم .

#square {
width: 100px;
height: 100px;
background: #555;
}

همچنین برای رسم دایره از border-radius برای تبدیل گوشه های تیز مربع یا مستطیل به صورت گرد استفاده می کنیم و دستور کلی آن به این شکل می باشد .

#circle {
width: 100px;
height: 100px;
background: #555;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}

دقت شود که در کدهای قالب از کد <div id="square"></div> استفاده شود . و در بقیه موارد نیز همچنین.
( -moz-برای نمایش صحیح کد در فایرفاکس، -webkit- برای نمایش صحیح در کروم،  -o- نمایش صحیح در اپرا )

از آنجاییکه رسم بیضی مانند زسم دایره می باشد و فقط طول و عرض آن را تغییر می دهیم .مانند دستور زیر:

#oval {
width: 200px;
height: 100px;
background: #555;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

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

#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #666;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
} #heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

همچنین در پایان نمایش کادرهای گفتگو در سایت می توان از دستور زیر استفاده کرد :

#talkbubble {
width: 120px;
height: 80px;
background: #666;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #666;
border-bottom: 13px solid transparent;
}

همچنین می توان برای رسم مثلث می توان از دستور زیر استفاده کرد :

.triangle{
width:0;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}

خاصیت clear

در این قسمت از آموزش css  ، خاصیت Clear  و خاصیت Float را توضیح می دهیم.

با استفاده ازخاصیت clear می توان کناره هایی از عنصر را که می خواهیم متن یا عکس در آن سمت قرار نگیرد را مشخص می کنیم،در واقع از این خاصیت برای خالی کردن فضای اطراف یک عنصر استفاده می شود.که حالت های مختلفی دارد که تعدادی از انها توضیح می دهیم.
none:در دو طرف عنصر مجاز است که عکس یا متن قرار بگیرد که حالت پیش فرض می باشد.

right:در سمت راست هیچ عکس و تنی نمی تواند قرار گیرد.

left:در سمت چت هیچ عکس و متنی نمی تواند قرار گیرد.

both:دو طرف عنصر هیچ عکس و متنی نمی تواند قرار گیرد.

مثال زیر خاصیت Clear را در بخش آموزش css نشان می دهد.

img
{
float:left;
}
p.clear
{
clear:both;
}

ویژگی float

با استفاده از خاصیت float می توان موقعیت یک عنصر را به سمت چپ یا راست تنظیم کرد.خاصیت float از مهمترین ویژگی ها در Css و همچنین طراحی سایت می باشد.این خاصیت وقتی عمل می کند که به عنصر مورد نظر خاصیت موردنظر خود را بدهید.

مثال زیر کاربرد خاصیت Float را نشان می دهد.

.text 
{float:left;
width:110px;
height:90px;
margin:5px;}