أليس من الممتع أن تعطي لصفحات موقعك التصميم الذي تستحقه؟
هذا صحيح ولكن كيف تستطيع عمل ذلك؟
لكي تعطي لموقعك المظهر والتنسيق المناسب هذا الدرس سوف يكون عباره عن مقدمه بسيطه لـcss وزلاحقا سوف تتعلم كل شئ عن css بالتفصيل لذا اعتبر هذا الدرس كفاتح شهيه لتعلم الـ css
كما تعرف أن html تقوم بعمل هيكله كامله للموقع أما css تقوم بعمل تنسيق علي الموقع وإضافة تاثيرات لإبراز وتجميل شكل التنسيق
علي سبيل المثال يمكنك تغيير حجم الخط ونوعه ولونه لفقره معينه
[html] <p style="font-size:20px;">This is typed in size 20px</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 20px</p>
[/html]
والذي سوف يكون كذلك
This is typed in size 20px
This is typed in Courier
This is typed in Courier size 20px
استخدامنا css لتغيير نوع الخط وحجم الخط (مع أمر font – size). ونقوم بالفصل بين نوع الخط وحجمه بفاصله منقوطه.
والميزه في css انها تمكنك من عمل تغيير كامل علي كل النصوص الموجوده في الصفحه ككل ومره واحده :
[html] <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>
[/html]
وهذا هو التصميم كما تري في الأسفل
My first CSS page
My first CSS page
Welcome to my first CSS page
Here you can see how CSS works
في هذا المثل قمنا بفتح كود الستايل لكي نخبر المتصفح بأننا سوف نقوم بغضافة كود 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.html.net/logo.png’);">
[/html]
وهذا هو التنفيذ كما تري
Green text
Heading on blue background
هل لا يوجد في css سوي تغيير حجم ونوع الخط والألوان والخلفية؟
إلى جانب التصميم وتفاصيله مثل الألوان وأنواع الخطوط الخ، يمكن أيضا أن تستخدم CSS للتحكم في الإعداد وعرض الصفحة (الهوامش، المحاذاة، العرض والطول وغيرها). من خلال تنظيم العناصر المختلفة مع CSS تصبح قادرا على تخطيط صفحاتك بأناقة ودقة
[html] <p style="padding:25px;border:1px solid red;">I love CSS</p>[/html]
وهذا هو التنفيذ
I love CSS
يمكنك أيضا أن تقوم بإزاحه عنصر إلى اليمين أو إلى اليسار. المثال التالي يوضح هذا المبدأ :
[html]<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>
مع الخاصية position يمكنك وضع أي عنصر في المكان الذي تريده في صفحتك :
[html] <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />[/html]
اضغط هنا
في المثال السابق قمت بتغيير وضع الصورة 50 بكسل من الأسفل و 10 بكسل من اليمين في المتصفح. ولكن يمكنك أنكما تريد. محاولة إعطائها.
وكما قلت لك في بدايه التدوينه هذه مجرد فاتح شهيه ل css وسوف أقوم بتناول باقي التفاصيل في المواضيع التاليه بإذن الله
