HTML Hr Style Attribute - Dofactory

Trang chủ » Hr Properties Tag » HTML Hr Style Attribute - Dofactory

Có thể bạn quan tâm

  • SQL SQL Tutorial SQL Reference Connection Strings
  • .NET C# Design Patterns C# Coding Standards C# Code Examples Visual Studio Shortcut Keys
  • HTML HTML Tutorial HTML Reference
  • CSS CSS Tutorial CSS Reference
  • JavaScript JavaScript Tutorial JavaScript Design Patterns
  • SQL
  • .NET
  • HTML
  • CSS
  • JavaScript
Select tutorial
Sql Tutorial Sql Reference Connection Strings
Select tutorial
C# Design Patterns C# Coding Standards C# Code Examples Visual Studio Shortcut Keys
Select tutorial
HTML Tutorial HTML Reference
Select tutorial
CSS Tutorial CSS Reference
Select tutorial
JavaScript Tutorial JavaScript Design Patterns HTML Reference HTML Reference HTML Tags HTML Tag Groups HTML Attributes HTTP Media Types HTTP Methods HTTP Status Codes HTML Country Codes HTML Language Codes HTML Event Attributes HTML Editor HTML Tags HMTL <a> HTML <abbr> HTML <address> HTML <area> HTML <article> HTML <aside> HTML <audio> HTML <b> HTML <base> HTML <blockquote> HTML <body> HTML <br> HTML <button> HTML <canvas> HTML <caption> HTML <cite> HTML <code> HTML <col> HTML <colgroup> HTML <data> HTML <datalist> HTML <dd> HTML <del> HTML <details> HTML <div> HTML <dl> HTML <dt> HTML <em> HTML <embed> HTML <fieldset> HTML <figcaption> HTML <figure> HTML <footer> HTML <form> HTML <h1> to <h6> HTML <head> HTML <header> HTML <hr> HTML <html> HTML <i> HTML <iframe> HTML <img> HTML <input> HTML <ins> HTML <kbd> HTML <label> HTML <legend> HTML <li> HTML <link> HTML <main> HTML <map> HTML <mark> HTML <meta> HTML <meter> HTML <nav> HTML <noscript> HTML <object> HTML <ol> HTML <optgroup> HTML <option> HTML <output> HTML <p> HTML <param> HTML <picture> HTML <pre> HTML <progress> HTML <q> HTML <rp> HTML <rt> HTML <ruby> HTML <samp> HTML <script> HTML <section> HTML <select> HTML <small> HTML <source> HTML <span> HTML <strong> HTML <style> HTML <sub> HTML <summary> HTML <sup> HTML <svg> HTML <table> HTML <tbody> HTML <td> HTML <template> HTML <textarea> HTML <tfoot> HTML <th> HTML <thead> HTML <time> HTML <title> HTML <tr> HTML <track> HTML <u> HTML <ul> HTML <var> HTML <video> HTML <wbr> HTML comment HTML <!DOCTYPE> Deprecated Deprecated Tags Deprecated Attributes Back to HTML Select Tutorial
  • HTML Tutorial
  • HTML Reference
  • CSS Tutorial
  • CSS Reference
  • SQL Tutorial
  • SQL Reference
  • JavaScript Tutorial
  • JavaScript Patterns
  • C# Design Patterns
  • C# Coding Standards
  • Connection Strings
  • Visual Studio Shortcuts
Earn income with your HTML skills Sign up and we'll send you the best freelance opportunities straight to your inbox. We're building the largest freelancing marketplace for people like you. Send Me Opportunities By adding your name & email you agree to our terms, privacy and cookie policies. HTML <hr> style Attribute HTML <header> HTML <html>

A style attribute on an <hr> tag assigns a unique style to the horizontal rule.

Its value is CSS that defines the appearance of the hr element.

Example

#

A style attribute on an <hr> element.

First article goes here Second article goes here <article>First article goes here</article> <hr style="height: 5px; background: teal; margin: 20px 0; box-shadow: 0px 0px 4px 2px rgba(204,204,204,1);"> <article>Second article goes here</article> Try it live

Using style

#

The style attribute specifies the style, i.e. look and feel, of the <hr> element.

A style contains any number of CSS property/value pairs, separated by semicolons (;).

The style attribute overrides any other style that was defined in a <style> tag or an external CSS file.

This inline styling affects the current <hr> element only.

Syntax

#

<hr style="CSS-styles">

Values

#

Value Description
CSS-styles One or more CSS property/value pairs separated by semicolons (;).

More Examples

#

A style attribute on an <hr> element. Clicking the button toggles the background color.

First article goes here Second article goes here Toggle style <article>First article goes here</article> <hr id="myhr" style="height: 5px; background: teal; margin: 20px 0; box-shadow: 0px 0px 4px 2px rgba(204,204,204,1);"> <article>Second article goes here</article> <br/> <button onclick="toggle();">Toggle style</button> <script> let toggle = () => { let element = document.getElementById("myhr"); if (element.style.backgroundColor === "teal") { element.style.backgroundColor = "#4238ca"; } else { element.style.backgroundColor = "teal"; } } </script> Try it live

Code explanation

The style attribute assigns a background color to the <hr> element.

Repeatedly clicking the button calls JavaScript which changes the background to another color.

Browser support

#

Here is when style support started for each browser:

Chrome 1.0 Sep 2008
Firefox 1.0 Sep 2002
IE/Edge 1.0 Aug 1995
Opera 1.0 Jan 2006
Safari 1.0 Jan 2003

You may also like

#

  • Our HTML hr Tag Reference
  • Our HTML style Attribute Reference
  • Our CSS Tutorial

Back to <hr> Jack Poorte Jack Poorte Last updated on Sep 30, 2023 Earn income with your HTML skills Sign up and we'll send you the best freelance opportunities straight to your inbox. We're building the largest freelancing marketplace for people like you. Send Me Opportunities By adding your name & email you agree to our terms, privacy and cookie policies. Guides
  • HTML Tables
  • HTML Images
  • HTML Color Names
  • HTML Links
  • HTML Tags
  • HTML Lists
  • HTML Forms
  • HTML Buttons
  • HTML Spaces
  • HTML Checkboxes
  • HTML Editors
  • HTML Comments
On this page
  • style Attribute
  • Example
  • Using style
  • Syntax
  • Values
  • More Examples
  • Browser support
  • You may also like

Từ khóa » Hr Properties Tag