تعلم لغة css: التحكم في تصميم الاستمارات forms
تعتبر الاستمارات من بين الأشساء التي يكرهها الناس على الإنترنت، خاصة عندما تكون طويلة ويجب ملئها كلها بالمعلومات. لذلك سنرى في هذا الدرس طريقة التحكم في تصميمها وجعلها أجمل لتسهيل ملئها للمتصفحين.
في الدرس الماضي رأينا طريقة التحكم في الجداول Tables، ويمكنكم مراجعة اللائحة الكاملة لدورة تصميم المواقع بلغتي html و css.
طريقة إظهار الاستمارات تختلف من متصفح لآخر، ولكن يمكن جعل الشكل واحد باستعمال لغة css.
font-size: حجم خط النص
color: لون النص
background-color: لون الخلفية
border: الخط المحيط
border-radius: حجم دوران الرؤوس الجانبية
:focus: شكل المربع عند النقر عليه
:hover: شكل المربع عند المرور عليه بفأرة الحاسوب
background-image: صورة خلفية
كود css:
في الدرس الماضي رأينا طريقة التحكم في الجداول Tables، ويمكنكم مراجعة اللائحة الكاملة لدورة تصميم المواقع بلغتي html و css.
طريقة إظهار الاستمارات تختلف من متصفح لآخر، ولكن يمكن جعل الشكل واحد باستعمال لغة css.
مربع ادخال النص Text Input
الطثر من القواعد المستعملة رايناها سابقا وهي كالتالي:font-size: حجم خط النص
color: لون النص
background-color: لون الخلفية
border: الخط المحيط
border-radius: حجم دوران الرؤوس الجانبية
:focus: شكل المربع عند النقر عليه
:hover: شكل المربع عند المرور عليه بفأرة الحاسوب
background-image: صورة خلفية
كود css:
input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input:focus {
background-color: #ffffff;
border: 1px solid #b1e1e4;}
input#email {
background-image: url("images/email.png");}
لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله