CSS

‫خدا‬ ‫نام‬ ‫به‬
1
‫وب‬ ‫بر‬ ‫مبتنی‬ ‫نویسی‬ ‫برنامه‬
Web Programming
CSS
Cascading Style Sheets

CSS‫چیست؟‬
‫واژه‬CSS‫از‬‫عبارت‬Cascading Style Sheets‫گرفته‬‫شده‬‫است‬‫که‬‫با‬‫استفاده‬‫از‬‫آن‬‫نوع‬،‫متن‬
،‫رنگ‬‫نحوه‬‫چینش‬،‫نوشته‬‫تصاویر‬‫و‬...‫را‬‫کنترل‬‫کرد‬.‫در‬‫واقع‬‫می‬‫توان‬‫گفت‬‫که‬‫با‬html‫می‬‫توان‬
‫محتوای‬‫صفحه‬‫را‬‫ایجاد‬‫کرد‬‫و‬‫با‬CSS‫نحوه‬‫چگونگی‬‫نمایش‬‫این‬‫محتوا‬‫را‬‫تعیین‬‫کرد‬.
2

CSS 3
3
CSS 3‫آخرین‬‫نسخه‬‫از‬‫مستندات‬CSS‫است‬.‫قابلیت‬‫های‬CSS 3‫عبارتند‬‫از‬‫پشتیبانی‬‫از‬
‫گزینشگرهای‬(selectors)‫بیشتر‬،‫سایه‬‫انداختن‬‫زیر‬‫متن‬‫و‬‫عناصر‬،‫گوشه‬‫های‬‫گرد‬،‫تصاوی‬‫ر‬‫پس‬
‫زمینه‬‫متعدد‬،‫انیمیشن‬،‫شفافیت‬‫و‬‫بسیاری‬‫از‬‫قابلیت‬‫های‬‫دیگر‬.

‫با‬CSS‫قادر‬‫بود‬ ‫خواهیم‬...
4
‫ظاهر‬‫صفحات‬‫را‬‫یکجا‬‫تعریف‬‫کنیم‬‫بدون‬‫اینکه‬‫نیاز‬‫به‬‫تکرار‬‫بخش‬‫های‬‫زیادی‬‫از‬‫سایت‬‫باش‬‫ید‬.
‫می‬‫توانیم‬‫به‬‫آسانی‬‫ظاهر‬‫صفحات‬‫را‬‫پس‬‫از‬‫تغییرشان‬‫تغییر‬‫دهیم‬.
‫قادر‬‫به‬‫تعیین‬‫اندازه‬‫های‬‫مختلف‬‫قلم‬‫خواهیم‬‫بود‬‫و‬‫دیگر‬‫به‬‫تعداد‬‫سایزهای‬‫کم‬html‫محدود‬‫نخواهیم‬
‫بود‬.
‫و‬...

One HTML Page - Multiple Styles!
5

CSS Syntax
6
‫یک‬‫قاعده‬CSS(rule set)‫شامل‬‫دو‬‫بخش‬‫انتخاب‬‫گر‬(Selector)‫و‬‫اعالن‬(Declaration)
‫است‬.

‫گر‬ ‫انتخاب‬Selector
7
‫برای‬‫انتخاب‬‫بخشی‬‫که‬‫می‬‫خواهیم‬CSS‫به‬‫آن‬‫اعمال‬‫شود‬‫از‬Selector‫ها‬‫استفاده‬‫می‬‫نمائیم‬.

‫انتخابگرها‬ ‫مختلف‬ ‫انواع‬
8
 Element Selector
 Id Selector
 Class Selector
 Grouping Selectors

‫عنصر‬ ‫نام‬ ‫اساس‬ ‫بر‬ ‫انتخابگر‬Element Selector
9
‫در‬‫این‬‫روش‬‫المان‬‫های‬‫بر‬‫اساس‬‫نام‬‫انتخاب‬‫می‬‫شوند‬‫تا‬‫ویژگی‬‫های‬‫مورد‬‫نظر‬‫بر‬‫آنها‬‫اعمال‬
‫شود‬.

‫شناسه‬ ‫اساس‬ ‫بر‬ ‫انتخابگر‬id Selector
10
‫با‬‫استفاده‬‫از‬‫این‬‫نوع‬‫انتخابگر‬‫می‬‫توان‬‫یک‬‫نوع‬‫قالب‬‫بندی‬‫را‬‫بر‬‫روی‬‫فقط‬‫یکی‬‫از‬‫ع‬‫ناصر‬‫صفحه‬
‫اعمال‬‫کرد‬.‫این‬‫نوع‬‫انتخابگر‬‫ها‬‫با‬‫عالمت‬#(hash character)‫تعریف‬‫می‬‫شوند‬.Id‫حالت‬‫یکتا‬
‫و‬‫منحصر‬‫به‬‫فرد‬‫دارد‬‫و‬‫باید‬‫به‬‫یک‬‫برچسب‬‫خاص‬‫اختصاص‬‫داده‬‫شود‬.

‫شناسه‬ ‫اساس‬ ‫بر‬ ‫انتخابگر‬id Selector
11

‫کالس‬ ‫اساس‬ ‫بر‬ ‫انتخابگر‬Class Selector
12
‫با‬‫استفاده‬‫از‬‫این‬‫نوع‬،‫انتخابگر‬‫یک‬‫کالس‬‫را‬‫تعریف‬‫می‬‫کنیم‬‫و‬‫سپس‬‫در‬‫برچسب‬‫های‬‫م‬‫ورد‬،‫نظر‬
‫مشخصه‬‫کالس‬‫را‬‫با‬‫نام‬‫این‬‫کالسی‬‫که‬‫تعریف‬‫کرده‬‫ایم‬‫مقداردهی‬‫می‬‫کنیم‬.‫از‬‫نام‬‫کالس‬‫می‬‫توان‬
‫برای‬‫چندین‬‫تگ‬‫استفاده‬‫کرد‬.‫در‬‫واقع‬‫تگ‬‫هایی‬‫که‬‫نام‬‫کالس‬‫مشترک‬‫می‬،‫باشند‬‫خصوص‬‫یت‬
‫تعیین‬‫شده‬‫در‬CSS‫برا‬‫آنها‬‫اعمال‬‫می‬‫شود‬.‫جهت‬‫استفاده‬‫از‬‫نام‬‫کالس‬‫در‬CSS‫باید‬‫از‬‫نقطه‬(.)
‫استفاده‬‫کرد‬.

‫کالس‬ ‫اساس‬ ‫بر‬ ‫انتخابگر‬Class Selector
13

‫نکته‬
14
‫چنانچه‬‫بخواهیم‬‫کالس‬‫را‬‫فقط‬‫به‬‫تگ‬‫خاصی‬‫منحصر‬،‫کنیم‬‫باید‬‫قبل‬‫از‬‫نام‬‫کالس‬‫از‬‫س‬‫لکتور‬‫آن‬
‫تگ‬‫نیز‬‫استفاده‬‫کنیم‬.

‫نکته‬
15
‫عناصر‬html‫می‬‫توانند‬‫بیش‬‫از‬‫یک‬‫کالس‬‫داشته‬‫باشند‬.

‫گروهی‬ ‫انتخابگرهای‬Grouping Selectors
17
‫اگر‬‫عناصری‬‫با‬‫استایل‬‫یکسان‬‫به‬‫صورت‬‫زیر‬‫تعریف‬‫شده‬‫باشند‬‫می‬‫توان‬‫برای‬‫کمتر‬‫کردن‬‫کدها‬
‫از‬‫انتخابگرهای‬‫گروهی‬‫استفاده‬‫کرد‬.

‫توضیحات‬Comments
18
‫برای‬‫گذاشتن‬‫توضیحات‬‫در‬CSS‫می‬‫توان‬‫از‬/* comments */‫استفاده‬‫کرد‬.

‫بندی‬ ‫قالب‬ ‫اعمال‬ ‫های‬ ‫روش‬CSS‫به‬HTML
19
‫تعبیه‬‫شده‬(Inline style)
✓‫در‬‫این‬‫روش‬‫کدهای‬CSS‫درون‬‫تگ‬‫با‬‫مشخصه‬style‫تعریف‬‫می‬‫شود‬.
‫داخلی‬(Internal style sheet)
✓‫در‬‫این‬‫روش‬‫کدهای‬CSS‫در‬‫بخش‬‫تگ‬head‫قرار‬‫می‬‫گیرد‬.
‫خارجی‬(External style sheet)
✓‫در‬‫این‬‫روش‬‫کدهای‬CSS‫در‬‫یک‬‫فایل‬‫مجزا‬‫نوشته‬‫می‬‫شود‬‫و‬‫به‬‫صفحه‬html‫مورد‬‫نظر‬‫معرفی‬
‫می‬‫شود‬.

‫شده‬ ‫تعبیه‬ ‫دهی‬ ‫سبک‬Inline Styles
20

‫داخلی‬ ‫دهی‬ ‫سبک‬Internal Style Sheet
21

‫خارجی‬ ‫دهی‬ ‫سبک‬External Style Sheet
22
‫در‬‫این‬‫روش‬‫تنظیمات‬CSS‫درون‬‫یک‬‫فایل‬‫مجزا‬‫نگهداری‬‫می‬‫شود‬‫و‬‫سپس‬‫نشانی‬‫این‬‫فایل‬‫به‬
‫صفحه‬‫ای‬‫که‬‫قرار‬‫است‬‫با‬‫استفاده‬‫از‬‫مشخصه‬‫های‬‫این‬‫فایل‬‫قالب‬‫بندی‬‫شود‬‫معرفی‬‫می‬‫گرد‬‫د‬.‫مزیت‬
‫این‬‫روش‬‫این‬‫است‬‫که‬‫فایل‬‫ایجاد‬‫شده‬‫می‬‫تواند‬‫برای‬‫همه‬‫صفحات‬‫وب‬‫سایت‬‫مورد‬‫استفاده‬‫قر‬‫ار‬
‫گیرد‬‫و‬‫به‬‫این‬‫ترتیب‬‫زمان‬‫طراحی‬‫کاهش‬‫می‬‫یابد‬.‫مزیت‬‫دیگر‬‫این‬،‫روش‬‫افزایش‬‫سرعت‬‫بارگ‬‫ذاری‬
‫صفحات‬‫است‬‫به‬‫طوری‬‫که‬‫فایل‬CSS‫یک‬‫بار‬‫بر‬‫روی‬‫مرورگر‬‫دانلود‬‫می‬‫شود‬‫و‬‫بارها‬‫مورد‬‫استفاده‬
‫قرار‬‫می‬‫گیرد‬.

‫خارجی‬ ‫دهی‬ ‫سبک‬External Style Sheet
23
‫برای‬‫ارجاع‬‫دادن‬‫به‬‫فایل‬CSS‫نوشته‬‫شده‬‫باید‬‫کد‬‫زیر‬‫در‬‫تگ‬head‫نوشته‬‫شود‬.

‫مثال‬
24
‫کد‬CSS

‫ها‬ ‫سبک‬ ‫اولویت‬ ‫ترتیب‬Cascading Order
25
‫اولویت‬‫اول‬:‫سبک‬‫های‬‫تعبیه‬‫شده‬
‫اولویت‬‫دوم‬:‫سبک‬‫های‬‫داخلی‬
‫اولویت‬‫سوم‬:‫سبک‬‫های‬‫خارجی‬
‫اولویت‬‫چهارم‬:‫تنظیمات‬‫مرورگر‬

‫ها‬ ‫سبک‬ ‫اولویت‬ ‫ترتیب‬Cascading Order
26

‫در‬ ‫ها‬ ‫رنگ‬CSS
28
 Color Names
 ColorValues
✓RGBValue
✓HEXValue
✓HSLValue
✓RGBAValue
✓HSLAValue

‫نام‬ ‫اساس‬ ‫بر‬ ‫رنگ‬ ‫انتخاب‬
29
‫می‬‫توان‬‫برای‬‫تعیین‬‫رنگ‬‫از‬‫نام‬‫رنگ‬‫استفاده‬‫کرد‬.HTML‫از‬140‫نام‬‫رنگ‬‫مختلف‬‫پشتیبانی‬
‫می‬‫کند‬.
https://www.w3schools.com/colors/colors_names.asp

‫اساس‬ ‫بر‬ ‫رنگ‬ ‫انتخاب‬‫نام‬Color Names
30

‫متن‬ ‫دور‬ ‫کادر‬ ‫و‬ ‫زمینه‬ ‫پس‬ ‫رنگ‬ ، ‫متن‬ ‫رنگ‬
31
 Background Color
 Text Color
 Border Color

‫مقادیر‬ ‫اساس‬ ‫بر‬ ‫رنگ‬ ‫انتخاب‬Color Values
33
‫رنگ‬‫ها‬‫را‬‫می‬‫توان‬‫بر‬‫اساس‬‫مقادیر‬‫آنها‬‫بر‬‫اساس‬‫یکی‬‫از‬‫مدل‬‫های‬RGB, HEX, HSL, HSLA
‫نیز‬‫می‬‫توان‬‫انتخاب‬‫کرد‬.

‫های‬ ‫نمونه‬RGB
34

HSL Value (hue, saturation, lightness)
35

CSS Backgrounds
37
‫خاصیت‬Backgrounds‫برای‬‫تعریف‬‫پس‬‫زمینه‬‫عناصر‬‫استفاده‬‫می‬‫شود‬.
 background-color
 background-image
 background-repeat
 background-attachment
 background-position

Background Color
38
‫خاصیت‬background-color‫تعیین‬‫کننده‬‫رنگ‬‫پس‬‫زمینه‬‫عنصر‬‫می‬‫باشد‬.

Background Image
40
‫خاصیت‬background-image‫تعیین‬‫کننده‬‫یک‬‫تصویر‬‫به‬‫عنوان‬‫پس‬‫زمینه‬‫عنصر‬‫می‬‫ب‬‫اشد‬.‫به‬
‫صورت‬‫پیش‬‫فرض‬‫تصویر‬‫مورد‬‫نظر‬‫تکرار‬‫می‬‫شود‬‫تا‬‫کل‬‫عنصر‬‫را‬‫پوشش‬‫دهد‬.

‫توجه‬
41
‫هنگامی‬‫که‬‫از‬‫عکس‬‫پس‬‫زمینه‬‫استفاده‬‫می‬،‫کنید‬‫تصویری‬‫را‬‫انتخاب‬‫نمایید‬‫که‬‫باعث‬‫ای‬‫جاد‬
‫مزاحمت‬‫در‬‫خواندن‬‫متن‬‫نشود‬.
Example of a bad combination of text and background image

Background Image - Repeat Horizontally or Vertically
42
‫به‬‫طور‬‫پیش‬‫فرض‬‫خاصیت‬background-image‫تصویر‬‫را‬‫به‬‫هر‬‫دو‬‫صورت‬‫افقی‬‫و‬‫عمودی‬‫تکرار‬
‫می‬‫کند‬.‫بعضی‬‫تصاویر‬‫باید‬‫برای‬‫بهتر‬‫دیده‬‫شدن‬‫تنها‬‫به‬‫یکی‬‫از‬‫دو‬‫صورت‬‫افقی‬‫و‬‫عمود‬‫ی‬‫تکرار‬
‫شوند‬.

‫توجه‬
43
‫تکرار‬‫عمودی‬(vertically)
✓background-repeat: repeat-y;
‫تکرار‬‫افقی‬(Horizontally)
✓background-repeat: repeat-x;
‫عدم‬‫تکرار‬‫تصویر‬
✓background-repeat: no-repeat;

Background Image - no-repeat
44
‫برای‬‫عدم‬‫تکرار‬‫عکس‬‫پس‬‫زمینه‬‫و‬‫تنها‬‫یک‬‫بار‬‫استفاده‬‫آن‬‫ویژگی‬background-repeat‫را‬
‫باید‬‫تعیین‬‫کرد‬.

Background Image - Set position
46
‫در‬‫مثال‬‫قبل‬‫عکس‬‫پس‬‫زمینه‬‫در‬‫یک‬‫مکان‬‫مانند‬‫متن‬‫قرار‬‫می‬‫گیرد‬.‫برای‬‫تغییر‬‫موقع‬‫یت‬‫عکس‬
‫پس‬‫زمینه‬‫از‬‫خاصیت‬background-position‫می‬‫توان‬‫استفاده‬‫کرد‬.

Background Image - Fixed position
47
‫برای‬‫ثابت‬‫ماندن‬‫عکس‬‫پس‬‫زمینه‬‫و‬‫اسکرول‬‫نشدن‬‫می‬‫توان‬‫از‬‫خاصیت‬background-
attachment‫استفاده‬‫کرد‬.

‫نویسی‬ ‫خالصه‬ ‫حالت‬
48

CSS Box Model
52
‫تمامی‬‫عناصر‬HTML‫در‬CSS‫به‬‫صورت‬‫یک‬‫کادر‬(‫جعبه‬)‫چهار‬‫گوش‬‫تصور‬‫می‬‫شوند‬.‫مدل‬،‫کادری‬
‫کادری‬‫است‬‫که‬‫در‬‫اطراف‬‫عناصر‬‫صفحه‬‫می‬‫تواند‬‫قرار‬‫بگیرد‬‫و‬‫شامل‬‫ویژگی‬‫های‬margin،border
،padding‫و‬content‫میباشد‬.‫برای‬‫تنظیم‬‫عرض‬‫و‬‫ارتفاع‬‫حقیقی‬‫یک‬‫عنصر‬‫درک‬‫مفهوم‬‫مدل‬
‫کادری‬‫بسیار‬‫مهم‬‫است‬.

CSS Box Model
53
margin:‫فضای‬‫اطراف‬border‫را‬‫پوشش‬‫می‬‫دهد‬.‫این‬‫قسمت‬‫نمی‬‫تواند‬‫رنگ‬‫پس‬‫زمینه‬‫داشته‬‫باشد‬‫و‬‫کامال‬‫شفاف‬‫است‬.
border:‫این‬‫بخش‬‫فضای‬‫اطراف‬content‫و‬padding‫را‬‫پوشش‬‫می‬‫دهد‬‫و‬‫می‬‫تواند‬‫رنگ‬،‫سبک‬‫و‬‫ضخامت‬‫خاص‬‫خود‬‫را‬‫داشته‬
‫باشد‬.
padding:‫فضای‬‫اطراف‬content‫را‬‫پوشش‬‫می‬‫دهد‬.‫این‬‫بخش‬‫می‬‫تواند‬‫تحت‬‫تاثیر‬‫رنگ‬‫پس‬‫زمینه‬‫عنصر‬‫قرار‬‫بگیرد‬.
content:‫محتوای‬‫عنصر‬‫را‬‫در‬‫بر‬‫می‬‫گیرد‬.‫همان‬‫جایی‬‫که‬‫متن‬‫و‬‫عکس‬‫قرار‬‫می‬‫گیرد‬.
❖‫برای‬‫تنظیم‬‫عرض‬‫و‬‫ارتفاع‬‫حقیقی‬‫یک‬‫عنصر‬‫درک‬‫مفهوم‬‫مدل‬‫کادری‬‫بسیار‬‫مهم‬‫است‬.

CSS Border Properties
57
‫خاصیت‬border‫برای‬‫تعیین‬،‫طرح‬‫پهنا‬‫و‬‫رنگ‬‫کادر‬‫المان‬‫مربوطه‬‫بکار‬‫می‬‫رود‬.

58
‫خصوصیت‬border-style‫برای‬‫نوع‬‫نمایش‬‫کادر‬‫بکار‬‫می‬‫رود‬.‫که‬‫می‬‫تواند‬‫مقادر‬‫زیر‬‫را‬‫اختیا‬‫ر‬
‫کند‬.

59
‫همچنین‬‫خاصیت‬border-style‫می‬‫تواند‬‫از‬‫یک‬‫تا‬‫چهار‬‫مقدار‬‫داشته‬‫باشد‬:
✓top border
✓right border
✓bottom border
✓left border

Border Width
61
‫خصوصیت‬border-width‫تعیین‬‫کننده‬‫پهنای‬‫کادر‬‫دور‬‫المان‬‫است‬.‫این‬‫خصوصیت‬‫می‬‫توا‬‫ند‬‫با‬
‫واحد‬px, pt, cm, em, ...‫تنظیم‬‫شود‬‫و‬‫یا‬‫با‬‫مقادیر‬thin, medium, thick‫تنظیم‬‫شود‬.

Border Color
63
‫خاصیت‬border-color‫برای‬‫تعیین‬‫رنگ‬‫کادر‬‫بکار‬‫می‬‫رود‬‫که‬‫می‬‫تواند‬‫مقادیر‬‫زیر‬‫را‬‫اختی‬‫ار‬
‫کند‬.
 name - specify a color name, like "red"
 Hex - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 transparent

Border - Shorthand Property
67
‫می‬‫توان‬‫به‬‫منظور‬‫کوتاه‬‫نویسی‬،‫کدها‬‫همه‬‫خصوصیت‬‫های‬border‫را‬‫در‬‫یک‬‫خصوصیت‬
‫نوشت‬.

‫نکته‬
68
‫همچنین‬‫می‬‫توان‬‫مشخصات‬‫تنها‬‫یک‬‫کادر‬‫از‬‫چهار‬‫کادر‬‫دور‬‫المان‬‫را‬‫تعیین‬‫کرد‬.

Rounded Borders
69
‫با‬‫خاصیت‬border-radius‫می‬‫توان‬‫کادردور‬‫المان‬‫را‬‫گرد‬‫کرد‬.

‫ها‬ ‫حاشیه‬CSS Margins
71
‫خاصیت‬margin‫برای‬‫ایجاد‬‫فضا‬‫اطراف‬‫عنصر‬‫بکار‬‫می‬‫رود‬.‫برای‬‫هر‬‫یک‬‫از‬‫چهار‬‫طرف‬‫عنصر‬
‫خاصیت‬margin‫وجود‬‫دارد‬(top, right, bottom, left).
values:

‫مثال‬
72
‫خالصه‬ ‫حالت‬:

‫نویسی‬ ‫خالصه‬ ‫مختلف‬ ‫حاالت‬
73

‫مقدار‬auto
74
‫می‬‫توان‬‫مقدار‬auto‫را‬‫به‬‫خاصیت‬margin‫نسبت‬‫داد‬‫تا‬‫عنصر‬‫را‬‫به‬‫طور‬‫افقی‬‫در‬‫مرکز‬‫المانی‬
‫که‬‫در‬‫داخلش‬‫قرار‬،‫گرفته‬‫قرار‬‫دهد‬.

Margin Collapse
75
‫گاهی‬‫مواقع‬‫حاشیه‬‫های‬‫باال‬‫و‬‫پایین‬‫عناصر‬‫تبدیل‬‫به‬‫یک‬‫حاشیه‬‫که‬‫برابر‬‫بزرگترین‬‫م‬‫قدار‬‫دو‬،‫است‬
‫می‬‫شوند‬.‫توجه‬‫شود‬‫که‬‫این‬‫اتفاق‬‫برای‬‫حاشیه‬‫های‬‫چپ‬‫و‬‫راست‬‫نمی‬‫افتد‬.

‫خاصیت‬ ‫خالصه‬margin
77

CSS Padding
78
‫به‬‫فاصله‬‫محتوای‬‫عنصر‬‫تا‬‫لبه‬‫المان‬‫عنصر‬‫را‬Padding‫گویند‬.

height‫و‬width
82
‫خاصیت‬height‫و‬width‫برای‬‫تنظیم‬‫ارتفاع‬‫و‬‫پهنای‬‫عنصر‬‫بکار‬‫می‬‫رود‬.‫این‬‫خاصیت‬‫ها‬‫می‬‫تو‬‫انند‬
‫به‬‫حالت‬‫خودکار‬‫تنظیم‬‫شوند‬‫که‬‫در‬‫این‬‫حالت‬‫مرورگر‬‫ابعاد‬‫عنصر‬‫را‬‫تعیین‬‫می‬‫کند‬(‫حالت‬‫پیش‬
‫فرض‬)‫یا‬‫با‬‫مقادیری‬‫نظیر‬px, cm,…‫و‬‫یا‬‫به‬‫صورت‬‫درصدی‬‫مقدار‬‫دهی‬‫شوند‬.

‫خصوصیت‬max-width
83
‫با‬‫استفاده‬‫از‬‫خصوصیت‬max-width‫می‬‫توان‬‫حداکثر‬‫عرض‬‫یک‬‫عنصر‬‫را‬‫مشخص‬‫کرد‬.‫تنظیم‬
‫این‬‫خصوصیت‬‫باعث‬‫می‬‫شود‬‫مقدار‬‫ارتفاع‬‫از‬max-width‫بیشتر‬‫نشود‬.
‫توجه‬:‫مقدار‬‫خصوصیت‬max-width‫مقدار‬‫خصوصیت‬width‫را‬‫لغو‬‫می‬‫کند‬.

‫عنصر‬ ‫یک‬ ‫عرض‬ ‫حداکثر‬ ‫تنظیم‬
85
‫با‬‫استفاده‬‫از‬‫خصوصیت‬max-width‫می‬‫توان‬‫حداکثر‬‫عرض‬‫یک‬‫عنصر‬‫را‬‫مشخص‬‫کرد‬.‫تنظیم‬
‫این‬‫خصوصیت‬‫باعث‬‫می‬‫شود‬‫مقدار‬‫ارتفاع‬‫از‬max-width‫بیشتر‬‫نشود‬.‫مقدار‬‫خصوصیت‬max-
width‫مقدار‬‫خصوصیت‬width‫را‬‫لغو‬‫می‬‫کند‬.

Outline
88
outline‫خطی‬‫است‬‫که‬‫در‬‫اطراف‬‫عنصر‬‫بعد‬‫از‬border‫رسم‬‫می‬‫شود‬‫است‬‫که‬‫برای‬‫برجسته‬
‫کردن‬‫عنصر‬‫بکار‬‫می‬‫رود‬.

‫مقادیر‬‫خاصیت‬outline-style
90

CSS Text
92
Text Color
Text Alignment
Text Decoration
TextTransformation
Text Indentation
Line Height
Text Direction
Word Spacing
Text Shadow

‫متن‬ ‫رنگ‬
93
‫خاصیت‬color‫برای‬‫تعیین‬‫رنگ‬‫متن‬‫بکار‬‫می‬‫رود‬‫که‬‫می‬‫تواند‬‫مقادیر‬‫زیر‬‫را‬‫داشته‬‫باش‬‫د‬.

‫متن‬ ‫ترازبندی‬
94
‫خاصیت‬text-align‫برای‬‫ترازبندی‬‫افقی‬‫متن‬‫بکار‬‫می‬‫رود‬.‫این‬‫خاصیت‬‫می‬‫تواند‬‫مقادیر‬left,
right, centered, justified‫را‬‫به‬‫خود‬‫بگیرد‬.

‫متن‬ ‫نمایش‬ ‫برای‬ ‫خاص‬ ‫های‬ ‫فرم‬ ‫تعیین‬
95
‫خاصیت‬text-decoration‫برای‬‫از‬‫بین‬‫بردن‬decoration‫متن‬‫بکار‬‫می‬‫رود‬.‫مقدار‬text-
decoration: none;‫اغلب‬‫برای‬‫خارج‬‫کردن‬‫خط‬‫زیر‬‫لینک‬‫ها‬‫بکار‬‫می‬‫رود‬.

‫متن‬ ‫دگرگونی‬
97
‫خاصیت‬text-transform‫برای‬‫تعیین‬‫کوچکی‬‫یا‬‫بزرگی‬‫حروف‬‫بکار‬‫می‬‫رود‬.

‫متن‬ ‫تورفتگی‬
98
‫خاصیت‬text-indent‫برای‬‫تعیین‬‫تورفتگی‬‫در‬‫خط‬‫اول‬‫متن‬‫بکار‬‫می‬‫رود‬.

‫حروف‬ ‫بین‬ ‫فاصله‬
99
‫خاصیت‬letter-spacing‫برای‬‫تعیین‬‫فاصله‬‫بین‬‫کاراکترها‬‫در‬‫متن‬‫بکار‬‫می‬‫رود‬.

‫خطوط‬ ‫فاصله‬
100
‫خاصیت‬line-height‫برای‬‫تعیین‬‫فاصله‬‫بین‬‫خطوط‬‫بکار‬‫می‬‫رود‬.

‫متن‬ ‫نوشتاری‬ ‫جهت‬
101
‫خاصیت‬direction‫برای‬‫تغییر‬‫جهت‬‫نوشتاری‬‫عنصر‬‫مورد‬‫نظر‬‫بکار‬‫می‬‫رود‬.

‫کلمات‬ ‫فاصله‬
102
‫خاصیت‬word-spacing‫برای‬‫تعیین‬‫فاصله‬‫بین‬‫کلمات‬‫بکار‬‫می‬‫رود‬.

‫متن‬ ‫به‬ ‫دادن‬ ‫سایه‬
103
‫خاصیت‬text-shadow‫برای‬‫دادن‬‫سایه‬‫به‬‫متن‬‫بکار‬‫می‬‫رود‬.

CSS Fonts
104
‫صفات‬‫فونت‬‫در‬CSS،‫خانواده‬‫فونت‬،‫ضخامت‬،‫اندازه‬‫و‬‫استایل‬‫آن‬‫را‬‫تعریف‬‫می‬‫کنند‬.

Font Families
105
‫در‬CSS‫دو‬‫نوع‬‫از‬‫نام‬‫های‬‫خانواده‬‫فونت‬‫ها‬‫موجود‬‫است‬:
✓‫خانواده‬‫ژنریک‬(generic family):‫گروهی‬‫از‬‫خانواده‬‫های‬‫فونت‬‫با‬‫ظاهری‬‫مشابه‬(‫مانند‬:Serif‫یا‬
Monospace)
✓‫خانواده‬‫فونت‬(font family):‫یک‬‫خانواده‬‫فونت‬‫خاص‬(‫مانند‬Times New Roman‫یا‬Arial)

‫خاصیت‬font-family
106
‫خاصیت‬font-family‫برای‬‫تعیین‬‫نوع‬‫فونت‬‫بکار‬‫می‬‫رود‬.‫این‬‫صفت‬‫چندین‬‫نام‬‫فونت‬‫را‬‫ب‬‫ه‬
‫عنوان‬‫سیستم‬‫پشتیبان‬‫در‬‫دسترس‬‫قرار‬‫می‬‫دهد‬.‫اگر‬‫مرورگر‬‫اولین‬‫فونت‬‫را‬‫نمایش‬‫ند‬‫هد‬،‫فونت‬
‫بعدی‬‫را‬‫امتحان‬‫می‬‫کند‬‫و‬‫اگر‬‫دومی‬‫را‬‫نتواند‬،‫سومی‬‫را‬‫و‬...

‫نکته‬
108
‫در‬‫تخصیص‬‫نام‬،‫فونت‬‫ابتدا‬‫از‬‫فونتهایی‬‫که‬‫خودتان‬‫مد‬‫نظر‬‫دارید‬‫استفاده‬‫کنید‬‫و‬‫در‬‫انته‬‫ا‬‫همیشه‬‫از‬
‫فونت‬‫های‬‫مشابه‬‫استفاده‬،‫کنید‬‫در‬‫این‬‫صورت‬،‫مرورگر‬‫اگر‬‫فونت‬‫های‬‫مد‬‫نظر‬‫شما‬‫را‬‫در‬‫دستر‬‫س‬
‫نداشت‬‫حتما‬‫از‬‫فونت‬‫های‬‫مشابه‬‫که‬‫در‬‫تخصیص‬‫ذکر‬‫شده‬،‫است‬‫استفاده‬‫می‬‫کند‬.‫مقادیر‬‫را‬‫ب‬‫ا‬‫کاما‬‫از‬
‫همدیگر‬‫جدا‬‫نمایید‬.‫اگر‬‫نام‬‫فونت‬‫حاوی‬‫خط‬‫فاصله‬،‫بود‬‫حتما‬‫باید‬‫در‬‫کوتیشن‬‫نوشته‬‫شود‬.‫تک‬
‫کوتیشن‬‫هنگام‬‫استفاده‬‫از‬‫خاصیت‬style‫در‬‫تگ‬‫های‬html‫ضروری‬‫است‬.

Font Style
109
‫خاصیت‬font-style‫مقادیر‬‫زیر‬‫را‬‫به‬‫خود‬‫میگیرد‬.

Font Size
110
‫برای‬‫تعریف‬‫اندازه‬‫متن‬‫از‬‫صفت‬font-size‫استفاده‬‫می‬‫کنیم‬.‫صفت‬font-size‫می‬‫تواند‬‫یک‬‫مقدار‬‫مطلق‬‫یا‬‫نسبی‬
‫داشته‬‫باشد‬.
❖‫مطلق‬ ‫مقدار‬:
‫دهد‬ ‫می‬ ‫نمایش‬ ‫مشخص‬ ‫ای‬ ‫اندازه‬ ‫در‬ ‫را‬ ‫متن‬.
‫دهد‬ ‫نمی‬ ‫را‬ ‫مرورگرها‬ ‫همه‬ ‫در‬ ‫متن‬ ‫اندازه‬ ‫تغییر‬ ‫امکان‬ ‫کاربر‬ ‫به‬( .‫دسترسی‬ ‫فاکتورهای‬ ‫نظر‬ ‫از‬ ‫ویژگی‬ ‫این‬،
‫نیست‬ ‫مناسب‬)
‫است‬ ‫مشخص‬ ، ‫خروجی‬ ‫فیزیکی‬ ‫اندازه‬ ‫که‬ ‫است‬ ‫مفید‬ ‫قابل‬ ‫زمانی‬ ‫مطلق‬ ‫مقدار‬.
❖‫نسبی‬ ‫مقدار‬:
‫کند‬ ‫می‬ ‫تنظیم‬ ‫متن‬ ‫اطراف‬ ‫عناصر‬ ‫به‬ ‫نسبت‬ ‫را‬ ‫متن‬ ‫اندازه‬.
‫می‬ ‫را‬ ‫مرورگرها‬ ‫در‬ ‫متن‬ ‫اندازه‬ ‫تغییر‬ ‫امکان‬ ‫کاربر‬ ‫به‬‫دهد‬.
➢‫نکته‬:‫فونت‬ ‫اندازه‬ ‫اگر‬‫پاراگراف‬ ‫مانند‬ ‫عادی‬ ‫های‬ ‫متن‬ ‫برای‬ ‫فرض‬ ‫پیش‬ ‫اندازه‬ ، ‫نکنید‬ ‫انتخاب‬ ‫را‬16px
(16px=1em)‫است‬.

‫در‬ ‫فونت‬ ‫های‬ ‫خاصیت‬ ‫خالصه‬CSS
112

‫در‬ ‫ها‬ ‫لینک‬ ‫دهی‬ ‫فرمت‬CSS
114
‫با‬‫استفاده‬‫از‬CSS‫به‬‫لینک‬‫ها‬‫می‬‫توان‬‫به‬‫روش‬‫های‬‫مختلفی‬‫استایل‬‫داد‬.

115
‫برای‬‫استایل‬‫دهی‬‫به‬‫لینک‬‫ها‬‫می‬‫توان‬‫از‬‫هر‬‫صفت‬CSS‫استفاده‬‫کرد‬.(‫مانند‬:color،
background‫و‬...)

116
‫لینک‬ ، ‫عالوه‬ ‫به‬‫کرد‬ ‫دهی‬ ‫استایل‬ ‫وضعیتشان‬ ‫از‬ ‫متفاوت‬ ‫حتی‬ ‫توان‬ ‫می‬ ‫را‬ ‫ها‬.‫لی‬ ‫وضعیت‬ ‫چهار‬‫نک‬‫ها‬
‫از‬ ‫عبارتند‬:
✓a:link‫یک‬‫لینک‬‫نشده‬ ‫مشاهده‬.
✓a:visited‫لینکی‬‫شده‬ ‫مشاهده‬ ‫کاربر‬ ‫توسط‬ ‫قبال‬ ‫که‬.
✓a:hover‫حالتی‬‫لینک‬ ‫از‬‫باشد‬ ‫آن‬ ‫روی‬ ‫ماوس‬ ‫که‬ ‫زمانی‬.
✓a:active‫حالتی‬‫لینک‬ ‫از‬‫شدن‬ ‫کلیک‬ ‫لحظه‬ ‫در‬.

‫نکته‬
118
‫لینک‬ ‫از‬ ‫مختلفی‬ ‫های‬ ‫حالت‬ ‫برای‬ ‫که‬ ‫زمانی‬‫ه‬ ‫ترتیب‬ ‫باید‬ ، ‫کنید‬ ‫می‬ ‫تعیین‬ ‫استایل‬‫را‬ ‫زیر‬ ‫ای‬
‫کنید‬ ‫رعایت‬:
❖a:hover:‫باید‬‫از‬ ‫بعد‬a:link‫و‬a:visited‫قرار‬‫گیرد‬.
❖a:active:‫باید‬‫از‬ ‫بعد‬a:hover‫قرار‬‫گیرد‬.

‫صفت‬text-decoration
119
‫صفت‬text-decoration‫اکثرا‬‫برای‬‫حذف‬‫زیرخط‬‫از‬‫لینک‬‫ها‬‫استفاده‬‫می‬‫شود‬.

‫زمینه‬ ‫پس‬ ‫رنگ‬
120
‫از‬‫صفت‬background-color‫برای‬‫تعیین‬‫رنگ‬‫پس‬‫زمینه‬‫لینک‬‫ها‬‫نیز‬‫استفاده‬‫می‬‫شود‬.

‫ای‬ ‫دکمه‬ ‫های‬ ‫لینک‬-‫پیشرفته‬
121
‫مثال‬‫زیر‬،‫نمونه‬‫ای‬‫حرفه‬‫ای‬‫از‬‫ترکیب‬‫برخی‬‫از‬‫صفات‬CSS‫برای‬‫نمایش‬‫لینک‬‫ها‬‫به‬‫شکل‬
‫جعبه‬‫یا‬‫دکمه‬‫است‬.

‫دوم‬ ‫مثال‬
122

‫در‬ ‫ها‬ ‫لیست‬CSS
124
‫در‬HTML‫دو‬‫نوع‬‫لیست‬‫وجود‬‫دارد‬:
❖‫لیست‬‫های‬‫نامرتب‬(unorder list):‫آیتم‬‫های‬‫این‬‫نوع‬‫لیست‬‫با‬‫هرچیزی‬‫غیر‬‫از‬‫اعداد‬‫و‬
‫حروف‬‫عالمتگذاری‬‫می‬‫شوند‬.
❖‫لیست‬‫های‬‫مرتب‬order list))‫آیتم‬‫های‬‫لیست‬‫با‬‫اعداد‬‫و‬،‫حروف‬‫عالمتگذاری‬‫می‬‫شوند‬.
‫با‬CSS‫بیشتر‬‫می‬‫توان‬‫لیست‬‫ها‬‫را‬‫دستکاری‬،‫کرد‬‫ا‬‫ال‬‫مث‬‫آیتم‬‫های‬‫لیست‬‫را‬‫با‬‫یک‬‫عک‬‫س‬
‫عالمتگذاری‬‫نمود‬.

‫لیست‬ ‫گذاری‬ ‫عالمت‬ ‫تعیین‬List Item Markers
125
‫با‬‫خاصیت‬list-style-type‫می‬‫توان‬‫نوع‬‫عالمت‬‫گذاری‬‫آیتم‬‫های‬‫لیست‬‫را‬‫مشخص‬‫کرد‬.

‫لیست‬ ‫نشانگر‬ ‫عنوان‬ ‫به‬ ‫عکس‬ ‫تعیین‬
126
‫با‬‫خاصیت‬list-style-image‫می‬‫توان‬‫برای‬‫آیتم‬‫های‬‫لیست‬‫از‬‫عکس‬‫دلخواه‬‫استفاده‬‫کرد‬.

127
CSS Layout
Display Property

‫خاصیت‬display‫در‬CSS
128
‫خصوصیت‬display‫چگونگی‬‫نمایش‬‫یک‬‫عنصر‬‫را‬‫مشخص‬‫می‬‫کند‬.‫این‬‫خاصیت‬‫یکی‬‫از‬
‫مهمترین‬‫خاصیت‬‫های‬‫در‬CSS‫برای‬‫طرح‬‫بندی‬‫صفحه‬(layout)‫است‬.

‫خاصیت‬display‫در‬CSS
129
‫هر‬‫یک‬‫از‬‫عناصر‬html‫به‬‫طور‬‫پیش‬‫فرض‬‫نوع‬‫نمایشی‬‫به‬‫یکی‬‫از‬‫دو‬‫صورت‬block‫یا‬inline‫دارند‬.
❖block:‫یک‬‫عنصر‬block‫عنصری‬‫است‬‫که‬‫تمام‬‫طول‬‫یک‬‫سطر‬‫را‬‫اشغال‬‫می‬‫کند‬‫و‬‫قبل‬‫و‬‫بعد‬‫از‬
‫آن‬‫یک‬‫سطر‬‫وجود‬‫دارد‬.
❖inline:‫یک‬‫عنصر‬inline‫تنها‬‫به‬‫اندازه‬‫ای‬‫که‬‫نیاز‬،‫دارد‬‫عرض‬‫یک‬‫سطر‬‫را‬‫اشغال‬‫می‬،‫کند‬‫و‬
‫هیچ‬‫اجباری‬‫در‬‫اشغال‬‫کل‬‫یک‬‫سطر‬‫وجود‬‫ندارد‬.

Display: none
131
‫یکی‬‫دیگر‬‫از‬‫مقادیر‬‫رایج‬‫برای‬display‫مقدار‬none‫است‬.‫برخی‬‫عنصرهای‬‫خاص‬‫مانند‬
javascript‫از‬‫این‬‫مقدار‬‫به‬‫طور‬‫فرض‬‫پیش‬‫استفاده‬‫کنند‬‫می‬.‫در‬‫اسکریپت‬‫جاوا‬‫از‬‫این‬‫ویژگ‬‫ی‬
‫برای‬‫پنهان‬‫نمودن‬‫پویای‬‫برخی‬‫از‬‫های‬‫قسمت‬،‫صفحه‬‫بدون‬‫حذف‬‫نمودن‬‫آنها‬‫استفاده‬‫ش‬‫می‬‫ود‬.

Override The Default Display Value
132
‫می‬‫توان‬‫مقدار‬‫پیش‬‫فرض‬‫نمایش‬‫عناصر‬‫را‬‫با‬‫بهره‬‫گیری‬‫از‬‫این‬‫خاصیت‬override‫کرد‬.

‫عنصر‬ ‫یک‬ ‫کردن‬ ‫پنهان‬Hide an Element
134
‫برای‬‫پنهان‬‫کردن‬‫یک‬‫عنصر‬‫دو‬‫روش‬‫وجود‬‫دارد‬:
✓‫خصوصیت‬display‫را‬‫با‬‫مقدار‬none‫تنظیم‬‫کنیم‬.
✓‫خصوصیت‬visibility‫را‬‫با‬‫مقدار‬hidden‫تنظیم‬‫کنیم‬.
‫به‬‫هرحال‬‫باید‬‫توجه‬‫داشته‬‫باشید‬‫که‬‫این‬‫دو‬،‫روش‬‫نتایج‬‫مختلفی‬‫را‬‫تولید‬‫خواهند‬‫کرد‬.
✓‫در‬‫روش‬‫اول‬display:none))‫عنصر‬‫حذف‬‫می‬‫شود‬‫و‬‫اثری‬‫از‬‫آن‬‫در‬‫صفحه‬‫باقی‬‫نخواهد‬‫ماند‬.
✓‫در‬‫روش‬‫دوم‬visibility:hidden))‫عنصر‬‫پنهان‬‫خواهد‬‫شد‬‫ولی‬‫اثر‬‫آن‬‫یا‬‫به‬‫عبارتی‬‫فضایی‬‫که‬‫اشغال‬
‫کرده‬،‫است‬‫در‬‫صفحه‬‫باقی‬‫خواهد‬‫ماند‬.

137
CSS Layout
Position Property

‫خاصیت‬position
138
‫خاصیت‬position‫نحوه‬‫قرارگیری‬‫عنصر‬‫را‬‫در‬‫صفحه‬‫مشخص‬‫می‬‫کند‬.‫مقدار‬‫این‬‫خاصیت‬‫می‬
‫تواند‬‫یکی‬‫از‬‫مقادیر‬‫زیر‬‫باشد‬:
✓static
✓relative
✓fixed
✓absolute
✓sticky

‫نکته‬
139
‫موقعیت‬‫عناصر‬‫در‬‫صفحه‬‫با‬‫خصوصیات‬top‫و‬bottom‫و‬left‫و‬‫یا‬right‫تنظیم‬‫می‬،‫شود‬‫اما‬
‫این‬‫خصوصیات‬‫کار‬‫نخواهند‬‫کرد‬‫مگر‬‫اینکه‬‫ابتدا‬‫خصوصیت‬position‫تنظیم‬‫شود‬‫و‬‫همچنین‬
‫خصوصیات‬‫ذکر‬‫شده‬‫با‬‫توجه‬‫به‬‫روش‬‫موقعیت‬،‫دهی‬‫به‬‫صورت‬‫متفاوت‬‫عمل‬‫خواهند‬‫کرد‬.

position: static;
140
‫موقعیت‬‫عناصر‬HTML‫در‬،‫صفحه‬‫به‬‫صورت‬‫پیش‬‫فرض‬static‫است‬.‫اگر‬‫موقعیت‬‫یک‬‫عنصر‬
‫با‬‫مقدار‬static‫تنظیم‬،‫شود‬‫همیشه‬‫مطابق‬‫جریان‬‫معمول‬‫نمایش‬‫داده‬‫می‬‫شود‬‫یا‬‫به‬‫عبارتی‬‫در‬
‫همان‬‫جایی‬‫که‬‫کد‬‫آن‬‫قرار‬‫دارد‬‫نمایش‬‫داده‬‫می‬‫شود‬.
‫توجه‬:‫با‬‫تنظیم‬‫خصوصیت‬position‫با‬‫مقدار‬static،‫خصوصیات‬top‫و‬bottom‫و‬right‫و‬
left‫اثری‬‫نخواهند‬‫داشت‬.

position: relative;
141
‫یک‬‫عنصر‬‫نسبت‬‫به‬‫مکان‬‫عادی‬،‫خودش‬‫موقعیت‬‫دهی‬‫می‬‫شود‬.

position: fixed;
142
‫یک‬‫عنصر‬‫با‬‫موقعیت‬‫ثابت‬fixed))‫در‬‫واقع‬‫نسبت‬‫به‬‫پنجره‬،‫مرورگر‬‫موقعیت‬‫دهی‬‫می‬‫شود‬.
‫موقعیت‬‫عنصر‬‫حتی‬‫در‬‫صورتی‬‫که‬‫به‬‫باال‬‫و‬‫پایین‬‫صفحه‬‫برویم‬scrolled))‫یا‬‫اندازه‬‫پنجره‬‫مرورگر‬
‫را‬‫تغییر‬،‫دهیم‬‫در‬‫همان‬‫موقعیت‬‫قبلی‬‫باقی‬‫می‬‫ماند‬.

position: absolute;
144
‫یک‬‫عنصر‬‫نسبت‬‫به‬‫مکان‬‫والد‬‫خود‬‫موقعیت‬‫دهی‬‫می‬‫شود‬‫و‬‫اگر‬‫والدی‬‫وجود‬،‫نداشت‬‫نسب‬‫ت‬
‫به‬‫بلوک‬<html>‫موقعیت‬‫دهی‬‫خواهد‬‫شد‬.(fixed‫نسبت‬‫به‬‫پنجره‬‫مرورگر‬‫کاربر‬‫ثابت‬‫می‬
‫شود‬‫ولی‬absolute‫نیبت‬‫به‬‫یک‬‫تامان‬‫دیگر‬‫ثابت‬‫می‬‫شود‬).

‫عناصر‬ ‫قراردادن‬ ‫هم‬ ‫روی‬Overlapping Elements
148
‫زمانی‬‫که‬‫موقعیت‬‫دهی‬،‫عناصر‬‫خارج‬‫از‬‫حالت‬‫عادی‬،‫باشد‬‫می‬‫توانند‬‫روی‬‫دیگر‬‫عناصر‬‫قرار‬‫بگ‬‫یرند‬.
‫خصوصیت‬z-index‫ترتیب‬‫عناصر‬‫را‬‫مشخص‬‫می‬‫کند‬(‫کدام‬‫عنصر‬‫باید‬‫جلو‬‫یا‬‫پشت‬‫دیگر‬‫ع‬‫ناصر‬
‫باشد‬).‫مقدار‬‫این‬‫خصوصیت‬‫می‬‫تواند‬‫مثبت‬‫یا‬‫منفی‬‫باشد‬.

‫خاصیت‬overflow
149
‫خاصیت‬overflow‫تعیین‬‫می‬‫کند‬‫زمانی‬‫که‬‫متحوای‬‫یک‬‫عنصر‬‫خیلی‬‫زیاد‬‫باشد‬‫و‬‫قابل‬‫ق‬‫رار‬
‫گرفتن‬‫در‬‫ناحیه‬‫مشخص‬‫عنصر‬‫نشود‬‫به‬‫صورت‬scrollbars‫نمایش‬‫داده‬‫شود‬‫و‬‫یا‬‫بریده‬(clip)
‫شود‬.

‫خاصیت‬float‫در‬CSS
153
‫با‬‫این‬‫خصوصیت‬‫می‬‫توان‬‫یک‬‫عنصر‬‫را‬‫در‬‫صفحه‬‫به‬‫سمت‬‫چپ‬‫یا‬‫راست‬‫حرکت‬‫داد‬‫و‬‫اجازه‬‫د‬‫اد‬
‫تا‬‫دیگر‬‫عناصر‬‫اطراف‬‫آنرا‬‫بپوشانند‬.

‫خاصیت‬float‫در‬CSS
154
‫خاصیت‬float‫مقادیر‬‫زیر‬‫را‬‫می‬‫تواند‬‫به‬‫خود‬‫بگیرد‬:
✓Left
✓right
✓None
✓inherit

‫خاصیت‬clear
157
‫با‬‫استفاده‬‫از‬‫خاصیت‬clear‫می‬‫توان‬‫کناره‬‫هایی‬‫از‬‫عنصر‬‫را‬‫که‬‫می‬‫خواهیم‬‫متن‬‫یا‬‫عکس‬‫در‬‫آن‬‫سمت‬‫قرار‬‫نگیرد‬‫را‬
‫مشخص‬‫می‬‫کنیم،در‬‫واقع‬‫از‬‫این‬‫خاصیت‬‫برای‬‫خالی‬‫کردن‬‫فضای‬‫اطراف‬‫یک‬‫عنصر‬‫استفاده‬‫می‬‫شود‬.‫که‬‫حالت‬‫های‬
‫مختلفی‬‫دارد‬.
✓None:‫در‬‫دو‬‫طرف‬‫عنصر‬‫مجاز‬‫است‬‫که‬‫عکس‬‫یا‬‫متن‬‫قرار‬‫بگیرد‬‫که‬‫حالت‬‫پیش‬‫فرض‬‫می‬‫باشد‬.
✓Right:‫در‬‫سمت‬‫راست‬‫هیچ‬‫عکس‬‫و‬‫متنی‬‫نمی‬‫تواند‬‫قرار‬‫گیرد‬.
✓Left:‫در‬‫سمت‬‫چت‬‫هیچ‬‫عکس‬‫و‬‫متنی‬‫نمی‬‫تواند‬‫قرار‬‫گیرد‬.
✓Both:‫دو‬‫طرف‬‫عنصر‬‫هیچ‬‫عکس‬‫و‬‫متنی‬‫نمی‬‫تواند‬‫قرار‬‫گیرد‬.
✓inherit:‫مقدار‬‫عنصر‬‫والد‬‫رو‬‫برای‬‫عنصر‬‫فرزند‬‫لحاظ‬‫می‬‫کنه‬.‫مثال‬‫اگر‬‫عنصر‬‫والد‬‫دارای‬‫مقدار‬left‫باشه‬‫عنصر‬
‫فرزند‬‫دارای‬‫مقدار‬inherit‫باشه‬.‫مقدار‬left‫رو‬‫به‬‫عنصر‬‫فرزند‬‫اختصاص‬‫میده‬

::after pseudo-element
164
‫شبه‬‫عناصر‬before‫و‬after‫همونطور‬‫که‬‫هم‬‫که‬‫از‬‫اسمشون‬‫پیداست‬‫میتونند‬‫در‬‫اول‬‫و‬‫آخر‬‫یک‬
،‫عنصر‬‫عنصر‬‫جدیدی‬‫ایجاد‬‫کنند‬‫تا‬‫به‬‫وسیله‬‫ی‬‫اون‬‫بتونیم‬‫کنترل‬‫بیشتری‬‫برای‬‫استای‬‫ل‬‫دادن‬‫به‬
‫عناصر‬HTML‫داشته‬‫باشیم‬.

‫ترکیب‬‫انتخابگرها‬CSS Combinators
166
‫یکی‬‫از‬‫امکاناتی‬‫که‬CSS‫در‬‫اختیار‬‫ما‬‫قرار‬‫می‬‫دهد،ترکیب‬‫انتخابگرها‬‫بوسیله‬‫ترکیب‬‫کننده‬‫ها‬‫می‬
‫باشد‬.‫در‬CSS‫ترکیب‬‫کننده‬‫هایی‬‫از‬‫قبیل‬+,~,>‫وجود‬‫دارند‬‫که‬‫به‬‫ما‬‫این‬‫امکان‬‫را‬‫می‬‫دهند‬‫ت‬‫ا‬
‫در‬‫استفاده‬‫از‬‫انتخابگرها‬‫قدرت‬‫انتخاب‬‫باالتری‬‫داشته‬‫باشیم‬.

‫نسل‬ ‫انتخابگر‬Descendant
167
‫به‬‫منظور‬‫استفاده‬‫از‬‫انتخابگر‬‫نسل‬‫فقط‬‫کافی‬‫است‬‫بین‬‫دو‬‫انتخاب‬‫گر‬‫یک‬‫فاصله‬‫خ‬‫الی‬‫قرار‬
‫دهیم‬.‫به‬‫این‬‫ترتیب‬‫می‬‫توان‬‫یک‬‫رابطه‬‫والد‬-‫اوالد‬‫را‬‫بین‬‫عناصر‬‫شبیه‬‫سازی‬‫کرد‬.‫به‬‫عنوان‬
‫مثال‬‫اگر‬‫بخواهیم‬‫لینک‬‫های‬‫موجود‬‫در‬‫فوتر‬‫را‬‫به‬‫رنگ‬‫خاکستری‬‫در‬‫بیاوریم‬‫می‬‫توانیم‬‫از‬‫قطعه‬
‫کد‬‫زیر‬‫استفاده‬‫کنیم‬.

168
‫توجه‬‫داشته‬‫باشید‬‫که‬‫لزومی‬‫ندارد‬‫لینک‬‫ها‬‫حتما‬‫مستقیما‬‫داخل‬‫تگ‬footer‫قرار‬‫داشته‬‫باشند‬
‫و‬‫کدها‬‫می‬‫توانند‬‫به‬‫صورت‬‫زیر‬‫نیز‬‫باشند‬.

169
‫این‬‫امکان‬‫وجود‬‫دارد‬‫که‬‫بیشتر‬‫از‬‫یک‬‫سطح‬‫هم‬‫به‬‫داخل‬‫حرکت‬‫کنیم‬‫مثال‬‫فرض‬‫کنید‬‫م‬‫ی‬
‫خواهیم‬‫تمام‬‫لینک‬‫هایی‬‫که‬‫در‬‫عناصر‬menu‫یی‬‫که‬‫در‬‫عناصر‬nav‫قرار‬‫دارند‬‫را‬‫انتخاب‬‫کنیم‬.
‫می‬‫توانیم‬‫بصورت‬‫زیر‬‫عمل‬‫کنیم‬:

‫فرزند‬ ‫انتخابگر‬
171
‫برخی‬‫مواقع‬‫نیاز‬‫داریم‬‫تا‬‫فقط‬‫فرزندان‬‫مستقیم‬‫یک‬‫عنصر‬‫را‬‫انتخاب‬‫کنیم‬.‫برای‬‫این‬‫منظ‬‫ور‬‫می‬‫توانیم‬
‫از‬‫عالمت‬<‫استفاده‬‫کنیم‬.‫به‬‫عنوان‬‫مثال‬‫قطعه‬‫کدی‬‫که‬‫در‬‫مورد‬footer‫مثال‬‫زدیم‬‫را‬‫در‬‫نظر‬
‫بگیرید‬.
‫فرض‬‫کنید‬‫این‬‫بار‬‫میخواهیم‬‫فقط‬‫رنگ‬‫لینک‬‫هایی‬‫که‬‫مستقیما‬‫داخل‬‫تگ‬footer‫قرار‬‫دارند‬‫به‬‫به‬
‫رنگ‬‫خاکستری‬‫تغییر‬‫دهیم،برای‬‫این‬‫منظور‬‫می‬‫توانیم‬‫به‬‫صورت‬‫زیر‬‫عمل‬‫کنیم‬:

‫برادر‬ ‫انتخابگر‬–‫خواهر‬Adjacent Sibling
173

‫برادر‬ ‫انتخابگر‬–‫بعدی‬ ‫خواهرهای‬General Sibling
175

CSS Forms
178
https://www.w3schools.com/css/css_form.asp

CSS Advanced
181
 CSSTransitions
 CSSAnimations
 CSS Gradients
 CSSWeb Fonts
 CSS Flexbox
 CSS Media Queries
 …

CSS

More Related Content

More from M Nemati (15)

CSS