ما هي الـ CSS ؟
⇓ما هي الـ CSS؟ الدليل الشامل لتنسيق وتصميم صفحات الويب⇓
- في عالم تطوير الويب، تعتبر *CSS* اختصارًا لـ * Cascading Style Sheets*، وهي اللغة المسؤولة عن تصميم وتنسيق صفحات الويب.
- إذا كانت لغة* HTML* هي الهيكل العظمي للموقع، فإن *CSS* هي الروح التي تمنحه الجمال والألوان والتنسيق المناسب. بفضل * CSS* أصبح من الممكن
- تحويل النصوص الجامدة إلى صفحات ويب جذابة واحترافية تجذب المستخدم وتمنحه تجربة سلسة ومريحة.
في هذه المقالة سنوضح بشكل تفصيلي ما هي *CSS*، أهميتها، مميزاتها، وكيفية استخدامها مع *HTML* لبناء مواقع متكاملة، مع التركيز على أهم الكلمات المفتاحية التي تساعد على الظهور في محركات البحث.
*1.ما هي CSS وهل هي لغة ولا لء ؟
*CSS* هي لغة تنسيق تستخدم للتحكم في شكل ومظهر صفحات الويب. فهي المسؤولة عن:
- **التحكم في الألوان والخلفيات.
- **تحديد أحجام الخطوط وأنواعها.
- **تنظيم المسافات بين العناصر (Margin & Padding).
- **التحكم في أبعاد العناصر (Width & Height).
- **تصميم التخطيطات Layouts باستخدام خصائص مثل Flexbox و Grid.
- وبالتالي، فإن CSS تمثل الأداة الأساسية لكل مطور ويب يريد تحويل صفحة HTML بسيطة إلى
- تصميم احترافي متجاوب يعمل على جميع الأجهزة.
*2.العلاقة بين HTML وCSS
- الكثير من المبتدئين يتساءلون: هل تكفي HTML وحدها لبناء المواقع؟
الإجابة: لا.
لغة HTML مسؤولة عن إنشاء الهيكل الأساسي للصفحة مثل العناوين، الفقرات، والصور. بينما تأتي - CSS لتمنح هذا الهيكل الشكل والتنسيق. على سبيل المثال:
- باستخدام HTML يمكنك كتابة فقرة نصية.
- بينما باستخدام CSS يمكنك جعل النص ملونًا، تكبير حجمه، وضبط مكانه داخل الصفحة.
ولهذا فإن HTML وCSS هما أساس تصميم المواقع ولا يمكن الاستغناء عن أحدهما.
*3.مميزات استخدام CSS
تقدم لغة CSS عددًا كبيرًا من المزايا التي تجعلها الخيار الأفضل لتنسيق صفحات الويب:
1.فصل التنسيق عن المحتوى:
تسمح CSS بفصل التنسيق عن كود HTML، مما يسهل التعديل والصيانة.
2.إعادة الاستخدام:
يمكن استخدام ملف CSS واحد لتنسيق عدة صفحات في الموقع.
3.توفير الوقت والجهد:
بدلاً من كتابة التنسيقات في كل صفحة، يكفي استدعاء ملف CSS خارجي.
4.التصميم المتجاوب (Responsive Design):
من خلال CSS يمكن تصميم مواقع تتكيف مع مختلف الأجهزة مثل الهواتف، الأجهزة اللوحية، والحواسيب.
5.إضافة تأثيرات بصرية:
مثل الانتقالات (Transitions)، التحويلات (Transforms)، والرسوم المتحركة (Animations) التي تمنح الموقع مظهرًا عصريًا.
*4.أنواع استخدامات CSS
يمكن تطبيق خصائص CSS بثلاث طرق رئيسية:
Inline CSS: كتابة التنسيق مباشرة داخل وسم HTML.
Internal CSS: كتابة الأكواد داخل وسم <style> في صفحة HTML نفسها.
External CSS: وهو الأكثر شيوعًا، حيث يتم كتابة جميع الأكواد في ملف مستقل بامتداد .css وربطه بالصفحة باستخدام وسم <link>.
هذا مثال بال HTML , CSS في قمة الاحترافية :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MM | WW</title>
<link rel="stylesheet" href="Assets/css/style.css">
</head>
<body>
<section>
<ul>
<li data-text="Sun" > <a href="#">Sun</a> </li>
<li data-text="Mercery" > <a href="#">Mercery</a> </li>
<li data-text="Venus" > <a href="#">Venus</a> </li>
<li data-text="Earth" > <a href="#">Earth</a> </li>
<li data-text="Jupiter" > <a href="#">Jupiter</a> </li>
<li data-text="saturn" > <a href="#">saturn</a> </li>
<li data-text="Uranus" > <a href="#">Uranus</a> </li>
<li data-text="Neptune" > <a href="#">Neptune</a> </li>
</ul>
</section>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
background-image: linear-gradient(#01012e, #240019);
height: 100vh;
font-family: system-ui;
}
section{
background-image: url(../img/stars1.png);
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
section ul li{
list-style: none;
margin: 16px 0;
text-align: center;
}
section ul:hover li a{
opacity: 0;
}
section ul li a{
text-decoration: none;
font-size: 20px;
font-weight: 500;
width: 120px;
letter-spacing: 4px;
background-color: darkblue;
border-radius: 50px;
padding: 6px 15px;
text-transform: uppercase;
color: white;
transition: .5s;
display: inline-block;
}
section ul li a:hover{
transform: scale(1.5);
background-color: darkmagenta;
opacity: 1;
}
ul li::after{
content: attr(data-text);
color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
font-size: 80px;
text-transform: uppercase;
font-weight: 900;
opacity: 0;
letter-spacing: 50px;
transition: .5s;
}
ul li:hover:after{
opacity: 0.5;
letter-spacing: 5px;
}
ul li::before{
content: '';
width: 60px;
height: 60px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 100%);
border-radius: 50px;
box-shadow: 0 0 80px orangered;
opacity: 0;
transition: .5s;
}
ul li:hover:before{
opacity: 1;
}
*5.أهمية CSS في تصميم المواقع
مع ازدياد المنافسة على الإنترنت، أصبح تصميم واجهة المستخدم (UI) من أهم عوامل نجاح أي موقع. وهنا يظهر دور CSS في:
- تحسين تجربة المستخدم (UX).
- جعل المواقع أكثر سرعة وسلاسة.
- منح الموقع هوية بصرية مميزة.
- دعم محركات البحث (SEO) عبر تصميم منظم وسهل التصفح.
فكلما كان تصميم الموقع أنيقًا ومتجاوبًا مع مختلف الأجهزة، زادت فرص ظهوره في نتائج البحث وتحقيق تفاعل أكبر مع الزوار.
النهاية
إذن، ما هي CSS؟ هي ببساطة لغة تنسيق وتجميل تجعل مواقع الويب أكثر جاذبية وتنظيمًا. باستخدامها مع HTML يمكن بناء مواقع عصرية، متجاوبة، واحترافية. سواء كنت مبتدئًا في تعلم تطوير الويب أو مطورًا محترفًا، فإن إتقان لغة CSS يعتبر خطوة أساسية نحو التميز في مجال تصميم المواقع.
إذا كنت ترغب في احتراف Front-End Development فعليك الجمع بين HTML وCSS كأساس، ثم الانتقال لاحقًا إلى JavaScript لإضافة التفاعلية.
باختصار: CSS ليست مجرد أداة، بل هي لغة الفن والإبداع في عالم الويب.
مصادر لتعلم ال CSS :
حقوق النشر © 2025. جميع الحقوق محفوظة.
يحظر نسخ أو إعادة نشر هذا المحتوى دون إذن مسبق من إدارة الموقع.
