Содержание

CSS

sample.html
<!doctype html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <!-- запрет автоперевода перевода google translate -->
    <meta name="google" content="notranslate">
	<!-- отображение файктической ширины экрана для адаптивного дизайна -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sample.html</title>
	<!-- блок стилей css -->
	<style>
	p {
	color: green;
	}
	#p01 {
	color: blue;
	}
	p.error {
	color: red;
	}
	.error {
	color: yellow;
	}
	</style>
	</head>
	<body>
    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
    <header>
 
    </header>
    <!-- Контейнер изображения (фона) профиля на котором будут распологаться кнопки меню
         фото профиля, логотип приложени, имя пользователя	-->	 
	<p>Это параграф</p>
	<p>Это тоже параграф.</p>
	<p id="p01">Я отличаюсь.</p>
	<p class="error">Я также отличаюсь.</p>
	<a class="error">и я также отличаюсь.</a>
	<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>
 
    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->
    <footer>
      <p>©2026 Sample HTML5 Page. All rights reserved.</p>
    </footer>
    <!-- Optional: Link to a JavaScript file -->
    <script>
 
	</script>
  </body>
</html>

CSS: Установка ширины div как 100% минус n пикселей

sample.html
<!doctype html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <!-- запрет автоперевода перевода google translate -->
    <meta name="google" content="notranslate">
	<!-- отображение файктической ширины экрана для адаптивного дизайна -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sample.html</title>
	<!-- блок стилей css -->
	<style>
	body {
    margin: 0;
    padding: 0;
	}
	.container {
    /* Ширина: 100% от экрана минус 1px */
    width: calc(100vw - 2px);
    /* Высота: 100% от экрана минус 1px */
    height: calc(100vh - 2px);
  	border: 1px solid #3498db; /* Синяя рамка 1px */
	border-radius: 5px;
	}
	</style>
	</head>
	<body>
    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
    <header>
 
    </header>
    <!-- Контейнер изображения (фона) профиля на котором будут распологаться кнопки меню
         фото профиля, логотип приложени, имя пользователя	-->	
		<div class = "container">
		</div>
 
    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта
    <footer>
      <p>©2026 Sample HTML5 Page. All rights reserved.</p>
    </footer> -->
    <!-- Optional: Link to a JavaScript file -->
    <script>
 
	</script>
  </body>
</html>