ﺃﻟﻴﺲ ﻣﻦ ﺍﻟﺠﻤﻴﻞ ﺃﻥ ﺗﺘﻤﻜﻦ ﻣﻦ ﺇﻋﻄﺎﺀ ﺻﻔﺤﺘﻚ ﺍﻟﺘﺼﻤﻴﻢ ﺍﻟﺬﻱ ﺗﺴﺘﺤﻖ؟
ﺑﺎﻟﺘﺄﻛﻴﺪ، ﻟﻜﻦ ﻛﻴﻒ؟
ﻟﻜﻲ ﺗﻌﻄﻲ ﺻﻔﺤﺘﻚ ﺗﺼﻤﻴﻤﺎً ﻳﺠﺐ ﺃﻥ ﺗﺴﺘﺨﺪﻡ ﺗﻘﻨﻴﺔ ( CSS ) ، ﻓﻲ ﻫﺬﺍ ﺍﻟﺪﺭﺱ ﺳﺘﺠﺪ ﻣﻘﺪﻣﺔ ﻗﺼﻴﺮﺓ ﺇﻟﻰ CSS ، ﻟﻜﻦ ﺑﻌﺪ ﺫﻟﻚ ﻳﻤﻜﻨﻚ ﺗﻌﻠﻢ ﻛﻞ ﺷﻲﺀ ﺣﻮﻝ CSS ﺑﺘﻔﺎﺻﻴﻠﻬﺎ ﻓﻲ ﺩﺭﺱ CSS . ﻟﺬﻟﻚ ﺍﻋﺘﺒﺮ ﻫﺬﺍ ﺍﻟﺪﺭﺱ ﻣﺠﺮﺩ ﻓﺎﺗﺤﺔ ﺷﻬﻴﺔ .
ﻫﻲ ﺍﻟﻨﺼﻒ ﺍﻵﺧﺮ ﻟﻠﻐﺔ HTML ، ﻓﻔﻲ ﻛﺘﺎﺑﺔ ﺍﻟﺼﻔﺤﺎﺕ، ﻛﻞ ﻭﺍﺣﺪﺓ ﻟﻬﺎ ﻭﻇﻴﻔﺔ ﻣﺤﺪﺩﺓ : ﺗﻬﺘﻢ ﺑﺎﻟﺠﻮﺍﻧﺐ ﺍﻟﺼﻌﺒﺔ " ﻫﻴﻜﻠﻴﺔ ﺍﻟﺼﻔﺤﺔ ﻭﻣﺤﺘﻮﻳﺎﺗﻬﺎ " ﺑﻴﻨﻤﺎ CSS ﺗﻌﻄﻲ ﻟﻤﺴﺔ ﺃﻧﻴﻘﺔ ( ﺍﻟﺘﺼﻤﻴﻢ ) .
ﻛﻤﺎ ﺭﺃﻳﺖ ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻊ ، ﻳﻤﻜﻦ ﺇﺿﺎﻓﺔ CSS ﻣﻦ ﺧﻼﻝ ﺧﺎﺻﻴﺔ ، ﻓﻤﺜﻼً ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﻀﻊ ﻧﻮﻉ ﺍﻟﺨﻂ ﻭﺣﺠﻤﻪ :
ﻣﺜﺎﻝ :1
<p style="font-size:20px;" >This is typed in size 20</p>
<p style="font-family:courier;" >This is typed in Courier</p>
<p style="font-size:20px; font-family:courier;" >This is typed in Courier size 20</p>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
This is typed in size 20
This is typed in Courier
This is typed in Courier size 20
ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﻋﻼﻩ ﺍﺳﺨﺪﻣﻨﺎ ﺧﺎﺻﻴﺔ style ﻟﺘﺤﺪﻳﺪ ﻧﻮﻉ ﺍﻟﺨﻂ ﺍﻟﺬﻱ ﻧﺮﻳﺪ ﺍﺳﺘﺨﺪﺍﻣﻪ ﻣﻦ ﺧﻼﻝ ﺃﻣﺮ font-family ) ﻭﺣﺪﺩﻧﺎ ﺣﺠﻢ ﺍﻟﺨﻂ ﻣﻦ ﺧﻼﻝ ﺃﻣﺮ font-size ) ، ﻻﺣﻆ ﻛﻴﻒ ﺃﻥ ﺍﻟﻔﻘﺮﺓ ﺍﻷﺧﻴﺮﺓ ﺍﺳﺘﺨﺪﺍﻣﻨﺎ ﺍﻷﻣﺮﻳﻦ ﻣﻌﺎً ﻭﻗﻤﻨﺎ ﺑﺎﻟﻔﺼﻞ ﺑﻴﻨﻤﻬﺎ ﻣﻦ ﺧﻼﻝ ﻓﺎﺻﻠﺔ ﻣﻨﻘﻮﻃﺔ .
ﻳﺒﺪﻭ ﺃﻥ ﻫﺬﺍ ﻳﺤﺘﺎﺝ ﺇﻟﻰ ﺍﻟﻜﺜﻴﺮ ﻣﻦ ﺍﻟﻌﻤﻞ؟
ﺇﺣﺪﻯ ﺃﺫﻛﻰ ﺧﺼﺎﺋﺺ CSS ﺃﻧﻬﺎ ﺗﻤﻜﻨﻚ ﻣﻦ ﺇﺩﺍﺭﺓ ﺍﻟﺘﺼﻤﻴﻢ ﻣﻦ ﺧﻼﻝ ﻣﻜﺎﻥ ﻭﺍﺣﺪ ، ﻓﺒﺪﻻً ﻣﻦ ﺍﺳﺨﺪﺍﻡ ﺧﺎﺻﻴﺔ style ﻟﻜﻞ ﻭﺳﻢ، ﻳﻤﻜﻦ ﺃﻥ ﺗﺨﺒﺮ ﺍﻟﻤﺘﺼﻔﺢ ﻣﺮﺓ ﻭﺍﺣﺪﺓ ﻛﻴﻒ ﻳﺠﺐ ﺃﻥ ﻳﻌﺮﺽ ﺍﻟﺘﺼﻤﻴﻢ ﻟﻜﻞ ﺍﻟﻨﺼﻮﺹ ﻓﻲ ﺍﻟﺼﻔﺤﺔ :
ﻣﺜﺎﻝ :2
<html>
<head>
<title>My first CSS page</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>My first CSS page</h1>
<h2>Welcome to my first CSS page</h2>
<p>Here you can see how CSS works </p>
</body>
</html>
ﻋﺮﺽ ﺍﻟﻤﺜﺎﻝ
ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﻋﻼﻩ ﻭﺿﻌﺖ ﻓﻲ ﺭﺃﺱ ﺍﻟﺼﻔﺤﺔ، ﻭﻟﺬﻟﻚ ﻳﻤﻜﻦ ﺗﻄﺒﻴﻘﻬﺎ ﻋﻠﻰ ﻛﻞ ﺍﻟﺼﻔﺤﺔ ، ﻟﻔﻌﻞ ﺫﻟﻚ ﻋﻠﻴﻚ ﻓﻘﻂ ﺃﻥ ﺗﻀﻊ ﺍﻟﻮﺳﻢ
<style type="text/css"> ﺍﻟﺬﻱ ﻳﺨﺒﺮ ﺍﻟﻤﺘﺼﻔﺢ ﺑﺄﻧﻚ ﺗﺴﺘﺨﺪﻡ .CSS
ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﻛﻞ ﺍﻟﻌﻨﺎﻭﻳﻦ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﺳﺘﺴﺘﺨﺪﻡ ﺧﻄﺎً ﻣﻦ ﻧﻮﻉ Arial ﺑﺤﺠﻢ 30 ﺑﻜﺴﻞ، ﻭﻛﻞ ﺍﻟﻌﻨﺎﻭﻳﻦ ﺍﻟﺠﺎﻧﺒﻴﺔ ﺳﺘﺴﺘﺨﺪﻡ ﺧﻄﺎً ﻣﻦ ﻧﻮﻉ Courier ﺑﺤﺠﻢ 15 ﺑﻜﺴﻞ، ﻭﺑﻘﻴﺔ ﺍﻟﻨﺼﻮﺹ ﻓﻲ ﺍﻟﻔﻘﺮﺍﺕ ﺳﺘﺴﺘﺨﺪﻡ ﺧﻄﺎً ﻣﻦ ﻧﻮﻉ " Times New "Roman ﺑﺤﺠﻢ 8 ﺑﻜﺴﻞ .
ﻫﻨﺎﻙ ﺧﻴﺎﺭ ﺁﺧﺮ ﻳﺘﻤﺜﻞ ﻓﻲ ﻛﺘﺎﺑﺔ CSS ﻓﻲ ﻣﻠﻒ ﻣﻨﻔﺼﻞ، ﻷﻧﻚ ﺗﺴﺘﻄﻴﻊ ﻣﻦ ﺧﻼﻝ ﻣﻠﻒ ﻣﻨﻔﺼﻞ ﺃﻥ ﺗﺘﺤﻜﻢ ﺑﺘﺼﻤﻴﻢ ﺻﻔﺤﺎﺕ ﻋﺪﺓ ﻣﺮﺓ ﻭﺍﺣﺪﺓ ، ﻫﺬﺍ ﺃﺳﻠﻮﺏ ﺫﻛﻲ ﺇﺫﺍ ﺃﺭﺩﺕ ﺃﻥ ﺗﻐﻴﺮ ﺣﺠﻢ ﺍﻟﺨﻂ ﻭﻧﻮﻋﻪ ﻓﻲ ﻣﻮﻗﻊ ﻛﺒﻴﺮ ﻳﺤﻮﻱ ﻣﺌﺎﺕ ﺃﻭ ﺁﻻﻑ ﺍﻟﺼﻔﺤﺎﺕ، ﻟﻜﻨﻨﺎ ﻟﻦ ﻧﺸﺮﺡ ﺫﻟﻚ ﺍﻵﻥ، ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﺘﻌﻠﻢ ﻫﺬﺍ ﻓﻲ ﺩﺭﺱ .CSS
ﻣﺎﺫﺍ ﻳﻤﻜﻦ ﺃﻥ ﺃﻓﻌﻞ ﺃﻳﻀﺎً ﻓﻲ CSS ؟
ﻳﻤﻜﻦ ﺃﻥ ﺗﺴﺘﺨﺪﻡ ﻷﻛﺜﺮ ﻣﻦ ﻣﺠﺮﺩ ﺗﺤﺪﻳﺪ ﻧﻮﻉ ﻭﺣﺠﻢ ﺍﻟﺨﻂ، ﻓﻤﺜﻼً ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﺤﺪﺩ ﺃﻟﻮﺍﻥ ﻋﻨﺎﺻﺮ ﺍﻟﺼﻔﺤﺔ ﻭﻟﻮﻥ ﺍﻟﺨﻠﻔﻴﺔ، ﻫﻨﺎ ﺑﻌﺾ ﺍﻷﻣﺜﻠﺔ ﻟﺘﺠﺮﺏ ﻋﻠﻴﻬﺎ ::
<p style="color:green;" >Green text</p>
<h1 style="background-color: blue;" >Heading on blue background</h1>
<body style="background-image: url('http://www.html.net/logo.png');" >
ﺟﺮﺏ ﺃﻥ ﺗﺪﺧﻞ ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﻓﻲ ﺑﻌﺾ ﺍﻟﺼﻔﺤﺎﺕ ﺍﻟﺘﻲ ﻗﻤﺖ ﺑﺈﻧﺸﺎﺀﻫﺎ، ﻭﺟﺮﺏ ﺫﻟﻚ ﺑﺎﻟﻄﺮﻳﻘﺘﻴﻦ، ﻛﻤﺎ ﺗﺮﻯ ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﻭ ﺑﻮﺿﻊ CSS ﻓﻲ ﺭﺃﺱ ﺍﻟﺼﻔﺤﺔ
ﻫﻞ CSS ﻣﺠﺮﺩ ﺃﻟﻮﺍﻥ ﻭﺧﻄﻮﻁ؟
ﺑﺠﺎﻧﺐ ﺍﻟﺘﺼﻤﻴﻢ ﻭﺗﻔﺎﺻﻴﻠﻪ ﻣﺜﻞ ﺍﻷﻟﻮﺍﻥ ﻭﺍﻟﺨﻄﻮﻁ، ﻳﻤﻜﻨﻬﺎ ﺃﻥ ﺗﺘﺤﻜﻢ ﺑﺘﻨﺴﻴﻖ ﺍﻟﺼﻔﺤﺔ ﻭﻃﺮﻳﻘﺔ ﻋﺮﺽ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻓﻴﻬﺎ ( ﺍﻟﻬﻮﺍﻣﺶ، ﺍﻟﻤﺤﺎﺫﺍﺓ، ﺍﻟﻌﺮﺽ ﻭﺍﻟﻄﻮﻝ ... ﺇﻟﺦ ) ، ﺑﺘﻨﻈﻴﻢ ﻣﺨﻠﻒ ﺍﻟﻌﻨﺎﺻﺮ ﺑﺎﺳﺘﺨﺪﺍﻡ CSS ، ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﺼﻤﻢ ﺻﻔﺤﺘﻚ ﺑﺄﺳﻠﻮﺏ ﺃﻧﻴﻖ ﺩﻗﻴﻖ .
ﻣﺜﺎﻝ :3
<p style="padding:25px;border:1px solid red;" >I love CSS</p>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
I love CSS
ﺑﺴﺘﺨﺪﺍﻡ ﺃﻣﺮ float ﻳﻤﻜﻦ ﻟﻠﻌﻨﺼﺮ ﺃﻥ ﻳﻮﺿﻊ ﺇﻟﻰ ﻳﺴﺎﺭ ﺃﻭ ﻳﻤﻴﻦ ﺍﻟﺼﻔﺤﺔ ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺍﻟﺘﺎﻟﻲ ﺳﻨﻌﺮﺽ ﻫﺬﺍ ﺍﻟﻤﺒﺪﺃ :
ﻣﺜﺎﻝ :4
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﻋﻨﺼﺮ ﻭﺍﺣﺪ " ﺍﻟﺼﻮﺭﺓ " ﻗﻤﻨﺎ ﺑﻮﺿﻌﻬﺎ ﺇﻟﻰ ﺍﻟﻴﺴﺎﺭ ﻭﺍﻟﻌﻨﺼﺮ ﺍﻵﺧﺮ " ﺍﻟﻨﺺ " ﻗﻢ ﺑﺘﻐﻄﻴﺔ ﺍﻟﻤﺴﺎﺣﺔ ﺍﻟﻔﺎﺭﻏﺔ ﺣﻮﻟﻬﺎ .
ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻷﻣﺮ position ، ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﻀﻊ ﺍﻟﻌﻨﺼﺮ ﻓﻲ ﻣﻜﺎﻥ ﻣﺤﺪﺩ ﺣﻴﺚ ﺗﺮﻳﺪ ﻟﻪ ﺃﻥ ﻳﻜﻮﻥ ﻓﻲ ﺍﻟﺼﻔﺤﺔ :
ﻣﺜﺎﻝ :5
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
ﻋﺮﺽ ﻣﺜﺎﻝ
ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺍﻟﺼﻮﺭ ﻭﺿﻌﺖ ﻋﻠﻰ ﺑﻌﺪ 50 ﺑﻜﺴﻞ ﻣﻦ ﺍﻷﺳﻔﻞ ﻭ 10 ﺑﻜﺴﻞ ﻣﻦ ﻳﻤﻴﻦ ﺍﻟﻤﺘﺼﻔﺢ، ﻟﻜﻦ ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﻀﻌﻬﺎ ﺑﺎﻟﻀﺒﻂ ﺣﻴﺚ ﺗﺸﺎﺀ، ﺟﺮﺏ، ﺳﺘﺠﺪ ﺃﻥ ﺍﻷﻣﺮ ﺳﻬﻞ ﻭﻣﺜﻴﺮ .
ﺟﻤﻴﻞ، ﻟﻜﻦ ﻫﻞ ﻫﻲ ﺳﻬﻠﺔ؟
ﻻ ﻳﻤﻜﻨﻚ ﺗﻌﻠﻢ CSS ﻓﻲ ﻋﺸﺮ ﺩﻗﺎﺋﻖ ، ﻭﻛﻤﺎ ﺫﻛﺮﻧﺎ ﺃﻋﻼﻩ، ﻫﺬﺍ ﺍﻟﺪﺭﺱ ﻫﻮ ﻣﺠﺮﺩ ﻣﻘﺪﻣﺔ ﻗﺼﻴﺮﺓ، ﻻﺣﻘﺎً ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﺘﻌﻠﻢ ﺍﻟﻤﺰﻳﺪ ﺑﻨﻔﺴﻚ ﻓﻲ ﺩﺭﺱ CSS .
ﺍﻵﻥ ﻟﻨﺮﻛﺰ ﻋﻠﻰ HTML ، ﻭﻟﻨﺬﻫﺐ ﺇﻟﻰ ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﻟﻲ ﺣﻴﺚ ﺳﺘﺘﻌﻠﻢ ﻛﻴﻒ ﺗﻘﻮﻡ ﺑﻮﺿﻊ ﻣﻮﻗﻌﻚ ﻋﻠﻰ ﺍﻟﺸﺒﻜﺔ ﻟﻜﻲ ﻳﺴﺘﻄﻴﻊ ﻛﻞ ﺍﻟﻨﺎﺱ ﻓﻲ ﺍﻟﻌﺎﻟﻢ ﻣﺸﺎﻫﺪﺗﻪ
