Доси:

Հատկություններում օգտագործվող առանձնահատկություններ

Приблизительное чтение: 2 минут 0 просмотров

currentColor

currentColorтот color это стоимость недвижимости. 

цвет задается один раз в селекторе и используется его значение  в другом месте через currentColor.

Изменение значения цвета также изменит другие текущие цвета.

				
					p {
 color: red;
 box-shadow: 0 0 10px currentColor;
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>hayti</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Ваш браузер поддерживает currentColor</p>
  </body>
</html>

				
			

inherit

inherit – дочерний элемент может наследовать свойства CSS родительского элемента, если для этого свойства установлено наследование.

				
					  div {
    border: 1px solid green;
    padding: 10px;
  }
  p {
    border: inherit;
    padding: inherit;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>inherit</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <p>Привет, мир!!!</p>
    </div>
  </body>
</html>

				
			

initial

initial — устанавливает значения по умолчанию с помощью css 

Браузер также имеет значения свойств по умолчанию. Например, при определении <h1 data-no-auto-translation=""> էլեմենտը, դրա տեքստը բրաուզերը պատկերում է սովորականից ավելի մեծ չափերով։ 

Например, если браузер использует значение по умолчанию display: block, в css это равно  display: inline -ի. Поэтому initial-определит элемент через display: inline-ը.

				
					  h2 {
    color: #ffb734;
    font-family: Arial, sans-serif;
  }
  p {
    color: green;
    font-family: fantasy;
  }
  .initial {
    color: initial; 
    font-family: initial;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 data-no-auto-translation="">Lorem Ipsum</h2>
    <p>
      Lorem ipsum dolor сидеть amet,
      <span class="initial"> Sed pellentesque, nulla a euismod iaculi</span>
      консектетур адиписцинг элит. Aenean Molestie eget enim non efficitur...
    </p>
  </body>
</html>

				
			

unset

unset – есть два типа свойств: наследуемые и ненаследуемые. Если:  <html> предположим, что он определен в элементе font-size свойство, то оно будет унаследовано дочерними элементами. Существуют также ненаследуемые свойства, которые ссылаются на элемент, в котором они определены (например,  border).


Если свойство унаследовано, unset унаследует значение непосредственного родительского элемента. Если свойство не наследуется, для элемента будет установлено значение по умолчанию.

Если элемент унаследован, то unset равно inheritto , в противном случае unset равно initialк

unset используется, когда необходимо изменить все свойства стиля элемента: унаследованные — наследуемые, а ненаследуемые — исходные.

Например:

div { all: unset } :

				
					div {
 color: red;
 border: 5px solid lime;
 height: 500px;
 width: 500px;
}
div p {
 color: unset;
 border: unset;
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <p>Привет, мир!</p>
    </div>
  </body>
</html>

				
			

revert

revert – устанавливает значение по умолчанию браузером. 

Если браузер настроен по умолчанию display: block, в css это равно  display: inline -ի. Поэтому revert-определит элемент через display: block-ը .

				
					  p {
    color: red;
  }
  .alt {
    color: revert; /*բրաուզերի-ի կողմից color-ին  
  սահմանած կանխադրված արժեքը նույնպես սևն է։*/
  }
				
			
				
					<body>
 <p>Лорем, ipsum dolor.</p>
 <p class="alt">Фугит, идентификатор вел.</p>
</body>
				
			

url()

url() – указывает адрес файла.

				
					  body {
    background: url(https://techcrunch.com/wp-content/uploads/2022/12/GettyImages-537331500.jpg?resize=1200,800)
      no-repeat;
    display: flex;
    padding-left: 20%;
    padding-top: 10%;
  }

  .for-html {
    background: url(C:/Users/User/Desktop/html-image.png) no-repeat;
    height: 400px;
    width: 400px;
  }
  .for-css {
    background: url(css-image.png) no-repeat;
    height: 400px;
    width: 400px;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="for-html"></div>
    <div class="for-css"></div>
  </body>
</html>

				
			

Существуют свойства CSS (а также некоторые значения), которые невозможно использовать без «префиксов».

Префиксы определяют, применяется ли свойство только к тому или иному в браузер.

Chrome, Opera և Safari браузеры ссылаются на " -webkit-…. " префикс, например -webkit-transition: all 4s ease; :

Firefox относится к " -moz-… " префикс, например  -moz-transition: all 4s ease; :

Edge-в и Internet Explorerотносится к " -ms-… " префикс, например  -ms-transition: all 4s ease;:

Оставить комментарий

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ
ru_RURussian