الخصائص المتعلقة بالخطوط في CSS

Articles

تشرح هذه المقالة خصائص CSS المتعلقة بالخطوط۔

يمكنك التعرف على حالات الاستخدام وكيفية كتابة الخصائص مثل font-style و font-family۔

YouTube Video

إنشاء HTML للمعاينة

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

الطباعة (متعلق بالخطوط)

خاصية `font-size`

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size هي خاصية CSS تُستخدم لتحديد حجم النص داخل العنصر۔ تُستخدم لتعديل الأهمية البصرية للنص وتحسين قابلية القراءة۔ يمكن تحديد font-size باستخدام وحدات وأساليب مختلفة۔

الطرق الرئيسية لتحديد القيم

القيم المطلقة(px, pt)

إذا كنت ترغب في استخدام حجم ثابت لا يعتمد على المتصفح أو الجهاز، فحدد أحجام الخطوط بوحدات مطلقة مثل البيكسل أو النقاط۔

1p {
2    font-size: 16px;
3}

px: البيكسل هي الوحدة الأكثر شيوعاً۔ حدد الحجم بزيادات مقدارها 1 بيكسل۔

1p {
2    font-size: 12pt;
3}

pt: النقاط هي وحدات تُستخدم بشكل شائع في الطباعة۔ النقطة الواحدة تعادل 1/72 من البوصة۔

القيم النسبية(em, rem, %)

يمكنك أيضًا تحديد أحجام الخطوط النسبية بناءً على حجم الخط الخاص بالعناصر الأصل أو الرئيسية۔ هذا مناسب للتصميم المتجاوب۔

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em هي وحدة نسبية تعتمد على حجم الخط الخاص بعنصر الأصل۔ إذا كان حجم الخط الخاص بعنصر الأصل هو 16px، فإن 1em تساوي 16px۔

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem هي وحدة نسبية تعتمد على حجم الخط الخاص بعنصر الجذر (عادةً العنصر <html>)۔

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % يتم تحديدها كنسبة مئوية ترتبط بحجم الخط الخاص بعنصر الأصل۔

الكلمات المفتاحية

يمكنك أيضًا استخدام الكلمات المفتاحية لتحديد الأحجام بسهولة وبطريقة ملائمة للمستخدم۔

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small، x-small، small، medium، large، x-large، xx-large: هذه الكلمات المفتاحية تحدد أحجام خطوط أساسية تختلف حسب المتصفح ولكن يسهل استخدامها۔

الكلمات المفتاحية النسبية

يمكنك تحديد أحجام الخطوط النسبية باستخدام الكلمات المفتاحية بالنسبة إلى عنصر الأصل أو حجم النص المحيط۔

1p {
2    font-size: larger;
3}

larger: larger يجعل حجم الخط أكبر مقارنة بعنصر الأصل۔

1p {
2    font-size: smaller;
3}

smaller: smaller يجعل حجم الخط أصغر مقارنة بعنصر الأصل۔

أمثلة الاستخدام الشائعة

في التصميم المتجاوب، تُستخدم الوحدات em و rem غالباً لتحديد أحجام الخطوط المرنة بناءً على حجم عناصر الأصل أو الجذر۔
في التصميم الثابت أو التصميم الدقيق، من الشائع استخدام px لتثبيت الحجم۔

أمثلة على تعديلات حجم الخط

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

الخاتمة

font-size هي خاصية مهمة لتعديل الأهمية البصرية للنص وقابلية قراءته۔ من المهم استخدام الوحدات والكلمات المفتاحية بشكل مناسب حسب هدف التصميم أو لتحقيق تصميم متجاوب ومرن۔

خاصية `font-family`

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

يمكن أن تحدد خاصية font-family بشكل أساسي نوعين من القيم:۔

أسماء الخطوط المحددة: تحديد اسم خط معين۔ تحديد الخطوط المثبتة على النظام أو المتوفرة كخطوط ويب۔
- مثال:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
عائلة الخطوط العامة: تحديد مجموعة من الخطوط البديلة للاستخدام عند عدم توفر خط معين۔
- مثال:
  - serif: سيريف (مثل Times New Roman، Georgia)
  - sans-serif: سانس-سيريف (مثل Arial، Verdana)
  - monospace: مونو سبيس (مثل Courier New، Lucida Console)
  - cursive: كورسيف (مثل Comic Sans MS)
  - fantasy: فانتازي (مثل Papyrus، Impact)

كيفية تحديد `font-family`

عند تحديد خطوط متعددة، يُوصى بفصل أسماء الخطوط بفواصل وإضافة خط عام كبديل في النهاية۔

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

في هذه الحالة، إذا لم يكن Times New Roman متاحًا، سيتم استخدام Georgia، وإذا لم يكن أي منهما متاحًا، سيتم استخدام خط serif۔

خاصية `font-weight`

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight هي خاصية CSS تُستخدم لتحديد سماكة النص۔ تلعب دورًا هامًا في التأثير البصري وأسلوب النص، وتُستخدم لتغيير نمط الخط۔ يمكن تحديد font-weight باستخدام الأرقام أو الكلمات المفتاحية للإشارة إلى نطاق السماكات من الرفيع إلى العريض۔

القيم الرئيسية لخاصية `font-weight`

الكلمات المفتاحية

1p {
2    font-weight: normal; /* Default thickness */
3}

normal يمثل الوزن القياسي للخط۔ عادةً ما يقابل 400۔

1p {
2    font-weight: bold; /* Bold */
3}

bold يمثل النص العريض۔ عادةً ما يقابل 700۔

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder يمثل نصًا أكثر عريضًا من العنصر الأب۔

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter يمثل نصًا أفتح من العنصر الأب۔

قيم رقمية

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

يمكن أيضًا تحديد font-weight كرقم يتراوح بين 100 إلى 900۔ الأرقام الأصغر تؤدي إلى نص أكثر نحافة، والأرقام الأكبر تؤدي إلى نص أكثر عُرضًا۔ عادةً ما تدعم عائلات الخطوط نطاقًا من السماكات المحددة، لكن ليس كل الأرقام متوفرة لجميع الخطوط۔

100: رفيع
200: خفيف جداً
300: خفيف
400: عادي
500: متوسط
600: نصف عريض
700: عريض
800: عريض جداً
900: أسود

أمثلة على كيفية استخدام `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

الاستخدام العملي

النص العادي يستخدم عادةً 400 (normal)۔
بالنسبة لـ العناوين أو الأجزاء المُؤكدة، من الشائع استخدام 700 (bold)۔
اعتمادًا على التصميم، يمكن استخدام السماكات الوسطى مثل 500 أو 600 لتجنب المبالغة في التأكيد۔

الملخص

font-weight هي خاصية تحدد سماكة النص باستخدام كلمات مفتاحية مثل normal أو bold، أو أرقام من 100 إلى 900۔
lighter و bolder يتكيفان بشكل نسبي مع سماكة العنصر الأب۔
اختيار font-weight المناسب بناءً على التصميم وسهولة القراءة أمر مهم۔

خاصية `font-style`

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style هي خاصية CSS تُستخدم لتحديد نمط الأحرف، خاصةً لتطبيق الأنماط المائلة أو العادية۔ تُستخدم هذه الخاصية غالبًا لتأكيد النص والتصميم، خاصةً في العناوين والاقتباسات۔

القيم الرئيسية لـ `font-style`

`normal`

1p {
2    font-style: normal;
3}

normal هو النمط القياسي للأحرف (الأحرف المستقيمة عادةً)۔

`italic`

1p {
2    font-style: italic;
3}

italic يجعل النص مائلاً۔ يمكن تطبيق هذا النمط إذا كانت عائلة الخط تدعم النصوص المائلة۔

`oblique`

1p {
2    font-style: oblique;
3}

oblique يجعل النص مائلاً۔ على عكس italic، إذا لم يكن لدى الخط إصدار مائل، فقد يتم إمالة النص بشكل اصطناعي۔

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

حدد زاوية مع oblique لإمالة النص بالزاوية المحددة۔ هذا الوصف مخصص لمزيد من تخصيص النمط oblique۔ حاليًا، معظم المتصفحات لا تدعم تحديد الزاوية، ولكن بعضها يدعم ذلك۔

استخدام `font-style`

italic غالبًا ما يُستخدم للتأكيد، والاقتباسات، وعناوين الكتب۔
oblique يُستخدم غالبًا عندما لا تحتوي الخطوط على نمط مائل طبيعي، كوسيلة لإمالة النص بشكل اصطناعي۔
normal يُستخدم عند الرجوع إلى نمط النص العادي۔

الملخص

font-style يُستخدم للتحكم في ميلان النص، وله ثلاث قيم رئيسية: normal، italic، و oblique۔
في التصميم، تُستخدم الخطوط المائلة عادةً لتأكيد النص، وإذا لم يدعم الخط ذلك، يمكن استخدام oblique لإمالة النص۔

خاصية `color`

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

خاصية color هي خاصية أساسية في CSS لتحديد لون النص۔ تُستخدم لتغيير لون نص عناصر HTML ويمكن تحديد الألوان بتنسيقات مختلفة۔

توضيح:

الفئة color-red تحدد لون النص كالأحمر باستخدام كلمة مفتاحية۔
- يمكنك تحديد أسماء ألوان مثل red، blue، و green المعرّفة في CSS۔
الفئة color-hex تحدد الألوان باستخدام رموز الألوان السداسية العشرية۔
- يمكنك تحديد الألوان باستخدام 3 أرقام مثل #F00۔ في هذه الحالة، #F00 هو نفس اللون مثل #FF0000۔
الفئة color-rgb تحدد الألوان باستخدام تنسيق RGB۔
- RGB: تُحدد مكونات الأحمر، الأخضر، والأزرق ضمن نطاق من 0 إلى 255۔
الفئة color-rgba تستخدم تنسيق RGBA لإضافة الشفافية۔
الفئة color-hsl تحدد الألوان باستخدام تنسيق HSL۔
- يمكن تحديد الألوان باستخدام الدرجة، التشبع، والإضاءة۔ تُحدد الدرجة من 0 إلى 360 درجة، ويُحدد التشبع والإضاءة بين 0% و 100%۔
الفئة color-hsla تستخدم تنسيق HSLA لإضافة الشفافية۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

قواعد CSS `@`خصائص CSS المتعلقة بالنص

الخصائص المتعلقة بالخطوط في CSS

YouTube Video

إنشاء HTML للمعاينة

الطباعة (متعلق بالخطوط)

خاصية font-size

الطرق الرئيسية لتحديد القيم

القيم المطلقة(px, pt)

القيم النسبية(em, rem, %)

الكلمات المفتاحية

الكلمات المفتاحية النسبية

أمثلة الاستخدام الشائعة

أمثلة على تعديلات حجم الخط

الخاتمة

خاصية font-family

كيفية تحديد font-family

خاصية font-weight

القيم الرئيسية لخاصية font-weight

الكلمات المفتاحية

قيم رقمية

أمثلة على كيفية استخدام font-weight

الاستخدام العملي

الملخص

خاصية font-style

القيم الرئيسية لـ font-style

normal

italic

oblique

oblique <angle>

استخدام font-style

الملخص

خاصية color

توضيح:

YouTube Video

خاصية `font-size`

خاصية `font-family`

كيفية تحديد `font-family`

خاصية `font-weight`

القيم الرئيسية لخاصية `font-weight`

أمثلة على كيفية استخدام `font-weight`

خاصية `font-style`

القيم الرئيسية لـ `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

استخدام `font-style`

خاصية `color`