Scribd
Upload
12 views12 pages

IT - Cascading Style Sheets

Uploaded by

elabani1980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views12 pages

IT - Cascading Style Sheets

Uploaded by

elabani1980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

‫‪Cascading Style Sheets‬‬

‫‪Part 1 : Concepts of CSS‬‬


‫الجزء االول (مفاهيم)‬

‫كلية تقنيات الحاسوب بنغازي‬


‫أ‪.‬خالد العباني‬
‫مفهوم ‪:Css‬‬

‫• هي اختصار لكلمة ‪Cascading Style Sheets‬‬

‫• هي لغة تصميم تحدد شكل ملف ‪ ،HTML‬فهي تهتم بالخطوط‪،‬‬


‫األلوان‪ ،‬الهامش‪ ،‬والعرض واالرتفاع‪ ،‬صورة خلفية الموقع‪ ،‬وكيفية‬
‫تحديد المساحات وأشياء أخرى كثيرة‬

‫• هي مجموعه من التعليمات تكتب في ملف مستقل او بداخل صفحة‬


‫‪ HTML‬ومن خالل تلك التعليمات نستطيع التعديل في مظهر الصفحة‬
‫العام دون اي عناء ‪.‬‬
‫• مثال ‪ :‬لديك موقع يحتوي على اكثر من ‪ 20‬صفحة وإذا اردت ان‬
‫تقوم بتعديل في الخط او مظهر الجدول من خالل التغيير في االلوان‬
‫او حجم الصورة الخ ‪ ,‬بدون ‪ CSS‬سوف تحتاج الدخول الى كل‬
‫صفحة وتقوم بتعديل ما تريده ‪ ,‬ومن هنا جاء دور ‪.Css‬‬
‫فوائد ‪CSS‬‬
‫• تستطيع تعديل عدد كبير من صفحات ‪ H T M L‬من ملف واحد فقط ‪.‬‬
‫• وضع شكل ‪ ,‬لكل بيئة عمل ‪ ,‬كجهاز الكمبيوتر ‪ ,‬والكمبيوتر‬
‫الكفي ‪ ,‬وغيرها ‪.‬‬
‫• تقليل حجم ملف ‪ , HTML‬وذلك بعرض الخصائص في ملف‬
‫‪ Css‬مستقل ‪.‬‬
‫• التحكم الكامل بالنصور والصور وااللوان والجداول مع السرعه‬
‫في التعديل بوقت قصير ‪.‬‬
‫• إمكانية أكبر وأدق للتحكم بتفاصيل التصميم‪.‬‬
‫• ‪ HTML‬يمكن أن تستخدم بشكل خاطئ إلضافة تصميم‬
‫للمواقع‪ ،‬لكن ‪ CSS‬توفر المزيد من الخيارات وهي أكثر دقة‬
‫وعملية‪ ،‬وهي مدعومة من قبل المتصفحات الرئيسية مثل‬
‫متصفح االكسبلور ‪ ,‬جوجل ‪ ,‬سفاري الخ‪.‬‬
. HTML ‫ في صفحات‬CSS ‫طرق تفعيل‬
• There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
‫طرق تفعيل ‪ CSS‬في صفحات ‪. HTML‬‬
‫• هناك ثالثة طرق او اشكال لكتابة وتفعيل ‪ Css‬في صفحات ال ‪: HTML‬‬
‫• الطريقى االولى ‪:‬‬
‫‪Internal Style Sheet‬‬
‫• باستخدام خاصية ‪ style‬وتوضع في قسم ‪ HEAD‬في صفحة ‪HTML‬‬

‫•‬ ‫>‪<html‬‬
‫•‬ ‫>‪<head‬‬
‫•‬ ‫>"‪<style type="text/css‬‬
‫•‬ ‫‪code........‬‬
‫•‬ ‫>‪</style‬‬
‫•‬ ‫>‪</head‬‬
‫•‬ ‫>‪<body‬‬
‫•‬ ‫>‪</body‬‬
‫•‬ ‫>‪</html‬‬
:‫• مثال اخر‬
• <html>
• <head>
• <title>Example<title>
• <style type="text/css">
• body {background‐color: #FF0000;}
• </style>
• </head>
• <body>
• <p>This is a red page</p>
• </body>
• </html>
‫الطريقة الثانية ‪:‬‬
‫الملف الخارجي ‪External Css file‬‬
‫• يتم في هذه الطريق انشاء ملف امتداد ‪ Css‬ويتم من خالله كتابة التعليمات‬
‫الخاصة ‪.‬‬
‫• ثم يتم استدعاء الملف الخارجي من خالل صفحة ‪. HTML‬‬
‫•‬ ‫>‪<html‬‬
‫•‬ ‫>‪<head‬‬
‫•‬ ‫>‪<link rel="stylesheet" type="text/css" href="style.css" /‬‬
‫•‬ ‫>‪</head‬‬
‫•‬ ‫>‪<body‬‬
‫•‬ ‫>‪</body‬‬
‫•‬ ‫>‪</html‬‬
‫ عن طريق المفكرة وعند حفظ الملف يجب ان يكون‬Css ‫ قم بأنشاء ملف‬: ‫• مثال‬
CSS ‫امتداد الملف‬
: ‫• اكتب الكود التالي‬
• body {
• background‐color: #FF0000;
•}
: HTML ‫• في صفحة‬
• <html>
• <head>
• <title>My document</title>
• <link rel="stylesheet" type="text/css" href="style.css" />
• </head>
• <body>
• <h1>My first stylesheet</h1>
• </body>
• </html>
: ‫الطريقة الثالثة‬
Inline style: ‫• ان يكتب الستايل داخل الوسم‬
• <HTML>
• <head>
• <title>Example<title>
• </head>
• <body style="background‐color: #FF0000;">
• <p>This is a red page</p>
• <h1 style="color:blue;margin-left:30px;">This is a Heading.</h1>
• </body>
• </html>
•
: ‫• مالحظة‬
‫• بقية تفاصيل المادة تم التطرق له في المحاضرة بتفصيل والتي تم توضيح مجموعة من‬
Background , ( ‫ الخصائص التي تم دراستها هي‬, CSS ‫الخصائص تستخدم في لغة ال‬
‫ على الطالب ان يتحصل على تلك الخصائص في مقرر المادة‬, )Fonts, Texts, Links
.Introduction to internet programming (CN381) CSS Tutorial

• color Font family


• Background color Font style
• Background image Font variant
Font weight
• Background repeat
Font size
• Background attachment
• Background position

Text align link


Text decoration Visited
Text transform Active
hover

You might also like