| <!DOCTYPE html> |
| <html> |
| <!-- Created by Texinfo 6.8dev+dev, http://www.gnu.org/software/texinfo/ --> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <!-- This manual is for GNU Texinfo (version 6.8dev, 23 February 2022), |
| a documentation system that can produce both online information and a |
| printed manual from a single source using semantic markup. |
| |
| Copyright (C) 1988, 1990-1993, 1995-1999, 2001-2022 Free Software Foundation, Inc. |
| |
| Permission is granted to copy, distribute and/or modify this document |
| under the terms of the GNU Free Documentation License, Version 1.3 or |
| any later version published by the Free Software Foundation; with no |
| Invariant Sections, with no Front-Cover Texts, and with no Back-Cover |
| Texts. A copy of the license is included in the section entitled |
| "GNU Free Documentation License". --> |
| <title>HTML CSS (GNU Texinfo 6.8dev)</title> |
| |
| <meta name="description" content="HTML CSS (GNU Texinfo 6.8dev)"> |
| <meta name="keywords" content="HTML CSS (GNU Texinfo 6.8dev)"> |
| <meta name="resource-type" content="document"> |
| <meta name="distribution" content="global"> |
| <meta name="Generator" content="texi2any"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| |
| <link href="index.html" rel="start" title="Top"> |
| <link href="Command-and-Variable-Index.html" rel="index" title="Command and Variable Index"> |
| <link href="index.html#SEC_Contents" rel="contents" title="Table of Contents"> |
| <link href="Generating-HTML.html" rel="up" title="Generating HTML"> |
| <link href="HTML-Xref.html" rel="next" title="HTML Xref"> |
| <link href="HTML-Splitting.html" rel="prev" title="HTML Splitting"> |
| <style type="text/css"> |
| <!-- |
| div.example {margin-left: 3.2em} |
| ul.mark-bullet {list-style-type: disc} |
| --> |
| </style> |
| |
| |
| </head> |
| |
| <body lang="en"> |
| <div class="section-level-extent" id="HTML-CSS"> |
| <div class="nav-panel"> |
| <p> |
| Next: <a href="HTML-Xref.html" accesskey="n" rel="next">HTML Cross-references</a>, Previous: <a href="HTML-Splitting.html" accesskey="p" rel="prev">HTML Splitting</a>, Up: <a href="Generating-HTML.html" accesskey="u" rel="up">Generating HTML</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Command-and-Variable-Index.html" title="Index" rel="index">Index</a>]</p> |
| </div> |
| <hr> |
| <h3 class="section" id="HTML-CSS-1">21.3 HTML CSS</h3> |
| <a class="index-entry-id" id="index-HTML_002c-and-CSS"></a> |
| <a class="index-entry-id" id="index-CSS_002c-and-HTML-output"></a> |
| <a class="index-entry-id" id="index-Cascading-Style-Sheets_002c-and-HTML-output"></a> |
| |
| <p>Cascading Style Sheets (CSS for short) is an Internet standard for |
| influencing the display of HTML documents: see |
| <a class="uref" href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a>. |
| </p> |
| <p>By default, <code class="command">makeinfo</code> includes a few simple CSS commands to |
| better implement the appearance of some Texinfo environments. Here |
| is one of them, as an example: |
| </p> |
| <div class="example"> |
| <pre class="example-preformatted">pre.display { font-family:inherit } |
| </pre></div> |
| |
| <p>A full explanation of CSS is (far) beyond this manual; please see the |
| reference above. In brief, however, the above tells the web browser to |
| use the same font as the main document for <code class="code">@display</code>. |
| By default, the HTML ‘<samp class="samp"><pre></samp>’ command uses a monospaced font. |
| </p> |
| <p>You can influence the CSS in the HTML output with two |
| <code class="command">makeinfo</code> options: <samp class="option">--css-include=<var class="var">file</var></samp> and |
| <samp class="option">--css-ref=<var class="var">url</var></samp>. |
| </p> |
| <a class="index-entry-id" id="index-texinfo_002dbright_002dcolors_002ecss"></a> |
| <a class="index-entry-id" id="index-Visualizing-Texinfo-CSS"></a> |
| <p>The option <samp class="option">--css-ref=<var class="var">url</var></samp> adds to each output HTML file |
| a ‘<samp class="samp"><link></samp>’ tag referencing a CSS at the given <var class="var">url</var>. This |
| allows using external style sheets. You may find the file |
| <samp class="file">texi2html/examples/texinfo-bright-colors.css</samp> useful for |
| visualizing the CSS elements in Texinfo output. |
| </p> |
| <p>The option <samp class="option">--css-include=<var class="var">file</var></samp> includes the contents |
| <var class="var">file</var> in the HTML output, as you might expect. However, the |
| details are somewhat tricky, as described in the following, to provide |
| maximum flexibility. |
| </p> |
| <a class="index-entry-id" id="index-_0040charset-specification_002c-in-CSS-files"></a> |
| <p>The CSS file first line may be a ‘<samp class="samp">@charset</samp>’ directive. If present, |
| this directive is used to determine the encoding of the CSS file. The |
| line is not copied into the output. |
| </p> |
| <a class="index-entry-id" id="index-_0040import-specifications_002c-in-CSS-files"></a> |
| <p>The CSS file may begin with so-called ‘<samp class="samp">@import</samp>’ directives, |
| which link to external CSS specifications for browsers to use when |
| interpreting the document. Again, a full description is beyond our |
| scope here, but we’ll describe how they work syntactically, so we can |
| explain how <code class="command">makeinfo</code> handles them. |
| </p> |
| <a class="index-entry-id" id="index-Comments_002c-in-CSS-files"></a> |
| <p>There can be more than one ‘<samp class="samp">@import</samp>’, but they have to come |
| first in the file, with only whitespace and comments interspersed, no normal |
| definitions. Comments in CSS files are delimited by ‘<samp class="samp">/* ... */</samp>’, as in |
| C. An ‘<samp class="samp">@import</samp>’ directive must be in one of these two forms: |
| </p> |
| <div class="example"> |
| <pre class="example-preformatted">@import url(http://example.org/foo.css); |
| @import "http://example.net/bar.css"; |
| </pre></div> |
| |
| <p>As far as <code class="command">makeinfo</code> is concerned, the crucial characters are |
| the ‘<samp class="samp">@</samp>’ at the beginning and the semicolon terminating the |
| directive. When reading the CSS file, it simply copies any such |
| ‘<samp class="samp">@</samp>’-directive into the output, as follows: |
| </p> |
| <ul class="itemize mark-bullet"> |
| <li>If <var class="var">file</var> contains only normal CSS declarations, it is |
| included after <code class="command">makeinfo</code>’s default CSS, thus overriding it. |
| |
| </li><li>If <var class="var">file</var> begins with ‘<samp class="samp">@import</samp>’ specifications (see |
| below), then the ‘<samp class="samp">import</samp>’’s are included first (they have to come |
| first, according to the standard), and then <code class="command">makeinfo</code>’s |
| default CSS is included. If you need to override <code class="command">makeinfo</code>’s |
| defaults from an ‘<samp class="samp">@import</samp>’, you can do so with the ‘<samp class="samp">! |
| important</samp>’ CSS construct, as in: |
| <div class="example"> |
| <pre class="example-preformatted">pre.example { font-size: inherit ! important } |
| </pre></div> |
| |
| </li><li>If <var class="var">file</var> contains both ‘<samp class="samp">@import</samp>’ and inline CSS |
| specifications, the ‘<samp class="samp">@import</samp>’’s are included first, then |
| <code class="command">makeinfo</code>’s defaults, and lastly the inline CSS from |
| <var class="var">file</var>. |
| |
| </li><li>Any @-directive other than ‘<samp class="samp">@import</samp>’ and ‘<samp class="samp">@charset</samp>’ |
| is treated as a CSS declaration, meaning <code class="command">makeinfo</code> includes |
| its default CSS and then the rest of the file. |
| </li></ul> |
| |
| <p>If the CSS file is malformed or erroneous, <code class="command">makeinfo</code>’s output |
| is unspecified. <code class="command">makeinfo</code> does not try to interpret the |
| meaning of the CSS file in any way; it just looks for the special |
| ‘<samp class="samp">@</samp>’ and ‘<samp class="samp">;</samp>’ characters and blindly copies the text into the |
| output. Comments in the CSS file may or may not be included in the |
| output. |
| </p> |
| <p>In addition to the possibilities offered by CSS, <code class="command">makeinfo</code> |
| has many user-definable customization variables with which you can |
| influence the HTML output. See <a class="xref" href="Customization-Variables.html">Customization Variables</a>. |
| </p> |
| |
| </div> |
| <hr> |
| <div class="nav-panel"> |
| <p> |
| Next: <a href="HTML-Xref.html">HTML Cross-references</a>, Previous: <a href="HTML-Splitting.html">HTML Splitting</a>, Up: <a href="Generating-HTML.html">Generating HTML</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Command-and-Variable-Index.html" title="Index" rel="index">Index</a>]</p> |
| </div> |
| |
| |
| |
| </body> |
| </html> |
