Upload
web-standards-school
View
387
Download
0
Embed Size (px)
Citation preview
مسعود صدریCSSهای Pseudoمعرفی
“In learning you will teach, and in teaching you will learn.”
Phil Collins
تعاریف و مفاهیم اولیه
بررسی ساختار کالس ها
بررسی ساختار المنت ها
نتیجه گیری
تعاریف و مفاهیم اولیه
بررسی ساختار کالس ها
بررسی ساختار المنت ها
نتیجه گیری
تعاریف و مفاهیم اولیه
Dictionary.com در ”pseudo“معنی لغت
adjective
1. Not actually but having the appearance of; pretended; false or spurious; sham.
2. Almost, approaching, or trying to be.
تعاریف و مفاهیم اولیه
CSS در زبان نشانه گذاری ”pseudo“مفهوم
به منظور تعریف یک حالت ویژه برای المنتی خاص استفاده می شوند.Pseudoکالس های
:link, :visited, :hover, :active, :first-child, :nth-child
تعاریف و مفاهیم اولیه
همیشه با ):( یا )::( شروع می شوند و بعد از آن نام کالس قرار می گیرد.Pseudo کالس های
:nth-child
تعاریف و مفاهیم اولیه
رفتار می کنند.HTML، آیتم های مجازی هستند که مانند المنت های معمول Pseudoالمنت های
آنها در ساختار درختی سند ما وجود ندارند.
ساخته می شوند.CSSبه این معنی که ما آنها را تایپ نمی کنیم، بلکه توسط
CSS در زبان نشانه گذاری ”pseudo“مفهوم
:after, :before, :first-letter
تعاریف و مفاهیم اولیه
بررسی ساختار کالس ها
بررسی ساختار المنت ها
نتیجه گیری
بررسی ساختار کالس ها
بعد از ثبت درخواست کاربر انجام می شوند.
Dynamicکالس های
:link, :visited, :hover, :active, :focus
بررسی ساختار کالس ها
a:link { color: #ccc;}
a:visited { color: #ccc;}
a:hover { color: #ccc;}
بررسی ساختار کالس ها
a:active { color: #ccc;}
a:focus { color: #ccc;}
بررسی ساختار کالس ها
اضافه می کنند.HTMLاطالعات جدیدی را به سند
Structuralکالس های
:first-child, :first-of-type, :last-child, :last-of-type, :nth-child
بررسی ساختار کالس ها
:FIRST-CHILD
li:first-child { color: red;}
<ul> <li>This text will be red.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li></ul>
CSS HTML
بررسی ساختار کالس ها
:FIRST-OF-TYPE
ul:first-of-type { color: red;}
<ul> <li>This text will be red.</li> <li>Lorem ipsum dolor sit amet. <span>
This text will be red. </span> </li> <li>Lorem ipsum dolor sit amet.</li></ul>
CSS HTML
بررسی ساختار کالس ها
:LAST-OF-TYPE
ul:last-of-type { color: red;}
<ul> <li>Lorem ipsum dolor sit amet.
<span>Lorem ipsum dolor sit</span><span>This text will be red</span>
</li> <li>Lorem ipsum dolor sit amet.</li> <li>This text will be red.</li></ul>
CSS HTML
بررسی ساختار کالس ها
استفاده می شود.HTML برای استایل دهی به یک یا چند المنت در سند nth-childکالس
است.Pseudoاین کالس، پرکاربردترین کwالس
NTH-CHILD:کالس
بررسی ساختار کالس ها
، مقادیری را به عنوان آرگومان در نظر می گیرند.nth کالس های Pseudoتمام
این مقادیر به دو صورت قابل پیاده سازی هستند:
an+bفرمول: •even یا oddکلمات کلیدی: •
NTH-CHILD:کالس
بررسی ساختار کالس ها
a:.یک مقدار عددی )صحیح( است
n: .یک مقدار حرفی است. مانند متغیرها در فرمول های ریاضی
به عنوان عملگر در نظر گرفته می شود که می تواند - نیز باشید. :+
b: .یک مقدار دیگر عددی )صحیح( است ولی فقط زمانی نیاز است که از عملگرها استفاده شده باشد
:an+bفرمول
بررسی ساختار کالس ها
:nth-child(even)
:nth-child(odd)
:nth-child(2n+b)
کلمات کلیدیفرمول
بررسی ساختار کالس ها
<ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li></ol>
ol:nth-child (2) { color: red;}
HTML CSS
“Beta” will be red.
:NTH-CHILD
بررسی ساختار کالس ها
<ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li></ol>
ol:nth-child (2n) { color: red;}
HTML CSS
“Beta”, “Delta”, “Zeta”, “Theta”, “kappa” will be red.
:NTH-CHILD
بررسی ساختار کالس ها
<ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li></ol>
ol:nth-child (even) { color: red;}
HTML CSS
“Beta”, “Delta”, “Zeta”, “Theta”, “Kappa” will be red.
:NTH-CHILD
بررسی ساختار کالس ها
<ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li></ol>
ol:nth-child (2n+6) { color: red;}
HTML CSS
“Zeta”, “Theta”, “kappa” will be red.
:NTH-CHILD
بررسی ساختار کالس ها
nth-childمعرفی یک سرویس آنالین، برای محاسبه مقادیر
nth-calculator.com
تعاریف و مفاهیم اولیه
بررسی ساختار کالس ها
بررسی ساختار المنت ها
نتیجه گیری
بررسی ساختار المنت ها
:before, :after, ::selection, ::placeholder
، آیتم های مجازی هستند که مانند المنت های معمول Pseudoهمان طور که در ابتدا گفته شد، المنت های HTML.رفتار می کنند
آنها در ساختار درختی سند ما وجود ندارند.
بررسی ساختار المنت ها
<h1>Ricardo</h1>
h1:before { content: “Hello ”;}
HTML
CSS Hello Ricardo
:BEFORE
بررسی ساختار المنت ها
<h1>Ricardo</h1>
h1:after { content: “, Web Designer.”;}
HTML
CSS Ricardo, Web Designer.
:AFTER
بررسی ساختار المنت ها
::selection { color: #FFF; background: #CCC;}
::-moz-selection { color: #FFF; background: #CCC}
::SELECTION
استفاده می شود.HTML به منظور استایل دهی به قسمت انتخاب شده در سند selection::المنت
بررسی ساختار المنت ها
::PLACEHOLDER
در نظر گwرفته می شود.HTML برای متن پیشفرض در فرم های placeholder::المنت
هم نوشته می شود.input-placeholder::این المنت به صورت
بررسی ساختار المنت ها
::PLACEHOLDER
input::-moz-placeholder { color:#666;}
input::-webkit-input-placeholder { color:#666;}
<input type="email" placeholder="[email protected]">
CSS HTML
تعاریف و مفاهیم اولیه
بررسی ساختار کالس ها
بررسی ساختار المنت ها
نتیجه گیری
نتیجه گیری
در عین سادگی، بسیار کاربردی هستند.Pseudoالمنت ها و کالس های
، باعث بهینه سازی کwدها می شوند.HTML، به دلیل کمتر شدن کالس ها در سند CSSاستفاده از این امکان زبان
و بهینه بودن کدها سبب توسعه ساده تر و افزایش سرعت بارگذاری خواهد بود.
ممنون از همراهی شما