بناء موقع على شبكة الانترنت من الصفر الجزء الثاني: إضافة أسلوب (CSS).
ماذا سنفعل
في هذا الفصل سوف:
- إنشاء ورقة أنماط CSS للموقع
- إضافة ارتباط إلى ورقة الأنماط في صفحاتنا
إنشاء ورقة النمط المغلق
في المجلد demoweb، إنشاء ملف جديد باسم site.css.
ضع التعليمات البرمجية التالية داخل ملف CSS:
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}ملف CSS فوق يحدد أنماط لاستخدامها في:
- العنصر الأساسي HTML <BODY>
- عنصر HTML مع معرف = "الرئيسي"
- العنصر عنوان HTML <H1>
تحرير الصفحة الرئيسية
في المجلد demoweb، تحرير index.html والملفات.
تغيير محتوى الملف إلى ما يلي:
index.html و
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
انها محاولة لنفسك » الصفحة الرئيسية أعلاه، هو نسخة من الصفحة الرئيسية من الفصل السابق.
واضاف لدينا تصل إلى ورقة أنماط، و<div معرف = "الرئيسي"> عنصر لتحديد و"قسم" في المحتوى.
يتم وضع علامة على التغييرات الأحمر.
تحرير الصفحة عن
لاستكمال العمل الخاص بك، تفعل نفس التغييرات في about.html.
1. إضافة ارتباط إلى ورقة الأنماط.
2. إضافة <div معرف = "الرئيسي"> العنصر.
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
انها محاولة لنفسك » اقرأ أكثر
قراءة المزيد عن CSS في منطقتنا دروس CSS .