CSS / قواعد كتابة كود

الناشر :كودا فوكس -

CSS / قواعد كتابة كود CSS

الشكل العام لكود CSS

بدايةً، نحن نضيف كود CSS بهدف تحسين طريقة ظهور الأشياء الموجودة في صفحة الويب والتي تم إضافتها بالأساس بواسطة وسوم HTML. من هذا المنطلق فإنه عند كتابة كود CSS يجب تحديد الوسم المراد التعديل على تصميمه ومن ثم تمرير الخصائص والقيم المناسبة له.

CSS / قواعد كتابة كود


الآن إذا كانت الصفحة تحتوي على وسم <h1> يمكنك إضافة خصائص CSS له كالتالي:

📋 

h1 {
    color: blue;
    text-align: center;
}

h1 - هو إسم الوسم الذي سيتم إضافة خصائص CSS له ويسمى Selector.

color - يسمى Property وهو الخاصية المراد تعديلها للشيء.

blue - هو قيمة الخاصية ويسمى Value.

color: blue; - الخاصية وقيمتها مع بعض يقال لهما Declaration.

يجب وضع فاصلة منقوطة ; بعد كل خاصية يتم تعريفها. آخر خاصية يمكنك عدم وضع فاصلة منقوطة لها ولكننا ننصحك بأن تضعها دائماً لأن هذا المتعارف عليه.

أين تكتب كود CSS

يوجد ثلاث أساليب يمكنك إتباعها حتى تضيف كود CSS في صفحات الويب سنذكرها لك تباعاً.

1- أسلوب Inline CSS

أي وسم تضيفه في الصفحة يمكنك إضافة الخاصية style له وتمرر كود الـ CSS لها كقيمة بشكل مباشر.

📋 

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<h1 style="color:blue; text-align:center;">Hello World!</h1>
	</body>
</html>

2- أسلوب Internal CSS

يمكنك إضافة الوسم <style> في أي مكان تريده في الصفحة وداخله تستطيع إضافة خصائص CSS لأي وسم موجود في الصفحة.

📋 

<!DOCTYPE html>
<html>
	<head>
		<style>
h1 {
    color: blue;
    text-align: center;
} 
		</style>
	</head>
	<body>
		<h1>Hello World!</h1>
	</body>
</html>

3- أسلوب External CSS

يمكنك وضع كود الـ CSS بداخل ملف إمتداده .css ومن ثم تضمينه في الصفحة بواسطة الوسم <link> والذي يجب وضعه في الوسم <head>.

📋
style.css

h1 {
    color: blue;
    text-align: center;
}
📋
index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- الذي يحتوي كود التصميم style.css هنا قمنا بتضمين الملف -->
        <link rel="stylesheet" href="/tutorials/css/syntax/style.css">
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

أفضل طريقة لكتابة كود CSS

بشكل عام، أي موقع تبنيه عليك تخصيص ملف إمتداده .css لتضع فيه كل خصائص CSS التي ستستخدمها في صفحات الموقع ومن ثم تضمن هذا الملف بها بواسطة الوسم <link>.

إضافة كود CSS بشكل مباشر لوسوم HTML من خلال الخاصية style أمر يمكنك فعله إن كنت بحاجة للتعديل على تصميم وسم محدد استخدمته بشكل خاص في أحد الصفحات.

إضافة كود CSS في الصفحة بواسطة الوسم <style> أمر تحتاجه في بعض الأحيان إن كنت بحاجة لتخصيص طريقة ظهور شيء في الصفحة وتريد إضافة خصائص لا يمكنك إضافتها بواسطة الخاصية style.

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال