前端時間學了些HTML的基本內容,現在開始學CSS,CSS之後纔是真的開始前端,Javascript,jquery等等。。入題
一、CSS基本瞭解
CSS層疊樣式表(Cascading Style Sheets)是用來表現html或者xml的一種語言,可以簡單理解爲CSS是用來修飾html網頁的一種語言。
二、應用
添加到html中,來修飾網頁,以下是三種樣式表。
1、元素樣式表
2、文檔樣式表
3、外部樣式表(常用,將html和css樣式分離,結構清晰)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS樣式表</title>
<link rel="stylesheet" type="text/css" href="color.css">
<!-- link鏈接到外部樣式表,採用color.css,對應word3-->
<style type="text/css">
.class2:hover{
font-size:30px;color: #ff2539;
/*設置文檔內嵌樣式表,所有word標籤都將這個格式50,紅色*/
}
</style>
</head>
<body>
<p class="class1" style="font-size: 20px;color: #2066ff">元素內嵌樣式表</p><br>
<p class="class2">文檔內嵌樣式表</p><br>
<p class="class3">外部CSS樣式表</p><br>
<!--若都設爲word,則出現層疊效果,優先級:元素>文檔>外部-->
<!--動作選擇器hover:鼠標移到此處字體變大顯色-->
</body>
</html>
word3中的外部樣式表,需要在project中新建一個color.css文件,內容如下:
.class3{
font-size:40px;
color: #f123ff;
}