table of Contents
Basic syntax of class selector
Basic syntax of HTML element selector
Basic syntax of wildcard selector
Inline elements and block elements
CSS features: realize the separation of web content and style
CSS rules consist of two main parts: selectors, and one or more declarations:
Four selectors
- Class selector (class selector)
- id selector
- html element selector
- Wildcard selector
CSS selector priority: ID selector> class selector> HTML element selector body> wildcard selector
Basic syntax of class selector
.类选择器名{
属性1：属性值；
属性2：属性值；
......
}
Basic syntax of ID selector
#id选择器名{
属性1：属性值；
属性2：属性值；
......
}
Basic syntax of HTML element selector
某个html元素{
属性1：属性值；
属性2：属性值；
......
}
Basic syntax of wildcard selector
*{
属性1：属性值；
属性2：属性值；
......
}
How to insert a style sheet
- External style sheet
- Internal style sheet
- Inline style
External style sheet
When styles need to be applied to many pages, an external style sheet will be the ideal choice. In the case of using an external style sheet, you can change the appearance of the entire site by changing a file. Each page uses the <link> tag to link to the style sheet. The <link> tag is at the head (of the document):
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>The external style sheet can be edited in any text editor. The file cannot contain any html tags. The style sheet should be saved with a .css extension.
Internal style sheet
When a single document requires a special style, the internal style sheet should be used. You can use the <style> tag to define an internal style sheet in the document head
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>Inline style
Due to the mixing of presentation and content, inline styles lose many of the advantages of style sheets. Use this method with caution, for example when the style only needs to be applied once to an element.
<p style="color:sienna;margin-left:20px">这是一个段落。</p>Inline elements and block elements
-
Common in-line elements are <a> <span> <input type=“XXX”>
-
Common block elements are <div> <p>
-
In-line elements only occupy the width of their own content, not the entire line.
-
Regardless of its content, the block element occupies the entire line and is displayed in a new line.