|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<!-- <link rel="preload" as="font" href="https://rupic.ir/wp-content/themes/pooshe/dist/font/iransans/fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2" type="font/woff2"> -->
|
|
|
<title>Document</title>
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic&display=swap" rel="stylesheet">
|
|
|
<style>
|
|
|
/* @font-face {
|
|
|
font-family: "lato";
|
|
|
src: url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:wght@400;500;700&family=Roboto:wght@400;700&family=Staatliches&display=swap');
|
|
|
} */
|
|
|
|
|
|
body {
|
|
|
font-family: 'Noto Sans Arabic', sans-serif;
|
|
|
}
|
|
|
|
|
|
.box-model {
|
|
|
background-color: #919191;
|
|
|
color: #ffffff;
|
|
|
width: 300px;
|
|
|
height: 300px;
|
|
|
border: 3px solid #000;
|
|
|
/* padding: top right bottom left */
|
|
|
padding: 10px;
|
|
|
margin: 30px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
<!--
|
|
|
زبان هایی زبان برنامه نویسی هستند که بتوانند پردازش اطلاعات را داشته باشند
|
|
|
اما سی اس اس این توانایی را ندارد و صرفا یک سری کار های بصری انجام می دهند
|
|
|
راهکار هایی را برای نشان دادن این که چکونه المان ها در صفحه نشان داده شوند ارایه میدهد
|
|
|
هر چه نام سلکتور ها خلاصه تر باشد برای سئو بهتر است .
|
|
|
override:
|
|
|
می توان در استایل ها از بالا به پایین کامپایل میشوند
|
|
|
سلسله مراتب از بالا به پایین است.
|
|
|
|
|
|
المان ها میتوانند بیش از یک کلاس داشته باشند
|
|
|
این مورد فقط در مورد کلاس صدق میکند
|
|
|
|
|
|
اولویت ایدی از کلاس بیشتر است
|
|
|
-->
|
|
|
|
|
|
<!--box model
|
|
|
تمامی المان ها در ماهیت باکس هستند
|
|
|
اما ساختار آنها را میتوان عوض کرد که به ط.ر مثال یک قلب یا یک دایره باشند
|
|
|
padding amd margin به اندازه المان اضافه میشوند و به طول و عرض المان تاثیر میگذارند
|
|
|
|
|
|
در نهایت تمامی المان ها در صفحه به صورت مستطیل هستند
|
|
|
|
|
|
padding:
|
|
|
به معنی حاشیه داخلی محتوا از گوشه های والد است.
|
|
|
|
|
|
margin:
|
|
|
عنصر کلی نسبت به عناصر کناری فاصله میگیرد
|
|
|
|
|
|
box-model:
|
|
|
combination of padding border margin and width and the height.
|
|
|
and all of elements use this rule.
|
|
|
|
|
|
the total width of an element should be calculated like this;
|
|
|
total element width = width + left padding + right padding + left border + right border + left margin + right margin;
|
|
|
|
|
|
the total height of an element should be calculated like this :
|
|
|
total elemnet height = height + top padding + bottomPadding + top border + bottom Border + top margin + bottom margin;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
اگر بخواهیم که پدینگ و ضعامت حاشیه در اندازه طول و عرض ما تاثیر گذار باشد
|
|
|
|
|
|
*
|
|
|
با این سلکتور بر روی تمامی المان ها اعمال میشود
|
|
|
تمامی تگ های موجود در سند هر استایلی در نظر بگیریم بر روی آنها اعمال میشود
|
|
|
|
|
|
css reset {
|
|
|
box-sizing: border-box;
|
|
|
margin:0;
|
|
|
padding:0;
|
|
|
}
|
|
|
|
|
|
خود مرورگر برای عناصر به طور پیشفرض مقداری فاصله در نظر میگیرد
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
