This article introduces you to the basics of creating and using style sheets, as well as the trends of Cross-browser compatibility issues and style sheets on the Web. Suppose you have mastered the basics of HTML.
Basic content
A style sheet is just a list of formatting commands that allow you to control the appearance of a Web page based on simple HTML commands, such as <FONT> tags. The concept of style sheets is not entirely new, they come from word processors and typesetting software. Each element on the page, from individual characters to the entire page, can be individually customized with the information contained in the stylesheet.
On the Web, there are many restrictions on typography because there are many different types of browsers. And each browser only has limited support for style sheets. The style sheet used on the Web is a cascading style sheet (CSS), and the latest version, which is recognized by the World Consortium, is 2.0. However, as is written here, there is no browser 100% support for CSS 1.0 and version 2.0. This article will focus on CSS version 1.0-Don't worry about it being eliminated because version 2.0 is fully compliant with version 1.0.
The simplest style sheet you can create is called an "inline style sheet." It can be placed or written directly into the HTML document you want to use, and the structure of the page looks like this:
<HTML>
<HEAD>
<title>style Sheets demo</title>
<style type= "text/css" media= "screen" >
<!--hide from legacy browsers
P {color:red;
Font:arial, Helvetica, Sans-serif}
A {color:blue;
Font:comic Sans MS, Sans-serif}
-->
</STYLE>
</HEAD>
<body>
Now that you see the style sheet, let's parse it and explain each part to you.
<style type= "text/css" media= "screen" >....</STYLE>
The tag contains the called style sheet information, not surprisingly, <STYLE> tags. Like most HTML tags, it also needs to be "closed" to implement functionality correctly (i.e., it must end with a </STYLE> tag). This particular tag must appear between the <HEAD> tags to enable it to be parsed by most browsers. In the declaration of this open tag, must contain two properties: The property tells the browser the format of the style sheet to use (in this case, the available type is "Text/css"), and the Media property tells the browser whether the media is a monitor (screen) or a printed page (print), but for the current browser, This value represents only "screen."
The two <STYLE> properties I just added may not be required by all browsers. Microsoft Internet Explorer's explanation of style sheets is not very strict, and you can ignore these properties. Netscape Navigator is incredibly demanding on these attributes. I'll add them-that's a good way to encode. If the consortium declares that these attributes are necessary, add them. The only way to do this is to suggest that the two major companies (Microsoft and Netscape) Take concerted action to develop a unified CSS standard for our web designers.
<!--....-->
The following is a comment line. It appears below the <STYLE> tag line, and the top of the </STYLE> tag line. Annotations are not required, but adding comments is a good coding habit; The reason is that the annotation line can make the stylesheet data not appear when the user views the page with the old browser (the 3.0, 2.0, and 1.0 series of the two companies). Old browsers automatically skip tags they don't recognize, but because the content between <STYLE> tags is plain text and not surrounded by any tags, old browsers might display them. However, if you add a comment tag around the content, you can ensure that the content is skipped by those browsers. Don't forget to enclose your comment block, otherwise the entire page will not be displayed.
P {color:red; font:arial, Helvetica, Sans-serif}
Finally we came to the core of CSS-defining elements. Define each element in the following ways: element {property: Value; property: Value}. The "element" here is the HTML tag in which you want to reassign the style; property: value is the appearance of a predefined style sheet (set in CSS specification) and the corresponding value. All combinations of attribute: values must be enclosed in ' {} '. Properties can also be described by a colon [:] with a value, and the pairing of the attribute-value can be described by a semicolon [;] with a different pairing. The last attribute-value pairing does not need to be taken with [;] because there is no other pairing in the bracket followed.
Here are some of the attributes and their corresponding values that define the style of the particular element:
| Property | Acceptable values | Annotations |
| Font-size | Xx-large, X-large, large, small, X-SMLL, Xx-small, Npx, Npc, Npt, Nmm, NCM, Nin | N = number, px = pixel, PC = picas, pt = dot, mm = mm, CM = cm, in = inch. These values are absolute, and will be displayed exactly the same size regardless of how the device is viewed: picas, dots, millimeters, centimeters, and inches. Other values are displayed relative to the viewing device and font proportions. |
| Font-family | Cursive, fantasy, Mono-space, Sans-serif, serif, font combination name | The description of the font style (cursive, fantasy, and so on) tells the browser to select the default font that matches the description type-remember that not everyone has the fonts that you have. If you can make sure that your site's audience has installed the fonts you want, it's a good idea to choose a specific font. For example, all users of Windows systems have the Arial font installed by default, so setting Arial to font-family is safe if your target audience is a Windows user. When you interpret a style sheet, if the browser does not detect the specified font, it automatically moves to the next font in the list (as in the example above, each font is separated by commas). If none of the fonts listed are found, the browser uses the default font. |
| Color | Color name, hexadecimal color code | Only the font name can be identified by the browser specified by the Web service. But using hexadecimal values is also a good habit. |
| Font-weight | Normal, Bold | To have a similar effect on , but only for style sheets. |
| Font-style | Normal, italic | To play a role in with ... Tags are similar and are used only for style sheets. |
| Font | Font Name | More clearly than font-family. The name of the individual font is required, not a font combination. As with font-family, if the browser cannot find the font, the default font is used. |
The attributes and values listed above are only a small part of the entire collection, but they are sufficient for you to work on the page layout, no longer using only <FONT> tags. After you have defined a style for an element, the entity of that element on the Web page takes the specified format.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
