يمكن أن تستخدم لأكثر من مجرد تحديد نوع وحجم الخط، فمثلاً يمكنك أن
تحدد ألوان عناصر الصفحة ولون الخلفية، هنا بعض الأمثلة لتجرب عليها:
|
<p style="color:green;">Green text</p>
<h1 style="background-color:
blue;">Heading on blue background</h1>
<body style="background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIbHULVT7zlyojcCtMTZ4sL5X2QTDUKlRvHHJ6VSI6UESF6DJmstZ-Shlx2mRVkIXUjISasxnDwbAybJMv40zcuZ8SqYj-x8FfErXLOrWYIbcxWreHQuwArI36KvBuCA2fyWygWu9d06o/s1600/css.png');">
|
جرب أن تدخل في المثال في بعض الصفحات التي قمت بإنشائها، وجرب ذلك
بالطريقتين، كما ترى في المثال أو بوضع
CSS في رأس
الصفحة
هل CSS مجرد ألوان وخطوط؟
بجانب التصميم وتفاصيله مثل الألوان والخطوط، يمكنها أن تتحكم
بتنسيق الصفحة وطريقة عرض البيانات فيها (الهوامش، المحاذاة، العرض والطول
... إلخ)، بتنظيم مخلف العناصر باستخدام CSS، يمكنك أن تصمم صفحتك بأسلوب أنيق دقيق.
مثال 1:
|
<p style="padding:25px;border:1px
solid red;">محترفي الحماية</p>
|
سيظهر بهذا الشكل في متصفحك
محترفي الحماية
باستخدام أمر float يمكن للعنصر أن يوضع إلى يسار أو يمين الصفحة في المثال التالي سنعرض
هذا المبدأ:
مثال 2:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p> CSS تعني باللغة الإنجليزية Cascading Style
Sheets)) ومعنها باللغة العربية (صفحات
الأنماط الانسيابية)لكي تعطي صفحتك تصميماً يجب أن تستخدم تقنية (CSS)، في هذا الدرس ستجد مقدمة قصيرة إلى CSS، لكن بعد ذلك يمكنك تعلم كل شيء حول CSS بتفاصيلها. لذلك
اعتبر هذا الدرس مجرد فاتحة شهية.
...</p>
|
سيظهر بهذا الشكل في متصفحك
CSS تعني باللغة الإنجليزية Cascading Style Sheets)) ومعنها باللغة العربية (صفحات الأنماط الانسيابية)لكي تعطي صفحتك تصميماً يجب أن تستخدم تقنية (CSS)، في هذا الدرس ستجد مقدمة قصيرة إلى CSS، لكن بعد ذلك يمكنك تعلم كل شيء حول CSS بتفاصيلها. لذلك اعتبر هذا الدرس مجرد فاتحة شهية. ...
في المثال عنصر واحد "الصورة" قمنا بوضعها إلى اليسار
والعنصر الآخر "النص" قم بتغطية المساحة الفارغة حولها.
باستخدام الأمر position،
يمكنك أن تضع العنصر في مكان محدد حيث تريد له أن يكون في الصفحة:
مثال 3:
|
<img
src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;"
/>
|
في المثال الصور وضعت على بعد 50 بكسل من الأسفل و10 بكسل من يمين
المتصفح، لكن يمكنك أن تضعها بالضبط حيث تشاء، جرب، ستجد أن الأمر سهل ومثير.
جميل، لكن هل هي سهلة؟
لا يمكنك تعلم
CSS في عشر
دقائق، وكما ذكرنا أعلاه، هذا الدرس هو مجرد مقدمة قصيرة، لاحقاً يمكنك أن تتعلم
المزيد بنفسك في درس CSS.
0 التعليقات :
إرسال تعليق