这是我参与[第五届青训营]伴学笔记创作活动的第二天

1. CSS基础

1.1 什么是CSS

CSS(Cascading Style Sheets),用来定义页面元素的样式，可以用来：

-   设置字体和颜色
-   设置位置和大小
-   添加动画效果

1.2 CSS的使用方法

在页面中使用CSS有三种方法：外联，嵌入，内敛。

1.外联
html部分：
<body>
    <div>
        <span>我是一个span标签</span>
    </div>
</body>
再新建一个.css的文件：
<body>
    {
    background-color:yellow;/*这里将body的背景颜色改为黄色*/
    }
</body>

效果如下：

屏幕截图 2023-01-19 145844.png

2.嵌入
CSS部分：
<style>
        body{
            background-color: blue; /*这里将body的背景颜色改为蓝色*/
        }
</style>

HTML部分：
<body>
    <div>
        <span>我是一个span标签</span>
    </div>
</body>

效果如下：

屏幕截图 2023-01-19 145907.png

3.内联
<body style="background-color: green;">/*这里将body的背景颜色改为绿色*/
<div> 
<span>我是一个span标签</span> 
</div>

效果如下：

屏幕截图 2023-01-19 145935.png

1.3 选择器

定义：选择器selector是用来找出页面中的元素，以便给它们设计样式。

常用的有标签选择器、ID选择器、类选择器、通配选择器和属性选择器。并且选择器有优先级，优先级越高页面内容就会优先使用该选择器来控制页面内容.优先级从高到低的排序为：ID选择器>类选择器>标签选择器>通配选择器>属性选择器。

例如：

<h1>
  我是被通配选择器选择
</h1>
<h3>
    我是被通配选择器选择
</h3>
<p>
    我是被标签选择器选中的
</p>
<h1 id="app">
    我是被ID选择器选中的
</h1>
<h2 class="qwe">
    我是被类选择器选中的
</h2>
<input type="text" value="我是被属性选择器选中的" disabled>
<style>
*{
  color: red;
}
p{
    font-size:18px;
    color: blue;
}
#app{
    font-size:23px;
    color:  rgb(255, 0, 212);
}
.qwe{
    font-size:23px;
    color: green;
}
[disabled]{
            background-color: #eee;
            color: #888;
            border-radius: 15px;
}
</style>