HTML第二課——css

時間 2019-12-05

標籤 html 第二 css 欄目 HTML 简体版

原文原文鏈接

請關注公衆號：自動化測試實戰css

先給你們提個建議，就是用sublime編輯器來編寫。用其餘的也無所謂，我只是建議，由於這個會幫你自動補全不少代碼。html

css概念

css叫層疊樣式表。意思就是一層一層的疊加。做用就是讓頁面中的可視化標籤變得好看。less

css的三種寫法

內聯式編輯器

經過標籤裏的style屬性設置。測試

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">
</head>
<body>    <!-- 這是註釋 -->    <!--經過css改變文字顏色：color屬性 -->    <div style="color: red; border: 1px solid red; display: inline;">This is a div tag</div>    <div style="color: rgb(15, 20, 220);">This is a div tag</div>    <div style="color: #ccff66;">This is a div tag</div>
</body>
</html>

顏色的書寫方式：spa

英文直接書寫code
rgb r: red, g: green, b: blue，全部顏色都是紅綠藍。取值0-255, rgb(0，0，0)就表明黑色，rgb(255, 255, 255)表明白色，rgb(0, 255, 0)表明綠色htm
十六進制：前面要加#，好比#ccff00ip

之後都用十六進制寫顏色。utf-8

嵌入式

寫在<head>裏的<style>標籤。

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <style type="text/css">        /*            css的註釋寫法        */        div{
            border: 1px solid red;            
            display: inline;        
        }    </style></head><body>    <!-- 這是註釋 -->    <!--經過css改變文字顏色：color屬性 -->    <div>This is a div tag</div>
</body>
</html>

引用式

經過head標籤裏的link標籤的href屬性引入外部的css文件。rel="stylesheet"是固定值，就這麼寫，若是你用sublime編輯器，這個是自動補全的。

文件結構：

css文件夾裏面有一個index.css文件。

lesson2.html

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <!--    <style type="text/css">        /*            css的註釋寫法        */        div{            border: 1px solid red;            display: inline;        }    </style> -->    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>    <!-- 這是註釋 -->    <!--經過css改變文字顏色：color屬性 -->    <div>這是一個div標籤</div>
</body>
</html>

index.css

div{
    font-family: 'Microsoft Yahei';    
    font-size: 20px;    
    border: 1px solid red;    
    display: inline;
}

之後寫css只用引用式；之後寫css只用引用式；之後寫css只用引用式

注意：若是你在css裏寫了樣式，也在div標籤裏寫了style，那樣會有限選擇div裏面的style，這就是就近原則。

明天接着講css剩下的知識點，你們先消化一下上面的知識。

1. HTML第二課——css【2】
2. HTML第二課
3. 第二天HTML&CSS
4. HTML第三課——css盒子
5. HTML+CSS第一課：初識HTML
6. html第二課html圖像標記與css入門
7. Html+CSS 學習第二天
8. html第十二課input
9. HTML+CSS第三課：表格與表單
10. CSS+HTML(二)------HTML標籤（二）
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• RxJava操作符（二）Transforming Observables
• Kotlin學習（二）基本類型

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。