web前端--CSS(一)

前端時間學了些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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章