Различия

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

--- software:development:demo:cms:ucms:sample_php_page_style_css [2026/02/08 16:32] – [Пример header.php] 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) и блоков объявлений **%%{свойство: значение;}%%**.
 ===== Файл style.css =====
-Создадим корневую директорию стилей шаблона **css** и в ней создадим в блокноте файл **style.css** и вынесем из файла **sample.html** код блока стилей, заключенный между тегами **%%<style>%%** и **%%</style>%%**.\\
+Создадим корневую директорию (папку) стилей шаблона **./css** и в ней создадим в блокноте файл **style.css** и вынесем из файла **sample.html** код блока стилей, заключенный между тегами **%%<style>%%** и **%%</style>%%**.\\
 <code css style.css>
 html {
@@ Строка 119: / Строка 124: @@
 }
 </code>
-На этом с шапкой шаблона закончим и перейдем к файлу **footer.php** в следующей главе
+===== Файл 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** в следующей главе
 ===== Дополнения и Файлы =====
 см. также:
@@ Строка 127: / Строка 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**, о чем речь пойдет на следующей странице руководства