CSS (Cascading Styel Sheet) is a series of formatting rules that control the appearance of Web pages. It is one of the essential tools for web design. Next we will start to learn the basic syntax format of css.
1. CSS definition rules
A cascading style sheet is a complete plain text file, usually used as a separate file with a "css" extension. Its content contains a set of rules that tell the browser how to arrange and display the content in specific HTML tags. CSS definition rules consist of three parts: selectors, attributes, and attribute values. The syntax is as follows:
Syntax: selector { property: value }
↑ ↑ ↑
selector {property: value}
CSS styles consist of a series of rules that are parsed by web browsers and then applied to corresponding elements of an HTML document. CSS style rules consist of three parts, namely selectors, properties, and values:
1. Selector: The selector is the html tag to define the style. After the html tag is defined as the selector, the content under the tag in the html page will be changed according to the rules defined by CSS.
2. Attribute: The style name you want to set for the HTML element refers to the content to be changed in the selector. Common ones include: font attributes, color attributes, text attributes, etc. Below is a style sheet we defined.
3. Value: The value of an attribute, consisting of a numerical value and a unit or a keyword, is used to control the display effect of a certain attribute.
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}In this stylesheet:
1. @charsetgb2312; means using the Chinese national standard character set.
2. body and p are two tags in html, and three styles are set for these two tags, namely:
font-family: Specifies the font type of the font.
"> 2. Embed style sheet
The CSS style sheet defined inside the Html page is called an embedded CSS style sheet, that is, in the head part of the HTML document, the style tag is used and a series of CSS rules are defined in the tag.
Syntax: <head><styletype=text/css><!--......--></style></head>
illustrate:
<style> indicates the start of the CSS style sheet, and the end mark is </style>. In the start mark <style>, you can add some attributes as needed, such as the attribute type=text/css in the above column, which indicates that the CSS style sheet adopts the MIME type. , the characteristic of this type is that when the browser does not support the CSS code, the CSS code is filtered to prevent the browser from displaying the CSS code in the form of source code. In order to ensure more reliability, add the comment identifier <!--...--> again in the style sheet. The CSS rules are defined in this comment identifier.
Example 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Embedded CSS style sheet</title><styletype=text/css><!--@charsetgb2312; body{font-fa mily:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body> Birds from thousands of mountains fly across thousands of paths and no trace of human beings is seen<p>Birds from thousands of mountains fly across thousands of paths and no trace of human beings is seen</p></body></html>3. Link to external style sheets
An external CSS style sheet is an external file with a .css suffix. Defining an external style sheet can be applied to multiple pages. You can use the link tag in an HTML page to connect an external CSS style sheet. The syntax is as follows:
grammar:
<linkrel=stylesheethref=*.css” type=text/css>
parameter:
1. The rel attribute indicates how the style sheet will be combined with the HTML document. rel value: Stylesheet, indicating specifying an external style sheet
2. *.css is a style sheet file saved separately.
Example 2 Define an external css file p2.css, and then connect the file in the t2.htm file.
Example 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Link to external style sheet</title><styletype=text/css><!--@charsetgb2312;body {font-family:宋体;f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>Dear, you Fly slowly, be careful of the roses with thorns in front of you<p>My dear, open your mouth, the fragrance of flowers in the wind will make you intoxicated</p></body></html>4. Inline style sheets
Inline styles refer to CSS style sheets defined in HTML-specific tags. Commonly used HTML tags are mainly some elements in BODY, such as: <p>, <h2>, <ul>, <div>, etc. The following are examples of inline styles.
Example 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Untitled Document</title></head><body><divstyle=color:blue;font- size:30px;>The fragrance of flowers in the wind will make you intoxicated</div><pstyle=color:#ff0000;font-style:italic;>The fragrance of flowers in the wind will make you intoxicated</p></body></html>
5. Import external style sheets
Importing an external style sheet means that an embedded style sheet has been created in the HTML file, but some settings of the external style sheet need to be used. In this case, you can import an external style sheet in <style> and use @import, as shown in the example below.
<html><head><styletype=text/css><!--@importurl(mystyle.css);Declaration of other style sheets--></style></head></body>..... .</body></html>
Among them, @import url(mystyle.css); means importing the mystyle.css style sheet. The imported external style sheet must be at the beginning of the style sheet, above the internal style sheet.
Example 4
Define an external css file p4.css, and then import the file in the t4.htm file
Example 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Import external style sheet</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;body {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>Thousands of birds fly across thousands of mountains and no trace of human beings is seen<p>Thousands of birds fly across thousands of mountains and no trace of human beings is seen</p></body></html>6. Inheritance of css style sheets
In the CSS style sheet, some attributes of the child tag will inherit the attributes of the parent tag. For example, the tag p is a child element of the tag body. When the tag p does not set the font color attribute, the content in p will use the color in the body. value, the following example illustrates this situation.
Example 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Embedded CSS style sheet</title><styletype=text/css><!--@charsetgb2312; body{ font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千山鸟Flying across thousands of paths, human traces are wiped out<p>Thousands of mountains, birds flying across thousands of paths, human traces are wiped out</p></body></html>7. Set multiple elements
CSS allows a single format to be applied to multiple tags. Each tag is separated by a comma when used as a selector, as shown in the following example.
Example 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Embedded CSS style sheet</title><styletype=text/css><!--@charsetgb2312; h1,h2,h3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>Thousands of birds fly across thousands of mountains and thousands of people disappear</h1><h2> Birds from thousands of mountains fly across thousands of paths, disappearing without traces of people</h2><h3>Birds from thousands of mountains fly across thousands of paths, disappearing without traces of people</h3><p>Birds from thousands of mountains fly across thousands of paths, disappearing without traces of people</p></ body></html>