css樣式

caoruipeng發表於2024-03-21
CSS

樣式的引入方法

內部樣式

點選檢視程式碼 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body {
            background-color: #000;
        }
    </style>
</head>

行內樣式

<span style="color: red;">紅色字型</span>

外部樣式 link引入和@import引入

注意@import引入必須放在 style的前面
<link href="a.css" rel="stylesheet" type="text/css"/>

點選檢視程式碼 
    <style type="text/css">
        @import url("a.css");
        body {
            background-color: #fff;
        }
    </style>

CSS特性 繼承性

繼承性是指後代元素繼承祖先元素的樣式，繼承樣式主要包括字型、文字等基本屬性。如：字型、字號、顏色、行距等。不允許繼承的屬性有邊框、邊界、補白、背景、定位、佈局、尺寸等。

CSS特性 層疊性

層疊性是指對同一個物件應用多個樣式的能力 不同選擇器的權重不一樣，注意區分 important表示權重最高 無限高
font-size: 12px!important;

CSS選擇器

元素選擇器:選擇網頁中的元素(標籤選擇器、類選擇器、ID選擇器、通配選擇器)

標籤選擇器

直接選擇所有html標籤，如body、p、a等
body{ font-size: 12px!important; }

類選擇器

以(.)為字首，後面是一個類名，直接在標籤上使用
.red{color: red;}

<span class="red">紅色字型</span>

ID選擇器

以(#)為字首，後面是一個類名，直接在標籤上使用,id為box的標籤將會使用該樣式
#box{color: red;}

<span id="box">紅色字型</span>

通配選擇器 *

匹配文件中所有標籤
*{ margin: 0; padding: 0; }

元素選擇器注意事項

可以在元素選擇器之前加上限定標籤名，用於限定它的應用範圍。如下這個樣式只能用於div元素，對其他元素將無效
div#box{color: red;}

相關文章