CSS渲染之各種炫技

疯狂Python發表於2024-09-03
CSS

HTML是為了設計基本佈局，CSS是為了渲染HTML，而JS是為了實現動態效果。

1.引入CSS的兩種方式

<1> 直接在html頁面的<head>標籤裡寫入（寫在<style>標籤裡）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            color:red;
        }
    </style>
</head>
<body>

<div class="test">測試程式碼</div>
</body>
</html>
<2> 匯入css檔案
先寫個xr.css檔案（xr是渲染的意思，我自己定義的），內容如下：
.test{
    color:red;
 }

然後在html正文裡引入css檔案：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="xr.css" rel="stylesheet">
</head>
<body>
<div class="test">測試程式碼</div>
</body>
</html>

2.怎樣寫CSS程式碼來渲染html

<1> .用來渲染class內容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            color:red;
        }
        p.test{
            color:blue;
        }

    </style>
</head>
<body>
<div class="test">測試程式碼</div>
<p class="test">你好</p>
</body>
</html>
就是說，不同的標籤都可以定義相同的class，可以透過標籤區分，比如div.class、p.class

<2> #id內容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #test{
            color:red;

    </style>
</head>
<body>
<div id="test">測試程式碼</div>
<div id="abc">你好</div>
</body>
</html>

只要，id是唯一標識，不要設定成一樣的，其實一樣的貌似也不會出錯。

下面再介紹一些CSS的知識點：

1、去掉a標籤中的下劃線
a{
  text-decoration:none;
}

2、懸浮
float:left/right

3、引入圖片
background/background-img:url("images/圖片.png") --images/圖片.png指的是圖片路徑，根據實際情況寫

4、根據外邊距設定其中一個div塊居中
用margin:0 auto來設定，程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #test{
            width:100%;
            height:44px;
            background-color:blue;
        }
        .abc{
            width:1016px;
            height:44px;
            background-color:pink;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div id="test">
    <div class="abc"></div>
</div>

</body>
</html>

5、position定位
在父級標籤裡設定：
position:relative;
在子級標籤裡設定（比如相對於父級靠右150px）：
position:absolute;
right:150px;
照著上面這樣寫就可以實現定位。

好了，就先說這麼多吧，其實CSS很簡單，遇到了百度就行。重要的不是一定要記住多少標籤，而是知道如何百度，能夠輕鬆找到，這才是能耐。
你們發現了吧？道法術器，我基本上都是在給你們傳輸道的層面，因為這才是萬法之根本，可以讓你一通百通的東西。

相關文章