الدرس الاول لغة ‏css

الخميس يوليو 05, 2018 8:34 pm

ﺗﻌﻠﻢ ﻟﻐﺔ :CSS ﺍﻟﻤﺤﺪﺩﺍﺕ
ﻭﺍﻟﺘﻌﻠﻴﻘﺎﺕ ﻭ id ﻭ class
ﻭﺍﻷﻥ ﺑﻌﺪ ﺃﻥ ﺗﻌﺮﻓﻨﺎ ﻋﻠﻰ ﻟﻐﺔ HTML ﺍﻟﺘﻲ
ﻗﻠﻨﺎ ﻓﻲ ﺍﻷﻭﻝ ﺃﻧﻬﺎ ﺗﺴﺘﻌﻤﻞ ﻹﺿﺎﻓﺔ
ﺍﻟﻤﺤﺘﻮﻯ ﺇﻟﻰ ﺻﻔﺤﺔ ﺍﻟﻮﻳﺐ ﺳﻨﺘﻌﺮﻑ ﺍﻷﻥ
ﻋﻠﻰ ﻟﻐﺔ ﺍﻝ CSS ﻭﻫﻲ ﺗﺴﺘﻌﻤﻞ ﻟﺘﻨﺴﻴﻖ
ﺍﻟﺼﻔﺤﺔ ﻭﺇﻋﻄﺎﺋﻬﺎ ﺗﺼﻤﻴﻤﺎ ﻣﻌﻴﻨﺎ ﺣﻴﺖ
ﻳﻤﻜﻨﻨﺎ ﺗﻐﻴﻴﺮ ﻟﻮﻥ ﺍﻟﻨﺺ ﻭﻗﺪﻩ ﻭﺷﻜﻞ
ﺍﻟﺨﻂ ﻛﻤﺎ ﻳﻤﻜﻨﻨﺎ ﻣﻦ ﺗﺤﺪﻳﺪ ﻣﻜﺎﻥ ﻛﻞ
ﻋﻨﺼﺮ ﻋﻠﻰ ﺣﺪﺓ ﻣﺜﻞ ﺍﻟﻨﺼﻮﺹ ﻭﺍﻟﺼﻮﺭ
ﻭﺍﻟﻘﻮﺍﺋﻢ ﺇﻟﻰ ﻏﻴﺮ ﺫﻟﻚ.
ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻖ: ﺗﻌﻠﻢ HTML
)ﻫﺘﻤﻞ(:ﺍﻹﺳﺜﻤﺎﺭ
ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﻟﻲ: ﺗﻌﻠﻢ HTML ﻭ :CSS
ﺗﻨﺴﻖ ﺍﻟﻨﺺ
ﻭﻟﻌﻠﻤﻜﻢ ﻓﺈﻥ HTML ﻇﻬﺮﺕ ﻣﻨﺪ ﺳﻨﺔ
1991 ﺃﻣﺎ CSS ﻓﻬﻮ ﻟﻢ ﻳﻈﻬﺮ ﺇﻻ ﺳﻨﺔ
1996 ﻭﺧﻼﻝ ﻫﺬﻩ ﺍﻟﻔﺘﺮﺓ ﻗﺒﻞ ﻇﻬﻮﺭ
ﺍﻝCSS ﻓﺈﻥ ﺗﻨﺴﻴﻖ ﺍﻟﻤﻮﺍﻗﻊ ﻳﺘﻢ ﻋﻦ
ﻃﺮﻳﻖ HTML ﺣﻴﺖ ﻛﺎﻧﺖ ﻫﻨﺎﻙ ﺃﻭﺳﻤﺔ
HTML ﺧﺎﺻﺔ ﺑﺘﻨﺴﻴﻖ ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ ﻟﻜﻦ
ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ ﻛﺎﻧﺖ ﻣﻌﻘﺪﺓ ﺟﺪﺍ
ﻭﻣﺘﺸﺎﺑﻜﺔ ﻟﻜﺘﺮﺓ ﺍﻷﻭﺳﻤﺔ ﻓﻴﻬﺎ.
ﻭﻗﺪ ﻣﺮ ﺗﻄﻮﺭ CSS ﻣﻦ ﻋﺪﺓ ﻣﺮﺍﺣﻞ
ﻭﻇﻬﺮﺕ ﻣﻨﻪ ﺍﻟﻌﺪﻳﺪ ﻣﻦ ﺍﻟﻨﺴﺦ: CSS1,
CSS2.0, CSS2.1, CSS3
ﻛﻤﺎ ﻳﺠﺐ ﺃﻥ ﺗﻌﺮﻓﻮ ﺃﻳﻀﺎ ﺃﻥ ﺍﻟﻤﺘﺼﻔﺤﺎﺕ ﻻ
ﺗﺘﻌﺮﻑ ﻛﻠﻬﺎ ﺧﺼﺎﺋﺺ ﺍﻝCSS ﻭﺇﻟﻴﻜﻢ ﻫﺬﺍ
ﺍﻟﻤﻮﻗﻊ ﺍﻟﺬﻱ ﺳﻴﻌﻄﻴﻜﻢ ﺟﺪﻭﻻ ﺑﺨﺼﺎﺋﺺ
HTML ﻭCSS ﺍﻟﺘﻲ ﺗﺪﻋﻤﻬﺎ ﺍﻟﻤﺘﺼﻔﺤﺎﺕ
http://www.caniuse.com.
ﻳﻤﻜﻨﻨﺎ ﺃﻥ ﻧﻜﺘﺐ ﻛﻮﺩ CSS ﻓﻲ ﺗﻼﺗﺔ ﺃﻣﺎﻛﻦ
ﻭﻫﻲ :
ﺇﻣﺎ ﺃﻥ ﻧﻜﺘﺒﻪ ﻓﻲ ﻣﻠﻒ
ﻣﺴﺘﻘﻞ ﻭﻫﻲ ﺍﻟﻄﺮﻳﻘﺔ
ﺍﻷﻓﻀﻞ.
ﺃﻭ ﻓﻲ ﺗﺮﻭﻳﺴﺔ ﻣﻠﻒ
HTML ﺃﻱ ﺩﺍﺧﻞ ﺍﻟﻮﺳﻢ
.<head>
ﺃﻭ ﻣﺒﺎﺷﺮﺓ ﻓﻲ ﺃﻭﺳﻤﺔ
ﻣﻠﻒ HTML ﻋﻦ ﻃﺮﻳﻘﺔ
ﻛﺘﺎﺑﺔ ﺍﻟﺨﺎﺻﻴﺔ .style
ﻭﻫﺬﻩ ﻃﺮﻳﻘﺔ ﻻ ﻳﻨﺼﺢ
ﺑﺎﺳﺘﻌﻤﺎﻟﻬﺎ.
ﺍﻷﻥ ﺳﻨﺒﺪﺃ ﺑﺸﺮﺡ ﺍﻟﻄﺮﻳﻘﺔ ﺍﻷﻭﻟﻰ ﻭﻫﻲ
ﺍﻟﺘﻲ ﺃﻧﺼﺤﻜﻢ ﺑﺈﺳﺘﻌﻤﺎﻟﻬﺎ. ﻭﺗﻌﺘﻤﺪ ﻫﺬﻩ
ﺍﻟﻄﺮﻳﻘﺔ ﻋﻠﻰ ﺇﻧﺸﺎﺀ ﻣﻠﻒ ﻓﻲ ﻣﺤﺮﺭ
ﺍﻟﻨﺼﻮﺹ ++notepad ﺣﻴﺖ ﻧﻜﺘﺐ ﻓﻴﻪ
ﺧﺼﺎﺋﺺ ﺍﻝCSS ﺍﻟﺘﻲ ﻧﺮﻳﺪ ﺇﺳﺘﻌﻤﺎﻟﻬﺎ ﺗﻢ
ﻧﺤﻔﻈﻪ ﻋﻠﻰ ﺷﻜﻞ ﻣﻠﻒ CSS ﺑﺤﻴﺖ ﻋﻨﺪ
ﺣﻔﻈﻪ ﻧﻜﺘﺐ ﺇﺳﻤﻪ ﻣﺘﺒﻮﻋﺎ ﺑﺎﻹﻣﺘﺪﺍﺩ css.
ﻣﺜﻼ ﺇﺩﺍ ﻛﺎﻥ ﺇﺳﻤﻪ ﻫﻮ style ﻓﺈﻧﻨﺎ ﻧﻜﺘﺒﻪ
ﻛﺎﻟﺘﺎﻟﻲ style.css ﺗﻢ ﻧﻘﻮﻡ ﺑﺤﻔﻈﻪ ﻓﻲ
ﻧﻔﺲ ﺍﻟﻤﻠﻒ ﺍﻟﺬﻱ ﻳﻮﺟﺪ ﺑﻪ ﻣﻠﻒ HTML
ﺍﻟﻤﺮﺍﺩ ﺗﻨﺴﻴﻘﻪ.
ﻟﻜﻦ ﻫﺬﺍ ﻻ ﻳﻜﻔﻲ ﻟﻜﻲ ﻧﺤﺼﻞ ﻋﻠﻰ ﺻﻔﺤﺔ
ﻣﻨﺴﻘﺔ ﻷﻧﻪ ﻳﺠﺐ ﺃﻥ ﻧﺨﺒﺮ ﻣﻠﻒ HTML ﺃﻥ
ﻫﻨﺎﻙ ﻣﻠﻒ CSS ﻳﺠﺐ ﺃﻥ ﻳﺴﺘﻌﻤﻠﻪ
ﻭﻳﻜﻮﻥ ﺫﻟﻚ ﻋﻦ ﻃﺮﻳﻖ ﺇﺩﺭﺍﺝ ﻋﻨﻮﺍﻥ ﻣﻠﻒ
CSS ﻋﻦ ﻃﺮﻳﻖ ﺍﻟﻮﺳﻢ ﺍﻟﺘﺎﻟﻲ:
<link rel="stylesheet"
href="style.css/>
ﺩﺍﺧﻞ ﻭﺳﻤﻲ ﺍﻟﺘﺮﻭﻳﺴﺔ <head>
ﻭﻳﻜﻮﻥ ﺍﻟﻜﻮﺩ ﻛﺎﻟﺘﺎﻟﻲ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ</title>
<link rel="stylesheet"
href="style.css/>
</head>
<body>
</body>
</html>