فواصل » دروس،13،دروه،المظهر،html،شروحات،برمجه http://portal.fwasl.com Wed, 16 Oct 2019 18:49:35 +0000 ar hourly 1 https://wordpress.org/?v=3.9.40 الدرس 13:المظهر في html http://portal.fwasl.com/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-13%d8%a7%d9%84%d9%85%d8%b8%d9%87%d8%b1-%d9%81%d9%8a-html/ http://portal.fwasl.com/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-13%d8%a7%d9%84%d9%85%d8%b8%d9%87%d8%b1-%d9%81%d9%8a-html/#comments Wed, 04 Jan 2012 20:25:40 +0000 http://www.portal.fwasl.com/?p=5395 أليس من الممتع أن تعطي لصفحات موقعك التصميم الذي تستحقه؟

هذا صحيح ولكن كيف تستطيع عمل ذلك؟

لكي تعطي لموقعك المظهر والتنسيق المناسب هذا الدرس سوف يكون عباره عن مقدمه بسيطه لـ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 لا تستخدم فقط لتغيير نوع وحجم الخط وإنما تستخدم أيضا لتغيير الخلفيه ولن الخط

[html]

<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>

[/html]

مع الخاصية position يمكنك وضع أي عنصر في المكان الذي تريده في صفحتك :

[html] <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
[/html]

اضغط هنا 
في المثال السابق قمت بتغيير وضع الصورة 50 بكسل من الأسفل و 10 بكسل من اليمين في المتصفح. ولكن يمكنك أنكما تريد. محاولة إعطائها.
وكما قلت لك في بدايه التدوينه هذه مجرد فاتح شهيه ل css وسوف أقوم بتناول باقي التفاصيل في المواضيع التاليه بإذن الله

]]> http://portal.fwasl.com/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-13%d8%a7%d9%84%d9%85%d8%b8%d9%87%d8%b1-%d9%81%d9%8a-html/feed/ 0