دليل أساسي CSS

نموذج الصندوق CSS

دليل أساسي CSS3

دليل مرجعي CSS

قواعد CSS @

تنسيق CSS (تنسيق الصفحة)

تنسيق CSSسهل التصميم. يمكننا استخدام تنسيق CSS لتصميم صفحات الويب الخاصة بنا، مثل الصفحة الرئيسية، الاتصال بنا، عننا، إلخ.

هناك ثلاث طرق لتصميم تنسيق صفحات الويب:

تنسيق HTML Div+CSSالآن مستخدم على نطاق واسع.
جداول HTMLالآن ببطء، ليس مشهوراً.
إطار عمل HTMLالآن مستبعد.

تنسيق CSS يمكن أن يحتوي على رأس الصفحة، قدم الصفحة، نافذة اليسار، نافذة اليمين والنص الرئيسي. دعونا نرى مثالاً بسيطاً لتنسيق CSS.

مثال تنسيق CSS

مثال

!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
.header{margin:-8px　-8px　0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
.container{width:100%}　　
.left{width:15%;float:left;}　　
.body{width:65%;float:left;background-color:pink;padding:5px;}　　
.right{width:15%;float:left;}　　
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
</style>　　
</head>　　
<body>　　
<div　class="header"><h2>دروس أساسية　oldtoolbag.com</h2></div>　　
　　
<div　class="container">　　
<div　class="left">　　
<p>الشريط الجانبي الأيسر</p>　　
</div>　　
<div　class="body">　　
<h1>النص الرئيسي</h1>　　
<p>محتويات الصف هنا</p><p>محتويات الصف هنا</p><p>محتويات الصف هنا</p>　　
<p>محتويات الصف هنا</p><p>محتويات الصف هنا</p><p>محتويات الصف هنا</p>　　
<p>محتويات الصف هنا</p><p>محتويات الصف هنا</p><p>محتويات الصف هنا</p>　　
<p>محتويات الصف هنا</p><p>محتويات الصف هنا</p><p>محتويات الصف هنا</p>　　
<p>محتويات الصف هنا</p>　　
</div>　　
<div　class="right">　　
<p>الشريط الجانبي الأيمن</p>　　
</div>　　
</div>　　
　　
<div　class="footer">　　
<p>القاعدة</p>　　
</div>　
</body>　　
</html>

اختبر وأرى‹/›

نتائج الإخراج:

دروس أساسية oldtoolbag.com

الشريط الجانبي الأيسر

النص الرئيسي

محتويات الصف هنا

الشريط الجانبي الأيمن

القاعدة

مثال كامل CSS محددات CSS (المحاكي)