css引入方式主要有四種,按照優(yōu)先級排列依次為:內聯(lián)>內部>導入>link
CSS引入方式
內聯(lián)
直接在標簽內部書寫style屬性
內部
在head標簽內書寫style標簽,在style標簽中指定樣式
導入
使用@import url("1.css") 導入外部css文本. @import... 需要在style標簽內書寫
link
使用link標簽,link標簽不能在style標簽中書寫.href屬性指定路徑,rel指定為樣式表固定為stylesheet,type表示為css文本固定為text/css
示例代碼
<!DOCTYPE HTML>
<html>
<head>
<title>JOE</title>
<style type="text/css">
/*p{color: green}
@import url("1.css")*/
</style>
<link href="2.css" rel="stylesheet" type="text/css">
</head>
<body>
<p /*style="color: red; font-size: 25"*/>中華人民共和國</p>
</body>
</html>
樣式選擇器
.one b{} 表示內嵌樣式
使用class=""來引用樣式
下面代碼展示了一些樣式的文本屬性.
示例代碼
<!DOCTYPE HTML>
<html>
<head>
<title>JOE</title>
<style type="text/css">
.one{font-size: 18px; font-family: Arial, sans-serif; font-style: oblique}
.one b{font-weight: normal; font-size: 0.5em}
.two{font-size: 20px; line-height: 100px; color: red; letter-spacing: 10px; word-spacing: 50px; text-indent: 30px; text-transform: capitalize; text-decoration: overline; text-align: center;}
</style>
</head>
<body>
<p class="one">我的<b>名字</b>是jack,今年30歲</p>
<p class="two">My name is rose, eightenn years old</p>
</body>
</html>
