آموزش کامل Css

آموزش کامل CSS قسمت دهم

ویژگی text-align در CSS

در این بخش از آموزش های CSS به ویژگی text-align (هم تراز کردن متن) می‌پردازیم این ویژگی دارای سه مقدار : مرکز، چپ و راست می‌باشد. کارایی این ویژگی به این صورت است که عناصر مختلف موجود در وب سایت را در سه قسمت مختلف مرکز، چپ و راست صفحه جابه‌جا می‌کند؛ به عنوان مثال تیتر ها و متن های وب سایت بصورت پیش فرض در سمت راست صفحه قرار می‌گیرند اما اگر بخواهیم تیتر ها در وسط و یا سمت چپ صفحه قرار بگیرند از این ویژگی استفاده می‌کنیم.

در مثال زیر قصد داریم تیترها را در وسط صفحه قرار دهیم. 

body    { color:#274472; font-family:Arial black;
          font-weight:normal; font-size:15px;background-color:#fefae0;}
h1      { text-decoration: underline; font-size:150%; text-align:center;}
h2      { text-decoration: underline; font-size:1.2em; text-align:center;}
p.para1 { color:#900020;}
p.para2 { color:#900020;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که مشاهده می‌کنید به همین سادگی تیتر ها در مرکز صفحه قرار گرفتند. برای قرارگیری متون یا عناصر متفاوت دیگر در سمت چپ صفحه نیز باید از قانون ;text-align:left استفاده کنید. این کد CSS با تغییر در ابعاد پنجره تغییر نخواهد کرد وهمچنان عناصر در جایی که برایشان درنظر گرفته اید باقی می‌مانند.

عنصر div

div عنصری از جنس HTML است اما تا حدود زیادی به CSS مربوط می‌شود در نتیجه در سری آموزش های CSS به آن می‌پردازیم.

از عنصر div برای تقسیم بندی صفحه وب به صفحات کوچکتر استفاده می‌شود بنابراین این عنصر با چیدمان صفحه وب سروکار دارد. به عنوان نمونه در این قسمت صفحه وب را به دو بخش تقسیم می‌کنیم که بخش اول شامل تیتر اول و پاراگراف اول و بخش دوم شامل تیتر دوم و پاراگراف دوم می‌شود.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
   <div>
  <h1>پیشرو سیستم</h1>
  <p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
   </div>
    
   <div>
  <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
  <p class="para2">می توانید این متن را در ویرایشگر خود تغییر دهید. </p>
   </div>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

با مشاهده نتیجه بالا متوجه می‌شویم که تغییری در ظاهر وب سایت ایجاد نشده است زیرا تگ div همانطورکه پیش تر نیز گفته شد تنها برای تقسیم بندی وب سایت به کار می‌رود و در ظاهر پیج تغییری ایجاد نمی‌کند. در این قسمت با اضافه کردن ویژگی id به تگ div این عنصر را منحصر به فرد می‌کنیم.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
   <div id="divmain1">
  <h1>پیشرو سیستم</h1>
  <p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
   </div>
    
   <div id="divmain2">
  <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
  <p class="para2">می توانید این متن را در ویرایشگر خود تغییر دهید. </p>
   </div>
</body>
</html>

body      { color:#274472; font-family:Arial black;
            font-weight:normal; font-size:15px;background-color:#fefae0;}
h1        { text-decoration: underline; font-size:150%; text-align:center;}
h2        { text-decoration: underline; font-size:1.2em; text-align:center;}
p.para1   { color:#900020;}
p.para2   { color:#900020;}
#divmain1 { color:#283618;}
#divmain2 { color:#3e1f47;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که مشاهده می‌کنید فقط عناصر تیتر تغییر رنگ پیدا کردند و دلیل این موضوع این است که ما برای عناصر تیتر رنگی مشخص نکرده بودیم و آنها پیش تر، از رنگی که در عنصر body وجود داشت ارث بری می‌کردند؛ اما، بعد از اینکه در تگ div ویژگی id را برای هر بخش مشخص کردیم، دیگر عناصر تیتر از صفت id خود تبعیت می‌کنند و اما دلیل اینکه چرا عناصر پاراگراف از آن قانون پیروی نکردند این است که ما از قبل برای آنها کلاس مشخص کردیم در نتیجه آنها از رنگ متن کلاسشان پیروی می‌کنند.

پس به این نتیجه میرسیم که عنصر div نه تنها باعث نظم وترتیب وب سایت می‌شود بلکه می‌توان از خاصیت ارث بری آن نیز استفاده کرد.

دیدگاهتان را بنویسید