CSS基础

# CSS基础

CSS，层叠样式表(Cascading Style Sheets),是一种样式表达语言，用来描述HTML文档的呈现。

书写位置：title标签下添加style双标签，style标签里书写CSS代码，也可以通过外部文件调用引入。

```html
    <title>Document</title>
    <style>
        /* CSS代码 */
        /* CSS注释,单行或多行 */
        p {
            /*color调整字体颜色*/
            color: deepskyblue; 
            /*colorfont-size*/
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p>体验CSS</p>
</body>
```

## CSS引入方式

- 内部样式表

CSS代码写在style标签里面

```css
/* CSS代码写法 */
选择器 {
    属性：值；
    属性：值；
}
```

- 外部样式表

开发使用，CSS单独写在.css文件

在HTML使用link标签引入

```html
/* CSS文件 */
/* 这个是css文件 */
p {
    color:red;
    font-size: 20px;
}
/* HTML文件，通过link标签指定关系与css文件路径 */
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="../../CSS/my.css">
</head>

<body>
    <p>P标签</p>
    <div>div标签</div>
</body>

</html>
```

- 行内样式

```html
/* 行内样式在标签的style属性中写样式，一般配合js使用 */
<div style="color:green; font-size: 25px; text-align: center;";>div标签</div>
```

## 选择器

选择器用于选择指定内容和标签进行属性设置的。

分类：

- 标签选择器

使用标签名作为选择器，选择同名标签设置相同的样式。

```html
/* CSS标签选择器 */
<style>
p {
    color:red;
    font-size: 20px;
}
</style>
```

- 类选择器

查找标签，差异化设置标签的显示效果。

```html
/*
1.在style定义类名称.类名称
2.在需要设置样式的标签使用class属性定义类名称
3.类选择器可以多个标签使用
4.一个标签可以使用多个类选择器,多个类名使用空格隔开
*/
<style>
        p {
            text-align: center;
        }
        .green {
            color: green;
            font-size: 20px;
        }
</style>

<p class="green red">P标签</p>
<p class="green">class类选择器</p>
```

tips:

1. 类名自定义，不用使用纯数字或中文，尽量使用英文名称
2. 类名见名知意，多个单词可以使用连字符-

- id选择器

用于查找标签，差异化设置标签的显示效果。

场景：id选择器一般配合js，很少用来设置CSS样式。

```html
/*
1.定义id选择器 #id名
2.在标签里添加id属性，id="id名"
3.同一个id选择器在一个页面只能使用一次
*/
<style>
        #red {
            color: red;
        }
</style>
<div id="red">div标签</div>
```

- 通配符选择器

查找页面所有标签，设置相同样式。

通配符选择器：*{},不需要调用

```html
* {
color:red;
}
```

案例：

```html
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .div2 {
            width: 200px;
            height: 200px;
            background-color:green;
        }
    </style>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
```