למד לשפר את המראה של אתר האינטרנט שלך
למידה כיצד ליצור צורות עם CSS היא דרך מצוינת לשפר את המראה של האתר שלך. טפסי HTML הם ניתן לטעון בין הדברים המכוערים ביותר על דפי אינטרנט. הם לעתים קרובות משעמם תועלתני לא מציעים הרבה בסגנון של סגנון.
עם CSS, זה יכול להשתנות. שילוב CSS עם תגי טופס מתקדמים יותר יכול לספק כמה צורות נאה.
שנה את הצבעים
בדיוק כמו עם טקסט, אתה יכול לשנות את צבעי הקדמה ואת הרקע של אלמנטים טופס.
דרך קלה לשנות את צבע הרקע של אלמנט כמעט כל צורה היא להשתמש במאפיין צבע הרקע על תג הקלט. לדוגמה, קוד זה מחיל צבע רקע כחול (# 9cf) על כל האלמנטים.
קלט {
צבע רקע: # 9cf;
צבע: # 000;
}
כדי לשנות את צבע הרקע של אלמנטים מסוימים בלבד, פשוט הוסף textarea ובחר לסגנון. לדוגמה:
קלט, textarea, בחר {
צבע רקע: # 9cf;
צבע: # 000;
}
הקפד לשנות את צבע הטקסט אם אתה הופך את צבע הרקע כהה. צבעים מנוגדים עוזרים להפוך את רכיבי הטופס לקריאים יותר. לדוגמה, טקסט על צבע רקע אדום כהה הוא הרבה יותר קל לקרוא אם צבע הטקסט הוא לבן. לדוגמה, קוד זה מציב טקסט לבן על רקע אדום.
קלט, textarea, בחר {
צבע רקע: # c00;
צבע: #fff;
}
אתה יכול אפילו לשים צבע רקע על תג טופס עצמו. זכור כי תג טופס הוא רכיב בלוק , כך צבע ממלא את כל המלבן, לא רק את המיקומים של האלמנטים.
אתה יכול להוסיף רקע צהוב אלמנט בלוק כדי להפוך את האזור להתבלט, כך:
טופס {
צבע רקע: #ffc;
}
הוסף גבולות
כמו עם צבעים, אתה יכול לשנות את הגבולות של אלמנטים טופס שונים. ניתן להוסיף גבול יחיד סביב הטופס כולו. הקפד להוסיף ריפוד, או אלמנטים בטופס שלך יהיה תקוע ממש ליד הגבול.
הנה דוגמה לקוד עבור גבול שחור בגודל 1 פיקסלים עם 5 פיקסלים של ריפוד:
טופס {
border: 1px solid # 000;
ריפוד: 5px;
}
אתה יכול לשים גבולות סביב יותר מאשר רק את הטופס עצמו. לשנות את הגבול של פריטים קלט כדי להפוך אותם להתבלט:
קלט {
border: 2px dashed # c00;
}
היזהר כאשר אתה שם גבולות על תיבות קלט כפי שהם נראים פחות כמו תיבות קלט אז, וכמה אנשים לא מבינים שהם יכולים למלא את הטופס.
שלב תכונות סגנון
על ידי הצבת אלמנטים טופס שלך עם מחשבה וכמה CSS, אתה יכול להגדיר טופס יפה להסתכל כי משלים את העיצוב ואת הפריסה של האתר שלך.