一、Basic CSS 知识整理

一、编写CSS的几种方式

<style>
    /* id选择器 */
    #id_test {
        color: red;
    }
    
    /* 标签选择器 */
    h2 {
        color: blue !important;
    }
    
    /* 类选择器 */
    .pink-text {
        color: pink;
    }
    
    /* [attribute=value] */
    a[target=_blank] {
        color: black;
    }
</style>
<p id="id_test"> id test </p>
<h2>tag test <h2>
<p class="pink-text">class test</p>
<a href="http://www.baidu.com" target="_blank"> css selector test </a>

如果声明的属性冲突，那么按照 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器，同级别的按从下到上覆盖。

如果某个属性不想被覆盖，可以添加属性 !important.

二、最常见的css属性整理

<style>
    .common-text {
        /* 文字颜色 */
        color: gray;
        /* 文字大小 */
        font-size: 16px;
        /* 文字样式 */
        font-family: monospace;
    }
    
    .background-color {
        /* 背景颜色 */
        background-color: black;
    }
    
    .size {
        /* 内部间距 padding */
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 40px;
        /* 以上也可以写为 padding: 10px, 20px, 30px, 40px; */
        
        /* 外部间距 margin */
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 30px;
        margin-left: 40px;
        /* 以上也可以写为 margin: 10px, 20px, 30px, 40px; */
        
        /* 宽度高度 */
        width: 200px;
        height: 200px;
    }
</style>
<div class="size background-color">
    <p class="common-text">常见css属性整理1</p>
</div>

慢慢整理，记住常用的，其他的可以临时查。

三、css参数化使用

<style>
    /* :root 表示html标签，最高层次 */ 
    :root {
        /* 定义两个参数 */
        --total-text-color: red;
        --total-text-background: black;
    }
    
    /* 使用参数 */
    .test1 {
        color: var(--total-text-color, black);
    }
    
    .test2 {
        color: var(--total-text-color, gray);
        background-color: var(--total-text-background, black);
    }
    
    /* 重写参数 */
    .test3 {
        --total-text-color: blue;
    }
    .test3 p{
        color: var(--total-text-color, gray);
    }
</style>

<p class="test1">test1</p>
<div class="test2">
    <p>test2</p>
</div>
<div class="test3">
    <p>test3</p>
</div>