筆記：CSS基礎(chǔ)

印度阿三17 2019-09-23

展開(kāi)全文

一、CSS(層疊式樣式表)，決定頁(yè)面怎么顯示元素
　　1、引入方式：

行內(nèi)樣式，在當(dāng)前標(biāo)簽元素中直接使用 style 的屬性。
內(nèi)嵌方式，在<head>中寫(xiě)樣式；
外聯(lián)式，<link>引入外部CSS文件；使用@import 在<haed></head> 之間引用。（需要XX.css）

　　2、優(yōu)先級(jí)：行內(nèi)模式>內(nèi)嵌模式>外鏈?zhǔn)?br>二、CSS語(yǔ)法：
　　1、內(nèi)嵌：
　　　　選擇器{屬性1：value1；屬性2：value2；}
　　　　　　注釋 /* */
　　　　選擇器
　　　　第一種情況：標(biāo)簽名，影響其他同類型的標(biāo)簽；

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {
        color:red;
        text-align:center;
        }
    </style>
</head>
<body>
    <div>我是黑客</div>
</body>
</html>

　　　　第二種情況；id 選擇器

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #hacker
        {
            color: green;
            text-align: center;
        }
    </style>

</head>
<body>
    <div id="hacker">我是黑客</div>
</body>
</html>

　　　　第三種情況： class ，可以在不同的元素中去使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .test
        {
            color: red;
            text-align: center;
        }
    </style>

</head>
<body>
    <h1 class="test">這是一級(jí)標(biāo)題</h1>
    <p class="test">這是段落</p>
</body>
</html>

　　2、外鏈

　　需要XX.css

　　　　例：mystyle.css

        #hacker{
            color: red;
            text-align: center;
        }

<link>：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div id="hacker">我是黑客</div>
</body>
</html>

@import

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        @import url(css/mysql.css)
    </style>
</head>
<body>
    <div id="hacker">我是黑客</div>
</body>
</html>

三、常用樣式：

后背景：backgroup-color backgroup=image
字體：color size text-align(對(duì)齊方式) text-indet(字體)
盒子模型：

　　　　Margin：外邊框
　　　　Border：邊框
　　　　Padding：內(nèi)邊框
　　　　Content：顯示數(shù)據(jù)的地方（文本、圖片等）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #hacker{
            background-color: lightgrey;
            width: 300px;
            border: 20px solid red;
            padding: 10px;
            margin: 20px
        }
    </style>
</head>
<body>
    <div id="hacker">我是黑客</div>
</body>
</html>

效果圖：

來(lái)源：https://www./content-4-465401.html

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：印度阿三17 > 《開(kāi)發(fā)》

舉報(bào)/認(rèn)領(lǐng)