发表新帖
发表新帖

What is the difference between default, user and author style sheets?

前端 未结
关注
3 1717
醉酒成梦
醉酒成梦 2020-12-05 04:26

In CSS, what is the difference between default, user and author style sheets?

相关标签:
3条回答
  • 轮回少年
    2020-12-05 04:40

    Nice question! Here is the detailed explanation of various types of style sheets:

    1. Default (aka User-agent/Browser) style sheet: First thing, Default style sheet is also known as Browser style sheet Or User-agent style sheet. This is the style sheet which browser applies by Default for every web page which it renders. So if as the author of a web page you don't apply any styling, even then it is not styleless. It still applies the styling details present in the default style sheet installed within the browser. We can assume that it must be containing some styles for all standard HTML tags e.g. <span>, <p>, <h1> etc. This SO post provides great details about how the default style sheets of various browsers look like.

      Look at the following HTML page. I've created a very basic HTML table with no styling at all:

    <html>
  <head>    
  </head>

<body>

 <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

</body>
</html>

    But still you see that headers of the table are shown in bold. That is coming from browser's default style sheet.

    1. User style sheet: Now the second level is user style sheet. Browsers give you the option of extending the browser's default style sheet. For e.g. in internet explorer you can go to Tool > Internet Options > General Tab > Accessibility button > Accessibility Window > User style sheet section > "Format documents using my style sheet" check-box.

      So for the same html tag if I provide a different style in my own style sheet ("D:\myuserstylesheet.css" in this case) then same it will start overriding it.

      myuserstylesheet.css looks like this:

      td { color: green; }

      Now, If I load the same web page containing a simple table after making these changes in internet explorer browser settings then the styles present in user style sheet start overriding the browser style sheet as shown below:

    2. Author style sheets:Then comes author style sheet which is what you have defined in your web site as a creator/author of the website. This comes in three flavors:

      • In-line : Defined inside the tag itself e.g. <div style="width:20px;height:20px;background-color:#ffcc00;"></div>
      • Internal/Embedded : CSS styles defined in <style> tag inside <head> tag of an html page.
      • External: CSS styles defined in separate physical files (e.g. abc.css) which are applied to an html web page using link tag present inside <head> tag : <link rel="stylesheet" type="text/css" href="abc.css">

    There is one fundamental difference in the priority of application of style-sheets for any HTML element as detailed below:

    For !important styles when there is collision of equal specificity for an element (Highest to lowest priority)

    1. User-agent (browser) style sheet
    2. User style sheet
    3. Author style sheet

    Then, for normal styles when there is collision of equal specificity for an element (Highest to lowest priority) - It is just the reverse

    1. Author style sheet
    2. User style sheet
    3. User-agent (browser) style sheet

    When there is collision of equal specificity among different types of Author style sheets then their proximity to the HTML element (Textual order) matters while deciding the precedence/priority. It is as below (Highest to lowest priority):

    1. In-line (Closest to the HTML tag. In fact it is inside the HTML tag itself)
    2. Internal/Embedded (relatively farther from the HTML tag)
    3. External (Farthest from the HTML tag as it resides physically outside your HTML web page.)

    Note: !important styles always have higher precedence as compared to normal styles. You can read more about specificity calculation in CSS here.

    0 讨论(0)
  • 长情又很酷
    2020-12-05 04:46

    The 2.1 Spec gives a good explanation of each:

    1. Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
    2. User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
    3. User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.
    0 讨论(0)
  • 渐次进展
    2020-12-05 04:48

    Default style sheets are supplied by the browser vendor.

    User style sheets are supplied by the user of the browser.

    Author style sheets are supplied by the author of a webpage.

    0 讨论(0)
 看不清?
提交回复
热议问题