Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:sample_php_page_style_css [2026/02/08 16:22] – создано VladPolskiy
+++ software:development:demo:cms:ucms:sample_php_page_style_css [2026/02/08 19:34] (текущий) – [Файл sample.html] VladPolskiy
@@ Строка 3: / Строка 3: @@
 **[[software:development:demo:cms:ucms:ucms_table_of_contents | Краткое содержание]]**
 </note>
-====== 4.4.1. Файл style.css ======
+====== 4.3.1. Файл style.css ======
   * [[software:development:demo:cms:ucms:sample_html5_and_dinamic_page|Глава 4.0. Шаблон HTML и динамические страницы]]
     * [[software:development:demo:cms:ucms:sample_html5_page|4.1 Шаблон HTML5]]
     * [[software:development:demo:cms:ucms:sample_php_page_and_dinamic_page|4.2 Шаблон PHP и динамические страницы]]
     * [[software:development:demo:cms:ucms:sample_php_page_sample|4.3. Файл sample.html]]
-    * [[software:development:demo:cms:ucms:sample_php_page_header|4.4. Файл header.php]]
+      * [[software:development:demo:cms:ucms:sample_php_page_style_css|4.3.1. Файл style.css]]
-      * [[software:development:demo:cms:ucms:sample_php_page_style_css|4.4.1. Файл style.css]]
+      * [[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.3.2 Файл scripts.js]]
-    * [[software:development:demo:cms:ucms:sample_php_page_footer|4.5. Файл footer.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_index|4.4. Файл index.php часть 1]]
-      * [[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.5.1 Файл scripts.js]]
+    * [[software:development:demo:cms:ucms:sample_php_page_header|4.5. Файл header.php]]
-    * [[software:development:demo:cms:ucms:sample_php_page_index|4.6. Файл index.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_footer|4.6. Файл footer.php]]
-    * [[software:development:demo:cms:ucms:sample_php_page|4.7. page.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_index_part_2|4.7. Файл index.php часть 2]]
       * [[software:development:demo:cms:ucms:sample_php_page_home.php|4.7.1 Файл home.php]]
       * [[software:development:demo:cms:ucms:sample_php_page_about.php|4.7.2 Файл about.php]]
       * [[software:development:demo:cms:ucms:sample_php_page_contact.php|4.7.3 Файл contact.php]]
 ===== Введение =====
+Файл style.css — это внешний файл каскадных таблиц стилей, используемый в веб-разработке для оформления HTML-документов. Он содержит правила CSS, определяющие дизайн, верстку, шрифты и цвета, позволяя централизованно управлять внешним видом сайта, не меняя структуру HTML. Файл подключается внутри тега **%%<head>%%** через **%%<link rel="stylesheet" href="style.css">%%**. \\
+Основные аспекты файла **style.css**:
+  * Назначение: Описание внешнего вида (стилей) веб-страниц.
+  * Преимущества: Упрощает обслуживание, устраняет дублирование тегов, позволяет изменять дизайн всего сайта через один файл.
+Структура: Состоит из селекторов (элементов HTML) и блоков объявлений **%%{свойство: значение;}%%**.
-===== Пример header.php =====
+===== Файл style.css =====
+Создадим корневую директорию (папку) стилей шаблона **./css** и в ней создадим в блокноте файл **style.css** и вынесем из файла **sample.html** код блока стилей, заключенный между тегами **%%<style>%%** и **%%</style>%%**.\\
+<code css style.css>
+html {
+    width: 100%; /* Ширина 90% */
+    margin: 0;
+    padding: 0;
+}
+body {
+  width: 90%; /* Задает ширину 90% от вьюпорта */
+  margin: 0 auto; /* Центрирует контент */
+  box-sizing: border-box; /* Учитывает padding внутри ширины */
+}
+h, p {
+	margin: 10px;
+	padding: 0px 10px;              /* Убирает внутренние отступы */
+}
+.navbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #04aa6d;
+	color: white;
+	border: 1px solid black;
+	border-radius: 5px; /* Скругляет все углы на 5px */
+}
+ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	background-color: #04aa6d;
+	display: flex;
+}
+ul li {
+	float: left;
+	border-right:1px solid #025f3d;
+}
+ul li:last-child {
+	border-right: none;
+}
+ul li a {
+	display: block;
+	color: white;
+	text-align: center;
+    /* top, right, bottom, left */
+	padding: 10px 16px;
+	text-decoration: none;
+}
+ul li a:hover:not(.active) {
+	background-color: #03915d;
+}
+ul li a.active {
+	background-color: #04aa6d;
+}
+.search-form {
+	display: flex;
+}
+.search-form input {
+	background-color: #D3D3D3
+	border: 1px solid #025f3d;
+	border-radius: 5px; /* Скругляет все углы на 5px */
+    /* top, right, bottom, left */
+    margin: 3px 10px 3px 0; /* 10px отступ справа */
+	padding: 10px 10px;              /* Убирает внутренние отступы */
+	border: none;
+}
+.search-form-button {
+    /* top, right, bottom, left */
+    margin: 0 1px 0 0; /* 10px отступ справа */
+	padding: 10px 10px;              /* Убирает внутренние отступы */
+	border: none;             /* Убирает рамку (если есть) */
+	background: none;         /* Убирает фоновый цвет */
+    color: white;
+	font: inherit;            /* Наследует шрифт родителя */
+	cursor: pointer;          /* Возвращает курсор-ручку */
+}
+ul li .search-form-button:hover:not(.active) {
+	background-color: #03915d;
+}
+ul li .search-form-button.active {
+	background-color: #04aa6d;
+}
+</code>
+===== Файл sample.html =====
+В //строке 19// файла **sample.html** тег **%%<style>%%**
+<code html sample.html [enable_line_numbers="true", start_line_numbers_at="18",highlight_lines_extra="19"]>
+	<!-- блок стилей css -->
+<style>
+</code>
+заменим на **%%<link rel="stylesheet" href="css/style.css" />%%** (код подключения внешнего файла стиля.).
+<code html sample.html [enable_line_numbers="true", start_line_numbers_at="18",highlight_lines_extra="19"]>
+	<!-- блок стилей css -->
+<link rel="stylesheet" href="css/style.css" />
+</code>
+//Строку 100// файла **sample.html** с закрывающим тегом **%%</style>%%** удалим за ненадобностью.
+<code html sample.html [enable_line_numbers="true", start_line_numbers_at="100",highlight_lines_extra="100"]>
+</style>
+  </head>
+</code>
+На этом со стилями файла **sample.html** закончим и перейдем к файлу **scripts.js** в следующей главе
 ===== Дополнения и Файлы =====
 см. также:
@@ Строка 30: / Строка 149: @@
 <note page>
 <wrap left>{{:icons:16:arrow-transition-180.png?|}}
-[[software:development:demo:cms:ucms:sample_php_page_header|4.4. Файл header.php]]
+[[software:development:demo:cms:ucms:sample_php_page_sample|4.3. Файл sample.html]]
 </wrap>
 <wrap right>
-[[software:development:demo:cms:ucms:sample_php_page_footer|4.5. Файл footer.php]]
+[[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.3.2 Файл scripts.js]]
  {{:icons:16:arrow-transition.png?|}}</wrap>
 </note>
-Файл уже не такой громоздкий, и разобраться в нем намного проще. Вынисем из него стили в отдельный файл **style.css** и директорию **CSS**, о чем речь пойдет на следующей странице руководства