parent
c8e8010a62
commit
35868f971c
@ -0,0 +1,65 @@
|
||||
<!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">
|
||||
<title>css background</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #efefef;
|
||||
background-image: url('some sourse');
|
||||
background-repeat: no-repeat;
|
||||
background-repeat: repeat-x;
|
||||
background-repeat: repeat-y;
|
||||
background-position: right;
|
||||
background-position: top right;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
background-image: url('some File');
|
||||
height: 400px;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: #f4f4f4 url('something') no-repeat center/center cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
background
|
||||
میتواند هم رنگ داشته باشد و هم تصویر و اگر که تصویر لود نشد کمک رنگ را استفاده میکند
|
||||
background-attachment:
|
||||
افکت پارالکس ایجاد میکند وهر چه صفحه اسکرول بخورد عکس صابت است.
|
||||
background-clip: border-box;
|
||||
پیشفرض است
|
||||
background-clip: padding-box;
|
||||
محدوده ی بوردر را جزو پس زمینه حساب نمیکند
|
||||
پدینگ بوردر نسبت به محتوای داخلی باکس
|
||||
background-clip: content-box;
|
||||
پس زمینه فقط به محتوا اعمال میشود و شامل پدینگ و حاشیه نمیشود
|
||||
|
||||
short hand for background:
|
||||
background: color imgageUrl backgroundRepeat backgroundPisition
|
||||
-->
|
||||
<header>
|
||||
|
||||
</header>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,75 @@
|
||||
<!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">
|
||||
<title>Seudo Elements</title>
|
||||
<style>
|
||||
body {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.select::selection {
|
||||
color: orange;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
::first-line {
|
||||
color: red;
|
||||
}
|
||||
|
||||
::first-letter {
|
||||
color: blue;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
[valign="top"] {
|
||||
text-align: right !important;
|
||||
}
|
||||
#mailtpl_body{
|
||||
text-align: right !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!--
|
||||
::first-line
|
||||
بر روی تگ های
|
||||
inline
|
||||
کار نمیکنه
|
||||
|
||||
property های مجاز
|
||||
font properties
|
||||
color properties
|
||||
background properties
|
||||
letter-spacing
|
||||
word-spacing
|
||||
text-decoration
|
||||
vertical-align
|
||||
text-transform
|
||||
line-height
|
||||
clear
|
||||
|
||||
::first-lette
|
||||
اولین کاراکتر را انتخاب میکند
|
||||
|
||||
::before
|
||||
::after
|
||||
برای وقتی است که نمیخواهیم یک عنصر جدید در صفحه داشته باشیم
|
||||
اما میخواهیم که با سی اس اس یک محتوایی را به آن المان اضافه کنیم
|
||||
|
||||
opacity: مربوط به وضوح تصاویر است
|
||||
|
||||
|
||||
-->
|
||||
|
||||
<body>
|
||||
<p class="select">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, magni.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, magni.</p>
|
||||
<span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet, ex.</span>
|
||||
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aut.</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,77 @@
|
||||
<!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">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gradient {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-image: linear-gradient(to right, red, blue);
|
||||
}
|
||||
|
||||
.second-gradient {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-image: linear-gradient(55deg, red, blue, green);
|
||||
}
|
||||
|
||||
.repeating-gradient {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-image: repeating-linear-gradient(red, green, blue 20%);
|
||||
}
|
||||
|
||||
.second-repeating-gradient {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-image: repeating-linear-gradient(red, green 40%, blue 20%);
|
||||
}
|
||||
|
||||
.radial-gradient {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-image: radial-gradient(circle, blue, red, green);
|
||||
}
|
||||
|
||||
.repeating-radial-gradient {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-image: repeating-radial-gradient(blue, red, green 10%);
|
||||
/* مقدار آخر درصد تکرار را مشخص میکند */
|
||||
}
|
||||
|
||||
.border-image {
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
border: 15px solid transparent;
|
||||
border-image-source: url('something');
|
||||
border-image-repeat: round;
|
||||
border-image-slice: 25;
|
||||
border-image-width: 20px;
|
||||
|
||||
border-image: url('something') 25 round;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="gradient"></div>
|
||||
<div class="second-gradient"></div>
|
||||
<div class="repeating-gradient"></div>
|
||||
<div class="second-repeating-gradient"></div>
|
||||
<div class="radial-gradient"></div>
|
||||
<div class="repeating-radial-gradient"></div>
|
||||
<div class="border-image"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!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">
|
||||
<title>Float</title>
|
||||
<style>
|
||||
.wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.wrapper img {
|
||||
float: right;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.clear-fix {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* روش دیگر برای استفاده */
|
||||
|
||||
.clear-fix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<img src="something" alt="">
|
||||
<div class="clear-fix"></div>
|
||||
<div class="containet"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,93 @@
|
||||
<!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">
|
||||
<title>Selecoters</title>
|
||||
<style>
|
||||
.login input[value] {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.login input[type="email"] {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.login input[type="password"] {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.login input[value="ali705539"] {
|
||||
background: gray;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
img[alt~="nature"] {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
[class|=text] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
[class^=text] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
[class $="text"] {
|
||||
color: #fff;
|
||||
}
|
||||
[class *="text"]{
|
||||
color: aqua;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!--
|
||||
decentdant selector (space)
|
||||
div p{}
|
||||
child selector (>)
|
||||
div > p
|
||||
adjacent sibling selector(+)
|
||||
بلافاصله بعد از آن را انتخاب کن
|
||||
div + p
|
||||
general sibling selector (~)
|
||||
بعدش هر چی بود
|
||||
div.x ~ p
|
||||
|
||||
attribute selectors:
|
||||
|
||||
input[value]
|
||||
اینپوت هایی که ولیو دارند را انتخاب کن
|
||||
|
||||
img[alt ~= "nature"]
|
||||
مقدار آن شامل این کلمه باشد.
|
||||
|
||||
[class|=text]{}
|
||||
به دنبال المانی باش که کلاس آن شامل این عبارت باشد
|
||||
|
||||
[class^=text]
|
||||
اگر با - جدا نشده بود باید از این مورد استفاده شود و اگر قرار است ترکیبی باشد باید از این مورد استفاده شود
|
||||
|
||||
[class $="text"]
|
||||
در ابتدای نام کلاس بیاید یا اگر ترکیبی است در آخر باشد نام کلاس
|
||||
nametext
|
||||
name-text
|
||||
|
||||
[class *="text"]
|
||||
فقط در نام کلاس این مقدار باشد
|
||||
|
||||
-->
|
||||
|
||||
<body>
|
||||
|
||||
<form class="login" action="">
|
||||
<input type="text" value="">
|
||||
<input type="text" value="ali705539">
|
||||
<input type="password">
|
||||
<input type="email">
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 18 MiB |
@ -0,0 +1,22 @@
|
||||
@font-face {
|
||||
font-family: 'Vasir';
|
||||
src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vasir';
|
||||
src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
*,
|
||||
html,
|
||||
body {
|
||||
font-family: 'Vasir';
|
||||
}
|
||||
.text-bold{
|
||||
font-weight: bold;
|
||||
}
|
||||
Loading…
Reference in new issue