الـ HTML هو العضم، والـ CSS هو الشكل واللبس والديكور اللي بيخلي الموقع يبهر الناس.
عندك 3 طرق عشان تدي ألوان وحياة لصفحتك:
| الطريقة | مكانها | الاستخدام |
|---|---|---|
Inline CSS | جوه التاج نفسه بـ style="" | لتغيير سريع لعنصر واحد بس (مش مفضل). |
Internal CSS | جوه الـ <head> في تاج <style> | لو صفحة واحدة وعايز تنسقها بسرعة. |
External CSS | ملف بره بصيغة .css | أحسن طريقة للمشاريع الكبيرة (نفس الملف بيشغل كذا صفحة). |
الـ CSS بحر، بس دول أهم أدوات هتحتاجهم عشان تكون محترف:
color | لون الكلام. |
background-color | لون الخلفية. |
background-image | تحط صورة كخلفية. |
opacity | درجة الشفافية. |
width / height | العرض والطول. |
margin | المساحة الفاضية "بره" العنصر (بتبعده عن غيره). |
padding | المساحة الفاضية "جوه" العنصر (بتبعد الكلام عن الحواف). |
border | البرواز بتاع العنصر (سمكه، لونه، وشكله). |
display: flex | أقوى أداة لتوزيع العناصر جنب بعض أو تحت بعض بسهولة. |
display: grid | لعمل شبكة معقدة من الصفوف والأعمدة. |
position | مكان العنصر (ثابت fixed، متحرك absolute، أو عادي). |
الخط مش مجرد كلام، ده روح الموقع. دي أهم الخصائص اللي بتتحكم فيه:
| الخاصية | بتعمل إيه؟ |
|---|---|
font-family | بتحدد نوع الخط (زي Arial أو Tajawal). |
font-size | حجم الكلام (بالـ px أو rem). |
font-weight | ثقل الخط (عريض Bold أو رفيع Light). |
line-height | المسافة بين السطور (مهمة جداً لراحة العين). |
text-align | محاذاة النص (يمين، شمال، أو في النص). |
text-transform | بتخلي الحروف كلها Capital أو Small (للإنجليزي). |
لو عايز تحط 3 صناديق جنب بعض وتوسطنهم، الـ Flex هو الحل السحري:
| الخاصية | الوظيفة بالبلدي |
|---|---|
display: flex; | بتقول للأب: "وزع ولادك بنظام الفليكس". |
flex-direction | العناصر هترص جنب بعض (row) ولا تحت بعض (column)؟ |
justify-content | توزيع العناصر بالعرض (في النص، في الأول، أو مسافات بينهم). |
align-items | توزيع العناصر بالطول (توسطنهم من فوق وتحت). |
gap | المسافة الفاضية بين العناصر وبعضها. |
إزاي تخلي الزرار ينور لما تقف عليه أو الصورة تلف؟
| الخاصية | بتعمل إيه؟ |
|---|---|
transition | بتحدد سرعة التغيير (مثلاً اللون يتغير في نص ثانية). |
transform: scale() | بتكبر أو تصغر العنصر. |
transform: rotate() | بتلف العنصر بزاوية معينة. |
@keyframes | بتصمم فيها حركة معقدة من البداية للنهاية. |
animation | بتربط الحركة اللي صممتها بالعنصر بتاعك. |
إزاي تخلي الموقع يغير شكله حسب حجم الشاشة؟
| الكود | بيعمل إيه؟ |
|---|---|
@media (max-width: 600px) | أي كود هنا هيتنفذ "فقط" على شاشات الموبايل. |
view-port | تاج في الـ HTML بيعرف المتصفح حجم الشاشة الحقيقي. |
flex-wrap: wrap | بتخلي العناصر تنزل تحت بعض لو المساحة صغرت. |
بدل ما تكتب كود اللون في كل حتة، احفظه في متغير واستخدمه باسمه:
| الكود | الشرح |
|---|---|
:root { --main-color: #39ff14; } | تعريف لون نيون أساسي للموقع كله. |
color: var(--main-color); | استدعاء اللون في أي مكان. |
نصيحة محترفين: استخدمي المتغيرات عشان لو حبيتي تعملي "Dark Mode" و "Light Mode" بضغطة واحدة.
تنسيقات بتظهر بس في حالات معينة:
| الحالة | بتحصل إمتى؟ |
|---|---|
:hover | لما المستخدم يقف بالماوس على العنصر. |
:active | لما المستخدم يدوس (Click) على العنصر. |
:focus | لما المستخدم يضغط جوه خانة كتابة (Input). |
:nth-child() | لو عايز تلون مثلاً الصفوف الزوجية بس في جدول. |
لو الـ Flexbox بيوزع في اتجاه واحد، الـ Grid بيقسم الصفحة لصفوف وأعمدة زي الجدول بالظبط:
| الخاصية | بتعمل إيه؟ |
|---|---|
display: grid; | بتحول العنصر لشبكة (Grid Container). |
grid-template-columns | بتحدد عدد الأعمدة وعرض كل واحد (مثلاً: 1fr 1fr 1fr). |
grid-template-rows | بتحدد عدد الصفوف وطولها. |
grid-area | بتسمي مكان معين في الشبكة عشان تحط فيه عنصر. |
place-items: center; | توسطن كل حاجة جوه الشبكة "طول وعرض" في سطر واحد. |
إزاي تتحكم في مكان العنصر بالملي، وتخليه يطير فوق عناصر تانية:
| النوع | بيعمل إيه بالبلدي؟ |
|---|---|
static | المكان الطبيعي (ده العادي بتاع أي عنصر). |
relative | بيتحرك بالنسبة لمكانه الأصلي، بس بيفضل سايب مكانه فاضي. |
absolute | بيطير ويتحرك بالنسبة لأقرب أب له نوعه relative. |
fixed | بيتلزق في الشاشة وما بيتحركش حتى لو عملت سكرول (زي القايمة). |
sticky | بيمشي معاك في السكرول لحد نقطة معينة وبعدين يثبت. |
الظلال هي اللي بتخلي العنصر "بارز" وشكله 3D:
| الخاصية | الشرح |
|---|---|
box-shadow | ظل للصندوق (يمين، تحت، درجة التمويه، اللون). |
text-shadow | ظل للكلام نفسه، بيخليه شيك جداً في العناوين. |
inset | كلمة بتتحط جوه الـ box-shadow بتخلي الظل "لجوه" مش لبره. |
مش محتاجة فوتوشوب! تقدري تعدلي الصور بالكود بس:
| الفلتر | بيعمل إيه؟ |
|---|---|
filter: blur(5px); | بيخلي الصورة "مزغللة". |
filter: grayscale(100%); | بيخلي الصورة أبيض وإسود تماماً. |
filter: brightness(1.5); | بيزود إضاءة الصورة. |
filter: drop-shadow(); | بيعمل ظل "حقيقي" حوالين شكل العنصر (حتى لو صورة شفافة). |
لما العناصر تركب فوق بعضها، مين اللي يبان قدام ومين ورا؟
| القيمة | القاعدة |
|---|---|
z-index: 1; | العنصر اللي رقمه أكبر هو اللي بيطلع قدام. |
z-index: -1; | بيخلي العنصر يستخبى ورا العناصر التانية (زي خلفية). |
⚠️ **ملحوظة:** الـ z-index مش بيشتغل غير لو العنصر واخد position (غير الـ static).
لو عندك صورة وعايزة تحطيها في مربع من غير ما تتمط أو شكلها يبوظ:
| القيمة | النتيجة |
|---|---|
object-fit: cover; | الصورة بتملى المربع وبتقص الزيادة (أحسن اختيار). |
object-fit: contain; | الصورة بتبان كلها جوه المربع حتى لو في فراغات. |
aspect-ratio | بتحدد نسبة الطول للعرض (مثلاً 16/9) عشان الصور ما تبوظش. |
بدل اللون السادة، ممكن تدمجي كذا لون مع بعض:
| النوع | الكود |
|---|---|
linear-gradient | ألوان ماشية في خط مستقيم (بالطول أو العرض). |
radial-gradient | ألوان طالعة من المركز لبره على شكل دايرة. |
لو الكلام كتير على المربع بتاعه، نتصرف إزاي؟
| الحل | بيعمل إيه؟ |
|---|---|
overflow: hidden; | بيقص أي حاجة تخرج بره حدود المربع. |
overflow: scroll; | بيظهر "سكرول بار" عشان نقدر نشوف الباقي. |
text-overflow: ellipsis; | بيحط 3 نقط (...) لو الكلام زاد عن السطر. |
بتعرف المستخدم إنه ممكن يدوس هنا أو إن المكان ده للقراءة بس:
cursor: pointer; | شكل "الإيد" (للزراير واللينكات). |
cursor: not-allowed; | علامة "ممنوع" (للحاجات اللي مش شغالة). |
cursor: wait; | علامة "التحميل" (لو في حاجة بتحمل). |
عشان تغيري شكل النقط أو الأرقام في القائمة:
list-style: none; | بتشيل النقط خالص (مهمة جداً للقايمة). |
list-style-type | تغير النقط لدايرة، مربع، أو أرقام رومانية. |
::marker | خاصية جديدة بتخليكي تلوني النقطة نفسها بعيد عن الكلام. |
بدل ما تقولي margin-right، قولي margin-inline-end عشان الكود يظبط نفسه لو الموقع اتقلب من عربي لإنجليزي لوحده!
| القديم | الجديد (الذكي) |
|---|---|
margin-left / right | margin-inline-start / end |
padding-top / bottom | padding-block-start / end |
width / height | inline-size / block-size |
لو عندك نص طويل وعايزة تقسميه لأعمدة زي الجرائد والمجلات:
| الخاصية | بتعمل إيه؟ |
|---|---|
column-count | بتحدد عدد الأعمدة (مثلاً 3 أعمدة). |
column-gap | المسافة الفاضية بين الأعمدة. |
column-rule | بيعمل خط فاصل بين الأعمدة (زي الـ border). |
أهم خاصية عشان مقاساتك ما تبوظش لما تزودي الـ Padding أو الـ Border:
| القيمة | التأثير |
|---|---|
content-box | ده العادي (الـ padding بيزود حجم العنصر الكلي). |
border-box | الاختيار الذكي (الـ padding بياكل من جوه العنصر والمقاس بيفضل ثابت). |
نصيحة: دايماً بنحط box-sizing: border-box; لكل العناصر في أول الكود.
عشان تعملي Slider أو معرض صور "بيثبت" على الصورة بالظبط لما المستخدم يقلب:
| الكود | الوظيفة |
|---|---|
scroll-snap-type: x mandatory; | بتتحط للأب عشان تجبر السكرول يثبت بالعرض. |
scroll-snap-align: center; | بتتحط للإبن عشان يثبت في نص الشاشة بالظبط. |
بدل ما المربعات تكون مملة، تقدري تقصي العنصر على شكل مثلث، دايرة، أو حتى نجمة:
| الدالة | النتيجة |
|---|---|
clip-path: circle(); | بيحول المربع لدايرة. |
clip-path: polygon(); | بترسمي أي شكل هندسي عن طريق نقط (X, Y). |
إزاي تخلي الماوس "يخترق" عنصر وما يحسش بيه، أو تمنعي الضغط على زرار معين:
| القيمة | الشرح بالبلدي |
|---|---|
pointer-events: none; | العنصر بيبقى زي "الخيال"، الماوس بيعدي من فوقه ولا كأنه موجود. |
user-select: none; | بتمنع المستخدم إنه يحدد (Highlight) الكلام بالماوس. |
عشان تخلي الخلفية ثابتة والكلام هو اللي بيتحرك فوقيها (تأثير Parallax):
background-attachment: fixed; | الخلفية بتثبت مكانها والكلام بيتزحلق فوقيها. |
background-size: cover; | عشان الخلفية تملى المكان مهما كان حجم الشاشة. |
تقدري تخلي الـ CSS يرقم العناوين أو العناصر لوحده من غير ما تكتبي أرقام يدوي:
| الخاصية | الوظيفة |
|---|---|
counter-reset | بتصفي العداد (بتبدأ من صفر). |
counter-increment | بتزود العداد واحد كل ما يقابل العنصر. |
content: counter(); | بتعرض الرقم جوه الـ ::before أو ::after. |
لو عايزة تخلي الكلام يتكتب بالطول (من فوق لتحت) زي المواقع اليابانية أو التصاميم المودرن:
| القيمة | التأثير |
|---|---|
writing-mode: vertical-rl; | الكتابة بتبقى راسية من اليمين للشمال. |
direction: rtl; | الاتجاه الأساسي (يمين لشمال) للعربي. |
الـ Outline بيفرق عن الـ Border إنه مش بياخد مساحة من حجم العنصر (ما بيزقش جيرانه):
outline-style | شكل الخط (solid, dashed, dotted). |
outline-offset | بيعمل مسافة فاضية بين الـ Border والـ Outline. |
نفس فكرة الـ Blending في الفوتوشوب، بتخلي العنصر يتفاعل مع ألوان اللي تحته:
mix-blend-mode: multiply; | بيدمج الألوان الغامقة. |
mix-blend-mode: screen; | بيدمج الألوان الفاتحة. |
mix-blend-mode: overlay; | بيعمل تداخل قوي بين العنصر والخلفية. |
بدل ما تحسب الطول والعرض يدوي، الخاصية دي بتخلي العنصر يحافظ على نسبته (زي 16:9) مهما كبر أو صغر:
| الكود | الاستخدام |
|---|---|
aspect-ratio: 16 / 9; | مثالي للفيديوهات عشان ما تظهرش "ممطوطة". |
aspect-ratio: 1 / 1; | بيخلي العنصر مربع مثالي (مفيد جداً لصور البروفايل). |
تعبت من لون الـ Checkbox الأزرق بتاع الويندوز؟ الخاصية دي بتغير ألوان عناصر الفورم بكلمة واحدة:
accent-color: #39ff14; | بتغير لون الـ Checkboxes والـ Radio buttons للون النيون بتاعك. |
ده السر وراء شكل الـ Control Center في الآيفون، بيخلي الخلفية "مزغللة" تحت العنصر:
backdrop-filter: blur(10px); | بيعمل زغللة للحاجة اللي "ورا" العنصر مش العنصر نفسه. |
background: rgba(255,255,255,0.1); | لازم تستخدم لون شفاف معاه عشان التأثير يبان. |
أقوى دالة في الـ CSS بتخلي الخط يكبر ويصغر معاك بس بحدود (أدنى وأقصى حجم):
| المعادلة | الشرح |
|---|---|
font-size: clamp(1rem, 5vw, 3rem); | الخط مش هيقل عن 1rem ولا هيزيد عن 3rem، وبينهم هيتحرك حسب حجم الشاشة. |
لو عندك عناصر واخدة z-index ومبوزة ترتيب الصفحة، الخاصية دي بتعمل "حدود" للطبقات:
isolation: isolate; | بتجبر العناصر اللي جوه الصندوق إنها تترتب مع بعضها بس، وما تتدخلش في ترتيب باقي الصفحة. |
بدل ما تكتب top, right, bottom, left كل واحدة في سطر لما تعمل absolute، استخدم دي:
inset: 10px; | بتعوض عن الـ 4 اتجاهات في كلمة واحدة. |
inset: 0 20px; | صفر فوق وتحت، و20 يمين وشمال. |
عشان تخلي حتى "العصاية" اللي بتنور وتطفي جوه الـ Input لونها نيون:
caret-color: var(--neon); | بتغير لون مؤشر الكتابة للون اللي تحبه. |
زي الـ Layer Mask في الفوتوشوب، بتخلي الصورة تظهر جوه شكل معين (زي لوجو أو كلمة):
mask-image | بتحط صورة (أبيض وإسود) تحدد فين يظهر وفين يختفي. |
mask-size: contain; | عشان الماسك يظبط على قد العنصر. |
لما تدوس على لينك يوديك لآخر الصفحة، بلاش يروح "قفش"، خليه يروح بنعومة:
scroll-behavior: smooth; | بتخلي الصفحة تتزحلق بنعومة لما تدوس على اللينكات الداخلية. |
لو بتعمل لعبة أو تطبيق موبايل وعايز تمنع المتصفح إنه يعمل Zoom أو Scroll لما المستخدم يلمس الشاشة:
touch-action: none; | بتوقف كل حركات اللمس الافتراضية عشان تبرمجها إنت بالـ JS. |
touch-action: pan-y; | بتسمح بالسكرول بالطول بس وتمنع العرض. |
الـ CSS بقى بيعرف يحسب! مش محتاج تحسب المقاسات يدوي:
| الدالة | الاستخدام |
|---|---|
calc(100% - 50px) | بتطرح أو تجمع مقاسات مختلفة (نسبة مع بكسل). |
min() / max() | بتختار أصغر أو أكبر قيمة من مجموعة قيم. |
round() | بتقرب الأرقام لأقرب رقم صحيح (خاصية حديثة). |
عشان تعمل تأثير "المراية" تحت الصور أو الكلام:
-webkit-box-reflect: below 2px; | بيعمل انعكاس للعنصر تحت نفسه بمسافة 2 بكسل. |
linear-gradient | ممكن تدمجها مع الانعكاس عشان يختفي بالتدريج. |
لو الصورة واخدة object-fit: cover، الخاصية دي بتحدد أنهي جزء يفضل باين:
object-position: top center; | بيخلي التركيز على الجزء العلوي من الصورة (مهم للصور الشخصية). |
object-position: 20% 80%; | بتحرك الصورة يمين وشمال وبالطول بالملي. |
عايز الكلام يلف حوالين صورة دائرية مش مربعة؟ دي الخاصية اللي بتعمل كده:
shape-outside: circle(); | بتخلي الكلام يلف حوالين شكل الدائرة بمرونة. |
shape-margin | بتعمل مسافة بين الكلام والشكل اللي بيلف حواليه. |
أقوى خاصية نزلت في CSS مؤخراً، بتخليك تنسق "الأب" لو جواه "إبن" معين:
div:has(img) | لو الـ div جواه صورة، اديله تنسيق خاص. |
form:has(:invalid) | لو الفورم فيها غلط، لون بروازها أحمر. |
اختصار عبقري بيجمع بين align-content و justify-content:
place-content: center; | بيوسطن كل حاجة جوه الـ Grid أو الـ Flex في سطر واحد. |
عشان لما المستخدم يحدد نص بالماوس، اللون ما يبقاش أزرق تقليدي:
::selection { background: var(--neon); color: black; } | بتغير لون خلفية النص المتحدد. |
عشان تخلي أول حرف في المقال كبير وواخد مساحة كذا سطر:
initial-letter: 3; | بيخلي أول حرف يمتد بطول 3 سطور. |
إزاي تتعامل مع المسافات اللي بين الكلمات أو النزول لسطر جديد:
nowrap | بيمنع الكلام إنه ينزل سطر جديد مهما كان طويل. |
pre-line | بيحترم المسافات والسطور اللي إنت كاتبها في الـ HTML. |
لو عندك صور صغيرة وعايز تكبرها من غير ما تكسل (Pixelated):
image-rendering: pixelated; | بيحافظ على حواف الصورة حادة جداً (مثالي لألعاب الـ 8-bit). |
لو عندك صورتين خلفية لبعض أو صورة ولون، إزاي يندمجوا:
background-blend-mode: screen; | بيخلي الألوان تتداخل بشكل سينمائي. |
لو في كلمة طويلة جداً (زي لينك) ممكن تخرج بره الصندوق، دي بتكسرها:
break-all | بيكسر الكلمة في أي حرف عشان تفضل جوه الصندوق. |
keep-all | بيمنع الكسر تماماً. |
عشان تدي شياكة للعناوين وتخلي الكلام يتنفس:
letter-spacing: 2px; | بيبعد الحروف عن بعضها (للإنجليزي أكتر). |
word-spacing: 5px; | بيبعد الكلمات عن بعضها. |
لما تعمل سكرول لآخر "بوكس"، الصفحة كلها بتتهز، دي بتمنع الحركة دي:
overscroll-behavior: contain; | بيخلي السكرول يفضل جوه العنصر وما يأثرش على الصفحة كلها. |
أشكال تانية غير النقط التقليدية:
upper-roman | أرقام رومانية كبيرة (I, II, III). |
arabic-indic | الأرقام العربية (١، ٢، ٣). |
armenian | حروف أرمينية. |
إزاي تعمل لون شفاف باستخدام كود الـ Hex:
#FF000080 | أول 6 أرقام للون، وآخر رقمين للشفافية (80 يعني 50%). |
تخلي العنصر ياخد مقاسه بالظبط على قد اللي جواه:
width: max-content; | بيفرد العنصر لآخره عشان الكلام ما ينزلش سطر جديد. |
width: min-content; | بيصغر العنصر لأقل عرض ممكن يخليه شايل الكلام. |
إنت ممكن تعمل شكل "بيضة" أو "نقطة مياه" بالبوردير بس:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; | بيخلي كل زاوية ليها نصف قطر مختلف بالطول وبالعرض. |
خاصية سحرية بتخلي المتصفح ما يحملش الحاجات اللي مش باينة في الشاشة عشان يسرع الموقع:
content-visibility: auto; | بتحسن أداء الـ Rendering جداً في الصفحات الطويلة. |
لو عايز تخلي العنصر "شفاف" للماوس، يعني يدوس على اللي وراه:
pointer-events: none; | كأن العنصر خيال، الماوس هيدوس على الحاجة اللي تحته مباشرة. |
بدل الشكل التقليدي للمتصفح، تقدر تلون وتصغر شريط التمرير:
| الخاصية | الوظيفة |
|---|---|
scrollbar-width: thin; | بيخلي الشريط رفيع وشيك (للمتصفحات الحديثة). |
scrollbar-color: var(--neon) black; | بيلون الشريط والمنطقة اللي وراه بكلمة واحدة. |
لو عندك وصف طويل وعايز تظهر منه أول سطرين بس وتحط (...) في الآخر:
display: -webkit-box; | لازم تستخدم دي عشان الخاصية تشتغل. |
-webkit-line-clamp: 2; | بتحدد عدد السطور اللي تظهر قبل ما النص يتقص. |
overflow: hidden; | عشان تقص الكلام الزيادة. |
بيخلي الحروف الـ Small شكلها زي الـ Capital بس بحجم صغير (شيك جداً في العناوين):
font-variant: small-caps; | بيحول النص لشكل المخطوطات القديمة. |
الـ gap مابقاش للـ Grid بس، بقى بيشتغل في الـ Flexbox وفي الـ Multi-column كمان:
row-gap | بيعمل مسافة بين الصفوف بس. |
column-gap | بيعمل مسافة بين الأعمدة بس. |
لو الصورة مرفوعة بالمقلوب، الـ CSS يقدر يعدلها تلقائياً بناءً على بيانات الكاميرا:
image-orientation: from-image; | بيعدل الصورة لوحدها (خاصية منقذة للمشاريع الكبيرة). |
لما تعمل 3D Flip للعنصر، هل عايز تشوف ظهره ولا يختفي؟
hidden | بيخفي العنصر أول ما يلف (مهم جداً في كروت الـ Flashcards). |
بيتحكم في المسافة الدقيقة بين كل حرفين حسب شكلهم (زي المصممين المحترفين):
font-kerning: normal; | بيستخدم بيانات الخط الأصلية لتوزيع الحروف بدقة. |
طرق تانية غير repeat و no-repeat:
space | بيكرر الصورة وبيسيب مسافات بينهم عشان يملى المكان من غير ما يقصها. |
round | بيمط الصورة شوية عشان يكررها عدد مرات صحيح من غير ما تتقص. |
عشان تعرف المستخدم إنه داس على اللينك ده قبل كده:
a:visited { color: #888; } | بتغير لون اللينك بعد ما يتفتح مرة. |
لو عندك كود CSS مش عايز يتنفذ بسبب كود تاني، دي بتجبر المتصفح ينفذه:
color: red !important; | بتخلي الخاصية دي "أقوى" من أي كود تاني لنفس العنصر. |
لو عايز تمنع المستخدم إنه يحدد النص أو ينسخه من موقعك:
user-select: none; | بتخلي النص "غير قابل للتحديد". |
أحدث خاصية في CSS، بتخلي العنصر يغير شكله حسب حجم "أبوه" مش حسب حجم الشاشة:
@container (min-width: 400px) | كود ثوري بيخلي العناصر ذكية جداً في أي مكان تتحط فيه. |
بيفرق عن box-shadow إنه بيعمل ظل حوالين الشكل الحقيقي (حتى لو مثلث أو PNG شفاف):
filter: drop-shadow(5px 5px 10px black); | بيعمل ظل احترافي جداً للصور واللوجوهات. |
بيخلي العنصر كأنه مش موجود بس "ولاده" بيفضلوا موجودين وبيأثروا في الـ Layout:
display: contents; | مفيد جداً لما تحب تشيل تأثير الـ Div الأب في الـ Flexbox. |
كلمة سحرية بتخلي اللون يتبع لون النص تلقائياً:
border: 2px solid currentColor; | لو غيرت لون النص، لون البرواز هيتغير معاه لوحده. |
لما تدوس على لينك داخلي، العنوان ما يلزقش في سقف الشاشة:
scroll-margin-top: 100px; | بيسيب مسافة فوق العنوان لما تروحله عن طريق لينك. |
عشان الكلام ما يختفيش والموقع بيحمل الخطوط الخاصة:
font-display: swap; | بيظهر خط النظام العادي لحد ما الخط بتاعك يحمل، عشان اليوزر ما يستناش. |
عشان تمنع المستخدم إنه يكبر أو يصغر خانة الكتابة (Textarea) ويبوظ التصميم:
resize: none; | بيشيل علامة التكبير من الركن. |
resize: vertical; | بيسمح بالتكبير بالطول بس. |
بيتحكم في الفراغ بين الكلمات وبعضها:
word-spacing: 10px; | بيوسع المسافات في العناوين الكبيرة. |
بتقول للمتصفح إن العنصر ده هيتحرك أو يتغير، فبيجهزه عشان الأنيميشن يكون ناعم:
will-change: transform; | بتخلي الـ Animation أسرع بكتير وما يقطعش. |
عدل في الـ CSS وشوف إزاي الـ HTML بيتغير فوراً.
1. أنهي خاصية بنستخدمها عشان نبعد العناصر عن بعضها من "بره"؟
2. إيه الطريقة الصح عشان نربط ملف CSS خارجي؟
3. لو عايز تخلي العنصر "شفاف" بنسبة 50%، تستخدم:
4. خاصية display: flex بتستخدم أساساً لـ:
5. الـ padding بيعمل مساحة فاضية فين بالظبط؟