التصميم (CSS):
التصميم (CSS)
أليس من الجميل أن تتمكن من إعطاء صفحتك التصميم الذي تستحق؟بالتأكيد، لكن كيف؟
لكي تعطي صفحتك تصميماً يجب أن تستخدم تقنية (CSS)، في هذا الدرس ستجد مقدمة قصيرة إلى CSS، لكن بعد ذلك يمكنك تعلم كل شيء حول CSS بتفاصيلها في درس CSS. لذلك اعتبر هذا الدرس مجرد فاتحة شهية.هي النصف الآخر للغة HTML، ففي كتابة الصفحات، كل واحدة لها وظيفة محددة: تهتم بالجوانب الصعبة "هيكلية الصفحة ومحتوياتها" بينما CSS تعطي لمسة أنيقة (التصميم).
مثال 1:
<p style="font-size:20px;">This is typed in size 20</p>
<p style="font-family:courier;">This is typed in Courier</p>
<p style="font-size:20px; font-family:courier;">This is typed in Courier size 20</p>
This is typed in size 20
This is typed in Courier
This is typed in Courier size 20
style
لتحديد نوع الخط الذي نريد استخدامه من خلال أمر font-family
) وحددنا حجم الخط من خلال أمر font-size
)، لاحظ كيف أن الفقرة الأخيرة استخدامنا الأمرين معاً وقمنا بالفصل بينمها من خلال فاصلة منقوطة.يبدو أن هذا يحتاج إلى الكثير من العمل؟
إحدى أذكى خصائص CSS أنها تمكنك من إدارة التصميم من خلال مكان واحد، فبدلاً من اسخدام خاصيةstyle
لكل وسم، يمكن أن تخبر المتصفح مرة واحدة كيف يجب أن يعرض التصميم لكل النصوص في الصفحة:مثال 2:
<html>
<head>
<title>My first CSS page</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>My first CSS page</h1>
<h2>Welcome to my first CSS page</h2>
<p>Here you can see how CSS works </p>
</body>
</html>
- عرض المثال
<style type="text/css">
الذي يخبر المتصفح بأنك تستخدم CSS.في المثال كل العناوين في الصفحة ستستخدم خطاً من نوع Arial بحجم 30 بكسل، وكل العناوين الجانبية ستستخدم خطاً من نوع Courier بحجم 15 بكسل، وبقية النصوص في الفقرات ستستخدم خطاً من نوع "Times New Roman" بحجم 8 بكسل.
هناك خيار آخر يتمثل في كتابة CSS في ملف منفصل، لأنك تستطيع من خلال ملف منفصل أن تتحكم بتصميم صفحات عدة مرة واحدة، هذا أسلوب ذكي إذا أردت أن تغير حجم الخط ونوعه في موقع كبير يحوي مئات أو آلاف الصفحات، لكننا لن نشرح ذلك الآن، يمكنك أن تتعلم هذا في درس CSS.
ماذا يمكن أن أفعل أيضاً في CSS؟
يمكن أن تستخدم لأكثر من مجرد تحديد نوع وحجم الخط، فمثلاً يمكنك أن تحدد ألوان عناصر الصفحة ولون الخلفية، هنا بعض الأمثلة لتجرب عليها::
<p style="color:green;">Green text</p>
<h1 style="background-color: blue;">Heading on blue background</h1>
<body style="background-image: url('http://www.GOOGLE.COM/logo.png');">
هل CSS مجرد ألوان وخطوط؟
بجانب التصميم وتفاصيله مثل الألوان والخطوط، يمكنها أن تتحكم بتنسيق الصفحة وطريقة عرض البيانات فيها (الهوامش، المحاذاة، العرض والطول ... إلخ)، بتنظيم مخلف العناصر باستخدام CSS، يمكنك أن تصمم صفحتك بأسلوب أنيق دقيق.مثال 3:
<p style="padding:25px;border:1px solid red;">I love CSS</p>
I love CSS
float
يمكن للعنصر أن يوضع إلى يسار أو يمين الصفحة في المثال التالي سنعرض هذا المبدأ:مثال 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
في المثال عنصر واحد "الصورة" قمنا بوضعها إلى اليسار والعنصر الآخر "النص" قم بتغطية المساحة الفارغة حولها.
باستخدام الأمر position
، يمكنك أن تضع العنصر في مكان محدد حيث تريد له أن يكون في الصفحة:مثال 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
- عرض مثال
0 التعليقات:
إرسال تعليق