لرن HTML5

۲۵ مطلب با کلمه‌ی کلیدی «ترجمه فارسی سایت W3Schools» ثبت شده است

border ها در CSS

خاصیت border در CSS این امکان را به شما می دهد که استایل، عرض و رنگ حاشیه یک عنصر HTML را مشخص کنید. در این فصل از آموزش CSS شما با انواع border ها و استایل های مربوط به آن آشنا خواهید شد.



خاصیت border در CSS

خاصیت border در CSS این امکان را به شما می دهد که استایل، عرض و رنگ حاشیه یک عنصر HTML را مشخص کنید. 

از چهار طرف حاشیه دارم

حاشیه ی پایین (bottom morder) به رنگ قرمز دارم

حاشیه ای با گوشه های گرد دارم

حاشیه ی راست و آبی دارم


خاصیت border-style در CSS

خاصیت border-style در CSS مشخص می کند که حاشیه به چه شکلی نمایش داده شود.

استفاده از مقادیر زیر برای این خاصیت مجاز است:

  • dotted - حاشیه ای نقطه نقطه را تعریف می کند
  • dashed - حاشیه ای به شکل خطوط فاصله را تعریف می کند
  • solid - حاشیه ای به شکل یک خط مستقیم را تعریف می کند
  • double - حاشیه به شکل دو خط مستقیم را تعریف می کند
  • groove - یک حاشیه سه بعدی با استایل groove را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد 
  • ridge - یک حاشیه سه بعدی با استایل ridge را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد
  • inset - یک حاشیه سه بعدی با استایل inset را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد
  • outset - یک حاشیه سه بعدی با استایل outset را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد
  • none - باعث می شود عنصر مورد نظر بدون حاشیه نشان داده شود
  • hidden - حاشیه را مخفی می کند

خاضیت border-style می تواند از یک تا چهار مقدار مختلف (برای هر یک حاشیه بالا، حاشیه راست، حاشیه پایین و حاشیه چپ) داشته باشد.

مثال

مثالی برای استایل های مختلف border:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

نتیجه:

حاشیه نقطه ای.

حاشیه خطوط فاصله.

حاشیه به شکل خط.

حاشیه به شکل دو خط.

حاشیه سه بعدی با استایل groove.

حاشیه سه بعدی با استایل ridge.

حاشیه سه بعدی با استایل inset.

حاشیه با استایل outset.

بدون حاشیه.

حاشیه مخفی.

حاشیه ترکیبی.

خودتان امتحان کنید »

توجه: بدون مقدار دهی خاصیت border-style هیچ یک از خاصیت های مربوط به حاشیه که در ادامه این فصل آموزش داده خواهد شد تاثیری نخواهد داشت.


خاصیت border-width در CSS

خاصیت border-width عرض چهار حاشیه (بالا، راست، پایین، چپ) را مشخص می کند.

این خاصیت را می توان با یکی از واحد های: em ,cm ,pt ,px و ... و یا با یکی از مقادیر پیشفرض: thin (نازک)، medium (متوسط) و thick (ضخیم) مقدار دهی کرد.

خاصیت border-width می تواند از یک تا چهار مقدار برای هر یک از حاشیه های بالا، راست، پایین و چپ داشته باشد.

عرض این حاشیه 5px است

مثال

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: solid;
  border-width: 2px 10px 4px 20px;
}
خودتان امتحان کنید »

خاصیت border-color در CSS

خاصیت border-color رنگ چهار حاشیه (بالا، راست، پایین و چپ) مشخص می کند.

در CSS رنگ ها می تونن به یکی از شکل های زیر مشخص شوند:

  • نام یک رنگ معتبر - مانند "red" (قرمز)
  • مقدار هگزادسیمال (HEX) - شبیه این: "#ff0000"
  • مقدار RGB - شبیه این: "(rgb(255,0,0"

خاصیت border-color می تواند از یک تا چهار مقدار برای هر یک از حاشیه های بالا، راست، پایین و چپ داشته باشد.

اگر خاصیت border-color مشخص نشود از رنگ عنصر به عنوان رنگ پیشفرض حاشیه استفاده می شود.

حاشیه قرمز

مثال

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: solid;
  border-color: red green blue yellow;
}
خودتان امتحان کنید »

تعیین border جداگانه برای هر سمت

در مثال های بالا مشاهده کردید که می توان حاشیه های مختلفی را برای هر طرف مشخص کرد.

همچنین در CSS خصوصیاتی برای مشخص کردن هر یک از مرزهای بالا، راست، پایین و چپ وجود دارد.

حاشیه ای با استایل های مختلف

مثال

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
خودتان امتحان کنید »

نمونه کد بالا می تواند به صورت زیر هم نوشته شود که خروجی آن نتیجه مشابه کد بالا میدهد:

مثال

p {
  border-style: dotted solid;
}
خودتان امتحان کنید »

اما نمونه کد بالا چگونه کار می کند:

اگر خاصیت border-style چهار مقدار داشته باشد:

  • border-style: dotted solid double dashed;
    • حاشیه بالا dotted است
    • حاشیه راست solid است
    • حاشیه زیرین double است
    • حاشیه چپ dashed است

اگر خاصیت border-style سه مقدار داشته باشد:

  • border-style: dotted solid double;
    • حاشه بالا dotted است
    • حاشیه های چپ و راست solid هستند
    • حاشیه زیرین double است

اگر خاصیت border-style دو مقدار داشته باشد:

  • border-style: dotted solid;
    • حاشیه های بالا و پایین dotted هستند
    • حاشیه های راست و چپ solid هستند

اگر خاصیت border-style یک مقدار داشته باشد:

  • border-style: dotted;
    • هر چهار حاشیه dotted هستند

توضیحاتی که در بالا برای خاصیت border-style داده شد، برای خاصیت های border-width و border-color نیز صدق می کند.


border ها در CSS - خاصیت مختصر نویسی (shorthand)

همان طور که در مثال های بالا مشاهده کردید، خاصیت های زیادی برای مشخص کردن حاشیه یک عنصر HTML وجود دارد و باید کدنویسی زیادی برای تعیین حاشیه یک عنصر انجام داد.

برای کوتاه شدن کد نویسی، میتوان تمام خصوصیات مربوط به حاشیه را در یک ویژگی جمع کرد.

برای مختصر نویسی کد های حاشیه می توان از خاصیت border استفاده کرد. ترتیب نوشتن مقادیر مختلف حاشیه ها برای صفت border به صورت زیر است:

  • border-width
  • border-style (ضروری)
  • border-color

مثال

p {
  border: 5px solid red;
}

نتیجه:

Some text

خودتان امتحان کنید »

شما همچنین میتوانید تمام مقادیر حاشیه را تنها برای یک سمت دلخواه به صورت زیر بکار ببرید:

حاشیه چپ

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

نتیجه:

Some text

خودتان امتحان کنید »

حاشیه زیرین

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

نتیجه:

Some text

خودتان امتحان کنید »

خاصیت border-radius در CSS

از خاصیت border-radius برای گرد کردن گوشه های حاشیه استفاده می شود:

حاشیه معمولی

حاشیه گرد

حاشیه گرد تر

گرد ترین حاشیه

مثال

p {
  border: 2px solid red;
  border-radius: 5px;
}
خودتان امتحان کنید »

نکته: خاصیت border-radius در IE8 و نسخه های پایین تر از آن پشتیبانی نمی شود.


منبع

https://www.w3schools.com/css/css_border.asp

  • ۵ پسندیدم
  • ۲ نظر
    • چهارشنبه ۶ شهریور ۹۸

    پس زمینه ها در CSS

    با استفاده از ویژگی های Background در CSS می توان عکس و رنگ پس زمینه ای دلخواه برای عناصر HTML تعریف کرد و به آن افکت های متنوع و دلخواهی داد.

    انواع Background ها در CSS عبارت اند از:

    •  background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

    در این فصل از آموزش CSS با همه ی انواع background ها آشنا خواهید شد.



    ویژگی background-color در CSS

    ویژگی background-color در CSS رنگ پس زمینه یک عنصر HTML را مشخص می کند.

    مثال

    رنگ پس زمینه یک عنصر به صورت زیر تنظیم می شود، در اینجا رنگ پس زمینه صفحه به رنگ آبی روشن درآمده است:

    body {
      background-color: lightblue;
    }
    خودتان امتحان کنید »

    در CSS اغلب، رنگ ها به شکل های زیر تعریف می شود:

    • نام یک رنگ معتبر - مانند "red" (قرمز)
    • مقدار هگزادسیمال (HEX) - شبیه این: "#ff0000"
    • مقدار RGB - شبیه این: "(rgb(255,0,0"

    برای یادگیری بیشتر درباره رنگ ها مقاله آموزش رنگ ها در CSS را مطالعه کنید.

    مثال

    در مثال زیر هر یک از عناصر <h1>, <p> و <div> رنگ پس زمینه متفاوتی خواهند داشت: 

    h1 {
      background-color: green;
    }

    div {
      background-color: lightblue;
    }

    p {
      background-color: yellow;
    }
    خودتان امتحان کنید »

    ویژگی background-image در CSS

    ویژگی background-image در CSS عکس پس زمینه یک عنصر HTML را مشخص می کند.

    به طور پیشفرض عکس پس زمینه برای یک عنصر HTML تکرار می شود تا همه ی فضای پس زمینه یک عنصر را اشغال کند:

    مثال

    تصویر پس زمینه می تواند به صورت زیر برای یک صفحه HTML تنظیم شود: 

    body {
      background-image: url("paper.gif");
    }
    خودتان امتحان کنید »

    مثال

    مثال زیر یک ترکیب بد از متن و تصویر را نشان می دهد که در آن متن به سختی قابل خواندن است: 

    body {
      background-image: url("bgdesert.jpg");
    }
    خودتان امتحان کنید »

    نکته: وقتی که از تصویر پس زمینه استفاده می کنید، از تصاویری استفاده کنید که به خوانایی متن لطمه نزند.


    ویژگی background-repeat در CSS

    به طور پیشفرض ویژگی background-image یک تصویر را به صورت افقی و عمودی تکرار می کند تا همه ی فضای پس زمینه یک عنصر را اشغال کند.

    گاهی لازم است که بعضی از تصاویر فقط به صورت عمودی یا افقی تکرار شوند در صورت تکرار تصویر هم به صورت افقی و هم به صورت عمودی نتیجه عجیب خواهد شد، مانند مثال زیر:

    مثال

    body {
      background-image: url("gradient_bg.png");
    }
    خودتان امتحان کنید »

    اگر تصویر بالا فقط به صورت افقی background-repeat: repeat-x; تکرار شود، تصویر پس زمینه بهتر به نظر می رسد:

    مثال

    body {
      background-image: url("gradient_bg.png");
      background-repeat: repeat-x;
    }
    خودتان امتحان کنید »

    نکته: برای تکرار تصویر پس زمینه به صورت عمودی از مقدار background-repeat: repeat-y; استفاده کنید.


    ویژگی background-repeat: norepeat در CSS

    برای نمایش تصویر پس زمینه بدون تکرار شدن عمودی و افقی از ویژگی background-repeat به این صورت استفاده می شود:

    مثال

    تصویر پس زمینه در این مثال بدون تکرار نمایش داده می شود:

    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
    }
    خودتان امتحان کنید »

    ویژگی background-position در CSS

    در مثال بالا تصویر پس زمینه در همان مکان متن قرار می گیرد و ممکن است باعث ناخوانایی متن شود. برای حل این مشکل و قرار دادن عکس در مکانی دلخواه از ویژگی background-position استفاده می شود.

    مثال

    در مثال زیر مکان قرار گیری عکس گوشه بالا سمت راست تعیین شده است: 

    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
    }
    خودتان امتحان کنید »

    ویژگی background-attachment در CSS

    ویژگی background-attachment مشخص می کند که تصویر پس زمینه اسکرول شود (scroll) و یا با صفحه فیکس (fixed) شود.

    مثال

    در مثال زیر مقدار ویژگی background-attachment برابر fixed قرار داده شده و باعث فیکس شدن تصویر پس زمینه با صفحه شده است:

    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-attachment: fixed;
    }
    خودتان امتحان کنید »

    مثال

    در مثال زیر مقدار ویژگی background-attachment برابر scroll قرار داده شده و باعث شده که تصویر پس زمینه در جای خود ثابت بماند و همراه با اسکرول شدن صفحه تکان نخورد:

    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-attachment: scroll;
    }
    خودتان امتحان کنید »

    ویژگی background در CSS - برای مختصر نویسی  

    برای کوتاه نویسی در کد ها، می توان تمام ویژگی های پس زمینه را در یک ویژگی واحد جمع کرد. این خاصیت به اصطلاح مختصر نویسی (shorthand) نامیده می شود.

    برای مختصر نویسی (shorthand) پس زمینه ها باید از ویژگی background به صورت زیر استفاده کرد:

    مثال

    با استفاده از خاصیت مختصر نویسی (shorthand) تمام خصوصیات پس زمینه را با هم استفاده کنید:

    body {
      background: #ffffff url("img_tree.png") no-repeat right top;
    }
    خودتان امتحان کنید »

    در هنگام استفاده از خاصیت مختصر نویسی (shorthand) ترتیب مقادیر مختلف پس زمینه ها به صورت زیر است:

    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

    می توان از هر یک از مقادیر بالا چشم پوشی کرد یعنی می توان از هر پنج مورد، سه مورد، و یا حتی یک مورد استفاده کرد. اما ترتیب اولویت در مواردی که از آن ها استفاده می شود را باید رعایت کرد.


    منبع

    https://www.w3schools.com/css/css_background.asp

  • ۲ پسندیدم
  • ۰ نظر
    • چهارشنبه ۶ شهریور ۹۸

    رنگ ها در CSS

    در CSS می توان رنگ ها را با استفاده از نام های از پیش تعریف شده برای رنگ ها، مقادیر RGB ، HEX ، HSL ، RGBA ، HSLA مقدار دهی کرد. در این فصل ما به آموزش رنگ ها در همه ی این حالات خواهیم پرداخت.



    اسم رنگ ها در CSS

    در CSS یک رنگ را می توان با اسم مخصوص به آن رنگ مشخص کرد:

    نام فارسی نام انگلیسی رنگ
    گوجه ای Tomato
    نارنجی Orange
    نیلی DodgerBlue
    خزه ای MediumSeaGreen
    خاکستری Gray
    آبی فولادی SlateBlue
    بنفش روشن Violet
    خاکستری روشن LightGray

    خودتان امتحان کنید »


    رنگ پس زمینه در CSS

    شما می توانید با استفاده از صفت background-color رنگ پس زمینه ای دلخواه برای عناصر HTML انتخاب کنید:

    Hello World


    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.

    مثال

    <h1 style="background-color:DodgerBlue;">Hello World</h1>
    <p style="background-color:Tomato;">Lorem ipsum...</p>
    خودتان امتحان کنید »

    رنگ متن در CSS

    شما می توانید با استفاده از صفت color رنگی دلخواه برای عناصر HTML انتخاب کنید:

    Hello World

    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.

    مثال

    <h1 style="color:Tomato;">Hello World</h1>
    <p style="color:DodgerBlue;">Lorem ipsum...</p>
    <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
    خودتان امتحان کنید »

    رنگ حاشیه (border) در CSS

    شما می توانید با استفاده از صفت border رنگی دلخواه برای حاشیه عناصر HTML انتخاب کنید:

    Hello World

    Hello World

    Hello World

    مثال

    <h1 style="border:2px solid Tomato;">Hello World</h1>
    <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
    <h1 style="border:2px solid Violet;">Hello World</h1>
    خودتان امتحان کنید »

    مقادیر رنگ ها در CSS

    در CSS می توان رنگ ها را با استفاده از مقادیر RGB، مقادیر هگزادسیمال (HEX)، مقادیرHSL، مقادیر RGBA و مقادیر HSLA مشخص کرد:

    در ادامه مثال هایی با رنگ یکسان گوجه ای برای هر یک از مقادیر بالا آورده شده است:

    rgb(255, 99, 71)
    #ff6347
    hsl(9, 100%, 64%)

    در مثال زیر از همان رنگ گوجه ای استفاده شده، اما 50 درصد شفاف تر:

    rgba(255, 99, 71, 0.5)
    hsla(9, 100%, 64%, 0.5)

    مثال

    <h1 style="background-color:rgb(255, 99, 71);">...</h1>
    <h1 style="background-color:#ff6347;">...</h1>
    <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

    <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
    خودتان امتحان کنید »

    مقدار RGB در CSS

    در CSS یک رنگ را می توان با مقدار RGB با استفاده از این فرمول مشخص کرد: (rgb(red, green, blue.

    به جای هر پارامتر (red, green, blue) عددی بین 0 تا 255 قرار می گیرد.

    به عنوان مثال، (rgb(255, 0, 0 رنگ قرمز را نشان می دهد، زیرا رنگ قرمز روی بالاترین مقدار آن روی 255 تنظیم شده و مقدار بقیه پارامترها روی صفر قرار داده شده است.

    برای نمایش رنگ سیاه باید تمام پارامترها با عدد 0 مقدار دهی شوند، اینگونه: (rgb(0, 0, 0.

    برای نمایش رنگ سفید باید تمام پارامترها با عدد 255 مقدار دهی شوند، اینگونه: (rgb(255, 255, 255.

    در مثال زیر چند رنگ با مقدار RGB مقدار دهی شده اند:

    مثال

    rgb(255, 0, 0)
    rgb(0, 0, 255)
    rgb(60, 179, 113)
    rgb(238, 130, 238)
    rgb(255, 165, 0)
    rgb(106, 90, 205)
    خودتان امتحان کنید »

    سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:

    مثال

    rgb(0, 0, 0)
    rgb(60, 60, 60)
    rgb(120, 120, 120)
    rgb(180, 180, 180)
    rgb(240, 240, 240)
    rgb(255, 255, 255)
    خودتان امتحان کنید »

    مقدار هگزادسیمال در CSS

    در CSS یک رنگ را می توان با مقدار هگزادسیمال به این صورت تعریف کرد: 

    #rrggbb

    که در آن rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمالی بین 00 تا ff (به صورت تقریبی مشابه 255 حالت البته در مبنای 16) هستند.

    مثال

    #ff0000
             #0000ff         
    #3cb371
    #ee82ee
    #ffa500
    #6a5acd
    خودتان امتحان کنید »

    سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:

    مثال

             #000000         
    #3c3c3c
    #787878
    #b4b4b4
    #f0f0f0
    #ffffff
    خودتان امتحان کنید »

    مقدار HSL در CSS

    در CSS یک رنگ را می توان با مقدار HSL به این صورت تعریف کرد: 

    hsl(hue, saturation, lightness)

    hue درجه ای از چرخه رنگ از 0 تا 360 است. 0 رنگ قرمز، 120 رنگ سبز و 240 رنگ آبی است.

    مقدار saturation از جنس درصد است، 0% به معنای سایه خاکستری و 100% به معنای رنگ کامل است.

    مقدار lightness نیز از جنس درصد است، 0% سیاه، 50% نه روشن و نه تاریک و 100% به معنای سفید است.

    مثال

    hsl(0, 100%, 50%)
    hsl(240, 100%, 50%)
    hsl(147, 50%, 47%)
    hsl(300, 76%, 72%)
    hsl(39, 100%, 50%)
    hsl(248, 53%, 58%)
    خودتان امتحان کنید »

    اشباع (saturation)

    saturation را می توان به عنوان شدت یک رنگ توصیف کرد.

    100% رنگ خالص است و سایه ای از خاکستری ندارد.

    50% خاکستری است اما هنوز هم می توانید رنگ آن را ببینید.

    0% کاملا خاکستری است و دیگر نمی توانید رنگ آن را ببینید.

    مثال

    hsl(0, 100%, 50%)
    hsl(0, 80%, 50%)
    hsl(0, 60%, 50%)
    hsl(0, 40%, 50%)
    hsl(0, 20%, 50%)
    hsl(0, 0%, 50%)
    خودتان امتحان کنید »

    روشنایی (lightness)

    شما می توانید از lightness برای تنظیم میزان روشنایی رنگتان استفاده کنید. 0% به معنای تاریکی (سیاه)، 50% به معنای نه روشن و نه تاریک و 100% بع معنای کاملا روشن (سفید) است.

    مثال

    hsl(0, 100%, 0%)
    hsl(0, 100%, 25%)
    hsl(0, 100%, 50%)
    hsl(0, 100%, 75%)
    hsl(0, 100%, 90%)
    hsl(0, 100%, 100%)
    خودتان امتحان کنید »

    سایه های خاکستری غالبا با تنظیم hue و saturation روی عدد صفر مشخص می شوند و برای رسیدن به سایه های خاکستری تیره تر یا روشن تر lightness را از 0 تا 100 تنظیم می کنند:

    مثال

    hsl(0, 0%, 0%)
    hsl(0, 0%, 24%)
    hsl(0, 0%, 47%)
    hsl(0, 0%, 71%)
    hsl(0, 0%, 94%)
    hsl(0, 0%, 100%)
    خودتان امتحان کنید »

    مقدار RGBA

    مقدار رنگ RGBA از همان فرمت RGB است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.

    مقدار رنگ RGBA در CSS به این صورت تعریف می شود:

    rgba(red, green, blue, alpha)

    پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:

    مثال

    rgba(255, 99, 71, 0)
    rgba(255, 99, 71, 0.2)
    rgba(255, 99, 71, 0.4)
    rgba(255, 99, 71, 0.6)
    rgba(255, 99, 71, 0.8)
    rgba(255, 99, 71, 1)
    خودتان امتحان کنید »

    مقدار HSLA

    مقدار رنگ HSLA از همان فرمت HSL است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.

    مقدار رنگ HSLA در CSS به صورت زیر تعریف می شود:

    hsla(hue, saturation, lightness, alpha)

    پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:

    مثال

    hsla(9, 100%, 64%, 0)
    hsla(9, 100%, 64%, 0.2)
    hsla(9, 100%, 64%, 0.4)
    hsla(9, 100%, 64%, 0.6)
    hsla(9, 100%, 64%, 0.8)
    hsla(9, 100%, 64%, 1)
    خودتان امتحان کنید »

    منبع

    https://www.w3schools.com/css/css_colors.asp

  • ۴ پسندیدم
  • ۰ نظر
    • چهارشنبه ۶ شهریور ۹۸

    نحوه اضافه کردن CSS به HTML

    مرورگر ها برای فرمت بندی اسناد HTML از کدهای CSS ای استفاده می کنند که آن سند HTML به آن ارجاع داده شده است. در این فصل از آموزش CSS شما با انواع روش های استفاده از کدهای CSS در یک سند HTML آسنا خواهید شد.



    سه روش برای اضافه کردن CSS به HTML

    کدهای CSS را به سه روش می توان به اسناد HTML اضافه کرد:

    • روش Inline یا در خط - با استفاده از صفت style به طور مستقیم کدهای CSS برای عناصر HTML استفاده شود.
    • روش Internal یا داخلی - با استفاده از عنصر <style> در قسمت <head> از سند HTML کدهای CSS اضافه شوند.
    • روش External یا خارجی - در این عناصر HTML با یک فایل CSS خارجی استایل دهی می شوند.

    روش External یا (خارجی)

    ز روش External برای دادن استایل به تعداد زیادی صفحه HTML استفاده می شود.

    در این روش به این دلیل که ما از یک فایل خارجی برای استایل دهی به تمام صفحات وب سایت استفاده می کنیم با تغییر کدهای تنها همین یک فایل می توانیم شاهد تغییر ظاهر همه ی صفحات وب سایت باشیم.

    در روش External برای ارجاع فایل خارجی CSS باید آدرس آن فایل CSS را در صفت href از عنصر <link> قرار داد.

    توجه داشته باشید که عنصر <link> فقط میتواند داخل بخش <head> از سند HTML قرار بگیرد و نباید از این عنصر در بخش های دیگر از سند HTML مانند بخش <body> استفاده شود:

    مثال

    در این مثال از یک فایل خارجی CSS برای استایل دهی به عناصر HTML استفاده شده است:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>
    خودتان امتحان کنید »

    یک فایل External (خارجی) CSS می تواند در هر ویرایشگر متنی نوشته شود. در این فایل نباید از تگ های HTML استفاده شود و باید با پسوند CSS. ذخیره شود.

    محتوای فایل CSS ای که در مثال بالا به آن ارجاع داده شده بود حاوی کدهای زیر است:

    "mystyle.css"

    body {
      background-color: lightblue;
    }

    h1 {
      color: navy;
      margin-left: 20px;
    }

    نکته: بین مقدار خاصیت (property) و واحد آن نباید فاصله قرار دهید (برای مثال margin-left: 20 px;) روش صحیح به این صورت است: (margin-left: 20px;)


    روش Internal (داخلی)

    از روش Internal برای دادن استایلی خاص به یک صفحه مشخص HTML استفاده می شود.

    در روش Internal کد های CSS در بخش <head> از صفحه ی HTML و در داخل عنصر <style> قرار می گیرند:

    مثال

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
    </style>
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>
    خودتان امتحان کنید »

    روش Inline (داخلی)

    از روش Inline برای دادن استایلی منحصر به فرد به یک عنصر HTML استفاده می شود.

    برای استفاده از روش Inline، صفت style را به عنصر مورد نظر اضافه کنید، صفت style می تواند حاوی هر ویژگی CSS ای باشد.

    در مثال زیر از این روش برای استایل دهی به دو عنصر p و h1 استفاده شده است:

    مثال

    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="color:blue;text-align:center;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

    </body>
    </html>
    خودتان امتحان کنید »

    تکته: روش Inline بسیاری از مزایای دو روش ریگر استفاده از CSS را ندارد و یکی از بهترین مزایای استفاده از زبان CSS که جداسازی محتوای سند HTML و CSS روش است را ندارد. پیشنهاد می شود که از Inline تنها در مواقع ضروری استفاده کنید.


    استفاده از چند استایل برای یک عنصر

    اگر چند ویژگی CSS برای استایل دهی به یک انتخاب کننده (Selector) در روش های مختلف استفاده از کدهای CSS استفاده شده باشد، مرورگر آخرین استایل تعریف شده برای عنصر بر روی آن اعمال می شود.

    فرض کنید که یک فایل External (خارجی) CSS دارای استایل زیر برای عنصر <h1> است:

    h1 {
      color: navy;
    }

    سپس، فرض کنید که استایل تعریف شده برای همان عنصر <h1> در روش Internal حاوی کدهای زیر است:

    h1 {
      color: orange;   
    }

    اگر استایل مشخص شده در روش Internal بعد از ارجاعی باشد که به استایل های فایل External داده ایم به ، به دلیل نکته ای که در بالا به آن اشاره کردیماولویت با روش استایل های روش Inline بوده و در نتیجه عنصر h1 به رنگ نارجی (orange) در خواهد آمد:

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style>
    h1 {
      color: orange;
    }
    </style>
    </head>
    خودتان امتحان کنید »

    اما اگر که ارجاعی به استایل های فایل External بعد از استایل های روش Internal باشد رنگ عنصر h1 به رنگ ناوی (navy) خواهد بود:

    <head>
    <style>
    h1 {
      color: orange;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    خودتان امتحان کنید »

    ترتیب اولویت ها در اعمال استایل

    وقتی که بیشتر از یک استایل برای یک عنصر HTML تعریف شده باشد، از چه استایلی استفاده می شود؟

    اولویت اعمال استایل بر روی یک عنصر HTML به صورت زیر است که در آن شماره یک بیشترین اولویت و شماره 3 کمترین اولویت را دارد:

    1. استایل تعریف شده در روش Inline دارای بالاترین اولویت برای اعمال روی عنصر است
    2. استایل در روش های Internal و External (در قسمت head) 
    3. استایل های تعریف شده پیشفرض مرورگر

    بنابراین استایل تعریف شده در روش Inline دارای بیشترین اولویت است و در صورت استفاده از این روش برای یک عنصر در یک یا چند ویژگی CSS مانند Color در صورتی که از ویژگی color برای آن عنصر در روش های Internal و External و یا پیشفرض مرورگر استفاده شده باشد همگی نادیده گرفته می شوند و استایل در نظر گرفته شده در روش Inline بر روی عنصر اعمال می شود.


    منبع

    https://www.w3schools.com/css/css_howto.asp

  • ۱ پسندیدم
  • ۰ نظر
    • چهارشنبه ۶ شهریور ۹۸

    جدول ها در HTML

    جدول ها در HTML کاربردهای فراوانی دارند. یکی از مهمترین کاربرد جدول ها دسته بندی و نمایش بهتر داده ها به کاربر است. در این فصل از آموزش HTML با نحوه ی ایجاد جدول ها آشنا خواهید شد.

    مثالی از یک جدول در HTML

    Company Contact Country
    Alfreds Futterkiste Maria Anders Germany
    Centro comercial Moctezuma Francisco Chang Mexico
    Ernst Handel Roland Mendel Austria
    Island Trading Helen Bennett UK
    Laughing Bacchus Winecellars Yoshi Tannamuri Canada
    Magazzini Alimentari Riuniti Giovanni Rovelli Italy
    خودتان امتحان کنید »

    تعریف یک جدول HTML

    یک جدول در HTML با تگ <table> تعریف می شود.

    هر ردیف جدول با استفاده از تگ <tr> تعریف می شود. سرتیتر های جدول داخل تگ <th> قرار می گیرند. به طور پیشفرض، سرتیتر های جدول بولد و وسط چین هستند.

    هر سلول جدول که داده ها در آن قرار می گیرد با استفاده از تگ <td> تعریف می شود.

    مثال

    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
    </table>
    خودتان امتحان کنید »

    نکته: عناصر <th> ظرف داده (data containers) جدول هستند. یعنی می توان داخل آن ها هر عنصر HTML دیگری مانند: عکس، فیلم، لیست ها، جداول دیگر و ... را قرار داد.


    اضافه کردن حاشیه (border) به جدول

    اگر برای جدولی حاشیه (border) مشخص نکنید، آن جدول بدون حاشیه (border) نشان داده می شود.

    حاشیه برای یک جدول با استفاده از صفت border تعریف می شود.

    مثال

    table, th, td {
      border: 1px solid black;
    }
    خودتان امتحان کنید »

    نکته: بیاد داشته باشید که حاشیه را هم برای جدول و هم برای سلول های جدول مشخص کنید.


    ویژگی border-collapse در جدول

    تعیین صفت border هم برای جدول و هم برای سلول های جدول باعث می شود که حاشیه جدول به صورت دوجداره شود. برای حل این مشکل از  از ویژگی border-collapse استفاده کنید:

    مثال

    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    خودتان امتحان کنید »

    اضافه کردن ویژگی padding به سلول های جدول

    ویژگی padding فاصله بین محتوای سلول و حاشیه (border) آن سلول را مشخص میکند.

    اگر ویژگی padding را مشخص نکنید، محتوای سلول های جدول به صورت پیشفرض بدون padding نمایش داده می شوند.

    برای مشخص کردن padding، از ویژگی padding استفاده می کنیم:

    مثال

    th, td {
      padding: 15px;
    }
    خودتان امتحان کنید »

    ویژگی text-align برای ترازبندی سرتیتر های جدول

    به صورت پیشفرض، سرتیتر های جدول بولد و وسط چین هستند.

    برای تراز بندی سرتیتر های جدول از ویژگی text-align در CSS استفاده می کنیم، در مثال زیر سرتیتر های جدول چپ چین شده اند:

    مثال

    th {
      text-align: left;
    }
    خودتان امتحان کنید »

    ویژگی border-spacing برای فاصله بین سلول های جدول

    ویژگی border-spacing فضای بین سلول های جدول را مشخص می کند.

    برای تنظیم فاصله سلول ها، از ویژگی border-spacing در CSS استفاده کنید.

    مثال

    table {
      border-spacing: 5px;
    }
    خودتان امتحان کنید »

    نکته: به طور همزمان نمی توان از دو ویژگی border-collapse و border-spacing استفاده کرد. اگر از border-collapse برای جدولتان استفاده کرده باشید استفاده از ویژگی border-spacing هیچ تاثیری روی جدولتان نمی گذارد. دلیل این اتفاق این است که ویژگی border-collapse باعث صفر شدن فضای بین سلول های جدول می شود.


    ویژگی colspan برای یکی کردن ستون های جدول

    اگر یک سلول به فضایی بیشتر از یک ستون نیاز داشته باشد از ویژگی colspan استفاده می کنیم:

    مثال

    <table style="width:100%">
      <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
      </tr>
      <tr>
        <td>Bill Gates</td>
        <td>55577854</td>
        <td>55577855</td>
      </tr>
    </table>
    خودتان امتحان کنید »

    ویژگی rowspan برای یکی کردن ردیف های جدول

    اگر یک سلول به فضایی بیشتر از یک ردیف نیاز داشته باشد از ویژگی rowspan استفاده می کنیم:

    مثال

    <table style="width:100%">
      <tr>
        <th>Name:</th>
        <td>Bill Gates</td>
      </tr>
      <tr>
        <th rowspan="2">Telephone:</th>
        <td>55577854</td>
      </tr>
      <tr>
        <td>55577855</td>
      </tr>
    </table>
    خودتان امتحان کنید »

    ویژگی Caption برای اضافه کردن عنوان به جدول

    برای اضافه کردن یک عنوان به جدول از تگ <caption> استفاده کنید:

    مثال

    <table style="width:100%">
      <caption>Monthly savings</caption>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$50</td>
      </tr>
    </table>
    خودتان امتحان کنید »

    نکته: تگ <caption> باید بلافاصله بعد از تگ <table> قرار بگیرد.


    یک استایل خاص برای یک جدول

    برای تعریف یک استایل خاص برای یک جدول خاص، صفت id را به آن جدول اضافه کنید:

    مثال

    <table id="t01">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
    </table>

    حالا بعد از اضافه کردن id به جدول می توانید یک استایل خاص را به روش زیر برای آن جدول تعریف کنید:

    table#t01 {
      width: 100%;
      background-color: #f1f1c1;
    }
    خودتان امتحان کنید »

    و به روش زیر استایل های بیشتری برای جدولتان تعریف کنید:

    table#t01 tr:nth-child(even) {
      background-color: #eee;
    }
    table#t01 tr:nth-child(odd) {
      background-color: #fff;
    }
    table#t01 th {
      color: white;
      background-color: black;
    }
    خودتان امتحان کنید »

    منبع

    https://www.w3schools.com/html/html_tables.asp

  • ۴ پسندیدم
  • ۱ نظر
    • دوشنبه ۴ شهریور ۹۸

    Selector ها در CSS


    از انتخاب کننده ها (Selectors) در CSS برای پیدا کردن (یا مشخص کردن) عنصر HTML ای استفاده می شود که می خواهیم استایل مورد نظرمان را روی آن اعمال کنیم.

    Selector ها را در CSS می توان به 5 دست کلی تقسیم کرد:

    • انتخاب کننده های (Selectors) ساده (انتخاب عناصر بر اساس نام، id و یا کلاس (Class))
    • انتخاب کننده های (Selectors) ترکیبی (انتخاب عناصر بر اساس یک رابطه خاص بین آن ها انتخاب کنید)
    • انتخاب کننده های (Selectors) شبه Class (انتخاب عناصر بر اساس یک وضعیت خاص انتخاب کنید)
    • انتخاب کننده های (Selectors) شبه عنصر (انتخاب بخشی از عنصر و دادن استایل به آن)
    • انتخاب کننده های (Selectors) صفت (انتخاب صفت (attributes) یک عنصر و دادن استایل به آن)

    در این قسمت از آموزش CSS دسته اول یعنی انتخاب کننده ها (Selectors) ساده بررسی می شوند و دسته های دیگر در فصل های بعدی به صورت کامل آموزش داده خواهند شد.


    انتخاب کننده ی عنصر در CSS

    این انتخاب کننده (Selector)، عنصر HTML را بر اساس نام آن عنصر انتخاب و پیدا می کند.

    مثال

    در مثال زیر همه ی عناصر <p> در وسط صفحه قرار می گیرند و رنگ متن شان قرمز می شود: 

    p {
      text-align: center;
      color: red;
    }
    خودتان امتحان کنید »

    انتخاب کننده ی id 

    انتخاب کننده ی id، از صفت id یک عنصر برای انتخاب یک عنصر خاص استفاده می کند.

    id یک عنصر در یک صفحه منحصر به فرد است، بنابراین از انتخاب کننده ی id تنها برای انتخاب یک عنصر منحصر به فرد استفاده می شود!

    برای انتخاب یک عنصر یا یک id خاص، در ابتدای Selector علامت هشتگ (#) را قرار داده و به دنبال آن id عنصر را می نویسیم.

    مثال

    استایل CSS زیر فقط بر روی عنصری با شناسه "id="para1 اعمال می شود:

    #para1 {
      text-align: center;
      color: red;
    }
    خودتان امتحان کنید »

    نکته: شناسه id نمی تواند با عدد شروع شود.


    انتخاب کننده ی Class

    انتخاب کننده ی Class، یک عنصر با یک صفت class خاص را انتخاب می کند.

    برای انتخاب یک عنصر یا یک class خاص، در ابتدای Selector علامت نقطه (.) را قرار داده و به دنبال آن class عنصر را می نویسیم.

    مثال

    استایل زیر بر روی همه ی عناصر با کلاس "class="center اعمال میشود: 

    .center {
      text-align: center;
      color: red;
    }
    خودتان امتحان کنید »

    همچنین به روش زیر می توانید مشخص کنید که عناصر HTML خاصی باید تحت تاثیر یک کلاس قرار بگیرند.

    مثال

    استایل CSS در این مثال فقط بر روی عناصر <p> دارای کلاس "class="center اعمال می شود: 

    p.center {
      text-align: center;
      color: red;
    }
    خودتان امتحان کنید »

    همچنین عناصر HTML می توانند چندین مقدار برای صفت class داشته باشند.

    مثال

    در این مثال عنصر <p> توسط هر دو کلاس center و large استایل دهی می شود: 

    <p class="center large">This paragraph refers to two classes.</p>
    خودتان امتحان کنید »

    نکته: class نمی تواند با عدد شروع شود.


    انتخاب کننده همگانی

    انتخاب کننده (*) استایل مد نظر شما را روی همه ی عناصر HTML در یک صفحه اعمال می کند.

    مثال

    استایل CSS زیر روی هر عنصر موجود در صفحه تاثیر می گذارد: 

    * {
      text-align: center;
      color: blue;
    }
    خودتان امتحان کنید »

    انتخاب کننده های گروهی

    انتخاب کننده های گروهی برای تعریف عناصر HTML با استایل یکسان کاربرد دارند.

    به کد CSS مثال زیر توجه کنید (عناصر h1 و h2 و p استایل یکسانی دارند):

    h1 {
      text-align: center;
      color: red;
    }

    h2 {
      text-align: center;
      color: red;
    }

    p {
      text-align: center;
      color: red;
    }

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

    در این روش هر انتخاب کنند به وسیله کاما (,) از انتخاب کننده های دیگر جدا می شود.

    مثال

    انتخاب کننده گروهی نمونه کد بالا به صورت زیر نوشته می شود: 

    h1, h2, p {
      text-align: center;
      color: red;
    }
    خودتان امتحان کنید »

    منبع

    https://www.w3schools.com/css/css_selectors.asp

  • ۳ پسندیدم
  • ۱ نظر
    • يكشنبه ۳ شهریور ۹۸

    نحوه استفاده (Syntax) از CSS


    قواعد نوشتاری CSS

    هر خط از کدهای CSS شامل دو بخش انتخاب کننده (Selector) و بلاک اعلان (Declaration block) است:

    selector 

    بخش انتخاب کننده (Selector) به عنصر HTML مورد نظری اشاره دارد که می خواهیم استایلی را روی آن اعمال کنیم.

    بخش بلاک اعلان (Declaration block) شامل یک یا چند اعلان (Declaration) است که توسط نقطه ویرگول (;) از هم جدا شده اند.

    هر اعلان (Declaration) خود شامل دو بخش: نام یک خاصیت (Property) و مقداری (Value) برای آن خاصیت است.

    اعلان ها (Declaration) همیشه توسط نقطه ویرگول (;) پایان می یابند، و هر بلوک اعلان (Delcaration block) توسط یک جفت بریس ({}) احاطه می شود.

    مثال

    در مثال زیر همه عناصر <p> وسط چین شده و رنگ متن شان به قرمز تغییر پیدا کرده است:

    p {
      color: red;
      text-align: center;
    }
    خودتان امتحان کنید »

    کامنت ها در CSS

    از کامنت ها در CSS برای نوشتن توضیحی درباره قسمتی از کد ها استفاده می شود، و این توضیحات ممکن است در آینده  به شما برای ویرایش این کد ها کمک کند.

    کامنت ها توسط مرورگرها نادیده کرفته می شوند و برای کاربران وبسایت شما نمایش داده نمی شوند.

    مثال

    کامنت ها در CSS با */ شروع می شوند و با /* پایان می یابند. همچنین کامنت ها می توانند به دو صورت تک خطی و چند خطی مورد استفاده قرار بگیرند: 

    p {
      color: red;
      /* This is a single-line comment */
      text-align: center;
    }

    /* This is
    a multi-line
    comment */
    خودتان امتحان کنید »

    منبع

    https://www.w3schools.com/css/css_syntax.asp

  • ۱ پسندیدم
  • ۰ نظر
    • شنبه ۲ شهریور ۹۸

    معرفی CSS


    CSS چیست؟

    • CSS مخفف عبارت Cascading Style Sheet به معنی الگوهای آبشاری است
    • CSS نحوه نمایش عناصر HTML را روی صفحه نمایش، کاغذ و یا دیگر رسانه ها مشخص می کند
    • استفاده از CSS باعث کم تر شدن کدنویسی می شود، زیرا تنها یک فایل CSS می تواند ظاهر چندین صفحه وب را به طور همزمان کنترل کند
    • در روش External (خارجی) کدهای CSS در یک فایل با پسوند css. ذخیره می شوند

    استایل دهی به یک صفحه HTML با چندین فایل CSS

    یکی دیگر از مزیت های استفاده از کدهای CSS در یک فایل External (خارجی، فایلی با پسوند CSS.) این است که می توان با ایجاد تغییر در این کدها ظاهر همه ی صفحات وبسایتی را که از این فایل برای استایل دهی به صفحات خود استفاده می کند تغییر داد. همچنین می توان از چندین فایل CSS برای استایل دهی به یک صفحه وب استفاده کرد.

    در زیر یک صفحه HTML نمایش داده شده که با چهار فایل CSS مختلف استایل دهی شده است. برای مشاهده صفحه HTML زیر با استایل های مختلف می توانید بر روی هر یک از دکمه های "Stylesheet 1" یا "Stylesheet 2" یا "Stylesheet 3" و یا "Stylesheet 4" کلیک کنید:


    چرا از CSS استفاده می کنیم؟

    استفاده از CSS برای طراحی صفحات وب دلایل متعددی دارد. مانند: طراحی ظاهر و چیدمان عناصر صفحات وب

    همچنین با استفاده از CSS می توان مشخص کرد که صفحات وب در صفحه نمایش دستگاه های مختلف (مانند: موبایل، تبلت، کامپیوتر و...) چگونه نمایش داده شوند.


    CSS مشکل بزرگی را حل کرده است

    در زبان HTML تگ ها هرگز به منظور استایل دهی و فرمت بندی صفحات وب ایجاد نشدند.

    HTML تنها برای توصیف محتوای صفحات وب ایجاد شده است، مانند:

    <h1>This is a heading</h1>

    <p>This is a paragraph.</p>

    هنگامی که تگ هایی مانند <font> و صفاتی مانند color به HTML v3.2 اضافه شدند، کابوس توسعه دهندگان وب شروع شد. توسعه وبسایت های بزرگی که هر صفحه آن نیاز به اطلاعاتی در مورد فونت و رنگ داشت، به فرآیندی طولانی و گرانقیمت تبدیل شد.

    برای حل این مشکل W3C (کنسرسیوم جهانی وب)، زبان CSS را ایجاد کرد.

    با زبان CSS مشکل بالا حل شد و دیگر به بسیاری از تگ های HTML ای که برای استایل دهی صفحات وب طراحی شده بودند نیازی نبود و این تگ ها حذف شدند.


    منبع

    https://www.w3schools.com/css/css_intro.asp

  • ۲ پسندیدم
  • ۱ نظر
    • جمعه ۱ شهریور ۹۸

    آموزش CSS

  • ۱ پسندیدم
  • ۴ نظر
    • جمعه ۱ شهریور ۹۸

    تصاویر در HTML


    امروزه از تصاویر تقریبا در همه ی صفحات وب استفاده شده است، زیرا تصاویر طراحی و ظاهر صفحات وب را بهتر و زیباتر می کنند. در این فصل به آموزش استفاده از تصاویر در صفحات HTML و همچنین معرفی و استفاده از صفات و ویژگی های آن پرداخته ایم. 


    مثال

    <img src="pic_trulli.jpg" alt="Italian Trulli">
    خودتان امتحان کنید »

    مثال

    <img src="img_girl.jpg" alt="Girl in a jacket">
    خودتان امتحان کنید »

    مثال

    <img src="img_chania.jpg" alt="Flowers in Chania">
    خودتان امتحان کنید »

    نحوه استفاده از تصاویر در HTML

    در HTML تصاویر با تگ <img> تعریف می شوند.

    تگ <img> از نوع عناصر خالی یا empty است، این تگ تنها حاوی صفات یا attribute ها است و فاقد تگ پایانی است.

    صفت src آدرس URL تصویری را که می خواهیم از آن استفاده کنیم مشخص می کند.

    <img src="url">

    صفت alt

    اگر کاربر به هر دلیلی تنواند تصویر را مشاهده کند (به دلیل سرعت پایین اینترنت، خطایی در صفت src، یا اگر کاربر از نرم افزارهای خواننده صفحه یا screen reader استفاده کند)، مقدار یا value ای که برای صفت alt تعریف شده به کاربر نشان داده می شود.

    مقدار صفت alt باید به موضوع تصویر مرتبط باشد:

    مثال

    <img src="img_chania.jpg" alt="Flowers in Chania">
    خودتان امتحان کنید »

    همچنین اگر مرورگر نتواند تصویری را پیدا کند، مقدار صفت alt را به جای آن نمایش می دهد:

    مثال

    <img src="wrongname.gif" alt="Flowers in Chania">
    خودتان امتحان کنید »

    نکته: استفاده از صفت alt لازم است. استفاده نکردن از این صفت باعث پایین آمدن اعتبار صفحه شما نزد موتورهای جستجو می شود.


    اندازه تصاویر - عرض و ارتفاع

    شما می توانید با استفاده از صفت style برای مشخص کردن عرض (width) و ارتفاع (height) یک تصویر استفاده کنید:

    مثال

    <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
    خودتان امتحان کنید »

    روشی دیگر برای مشخص کردن عرض و ارتفاع یک تصویر استفاده از صفات width و height است:

    مثال

    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
    خودتان امتحان کنید »

    صفات width و height همیشه عرض و ارتفاع تصاویر را در واحد پیکسل مشخص می کنند.

    نکته: همیشه عرض و ارتفاع تصاویر را مشخص کنید. اگر عرض و ارتفاع تصویر مشخص نشده باشد، در حین بارگیری تصویر صفحه وب سایت می لرزد.


    استفاده از صفات width و height بهتر است یا صفت style؟

    قبل از پاسخ به این سوال باید بگوییم که استفاده از هر سه صفت width و height و style در HTML معتبر است.

    با این حال، ما پیشنهاد می کنیم از صفت style استفاده کنید، به این دلیل که این کار مانع از تعییر اندازه تصویر شما به دلیل استفاده از فایل های CSS در روش های internal و  External می شود:

    مثال

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {
      width: 100%;
    }
    </style>
    </head>
    <body>

    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
    <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

    </body>
    </html>
    خودتان امتحان کنید »

    استفاده از تصویری در پوشه دیگر

    اگر در صفت src تنها نام تصویر را استفاده کنیم، مرورگر انتظار دارد که تصویر را در همان پوشه ای پیدا کند که آن صفحه وب در آن قرار دارد.

    با این حال، ذخیره کردن تصویر در یک زیر پوشه معمول تر است. بعد از قرار دادن تصویر در یک زیر پوشه باید نامه آن پوشه را به همراه نام تصویر به روش زیر در صفت src وارد کنید.

    مثال

    <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
    خودتان امتحان کنید »

    استفاده از تصویری در سرور دیگر

    ممکن است که بعضی از وبسایت ها تصاویر خود را روی سرورهایی که فقط برای ذخیره تصاویر هستند دخیره کنند و یا بخواهند از تصویری که روی سروری دیگری وجود دارد استفاده کنند.

    در واقع، شما می توانید به هر تصویری در سطح وب به واسطه آدرس URL کامل آن تصویر دسترسی داشته باشید. در مثال زیر با استفاده از همین روش از یک تصویر استفاده شده است:

    مثال

    <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    خودتان امتحان کنید »

    تصاویر متحرک

    در HTML استفاده از تصاویر متحرک یا Gif ها مجاز است. شما به روش زیر می توانید از گیف ها استفاده کنید:

    مثال

    <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
    خودتان امتحان کنید »

    استفاده از تصویر به عنوان لینک

    برای استفاده از تصویر به عنوان لینک، تگ <img> را درون تگ <a> قرار دهید:

    مثال

    <a href="default.asp">
      <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
    </a>
    خودتان امتحان کنید »

    نکته: مقدار border:0; که به مثال بالا اضافه شده، به این دلیل است که در مرورگر IE9 (و نسخه های پایین تر) به صورت پیشفرض یک بوردر به عکس های لینک شده اضافه می گردد.


    استفاده از صفت float برای تصاویر

    شما می توانید با استفاده از صفت float استفاده کنید تا اجازه دهید که تصویر در سمت راست یا چپ متن قرار بگیرد:

    مثال

    <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
    The image will float to the right of the text.</p>

    <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
    The image will float to the left of the text.</p>
    خودتان امتحان کنید »

    تبدیل کردن تصویر به نقشه

    تگ <map> یک image-map را تعریف می کند. یک image-map تصویری است که نواحی مختلف آن قابل کلیک کردن است.

    در تصویر زیر شما میتوانید بر روی رایانه، تلفن و یا فنجان قهوه کلیک کنید:

    Workplace

    Sun Mercury Venus

    مثال

    <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

    <map name="workmap">
      <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
      <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
      <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
    </map>
    خودتان امتحان کنید »

    صفت name در تگ <map> به صفت usename در تگ <img> مرتبط است، همچنین این دو صفت باعث ایجاد ارتباط بین این دو تگ می شوند.

    عنصر <map> شامل تعدادی تگ <area> نیز هست که مناطق قابل کلیک در image-map را تعریف می کنند.


    استفاده از تصویر به عنوان پس زمینه

    برای استفاده از تصویر به عنوان پس زمینه یک عنصر HTML، از خاصیت background-image مانند مثال زیر استفاده کنید:

    مثال

    برای اضافه کردن عکس پس زمینه به یک صفحه وب، خاصیت background-image را به عنصر <body> اضافه کنید:

    <body style="background-image:url('clouds.jpg');">

    <h2>Background Image</h2>

    </body>
    خودتان امتحان کنید »

    مثال

    برای اضافه کردن عکس پس زمینه به یک پاراگراف، خاصیت background-image را به عنصر <p> اضافه کنید:

    <body>

    <p style="background-image:url('clouds.jpg');">
    ...
    </p>

    </body>
    خودتان امتحان کنید »

    عنصر <picture> در  HTML

    HTML5 عنصر <picture> را معرفی کرد تا انعطاف پذیری بیشتری برای مشخص کردن منابع تصویر و جود داشته باشد.

    عنصر <picture> حاوی تعدادی عنصر <source> است که برای هر یک منبع تصویری متفاوت تعریف می شود. به این ترتیب مرورگر می تواند تصویری متناسب با صفحه نمایش ای که در آن نمایش داده می شود انتخاب کند.

    هر عنصر <source> دارای صفاتی است که توصیف می کند، کدام تصویر مناسب تر است.

    مرورگر اولین عنصر <source> را که مناسب باشد (با توجه به مقادیری که برای صفت آن مشخص شده است)، انتخاب می کند و بقیه ی عناصر <source> زیر آن را نادیده می گیرد.

    مثال

    تصویر اول تا زمانی نشان داده می شود که عرض پنجره مرورگر بیشتر از 650 پیکسل باشد و تصویر دوم زمانی که عرض پنجره ی مرورگر بین 465 تا 650 پیکسل باشد نمایش داده می شود، تصویر سوم نیز زمانی نشان داده میشود که عرض پنجره مرورگر از 450 پیکسل کمتر شود.

    <picture>
      <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
      <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
      <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
    </picture>
    خودتان امتحان کنید »

    توجه: همیشه یک عنصر <img> را به عنوان آخرین زیر عنصر <picture> اضافه کنید. اگر عنصر <picture> توسط مرورگر پشتیبانی نشود و یا اگر هیچ یک از تگ های <source> با یکدیگر مطابقت نداشته باشند، مرورگر از عنصر <img> استفاده می کند.


    نرم افزارهای خواننده صفحه (Screen Readers)

    خواننده صفحه نمایش یک نرم افزار است که کدهای HTML را می خواند و آن ها را به متن تبدیل می کند و سپس به کاربر اجازه می دهد تا به محتوای صفحات وب گوش دهد. نرم افزارهای خواننده صفحه نمایش برای افراد نابینا و یا افرادی که اختلال یادگیری دارند مفید است.


    منبع

    https://www.w3schools.com/html/html_images.asp

  • ۸ پسندیدم
  • ۵ نظر
    • يكشنبه ۲۰ مرداد ۹۸