Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tidy up of Values and Units page #2825

Merged
merged 1 commit into from
Mar 3, 2021
Merged

Tidy up of Values and Units page #2825

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions files/en-us/web/css/css_values_and_units/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h2 id="Textual_data_types">Textual data types</h2>
<li>{{cssxref("&lt;custom-ident&gt;")}}</li>
<li>Pre-defined keywords as an <code>&lt;ident&gt;</code></li>
<li>{{cssxref("&lt;string&gt;")}}</li>
<li>{{cssxref("&lt;url&gt;")}}</li>
<li>{{cssxref("url()","url()")}}</li>
</ul>

<p>Text data types are either <code>&lt;string&gt;</code>, a quoted series of characters, or an <code>&lt;ident&gt;</code>, a "CSS Identifier" which is an unquoted string. A <code>&lt;string&gt;</code> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <code>&lt;ident&gt;</code> or <code>&lt;custom-ident&gt;</code>, must be unquoted.</p>
Expand Down Expand Up @@ -55,14 +55,14 @@ <h3 id="Pre-defined_keyword_values">Pre-defined keyword values</h3>

<p>When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for {{cssxref("float")}}.</p>

<pre class="brush: css">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre>
<pre class="brush: css">left <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre>

<p>Such values are used without quotes:</p>

<pre class="brush: css"><code>.box {
<pre class="brush: css">.box {
float: left;
}
</code></pre>
</pre>

<h3 id="CSS-wide_values">CSS-wide values</h3>

Expand All @@ -76,18 +76,18 @@ <h3 id="CSS-wide_values">CSS-wide values</h3>

<h3 id="URLs">URLs</h3>

<p>A {{cssxref("&lt;url&gt;")}} type uses functional notation, which accepts a <code>&lt;string&gt;</code> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.</p>
<p>A {{cssxref("url()","url()")}} type uses functional notation, which accepts a <code>&lt;string&gt;</code> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.</p>

<pre class="brush: css"><code>.box {
<pre class="brush: css">.box {
  background-image: url("images/my-background.png");
}</code>
}

<code>.box {
.box {
background-image: url("https://www.exammple.com/images/my-background.png");
}</code>
}
</pre>

<p>The parameter for <code>url()</code> can be either quoted or unquoted. If unquoted, it is parsed as a <code>&lt;url-token&gt;</code>, which has extra requirements including the escaping of certain characters. See {{cssxref("&lt;url&gt;")}}  for more information.</p>
<p>The parameter for <code>url()</code> can be either quoted or unquoted. If unquoted, it is parsed as a <code>&lt;url-token&gt;</code>, which has extra requirements including the escaping of certain characters. See {{cssxref("url()","url()")}}  for more information.</p>

<h2 id="Numeric_data_types">Numeric data types</h2>

Expand Down Expand Up @@ -414,12 +414,12 @@ <h4 id="Position">Position</h4>
<h3 id="Functional_notation">Functional notation</h3>

<ul>
<li>{{cssxref("calc()")}}</li>
<li>{{cssxref("min", "min()")}}</li>
<li>{{cssxref("max", "max()")}}</li>
<li>{{cssxref("clamp", "clamp()")}}</li>
<li>{{cssxref("calc()", "calc()")}}</li>
<li>{{cssxref("min()", "min()")}}</li>
<li>{{cssxref("max()", "max()")}}</li>
<li>{{cssxref("clamp()", "clamp()")}}</li>
<li>{{cssxref("toggle", "toggle()")}}</li>
<li>{{cssxref("attr", "attr()")}}</li>
<li>{{cssxref("attr()", "attr()")}}</li>
</ul>

<p><a href="/en-US/docs/Web/CSS/CSS_Functions">Functional notation</a> is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis <code>(</code> followed by the argument(s) to the notation followed by a right parenthesis <code>)</code>. Functions can take multiple arguments, which are formatted similarly to a CSS property value.</p>
Expand Down Expand Up @@ -493,5 +493,5 @@ <h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Types">CSS Basic Data Types</a></li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Introduction to CSS: Values and Units </a></li>
</ul>