Three kinds of CSS style sheets
External style sheet
Effect of an external style sheet: setting an external style sheet, the page Html head added by link tag marking, the rel : Specifies which style for this stylesheet , type : Specifies the format of text / CSS , Herf : to be assigned to the application css style file. This style sheet to the current table the entire page results,
Internal style sheet
Role of the internal style sheet: setting an internal style sheet, the page Html head added by adding in the head style label tag, type : Specifies the format of text / CSS , this applies only to the current stylesheet document,
Inline style
The role of an inline style sheet: setting an inline style sheet, Html page in the body added in a statement in style tags added element, are included in the style attribute. In the three style sheet, inline style sheet of the highest priority, if there are three pages at the same time a style sheet, inline style overrides the other two styles
CSS syntax
CSS rule consists of two main parts: a selector, and one or more statements.
selector {declaration1; declaration2; ... declarationN }
Each statement consists of an attribute and a value. Attribute (property) that you want to set the style attributes (style attribute). Each attribute has a value. And attribute value are separated by a colon.
selector {property: value}
1, an external style sheet
<!DOCTYPE html>
<html>
<head>
<title>层叠样式表之外部样式表</title>
<link rel="stylesheet" type="text/css" herf="direction:\example.css">---通过herf连接到example.css文件
</head>
<body>
<h1>层叠样式表学习</h1>
</body>
</html>
1.1, an external style sheet css file
h1{color: red;}
h1{text-align: center;}
样式以分号隔开，可以写在同一行,但是一行写一个样式是最推荐的
h1{color:red; text-align: center;}
2, internal style sheet
<!DOCTYPE html>
<html>
<head>
<title>层叠样式表之内部样式表</title>
<style type="text/css">---内部样式表开始标记
h1{color: pink; text-align: center;}---针对哪一个元素进行样式制定
</style>----内部样式表结束标记
</head>
<body>
<h1>层叠样式表之内部样式表</h1>
</body>
</html>
3, the inline style sheet
<!DOCTYPE html>
<html>
<head>
<title>层叠样式表之内联样式表</title>
</head>
<body>
<h1 style="color: red; text-align: right;"></h1>---针对h1标签设置内联样式，其优先级最高
</body>
</html>