This chapter will begin to introduce you to the application of CSS. Of course, the first thing to introduce is how to build a stylesheet (style Sheets), including the way the Declaration and the method applied to the Web page, and finally give you an overview of some of the CSS features. In summary, there are three ways to declare CSS: First, the basic declaration: the most typical way of CSS declaration. element {Property:value} is expressed in Chinese, that is, the component (label) {nature (attribute) name: SetPoint} For example: H3 {Color:blue} is a set of claims. Second, collective declaration: At the same time, declare one or more components (labels) (each element (label) separated by a comma) of a set or array style rules (properties) (each group of rules separated by semicolons). Component (label) {nature (attribute) Name 1: Set value 1; property (attribute) Name 2: SetPoint 2; ...} or element a (label a), Element B (label B), Element C (label C), ... {Property (attribute) Name 1: Set value 1; property (attribute) Name 2: Set value 2; ...} For example: TD {color:blue;font-size:9pt;} or td,p,div {color:blue;font-size:9pt;} Third, sub-item declaration: Many style rules are grouped and then declared separately. Element A (label a) {Nature (attribute) Name 1: Set value 1; property (attribute) Name 2: SetPoint 2;} Element A (label a) {Nature (attribute) Name 3: Set value 3; property (attribute) name 4: SetPoint 4;} For example: TD {color:blue; font-size:9pt}td {font-family: "marked in italics"; line-height:150%} Such statements do not contradict each other, because the nature of the declaration is different. If a duplicate declaration of the same property is accidentally made, only the subsequent declared value will function. To mention it, in your statement, as long as your format is correct, it will be accepted, whether it is case, blank, or line wrapping will not affect the results displayed, you can write according to your own habits.
Application method of C s S
The next step is to introduce you to the four basic methods of applying the style sheet you've created to your Web page. First, use the Style property: Add the style attribute directly to the individual component label. < element (label) style= "Properties (attribute) 1: setpoint 1; Property (Attribute) 2: Set value 2; ...} For example: <td style= "Color:blue; font-size:9pt; Font-family: "marked in italics"; Line-height:150%> The advantage of this usage is that it is dexterous to apply styles to each label, but the disadvantage is that there is no "uniformity" of the entire document. Second, use style tags: write style rules in <STYLE>...</STYLE> tags. <style type= "Text/css" ><!--style rules table--</STYLE> For example: <style type= "Text/css" ><!--BODY {color: BLUE; Background: #FFFFCC; FONT-SIZE:9PT}TD, P {color:green; Font-size:9pt}--></style> usually writes the entire <STYLE>...</STYLE> structure in the <HEAD> </HEAD> section of the Web page. The advantage of this usage is that the entire document is uniform, as long as it is a declared component that applies the style rule. The disadvantage is that the flexibility of individual components is insufficient. Third, use the LINK tag: write the style rules in the. CSS style file, and then introduce the <LINK> tag. Suppose we save the style rule as a example.css file, we simply add <link rel=stylesheet type= "text/css" href= "Example.css" to the Web page > You can apply the styles you've made in the style file. The link tag is usually written in the <HEAD> </HEAD> section of the Web page. The advantage of this usage is that you can assign the same style file to a number of files that you want to apply the same style rule to. Disadvantages are also insufficient in the flexibility of individual files or components. Iv. Introduction using @import: Much like link usage, but must be placed in <STYLE>...</STYLE>. <styleType= "Text/css" ><!--@import URL (the address, path, and file name of the introduced style sheet);--></style> For example: <style type= "Text/css" ><! --@import URL (http://yourweb/example.css);--></style> Note that the semicolon at the end of the line is absolutely indispensable! Remember, remember! Obviously, either link or @import usage can be applied directly to other people's existing stylesheets. However, based on the etiquette of the Internet, this kind of things do not do well, at least should know the other side, to obtain the consent of others first! Four application methods have their advantages and disadvantages, you can use them in a comprehensive manner, and do not contradict each other. But if the same nature attribute meets repeated declarations, consider applying the priority issue! In general, the order of precedence has the following principles: The style setting of the Web designer, the user's style setting, the style setting of the browser, the style settings of the Style property, the style setting of the link come in, the style setting of the back face declaration, and the style settings of the front. The link comes in style setting "refers to using the above mentioned link tag and @import introduced in the two application mode of the link in the style set. The above is the most basic CSS declaration and application methods, with these basic understanding and methods, you can start to build your style sheet! In addition to the basic declarations and application methods mentioned above, there are other ways of declaring and applying them, which will be described in the next chapter.
The above is the second chapter of the application of CSS content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!
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
