What are the default CSS styling of heading tags? (H1, h2, h3, h4, h5)

前端 未结 4 1640
小蘑菇
小蘑菇 2021-02-07 08:49

In HTML, headings are denoted with (1,2,3,4,5,6) tag.

My question is regarding following HTML code:

相关标签:
4条回答
  • 2021-02-07 09:31

    Are there predefined property for same in CSS; which gives same look and feel as H gives?

    No.

    The default style of a heading is (in most browsers) exactly that: a collection of different CSS rules coupled with an Hn selector (and stored in the browser stylesheet).

    There isn't a (plain CSS) way to automatically copy all of those rules.

    You could use the Inspector tool that comes in the developer tools built into most browsers to examine a heading and look at the default rules for it, and then copy those rules to your own (author) stylesheet.

    There may be some variations between browsers, so you'll generally want to set the Hn rules explicitly too.

    0 讨论(0)
  • 2021-02-07 09:47

    Question: is there predefined property for same in CSS?

    No

    You can try like this:

    h3{ 
       display: block; 
    }
    
    h3 {
       font-size: /*Font size similar to h3*/ ;
    }
    
    0 讨论(0)
  • 2021-02-07 09:49

    Think a good practice is let h<1-6> keep their default styles. And then add a class to add additional styles. Just seems cleaner to me, and you are not hacking the "master styles." Pros and Cons I'm sure.

    <h1 class="h1">Hello CSS</h1>

    0 讨论(0)
  • 2021-02-07 09:51

    The answer is no, however you might hack the styles. Most browsers will try to use these styles

    (Taken from: w3schools)

    h1 { 
        display: block;
        font-size: 2em;
        margin-top: 0.67em;
        margin-bottom: 0.67em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h2 {
        display: block;
        font-size: 1.5em;
        margin-top: 0.83em;
        margin-bottom: 0.83em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h3 { 
        display: block;
        font-size: 1.17em;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h4 { 
        display: block;
        margin-top: 1.33em;
        margin-bottom: 1.33em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h5 { 
        display: block;
        font-size: .83em;
        margin-top: 1.67em;
        margin-bottom: 1.67em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h6 { 
        display: block;
        font-size: .67em;
        margin-top: 2.33em;
        margin-bottom: 2.33em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    
    0 讨论(0)
提交回复
热议问题