طراحی سایت

جلسه ۶: درباره CSS در طراحی سایت

web15 ساعت پیش
۰

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

  • مقدمه
  • پیوند CSS با HTML
  • Inline CSS
  • CSS داخلی
  • CSS خارجی
  • تکنیک های صفحه آرایی
  • تصاویر متحرک
  • پیش پردازنده ها
  • SASS & LESS
  • دانش خود از CSS امتحان کنید!

مقدمه

CSS ، مانند HTML ، یک زبان برنامه نویسی نیست ، یک زبان برای تغییرات ظاهری HTML است. برای درک CSS ، لازم است هدف اصلی HTML را بیاد آورید. HTML در ابتدا به عنوان یک زبان ساختاری طراحی شده بود ، اما با گذشت زمان و به روزرسانی ها ، به ابزاری برای ارائه ظاهری تبدیل شده است که از قلم ها ، رنگ ها و سایر عناصر بصری استفاده می کند. هدف CSS این است که HTML را به عنوان یک زبان ساختاری به وضعیت اصلی خود برگرداند. به عبارت دیگر ، CSS راهی برای قالب و بندی طرح بندی صفحه ، متن ، فونت ها ، تصاویر و تقریباً هر چیزی است که ظاهر و احساس صفحه وب شما را کنترل می کند.

ایجاد ارتباط بین فایل CSS و HTML

سه روش برای افزودن CSS به کد HTML وجود دارد.

Inline CSS

هنگامی که به تگ های ‌ HTML استایل بدهیم، ، ”style-inline" اضافه ورده ایم. این روش ناکارآمد است زیرا باید در هر یک از تگ ها CSS را در آن قرار گیرد. این روش معمولاً هرگز استفاده نمی شود زیرا بسیار غیر عملی است.

<h3 style ="color:blue">Blue Heading!</h3>

خروجی کد بالا:

Blue Heading!

CSS داخلی

برای تعریف سبک یک تگ خاص می توانید از تگ های <style> در تگ <head> استفاده کنید. به عنوان مثال ، در مثال زیر ، همه عناوین h3 به رنگ آبی تعریف شده اند. این روش به وضوح از استفاده درون خطی CSS بهتر است زیرا این باعث می شود کد تکراری نوشته نشود ، خواندن و نوشتن آن آسان تر و به طور کلی کارآمد تر باشد.

Internal CSS

<html>
 <head>
  <style>
   h3 {color: blue;}
  </style>
 </head>
 <body>
   <h3>Internal CSS</h3>
 </body>
</html>

CSS خارجی

CSS معمولاً در یک فایل جداگانه نوشته می شود و با HTML مرتبط می شود. مزیت این کار این است که توسط سایر فایل های HTML قابل استفاده مجدد است ، به روزرسانی آن ساده تر شده و صفحات وب می توانند برای کاربران ، مرورگرها و سیستم عامل های مختلف طراحی شوند. شما می توانید این کار را با نوشتن یک تگ لینک بسته شده در تگ <head> خود مانند موارد زیر انجام دهید ،

<link rel="stylesheet" href="cssfilename.css">

ویژگی rel از عنصر لینک بالا به HTML می گوید که یک فایل CSS را وارد کند.

<html>
 <head>
   <link rel=”stylesheet” href=”styles.css”>
 </head>
 <body>
   <h3>External CSS</h3>
 </body>
</html>
css:
 
h3{
  color: blue;
}

تکنیک های صفحه آرایی

تکنیک های صفحه آرایی CSS راهی کارآمد برای چیدمان ، ترازبندی و توزیع فضا در بین عناصر موجود در صفحه شما فراهم می کنند ، حتی در صورت پویایی یا ناشناخته بودن سایز عناصر. برخی از تکنیک های ضروری صفحه آرایی شامل Flexbox و Grid است. برای کسب اطلاعات بیشتر در مورد Flexbox ، دوره ما را بررسی کنید Flexbox: هر آنچه لازم است بدانید!

تصاویر متحرک

CSS حتی راهی برای متحرک سازی عناصر HTML بدون نیاز به استفاده از JavaScript یا Flash در اختیار ما قرار می دهد! بنابراین می توانید با CSS خام همه چیز را جابجا کنید. به عنوان مثال. ۵-۱۰ ثانیه به آن فرصت دهید تا اجرا شود.

html:

<!– Code taken from https://codepen.io/Mark_Bowley/pen/mEtqj –>
<html>
 <head>
 </head>
 <body>
<div id=”background-wrap”>
    <div class=”bubble x1″></div>
    <div class=”bubble x2″></div>
    <div class=”bubble x3″></div>
    <div class=”bubble x4″></div>
    <div class=”bubble x5″></div>
    <div class=”bubble x6″></div>
    <div class=”bubble x7″></div>
    <div class=”bubble x8″></div>
    <div class=”bubble x9″></div>
    <div class=”bubble x10″></div>
</div> </body>
</html>

css:

body {
    background: #۰۰b4ff;
    color: #۳۳۳;
    font: ۱۰۰% Lato, Arial, Sans Serif;
    height: ۱۰۰vh;
    margin: ۰;
    padding: ۰;
    overflow-x: hidden;
}

#background-wrap {
    bottom: ۰;
    left: ۰;
    position: fixed;
    right: ۰;
    top: ۰;
    z-index: -۱;
}

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
    ۰% {
        margin-top: ۱۰۰۰px;
    }
    ۱۰۰% {
        margin-top: -۱۰۰%;
    }
}

@-moz-keyframes animateBubble {
    ۰% {
        margin-top: ۱۰۰۰px;
    }
    ۱۰۰% {
        margin-top: -۱۰۰%;
    }
}

@keyframes animateBubble {
    ۰% {
        margin-top: ۱۰۰۰px;
    }
    ۱۰۰% {
        margin-top: -۱۰۰%;
    }
}

@-webkit-keyframes sideWays { 
    ۰% { 
        margin-left:0px;
    }
    ۱۰۰% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    ۰% { 
        margin-left:0px;
    }
    ۱۰۰% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    ۰% { 
        margin-left:0px;
    }
    ۱۰۰% { 
        margin-left:50px;
    }
}

/* ANIMATIONS */

.x1 {
    -webkit-animation: animateBubble ۲۵s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۵s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    animation: animateBubble ۲۵s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    
    left: -۵%;
    top: ۵%;
    
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}

.x2 {
    -webkit-animation: animateBubble ۲۰s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۰s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    animation: animateBubble ۲۰s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    
    left: ۵%;
    top: ۸۰%;
    
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x3 {
    -webkit-animation: animateBubble ۲۸s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۸s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    animation: animateBubble ۲۸s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    
    left: ۱۰%;
    top: ۴۰%;
    
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
}

.x4 {
    -webkit-animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
    animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
    
    left: ۲۰%;
    top: ۰;
    
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x5 {
    -webkit-animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    
    left: ۳۰%;
    top: ۵۰%;
    
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x6 {
    -webkit-animation: animateBubble ۲۱s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۱s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    animation: animateBubble ۲۱s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    
    left: ۵۰%;
    top: ۰;
    
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.x7 {
    -webkit-animation: animateBubble ۲۰s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۰s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    animation: animateBubble ۲۰s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    
    left: ۶۵%;
    top: ۷۰%;
    
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x8 {
    -webkit-animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
    animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
    
    left: ۸۰%;
    top: ۱۰%;
    
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x9 {
    -webkit-animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
    
    left: ۹۰%;
    top: ۵۰%;
    
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}

.x10 {
    -webkit-animation: animateBubble ۲۶s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    -moz-animation: animateBubble ۲۶s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    animation: animateBubble ۲۶s linear infinite, sideWays ۲s ease-in-out infinite alternate;
    
    left: ۸۰%;
    top: ۸۰%;
    
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

/* OBJECTS */

.bubble {
    -webkit-border-radius: ۵۰%;
    -moz-border-radius: ۵۰%;
    border-radius: ۵۰%;
    
    -webkit-box-shadow: ۰ ۲۰px ۳۰px rgba(0, ۰, ۰, ۰٫۲), inset ۰px ۱۰px ۳۰px ۵px rgba(255, ۲۵۵, ۲۵۵, ۱);
    -moz-box-shadow: ۰ ۲۰px ۳۰px rgba(0, ۰, ۰, ۰٫۲), inset ۰px ۱۰px ۳۰px ۵px rgba(255, ۲۵۵, ۲۵۵, ۱);
    box-shadow: ۰ ۲۰px ۳۰px rgba(0, ۰, ۰, ۰٫۲), inset ۰px ۱۰px ۳۰px ۵px rgba(255, ۲۵۵, ۲۵۵, ۱);
    
    height: ۲۰۰px;
    position: absolute;
    width: ۲۰۰px;
}

.bubble:after {
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) ۰%, rgba(255,255,255,0) ۷۰%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, ۰px, center center, ۱۰۰%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) ۰%,rgba(255,255,255,0) ۷۰%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) ۰%,rgba(255,255,255,0) ۷۰%); /* Opera ۱۲+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) ۰%,rgba(255,255,255,0) ۷۰%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) ۰%,rgba(255,255,255,0) ۷۰%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#80ffffff’, endColorstr=’#00ffffff’,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    -webkit-border-radius: ۵۰%;
    -moz-border-radius: ۵۰%;
    border-radius: ۵۰%;
    
    -webkit-box-shadow: inset ۰ ۲۰px ۳۰px rgba(255, ۲۵۵, ۲۵۵, ۰٫۳);
    -moz-box-shadow: inset ۰ ۲۰px ۳۰px rgba(255, ۲۵۵, ۲۵۵, ۰٫۳);
    box-shadow: inset ۰ ۲۰px ۳۰px rgba(255, ۲۵۵, ۲۵۵, ۰٫۳);
    
    content: “”;
    height: ۱۸۰px;
    left: ۱۰px;
    position: absolute;
    width: ۱۸۰px;
}

پیش پردازنده ها

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

SASS & LESS

SASS و LESS پسوندهای زبان برای CSS هستند که به شما امکان می دهد از ساختارهای برنامه نویسی معمولی مانند متغیرها ، شرط ها و حلقه ها برای تولید CSS استفاده کنید. پیش پردازنده CSS کد SASS را به CSS معمولی تبدیل می کند

آزمون:

0
ایجاد شده در

Quiz 40

1 / 5

کدام یک از موارد زیر هنگام پیوند دادن CSS و HTML یک عمل خوب در نظر گرفته می شود؟

2 / 5

CSS به حفظ ماهیت ساختاری HTML کمک می کند

3 / 5

CSS به ایجاد پویایی بیشتر در صفحات وب کمک می کند

4 / 5

CSS یک زبان برنامه نویسی است

5 / 5

پردازنده CSS چه کاری انجام می دهد؟

امتیاز شما

میانگین امتیازها 0%

LinkedIn Facebook Twitter
0%

در درس بعدی ، ما با محبوب ترین زبان برنامه نویسی جهان ، JavaScript آشنا می شویم!

web15 ساعت پیش
۰
تصویر web

web

نوشته های مشابه

جلسه ۷۱: نتیجه در CSS

آگوست 25, 2021
آموزش طراحی سایت

آموزش طراحی سایت

اکتبر 19, 2021

جلسه ۵۴: چگونه گرادیان های خطی واقعاً کار می کنند در CSS

آگوست 19, 2021

جلسه ۱۰: برنامه نویسی Back-End در طراحی سایت

سپتامبر 21, 2021

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا