HTML5學習筆記<八>: 1. CSS3基礎之入門基礎知識

時間 2019-12-07

標籤 html5 html 學習筆記 css3 css 基礎入門知識欄目 HTML5 简体版

原文原文鏈接

CSS基礎-介紹及語法

1. CSS介紹

概述:css

　　CSS指層疊樣式表html

　　CSS樣式表極大地提升了工做效率css3

2. CSS基礎語法

　　selector { property1 : value1; property2: value2 ;}spa

例: h1 {color:red; font-size:14px;}code

屬性大於1個以後, 屬性之間用分號隔開. 若是值大於1個單詞, 則須要加上引號:p{font-family: "sans serif";}htm

建立css文件, 打開IntelliJ IDEA, 新建一個項目, 右擊項目文件夾, new--> file, 出現的對話框中鍵入mycss.css(需指定文件擴展名)blog

並建立一個HTML file.繼承

代碼:it

index.htmlio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>應用了樣式表</h1>
</body>
</html>

mycss.css

h1 {
    color: red; font-size: 50px;
}

3. CSS高級語法

1. 選擇器分組:

　　h1, h2, h3, h4, h5, h6{color:red;}

代碼:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>應用了樣式表</h1>
    <a>h2樣式</a>
    <h2>h3應用了嗎</h2>
    <h3>h3樣式</h3>

</body>
</html>

mycss.css

h1,h2,a {
    color: red; font-size: 50px;
}

2. 集成:

　　body{color:green;}

代碼:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>應用了樣式表</h1>
    <a>h2樣式</a>
    <h2>h3應用了嗎</h2>
    <h3>h3樣式</h3>
    <p>hell css3</p>
    南心芭比
</body>
</html>

mycss.css

h1,h2,a {
    color: red; font-size: 50px;
}
body {
    color: blueviolet;
}

運行結果:

說明:標籤h1, h2, a 都有樣式表, 因此以本身的樣式表爲主.

　　標籤h3沒有樣式表, 則繼承body的樣式表.

4. 派生選擇器

派生選擇器:

　　經過依據元素在其位置的上下文關係來定義樣式

　　代碼:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p><strong>標籤 hello css</strong></p>
<ul>
    <li><strong>li 標籤: hello strong</strong></li>
</ul>
</body>
</html>

mycss.css

li strong {
    color: green;
}
strong {
    color: blue;
}

運行結果:

說明: 經過li+空格+strong的方式來定義列表項中的strong標籤的樣式, 而p標籤中不會影響到

　　若是單獨定義一個strong樣式表, 除了指定定義了同名的strong標籤的樣式以外的全部strong標籤都將被定義此樣式

5. id選擇器

1. 概述:

　　id選擇器能夠爲標有id的HTML元素指定特定的樣式

　　id選擇器以"#"來定義樣式

代碼:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- 爲p標籤加上id -->
<p id="pid"> hello css</p>
</body>
</html>

css

/*爲id選擇器添加樣式*/
#pid {
    color: green;
}

一般狀況下咱們是把<div> 定義爲id選擇器.

2. id選擇器和派生選擇器

　　目前比較經常使用的方式是id選擇器經常用於創建派生選擇器

代碼:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="divid"> 這是第一個div選擇器
    <p>id選擇器和派生選擇器</p>
</div>
</body>
</html>

css

#divid p{
    color: green;
}

運行結果:

說明: <div>內的文字沒有樣式, 而<div>內的<p>有樣式, 這是id選擇器與派生選擇器的用法

6. 類選擇器

1. 類選擇器:

　　類選擇器是以一個點顯示

2. class也能夠用做派生選擇器

代碼:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<!-- 類選擇器 -->
<p class="pclass">這是一個類選擇器</p>
<div class="dclass"> 類選擇器
    <!-- class下的派生選擇器 -->
    <p>我是派生選擇器</p>
</div>
</body>
</html>

css

/*類選擇器*/
.pclass{
    color: blue;
}
/*類選擇器的派生選擇器p*/
.dclass p{
    color: red;
}

7. 屬性選擇器

1. 屬性選擇器

　　對帶有指定屬性的HTML元素設置樣式

2. 屬性和值選擇器

代碼:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<style type="text/css">
    /*屬性選擇器*/
    [title]{
        color: cadetblue;
    }
    /*屬性和值選擇器*/
    [title=te]{
        color: aquamarine;
    }
</style>
</head>
<p title="title">屬性選擇器</p>
<!--當設置了屬性和值選擇器, 則設置屬性時, 值必須給指定的值, 不然將不生效 或 指定屬性選擇器-->
<p title="te">屬性和值選擇器</ptit>
</body>
</html>