CSS - טקסט/פונט

3.2.1 טקסט
3.2.2 פונטים

3.2.1 טקסט

מאפייני טקסט משפיעים על איך שהטקסט נראה

שינויי צורת הצגת הטקסט

עושים זאת ע"י המאפיין display

ערכים אפשריים:

  • block
  • inline
  • list-item
  • none

לדוגמא תוך שימוש ב-CSS הבא

name
{
;display:block
/* text as block,new line after text */

}

processor
{
;display:none
/*the text doesn't shown*/
}

שימו לב להעלמותו של הטקסט באמצעות none

נקבל את המסמך הבא ב- XML מסמך- XML שינויי צורת הצגת הטקסט

שינויי צבע

עושים זאת ע"י המאפיין color

לדוגמה תוך שימוש ב-CSS הבא

name
{
color:red
}

processor
{
color:blue
}

harddisk
{
color:pink
}

screen
{
color:purple
}

נקבל את המסמך הבא ב- XML מסמך - XML שינויי צבע

שינוי מרווח בין אותיות בטקסט

עושים זאת ע"י המאפיין letter-spacing

normal length (a number) 

לדוגמה תוך שימוש ב-CSS הבא

name
{
;display:block
letter-spacing: normal
}

processor
{
;display:block
letter-spacing:4
}

harddisk
{
;display:block
display-spacing:8
}

screen
{
;display:block
letter-spacing:12
}

נקבל את המסמך הבא ב-XML

מסמך - XML

שינוי מרווח בין אותיות בטקסט שימו לב להעלמותו של הטקסט באמצעות none

יישור טקסט

עושים זאת ע"י המאפיין text-align

ערכים אפשריים:

  • left
  • right
  • center
  • justify

לדוגמה תוך שימוש ב- CSS הבא

name
{
;display:block
text-align:left
}

processor
{
;display:block
text-align:center
}

harddisk
{
;display:block
text-align:right
}

screen
{
;display:block
text-align:left
}

נקבל את המסמך הבא ב- xml מסמך -

xml יישור קו

דקורציה של טקסט

עושים זאת ע"י המאפיין text-decoration

ערכים אפשריים :

  • none
  • underline
  • overline
  • line-through
  • blink

לדוגמה תוך שימוש ב- css הבא

name
{
;display:block
text-decoration:underline
}

processor
{
;display:block
text-decoration:overline

}

harddisk
{

;display:block
text-decoration:line -through
}

screen
{
;display:block
text-decoration:blink
}
נקבל את המסמך הבא ב- xml מסמך - xml דקורציה של טקסט

כניסה של טקסט

משפיעה על כניסת טקסט של השורה הראשונה בטקסט עושים זאת באמצעות text-indent

ערכים

  • % lenth

הצללה של טקסט

עושים זאת באמצעות text-shadow

ערכים

  • none
  • color
  • lenght

שינוי טקסט

משפיע על הטקסט אם הוא באותיוית גדולות או קטנות

ערכים

  • capitalize
  • uppercase
  • lowercase

מרווח בין מילים

עושים זאת באמצעות text-transform

ערכים

  • normal
  • lenght

3.2.2 פונטים

סטייל של פונט

עושים זאת ע"י המאפיין font- style

ערכים אפשריים :

  • normal
  • italic
  • oblique

לדוגמה תוך שימוש ב- css הבא

name
{
;display:block
font-style:normal
}

processor
{
;display:block
font-style:oblique
}

harddisk
{
;display:block
font-style:italic
}

screen
{
;display:block
font-style:normal
}

נקבל את המסמך הבא ב- xml
מסמך - xml סטייל של טקסט

משפחת הפונט

מגדיר את המשפחה של הפונט משפיע באמצעות font-family

דוגמה:
name {font-family:Miriam} 

ערכים

כל משפחה שקיימת במערכת

גודל הפונט

מגדיר את הגודל של הפונט משפיע באמצעות font-size

דוגמה

name {font-size:large }

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller
  • larger
  • %lenght  

כל הערכים הם ביחס לפונט הבסיסי שמוגדר בדף כלומר הם יחסיים. כולם מלבד lenght שיכול לקבל את הערכים המספריים וקנה מידה בערכים הבאים:

  • em ביחס לגודל של האות m
  • ex ביחס לגודל של האות x
  • in אינצ'ים
  • mm מ"מ
  • pe פיקה
  • px פיקסלים

משקל הפונט

מגדיר את משקל הפונט משפיע באמצעות font-weight

דוגמה:

ערכים

name {font-weight:bolder}

  • normal
  • bold
  • blder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
שימו לב יש כאן ערכים יחסיים ואבסולוטיים

שוליים

מגדירים את השוליים באמצעות ארבעה מאפיינים:

ניתן להשתמש בקיצור margim ולהגדיר את כולם ביחד

  • margin-bottom שוליים תחתונים
  • margin-left שוליים שמאליים
  • margin-right שוליים ימניים
  • margin-top שוליים עליונים

ערכים

  • auto
  • %lenght
מאפינים
XSL