css学习Day01

开心一家 · 發表於 2023-7-22 17:20:00

css学习Day01

css语法

选择器{

声明1；

声明2；

声明3；

}

一、css四种导入方式

行内样式

<h1 style="color:red">
    标题
</h1>

内部样式

<head>
    <style>
        h1{
            color:green
        }
    </style>
</head>

外部样式

链接式：
```
<link rel="stylesheet" href="css文件地址">
```
优先级：就近原则（谁离元素更近用谁的）

拓展：
外部样式（2）

导入式（css2.1版本，不建议使用，在大网页时会出现先出现骨架再出现渲染）：
```
<head>
    <style>
        @import url("css地址")
    </style>
</head>
```

二、选择器

作用：选择页面上的某一个元素

标签选择器

<head>
   <style> h1{
    color="red"
    }</style>
</head>   
<body>
    <h1>
        标题
    </h1>
</body>

类选择器

好处：可以多个标签归类，时同一个class，可以复用

<head>
   <style>  <!--类名可以随意取-->
       .class{       
           
       }
    </style>
</head>
<body>
    <h1 class="类名">
        标题
    </h1>
</body>

id选择器

（id必须保证全局唯一！不可复用）

<head>
   <style>  
       #id名称{
           
       }
    </style>
</head>
<body>
    <h1 id="  ">
        标题
    </h1>
</body>

优先级：id选择器>class选择器>id选择器

来源：https://www.cnblogs.com/swz20020720/p/17573762.html

css学习Day01

css学习Day01

一、css四种导入方式

二、选择器

瀏覽過的版塊