1、CSS基本用法

時間 2019-12-18

標籤 css 基本用法欄目 CSS 简体版

原文原文鏈接

一. 簡介：css

　　爲了讓網頁元素的樣式更加豐富，也爲了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式徹底交給CSS，html文檔變得更加簡潔。html

二. CSS基本語法及頁面引用：瀏覽器

　　練習1：外聯式：經過link標籤，連接到外部樣式表到頁面中。字體

<link rel="stylesheet" type="text/css" href="css/main.css">

　　一、建立html文件：css的引用.html；並輸入內容：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    
    <div>這是一個div標籤</div>

</body>
</html>

　　二、建立css文件：main.csscode

div{
    font-size: 26px;    /*默認字體大小爲16px*/
    color: red;
}

　　三、瀏覽器預覽效果：orm

　　練習2：嵌入式：經過style標籤，在網頁上建立嵌入的樣式表。htm

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

　　一、編輯html文件：blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 第1種插入樣式的方式：外聯式 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    <!-- 第2種插入樣式的方式：嵌入式 -->
    <style type="text/css">
        
        h1{
            font-size: 20px;
            color: gold;
        }

    </style>


</head>
<body>

    <div>這是一個div標籤</div>

    <h1>頁面標題</h1>

</body>
</html>

　　二、瀏覽器預覽效果：文檔

　　練習3：內聯式：經過style標籤，在網頁上建立嵌入的樣式表。

<div style="width:100px; height:100px; color:red ">......</div>

　　一、修改html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 第1種插入樣式的方式：外聯式 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    <!-- 第2種插入樣式的方式：嵌入式 -->
    <style type="text/css">
        
        h1{
            font-size: 20px;
            color: gold;
        }

    </style>


</head>
<body>

    <div>這是一個div標籤</div>

    <h1>頁面標題</h1>

    <!-- 第3種插入樣式的方式：內聯式==>直接在標籤中寫樣式 -->
    <a href="http://www.baidu.com" style="font-size:20px;color:pink">連接到百度</a>    <!-- 連接 -->

</body>
</html>

　　二、瀏覽器預覽效果：

二. CSS經常使用文本樣式：

　　一、經常使用的應用文本的css樣式：

color 設置文字的顏色，如： color:red;
font-size 設置文字的大小，如：font-size:12px;
font-family 設置文字的字體，如：font-family:'微軟雅黑';
font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
line-height 設置文字的行高，設置行高至關於在每行文字的上下同時加間距，如：line-height:24px;

font 同時設置文字的幾個屬性，寫的順序有兼容問題，建議按照以下順序寫： font：是否加粗字號/行高字體；如： font:normal 12px/36px '微軟雅黑';
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px

text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中

　　二、練習:

　　（1）編輯html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經常使用文本樣式</title>

    <style type="text/css">
        div{
            font-size: 24px;                  /* 文字大小 */
            color: green;                     /* 文字顏色 */
            font-family: 'Microsoft Yahei';   /* 文字字體 */
            font-style: italic;               /* 文字傾斜 */
            line-height: 40px;                /* 文字行高 */
        }

        h1{
            font-weight: normal;              /* 文字是否加粗，此時normal不加粗，加粗使用bold */

        }
    </style>

</head>
<body>
    
    <h1>樣式演示</h1>
    <div>
        爲了讓網頁元素的樣式更加豐富，也爲了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式徹底交給CSS，html文檔變得更加簡潔。
    </div>

</body>
</html>