אפשרויות בעיצוב טקסט CSS
-
- אפשרויות בעיצוב טקסט CSS
כדי להכניס את הפונקציות של CSS בתוך דף HTML ניתן לעשות כך:
כך שמה שאחריstyle=ה"color:red"הוא עיצוב CSS.
<p style="color:red">This is text 1</p>רשימת הפונקציות:
color:redצבע הכתב (כאן מוגדר אדום) [שימו לב! שכל הצבעים בCSS יכולים להיות
מיוצגים גם בשם וגם באמצעות קוד HEX#1045e3] למידע נוסףbackground-color:blueצבע רקע הכתב (כאן מוגדר כחול)font-family:calibriסוג הפונט (כאן מוגדר קליברי)font-size:22.0ptגודל הכתב (כאן מוגדר 22) [שימו לב! שאפשר גם להגדיר באחוזים 100%]text-align:centerמיקום הטקסט ביחס לעמוד (כאן מוגדר במרכז) [left-לשמאל (ברירת מחדל),right-לימין,justify-יישר לשני הצדדים]text-decoration:underlineקובע עם יהיה קו על הטקסט (overline- מעל הטקסט,underline- קו תחתון,line-through- קו חוצה ע"ג הטקסט,none- כפייה של ללא קו כלל)text-transform: capitalizeהאם להשתמש באותיות גדולות/קטנות (רלוונטי לאנגלית, כאן מוגדר אות ראשונה בכל מילה גדולה) [uppercase-הכל באותיות גדולות,lowercase-הכל באותיות קטנות,none-לביטול כפוי של אלמנט מורש]font-style:normalנטיית טקסט (כאן מוגדר רגיל,oblique- נטוי,italic- זה ג"כ נטוי אבל מעט שונה)Font-weight:boldעיבוי הכתב (במקום מילים, אפשר להשתמש במספרים: 100 הוא העדין ביותר, 900 הוא המודגש ביותר. 400 הוא הערך הרגיל, ו-700 הוא הערך הקבוע כ-bold)Line-height:2ptגובה השורה (לתכונה זו אפשר לתת ערכים מספריים ואחוזים).font-stretch:תכונה זו מאפשרת להציג את האותיות מכווצות או רחבות (הערכים הניתנים להגדרה,Ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded) [התכונה אינה נתמכת בחלק מהדפדפנים]ניתן ליצור עימי קשר 8140hp+mt@gmail.com
- אפשרויות בעיצוב טקסט CSS
-
- אפשרויות בעיצוב טקסט CSS
כדי להכניס את הפונקציות של CSS בתוך דף HTML ניתן לעשות כך:
כך שמה שאחריstyle=ה"color:red"הוא עיצוב CSS.
<p style="color:red">This is text 1</p>רשימת הפונקציות:
color:redצבע הכתב (כאן מוגדר אדום) [שימו לב! שכל הצבעים בCSS יכולים להיות
מיוצגים גם בשם וגם באמצעות קוד HEX#1045e3] למידע נוסףbackground-color:blueצבע רקע הכתב (כאן מוגדר כחול)font-family:calibriסוג הפונט (כאן מוגדר קליברי)font-size:22.0ptגודל הכתב (כאן מוגדר 22) [שימו לב! שאפשר גם להגדיר באחוזים 100%]text-align:centerמיקום הטקסט ביחס לעמוד (כאן מוגדר במרכז) [left-לשמאל (ברירת מחדל),right-לימין,justify-יישר לשני הצדדים]text-decoration:underlineקובע עם יהיה קו על הטקסט (overline- מעל הטקסט,underline- קו תחתון,line-through- קו חוצה ע"ג הטקסט,none- כפייה של ללא קו כלל)text-transform: capitalizeהאם להשתמש באותיות גדולות/קטנות (רלוונטי לאנגלית, כאן מוגדר אות ראשונה בכל מילה גדולה) [uppercase-הכל באותיות גדולות,lowercase-הכל באותיות קטנות,none-לביטול כפוי של אלמנט מורש]font-style:normalנטיית טקסט (כאן מוגדר רגיל,oblique- נטוי,italic- זה ג"כ נטוי אבל מעט שונה)Font-weight:boldעיבוי הכתב (במקום מילים, אפשר להשתמש במספרים: 100 הוא העדין ביותר, 900 הוא המודגש ביותר. 400 הוא הערך הרגיל, ו-700 הוא הערך הקבוע כ-bold)Line-height:2ptגובה השורה (לתכונה זו אפשר לתת ערכים מספריים ואחוזים).font-stretch:תכונה זו מאפשרת להציג את האותיות מכווצות או רחבות (הערכים הניתנים להגדרה,Ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded) [התכונה אינה נתמכת בחלק מהדפדפנים] - אפשרויות בעיצוב טקסט CSS
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}