● Why CSS:
· A set of styles can be called on multiple objects
· Easy to learn and understand syntax (easier to learn than HTML syntax. After learning html, it will be very easy to learn CSS)
· Rich style effects
· Is the basis of DHTML
· One advantage of CSS layout is that pages can be modified in batches, which can separate the document structure from the presentation layer,
Reduces workload and server load, and increases the scalability and application of the site.
● CSS classification: it can be divided into three types by position.
1. Embedded style:
embedded style is used in HTML tags, you can easily define a style for an element. The embedded style directly adds the style parameter to the HTML Tag. The content of the style parameter is the attributes and values of CSS, as shown in the following example:
P style =" color: sienna; margin-left: 20px; " >
This is a paragraph
P >
the color of this section is Adobe, and the left margin is 20 pixels. -->
The content in the quotation marks behind the style parameter is equivalent to the content in the style sheet braces.
Note: The style parameter can be applied to any body element (including the body itself), except basefont, Param, and script.
2. The internal style sheet is
This is the most typical CSS declaration method, but I personally think: it affects the appearance of the page;
The internal style sheets place the style sheets in the
<Head>
Note: Some earlier browsers do not recognize the STYLE tag, which means that earlier browsers ignore the content in the STYLE tag, and the content in the STYLE tag is directly displayed on the page as text. To avoid this situation, we add HTML annotations (<! -- Note -->) Hide the content without displaying it:
3. External style sheets:
To call an external style sheet, save the style sheet as a style sheet file, and then use <link> to mark the link to the style sheet file on the page, the <link> mark must be placed in the
In this example, the browser reads the defined style sheet in document format from the mystyle.css file. Rel = "stylesheet" refers to the external style sheet used in the page. Type = "text/CSS" indicates that the file type is style sheet text. Href=”mystyle.css "is the file location. Media is a media type. These media types include screen, paper, speech synthesis devices, and Braille reading devices.
An external style sheet file can be applied to multiple pages. When you change the style sheet file, the style of all pages changes accordingly. It is very useful when creating a large number of websites with the same style pages, which not only reduces the repetitive workload, but also facilitates later modification and editing, and reduces repeated downloads during browsing.Code.
● CSS comments
To help you or others better understand your CSS code in the future, you can write CSS code comments. CSS code comments start with/* and end.
/* Define paragraph style sheets */
1. Basic syntax
The definition of CSS consists of three parts: selector, properties, and value ).
The basic format is as follows:
Selector { Property : Value } /* (Selector {property: Value }) */
The selector can be in multiple forms. Generally, You need to define the HTML tag of the style, such as body, P, table ......, You can use this method to define its attributes and values. The attributes and values are separated by colons:
Body { Color : Black }
The selector body refers to the page body. color is the attribute that controls the text color, and black is the color value. In this example, the text in the page is black.
If the attribute value is composed of multiple words, quotation marks must be placed on the value. For example, the font name is often a combination of several words:
To make the style sheet you define easy to read, you can use the branch writing format:
P
/*(The section is arranged in the center, the text in the section is black, and the font is Arial)*/
2. Select a Contact Group (collective declaration and sub-item Declaration)
You can combine the delimiters of the same attributes and values to separate the delimiters with commas (,) to reduce repeated style definitions:
/*(This group contains all title elements, and the text of each title element is green)*/
P, table{Font-size:9pt}
/*(The text size in paragraphs and tables is 9 characters)*/
/*The effect is equivalent:*/
P{Font-size:9pt}
Table{Font-size:9pt}
3. class selector
You can use class delimiters to define different styles for the same element classification. When defining class delimiters, add a dot before the name of the custom class. If you want two different paragraphs, one of which is aligned to the right and the other is centered, you can first define two classes:
P. Right { Text-align : Right }
Then you can add the class parameter that you defined in HTML tags to different paragraphs:
<PClass= "Center">
This section is arranged in the center.
</P>
<PClass= "Right">This section is aligned to the right
</P>
<PClass= "Center">
This section is arranged in the center.
</P>
Note: The class name can be any English word or a combination of numbers and numbers starting with English. Generally, it is briefly named based on its functions and effects.
Another usage of class selector is to omit the HTML Tag name in the selector, so that several different elements can be defined as the same style:
(Class delimiters of the definition. Center are arranged in the center of the text)
Such a class can be applied to any element. In the following example, both the H1 element (Title 1) and the P element (paragraph) are classified as the "center" class, so that the style of the two elements follows the class selector ". Center:
< H1 Class = "Center" >
Note: This class selector for omitting HTML tags is the most commonly used CSS method. Using this method, we can easily apply pre-defined class styles to any element.
4. ID Selector
On the HTML page, the ID parameter specifies a single element. The ID selector defines a separate style for this single element.
The application of the ID selector is similar to the class selector. You only need to replace the class with the ID. Replace the class in the above example with ID:
The definition ID selector must add a "#" sign before the ID name. Similar to the class selector, there are two methods to define the attributes of the ID selector. In the following example, the ID attribute matches all the elements of ID = "Intro:
# Intro
(The font size is 110% of the default size, bold, blue, and transparent background color)
In the following example, the ID attribute only matches the paragraph elements of ID = "Intro:
Note: The ID selector has many limitations. You can only define the style of an element separately. It is generally used only in special cases.
● Define the link Style
In CSS, four pseudo classes are used to define the link styles: A: Link, A: visited, A: hover, And A: active. For example:
A: Link { Font-size : 18pt ; Text-Decoration : None ; Color : Blue ; }
The preceding statements define the style of "link, accessed link, mouse over, and mouse over. Note: The data must be written in the above sequence; otherwise, the display may be different from what you expected. Remember that their order is "lvha ".
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
