שלום לכולם
בפרקים הקודמים למדנו על קובץ הhtml שהוא השלד של התוכנה.
היום נלמד על קובץ הcss שמשמש לעיצוב המסמך.
ראשית ניצור קובץ חדש, נקרא לו style ונשנה את הסיומת שלו לcss.
נשים אותה באותה תיקיה של קובץ הhtml.
בכדי לקשר את קובץ הcss למסמך ה-html נצטרך להוסיף את הקישור בין תגיות הhead במסמך הhtml שלנו.
ישום:
קובץ HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<p>hello world</p>
</body>
</html>
שמרו את הקובץ.
שימו לב בקישור לכתוב href ולא herf זה באמת מבלבל...
עכשיו נפתח את קובץ הCSS דרך עורך הטקסט שיש לכם.
אופן כתיבת הקובץ הוא כך: כותבים תחילה את שם התגית שרוצים לערוך לדוגמא p ואז כותבים סוגריים מסולסלים {}.
בתוך סוגרים אלו נכתוב את העיצוב שאנחנו רוצים כך:
ראשית נכתוב את סוג השינוי שאנחנו רוצים לעשות לדוגמא color ואחריהם נכתוב את הסימן
:
לאחר מכן נכתוב את הערך של שינוי עצמו כגון yellow ולאחר מכן נכתוב את הסימן
;
ישום:
קובץ CSS
p {
color: yellow;
}
ובעצם הגדרנו שלתגית הp יהיה צבע-color צהוב-yellow.
ישנם עוד מלא עיצובים נכתוב בקצרה חלק מהם:
צבעים
Background-color = צבע הרקע
color = צבע הטקסט
והערך שנכתוב הינו את שם הצבע: blue, yellow, green black, וכן הלאה...
גודל
Width = רוחב
height = גובה
font-size = גודל הפונט והערך שנכתוב יהיה הגודל בפיקסלים כגון 100px, 200px, 300px או במקרה של הפונט 10px 12px 14px וכן הלאה...
עיצוב הגופן
font-style = עיצוב הפונט
הערך שנכניס בו זה יהיה לדוגמא italic שיעשה את הכתב מוטה...
font-weight = עובי הפונט ונכתוב בו bold עבה או light דק
border = מסגרת טקסט
כדי להפעיל אותה נכתוב את הערך solid.
ישום קוד:
קובץ css
p {
Font-style: italic;
Font-weight: bold;
Font-size: 20px;
}
h1 {
color: yellow;
background-color: black;
height: 50px;
width: 200px;
Border: solid;
border-radius: 20px;
}
עכשיו תשמרו את הקובץ
פתחו את קובץ הhtml בדפדפן
אם הכל יעבוד כשורה הדף צריך להיראות כך:
[image: 1770213773039-6ec2a2a5-0021-4e43-b9f4-d54de4e3fb4d-image.png]
(אם יש בעיות תעברו שלב שלב.. הקבצים באותה תיקיה? הקישור כתוב כמו שצריך ובמקום שצריך?)
גם פה הוספתי עוד חלק שלא כתבתי לפני...
מי יכול לנחש מה הוא עושה? תגיבו כאן בתגובות...
בהצלחה!!!!!!!!
נ.ב. הפתרון מהמסך הקודם הוא שכדי ליישר את המסמך לימין כתבתי
<html dir="rtl">
כמו כן הוספתי שני תגיות <br> שזה בעצם גורם לאלמנט הבא לרדת שורה...
 { 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}