۱۱-۱۰-۱۳۹۰, ۰۹:۳۷ صبح
می شه عنوان کرد که طراحی وب بدون سی اس اس تقریبن ممکن نیست.(البته طراحی سایتی که آدمی زاد ببینه تش) بنابراین یادگیری سی اس اس از ملزومات طراحی وب محسوب می شه.یعنی حتی شما اگر یک دولوپر حرفه ای هم باشید باید آشنایی مختصری داشته باشید و در بعضی مواقع در این زمینه حرفه ای باشید. این آموزش رو تو سایت tutsplus دیدم و تصمیم گرفتیم به صورت فارسی و قابل فهم اینجا هم ارائه اش کنیم تا کسانی که نیاز دارن استفاده کنن.
برای یادگیری بهتر این آموزش باید با چن تا از مفاهیم css آشنا باشید. به صورت خلاصه:
(.)
از علامت نقطه برای تعریف کلاس(class) استفاده می شه. از کلاس برای تعیین تگ هایی به خصوصیت های مشابه استفاده می شه. برای نمونه همه ی تگ های ما که دارای خصوصیت border با ضخامت ۱ و رنگ سیاه هستن یه کلاس رو تشکیل می دن.
(#)
از علامت شارپ برای تعریف آی دی(ID). فرق ID با کلاس اینه که ID یونیک هستش و فقط متعلق به یه تگ هستش. برای مثال ما فقط یه فرم برای لاگین کردن داریم. بنابراین می تونیم براش یه ID تعریف کنیم.
(X)
برای این بخش یه مثال می زنم:
در این بخش ما تعیین می کنیم که تمامی تگ های a رنگشون سبز باشه.
و نکته ی آخر اینکه در CSS هم قانون وراثت برقراره. یعنی شما می تونید با استفاده از قانون والد و فرزندی به تگ ها تون دسترسی داشته باشید. برای نمونه:
این کد یعنی در داخل آی دی main# تمامی تگ های a به رنگ قرمز باشن.
خوب شروع می کنیم:
۱- *
به این مثال توجه کنید:
* {
margin: 0;
padding: 0;
}
انتخابگر ستاره * تمامی تگ های توی صفحه رو انتخاب می کنه. در کد بالا تعیین کردیم که خاصیت padding و margin برای تمامی تگ ها برابر با ۰px باشه. برای اینکه محسوس تر باشه براتون می تونید این خط رو هم به کد بالا اضافه کنید:
* {
border: 1px solid #006699;
}
نکته ای رو که لازمه عنوان کنم اینه که می تونید از این انتخابگر به صورت ترکیبی و وراثتی هم استفاده کنید. به این صورت:
#main * {
border: 1px solid black;
}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۲- #X
علامت شارپ همونطور که بالا توضیح دادم برای تعیین ID به کار می ره و یکتاست. شما نباید از این انتخابگر برای دوتا تگ استفاده کنید. روش کار با آی دی رو هم که بالا مثال زدیم. اینم یه مثال دیگه برا گل روی شما:
#container {
width: 960px;
margin: auto;
}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۳- .X
برای تعیین کلاس از علامت (.) استفاده می کنیم. فرق کلاس با آی دی اینه که کلاس رو میتونید برای چند تا تگ مختلف استفاده کنید.(بالا توضیح دادم خدمتتون :) )
.error {
color: red;
}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۴- X
این انتخابگر برای انتخاب مستقیم تگ ها مورد استفاده قرار می گیره. برای نمونه در جمله ی زیر شما تمامی تگ های a را انتخاب می کند:
a {color: red;}
li{direction: rtl;}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۵- X Y
شما در این نوع انتخاب درواقع دارید از وراثت استفاده می کنید. معنای این انتخابگر می شه این: تمامی تگ های y ی که داخل تگ x هستند.
li a {
color: red;
}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۶- X:visited و X:link
این نوع انتخابگر ها برای تگ های a (لینک ها) به کار می ره.
:link یه شبه کلاس برای لینک هایی که یک بار روش کلیک شده
:visited شبه کلاسی برای نشان دادن لینک هایی که روش کلیک شده یا صفحه ی مورد نظر لینک باز شده
a:link {color: red;}
a:visited{color: blue;}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۷- X + Y
انتخاب اولین تگ Y پس از تگ X
div + p{
border: 1px solid red;
}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۸- X > Y
این انتخابگر با انتخابگر شماره ی ۵ تفاوت چندانی نداره. ولی این انتخابگر بهتر از انتخابگر قبلی هستش و پرفورمنس بهتری داره و توصبه می شه از این انتخابگر استفاده کنید. برای نمونه به کد زیر دقت کنید:
<div id="main">
<ul>
<li> لیست یک
<ul>
<li> لیست یک-یک </li>
</ul>
</li>
<li> لیست دو </li>
<li> لیست سه </li>
<li> لیست چهار </li>
</ul>
</div>
div#container > ul {
border: 1px solid red;
}
با این انتخابگر ما تعیین کردیم که تمامی تگ های ul ی که داخل تگ div با آی دی main دارای کادر قرمز با ضخامت یک پیکسل باشند.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۹- X ~ Y
این انتخابگر تمامی تگ های Y ی رو که پس از تگ X میان انتخاب می کنه
div ~ p {
border: 1px solid red;
}
با این انتخابگر ما تعیین کردیم که تمامی تگ های ul ی که داخل تگ div با آی دی main دارای کادر قرمز با ضخامت یک پیکسل باشند.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۰- X[title]
این انتخابگر تمامی تگ های a رو که خاصیت title دارن مورد عنایت قرار می دن :D
a[title]{
color:green;
}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۱- X[href="test"]
با استفاده از این انتخابگر می تونید تمامی تگ های a رو که به لینک test اشاره می کنند انتخاب می کنه.برای نمونه:
a[href='http://test.com/']{
color:green;
}
با این کد تمامی لینک هایی که به نشانی دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
اشاره می کنند به رنگ سبز نشان داده خواهند شد.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۲- X[href*="test"]
با استفاده از این انتخابگر می تونید تمامی تگ های a رو که دارای واژه ی test هستن انتخاب کنید. یعنی تمامی لینک های mytest.com و test1.com و testing.com انتخاب می شن. شما می تونید از علامت های ^ برای ابتدا و & برای انتهای لینک ها استفاده کنید.
این کار با استفاده از عبارات باقاعده(regular expressions) انجام می شه. برای نمونه:
a[href^='test']{
color:green;
}
این کد لینک هایی رو که ابتدای اونها با واژه ی test شروع می شن رو انتخاب می کنه.
a[href&='test']{
color:green;
}
این کد لینک هایی رو که انتهای اونها با واژه ی test تمام میشه رو انتخاب می کنه.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۳- X[href^="http"]
انتخاب تمامی لینک هایی که با پروتکل http کار می کنن. یعنی لینک هایی که با سایر پروتکل ها کار می کنن انتخاب نمی شن. مثل https
a[href^='http']{
color:green;
}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
[/code]
۱۴- X[href$=".jpg"]
لینک هایی که به تصاویر لینک شدن. تصاویری که پسوند .jpg دارن.
البته دقت کنید که نوع فایل ها باید در تگ های a تعیین شده باشن. برای نمونه:
<a href="path/to/image.jpg" data-filetype="image"> test </a>
a[href$='.jpg']{
color:green;
}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۵- X[data-*="test"]
چطوری می شه لینک هایی رو که به تصاویری رو که از نوع jpg یا jpeg یا gif هستند انتخاب کنیم؟ یا لینک هایی که به فایل هایی از نوع doc یا pdf هستند؟
به این صورت عمل کنید:
a[data-filetype="image"] {
color: red;
}
این کد می تونه لینک هایی رو که به تصاویر اشاره می کنن انتخاب کنه.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
[/code]
۱۶- X[test~="my"]
شاید خیلی از شماها از این تکنیک مطلع نباشید. در واقع ما یه خصوصیتی برای لینک هامون تعریف می کنیم و بر اساس اون خصوصیت می تونیم به لینک ها اشاره کنیم.
این کد رو ببینید:
<a href="path/to/image.jpg" data-info="external image"> Click Me </a>
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
در ضمن شما می تونید از کاراکتر اسپیس " " برای جدا کردن خصوصیت ها استفاده کنید و چند خصوصیت رو به یه لینک بدین.
جالب نبود؟ :D
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۷- X:checked
با استفاده از این انتخابگر می تونید تگ هایی رو که حالت انتخابی دارن هدف بگیرید. برای نمونه:
input[type=radio]:checked {
border: 1px solid black;
}
با این کد ورودی هایی رو که از نوع radio هستن و تیک خوردن انتخاب می کنید. برای چک باکس ها هم می تونید از این خصوصیت استفاده کنید.
سازگاری با مرورگرهای:
IE9+
Firefox
Chrome
Safari
Opera
۱۸- X:after
شما می تونید برای انتهای تگ هاتون از این شبه کلاس استفاده کنید. :after و :before دو شبه کلاس هستن که می تونید از اونها استفاده کنید.
برای نمونه:
span:after {
content:'---';
}
<span>this is a test!</span>
enjoy it.
خروجی ما به این صورت خواهد بود:
this is a test!--- enjoy it.
این نکته قابل تذکره که در CSS3 در استفاده از این شبه کلاس باید از :: به جای : استفاده کنید.
سازگاری با مرورگرهای:
IE8+
Firefox
Chrome
Safari
Opera
۱۹- X:hover
با این یکی که حتمن کار کردید. از این شبه کلاس می تونید برای زمانی استفاده کنید که کاربر با موس رفته روی اون تگ.
برای نمونه:
div:hover {
background: #e3e3e3;
}
این نکته رو توجه کنید که در نسخه های قدیمی IE فقط برای تگ a می تونید از این شبه کلاس استفاده کنید. اما در مرورگر های دیگه برای تمامی تگ ها می تونید از این شبه کلاس استفاده کنید.
سازگاری با مرورگرهای:
IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera
۲۰- X:not(test)
تگ های X که دارای انتخابگر test نیستن. برای نمونه:
برای نمونه:
div:not(#test) {
background: #e3e3e3;
}
این کد تمامی تگ های div رو انتخاب می کنه به جز تگ div ی که دارای آی دی test باشه.
می شه به روش های دیگه ای هم از این انتخابگر استفاده کرد:
*:not(div) {
background: #e3e3e3;
}
این کد یعنی تمامی تگ ها انتخاب بشن به جز تگ های div.
سازگاری با مرورگرهای:
IE9+
Firefox
Chrome
Safari
Opera
۲۱- X::test
به جای واژه ی تست می تونید از شبه عناصر استفاده کنید.
برای اشاره به شبه عناصر باید از علامت :: استفاده کنید.
شبه عناصر چی هستن؟ مثلن برای خط اول هر پاراگراف (p) می تونید از این کد استفاده کنید:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
یا حرف اول هر تگی:
p::first-letter{
font-weight: bold;
font-size: 1.2em;
}
نکته: ما در زبان پارسی خیلی نمی تونیم از اینها استفاده کنیم (ضایع ست) :P
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۲۲- X:nth-child(n)
در بالا عرض کردیم که می تونید از خاصیت والد و فرزندی تگ ها استفاده کنید(وراثت). با استفاده از این شبه کلاس می تونید به شماره ی فرزند(!) اشاره کنید.
مثلن چهارمین فرزند که داخل تگ div هستش:
div:nth-child(4){
border: 1px solid;
}
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
۲۳- X:nth-last-child(n)
این شبه کلاس هم مثل مثال بالا کار می کنه. ولی برعکسش. یعنی از آخر به اول. برای نمونه
مثلن چهارمین فرزند که داخل تگ div هستش:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
li:nth-last-child(2){
color: red;
}
با استفاده از کد بالا داخل لیست، شماره ی ۵ به رنگ قرمز خواهد بود.
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
Opera
۲۴- X:nth-of-type(n)
این انتخابگر nمین تگ از نوع X رو انتخاب می کنه.
ul:nth-of-type(3) {
border: 1px solid black;
}
با استفاده از کد بالا داخل لیست، شماره ی ۵ به رنگ قرمز خواهد بود.
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
۲۵- X:nth-last-of-type(n)
این انتخابگر nمین تگ از نوع X رو انتخاب می کنه. منتها از آخر!
ul:nth-last-of-type(2) {
border: 1px solid black;
}
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
۲۶- X:first-child
اولین فرزند تگ X رو انتخاب می کنه:
ul li:first-child {
border-top: 1px solid;
}
سازگاری با مرورگرهای:
IE7+
Firefox 3.5+
Chrome
Safari
Opera
۲۷- X:last-child
اولین فرزند تگ X رو انتخاب می کنه:
ul li:last-child {
border-bottom: 1px solid;
}
سازگاری با مرورگرهای:
IE7+
Firefox 3.5+
Chrome
Safari
Opera
در مورد بخش ۲۶ و ۲۷ یه مثال می زنیم. ما یه لیست(ul) داریم به این صورت:
HTML:
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
CSS:
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
لیست ما به این شکل خواهد بود:
*****************************
حالا ما این کد ها رو به کدهای CSS خودمون اضافی می کنیم:
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
لیست ما به این شکل خواهد شد:
****************************
IE9+
Firefox 3.5+
Chrome
Safari
Opera
۲۸- X:only-child
به مثال توجه کنید:
div p:only-child {
border-top: 1px solid;
}
بین تگ های div اونی رو که فقط یک فرزند داره انتخاب می کنه و خصوصیات مورد نظر رو به تگ P اعمال می کنه.
دقت کنید:
اگر دوتا فرزند داشته باشه انتخاب نمی شه. و اگر فرزند، تگ P نباشه باز هم انتخاب نمی شه.
مثل این مثال:
<div>
<p> My paragraph here. </p>
</div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
Opera
۲۹- X:only-of-type
به مثال توجه کنید:
HTML:
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
<ul>
<li> List Item </li>
</ul>
</div>
CSS:
div p:only-of-type {
color: red;
}
li:only-of-type {
font-weight: bold;
}
بخش اول: هر والدی div که یک فرزند از نوع p داشته باشه، رنگش رو قرمز می کنه.
بخش دوم: هر والدی از هر نوعی که تنها یک فرزند از نوع li داشته باشه.
امیدوارم که با انجام مثال کاملن متوجه شده باشید (چون من درست متوجه نشدم :P )
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
Opera
۳۰- X:first-of-type
به مثال توجه کنید:
HTML:
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
CSS:
ul:first-of-type {
font-weight: bold;
}
اولین تگ از نوع X رو انتخاب می کنه.
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
Opera
امیدوارم به دردتون خورده باشه
موفق باشید
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
برای یادگیری بهتر این آموزش باید با چن تا از مفاهیم css آشنا باشید. به صورت خلاصه:
(.)
از علامت نقطه برای تعریف کلاس(class) استفاده می شه. از کلاس برای تعیین تگ هایی به خصوصیت های مشابه استفاده می شه. برای نمونه همه ی تگ های ما که دارای خصوصیت border با ضخامت ۱ و رنگ سیاه هستن یه کلاس رو تشکیل می دن.
(#)
از علامت شارپ برای تعریف آی دی(ID). فرق ID با کلاس اینه که ID یونیک هستش و فقط متعلق به یه تگ هستش. برای مثال ما فقط یه فرم برای لاگین کردن داریم. بنابراین می تونیم براش یه ID تعریف کنیم.
(X)
برای این بخش یه مثال می زنم:
کد:
a{
color: green;
}در این بخش ما تعیین می کنیم که تمامی تگ های a رنگشون سبز باشه.
و نکته ی آخر اینکه در CSS هم قانون وراثت برقراره. یعنی شما می تونید با استفاده از قانون والد و فرزندی به تگ ها تون دسترسی داشته باشید. برای نمونه:
کد:
#main a {
color: red;
}این کد یعنی در داخل آی دی main# تمامی تگ های a به رنگ قرمز باشن.
خوب شروع می کنیم:
۱- *
به این مثال توجه کنید:
* {
margin: 0;
padding: 0;
}
انتخابگر ستاره * تمامی تگ های توی صفحه رو انتخاب می کنه. در کد بالا تعیین کردیم که خاصیت padding و margin برای تمامی تگ ها برابر با ۰px باشه. برای اینکه محسوس تر باشه براتون می تونید این خط رو هم به کد بالا اضافه کنید:
* {
border: 1px solid #006699;
}
نکته ای رو که لازمه عنوان کنم اینه که می تونید از این انتخابگر به صورت ترکیبی و وراثتی هم استفاده کنید. به این صورت:
#main * {
border: 1px solid black;
}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۲- #X
علامت شارپ همونطور که بالا توضیح دادم برای تعیین ID به کار می ره و یکتاست. شما نباید از این انتخابگر برای دوتا تگ استفاده کنید. روش کار با آی دی رو هم که بالا مثال زدیم. اینم یه مثال دیگه برا گل روی شما:
#container {
width: 960px;
margin: auto;
}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۳- .X
برای تعیین کلاس از علامت (.) استفاده می کنیم. فرق کلاس با آی دی اینه که کلاس رو میتونید برای چند تا تگ مختلف استفاده کنید.(بالا توضیح دادم خدمتتون :) )
.error {
color: red;
}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۴- X
این انتخابگر برای انتخاب مستقیم تگ ها مورد استفاده قرار می گیره. برای نمونه در جمله ی زیر شما تمامی تگ های a را انتخاب می کند:
a {color: red;}
li{direction: rtl;}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۵- X Y
شما در این نوع انتخاب درواقع دارید از وراثت استفاده می کنید. معنای این انتخابگر می شه این: تمامی تگ های y ی که داخل تگ x هستند.
li a {
color: red;
}
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۶- X:visited و X:link
این نوع انتخابگر ها برای تگ های a (لینک ها) به کار می ره.
:link یه شبه کلاس برای لینک هایی که یک بار روش کلیک شده
:visited شبه کلاسی برای نشان دادن لینک هایی که روش کلیک شده یا صفحه ی مورد نظر لینک باز شده
a:link {color: red;}
a:visited{color: blue;}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۷- X + Y
انتخاب اولین تگ Y پس از تگ X
div + p{
border: 1px solid red;
}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۸- X > Y
این انتخابگر با انتخابگر شماره ی ۵ تفاوت چندانی نداره. ولی این انتخابگر بهتر از انتخابگر قبلی هستش و پرفورمنس بهتری داره و توصبه می شه از این انتخابگر استفاده کنید. برای نمونه به کد زیر دقت کنید:
<div id="main">
<ul>
<li> لیست یک
<ul>
<li> لیست یک-یک </li>
</ul>
</li>
<li> لیست دو </li>
<li> لیست سه </li>
<li> لیست چهار </li>
</ul>
</div>
div#container > ul {
border: 1px solid red;
}
با این انتخابگر ما تعیین کردیم که تمامی تگ های ul ی که داخل تگ div با آی دی main دارای کادر قرمز با ضخامت یک پیکسل باشند.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۹- X ~ Y
این انتخابگر تمامی تگ های Y ی رو که پس از تگ X میان انتخاب می کنه
div ~ p {
border: 1px solid red;
}
با این انتخابگر ما تعیین کردیم که تمامی تگ های ul ی که داخل تگ div با آی دی main دارای کادر قرمز با ضخامت یک پیکسل باشند.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۰- X[title]
این انتخابگر تمامی تگ های a رو که خاصیت title دارن مورد عنایت قرار می دن :D
a[title]{
color:green;
}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۱- X[href="test"]
با استفاده از این انتخابگر می تونید تمامی تگ های a رو که به لینک test اشاره می کنند انتخاب می کنه.برای نمونه:
a[href='http://test.com/']{
color:green;
}
با این کد تمامی لینک هایی که به نشانی دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
اشاره می کنند به رنگ سبز نشان داده خواهند شد.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۲- X[href*="test"]
با استفاده از این انتخابگر می تونید تمامی تگ های a رو که دارای واژه ی test هستن انتخاب کنید. یعنی تمامی لینک های mytest.com و test1.com و testing.com انتخاب می شن. شما می تونید از علامت های ^ برای ابتدا و & برای انتهای لینک ها استفاده کنید.
این کار با استفاده از عبارات باقاعده(regular expressions) انجام می شه. برای نمونه:
a[href^='test']{
color:green;
}
این کد لینک هایی رو که ابتدای اونها با واژه ی test شروع می شن رو انتخاب می کنه.
a[href&='test']{
color:green;
}
این کد لینک هایی رو که انتهای اونها با واژه ی test تمام میشه رو انتخاب می کنه.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۳- X[href^="http"]
انتخاب تمامی لینک هایی که با پروتکل http کار می کنن. یعنی لینک هایی که با سایر پروتکل ها کار می کنن انتخاب نمی شن. مثل https
a[href^='http']{
color:green;
}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
[/code]
۱۴- X[href$=".jpg"]
لینک هایی که به تصاویر لینک شدن. تصاویری که پسوند .jpg دارن.
البته دقت کنید که نوع فایل ها باید در تگ های a تعیین شده باشن. برای نمونه:
<a href="path/to/image.jpg" data-filetype="image"> test </a>
a[href$='.jpg']{
color:green;
}
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۵- X[data-*="test"]
چطوری می شه لینک هایی رو که به تصاویری رو که از نوع jpg یا jpeg یا gif هستند انتخاب کنیم؟ یا لینک هایی که به فایل هایی از نوع doc یا pdf هستند؟
به این صورت عمل کنید:
a[data-filetype="image"] {
color: red;
}
این کد می تونه لینک هایی رو که به تصاویر اشاره می کنن انتخاب کنه.
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
[/code]
۱۶- X[test~="my"]
شاید خیلی از شماها از این تکنیک مطلع نباشید. در واقع ما یه خصوصیتی برای لینک هامون تعریف می کنیم و بر اساس اون خصوصیت می تونیم به لینک ها اشاره کنیم.
این کد رو ببینید:
<a href="path/to/image.jpg" data-info="external image"> Click Me </a>
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
در ضمن شما می تونید از کاراکتر اسپیس " " برای جدا کردن خصوصیت ها استفاده کنید و چند خصوصیت رو به یه لینک بدین.
جالب نبود؟ :D
سازگاری با مرورگرهای:
IE7+
Firefox
Chrome
Safari
Opera
۱۷- X:checked
با استفاده از این انتخابگر می تونید تگ هایی رو که حالت انتخابی دارن هدف بگیرید. برای نمونه:
input[type=radio]:checked {
border: 1px solid black;
}
با این کد ورودی هایی رو که از نوع radio هستن و تیک خوردن انتخاب می کنید. برای چک باکس ها هم می تونید از این خصوصیت استفاده کنید.
سازگاری با مرورگرهای:
IE9+
Firefox
Chrome
Safari
Opera
۱۸- X:after
شما می تونید برای انتهای تگ هاتون از این شبه کلاس استفاده کنید. :after و :before دو شبه کلاس هستن که می تونید از اونها استفاده کنید.
برای نمونه:
span:after {
content:'---';
}
<span>this is a test!</span>
enjoy it.
خروجی ما به این صورت خواهد بود:
this is a test!--- enjoy it.
این نکته قابل تذکره که در CSS3 در استفاده از این شبه کلاس باید از :: به جای : استفاده کنید.
سازگاری با مرورگرهای:
IE8+
Firefox
Chrome
Safari
Opera
۱۹- X:hover
با این یکی که حتمن کار کردید. از این شبه کلاس می تونید برای زمانی استفاده کنید که کاربر با موس رفته روی اون تگ.
برای نمونه:
div:hover {
background: #e3e3e3;
}
این نکته رو توجه کنید که در نسخه های قدیمی IE فقط برای تگ a می تونید از این شبه کلاس استفاده کنید. اما در مرورگر های دیگه برای تمامی تگ ها می تونید از این شبه کلاس استفاده کنید.
سازگاری با مرورگرهای:
IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera
۲۰- X:not(test)
تگ های X که دارای انتخابگر test نیستن. برای نمونه:
برای نمونه:
div:not(#test) {
background: #e3e3e3;
}
این کد تمامی تگ های div رو انتخاب می کنه به جز تگ div ی که دارای آی دی test باشه.
می شه به روش های دیگه ای هم از این انتخابگر استفاده کرد:
*:not(div) {
background: #e3e3e3;
}
این کد یعنی تمامی تگ ها انتخاب بشن به جز تگ های div.
سازگاری با مرورگرهای:
IE9+
Firefox
Chrome
Safari
Opera
۲۱- X::test
به جای واژه ی تست می تونید از شبه عناصر استفاده کنید.
برای اشاره به شبه عناصر باید از علامت :: استفاده کنید.
شبه عناصر چی هستن؟ مثلن برای خط اول هر پاراگراف (p) می تونید از این کد استفاده کنید:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
یا حرف اول هر تگی:
p::first-letter{
font-weight: bold;
font-size: 1.2em;
}
نکته: ما در زبان پارسی خیلی نمی تونیم از اینها استفاده کنیم (ضایع ست) :P
سازگاری با مرورگرهای:
IE6+
Firefox
Chrome
Safari
Opera
۲۲- X:nth-child(n)
در بالا عرض کردیم که می تونید از خاصیت والد و فرزندی تگ ها استفاده کنید(وراثت). با استفاده از این شبه کلاس می تونید به شماره ی فرزند(!) اشاره کنید.
مثلن چهارمین فرزند که داخل تگ div هستش:
div:nth-child(4){
border: 1px solid;
}
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
۲۳- X:nth-last-child(n)
این شبه کلاس هم مثل مثال بالا کار می کنه. ولی برعکسش. یعنی از آخر به اول. برای نمونه
مثلن چهارمین فرزند که داخل تگ div هستش:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
li:nth-last-child(2){
color: red;
}
با استفاده از کد بالا داخل لیست، شماره ی ۵ به رنگ قرمز خواهد بود.
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
Opera
۲۴- X:nth-of-type(n)
این انتخابگر nمین تگ از نوع X رو انتخاب می کنه.
ul:nth-of-type(3) {
border: 1px solid black;
}
با استفاده از کد بالا داخل لیست، شماره ی ۵ به رنگ قرمز خواهد بود.
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
۲۵- X:nth-last-of-type(n)
این انتخابگر nمین تگ از نوع X رو انتخاب می کنه. منتها از آخر!
ul:nth-last-of-type(2) {
border: 1px solid black;
}
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
۲۶- X:first-child
اولین فرزند تگ X رو انتخاب می کنه:
ul li:first-child {
border-top: 1px solid;
}
سازگاری با مرورگرهای:
IE7+
Firefox 3.5+
Chrome
Safari
Opera
۲۷- X:last-child
اولین فرزند تگ X رو انتخاب می کنه:
ul li:last-child {
border-bottom: 1px solid;
}
سازگاری با مرورگرهای:
IE7+
Firefox 3.5+
Chrome
Safari
Opera
در مورد بخش ۲۶ و ۲۷ یه مثال می زنیم. ما یه لیست(ul) داریم به این صورت:
HTML:
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
CSS:
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
لیست ما به این شکل خواهد بود:
*****************************
حالا ما این کد ها رو به کدهای CSS خودمون اضافی می کنیم:
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
لیست ما به این شکل خواهد شد:
****************************
IE9+
Firefox 3.5+
Chrome
Safari
Opera
۲۸- X:only-child
به مثال توجه کنید:
div p:only-child {
border-top: 1px solid;
}
بین تگ های div اونی رو که فقط یک فرزند داره انتخاب می کنه و خصوصیات مورد نظر رو به تگ P اعمال می کنه.
دقت کنید:
اگر دوتا فرزند داشته باشه انتخاب نمی شه. و اگر فرزند، تگ P نباشه باز هم انتخاب نمی شه.
مثل این مثال:
<div>
<p> My paragraph here. </p>
</div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
Opera
۲۹- X:only-of-type
به مثال توجه کنید:
HTML:
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
<ul>
<li> List Item </li>
</ul>
</div>
CSS:
div p:only-of-type {
color: red;
}
li:only-of-type {
font-weight: bold;
}
بخش اول: هر والدی div که یک فرزند از نوع p داشته باشه، رنگش رو قرمز می کنه.
بخش دوم: هر والدی از هر نوعی که تنها یک فرزند از نوع li داشته باشه.
امیدوارم که با انجام مثال کاملن متوجه شده باشید (چون من درست متوجه نشدم :P )
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
Opera
۳۰- X:first-of-type
به مثال توجه کنید:
HTML:
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
CSS:
ul:first-of-type {
font-weight: bold;
}
اولین تگ از نوع X رو انتخاب می کنه.
سازگاری با مرورگرهای:
IE9+
Firefox 3.5+
Chrome
Safari
Opera
امیدوارم به دردتون خورده باشه
موفق باشید
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.