ברגע שתתחיל לבנות דפי אינטרנט עם HTML, תתחיל לעבוד עם שינוי גודל. כדי להפוך את האתר שלך להיראות כמו שאתה רוצה שזה ייראה, סביר להתאים עיצוב שאתה או מעצב אחר יצרו, אתה רוצה לשנות את גודל הטקסט באתר זה, כמו גם אלמנטים אחרים בדף. כדי לעשות זאת אתה יכול להתחיל לחפש תג "גודל" HTML, אבל תוכלו למצוא אותו במהירות.
תג גודל HTML אינו קיים ב- HTML. במקום זאת, כדי להגדיר את הגודל של גופנים, תמונות או פריסה אתה צריך להשתמש גיליונות סגנון מדורגים. למעשה, כל שינוי ויזואלי שאתה צריך לעשות לטקסט של האתר או אלמנט אחר צריך להיות מטופל על ידי CSS! HTML הוא מבנה בלבד.
התג הקרוב ביותר לתג גודל HTML הוא תג הגופן הישן, שאכן כלל תכונה בגודל. שים לב שתג זה בוטל בגרסאות הנוכחיות של HTML, וייתכן שהדפדפנים לא יתמכו בו בעתיד! אתה לא רוצה להשתמש בתג הגופן ב- HTML שלך! במקום זאת, עליך ללמוד CSS כדי לשנות את רכיבי HTML שלך ולסגנון את דף האינטרנט שלך בהתאם.
גודל גופן
גופנים הם לטעון את הדבר הכי קל לגודל עם CSS. מורסו מאשר רק שינוי גודל הטקסט, עם CSS אתה יכול להיות ספציפי יותר על טיפוגרפיה באתר שלך. ניתן להגדיר את גודל הגופן, את הצבע, את מעטפת, את המשקל, את המוביל, ועוד. עם תג הגופן, באפשרותך להגדיר רק את הגודל ולאחר מכן רק כמספר ביחס לגודל ברירת המחדל של הדפדפן, אשר שונה עבור כל לקוח.
כדי להגדיר את הפיסקה לגודל פונט של 12pt, השתמש במאפיין סגנון גופן:
h3 {font-size = 24px; }סגנון זה יגדיר את גודל הגופן של רכיבי headiing3 24 פיקסלים. תוכל להוסיף את זה לגיליון סגנונות חיצוני וכל ה- H3 של האתר שלך ישתמשו בסגנון זה.
אם ברצונך להוסיף סגנונות טיפוגרפיים נוספים לטקסט שלך, תוכל להוסיף אותם לכלל CSS זה:
h3 {font-size: 24px; צבע: # 000; משקל גופני: רגיל; }זה לא רק להגדיר את גודל הגופן עבור H3s, זה היה גם להגדיר את הצבע לשחור (וזה מה הקסדצימלי קוד של # 000 אמצעי) וזה היה לקבוע את המשקל "נורמלי". כברירת מחדל, דפדפנים מציגים כותרות 1-6 כטקסט מודגש, כך שסגנון זה יחליף את ברירת המחדל הזו ובעצם "לא מודגש" בטקסט.
גדלי תמונה
תמונות יכולות להיות מסובכות להגדרת גדלים מכיוון שבאמת תוכל להשתמש בדפדפן כדי לשנות את גודל התמונה. כמובן, שינוי גודל התמונות עם הדפדפן הוא רעיון רע כי זה גורם לדפים לטעון לאט יותר דפדפנים לעתים קרובות לעשות עבודה גרועה של שינוי גודל, מה שהופך את התמונות להיראות רע. במקום זאת, אתה צריך להשתמש בתוכנה גרפיקה כדי לשנות את גודל התמונות ולאחר מכן לכתוב את הגודל האמיתי של HTML בדף האינטרנט שלך.
שלא כמו גופנים, תמונות יכולות להשתמש ב- HTML או CSS כדי להגדיר את הגודל. אתה מגדיר את רוחב התמונה ואת הגובה. כאשר אתה משתמש ב- HTML, באפשרותך להגדיר רק את גודל התמונה בפיקסלים. אם אתה משתמש ב- CSS, באפשרותך להשתמש במדידות אחרות, כולל סנטימטרים, סנטימטרים ואחוזים. ערך אחרון זה, אחוזים, הוא מאוד שימושי כאשר התמונות שלך צריך להיות נוזל, כמו באתר אינטרנט תגובה.
כדי להגדיר את גודל התמונה באמצעות HTML, השתמש בתכונות הגובה והרוחב של תג img. לדוגמה, תמונה זו תהיה 400x400 פיקסלים מרובעים:
height = "400" width = "400" alt = "image" />כדי להגדיר את גודל התמונה באמצעות CSS, השתמש במאפייני סגנון הגובה והרוחב. הנה אותה תמונה, באמצעות CSS כדי להגדיר את הגודל:
style = "height: 400px; width: 400px;" alt = "image" />גדלי פריסה
הגודל הנפוץ ביותר שאתה מגדיר בפריסה הוא רוחב, והדבר הראשון שתצטרך להחליט הוא האם להשתמש בפריסת רוחב קבועה או באתר אינטרנט בעל יכולת תגובה. במילים אחרות, האם אתה מתכוון להגדיר את רוחב כמספר המדויק של פיקסלים, אינץ 'או נקודות? או שאתה מתכוון להגדיר את רוחב הפריסה להיות גמישה באמצעות ems או אחוזים? כדי להגדיר את גודל הפריסה שלך, אתה משתמש בתכונות רוחב וגובה של CSS בדיוק כפי שהיית עושה בתמונה.
רוחב קבוע:
style = "width: 600px;">רוחב נוזלי:
style = "width: 80%;">כאשר אתה מחליט על הרוחב עבור הפריסה שלך, עליך לזכור את רוחב הדפדפן השונה שהקוראים שלך עשויים להשתמש ואת המכשירים השונים שבהם הם משתמשים. זו הסיבה אתרי אינטרנט תגובה , אשר יכול לשנות את הפריסה שלהם ואת גודל מבוסס על מכשירים שונים וגדלים מסך, הוא הסטנדרט הטוב ביותר היום.