筆記：CSS基礎(chǔ)

印度阿三17 2019-09-23

展開全文

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

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

　　2、優(yōu)先級：行內(nèi)模式>內(nèi)嵌模式>外鏈?zhǔn)?br>二、CSS語法：
　　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">這是一級標(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(對齊方式) 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>

效果圖：