CSS חיצוני
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 8 מתוך 76.
CSS חיצוני הוא שיטה להוספת סגנונות CSS למסמך HTML על ידי הצבתם בקובץ CSS נפרד וקישור הקובץ למסמך ה-HTML באמצעות התג <link>. הגישה הזו מאפשרת לך להחיל את אותם סגנונות על כמה דפי HTML, וכך להקל על התחזוקה והעדכון של עיצוב האתר שלך. CSS חיצוני אידיאלי לפרויקטים גדולים שבהם עקביות ויעילות הן חיוניות.
כך משתמשים ב-CSS חיצוני:
- יוצרים קובץ CSS (למשל,
styles.css) עם כללי ה-CSS שלך:
body {
background-color: lightblue;
}
p {
color: blue;
font-size: 16px;
} 2. קשרו את קובץ ה-CSS למסמך ה-HTML שלכם על ידי הוספת תג <link> במקטע <head>:
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>בדוגמה הזו, התג <link> מחבר את הקובץ styles.css למסמך ה-HTML. המאפיין rel מציין את הקשר בין מסמך ה-HTML לקובץ המקושר (גיליון סגנונות), והמאפיין href מציין את הנתיב לקובץ ה-CSS.
אתגר
קלניתנו לך קובצי HTML ו-CSS (index.html ו-styles.css), הוסף תגית link בקובץ ה-HTML כדי לחבר בין הקבצים ולהוסיף את הסגנונות לקובץ ה-HTML!
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין